/* =========================================================================
   Paysavo Support messenger — launcher, panel, conversation.

   NATIVE, NOT EMBEDDED. This is a Paysavo product surface, not a
   third-party widget dropped onto the site. Every colour resolves a
   --pvs-* token from frontend/seo/_tokens.blade.php, so the messenger
   inherits the brand's lime/forest palette and its light/dark switching
   and cannot drift into a separate blue "support theme". No --pvs-* or
   --pv-* token is redefined here.

   ── THREE IDENTITIES, ONE SHELL ────────────────────────────────────────

   Help Center, Ask Paysavo and Human Support share this panel's chrome,
   typography, spacing, radius, motion and dark mode — and deliberately
   DO NOT share message or identity treatment:

     Ask Paysavo    sparkle mark, accent-tinted bubble, and a persistent
                    "AI assistant" line that is present in EVERY
                    conversation state, not only on the home screen.
     Human Support  person mark, neutral raised bubble, real
                    `assigned_agent_display_name` + "Support specialist"
                    ONLY once a real assignment exists.
     Help Center    link cards, never chat bubbles — content, not
                    conversation.

   This is a customer-disclosure concern in a regulated financial product,
   not decoration: a customer must always know whether an answer came from
   a model or a person, because that changes who is accountable for it.
   There is deliberately no styling here for a human avatar photo, a job
   title on an AI message, or a "typing" indicator on the AI — the CSS
   makes those states unrepresentable rather than merely unused.
   ========================================================================= */

.pvm {
    --pvm-panel-w: 400px;
    --pvm-panel-h: 680px;
    --pvm-radius: 20px;
    --pvm-launcher: 60px;

    position: fixed;
    z-index: 1080; /* above site chrome, below any modal/backdrop the app owns */
    right: clamp(16px, 2.2vw, 28px);
    bottom: clamp(16px, 2.2vw, 28px);

    /* Never covers a submit button, cookie control or nav on its own:
       the container is only as large as the launcher until opened. */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;

    font-size: 15px;
    line-height: 1.5;
    color: var(--pvs-ink);
}

/* iPhone home indicator / notch. Applied to the fixed container so both
   the launcher and the mobile sheet clear the safe area. */
@supports (padding: max(0px)) {
    .pvm {
        right: max(clamp(16px, 2.2vw, 28px), env(safe-area-inset-right));
        bottom: max(clamp(16px, 2.2vw, 28px), env(safe-area-inset-bottom));
    }
}

/* ------------------------------------------------------------- launcher */

.pvm-launcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: var(--pvm-launcher);
    height: var(--pvm-launcher);
    flex: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: var(--pvs-accent);
    color: #08210a; /* 9.2:1 on the brand lime — the token file's own pairing */
    box-shadow: var(--pvs-shadow-lg);
    transition: transform 200ms var(--pvs-ease), box-shadow 200ms var(--pvs-ease);
}

.pvm-launcher:hover { transform: translateY(-2px) scale(1.03); }
.pvm-launcher:focus-visible { outline: 3px solid var(--pvs-accent-deep); outline-offset: 3px; }
.pvm-launcher i { font-size: 26px; line-height: 1; }

/* The close glyph swaps in while the panel is open, so the launcher is
   also the dismiss control rather than a second competing button. */
.pvm-launcher__open { display: inline-flex; }
.pvm-launcher__close { display: none; }
.pvm.is-open .pvm-launcher__open { display: none; }
.pvm.is-open .pvm-launcher__close { display: inline-flex; }

/* UNREAD BADGE — rendered only when the client has a genuinely unread
   agent message. There is no "attention" or marketing variant of this
   badge, deliberately: a support badge that appears without a real
   message trains customers to ignore the real one. */
.pvm-launcher__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pvs-danger);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--pvs-surface);
}

.pvm.has-unread .pvm-launcher__badge { display: inline-flex; }

/* ---------------------------------------------------------------- panel */

.pvm-panel {
    display: none;
    flex-direction: column;
    width: var(--pvm-panel-w);
    max-width: calc(100vw - 32px);
    height: var(--pvm-panel-h);
    max-height: calc(100vh - 120px);
    overflow: hidden;
    border-radius: var(--pvm-radius);
    background: var(--pvs-surface);
    border: 1px solid var(--pvs-line);
    box-shadow: var(--pvs-shadow-lg);
}

.pvm.is-open .pvm-panel { display: flex; }

