/*
 * Customer assistant widget — the "Yard Assistant" launcher + panel.
 *
 * Namespaced `.cai-*` and self-contained on purpose: this ships on /inventory/ and
 * /find-my-car/, neither of which loads customer-account.css, so none of the `.ca-*`
 * primitives are available here. Everything below is built from --pub-py-* tokens
 * (public-precision-yard-tokens.css) so the widget reads as portal furniture rather
 * than a bolted-on chatbot.
 *
 * Mobile-first: base rules target < 768px (bottom sheet); the min-width layer turns it
 * into a bottom-right popover. 768px is the single canonical breakpoint across this
 * codebase, in both CSS and useScreenSize().
 *
 * z-index: launcher 3900, overlay/panel 4000 — above the sticky nav (1000) and the
 * inventory filter drawer (200/201), below PublicAuthPromptModal (9000), the
 * sell-your-car modal (9999), and MediaGalleryModal (10000). Those are all more modal
 * than a utility popover, so the launcher hides behind them with no coordination code.
 */

/* ── Launcher ─────────────────────────────────────────────────────────── */

.cai-fab {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 3900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 18px;
    border: none;
    border-radius: 28px;
    background: var(--pub-py-masthead-bg, #1a1a2e);
    color: #fff;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(26, 26, 46, 0.28);
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

/* On phones the label is dropped — a 56px circle is the whole target. */
.cai-fab-label {
    display: none;
}

.cai-fab svg {
    width: 24px;
    height: 24px;
}

.cai-fab:hover {
    background: #24243f;
    box-shadow: 0 8px 26px rgba(26, 26, 46, 0.34);
}

.cai-fab:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3aaac8);
    outline-offset: 3px;
}

/* ── Overlay ──────────────────────────────────────────────────────────── */

/*
 * Mobile: a real dim backdrop behind a modal sheet.
 * Desktop: a transparent full-viewport click-catcher only — the popover is not modal,
 * so dimming the page would overstate it.
 */
.cai-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--pub-py-drawer-backdrop, rgba(26, 26, 46, 0.5));
    font-family: var(--pub-py-font-body, 'DM Sans', sans-serif);
}

/* ── Panel ────────────────────────────────────────────────────────────── */

.cai-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88vh;
    background: var(--pub-py-card, #fff);
    border-radius: 18px 18px 0 0;
    box-shadow: var(--pub-py-shadow-hover, 0 20px 48px rgba(26, 26, 46, 0.28));
    overflow: hidden;
    transition: width 0.22s ease, height 0.22s ease, max-height 0.22s ease;
}

/* The chat variants' sizing lives with the rest of the conversation block below — mobile
   full-bleed first, then the desktop layer. Declaring max-height here as well only created
   two rules that could never both apply. */

