/*
    Orya Filter start card (Task 27953) — the centred DxWindow OryaFilterChatWindow opens on the
    Dispatch Map, styled after the Dispatch mockup.

    Every rule is scoped under .orya-filter-window / .orya-filter-card so Ask Orya (ai-chat.css,
    orya-chat.css) is untouched. The card also carries .orya-container, so it inherits Ask Orya's
    chat theme (bubbles, the "thinking" pill); the rules here layer the card on top of it.

    ai-chat.css is linked after this file in _Host.cshtml, so the chat-internal selectors below are
    one class more specific than the ai-chat.css rule they override (the `.orya-filter-card` prefix)
    and repeat its `!important` where it has one.

    Colours are custom properties on the window. Dark mode redefines only those properties, in the
    host's darkmode-overwrite.css (the stylesheet the Dark Mode theme loads) — the app has no body
    class or media query that marks the dark theme.

    DOM: dxbl-window > dxbl-window-dialog.orya-filter-window > .dxbl-window-body > .orya-filter-card
         DxWindow puts CssClass on the dialog, not on the outer dxbl-window element.

    The window is a DxWindow, not a modal DxPopup (see OryaFilterChatWindow.razor for why), so this
    file draws the modal look itself: the outer dxbl-window becomes a full-screen backdrop that
    centres the card and swallows clicks on the map (it never closes the card).

    The legacy Base orya-chat.css (linked after this file) styles every DxWindow that contains
    .orya-container for the old docked chat: it pins the transform to 0,0 !important, adds a 20px
    margin, a 30px shadow ring, a gradient overlay, an open animation, body padding/margins and a
    position:fixed composer. The "legacy overrides" section undoes each of those for this window
    only, one element (body) more specific than the rule it overrides.
*/

/* ---------- palette + window chrome ---------- */

.dxbl-window-dialog.orya-filter-window {
    --of-card-bg: #ffffff;
    --of-text: #1d1b22;
    --of-subtext: #2f2c36;
    --of-accent: #6a4bc4;
    --of-accent-contrast: #ffffff;
    --of-input-bg: #e9dff7;
    --of-input-bg-focus: #e2d4f5;
    --of-input-placeholder: rgba(29, 27, 34, 0.55);
    --of-hint-bg: #ffffff;
    --of-hint-hover-bg: #f3eefc;
    --of-hint-border: #dcd2f7;
    --of-glow-teal: #c6f1f0;
    --of-glow-lilac: #dcd2f7;
    --dxbl-window-bg: var(--of-card-bg);
    --dxbl-window-color: var(--of-text);
    --dxbl-window-border-radius: 16px;
    --dxbl-window-border-width: 0;
    --dxbl-window-body-padding-x: 0;
    --dxbl-window-body-padding-y: 0;
}

/* ---------- backdrop + centring ---------- */

/* The outer dxbl-window fills the viewport: it is the dimmed backdrop, and a flex box that centres
   the card. DevExpress positions it with an inline translate, which orya-chat.css already forces to
   0,0 — so position it here instead, at the popup cell's z-index (above the app header). Display,
   opacity and pointer-events stay DevExpress's (inline), so a closed window never leaves a backdrop. */
body dxbl-popup-cell > .dxbl-window:has(> .dxbl-window-dialog.orya-filter-window) {
    position: fixed !important;
    inset: 0 !important;
    transform: none !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 16px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.55);
}

/* ---------- legacy overrides (orya-chat.css, docked Ask Orya window) ---------- */

body .dxbl-window > .dxbl-window-dialog.orya-filter-window {
    /* The theme makes the dialog flex: 1 1 auto inside the window, which — now that the window is
       the full-screen backdrop — would stretch the card to the viewport height. */
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: calc(100vh - 32px);
    /* Auto margins centre it in the backdrop; the theme's flex settings ignore justify-content. */
    margin: auto !important;
    border-radius: 16px !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden;
    animation: none !important;
}

body .dxbl-window > .dxbl-window-dialog.orya-filter-window::before {
    content: none !important;
    display: none !important;
}