@media (prefers-reduced-motion: no-preference) {
    .pvm.is-open .pvm-panel {
        animation: pvm-rise 220ms var(--pvs-ease) both;
    }
}

@keyframes pvm-rise {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
}

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

.pvm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    background: var(--pvs-grad-deep);
    color: var(--pvs-on-deep);
    flex: none;
}

.pvm-head__back,
.pvm-head__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--pvs-on-deep);
    cursor: pointer;
    font-size: 20px;
}

.pvm-head__back:hover,
.pvm-head__close:hover { background: rgba(255, 255, 255, .12); }
.pvm-head__back:focus-visible,
.pvm-head__close:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }
.pvm-head__close { margin-left: auto; }
.pvm-head__back[hidden] { display: none; }

.pvm-head__id { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* IDENTITY MARK. Three variants, visually distinct on purpose. There is
   no photo variant: a real agent is represented by initials from the
   approved display name, never by a stock portrait. */
.pvm-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    font-size: 19px;
    line-height: 1;
}

.pvm-mark--brand { background: var(--pvs-accent); color: #08210a; }
/* The AI mark sits on the DEEP header in both themes, so it takes the
   bright lime, not --pvs-accent-deep: that token is the AA-safe accent
   for LIGHT surfaces and renders near-invisible here. */
.pvm-mark--ai { background: rgba(255, 255, 255, .14); color: var(--pvs-accent); }
.pvm-mark--human { background: rgba(255, 255, 255, .16); color: var(--pvs-on-deep); font-size: 15px; font-weight: 800; }

.pvm-head__text { min-width: 0; display: flex; flex-direction: column; }
.pvm-head__title { font-size: 15.5px; font-weight: 800; line-height: 1.25; color: var(--pvs-on-deep); overflow-wrap: anywhere; }

/* The persistent disclosure line. In an Ask Paysavo state this reads
   "AI assistant" and is present in EVERY state of that conversation —
   not only on the home screen. */
.pvm-head__sub {
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--pvs-on-deep-soft);
    display: flex;
    align-items: center;
    gap: 6px;
}

.pvm-head__sub .pvm-aitag { color: var(--pvs-accent-deep); font-weight: 700; }

/* ----------------------------------------------------------------- body */

.pvm-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Phase 5 review finding — a flex-sizing bug let a long attachment
       filename bleed content outside this panel entirely (see
       .pvm-msg's own min-width: 0 comment for the actual root cause and
       fix). That's fixed at the source, but this is a deliberate second
       line of defence: nothing inside this scrollable column should
       ever be able to widen the floating widget itself again. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 16px;
    background: var(--pvs-surface);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ------------------------------------------------------------ home view */

.pvm-greet { padding: 4px 2px 2px; }
.pvm-greet__hi { font-size: 21px; font-weight: 800; letter-spacing: -.015em; margin: 0 0 4px; color: var(--pvs-ink); }
.pvm-greet__sub { font-size: 14.5px; color: var(--pvs-ink-soft); margin: 0; }

.pvm-choices { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }

.pvm-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--pvs-line);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: border-color 160ms var(--pvs-ease), transform 160ms var(--pvs-ease);
}

.pvm-choice:hover { border-color: var(--pvs-accent); transform: translateY(-1px); }
.pvm-choice:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }

.pvm-choice__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 11px;
    font-size: 19px;
}

/* Each capability keeps its own mark colour on the home screen, so the
   choice a customer is about to make is legible before they make it. */
.pvm-choice--ai .pvm-choice__icon { background: var(--pvs-accent-tint); color: var(--pvs-accent-text); }
.pvm-choice--human .pvm-choice__icon { background: var(--pvs-surface-sunken); color: var(--pvs-ink); }
.pvm-choice--kb .pvm-choice__icon { background: var(--pvs-surface-sunken); color: var(--pvs-ink-soft); }

.pvm-choice__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pvm-choice__title { font-weight: 700; font-size: 15px; line-height: 1.3; }
.pvm-choice__desc { font-size: 13px; color: var(--pvs-ink-muted); line-height: 1.4; }
.pvm-choice__go { margin-left: auto; flex: none; color: var(--pvs-ink-muted); font-size: 18px; }

.pvm-section-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--pvs-ink-muted);
    margin: 6px 2px 0;
}

/* ------------------------------------------------------------- messages */

