/* ─────────────────────────────────────────────────────────────────────────────
   The in-app ProConnect support assistant (v325) — public/js/support-assistant.js
   One calm mark when idle; a compact panel; a ring + coachmark for guided
   navigation; a short first-run welcome. Theme tokens only (Dark / Light / Cream
   follow automatically); logical properties for RTL/LTR throughout. The launcher
   and the panel sit at the bottom INLINE-END corner — LEFT in Hebrew, RIGHT in
   English — the side away from the sidebar in both directions, so no sidebar
   offset is needed. v355: corrects v354, which put it at the inline-start corner
   (right in Hebrew, left in English); before v354 it was PHYSICALLY bottom-left in
   both directions, i.e. right for Hebrew and wrong for English.
   z-index: launcher 990 · panel 995 (both yield to modals/drawers) ·
            ring/coach 9050–9051 (above whatever holds the target) · welcome 9300.
   ───────────────────────────────────────────────────────────────────────────── */

.psa-launcher {
    position: fixed;
    z-index: 990;
    inset-inline-end: 18px;
    bottom: calc(18px + var(--psa-lift, 0px) + env(safe-area-inset-bottom, 0px));
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border-radius: 15px;
    background: var(--bg-surface);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border-color));
    box-shadow: 0 12px 30px -14px var(--shadow-color), 0 1px 0 color-mix(in srgb, var(--text-primary) 6%, transparent) inset;
    cursor: pointer;
    /* visibility comes back at once (the launcher must be focusable the moment the
       panel closes); it goes away only after the fade (see the hidden states). */
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s ease, bottom .2s ease, visibility 0s linear 0s;
}
.psa-launcher:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border-color));
    box-shadow: 0 16px 36px -14px color-mix(in srgb, var(--accent) 55%, transparent);
}
.psa-launcher:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.psa-launcher-mark { font-size: 19px; --pc-mark-bg: var(--bg-surface); }
.psa-launcher-dot {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--bg-surface);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s ease, transform .2s ease;
}
.psa-launcher.has-conversation .psa-launcher-dot { opacity: 1; transform: none; }
/* vNEXT — the heartbeat: a calm double beat of the mark and its halo, in the
   sign-in screen's language (the signet ring, logoPulse), while the assistant is
   closed and idle. Compositor-only (scale / opacity on the mark and a pseudo
   halo — no layout, no JS loop) and FINITE: five beats after the page loads or
   the panel closes, then still. Off while the panel is open, tucked, or a guide
   is running, and entirely under prefers-reduced-motion. The mark is rotated by
   'transform', so the beat uses the separate 'scale' property, which composes
   with it. */
.psa-launcher::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1.5px solid color-mix(in srgb, var(--accent) 60%, transparent);
    opacity: 0;
    pointer-events: none;
}
.psa-root:not(.is-open):not(.is-tucked):not(.is-walking) .psa-launcher-mark { animation: psaBeat 4.8s ease-in-out .9s 5 both; }
.psa-root:not(.is-open):not(.is-tucked):not(.is-walking) .psa-launcher::before { animation: psaHalo 4.8s ease-out .9s 5 both; }
@keyframes psaBeat {
    0%, 20%, 100% { scale: 1; }
    5% { scale: 1.1; }
    10% { scale: .97; }
    14% { scale: 1.06; }
}
@keyframes psaHalo {
    0%, 4% { opacity: 0; transform: scale(.94); }
    7% { opacity: .55; transform: scale(1); }
    30%, 100% { opacity: 0; transform: scale(1.42); }
}
/* Hidden is hidden for the keyboard too: an invisible launcher must not be a Tab stop. */
.psa-root.is-open .psa-launcher,
.psa-root.is-tucked .psa-launcher {
    opacity: 0;
    pointer-events: none;
    transform: scale(.92);
    visibility: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .2s ease, bottom .2s ease, visibility 0s linear .2s;
}

