/* ═══════════════════════════════════════════════════════════════════════════
   assistant.css — the in-panel assistant's ASK PANE (Run 41). Loaded by
   admin.html after help.css. Dark like the rest of the panel (no light theme
   exists anywhere in it — measured, Run 27).

   It lives inside Run 40's drawer (#helpDrawer, z 2000). Three things here
   reach OUTSIDE the pane, each on purpose:
     • the drawer body stops scrolling as a whole while Ask is shown, so only the
       conversation scrolls and the composer stays at the bottom;
     • `.assistant-highlight` — the "Show me" outline on a panel control;
     • the toasts move while the drawer is open (plan §1.6, the Run 15 class): on
       a desktop the drawer owns the right edge where toasts dock, so they go to
       the LEFT; on a phone the drawer is the whole screen, so they go to the TOP,
       under the drawer's header — and at every width a toast's body lets a press
       through (only its own action button stays live), so a toast can never eat
       the press meant for Send.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the pane fills the drawer; only the conversation scrolls ───────────── */
#helpDrawerBody:has(> #helpPane-ask:not([hidden])) {
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}
#helpPane-ask:not([hidden]) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.asst {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-body, 'DM Sans', sans-serif);
    color: var(--text-primary, #F1F3F9);
}

/* ── where you are ──────────────────────────────────────────────────────── */
.asst-where {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin: 12px 14px 0;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(46, 49, 146, 0.16);
    border: 1px solid rgba(123, 128, 212, 0.3);
}
.asst-where-line { flex: 1 1 180px; min-width: 0; margin: 0; font-size: 0.82rem; line-height: 1.4; color: var(--text-secondary, #9BA3C2); }
.asst-where-place { color: var(--text-primary, #F1F3F9); font-weight: 600; unicode-bidi: isolate; }
.asst-link-btn {
    flex: 0 0 auto;
    padding: 4px 2px;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    color: var(--accent-light, #7B80D4);
    border-bottom: 1px dotted rgba(123, 128, 212, 0.6);
}
.asst-link-btn:hover { border-bottom-style: solid; }

/* ── conversations ──────────────────────────────────────────────────────── */
.asst-threadbar { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 14px 0; }
.asst-tb-btn {
    padding: 6px 10px;
    min-height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border-default, rgba(155, 163, 194, 0.12));
    background: var(--bg-input, rgba(16, 20, 40, 0.6));
    color: var(--text-secondary, #9BA3C2);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}
.asst-tb-btn:hover:not(:disabled) { color: var(--text-primary, #F1F3F9); border-color: rgba(148, 163, 184, 0.3); }
.asst-tb-btn:disabled { opacity: 0.55; cursor: default; }
.asst-tb-btn[aria-expanded="true"] { color: var(--accent-light, #7B80D4); border-color: rgba(123, 128, 212, 0.4); }
.asst-threads {
    flex: 0 1 auto;
    max-height: 38%;
    overflow-y: auto;
    margin: 6px 14px 0;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(155, 163, 194, 0.12));
    background: var(--bg-card, rgba(16, 20, 40, 0.7));
}
.asst-threads[hidden] { display: none; }
.asst-thread-list { list-style: none; margin: 0; padding: 0; }
.asst-thread-item { display: flex; align-items: center; gap: 6px; border-radius: 8px; }
.asst-thread-item.is-current { background: rgba(46, 49, 146, 0.18); }
.asst-thread {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px;
    border: 0;
    background: none;
    cursor: pointer;
    text-align: start;
    font: inherit;
    font-size: 0.84rem;
    color: var(--text-primary, #F1F3F9);
}
.asst-thread:hover { color: var(--accent-light, #7B80D4); }
.asst-thread-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.asst-thread-when { flex: 0 0 auto; font-size: 0.72rem; color: var(--text-secondary, #9BA3C2); }
.asst-archive {
    flex: 0 0 auto;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: none;
    color: var(--text-secondary, #9BA3C2);
    font: inherit;
    font-size: 0.74rem;
    cursor: pointer;
}
.asst-archive:hover { border-color: rgba(244, 194, 122, 0.4); color: #F4C27A; }
.asst-thread-none { margin: 6px 8px; font-size: 0.8rem; color: var(--text-secondary, #9BA3C2); }

/* ── the conversation ───────────────────────────────────────────────────── */
.asst-msgs {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.asst-empty { margin: auto 0; font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary, #9BA3C2); }
.asst-empty p { margin: 0 0 8px; }
.asst-msg { display: flex; flex-direction: column; min-width: 0; }
.asst-user { align-self: flex-end; align-items: flex-end; max-width: 88%; }
.asst-bot { align-self: stretch; align-items: flex-start; }
.asst-bubble {
    max-width: 100%;
    padding: 9px 12px;
    border-radius: 12px;
    font-family: var(--font-body, 'DM Sans', sans-serif), 'Noto Kufi Arabic', sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
    color: var(--text-primary, #F1F3F9);
}
.asst-user .asst-bubble {
    white-space: pre-wrap;
    background: rgba(46, 49, 146, 0.45);
    border: 1px solid rgba(123, 128, 212, 0.35);
    border-bottom-right-radius: 4px;
}
.asst-bot .asst-bubble {
    background: var(--bg-input, rgba(16, 20, 40, 0.6));
    border: 1px solid var(--border-default, rgba(155, 163, 194, 0.12));
    border-bottom-left-radius: 4px;
}
.asst-bot .asst-bubble[dir="rtl"] { align-self: stretch; }
.asst-bubble p { margin: 0 0 8px; }
.asst-bubble ol, .asst-bubble ul { margin: 0 0 8px; padding-inline-start: 22px; }
.asst-bubble li { margin: 3px 0; }
.asst-bubble > :last-child { margin-bottom: 0; }
.asst-bubble .asst-h { margin-top: 2px; }
/* Isolation is a property of the formatter (Run 22 A1): every English label,
   code span, citation and chip inside a bubble is its own bidi island, so an
   Arabic sentence keeps its order around it and "+ New appointment" keeps its +. */
.asst-bubble strong, .asst-bubble code, .asst-ref, .asst-show, .asst-tool bdi { unicode-bidi: isolate; }
.asst-bubble strong { font-weight: 600; color: #fff; }
.asst-bubble code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.84em;
    padding: 1px 5px;
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.14);
}

/* a citation: a BUTTON that opens the Manual pane — never a link (A6) */
.asst-ref {
    display: inline;
    padding: 0;
    border: 0;
    border-bottom: 1px dotted rgba(123, 128, 212, 0.65);
    background: none;
    cursor: pointer;
    font: inherit;
    color: var(--accent-light, #7B80D4);
    text-align: inherit;
}
.asst-ref:hover { border-bottom-style: solid; }
.asst-noaccess {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    color: #F4C27A;
    background: rgba(244, 194, 122, 0.1);
    border: 1px solid rgba(244, 194, 122, 0.35);
}

/* "Show me" */
.asst-show {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin: 2px 0;
    padding: 3px 10px;
    min-height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(244, 194, 122, 0.5);
    background: rgba(244, 194, 122, 0.1);
    color: #F4C27A;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    vertical-align: middle;
}
.asst-show::before { content: '◎'; font-size: 0.85em; }
.asst-show:hover:not(.is-off) { background: rgba(244, 194, 122, 0.2); }
.asst-show-what { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.asst-show.is-off {
    border-color: var(--border-default, rgba(155, 163, 194, 0.18));
    background: transparent;
    color: var(--text-secondary, #9BA3C2);
    cursor: default;
}

/* "Looked up" — what was read on the employee's behalf */
.asst-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 5px; font-size: 0.72rem; }
.asst-tools-label { color: var(--text-secondary, #9BA3C2); margin-inline-end: 2px; }
.asst-tool {
    max-width: 100%;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid var(--border-default, rgba(155, 163, 194, 0.2));
    color: var(--text-secondary, #9BA3C2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.asst-tool.is-denied { color: #F4C27A; border-color: rgba(244, 194, 122, 0.45); background: rgba(244, 194, 122, 0.08); }
.asst-tool.is-miss { color: var(--text-secondary, #9BA3C2); border-style: dashed; }
.asst-note { margin: 5px 0 0; font-size: 0.8rem; line-height: 1.45; color: #F4C27A; }
/* Run 42 N3 — the strict check's amber note: what the panel could not verify in
   this answer (a name the manual does not use, one from another screen, a control
   this account cannot use, steps not read from the manual). Under the bubble,
   above the "cut off / failed" line. Each name is an isolate (Run 22 A1). */
.asst-check-note {
    max-width: 100%;
    margin: 5px 0 0;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid rgba(244, 194, 122, 0.35);
    background: rgba(244, 194, 122, 0.08);
    font-size: 0.8rem;
    line-height: 1.45;
    color: #F4C27A;
    overflow-wrap: anywhere;
}
.asst-check-note bdi { unicode-bidi: isolate; font-weight: 600; }

/* the answer is being written */
.asst-typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 12px 14px; border-radius: 12px; background: var(--bg-input, rgba(16, 20, 40, 0.6)); border: 1px solid var(--border-default, rgba(155, 163, 194, 0.12)); }
.asst-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary, #9BA3C2); animation: asst-dot 1.1s infinite ease-in-out; }
.asst-typing span:nth-child(2) { animation-delay: 0.15s; }
.asst-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes asst-dot { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* ── status, composer, footer ───────────────────────────────────────────── */
.asst-status { flex: 0 0 auto; margin: 0; padding: 0 14px 6px; font-size: 0.8rem; line-height: 1.4; color: #F4C27A; }
.asst-status:empty { display: none; }
.asst-off {
    flex: 0 0 auto;
    margin: 0 14px 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--text-primary, #F1F3F9);
    background: rgba(244, 194, 122, 0.08);
    border: 1px solid rgba(244, 194, 122, 0.35);
}
.asst-off[hidden] { display: none; }
.asst-composer {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-default, rgba(155, 163, 194, 0.12));
}
.asst-composer[hidden] { display: none; }
.asst-input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    max-height: 150px;
    resize: none;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-default, rgba(155, 163, 194, 0.18));
    background: var(--bg-input, rgba(16, 20, 40, 0.6));
    color: var(--text-primary, #F1F3F9);
    font-family: var(--font-body, 'DM Sans', sans-serif), 'Noto Kufi Arabic', sans-serif;
    font-size: 0.9rem;
    line-height: 1.45;
}
.asst-input:focus { outline: none; border-color: var(--accent-light, #7B80D4); }
.asst-send {
    flex: 0 0 auto;
    min-width: 64px;
    height: 44px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid rgba(123, 128, 212, 0.55);
    background: var(--accent-primary, #2E3192);
    color: #fff;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.asst-send:hover:not(:disabled) { background: #3a3dad; }
.asst-send:disabled { opacity: 0.55; cursor: default; }
.asst-foot {
    flex: 0 0 auto;
    padding: 0 14px calc(10px + env(safe-area-inset-bottom, 0px));
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--text-secondary, #9BA3C2);
}
.asst-foot p { margin: 0; }

/* ── "Show me": an outline on the panel's own control, for four seconds ──
   Inset, so no scrolling ancestor can clip it; outline + box-shadow only, so it
   never moves the page. The control is never pressed or focused (G1). */
.assistant-highlight {
    outline: 3px solid #F4C27A !important;
    outline-offset: -2px !important;
    box-shadow: 0 0 0 4px rgba(244, 194, 122, 0.35), 0 0 22px rgba(244, 194, 122, 0.55) !important;
    animation: asst-pulse 1s ease-in-out 0s 4;
}
@keyframes asst-pulse {
    0%, 100% { outline-color: rgba(244, 194, 122, 1); }
    50% { outline-color: rgba(244, 194, 122, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .assistant-highlight, .asst-typing span { animation: none; }
}

/* ── toasts while the drawer is open (plan §1.6; Run 15's click-eating class) ── */
body.help-drawer-open .toast { pointer-events: none; cursor: default; }
body.help-drawer-open .toast .toast-link { pointer-events: auto; }
@media (min-width: 901px) {
    /* Left, and lifted clear of the ? circle in the sidebar footer (bottom 14 px,
       44 px tall) so the way back into the drawer stays visible. The widest
       toast (380 px) ends at 404 px, short of the drawer's left edge at every
       desktop width (≥ 901 − 460 = 441 px). */
    body.help-drawer-open .toast-host { right: auto; left: var(--space-lg, 24px); }
    body.help-drawer-open:not(.inbox-active) .toast-host { bottom: 72px; }
}
@media (max-width: 900px) {
    body.help-drawer-open .toast-host { top: calc(env(safe-area-inset-top, 0px) + 64px); bottom: auto; }
}