.cai-head {
    position: relative;
    flex: 0 0 auto;
    padding: 18px 52px 16px 20px;
    background: var(--pub-py-masthead-bg, #1a1a2e);
    background-image: var(--pub-py-masthead-diagonal-texture);
    border-top: 3px solid var(--pub-py-amber, #67cae1);
}

.cai-head--chat {
    padding-right: 96px;
}

.cai-head-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cai-head-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(103, 202, 225, 0.18);
    color: var(--pub-py-amber, #67cae1);
}

.cai-head-avatar svg {
    width: 20px;
    height: 20px;
}

.cai-head-actions {
    position: absolute;
    top: 10px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.cai-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.cai-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cai-icon-btn:focus-visible {
    outline: 2px solid var(--pub-py-amber, #67cae1);
    outline-offset: -2px;
}

.cai-icon-btn svg {
    width: 18px;
    height: 18px;
}

.cai-title {
    margin: 0;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--pub-py-masthead-headline-on-dark, #fff);
}

.cai-sub {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--pub-py-masthead-stat-label-muted, rgba(255, 255, 255, 0.72));
}

.cai-close {
    position: static;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.cai-head:not(.cai-head--chat) .cai-close {
    position: absolute;
    top: 12px;
    right: 10px;
}

.cai-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.cai-close:focus-visible {
    outline: 2px solid var(--pub-py-amber, #67cae1);
    outline-offset: -2px;
}

.cai-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}

.cai-body--chat {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

.cai-chat-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
}

.cai-foot {
    flex: 0 0 auto;
    padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--pub-py-border, #e2e8f0);
    background: var(--pub-py-page-bg, #f8fafc);
    font-size: 12px;
    line-height: 1.45;
    color: var(--pub-py-secondary, #64748b);
}

/* ── Menu ─────────────────────────────────────────────────────────────── */

.cai-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cai-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 68px;
    padding: 12px 14px;
    text-align: left;
    font: inherit;
    background: var(--pub-py-card, #fff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: var(--pub-py-shadow-card, 0 1px 2px rgba(26, 26, 46, 0.05));
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.cai-menu-item:hover {
    border-color: var(--pub-py-amber, #67cae1);
    box-shadow: var(--pub-py-shadow-hover, 0 8px 32px rgba(26, 26, 46, 0.11));
    transform: translateY(-2px);
}

.cai-menu-item:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3aaac8);
    outline-offset: 2px;
}

.cai-menu-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(103, 202, 225, 0.12);
    color: var(--pub-py-amber-600, #42b4d6);
}

.cai-menu-icon svg {
    width: 22px;
    height: 22px;
}

.cai-menu-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--pub-py-headline, #1a1a2e);
}

.cai-menu-desc {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pub-py-secondary, #64748b);
}

/* ── Back link ────────────────────────────────────────────────────────── */

.cai-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: 4px;
    padding: 0 8px 0 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--pub-py-secondary, #64748b);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.cai-back:hover {
    color: var(--pub-py-headline, #1a1a2e);
}

.cai-back:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3aaac8);
    outline-offset: 2px;
    border-radius: 6px;
}

.cai-back svg {
    width: 16px;
    height: 16px;
}

/* ── Forms ────────────────────────────────────────────────────────────── */

.cai-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cai-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cai-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--pub-py-headline, #1a1a2e);
}

.cai-input {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
    color: var(--pub-py-headline, #1a1a2e);
    background: var(--pub-py-card, #fff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 10px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.cai-input:focus {
    outline: none;
    border-color: var(--pub-py-amber, #67cae1);
    box-shadow: 0 0 0 3px var(--pub-py-amber-focus, rgba(103, 202, 225, 0.25));
}

.cai-input--error {
    border-color: var(--pub-py-error-icon, #e53e3e);
}

.cai-hint {
    font-size: 12px;
    line-height: 1.45;
    color: var(--pub-py-secondary, #64748b);
}

.cai-field-error {
    font-size: 12px;
    font-weight: 600;
    color: var(--pub-py-error-title, #c53030);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.cai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 12px 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color 0.18s ease, border-color 0.18s ease;
}

.cai-btn:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3aaac8);
    outline-offset: 2px;
}

.cai-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cai-btn-primary {
    background: #0e7490;
    color: #fff;
    box-shadow: 0 2px 8px rgba(14, 116, 144, 0.24);
}

.cai-btn-primary:hover:not(:disabled) {
    background: #0b5f76;
}

.cai-btn-secondary {
    background: var(--pub-py-card, #fff);
    color: var(--pub-py-headline, #1a1a2e);
    border-color: var(--pub-py-border, #e2e8f0);
}

.cai-btn-secondary:hover {
    border-color: var(--pub-py-masthead-bg, #1a1a2e);
}

.cai-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

/* ── The hang tag (signature element) ─────────────────────────────────── */

/*
 * The VIN tail is the one datum that has to survive the trip from screen to windshield,
 * so it is rendered as the physical thing it maps to: a punched yard tag, pointed at the
 * eyelet end. Used in exactly two places — result rows and the detail card header.
 * Nowhere else.
 *
 * Only the last 8 characters render (`VIN ···0A004352`, matching the public listing
 * cards). A full 17-character VIN would outgrow the tag on a phone; `white-space: nowrap`
 * plus `flex: 0 0 auto` on the row keeps even the long form on one line rather than
 * letting it wrap inside the clip-path and break the tag silhouette.
 */
.cai-tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 5px 9px 5px 20px;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    color: var(--pub-py-masthead-bg, #1a1a2e);
    background: var(--pub-py-amber-bg, rgba(103, 202, 225, 0.08));
    border-radius: 0 6px 6px 0;
    /* the punched, pointed end */
    clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
}

.cai-tag::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border: 1.5px solid var(--pub-py-amber-600, #42b4d6);
    border-radius: 50%;
}

/* ── Results ──────────────────────────────────────────────────────────── */

.cai-count {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pub-py-secondary, #64748b);
}

.cai-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cai-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--pub-py-card, #fff);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.cai-row:hover {
    border-color: var(--pub-py-amber, #67cae1);
    background: var(--pub-py-amber-bg, rgba(103, 202, 225, 0.08));
}

.cai-row:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3aaac8);
    outline-offset: 2px;
}

.cai-row-main {
    min-width: 0;
    flex: 1 1 auto;
}

.cai-row-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--pub-py-headline, #1a1a2e);
}

.cai-row-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--pub-py-secondary, #64748b);
}

/* ── Detail card ──────────────────────────────────────────────────────── */

.cai-detail-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--pub-py-border, #e2e8f0);
}

.cai-detail-title {
    margin: 0;
    font-family: var(--pub-py-font-display, 'Barlow Condensed', sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--pub-py-headline, #1a1a2e);
}

.cai-spec {
    margin: 14px 0 0;
    display: grid;
    grid-template-columns: minmax(88px, auto) 1fr;
    gap: 8px 16px;
}

.cai-spec dt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--pub-py-secondary, #64748b);
    align-self: center;
}

.cai-spec dd {
    margin: 0;
    font-size: 15px;
    color: var(--pub-py-headline, #1a1a2e);
    align-self: center;
}

/* ── Empty / error / loading ──────────────────────────────────────────── */

.cai-note {
    padding: 18px 4px 6px;
    text-align: center;
}

.cai-note-title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pub-py-headline, #1a1a2e);
}

.cai-note-body {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--pub-py-secondary, #64748b);
}

.cai-note--error .cai-note-title {
    color: var(--pub-py-error-title, #c53030);
}

.cai-skel {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cai-skel-row {
    height: 56px;
    border-radius: 12px;
    background: linear-gradient(
        90deg,
        var(--pub-py-skeleton-base, #e2e8f0) 25%,
        var(--pub-py-skeleton-mid, #f1f5f9) 37%,
        var(--pub-py-skeleton-base, #e2e8f0) 63%
    );
    background-size: 400% 100%;
    animation: caiShimmer 1.4s ease infinite;
}

.cai-overlay--max {
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--pub-py-drawer-backdrop, rgba(26, 26, 46, 0.5));
}

/* Mobile: chat sheet fills the viewport so the composer clears the keyboard. */
.cai-panel--chat,
.cai-panel--max {
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
}

@media (min-width: 768px) {
    .cai-panel--chat,
    .cai-panel--max {
        height: auto;
        border-radius: var(--pub-py-radius, 14px);
    }
}

/* ── Conversation ─────────────────────────────────────────────────────── */

/*
 * Added only when window.__CUSTOMER_AI_CHAT_ENABLED__ is on (see CustomerAssistantPanel.js).
 * The log scrolls internally with a bounded height so the composer stays reachable without
 * fighting .cai-body's own overflow; the desktop layer trims the height to the shorter panel.
 */
.cai-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 12px;
}

.cai-chat-log {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 2px;
}

.cai-bubble-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    animation: caiBubbleIn 0.2s ease;
}

.cai-bubble-wrap--user {
    align-self: flex-end;
    align-items: flex-end;
}

.cai-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 80%;
}

.cai-bubble-row--user {
    flex-direction: row-reverse;
}

.cai-bubble-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.cai-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(103, 202, 225, 0.14);
    color: var(--pub-py-amber-600, #42b4d6);
}

.cai-avatar svg {
    width: 14px;
    height: 14px;
}

.cai-bubble {
    margin: 0;
    padding: 10px 14px;
    font-size: 15px;
    line-height: 1.5;
    /* Model prose is plain text; honor its line breaks without an HTML sink. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border-radius: 18px;
    max-width: 100%;
}

.cai-bubble--assistant {
    background: var(--pub-py-page-bg, #f1f5f9);
    color: var(--pub-py-headline, #1a1a2e);
    border-bottom-left-radius: 4px;
}

.cai-bubble--user {
    background: #0e7490;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.cai-bubble--error {
    background: var(--pub-py-error-bg, #fef2f2);
    color: var(--pub-py-error-title, #c53030);
    border: 1px solid var(--pub-py-error-border, #fecaca);
}

.cai-grounded-note {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--pub-py-secondary, #64748b);
}

/* Suggested prompts — clickable chips before the first user turn. */
.cai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 2px 36px;
}

.cai-chip {
    min-height: 36px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pub-py-headline, #1a1a2e);
    background: var(--pub-py-card, #fff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 999px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

.cai-chip:hover:not(:disabled) {
    border-color: var(--pub-py-amber, #67cae1);
    background: var(--pub-py-amber-bg, rgba(103, 202, 225, 0.08));
}

.cai-chip:focus-visible {
    outline: 2px solid var(--pub-py-focus-ring, #3aaac8);
    outline-offset: 2px;
}

.cai-chip:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Vehicle links under an assistant answer — full width beneath the bubble. */
.cai-bubble-rows {
    margin-top: 8px;
    width: 100%;
}

.cai-bubble-rows .cai-row {
    min-height: 52px;
}

/* Typing indicator — three pulsing dots, announced to assistive tech via .cai-sr-only. */
.cai-chat-typing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 4px 0;
}

.cai-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 12px 14px;
    background: var(--pub-py-page-bg, #f1f5f9);
    border-radius: 18px;
    border-bottom-left-radius: 4px;
}

.cai-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pub-py-secondary, #64748b);
    animation: caiTyping 1.2s ease infinite;
}

.cai-dot:nth-child(2) { animation-delay: 0.18s; }
.cai-dot:nth-child(3) { animation-delay: 0.36s; }

.cai-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 4px;
    border-top: 1px solid var(--pub-py-border, #e2e8f0);
}

/* Occupies the composer's slot when there is no composer to show — a signed-out visitor, or a
   chat that turned out to be switched off. Same border so the transcript still ends on a rule. */
.cai-signin {
    flex: 0 0 auto;
    padding-top: 10px;
    border-top: 1px solid var(--pub-py-border, #e2e8f0);
}

/* .cai-btn is full-width by design in the picker's action rows; inside a bubble it must size
   to its label and sit under the text rather than stretching the column. */
.cai-bubble-action {
    align-self: flex-start;
    width: auto;
    margin-top: 6px;
}

.cai-composer {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cai-chat-input {
    flex: 1 1 auto;
    width: 100%;
    min-height: 46px;
    max-height: 120px;
    padding: 12px 14px;
    font: inherit;
    font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
    line-height: 1.4;
    color: var(--pub-py-headline, #1a1a2e);
    background: var(--pub-py-card, #fff);
    border: 1px solid var(--pub-py-border, #e2e8f0);
    border-radius: 12px;
    box-sizing: border-box;
    resize: none;
    -webkit-appearance: none;
    appearance: none;
}

.cai-chat-input:focus {
    outline: none;
    border-color: var(--pub-py-amber, #67cae1);
    box-shadow: 0 0 0 3px var(--pub-py-amber-focus, rgba(103, 202, 225, 0.25));
}

/* Icon send button — square target, not full-width like the picker's .cai-btn. */
.cai-chat-send {
    flex: 0 0 auto;
    width: 46px;
    min-width: 46px;
    height: 46px;
    padding: 0;
}

.cai-chat-send svg {
    width: 18px;
    height: 18px;
}

.cai-char-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--pub-py-secondary, #64748b);
    text-align: right;
    padding-right: 4px;
}

/* Visually hidden, still read by screen readers (labels + live-region announcements). */
.cai-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Motion ───────────────────────────────────────────────────────────── */

@keyframes caiShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@keyframes caiOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes caiSheetIn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes caiPopoverIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes caiBubbleIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes caiTyping {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.cai-overlay { animation: caiOverlayIn 0.18s ease; }
.cai-panel { animation: caiSheetIn 0.26s cubic-bezier(0.16, 1, 0.3, 1); }

@media (prefers-reduced-motion: reduce) {
    .cai-overlay,
    .cai-panel,
    .cai-skel-row,
    .cai-dot,
    .cai-bubble-wrap {
        animation: none !important;
    }
    .cai-panel {
        transition: none;
    }
    .cai-menu-item:hover,
    .cai-fab:hover {
        transform: none;
    }
}

/* ── Desktop layer: the sheet becomes a bottom-right popover ──────────── */

@media (min-width: 768px) {
    .cai-fab {
        right: 24px;
        bottom: 24px;
        min-height: 48px;
    }

    .cai-fab-label {
        display: inline;
    }

    /* Transparent click-catcher: the popover is deliberately non-modal. */
    .cai-overlay {
        background: transparent;
        align-items: flex-end;
        justify-content: flex-end;
        padding: 0 24px 88px;
    }

    .cai-panel {
        width: 400px;
        max-height: 560px;
        border: 1px solid var(--pub-py-border, #e2e8f0);
        border-radius: var(--pub-py-radius, 14px);
        animation: caiPopoverIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .cai-panel--chat {
        width: 460px;
        max-height: min(80vh, 720px);
    }

    .cai-panel--max {
        width: min(920px, 94vw);
        height: min(88vh, 860px);
        max-height: 88vh;
    }

    .cai-overlay--max {
        padding: 24px;
    }

    .cai-body,
    .cai-foot {
        padding-bottom: 16px;
    }

    .cai-body--chat {
        padding-bottom: 12px;
    }

    .cai-detail-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
}