/* ── panel ─────────────────────────────────────────────────────────────── */
.psa-panel {
    position: fixed;
    z-index: 995;
    inset-inline-end: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    width: min(400px, calc(100vw - 36px));
    height: min(640px, calc(100dvh - 96px));
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: 0 30px 80px -28px var(--shadow-color), 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
    overflow: hidden;
    transform-origin: 100% 100%;
    animation: psaIn .18s ease-out;
}
/* transform-origin has no logical keywords: grow out of the launcher's corner. */
html[dir="rtl"] .psa-panel { transform-origin: 0 100%; }
.psa-panel[hidden] { display: none; }
@keyframes psaIn { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

.psa-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 12px 12px 16px;
    padding-inline: 16px 10px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--bg-surface)), var(--bg-surface));
}
.psa-head-mark { font-size: 22px; flex: none; --pc-mark-bg: var(--bg-surface); margin-inline: 4px 2px; }
.psa-head-text { min-width: 0; flex: 1 1 auto; }
.psa-title { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--text-primary); }
.psa-context {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.psa-head-actions { display: flex; align-items: center; gap: 4px; flex: none; }
/* New conversation: first-class — an outlined button with its name, beside Close. */
.psa-head-btn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-inline: 10px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.psa-head-btn i { font-size: 15px; color: var(--accent); }
.psa-head-btn:hover:not(:disabled) { background: var(--bg-hover); }
.psa-head-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.psa-head-btn:disabled { opacity: .45; cursor: default; }
.psa-icon-btn {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 17px;
    cursor: pointer;
}
.psa-icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.psa-icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* "New conversation started · Undo", and the way to the introduction, in the empty conversation. */
.psa-undo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 12px;
    background: var(--bg-elevated);
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* ── conversation ──────────────────────────────────────────────────────── */
.psa-log {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
}
.psa-empty { text-align: center; padding: 22px 6px 6px; }
.psa-empty-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--text-primary); }
.psa-suggest { display: flex; flex-direction: column; gap: 8px; align-items: stretch; list-style: none; margin: 0; padding: 0; }
.psa-suggest-item { display: flex; }

.psa-msg { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.psa-msg--user { align-items: flex-end; }
.psa-bubble {
    max-width: 86%;
    padding: 9px 13px;
    border-radius: 16px;
    border-end-end-radius: 5px;
    background: color-mix(in srgb, var(--accent) 17%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    /* Each line takes the direction of its own first strong letter: a Hebrew
       question with an English product name in it reads the right way round. */
    unicode-bidi: plaintext;
}
.psa-answer {
    padding: 12px 14px;
    border-radius: 16px;
    border-end-start-radius: 5px;
    background: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg-surface));
    border: 1px solid var(--border-color);
    font-size: 14px;
    line-height: 1.62;
    overflow-wrap: anywhere;
}
.psa-msg--assistant.is-error .psa-answer { border-color: var(--st-warn-border, var(--border-color)); }
.psa-md p { margin: 0 0 8px; }
.psa-md p:last-child { margin-bottom: 0; }
.psa-md ul, .psa-md ol { margin: 4px 0 8px; padding-inline-start: 20px; }
/* The app's base reset strips list markers; a numbered how-to without its numbers is not one. */
.psa-md ol { list-style: decimal; }
.psa-md ul { list-style: disc; }
.psa-md li { margin: 3px 0; }
.psa-md li::marker { color: var(--text-secondary); }
.psa-md strong { font-weight: 700; color: var(--text-primary); }
.psa-md code {
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--bg-hover);
    unicode-bidi: plaintext;
}
.psa-md-h { margin-top: 4px; }
.psa-ext { color: var(--ice); text-decoration: underline; text-underline-offset: 2px; }
.psa-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-secondary); }

.psa-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.psa-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 13px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.psa-chip--action {
    background: color-mix(in srgb, var(--accent) 11%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border-color));
    color: var(--ice);
}
.psa-chip--action:hover { background: color-mix(in srgb, var(--accent) 18%, var(--bg-surface)); transform: translateY(-1px); }
.psa-chip--action i { font-size: 15px; }
.psa-chip--suggest {
    justify-content: flex-start;
    width: 100%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
}
.psa-chip--suggest:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border-color)); }
.psa-chip:focus-visible, .psa-link:focus-visible, .psa-fb:focus-visible, .psa-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.psa-feedback { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.psa-feedback-q { margin-inline-end: 2px; }
.psa-fb {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 15px;
    cursor: pointer;
}
.psa-fb:hover { background: var(--bg-hover); color: var(--text-primary); }
.psa-feedback-thanks { margin-inline-end: 6px; }
.psa-link {
    border: 0;
    background: none;
    padding: 2px 4px;
    color: var(--ice);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.psa-esc {
    padding: 12px 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-color));
    border-inline-start: 3px solid var(--accent);
}
.psa-esc p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.psa-esc-q { margin-bottom: 10px !important; font-weight: 600; }
.psa-esc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.psa-ref { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; }
.psa-esc.is-done { border-inline-start-color: var(--st-ok-solid, var(--accent)); }
.psa-esc.is-failed { border-inline-start-color: var(--st-warn-solid, var(--accent)); }
.psa-esc-retry, .psa-esc-new { margin-top: 10px; }
.psa-esc[tabindex="-1"]:focus, .psa-feedback[tabindex="-1"]:focus { outline: none; }
.psa-esc[tabindex="-1"]:focus-visible, .psa-feedback[tabindex="-1"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }

.psa-msg--typing { flex-direction: row; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 12.5px; }
.psa-dots { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg-surface)); border: 1px solid var(--border-color); }
.psa-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-secondary); opacity: .35; animation: psaDot 1.1s ease-in-out infinite; }
.psa-dots span:nth-child(2) { animation-delay: .15s; }
.psa-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes psaDot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-2px); } }

/* ── composer ──────────────────────────────────────────────────────────── */
.psa-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px 6px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-surface);
}
.psa-input {
    flex: 1 1 auto;
    min-height: 42px;
    max-height: 140px;
    resize: none;
    padding: 10px 13px;
    border-radius: 14px;
    border: 1px solid var(--border-input, var(--border-color));
    background: var(--bg-input, var(--bg-elevated));
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
}
.psa-input::placeholder { color: var(--text-placeholder, var(--text-secondary)); }
.psa-input:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--border-color)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.psa-send {
    flex: none;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    border: 0;
    background: var(--accent-solid, var(--accent));
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: opacity .15s ease, transform .15s ease;
}
html[dir="rtl"] .psa-send i { transform: scaleX(-1); }
.psa-send:disabled { opacity: .4; cursor: default; }
.psa-send:not(:disabled):hover { transform: translateY(-1px); }
.psa-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.psa-btn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
}
.psa-btn--primary {
    background: var(--accent-solid, var(--accent));
    color: #fff;
    box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.psa-btn--primary:hover { filter: brightness(1.06); }
.psa-btn--quiet { background: transparent; color: var(--text-primary); border-color: var(--border-color); }
.psa-btn--quiet:hover { background: var(--bg-hover); }

/* ── guided highlight ──────────────────────────────────────────────────── */
.psa-ring {
    position: fixed;
    z-index: 9050;
    pointer-events: none;
    border-radius: 12px;
    box-shadow:
        0 0 0 2px var(--accent),
        0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent),
        0 12px 34px -8px color-mix(in srgb, var(--accent) 45%, transparent);
    animation: psaRing 1.7s ease-in-out 2;
    transition: top .12s ease, left .12s ease, width .12s ease, height .12s ease;
}
@keyframes psaRing {
    0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 22%, transparent), 0 12px 34px -8px color-mix(in srgb, var(--accent) 45%, transparent); }
    50%      { box-shadow: 0 0 0 2px var(--accent), 0 0 0 12px color-mix(in srgb, var(--accent) 12%, transparent), 0 12px 34px -8px color-mix(in srgb, var(--accent) 45%, transparent); }
}
.psa-coach {
    position: fixed;
    z-index: 9051;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 13px;
    padding-inline: 13px 8px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-color));
    border-radius: 14px;
    box-shadow: 0 20px 44px -16px var(--shadow-color);
    font-size: 13.5px;
    line-height: 1.45;
    animation: psaCoachIn .2s ease-out;
}
@keyframes psaCoachIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.psa-coach-mark { font-size: 13px; flex: none; --pc-mark-bg: var(--bg-elevated); margin-inline: 3px 2px; }
.psa-coach-text { flex: 1 1 auto; min-width: 0; }
.psa-coach-close {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
}
.psa-coach-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.psa-coach-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Forced colours drop box-shadows — the ring IS a box-shadow — so it becomes a
   system-coloured outline there. */
@media (forced-colors: active) {
    .psa-ring { outline: 3px solid Highlight; }
}

/* ── walkthroughs: "Guide me step by step" (vNEXT) ──────────────────────────
   Under an answer: one primary button (with its step count) and a quiet "what
   are the steps?" disclosure; on an empty panel: the screen's own guides. The
   GUIDE CARD sits beside the highlighted control — calm, one instruction at a
   time — and docks at the bottom on a phone. Same layer as the coachmark. */