/* min-width: 0 overrides the flex-item default of `auto`, which
   otherwise resolves to the box's min-content size — for a bubble
   containing a long, nowrap attachment filename that min-content size
   beats `max-width: 88%` outright (min wins over max on a genuine
   conflict), so the whole message renders at its content's full width
   and bleeds out of .pvm-body/.pvm-panel instead of being capped at
   88%. Same fix needed on .pvm-msg__attachment and
   .pvm-msg__attachment-link below — each is itself a flex item one
   level further in, with the identical default. */
.pvm-msg { display: flex; flex-direction: column; gap: 5px; max-width: 88%; min-width: 0; }
.pvm-msg__who { font-size: 11.5px; font-weight: 700; color: var(--pvs-ink-muted); display: flex; align-items: center; gap: 5px; }
.pvm-msg__bubble { padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.pvm-msg__time { font-size: 11px; color: var(--pvs-ink-muted); }

/* Phase 5 — the actual openable attachment, same visual language as
   .pvm-cite below (a bordered pill row), not the message bubble it
   sits alongside — an attachment is a distinct object, not more text. */
.pvm-msg__attachment { display: flex; min-width: 0; max-width: 100%; }
.pvm-msg__attachment-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    border: 1px solid var(--pvs-line);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
}
.pvm-msg__attachment-link:hover,
.pvm-msg__attachment-link:focus-visible { border-color: var(--pvs-accent); color: var(--pvs-ink); }
.pvm-msg__attachment-link:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }
.pvm-msg__attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* CUSTOMER — accent-filled, right aligned. */
.pvm-msg--me { align-self: flex-end; align-items: flex-end; }
.pvm-msg--me .pvm-msg__bubble { background: var(--pvs-accent); color: #08210a; border-bottom-right-radius: 5px; }

/* ASK PAYSAVO — accent-TINTED with an accent left edge and a sparkle in
   the attribution. Deliberately NOT the neutral treatment a human gets:
   the two must never be mistaken for each other mid-scroll. The "AI"
   tag rides on every single AI message, not just the first. */
.pvm-msg--ai { align-self: flex-start; }
.pvm-msg--ai .pvm-msg__bubble {
    background: var(--pvs-accent-tint);
    border: 1px solid var(--pvs-accent);
    border-left: 3px solid var(--pvs-accent-deep);
    color: var(--pvs-ink);
    border-bottom-left-radius: 5px;
}
.pvm-msg--ai .pvm-msg__who { color: var(--pvs-accent-text); }
.pvm-msg--ai .pvm-msg__who .pvm-aitag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--pvs-accent-deep);
    color: #fff;
}

/* HUMAN AGENT — neutral raised surface, no accent tint, no left edge.
   Structurally different from the AI bubble, not a recoloured copy. */
.pvm-msg--agent { align-self: flex-start; }
.pvm-msg--agent .pvm-msg__bubble {
    background: var(--pvs-surface-raised);
    border: 1px solid var(--pvs-line-strong);
    color: var(--pvs-ink);
    border-bottom-left-radius: 5px;
}

/* SYSTEM EVENT — the handoff line and other real status transitions.
   Centred, quiet, unmistakably not a person speaking. */
.pvm-event {
    align-self: center;
    max-width: 92%;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--pvs-ink-muted);
    background: var(--pvs-surface-sunken);
    border: 1px solid var(--pvs-line);
    border-radius: 12px;
    padding: 9px 13px;
}

.pvm-event strong { color: var(--pvs-ink); font-weight: 700; }

/* ------------------------------------------------------ citation cards */

/* Help Center content INSIDE the conversation keeps the Help Center's own
   link-card idiom rather than becoming a chat bubble — content is not
   conversation, and the customer should recognise where the answer's
   evidence lives. */
.pvm-cites { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.pvm-cites__label { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--pvs-ink-muted); }

.pvm-cite {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 11px;
    border: 1px solid var(--pvs-line);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.35;
}

.pvm-cite:hover, .pvm-cite:focus-visible { border-color: var(--pvs-accent); color: var(--pvs-ink); }
.pvm-cite:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }
.pvm-cite__text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pvm-cite__title { font-weight: 700; overflow-wrap: anywhere; }
.pvm-cite__cat { font-size: 11.5px; color: var(--pvs-ink-muted); }
.pvm-cite__go { margin-left: auto; flex: none; color: var(--pvs-accent-text); font-size: 16px; }

/* ---------------------------------------------------- CSAT (Release Train D) */

/* Same card idiom as .pvm-cite/.pvm-signin — a bordered, raised-surface
   block inside the conversation body, never a chat bubble (feedback is
   not a message from either party). */