body .dxbl-window > .dxbl-window-dialog.orya-filter-window .dxbl-window-body {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

body .dxbl-window > .dxbl-window-dialog.orya-filter-window .dxbl-window-body > .orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-submitarea .dxbl-chatui-submitarea-container {
    position: static !important;
    flex: 1 1 auto;
    width: 100% !important;
    max-width: none !important;
    bottom: auto !important;
}

/* ---------- card ---------- */

.orya-filter-card.orya-container {
    position: relative;
    isolation: isolate;
    padding: 32px 32px 24px;
    border-radius: 16px;
    background: var(--of-card-bg);
    color: var(--of-text);
    overflow: hidden;
}

/* The two soft circles behind the headline — decoration only, never in the way of a click. */
.orya-filter-card.orya-container::before,
.orya-filter-card.orya-container::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
}

.orya-filter-card.orya-container::before {
    top: -170px;
    left: 18%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--of-glow-teal) 0%, transparent 70%);
}

.orya-filter-card.orya-container::after {
    top: -40px;
    left: -150px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, var(--of-glow-lilac) 0%, transparent 70%);
}

/* ---------- close ---------- */

.orya-filter-card .orya-filter-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--of-text);
    cursor: pointer;
}

/* The ✕ is drawn, not typed, so the button carries no untranslatable glyph — its accessible name
   is the translated aria-label. */
.orya-filter-card .orya-filter-close::before,
.orya-filter-card .orya-filter-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
}

.orya-filter-card .orya-filter-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.orya-filter-card .orya-filter-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.orya-filter-card .orya-filter-close:hover {
    background: var(--of-hint-hover-bg);
}

.orya-filter-card .orya-filter-close:focus-visible,
.orya-filter-card .orya-filter-start__hint:focus-visible {
    outline: 2px solid var(--of-accent);
    outline-offset: 2px;
}

/* ---------- headline, instruction, Show Hint ---------- */

.orya-filter-card .orya-filter-start {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding-right: 24px; /* clear of the close button */
}

.orya-filter-card .orya-filter-start__title {
    margin: 32px 0 4px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--of-text);
}

.orya-filter-card .orya-filter-start__subtitle {
    margin: 0;
    font-size: 18px;
    line-height: 1.4;
    color: var(--of-subtext);
}

.orya-filter-card .orya-filter-start__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-end;
    margin: 16px -24px 0 0;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--of-accent);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.orya-filter-card .orya-filter-start__hint:hover {
    background: var(--of-hint-hover-bg);
}