.psa-wt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.psa-wt-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 14px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border-color));
    background: var(--accent-solid, var(--accent));
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: start;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.psa-wt-go:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.psa-wt-go i { font-size: 16px; }
.psa-wt-go-n {
    font-size: 11.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, #fff 22%, transparent);
    white-space: nowrap;
}
.psa-wt-outline { margin: 2px 0 0; padding-inline-start: 22px; font-size: 12.5px; color: var(--text-secondary); }
.psa-wt-outline > li { margin: 2px 0; }
.psa-wt-outline > li::marker { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.psa-wt-sub { margin: 2px 0 4px; padding-inline-start: 14px; list-style: none; }
.psa-wt-sub li::before { content: '↳ '; color: var(--text-secondary); }
.psa-wt-step {
    border: 0;
    background: none;
    padding: 2px 4px;
    margin: 0;
    color: var(--text-primary);
    font-size: 12.5px;
    text-align: start;
    cursor: pointer;
    border-radius: 6px;
}
.psa-wt-step:hover { background: var(--bg-hover); color: var(--ice); }
.psa-wt-step--opt { color: var(--text-secondary); }
.psa-wt-go:focus-visible, .psa-wt-step:focus-visible, .psa-wt-task:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Two close guides: the person picks the task. */
.psa-wt--choice { width: 100%; gap: 8px; }
.psa-wt-which { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--text-primary); }
.psa-wt-choice {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; min-height: 44px; padding: 8px 12px;
    border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border-color));
    background: var(--bg-surface); color: var(--text-primary); text-align: start; cursor: pointer;
}
.psa-wt-choice:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-surface)); }
.psa-wt-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.psa-wt-choice-t { font-size: 13px; font-weight: 700; line-height: 1.35; }
.psa-wt-choice-g { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
/* "See all help for this screen" — closed until asked for. */
.psa-all { width: 100%; margin-top: 12px; text-align: start; }
.psa-all-tog {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 6px;
    border: 0; background: none; color: var(--text-secondary); font-size: 12.5px; font-weight: 700;
    cursor: pointer; border-radius: 8px;
}
.psa-all-tog:hover { color: var(--text-primary); background: var(--bg-hover); }
.psa-all-tog:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.psa-all-tog[aria-expanded="true"] { color: var(--text-primary); }
.psa-all-body { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.psa-all-h { margin: 6px 0 2px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.psa-all-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); padding: 4px 2px; }
.psa-all-more[open] > summary { color: var(--text-primary); }

.psa-wt-tasks-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.psa-wt-task {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 40px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-elevated));
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
}
.psa-wt-task:hover { border-color: color-mix(in srgb, var(--accent) 60%, var(--border-color)); }
.psa-wt-task i { color: var(--ice); font-size: 16px; flex: none; }
.psa-wt-task-l { flex: 1 1 auto; min-width: 0; }
.psa-wt-task-n { flex: none; font-size: 11.5px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }

.psa-wt-banner {
    padding: 10px 12px;
    margin-bottom: 4px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border-color));
    border-inline-start: 3px solid var(--accent);
}
.psa-wt-banner-t { margin: 0 0 8px; font-size: 13px; font-weight: 600; line-height: 1.45; }
.psa-wt-banner-a { display: flex; gap: 8px; flex-wrap: wrap; }

/* the guide card */
.psa-guide {
    position: fixed;
    z-index: 9052;
    width: min(360px, calc(100vw - 24px));
    padding: 12px 14px 12px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border-color));
    border-radius: 16px;
    box-shadow: 0 24px 54px -18px var(--shadow-color), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
    font-size: 13.5px;
    line-height: 1.5;
    animation: psaCoachIn .2s ease-out;
}
.psa-guide[hidden] { display: none; }
.psa-guide.is-docked {
    left: 10px !important;
    right: 10px;
    top: auto !important;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-width: none !important;
    max-height: 48dvh;
    overflow-y: auto;
}
/* The control the step is about sits where the bottom card would be (a dialog's
   last button): the card docks at the top instead. */