.pvm-csat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--pvs-line);
    background: var(--pvs-surface-raised);
    align-self: stretch;
}

.pvm-csat--thanks { align-items: flex-start; }

.pvm-csat__title { font-size: 14px; font-weight: 700; color: var(--pvs-ink); margin: 0; }
.pvm-csat__desc, .pvm-csat__note { font-size: 12.5px; color: var(--pvs-ink-muted); margin: 0; line-height: 1.4; }

.pvm-csat__stars { display: flex; gap: 4px; }
.pvm-csat__stars--readonly { gap: 2px; }

.pvm-csat__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--pvs-line-strong);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
}

button.pvm-csat__star:hover, button.pvm-csat__star:focus-visible { background: var(--pvs-accent-tint); }
button.pvm-csat__star:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 1px; }
.pvm-csat__star.is-selected { color: var(--pvs-accent-text); }

.pvm-csat__stars--readonly .pvm-csat__star { width: 20px; height: 20px; font-size: 14px; cursor: default; }

.pvm-csat__resolved { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pvm-csat__resolved-label { font-size: 13px; color: var(--pvs-ink-soft); }
.pvm-csat__resolved-choices { display: flex; gap: 6px; }

.pvm-csat__resolved-btn {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--pvs-line-strong);
    background: transparent;
    color: var(--pvs-ink-soft);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.pvm-csat__resolved-btn.is-selected { background: var(--pvs-accent-tint); border-color: var(--pvs-accent); color: var(--pvs-accent-text); }
.pvm-csat__resolved-btn:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }

.pvm-csat__comment {
    width: 100%;
    resize: vertical;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--pvs-line-strong);
    background: var(--pvs-surface);
    color: var(--pvs-ink);
    font: inherit;
    font-size: 13.5px;
}

.pvm-csat__comment:focus-visible { outline: none; border-color: var(--pvs-accent); box-shadow: 0 0 0 3px var(--pvs-accent-tint); }

.pvm-csat__comment-readonly {
    font-size: 13.5px;
    color: var(--pvs-ink-soft);
    background: var(--pvs-surface-sunken);
    border-radius: 10px;
    padding: 9px 12px;
    margin: 0;
    line-height: 1.4;
}

.pvm-csat__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pvm-csat__actions .pvm-btn { padding: 9px 16px; min-height: 38px; font-size: 13.5px; }

/* ------------------------------------------------------------- statuses */

.pvm-status { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--pvs-ink-soft); padding: 2px; }

.pvm-spinner {
    width: 15px;
    height: 15px;
    flex: none;
    border-radius: 50%;
    border: 2px solid var(--pvs-line-strong);
    border-top-color: var(--pvs-accent-deep);
    animation: pvm-spin 720ms linear infinite;
}

@keyframes pvm-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pvm-spinner { animation: none; border-top-color: var(--pvs-line-strong); }
    .pvm.is-open .pvm-panel { animation: none; }
    .pvm-launcher, .pvm-choice { transition: none; }
    .pvm-launcher:hover, .pvm-choice:hover { transform: none; }
}

/* ------------------------------------------------------------- composer */

.pvm-foot {
    flex: none;
    padding: 12px;
    border-top: 1px solid var(--pvs-line);
    background: var(--pvs-surface);
}

.pvm-composer { display: flex; align-items: flex-end; gap: 8px; }

.pvm-composer__input {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    max-height: 120px;
    padding: 11px 13px;
    border-radius: 13px;
    border: 1px solid var(--pvs-line-strong);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    font: inherit;
    font-size: 16px; /* < 16px makes mobile Safari zoom the viewport on focus */
    line-height: 1.45;
}

.pvm-composer__input:focus { outline: none; border-color: var(--pvs-accent); box-shadow: 0 0 0 3px var(--pvs-accent-tint); }
.pvm-composer__input::placeholder { color: var(--pvs-ink-muted); }

.pvm-composer__send {
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    background: var(--pvs-accent);
    color: #08210a;
    font-size: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pvm-composer__send:disabled { opacity: .45; cursor: not-allowed; }
.pvm-composer__send:focus-visible { outline: 2px solid var(--pvs-accent-deep); outline-offset: 2px; }

/* Phase 5 — attachment button, same 44px tap target as Send, ghost style
   so Send stays the single visually-dominant primary action. */
.pvm-composer__attach {
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--pvs-line-strong);
    border-radius: 12px;
    cursor: pointer;
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink-muted);
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pvm-composer__attach:hover:not(:disabled) { color: var(--pvs-ink); border-color: var(--pvs-accent); }
.pvm-composer__attach:disabled { opacity: .45; cursor: not-allowed; }
.pvm-composer__attach:focus-visible { outline: 2px solid var(--pvs-accent-deep); outline-offset: 2px; }

