/* ════════════════════════════════════════════════════════════════════════════
   app-mode.css — Chat | Work switch and the slim Chat-mode composer
   (behaviour: assets/js/app-mode.js)

   html.app-chat / html.app-work is set before first paint by the inline script
   in index.html. Every Chat-mode rule is scoped with body:not(.character-mode)
   so Character chats keep exactly the composer they had.
   Loaded after app-shell.css; specificity (plus !important where the older
   sheets use it) is what lets these rules win.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Chat | Work segmented switch (top bar, centred) ───────────────────── */
.nav .app-mode-switch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 999px;
    background: var(--secondary-color, #1f1f1f);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
    pointer-events: auto;
    z-index: 2;
    user-select: none;
}

.nav .app-mode-switch .ams-opt {
    appearance: none;
    border: 0;
    margin: 0;
    height: 28px;
    min-width: 88px;
    padding: 0 16px;
    border-radius: 999px;
    background: transparent;
    color: var(--subheading-color, #9aa0a6);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.nav .app-mode-switch .ams-opt:hover { color: var(--text-color, #fff); }

.nav .app-mode-switch .ams-opt.is-active,
.nav .app-mode-switch .ams-opt[aria-checked="true"] {
    color: var(--text-color, #fff);
}

/* Sliding thumb: both segments are equal columns, the thumb glides between
   them instead of the highlight blinking from one button to the other. */
.nav .app-mode-switch {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    isolation: isolate;
}
.nav .app-mode-switch .ams-opt { position: relative; z-index: 1; }
.nav .app-mode-switch::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--ams-pad, 3px);
    bottom: var(--ams-pad, 3px);
    left: var(--ams-pad, 3px);
    width: calc(50% - var(--ams-pad, 3px) - 1px);
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-color, #fff) 13%, transparent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transform: translateX(0);
}
html.app-work .nav .app-mode-switch::before { transform: translateX(calc(100% + 2px)); }
html.app-mode-ready .nav .app-mode-switch::before {
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav .app-mode-switch .ams-opt:active { transform: scale(0.97); }

.nav .app-mode-switch .ams-opt:focus-visible {
    outline: 2px solid var(--accent-color, #3b82f6);
    outline-offset: 1px;
}

.nav .app-mode-switch .ams-spark { font-size: 11px; line-height: 1; }

/* A conversation stays in the mode it started in: while one is open the other
   option dims (still clickable, so the click can say "start a new chat"). */
.nav .app-mode-switch.is-held .ams-opt:not(.is-active) { opacity: 0.45; cursor: not-allowed; }
.nav .app-mode-switch.is-held .ams-opt:not(.is-active):hover { color: var(--subheading-color, #9aa0a6); }

/* Work mode is Pro and above: on a Free account the option reads as locked but
   stays clickable, because clicking it is how the user learns why. */
.nav .app-mode-switch .ams-opt.is-locked { opacity: 0.62; }
.nav .app-mode-switch .ams-opt.is-locked::after {
    content: "lock";
    font-family: "Material Symbols Rounded";
    font-size: 13px;
    line-height: 1;
    margin-left: 4px;
    vertical-align: -2px;
    font-feature-settings: "liga";
}

/* A right-hand column (Canvas, live preview) shortens the bar to end where it
   begins. Centred on the page, the switch then slid left onto the voice button
   beside the sidebar; centred on the chat column it stays clear of both. */
@media (min-width: 1001px) {
    body.delphos-canvas-open .nav .app-mode-switch,
    body.wlp-open .nav .app-mode-switch {
        left: calc(var(--dc-sidebar-current-w, 56px) + (100vw - var(--dc-sidebar-current-w, 56px) - var(--dc-panel-w, 47vw)) / 2);
    }
}

/* Characters have their own surface; artifacts browsing hides top chrome. */
body.character-mode .nav .app-mode-switch,
body.artifacts-browsing .nav .app-mode-switch { display: none; }

/* ── 2. Chat-mode composer: hide Work-only controls ───────────────────────── */
.chat-tier { display: none; }

html.app-chat body:not(.character-mode) #deep-think-toggler,
html.app-chat body:not(.character-mode) #model-selector,
html.app-chat body:not(.character-mode) #menu-skills-btn,
html.app-chat body:not(.character-mode) #menu-connectors-btn,
html.app-chat body:not(.character-mode) .plus-menu .pm-sep-tools,
html.app-chat body:not(.character-mode) .active-skills-bar,
html.app-chat body:not(.character-mode) #skill-slash-menu,
html.app-chat body:not(.character-mode) .reason-level-menu {
    display: none !important;
}

html.app-chat body:not(.character-mode) .chat-tier { display: inline-flex; }

/* ── 3. The slim pill ─────────────────────────────────────────────────────── */
/* [+] [ input …………… ] [Fast ▾] [mic|send]  on one row; any preview row
   (attachments, chips) spans the full width above it. */
html.app-chat body:not(.character-mode) .typing-form .input-wrapper {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "prev  prev  prev"
        "left  input right";
    align-items: center;
    column-gap: 8px;
    padding: 6px 12px !important;
    min-height: 0 !important;
    border-radius: 28px !important;
}

html.app-chat body:not(.character-mode) .typing-form .input-wrapper > .image-preview { grid-area: prev; }

/* Anything else injected into the composer (review chips, notices…) gets its
   own full-width row instead of being squeezed into a column. The STT bars keep
   their own positioning. */
html.app-chat body:not(.character-mode) .typing-form .input-wrapper > :not(.image-preview):not(.typing-input):not(.input-actions):not(.stt-recording-bar):not(.stt-hold-mic) {
    grid-column: 1 / -1;
}

html.app-chat body:not(.character-mode) .typing-form .input-actions {
    display: contents !important;
}

html.app-chat body:not(.character-mode) .typing-form .input-tools-left {
    grid-area: left;
    display: flex !important;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

html.app-chat body:not(.character-mode) .typing-form .typing-input {
    grid-area: input;
    min-height: 42px !important;
    max-height: 200px !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
    align-self: center;
}

html.app-chat body:not(.character-mode) .typing-form .input-actions-right {
    grid-area: right;
    display: flex !important;
    align-items: center;
    gap: 4px;
    height: 36px !important;
}

/* init.js auto-sizes the textarea with an inline height (min 52px). While the
   prompt fits on one line the pill keeps a fixed single-line height so the
   text sits level with the buttons; once it expands the inline height applies. */
html.app-chat body:not(.character-mode) .typing-area:not(.chat-expanded) .typing-form .typing-input {
    height: 40px !important;
    overflow-y: hidden !important;
}

/* Long prompt → text on top, actions underneath (like ChatGPT's expanded box). */
html.app-chat body:not(.character-mode) .typing-area.chat-expanded .typing-form .input-wrapper {
    grid-template-areas:
        "prev  prev  prev"
        "input input input"
        "left  .     right";
    row-gap: 2px;
    border-radius: 22px !important;
    padding: 8px 8px 6px !important;
}

html.app-chat body:not(.character-mode) .typing-area.chat-expanded .typing-form .typing-input {
    padding: 6px 10px 4px !important;
}

/* ── 4. Fast / Pro select ─────────────────────────────────────────────────── */
.chat-tier { position: relative; align-items: center; }

.chat-tier-trigger {
    appearance: none;
    border: 0;
    margin: 0;
    height: 36px;
    padding: 0 8px 0 12px;
    border-radius: 999px;
    background: transparent;
    color: var(--subheading-color, #b4b4b4);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.chat-tier-trigger:hover,
.chat-tier-trigger[aria-expanded="true"] {
    background: color-mix(in srgb, var(--text-color, #fff) 9%, transparent);
    color: var(--text-color, #fff);
}

.chat-tier-trigger:focus-visible {
    outline: 2px solid var(--accent-color, #3b82f6);
    outline-offset: 1px;
}

.chat-tier-trigger[data-tier="pro"] .chat-tier-label { color: var(--text-color, #fff); }
.chat-tier-caret { font-size: 18px !important; opacity: 0.8; }

.chat-tier-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: 268px;
    max-width: calc(100vw - 24px);
    padding: 6px;
    border-radius: 16px;
    background: var(--secondary-color, #2a2a2a);
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 1200;
}

.chat-tier-menu[hidden] { display: none; }

.chat-tier-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: 11px;
    cursor: pointer;
    color: var(--text-color, #fff);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.chat-tier-opt:hover,
.chat-tier-opt:focus-visible {
    background: color-mix(in srgb, var(--text-color, #fff) 8%, transparent);
}

.chat-tier-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-color, #3b82f6); }

.chat-tier-opt .cto-ico { font-size: 20px; opacity: 0.85; }
.chat-tier-opt .cto-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; line-height: 1.3; }
.chat-tier-opt .cto-text b { font-size: 14px; font-weight: 600; }
.chat-tier-opt .cto-text small { font-size: 12.5px; color: var(--subheading-color, #9aa0a6); }
.chat-tier-opt .cto-check { font-size: 18px; visibility: hidden; }
.chat-tier-opt.is-selected .cto-check { visibility: visible; }

/* ── 4b. Work-only launchers (Schedule, Delphos Code, Delphos Design) ────── */
/* Not offered in Chat mode at all. Collapsed with a transition so the sidebar
   reflows smoothly when the mode flips instead of jumping. */
.nav-menu .work-only {
    max-height: 64px;
    overflow: hidden;
}
html.app-mode-ready .nav-menu .work-only {
    transition: max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.24s ease,
                transform 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0s;
}
html.app-chat .nav-menu .work-only {
    max-height: 0;
    opacity: 0;
    transform: translateX(-8px);
    visibility: hidden;
    pointer-events: none;
}
html.app-mode-ready.app-chat .nav-menu .work-only {
    transition: max-height 0.36s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.18s ease,
                transform 0.3s ease,
                visibility 0s linear 0.36s;
}

/* ── 4c. Chat · Fast reply: feels instant ─────────────────────────────── */
/* No "Thinking" shimmer — a single breathing dot (the first token replaces it). */
.chat-fast-loader {
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding-left: 2px;
}
.chat-fast-loader span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--text-color, #fff);
    animation: chatFastPulse 0.9s ease-in-out infinite;
}
@keyframes chatFastPulse {
    0%, 100% { transform: scale(0.72); opacity: 0.55; }
    50%      { transform: scale(1);    opacity: 1; }
}

/* The reply bubble arrives immediately and without a slow fade. */
.chat-list .message.incoming.chat-reply-fast {
    animation: chatReplyIn 0.16s ease-out both;
}
@keyframes chatReplyIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

/* ── 5. Phones ────────────────────────────────────────────────────────────── */
@media (max-width: 999px) {
    .nav .app-mode-switch .ams-opt { min-width: 72px; padding: 0 12px; }
}

@media (max-width: 520px) {
    .nav .app-mode-switch { padding: 2px; --ams-pad: 2px; }
    .nav .app-mode-switch .ams-opt { height: 30px; min-width: 60px; padding: 0 10px; font-size: 13px; }

    html.app-chat body:not(.character-mode) .typing-form .input-wrapper {
        padding: 5px 6px !important;
        border-radius: 26px !important;
    }
    /* ≥16px keeps iOS from zooming the page on focus. */
    html.app-chat body:not(.character-mode) .typing-form .typing-input {
        font-size: 16px !important;
        padding: 8px 4px !important;
    }
    .chat-tier-trigger { padding: 0 4px 0 8px; font-size: 13.5px; }

    /* The menu becomes a bottom-anchored sheet so it never runs off-screen. */
    .chat-tier-menu {
        position: fixed;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        bottom: calc(var(--dph-kb, 0px) + env(safe-area-inset-bottom, 0px) + 84px);
    }
    .chat-tier-opt { padding: 12px; }
}

@media (max-width: 360px) {
    .nav .app-mode-switch .ams-opt { min-width: 52px; padding: 0 8px; font-size: 12.5px; }
    .nav .app-mode-switch .ams-spark { display: none; }
}

@media (hover: none) {
    .nav .app-mode-switch .ams-opt:hover { color: var(--subheading-color, #9aa0a6); }
    .nav .app-mode-switch .ams-opt.is-active:hover { color: var(--text-color, #fff); }
    .chat-tier-trigger:hover { background: transparent; }
    .chat-tier-trigger:active,
    .chat-tier-opt:active { background: color-mix(in srgb, var(--text-color, #fff) 12%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    .nav .app-mode-switch .ams-opt,
    .chat-tier-trigger,
    html.app-mode-ready .nav .app-mode-switch::before,
    html.app-mode-ready .nav-menu .work-only { transition: none !important; }
    .chat-fast-loader span { animation-duration: 2s; }
    .chat-list .message.incoming.chat-reply-fast { animation: none; }
}