.psa-guide.is-docked.is-docked-top {
    top: calc(10px + env(safe-area-inset-top, 0px)) !important;
    bottom: auto;
}
.psa-guide-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.psa-guide-mark { font-size: 13px; flex: none; --pc-mark-bg: var(--bg-elevated); margin-inline: 2px 0; }
.psa-guide-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.psa-guide-task { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.psa-guide-count { font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.psa-guide-bar { height: 3px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; margin: 0 0 10px; }
.psa-guide-bar span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .25s ease; }
.psa-guide-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.35; }
.psa-guide-title:focus { outline: none; }
.psa-guide-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.psa-guide-do { margin: 0 0 8px; }
.psa-guide-do strong { font-weight: 700; color: var(--ice); }
.psa-guide-wait { color: var(--text-secondary); }
.psa-guide-problem { color: var(--text-primary); }
.psa-guide-line { display: flex; gap: 6px; align-items: baseline; margin: 0 0 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.psa-guide-line i { flex: none; font-size: 13px; position: relative; top: 2px; }
.psa-guide-line-h { font-weight: 700; white-space: nowrap; }
.psa-guide-line strong { font-weight: 700; color: var(--text-primary); }
.psa-guide-tip { color: color-mix(in srgb, var(--st-warn-solid, var(--accent)) 70%, var(--text-primary)); }
.psa-guide-hint { margin: 2px 0 6px; font-size: 12px; color: var(--text-secondary); font-style: italic; }
.psa-guide-choices { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.psa-guide-choose { margin: 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.psa-guide-opt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    padding: 8px 11px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
    color: var(--text-primary);
    text-align: start;
    cursor: pointer;
}
.psa-guide-opt:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-color)); background: color-mix(in srgb, var(--accent) 6%, var(--bg-surface)); }
.psa-guide-opt-l { font-size: 13px; font-weight: 700; color: var(--ice); }
.psa-guide-opt-w { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.psa-guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.psa-guide-foot-a { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.psa-gbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}
.psa-gbtn i { font-size: 15px; }
.psa-gbtn--quiet:hover { background: var(--bg-hover); color: var(--text-primary); }
.psa-gbtn--primary { background: var(--accent-solid, var(--accent)); color: #fff; border-color: var(--accent-solid, var(--accent)); padding-inline: 14px; }
.psa-gbtn--primary:hover { filter: brightness(1.08); }
.psa-guide-x { margin-inline-start: auto; width: 30px; height: 30px; padding: 0; justify-content: center; }
.psa-gbtn:focus-visible, .psa-guide-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The walkthrough's ring stays while its step does: one pulse, then steady. */
.psa-ring--walk { animation-iteration-count: 1; }
/* "Highlight again": the mark once more (a static stronger ring under reduced motion). */
.psa-ring--walk.is-again { animation: psaRing 0.9s ease-in-out 2; }
@media (forced-colors: active) {
    .psa-guide { border: 2px solid CanvasText; }
    .psa-wt-go, .psa-gbtn--primary { border: 2px solid ButtonText; }
}

/* ── first-run welcome ─────────────────────────────────────────────────── */
.psa-welcome {
    position: fixed;
    inset: 0;
    z-index: 9300;
    display: grid;
    place-items: center;
    padding: 16px;
    background: color-mix(in srgb, var(--bg-app) 64%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.psa-welcome[hidden] { display: none; }
.psa-welcome-card {
    width: min(420px, 100%);
    padding: 32px 28px 24px;
    text-align: center;
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-top-color: color-mix(in srgb, var(--accent) 42%, var(--border-color));
    border-radius: 22px;
    box-shadow: 0 44px 120px -54px var(--shadow-color), 0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent);
    animation: psaWelcomeIn .26s cubic-bezier(.2, .8, .2, 1);
}
@keyframes psaWelcomeIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.psa-welcome-signet { position: relative; width: 66px; height: 66px; margin: 0 auto 18px; display: grid; place-items: center; }
.psa-welcome-signet::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
}
.psa-welcome-signet .pc-logo-mark { position: relative; font-size: 30px; --pc-mark-bg: var(--bg-surface); }
.psa-welcome-title { margin: 0 0 8px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.psa-welcome-text { margin: 0 auto 12px; max-width: 340px; font-size: 14.5px; line-height: 1.62; color: var(--text-secondary); }
/* vNEXT — what the assistant does, in three lines. */
.psa-welcome-list { list-style: none; margin: 0 auto 22px; padding: 0; max-width: 340px; display: flex; flex-direction: column; gap: 9px; text-align: start; }
.psa-welcome-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }
.psa-welcome-list i { flex: none; font-size: 17px; color: var(--ice); margin-top: 1px; }
.psa-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.psa-welcome-actions .psa-btn { min-width: 120px; }

/* Link-coloured text. --ice is a light blue made for the dark theme; on the light
   and cream surfaces it falls below 4.5:1 (light: 4.14 on the action chip), so
   those themes use their accent — measured 5.24 / 4.79 on the chip, ≥5.1 on the
   answer card. The chip's hover tint stays at 14% there, where the accent still
   reads 5.00 / 4.59 (at the usual 18% cream would drop to 4.32). */
[data-theme="light"] .psa-chip--action,
[data-theme="light"] .psa-ext,
[data-theme="light"] .psa-link,
[data-theme="cream"] .psa-chip--action,
[data-theme="cream"] .psa-ext,
[data-theme="cream"] .psa-link { color: var(--accent); }
/* The guide's UI names and choices are link-coloured text too (axe: --ice is 4.45:1 on
   the light card; the accent passes in both themes). */
[data-theme="light"] .psa-guide-do strong,
[data-theme="light"] .psa-guide-opt-l,
[data-theme="light"] .psa-wt-step:hover,
[data-theme="cream"] .psa-guide-do strong,
[data-theme="cream"] .psa-guide-opt-l,
[data-theme="cream"] .psa-wt-step:hover { color: var(--accent); }
[data-theme="light"] .psa-chip--action:hover,
[data-theme="cream"] .psa-chip--action:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg-surface)); }