.orya-filter-card .orya-filter-start__eye {
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.orya-filter-card .orya-filter-start__loading {
    margin: 12px 0 0;
    font-size: 14px;
    font-style: italic;
    opacity: 0.7;
}

/* ---------- chat surface: empty (the card) ---------- */

/* Just the card: the chat takes its content's height rather than ai-chat.css's 360px transcript. */
.orya-filter-card.orya-container .chat-main-container,
.orya-filter-card.orya-container #oryaFilterChatMain {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root {
    height: auto;
    --dx-chatui-messagelist-bg: transparent;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui {
    height: auto;
    background: transparent;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui .dxbl-chatui-scrollviewer {
    height: auto;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui .dxbl-chatui-messages {
    min-height: 0;
    height: auto;
    padding: 0;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root.dxbl-chatui-emptystate .dxbl-chatui .dxbl-chatui-messages {
    align-items: stretch;
    gap: 0;
}

/* The stock empty-state sparkle and text; the headline says what to do. */
.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-empty-icon,
.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-empty-text,
.orya-filter-card.orya-container .orya-filter-empty {
    display: none;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root.dxbl-chatui-emptystate .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-empty-area {
    gap: 0;
}

/* ---------- sample prompts (Show Hint) ---------- */

/* One per line, between Show Hint and the question box. */
.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-prompt-suggestions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    max-width: none;
    margin-top: 12px;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-prompt-suggestions .dxbl-chatui-prompt-suggestion {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid var(--of-hint-border);
    border-radius: 10px;
    background-color: var(--of-hint-bg) !important;
    box-shadow: none !important;
    color: var(--of-text);
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease;
    animation: orya-filter-hint-in 0.2s ease-out both;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-prompt-suggestions .dxbl-chatui-prompt-suggestion:hover {
    background-color: var(--of-hint-hover-bg) !important;
    border-color: var(--of-accent);
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-prompt-suggestions .dxbl-chatui-prompt-suggestion:nth-child(2) {
    animation-delay: 0.05s;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-prompt-suggestions .dxbl-chatui-prompt-suggestion:nth-child(3) {
    animation-delay: 0.1s;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-prompt-suggestions .dxbl-chatui-prompt-suggestion .dxbl-chatui-prompt-suggestion-title {
    margin: 0;
    color: var(--of-text) !important;
    font-weight: 400;
}

.orya-filter-card .orya-filter-hint {
    font-size: 14px;
    line-height: 1.4;
}

/* ---------- question box ---------- */

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-submitarea {
    padding: 16px 0 0;
    background: transparent;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-submitarea .dxbl-chatui-submitarea-container {
    min-height: 96px;
    border: 0;
    border-radius: 12px;
    background-color: var(--of-input-bg);
    box-shadow: none;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-submitarea .dxbl-chatui-submitarea-container:has(textarea:focus) {
    background-color: var(--of-input-bg-focus);
    box-shadow: 0 0 0 2px var(--of-accent);
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-submitarea .dxbl-text-edit {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-submitarea textarea {
    min-height: 3rem;
    color: var(--of-text);
}

.orya-filter-card.orya-container .chat-main-container .dxbl-chatui-submitarea textarea::placeholder {
    color: var(--of-input-placeholder);
}

/* Round, brand-purple send button. */
.orya-filter-card.orya-container .chat-main-container .dxbl-text-edit.dxbl-memo-edit.dxbl-memo-edit-has-buttons .dxbl-memo-edit-buttons-area .dxbl-btn-group > .dxbl-btn {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    background: var(--of-accent) !important;
    color: var(--of-accent-contrast) !important;
    opacity: 1;
}

.orya-filter-card.orya-container .chat-main-container .dxbl-text-edit.dxbl-memo-edit.dxbl-memo-edit-has-buttons .dxbl-memo-edit-buttons-area .dxbl-btn-group > .dxbl-btn:hover {
    opacity: 0.85;
}

/* ---------- chat surface: chatting (after the first question) ---------- */

/* The card grows to chat height; the transcript scrolls between the headline and the box. */
.orya-filter-window--chatting .orya-filter-card.orya-container {
    display: flex;
    flex-direction: column;
    height: min(640px, 80vh);
}

.orya-filter-window--chatting .orya-filter-card .orya-filter-start__title {
    margin-top: 16px;
}

.orya-filter-window--chatting .orya-filter-card.orya-container .chat-main-container,
.orya-filter-window--chatting .orya-filter-card.orya-container #oryaFilterChatMain {
    flex: 1 1 auto;
}

.orya-filter-window--chatting .orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root,
.orya-filter-window--chatting .orya-filter-card.orya-container .chat-main-container .dxbl-chatui {
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
}

.orya-filter-window--chatting .orya-filter-card.orya-container .chat-main-container .dxbl-chatui .dxbl-chatui-scrollviewer {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.orya-filter-window--chatting .orya-filter-card.orya-container .chat-main-container .dxbl-chatui .dxbl-chatui-messages {
    padding: 16px 0 8px;
}

/* ---------- phone width ---------- */

@media (max-width: 480px) {
    .orya-filter-card.orya-container {
        padding: 20px;
    }

    .orya-filter-card .orya-filter-start__title {
        margin-top: 24px;
        font-size: 20px;
    }

    .orya-filter-card .orya-filter-start__subtitle {
        font-size: 16px;
    }

    .orya-filter-card .orya-filter-start__hint {
        margin-right: -12px;
    }

    .orya-filter-card .orya-filter-start {
        padding-right: 12px;
    }
}

/* ---------- motion ---------- */

@keyframes orya-filter-hint-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orya-filter-card.orya-container .chat-main-container .dxbl-chatui-root .dxbl-chatui .dxbl-chatui-messages .dxbl-chatui-prompt-suggestions .dxbl-chatui-prompt-suggestion {
        animation: none;
        transition: none;
    }
}