/* ===================================================================
 * chat-dock.css — persistent floating "customer-service-bot" chat.
 *
 * Loaded by the rail-based editor shells (Studio first). Replaces the
 * wasted right-rail chat column: #chat-panel is relocated once at init
 * (chat-dock.js) into a fixed-position dock. A launcher is always
 * reachable without scrolling; tapping it raises an overlay card that
 * hosts the live #chat-panel — proposals + accept controls land inside
 * it, so the author never scrolls the page to act on them (the mobile
 * pain point this solves).
 *
 * Aesthetic: native to Studio — warm parchment surface, Fraunces title,
 * IBM Plex Mono launcher label (matches the masthead shell-nav pill).
 * =================================================================== */

.sb-chatdock {
    position: fixed;
    inset: 0;
    /* Below the ChatOverlay scrim (z-65): the launcher opens that centered
     * modal, and sitting under its scrim hides the launcher while the modal
     * is up — no JS coordination needed. Still well above editor content. */
    z-index: 60;
    pointer-events: none; /* only the launcher + panel are interactive */
}
.sb-chatdock__launcher,
.sb-chatdock__panel,
.sb-chatdock__scrim { pointer-events: auto; }

/* --- Launcher: always-visible pill, bottom-right ------------------- */
.sb-chatdock__launcher {
    position: fixed;
    right: clamp(12px, 2vw, 24px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 22px));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 0.98rem;
    border-radius: var(--sb-radius-pill, 999px);
    border: 1px solid rgba(60, 40, 20, 0.18);
    background: rgba(60, 40, 20, 0.92);
    color: #f7efe2;
    font-family: var(--sb-font-mono, 'IBM Plex Mono', ui-monospace, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.sb-chatdock__launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}
.sb-chatdock__launcher:focus-visible {
    outline: 2px solid var(--sb-accent, #c87a3c);
    outline-offset: 3px;
}
.sb-chatdock__launcher-icon { font-size: 0.98rem; line-height: 1; }
body[data-theme="dark"] .sb-chatdock__launcher {
    background: rgba(240, 220, 196, 0.92);
    color: #1c1813;
    border-color: rgba(255, 255, 255, 0.16);
}

/* Pending-proposal cue: a dot + a soft pulse so the author KNOWS there's
 * something to accept without opening — the whole point on mobile. */
.sb-chatdock__badge {
    position: absolute;
    top: -3px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e0683c;
    border: 1.5px solid var(--sb-paper, #fbf6ec);
}
.sb-chatdock__launcher { position: fixed; } /* anchor for the badge */
.sb-chatdock[data-pending="true"] .sb-chatdock__launcher {
    animation: sb-dock-pulse 1.9s ease-in-out infinite;
}
@keyframes sb-dock-pulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); }
    50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 0 7px rgba(224, 104, 60, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
    .sb-chatdock[data-pending="true"] .sb-chatdock__launcher { animation: none; }
    .sb-chatdock[data-pending="true"] .sb-chatdock__badge { box-shadow: 0 0 0 3px rgba(224, 104, 60, 0.22); }
}

/* When open, the launcher steps aside (the panel is the surface). */
.sb-chatdock[data-state="open"] .sb-chatdock__launcher { display: none; }

/* --- Panel: desktop = bottom-right floating card ------------------- */
/* [hidden] must win over the explicit display below (an explicit display
 * value otherwise defeats the hidden attribute's display:none). */
.sb-chatdock__panel[hidden],
.sb-chatdock__scrim[hidden] { display: none; }
.sb-chatdock__scrim { display: none; }
.sb-chatdock__panel {
    position: fixed;
    right: clamp(12px, 2vw, 24px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(12px, 2vw, 22px));
    width: min(420px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 132px));
    display: flex;
    flex-direction: column;
    background: var(--sb-paper, #fbf6ec);
    color: var(--sb-ink, #161616);
    border: 1px solid rgba(60, 40, 20, 0.18);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
    overflow: hidden;
    animation: sb-dock-rise 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-theme="dark"] .sb-chatdock__panel {
    background: var(--sb-paper, #1c1813);
    border-color: rgba(255, 255, 255, 0.14);
}
@keyframes sb-dock-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .sb-chatdock__panel { animation: none; }
}

.sb-chatdock__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0.5rem 0.95rem;
    border-bottom: 1px solid var(--sb-rule, rgba(22, 22, 22, 0.12));
}
.sb-chatdock__title {
    font-family: var(--sb-font-display, 'Fraunces', Georgia, serif);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.1;
}
.sb-chatdock__min {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--sb-ink-muted, #6b6863);
    font-size: 1rem;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}
.sb-chatdock__min:hover { background: rgba(60, 40, 20, 0.08); color: var(--sb-ink, #161616); }
.sb-chatdock__min:focus-visible { outline: 2px solid var(--sb-accent, #c87a3c); outline-offset: 2px; }

/* The relocated #chat-panel fills the card body and owns its own scroll. */
.sb-chatdock__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sb-chatdock__body > #chat-panel {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Neutralize the old rail card chrome — the dock card IS the chrome now. */
    border: 0;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}
/* Inside the dock the transcript scrolls; the composer stays pinned. The
 * old clip (320px rail + 3.1rem role label + overflow:hidden) is gone —
 * the card is wider and the bubble keeps its min-width:0 wrap. */
.sb-chatdock__body .chat-history,
.sb-chatdock__body .chat-transcript {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- Mobile: full-width bottom sheet + scrim ---------------------- */
@media (max-width: 720px) {
    .sb-chatdock__scrim {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 8, 6, 0.42);
        z-index: 79;
        animation: sb-dock-fade 160ms ease;
    }
    @keyframes sb-dock-fade { from { opacity: 0; } to { opacity: 1; } }
    .sb-chatdock__panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: min(86vh, calc(100vh - 44px));
        border-radius: 18px 18px 0 0;
    }
    .sb-chatdock__launcher {
        right: 50%;
        transform: translateX(50%);
    }
    .sb-chatdock__launcher:hover { transform: translateX(50%) translateY(-2px); }
}

/* --- Reclaim the Studio grid: drop the empty chat column + handle -- */
body[data-shell="studio"][data-chat-dock="true"] .studio-pane-chat,
body[data-shell="studio"][data-chat-dock="true"] .sb-resize-handle--right {
    display: none;
}
/* Desktop only (≥980px): reclaim the 2-track rail|handle|center grid. Below
 * 980 the studio stacks to a single column (editor.css @media max-width:979),
 * so this unconditional 3-track reclaim must NOT apply there — it was forcing
 * a 420px rail track on phones and clipping content under overflow-x:hidden. */
@media (min-width: 980px) {
    body[data-shell="studio"][data-chat-dock="true"] .studio-main {
        grid-template-columns:
            var(--sb-rail-left-w) var(--sb-handle-w)
            minmax(0, 1fr);
        /* The base .studio-main reserved a right gutter for the OLD floating
         * chat (padding-right: calc(chat-w + …)). The dock replaces that whole
         * system, so the gutter is now just a blank strip — zero it and let the
         * center pane run to the edge. Also neutralizes the data-chat-collapsed
         * padding variant. */
        padding-right: 0;
    }
}
/* The old floating chat's fixed right resize handle has nothing to resize
 * now (chat lives in the dock) — hide it so it can't sit as a dead strip. */
body[data-shell="studio"][data-chat-dock="true"] .sb-resize-handle--right {
    display: none;
}