/* The launcher floats over the content's bottom corner, so whatever sits LAST on
   a page must be able to scroll clear of it: the page's own 24px plus the
   launcher's footprint (18 + 46). The Inbox is a fixed-height cage with no page
   scroll; its list carries its own clearance below. */
body.psa-on #app-content:not(.inbox-mode) { padding-bottom: 88px; }

/* The customer-details column is the Inbox column at the inline-end edge, so it is
   the one under the launcher's corner in BOTH directions (measured from 800 to
   1440px, Hebrew and English) — give its last row room to scroll clear of it. */
body.psa-on #app-content.inbox-mode #inbox-crm-scroller { padding-bottom: 72px; }

/* The Smart Assistant is a full-height WORKSPACE (v426+): nothing on it scrolls the page, so
   the page-bottom clearance above cannot help — #app-content frames it at 16px instead (see
   style.css), and the 88px it used to keep there was the blank strip under all three panes.
   The launcher's corner (inline-end, 18–64px from the viewport edge and from the bottom) falls
   on the BOTTOM ROW of whichever pane is at that edge, so that row keeps the footprint free:
   the test chat's composer when the chat is in the layout, the editor's save bar when it is
   not (1100–1359 with the chat closed, and below 1100). An OPEN test-chat sheet is a modal and
   the launcher steps aside instead (shouldHide in support-assistant.js). Not in focus mode:
   there the composer is a centred reading column that never reaches the corner. */
@media (min-width: 900px) {
    body.psa-on #view-assistant .sa-studio:not(.is-chat-focus) .sa-pv-foot { padding-inline-end: 60px; }
    /* …which narrows the box: its hint stays one line instead of wrapping half out of view. */
    body.psa-on #view-assistant .sa-pv-input::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.psa-on #view-assistant[data-sa-chat="sheet"] .sa-savebar,
    body.psa-on #view-assistant[data-sa-chat="dock"] .sa-studio:not(.is-chat-docked) .sa-savebar { padding-inline-end: 60px; }
}

/* ── phones ────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    /* A calm phone header: two 40px touch targets, New conversation by its icon (its
       name stays — the label is the accessible name's visible half on wider screens). */
    .psa-head-btn { width: 40px; height: 40px; padding: 0; justify-content: center; border-color: transparent; background: transparent; }
    .psa-head-btn-l { display: none; }
    .psa-head-btn i { font-size: 19px; }
    .psa-icon-btn { width: 40px; height: 40px; font-size: 19px; }
    .psa-launcher {
        inset-inline-end: 14px;
        bottom: calc(14px + var(--psa-lift, 0px) + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
    .psa-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: min(88dvh, 720px);
        border-radius: 20px 20px 0 0;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform-origin: 50% 100%;
    }
    .psa-welcome-card { padding: 28px 20px 20px; }
    /* The phone page scrolls the document; its last row clears the launcher
       (12px page padding + 14 + 44, and the home indicator). */
    body.psa-on #app-content:not(.inbox-mode) { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
    /* On a phone the conversation list is full width, so the launcher's corner sits
       over its last row in both directions. */
    body.psa-on #app-content.inbox-mode #inbox-chat-list { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .psa-panel, .psa-ring, .psa-coach, .psa-guide, .psa-welcome-card, .psa-dots span { animation: none !important; }
    .psa-launcher-mark, .psa-launcher::before { animation: none !important; }
    .psa-guide-bar span, .psa-wt-go { transition: none !important; }
    .psa-wt-go:hover { transform: none; }
    .psa-launcher, .psa-chip, .psa-send, .psa-ring, .psa-launcher-dot { transition: none !important; }
    .psa-launcher:hover, .psa-chip--action:hover, .psa-send:not(:disabled):hover { transform: none; }
    .psa-ring--walk.is-again { box-shadow: 0 0 0 3px var(--accent), 0 0 0 11px color-mix(in srgb, var(--accent) 26%, transparent); }
}

/* ── System Management › ProConnect Assistant (admin-support-assistant.js) ──
   Status colour only from the --st-* family, like the rest of the console. */