.pvm-attachment-status {
    margin: 0 16px 8px;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
}
.pvm-attachment-status--uploading { color: var(--pvs-ink-muted); background: var(--pvs-surface-raised); border: 1px solid var(--pvs-line-strong); }
.pvm-attachment-status--success { color: var(--pvs-accent-deep); background: var(--pvs-accent-tint); border: 1px solid var(--pvs-accent); }
.pvm-attachment-status--error { color: var(--pvs-danger); background: color-mix(in srgb, var(--pvs-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pvs-danger) 30%, transparent); }

.pvm-foot__note { font-size: 11.5px; color: var(--pvs-ink-muted); margin: 8px 2px 0; text-align: center; }

/* ------------------------------------------------------------- guest */

.pvm-guest { display: flex; flex-direction: column; gap: 14px; }
.pvm-guest__form { display: flex; gap: 8px; }
.pvm-guest__form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid var(--pvs-line-strong);
    background: var(--pvs-surface-raised);
    color: var(--pvs-ink);
    font-size: 16px;
}
.pvm-guest__form input:focus { outline: none; border-color: var(--pvs-accent); box-shadow: 0 0 0 3px var(--pvs-accent-tint); }

.pvm-topics { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.pvm-topic {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid var(--pvs-line-strong);
    background: var(--pvs-surface);
    color: var(--pvs-ink);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    min-height: 38px;
}
.pvm-topic:hover, .pvm-topic:focus-visible { border-color: var(--pvs-accent); background: var(--pvs-accent-tint); color: var(--pvs-ink); }

.pvm-signin {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border-radius: 14px;
    background: var(--pvs-accent-tint);
    border: 1px solid var(--pvs-accent);
}

.pvm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 20px;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.pvm-btn--primary { background: var(--pvs-accent); color: #08210a; }
.pvm-btn--ghost { background: transparent; color: var(--pvs-ink); border-color: var(--pvs-line-strong); }
.pvm-btn:focus-visible { outline: 2px solid var(--pvs-accent); outline-offset: 2px; }

/* --------------------------------------------------------- screen reader */

.pvm-sr {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 575.98px) {
    /* `bottom: var(--pvm-kb)` is the half of keyboard handling that is
       easy to miss. Shrinking only the panel's HEIGHT is not enough: the
       container is anchored to the viewport bottom, so a shorter panel
       just moves its own top down and the composer stays exactly where it
       was — behind the keyboard. Lifting the whole container by the
       keyboard height is what actually puts the composer above it. */
    .pvm { right: 0; bottom: var(--pvm-kb, 0px); left: 0; gap: 0; align-items: stretch; }

    @supports (padding: max(0px)) {
        .pvm { right: 0; bottom: var(--pvm-kb, 0px); }
    }

    /* The launcher keeps its own inset while closed; the sheet takes the
       full width once open. */
    /* The launcher pins itself to the true viewport bottom regardless of
       the container's keyboard lift — it is only visible while the panel
       is closed, when no keyboard is open. */
    .pvm-launcher {
        position: fixed;
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
    }

    .pvm.is-open .pvm-launcher { display: none; }

    /* Near-full-screen sheet, not a narrow floating box.
       100dvh (dynamic viewport height) is what makes this correct on
       mobile Safari: 100vh there is the height with the URL bar HIDDEN,
       so a 100vh sheet is taller than the visible viewport and the
       composer sits below the fold. dvh tracks the actually-visible
       area. The vh line before it is the fallback for browsers without
       dvh support. */
    .pvm-panel {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 18px 18px 0 0;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
    }

    /* Keyboard safety. The JS sets --pvm-kb from visualViewport when the
       on-screen keyboard opens; the sheet shrinks by exactly that much so
       the composer stays above the keyboard instead of behind it. Without
       this, mobile Safari leaves the fixed sheet at full height and the
       input is simply covered — the classic web-chat failure. */
    .pvm-panel { height: calc(100dvh - var(--pvm-kb, 0px)); }

    .pvm-foot { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
    .pvm-head { padding-top: max(16px, env(safe-area-inset-top)); }
    .pvm-msg { max-width: 92%; }
}