/* ============================================================================
   Ask DEX — orb to chat, design 1e "ring unwrap".

   The orb's ring stretches into the dialog outline while its core travels down to
   become the send button. AskDexMorphChat writes only GEOMETRY inline (left/top/
   width/height, from the orb's measured viewport rect); every skin change the design
   tweens alongside it — radius, border, fill, elevation — is the --open modifier here,
   so both animate off the same 420ms ease-out.

   Motion: cubic-bezier(0, 0, 0.2, 1), no bounce.
   ========================================================================== */

.adx-root {
    --adx-ease: cubic-bezier(0, 0, 0.2, 1);
    --adx-morph: 420ms;
    --adx-brand: #155DFC;
    --adx-ink: #0F172B;
    --adx-ink-muted: #6B7280;
    --adx-line: #DEE2ED;
    --adx-surface: #FFFFFF;
    position: fixed;
    inset: 0;
    /* The same layer the MudDialog this replaces used to occupy. That matters: this app forces
       the drawer to 1300 and the app bar to 1250 (nav-menu.css), well above MudBlazor's popover
       layer, so the chat has to clear them — and sitting on the dialog layer means every menu
       and popover the conversation opens (prompt library, snippets, record menu) keeps behaving
       exactly as it did inside the dialog. */
    z-index: var(--mud-zindex-dialog, 1400);
    pointer-events: none;
}

/* ---------------------------------------------------------------- scrim - */

.adx-scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 43, 0.32);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--adx-morph) var(--adx-ease);
}

.adx-root--open .adx-scrim {
    opacity: 1;
    pointer-events: auto;
}

/* ----------------------------------------------------------------- ring - */

/* Closed: the orb's ring — a blue circle over nothing, which is why the background is
   transparent and there is no elevation to fade. Open: the dialog outline. */
.adx-shell {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 999px;
    border: 2px solid var(--adx-brand);
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    transition: left var(--adx-morph) var(--adx-ease),
                top var(--adx-morph) var(--adx-ease),
                width var(--adx-morph) var(--adx-ease),
                height var(--adx-morph) var(--adx-ease),
                border-radius var(--adx-morph) var(--adx-ease),
                border-color var(--adx-morph) var(--adx-ease),
                border-width var(--adx-morph) var(--adx-ease),
                background-color var(--adx-morph) var(--adx-ease),
                box-shadow var(--adx-morph) var(--adx-ease);
}

.adx-root--open .adx-shell {
    border-radius: 5px;
    border: 1px solid var(--adx-line);
    background: var(--adx-surface);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
    pointer-events: auto;
}

/* The conversation arrives after the shell has settled, never with it. */
.adx-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms var(--adx-ease);
}

.adx-root--open .adx-content {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 260ms;
}

/* ---------------------------------------------------------------- header - */

.adx-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 14px;
    border-bottom: 1px solid var(--adx-line);
}

.adx-head-orb {
    flex: 0 0 auto;
}

.adx-head-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.adx-head-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--adx-ink);
}

.adx-head-sub {
    font-size: 11px;
    color: var(--adx-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adx-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: none;
    color: var(--adx-ink-muted);
    cursor: pointer;
    transition: background 140ms var(--adx-ease), color 140ms var(--adx-ease);
}

.adx-close:hover {
    background: rgba(21, 93, 252, 0.08);
    color: var(--adx-brand);
}

.adx-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ChatCore fills whatever it is given; inside the shell that is everything under the
   header. Without the min-height:0 chain above, its transcript would push the composer
   out of the shell instead of scrolling. */
.adx-body > * {
    flex: 1;
    min-height: 0;
}

/* ----------------------------------------------------------------- core - */

/* The orb's dark centre. Travels to the composer and squares off into the send button,
   then fades — the real Send button is live underneath by the time it has gone. */
.adx-core {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--adx-ink);
    color: #FFFFFF;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    pointer-events: none;
    transition: left var(--adx-morph) var(--adx-ease),
                top var(--adx-morph) var(--adx-ease),
                width var(--adx-morph) var(--adx-ease),
                height var(--adx-morph) var(--adx-ease),
                border-radius var(--adx-morph) var(--adx-ease),
                box-shadow var(--adx-morph) var(--adx-ease),
                opacity 160ms var(--adx-ease);
}

.adx-root--open .adx-core {
    border-radius: 5px;
    background: var(--adx-brand);
    box-shadow: none;
}

.adx-core--gone {
    opacity: 0;
}

/* -------------------------------------------------------------- dark mode - */

.defex-theme-dark .adx-root,
.mud-theme-dark .adx-root {
    --adx-ink: #E6EAF3;
    --adx-ink-muted: #8A93A8;
    --adx-line: #30324E;
    --adx-surface: #1B2136;
}

.defex-theme-dark .adx-scrim,
.mud-theme-dark .adx-scrim {
    background: rgba(0, 0, 0, 0.52);
}

.defex-theme-dark .adx-root--open .adx-shell,
.mud-theme-dark .adx-root--open .adx-shell {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.45), 0 3px 6px rgba(0, 0, 0, 0.30);
}

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

/* The morph is the whole point, so it is not removed — it is collapsed to a cut, which
   still lands every element in the right place. */
@media (prefers-reduced-motion: reduce) {
    .adx-root {
        --adx-morph: 1ms;
    }

    .adx-content,
    .adx-root--open .adx-content {
        transition-duration: 1ms;
        transition-delay: 0ms;
    }
}