.psaa-body { display: flex; flex-direction: column; gap: 14px; }
.psaa-sec { margin-top: 14px; }
.psaa-chip {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    vertical-align: middle;
}
.psaa-chip--ok { background: var(--st-ok-bg); color: var(--st-ok-text); border-color: var(--st-ok-border); }
.psaa-chip--warn { background: var(--st-warn-bg); color: var(--st-warn-text); border-color: var(--st-warn-border); }
.psaa-chip--bad { background: var(--st-danger-bg); color: var(--st-danger-text); border-color: var(--st-danger-border); }
.psaa-chip--neutral { background: var(--st-neutral-bg); color: var(--st-neutral-text); border-color: var(--st-neutral-border); }
.psaa-modes { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.psaa-modes .ap-btn.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.psaa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.psaa-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.psaa-check { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: 600; }
.psaa-pre {
    margin: 6px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border-color);
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.psaa-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.psaa-details { margin-top: 10px; }
.psaa-details summary { cursor: pointer; font-weight: 600; }
.psaa-list { margin: 8px 0 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.6; }
.psaa-sub { font-size: 11.5px; color: var(--text-secondary); }
.psaa-sum { max-width: 360px; white-space: normal; }
.psaa-msg { padding: 10px 12px; border-radius: 12px; font-weight: 600; }
.psaa-msg.is-ok { background: var(--st-ok-bg); color: var(--st-ok-text); border: 1px solid var(--st-ok-border); }
.psaa-msg.is-bad { background: var(--st-danger-bg); color: var(--st-danger-text); border: 1px solid var(--st-danger-border); }
/* vNEXT — System Management › Help quality: compact lists in a responsive grid. */
.psaa-qgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 18px; margin-top: 14px; }
.psaa-qblock { min-width: 0; }
.psaa-qh { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.psaa-qlist { margin: 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.55; }
.psaa-qlist li { margin-bottom: 4px; overflow-wrap: anywhere; }
.psaa-qlist li > span:first-child { display: block; font-weight: 600; }
.psaa-qintent { unicode-bidi: isolate; }

/* vNEXT — live diagnostics: "I checked — the actual reason is …". The verdict
   first, the evidence behind [Why?] (verified facts ticked, what could not be
   verified said so), then the way to the fix and [Check again]. Status colour
   from the --st-* family only. */
.psa-dx {
    display: flex; flex-direction: column; gap: 6px; width: 100%;
    padding: 10px 12px; border-radius: 12px;
    border: 1px solid var(--st-neutral-border, var(--border-color));
    background: var(--st-neutral-bg, var(--bg-surface));
}
.psa-dx--blocked { border-color: var(--st-warn-border); background: var(--st-warn-bg); }
.psa-dx--ok { border-color: var(--st-ok-border); background: var(--st-ok-bg); }
.psa-dx-cause { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-primary); line-height: 1.45; }
.psa-dx-next { margin: 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.psa-dx-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.psa-dx-fact { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.psa-dx-fact::before { flex: none; width: 1em; text-align: center; font-weight: 700; }
.psa-dx-fact.is-verified::before { content: '✓'; color: var(--st-ok-text); }
.psa-dx-fact.is-unverified::before { content: '?'; color: var(--text-secondary); }
.psa-dx-k { color: var(--text-secondary); }
.psa-dx-v { color: var(--text-primary); font-weight: 600; }
.psa-dx-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }

/* ── v348 — the calm answer ─────────────────────────────────────────────────
   An answer is TEXT, not a card: what is true, ONE primary button (at most one
   quieter one beside it), and everything else behind a single disclosure. A check's
   verdict is a thin status edge on that text — never a box of its own, never a card
   inside a card. The empty panel asks one question and offers three things. */
.psa-answer {
    padding: 2px 2px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 14px;
    line-height: 1.6;
}
.psa-msg--assistant.is-error .psa-answer,
.psa-msg--assistant.is-note .psa-answer {
    padding: 9px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 72%, var(--bg-surface));
    border: 1px solid var(--border-color);
}
.psa-answer--dx { padding-inline-start: 11px; border-inline-start: 3px solid var(--st-neutral-border, var(--border-color)); }
.psa-answer--found { border-inline-start-color: var(--st-warn-solid, var(--accent)); }
.psa-answer--ok { border-inline-start-color: var(--st-ok-solid, var(--accent)); }
.psa-answer .psa-dx { gap: 3px; padding: 0; border: 0; border-radius: 0; background: none; }
.psa-answer .psa-dx-cause { font-size: 14px; font-weight: 600; line-height: 1.5; }
.psa-dx-rec { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); }

/* The next step: the best ONE first. */
.psa-next { gap: 8px; align-items: center; }
.psa-chip--action, .psa-wt-go { max-width: 100%; }
.psa-chip--action > span, .psa-wt-go-l { overflow-wrap: anywhere; }
.psa-next > .is-primary.psa-chip--action {
    background: var(--accent-solid, var(--accent));
    border-color: transparent;
    color: #fff;
}
.psa-next > .is-primary.psa-chip--action:hover { background: var(--accent-solid, var(--accent)); filter: brightness(1.06); }
.psa-next > .is-secondary.psa-wt-go,
.psa-next > .is-secondary.psa-chip--action {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--ice);
    box-shadow: none;
}
.psa-next > .is-secondary.psa-wt-go:hover,
.psa-next > .is-secondary.psa-chip--action:hover { background: var(--bg-hover); transform: none; }
.psa-next > .is-secondary .psa-wt-go-n { background: var(--bg-hover); color: var(--text-secondary); }

/* On request: ONE disclosure. */
.psa-more { font-size: 13px; color: var(--text-secondary); }
.psa-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 2px 6px;
    margin-inline-start: -6px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    list-style: none;
}
.psa-more > summary::-webkit-details-marker { display: none; }
.psa-more > summary::before {
    content: '';
    width: 6px;
    height: 6px;
    border-inline-end: 1.5px solid currentColor;
    border-block-end: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .15s ease;
}
html[dir="rtl"] .psa-more > summary::before { transform: rotate(45deg); }
.psa-more[open] > summary::before { transform: rotate(45deg); }
html[dir="rtl"] .psa-more[open] > summary::before { transform: rotate(-45deg); }
.psa-more > summary:hover, .psa-more[open] > summary { color: var(--text-primary); }
.psa-more > summary:hover { background: var(--bg-hover); }
.psa-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.psa-more-body {
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-elevated) 55%, var(--bg-surface));
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-primary);
}
.psa-more-h { margin: 4px 0 0; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.psa-more-body .psa-md p { margin-bottom: 6px; }
.psa-dx-why { display: flex; flex-direction: column; gap: 5px; }
.psa-dx-evidence { margin: 0; padding-inline-start: 18px; list-style: disc; display: flex; flex-direction: column; gap: 2px; }
.psa-dx-evidence li::marker { color: var(--text-secondary); }
.psa-dx-also, .psa-dx-adv { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.psa-dx-quote { margin: 0; }
.psa-dx-quote-src { font-size: 12px; color: var(--text-secondary); }
.psa-dx-quote blockquote { margin: 3px 0 0; padding-inline-start: 10px; border-inline-start: 2px solid var(--border-color); color: var(--text-primary); }
.psa-more-opts { gap: 6px; }

/* The answer's last line: the disclosure, and the thumbs at its end. */
.psa-msg-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.psa-msg-foot > .psa-more { flex: 1 1 auto; min-width: 0; }
.psa-msg-foot > .psa-feedback { flex: none; margin-inline-start: auto; }

/* Quiet feedback: two small icons, at rest half there. */
.psa-feedback { gap: 2px; opacity: .55; transition: opacity .15s ease; }
.psa-feedback:hover, .psa-feedback:focus-within { opacity: 1; }
.psa-fb { width: 26px; height: 26px; font-size: 14px; }

/* The empty panel: one question, three suggestions, one quiet link. */
.psa-empty { padding: 20px 2px 4px; text-align: start; }
.psa-empty-title { margin: 0 0 14px; font-size: 17px; font-weight: 800; text-align: center; color: var(--text-primary); }
.psa-chip--suggest { gap: 10px; min-height: 42px; padding: 9px 13px; font-weight: 500; }
.psa-chip--suggest i { flex: none; font-size: 16px; color: var(--ice); }
.psa-suggest-l { overflow-wrap: anywhere; }
.psa-all { margin-top: 10px; text-align: center; }
.psa-all-body { text-align: start; }
.psa-all-body .psa-empty-intro { align-self: flex-start; margin: 0 0 4px; }
.psa-empty > .psa-empty-intro { display: block; margin: 12px auto 0; }

/* The guide card: one instruction; "what you will see" and the tip on request. */
.psa-guide-more { margin: 0 0 6px; }
.psa-guide-more > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-secondary); padding: 2px 0; }
.psa-guide-more[open] > summary { color: var(--text-primary); }
.psa-guide-more .psa-guide-line { margin: 4px 0 0; }

@media (max-width: 767px) {
    .psa-next > .psa-chip--action, .psa-next > .psa-wt-go { min-height: 40px; }
    .psa-empty { padding-top: 14px; }
}