:root {
    color-scheme: dark;
    --chat-bg: #070b14;
    --chat-bg-elevated: rgba(12, 17, 30, 0.92);
    --chat-bg-card: rgba(16, 21, 36, 0.92);
    --chat-bg-soft: rgba(255, 255, 255, 0.028);
    --chat-bg-soft-strong: rgba(255, 255, 255, 0.05);
    --chat-text: rgba(238, 243, 232, 0.95);
    --chat-text-soft: rgba(201, 214, 196, 0.72);
    --chat-text-dim: rgba(142, 160, 154, 0.58);
    --chat-border: rgba(145, 180, 209, 0.13);
    --chat-border-strong: rgba(95, 227, 255, 0.26);
    --chat-glow: rgba(95, 227, 255, 0.18);
    --chat-green: rgba(89, 240, 167, 0.94);
    --chat-green-soft: rgba(89, 240, 167, 0.08);
    --chat-green-border: rgba(89, 240, 167, 0.2);
    --chat-magenta: rgba(244, 114, 182, 0.82);
    --chat-gold: rgba(255, 190, 99, 0.92);
    --chat-danger: rgba(255, 122, 146, 0.94);
    --chat-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
    --chat-shell-width: min(1320px, calc(100vw - 24px));
    --chat-topbar-h: 44px;
    --chat-sidebar-w: min(340px, calc(100vw - 24px));
    --chat-panel-w: min(380px, calc(100vw - 28px));
    --chat-panel-bg: rgba(12, 17, 30, 0.96);
    --chat-panel-border: rgba(95, 227, 255, 0.22);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(95, 227, 255, 0.08), transparent 22%),
        radial-gradient(circle at top right, rgba(244, 114, 182, 0.06), transparent 18%),
        radial-gradient(circle at bottom right, rgba(89, 240, 167, 0.06), transparent 22%),
        linear-gradient(180deg, #090d18 0%, #05070f 100%);
    color: var(--chat-text);
    font-family: var(--font-shell);
    overflow: hidden;
}

body.is-overlay-open {
    overflow: hidden;
}

a {
    color: inherit;
}

button,
textarea,
select,
input {
    font: inherit;
}

button {
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

svg {
    display: block;
}

svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hidden {
    display: none !important;
}

.slim-app {
    /* `dvh` accounts for dynamic browser chrome (mobile address bar,
       desktop zoom rounding); fall back to `vh` for older browsers.
       Lock height + overflow so the composer can't ride off-screen. */
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
}

.chat-shell {
    height: calc(100vh - max(28px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    height: calc(100dvh - max(28px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    max-width: var(--chat-shell-width);
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
}

.sidebar {
    position: fixed;
    z-index: 30;
    top: max(14px, env(safe-area-inset-top));
    bottom: max(14px, env(safe-area-inset-bottom));
    left: 14px;
    width: var(--chat-sidebar-w);
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 14px;
    padding: 16px;
    border-radius: 28px;
    border: 1px solid var(--chat-border);
    background:
        linear-gradient(180deg, rgba(15, 20, 35, 0.98), rgba(7, 10, 18, 0.98));
    box-shadow: var(--chat-shadow);
    backdrop-filter: blur(20px);
    transform: translateX(calc(-100% - 24px));
    opacity: 0;
    pointer-events: none;
    transition: transform 180ms ease, opacity 180ms ease;
}

.sidebar.is-open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgba(3, 5, 11, 0.55);
    backdrop-filter: blur(8px);
}

.panel-scrim {
    position: fixed;
    inset: 0;
    z-index: 21;
    background: rgba(3, 5, 11, 0.48);
    backdrop-filter: blur(8px);
}

.sidebar-header,
.sidebar-search,
.session-group,
.floating-menu,
.ambient-popover,
.banner,
.auth-card {
    border: 1px solid var(--chat-border);
    background: var(--chat-bg-elevated);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    border-radius: 20px;
}

.sidebar-new,
.sidebar-close,
.sidebar-vault-button,
.topbar-button,
.composer-icon,
.composer-send,
.ambient-badge,
.draft-option,
.panel-tab,
.chat-panel-action,
.chat-panel-close,
.trace-filter-chip,
.gallery-action,
.menu-actions button,
.menu-actions a,
.banner-actions button {
    border: 1px solid var(--chat-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--chat-text);
}

.sidebar-new {
    flex: 1;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: 0.93rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(89, 240, 167, 0.12), rgba(95, 227, 255, 0.06));
}

.sidebar-close {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.15rem;
}

.sidebar-search {
    padding: 12px 14px;
    border-radius: 18px;
    display: grid;
    gap: 8px;
}

.sidebar-vault {
    padding: 12px;
    border-radius: 20px;
    border: 1px solid var(--chat-border);
    background: var(--chat-bg-elevated);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
    display: grid;
    gap: 10px;
}

.sidebar-vault-button {
    min-height: 40px;
    border-radius: 14px;
    padding: 0 14px;
    text-align: left;
    color: var(--chat-text-soft);
}

.sidebar-search span,
.menu-label,
.model-trigger-eyebrow,
.welcome-eyebrow,
.menu-eyebrow,
.session-group-title {
    color: var(--chat-text-dim);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sidebar-search input,
.menu-field select,
.auth-card input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035);
    color: var(--chat-text);
    padding: 11px 13px;
    outline: none;
}

.sidebar-search input:focus,
.menu-field select:focus,
.auth-card input:focus,
.composer-shell:focus-within {
    border-color: var(--chat-border-strong);
    box-shadow: 0 0 0 1px rgba(95, 227, 255, 0.16);
}

/* Drag-over feedback for image/file drop. The .is-dragover class lands
   on the composer form (#composer / .composer-wrap) while the user is
   dragging a file over it. JS adds/removes it on dragenter/dragleave/drop. */
#composer.is-dragover .composer-shell {
    border-color: rgba(95, 227, 255, 0.65);
    box-shadow: 0 0 0 2px rgba(95, 227, 255, 0.28);
    background: rgba(95, 227, 255, 0.06);
}
#composer.is-dragover {
    position: relative;
}
#composer.is-dragover::after {
    content: "Drop image to attach";
    position: absolute;
    inset: auto 0 100% 0;
    margin-bottom: 6px;
    text-align: center;
    font-size: 12px;
    color: rgba(95, 227, 255, 0.95);
    pointer-events: none;
}

.session-groups {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    gap: 14px;
    padding-right: 4px;
}

.session-groups::-webkit-scrollbar,
.messages::-webkit-scrollbar {
    width: 10px;
}

.session-groups::-webkit-scrollbar-thumb,
.messages::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.session-group {
    padding: 12px;
    border-radius: 20px;
}

.session-group-list {
    display: grid;
    gap: 8px;
}

.session-card {
    width: 100%;
    border: 1px solid transparent;
    background: rgba(255, 255, 255, 0.02);
    color: var(--chat-text);
    border-radius: 16px;
    padding: 12px 13px;
    display: grid;
    gap: 6px;
    text-align: left;
}

.session-card:hover,
.session-card.is-active {
    border-color: var(--chat-border-strong);
    background: rgba(89, 240, 167, 0.06);
}

.session-card-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.session-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--chat-text-dim);
    font-size: 0.74rem;
}

.panel-empty {
    padding: 12px;
    color: var(--chat-text-dim);
    font-size: 0.88rem;
    line-height: 1.45;
}

.topbar {
    height: var(--chat-topbar-h);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.topbar-center,
.topbar-actions {
    position: relative;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-button {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.topbar-button:hover,
.composer-icon:hover,
.composer-send:hover,
.ambient-badge:hover,
.draft-option:hover,
.panel-tab:hover,
.chat-panel-action:hover,
.chat-panel-close:hover,
.trace-filter-chip:hover,
.gallery-action:hover,
.menu-actions button:hover,
.menu-actions a:hover,
.banner-actions button:hover,
.sidebar-vault-button:hover,
.sidebar-new:hover,
.sidebar-close:hover,
.session-card:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: var(--chat-border-strong);
    transform: translateY(-1px);
}

.topbar-button svg,
.composer-icon svg {
    width: 18px;
    height: 18px;
}

.model-trigger {
    width: 100%;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--chat-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--chat-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.model-trigger-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    text-align: left;
}

.model-trigger-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--chat-green);
    font-size: 0.92rem;
    font-weight: 600;
}

.model-trigger-caret {
    color: var(--chat-text-dim);
    font-size: 0.82rem;
}

.floating-menu,
.ambient-popover {
    position: absolute;
    z-index: 15;
    border-radius: 22px;
    padding: 14px;
    backdrop-filter: blur(18px);
}

.model-menu {
    top: calc(100% + 10px);
    left: 0;
    width: min(430px, calc(100vw - 40px));
}

.menu-sheet {
    top: calc(100% + 10px);
    right: 0;
    width: min(340px, calc(100vw - 36px));
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.model-menu {
    /* Same scroll discipline — the model list can get long once more
       providers come online (Phase 1D operator feedback). */
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Hide the bulky "CURRENT MODEL" trigger in the topbar; the model picker
   now lives inside the chat-settings menu (cleaner header, more chat width).
   Topbar gets a small inline status chip instead so the active model is
   still glanceable without opening the menu.

   We hide ONLY the trigger button, not the whole .topbar-center — the
   floating .model-menu popup is a child of .topbar-center and needs its
   container to remain laid out so absolute-positioning resolves correctly.
   Width is collapsed to zero so the chip can claim the middle column. */
.topbar-center {
    width: 0;
    min-width: 0;
    position: relative;       /* anchor the floating popup */
}
.model-trigger {
    display: none;
}
.topbar {
    grid-template-columns: auto auto 1fr auto !important;
}
/* When the model picker opens from the menu, re-anchor it to the right
   edge of the topbar so it doesn't render in a collapsed/zero-width slot. */
.model-menu {
    left: auto;
    right: 0;
    width: min(420px, calc(100vw - 40px));
}
.topbar-model-chip {
    /* DOM order places this between .topbar-center (collapsed) and
       .topbar-actions; justify-self pushes it to the right edge of the
       1fr middle column so it sits flush against the action buttons. */
    justify-self: end;
    align-self: center;
    font-size: 0.72rem;
    line-height: 1;
    color: var(--chat-text-soft);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 5px 10px;
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar-model-chip:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--chat-text);
}
@media (max-width: 700px) {
    .topbar-model-chip { max-width: 140px; font-size: 0.68rem; }
}

/* Current-model row inside the chat settings menu. */
.menu-section-model { padding-top: 0; margin-top: 0; border-top: none; }
.menu-model-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 12px;
    color: var(--chat-text);
    font: inherit;
    font-size: 0.86rem;
    cursor: pointer;
    text-align: left;
}
.menu-model-row:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.menu-model-value {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}
.menu-model-cta {
    flex: 0 0 auto;
    color: var(--chat-text-soft);
    font-size: 0.78rem;
}

.menu-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.menu-header h2 {
    margin: 2px 0 0;
    font-size: 1rem;
    font-weight: 600;
}

.menu-section {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.menu-actions-panels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.menu-field {
    display: grid;
    gap: 8px;
    color: var(--chat-text-soft);
    font-size: 0.86rem;
}

.menu-footnote,
.menu-status,
.banner-copy p,
.auth-copy,
.auth-error {
    margin: 0;
    color: var(--chat-text-soft);
    font-size: 0.82rem;
    line-height: 1.45;
}

.model-options {
    display: grid;
    gap: 8px;
}

.model-option {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 12px 13px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--chat-text);
    display: grid;
    gap: 4px;
    text-align: left;
}

.model-option:hover,
.model-option.is-selected {
    border-color: var(--chat-border-strong);
    background: rgba(95, 227, 255, 0.05);
}

.model-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.model-option-tier {
    color: var(--chat-green);
    font-size: 0.82rem;
    font-weight: 600;
}

.model-option-name {
    font-size: 0.9rem;
    font-weight: 600;
}

.model-option-desc {
    color: var(--chat-text-soft);
    font-size: 0.8rem;
    line-height: 1.4;
}

.draft-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.draft-option,
.menu-actions button,
.menu-actions a {
    min-height: 38px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    text-decoration: none;
}

.draft-option.is-active {
    border-color: var(--chat-green-border);
    background: var(--chat-green-soft);
    color: var(--chat-green);
}

.menu-actions {
    display: grid;
    gap: 8px;
}

.banner {
    padding: 12px 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.banner.is-error {
    border-color: rgba(255, 122, 146, 0.24);
    background: rgba(255, 122, 146, 0.08);
}

.banner-copy strong {
    display: block;
    margin-bottom: 4px;
}

.banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.banner-actions button {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
}

.chat-stage {
    min-height: 0;
    position: relative;
}

.conversation {
    position: relative;
    height: 100%;
    min-height: 0;
}

.messages {
    height: 100%;
    overflow-y: auto;
    padding: 6px 0 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    scroll-behavior: smooth;
}

.jump-latest {
    position: absolute;
    right: 0;
    bottom: 12px;
    z-index: 4;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--chat-text);
    border: 1px solid rgba(89, 240, 167, 0.24);
    background: rgba(9, 14, 23, 0.88);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(14px);
}

.jump-latest svg {
    width: 14px;
    height: 14px;
}

.jump-latest span {
    font-size: 0.82rem;
    font-weight: 600;
}

.welcome-state {
    max-width: 620px;
    margin: 10vh auto 0;
    padding: 0 20px;
    text-align: center;
}

.welcome-avatar {
    width: 60px;
    height: 60px;
    margin: 0 auto 20px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(89, 240, 167, 0.62), rgba(95, 227, 255, 0.56), rgba(244, 114, 182, 0.5));
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.welcome-state h1 {
    margin: 0;
    font-size: clamp(2rem, 3.8vw, 2.9rem);
    font-weight: 600;
    letter-spacing: -0.03em;
}

.welcome-copy {
    max-width: 620px;
    margin: 16px auto 0;
    color: var(--chat-text-soft);
    font-size: 1rem;
    line-height: 1.65;
}

.welcome-chips {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.welcome-chip {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--chat-border);
    background: rgba(255, 255, 255, 0.03);
    color: var(--chat-text-soft);
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease, transform 120ms ease;
}

.welcome-chip:hover {
    border-color: var(--chat-border-strong);
    background: rgba(95, 227, 255, 0.06);
    color: var(--chat-text);
    transform: translateY(-1px);
}

.message {
    width: 100%;
}

.message-user {
    display: flex;
    justify-content: flex-end;
}

.message-user .message-main {
    max-width: min(70%, 700px);
    display: grid;
    gap: 8px;
}

.message-assistant,
.message-system {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: flex-start;
}

.message-system {
    grid-template-columns: minmax(0, 1fr);
}

.message-avatar-slot {
    min-height: 36px;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(89, 240, 167, 0.58), rgba(95, 227, 255, 0.52), rgba(244, 114, 182, 0.42));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-main {
    min-width: 0;
}

.message-user .message-body {
    background: rgba(89, 240, 167, 0.06);
    border: 1px solid rgba(89, 240, 167, 0.16);
    border-radius: 24px;
    padding: 14px 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.message-assistant .message-body {
    padding: 2px 0;
}

.message-system .message-body {
    justify-self: center;
    max-width: min(720px, 100%);
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.035);
}

.message-content {
    min-width: 0;
    color: var(--chat-text);
    font-size: 1rem;
    line-height: 1.66;
    word-break: break-word;
}

.message-user .message-content {
    font-size: 0.98rem;
    line-height: 1.58;
}

.message-system .message-content {
    color: var(--chat-text-soft);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

.message-meta {
    color: var(--chat-text-dim);
    font-size: 0.75rem;
    line-height: 1.45;
}

.message-user .message-meta {
    text-align: right;
}

.message-content.is-streaming::after {
    content: "▍";
    margin-left: 2px;
    color: var(--chat-green);
    animation: chat-cursor-blink 1s step-end infinite;
}

@keyframes chat-cursor-blink {
    0%, 52% {
        opacity: 1;
    }
    53%, 100% {
        opacity: 0;
    }
}

.thinking-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 24px;
    color: var(--chat-text-soft);
    font-size: 0.92rem;
}

.thinking-dots {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(95, 227, 255, 0.8);
    animation: thinking-pulse 1s infinite ease-in-out;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 0.16s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes thinking-pulse {
    0%, 80%, 100% {
        transform: translateY(0);
        opacity: 0.35;
    }
    40% {
        transform: translateY(-2px);
        opacity: 1;
    }
}

.message-content p,
.message-content ul,
.message-content ol,
.message-content pre,
.message-content blockquote,
.message-content table,
.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    margin-top: 0;
    margin-bottom: 1em;
}

.message-content > :last-child {
    margin-bottom: 0;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.message-content h1 {
    font-size: 1.5rem;
}

.message-content h2 {
    font-size: 1.26rem;
}

.message-content h3 {
    font-size: 1.1rem;
}

.message-content ul,
.message-content ol {
    padding-left: 1.2rem;
}

.message-content li + li {
    margin-top: 0.34rem;
}

.message-content blockquote {
    padding-left: 14px;
    border-left: 2px solid rgba(95, 227, 255, 0.28);
    color: var(--chat-text-soft);
}

.message-content a {
    color: var(--chat-green);
    text-decoration: underline;
    text-decoration-color: rgba(89, 240, 167, 0.4);
    text-underline-offset: 0.18em;
}

.message-content code {
    font-family: var(--font-mono);
}

.message-content :not(pre) > code {
    padding: 0.15rem 0.42rem;
    border-radius: 8px;
    background: var(--chat-code-inline-bg);
    border: 1px solid var(--chat-code-inline-border);
    color: var(--chat-green);
    font-size: 0.92em;
}

.code-block {
    position: relative;
    margin: 1.2em 0;
    border-radius: 18px;
    border: 1px solid var(--chat-code-border);
    background: var(--chat-code-bg);
    overflow: hidden;
}

.code-block-head {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.03);
}

.code-block-lang {
    color: var(--chat-text-dim);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.code-copy {
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(95, 227, 255, 0.16);
    background: rgba(95, 227, 255, 0.04);
    color: var(--chat-text-soft);
    font-size: 0.74rem;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.code-block:hover .code-copy,
.code-block:focus-within .code-copy,
.code-copy:focus-visible {
    opacity: 1;
    transform: translateY(0);
    border-color: var(--chat-border-strong);
    background: rgba(95, 227, 255, 0.08);
}

@media (hover: none) {
    .code-copy {
        opacity: 1;
        transform: translateY(0);
    }
}

.code-block pre {
    margin: 0;
    padding: 14px 16px 16px;
    overflow-x: auto;
}

.code-block code {
    display: block;
    color: var(--chat-code-text);
    font-size: 0.9rem;
    line-height: 1.55;
    white-space: pre;
}

.token-keyword {
    color: var(--chat-code-keyword);
}

.token-string {
    color: var(--chat-code-string);
}

.token-number,
.token-boolean {
    color: var(--chat-code-number);
}

.token-comment {
    color: var(--chat-code-comment);
}

.token-function {
    color: var(--chat-code-function);
}

.token-operator,
.token-punctuation {
    color: var(--chat-code-punctuation);
}

.message-content table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.message-content th,
.message-content td {
    padding: 9px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    text-align: left;
}

.message-content th {
    color: var(--chat-text-soft);
    font-size: 0.84rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.03);
}

.message-content td {
    font-size: 0.92rem;
}

.attachment-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 10px 8px;
}

.attachment-chip {
    max-width: min(240px, 100%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.035);
    color: var(--chat-text-soft);
}

.attachment-chip img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 10px;
}

.attachment-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.82rem;
}

.attachment-chip button {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--chat-text-dim);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.message-attachments {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.message-attachment {
    max-width: 220px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    padding: 8px;
}

.message-attachment img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.message-attachment-name {
    margin-top: 6px;
    color: var(--chat-text-soft);
    font-size: 0.78rem;
}

.voice-audio-wrap {
    margin-top: 14px;
}

.voice-audio-inline {
    width: min(420px, 100%);
    display: block;
}

.composer-wrap {
    padding-bottom: env(safe-area-inset-bottom);
}

.composer-shell {
    min-height: 64px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 10px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.018)),
        rgba(12, 17, 28, 0.96);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
}

.composer-icon,
.composer-send {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.attach-button {
    font-size: 1.4rem;
    line-height: 1;
}

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

.voice-button.is-recording {
    border-color: rgba(255, 122, 146, 0.36);
    background: rgba(255, 122, 146, 0.12);
    box-shadow: 0 0 0 6px rgba(255, 122, 146, 0.08);
}

.voice-button.is-processing {
    border-color: rgba(95, 227, 255, 0.3);
    background: rgba(95, 227, 255, 0.08);
}

.voice-button.is-denied {
    color: var(--chat-gold);
    border-color: rgba(255, 190, 99, 0.28);
}

.composer-send {
    color: #08110d;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(89, 240, 167, 0.96), rgba(95, 227, 255, 0.8));
    border-color: transparent;
    box-shadow: 0 10px 24px rgba(89, 240, 167, 0.2);
}

.composer-send:disabled {
    color: rgba(8, 17, 13, 0.5);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: none;
}

#message-input {
    min-height: 22px;
    max-height: 190px;
    border: none;
    outline: none;
    resize: none;
    padding: 0;
    background: transparent;
    color: var(--chat-text);
    font-size: 1rem;
    line-height: 1.6;
}

#message-input::placeholder {
    color: var(--chat-text-dim);
}

.hidden-input {
    display: none;
}

.chat-panels {
    position: fixed;
    z-index: 26;
    top: calc(max(14px, env(safe-area-inset-top)) + var(--chat-topbar-h) + 10px);
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: var(--chat-panel-w);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(100% + 24px));
    transition: transform 200ms ease, opacity 200ms ease;
}

.chat-panels.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.chat-panel-tabs,
.chat-panel {
    border: 1px solid var(--chat-panel-border);
    background: var(--chat-panel-bg);
    box-shadow: var(--chat-shadow);
    backdrop-filter: blur(20px);
}

.chat-panel-tabs {
    padding: 8px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
}

.chat-panel-tabs::-webkit-scrollbar,
.image-gallery-grid::-webkit-scrollbar,
.tool-trace-list::-webkit-scrollbar {
    width: 10px;
    height: 8px;
}

.chat-panel-tabs::-webkit-scrollbar-thumb,
.image-gallery-grid::-webkit-scrollbar-thumb,
.tool-trace-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.panel-tab {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--chat-text-soft);
    white-space: nowrap;
}

.panel-tab.is-active {
    border-color: var(--chat-border-strong);
    background: rgba(89, 240, 167, 0.08);
    color: var(--chat-text);
}

.chat-panel-view {
    position: relative;
    min-height: 0;
}

.chat-panel {
    height: 100%;
    border-radius: 26px;
    padding: 16px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    gap: 12px;
}

.chat-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.chat-panel-header h2 {
    margin: 2px 0 0;
    font-size: 1.18rem;
}

.chat-panel-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-panel-action,
.chat-panel-close {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--chat-text-soft);
}

.chat-panel-close {
    min-width: 34px;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    padding: 0;
}

.chat-panel-note {
    margin: 0;
    color: var(--chat-text-soft);
    font-size: 0.84rem;
    line-height: 1.5;
}

.image-gallery-grid,
.tool-trace-list {
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
}

.image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.gallery-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 18px;
    padding: 10px;
    display: grid;
    gap: 10px;
}

.gallery-thumb {
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background:
        radial-gradient(circle at top right, rgba(244, 114, 182, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(20, 27, 42, 0.96), rgba(8, 12, 20, 0.96));
    display: grid;
    place-items: center;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.2rem;
    font-weight: 700;
    background: linear-gradient(135deg, rgba(89, 240, 167, 0.28), rgba(95, 227, 255, 0.18), rgba(244, 114, 182, 0.18));
}

.gallery-meta {
    display: grid;
    gap: 6px;
}

.gallery-title {
    margin: 0;
    color: var(--chat-text);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.42;
}

.gallery-subtitle,
.gallery-path {
    margin: 0;
    color: var(--chat-text-dim);
    font-size: 0.74rem;
    line-height: 1.45;
    word-break: break-word;
}

.gallery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.gallery-action {
    min-height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    color: var(--chat-text-soft);
}

.trace-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.trace-filter-chip {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.76rem;
    color: var(--chat-text-soft);
}

.trace-filter-chip.is-active {
    border-color: var(--chat-border-strong);
    background: rgba(95, 227, 255, 0.08);
    color: var(--chat-text);
}

.tool-trace-list {
    display: grid;
    gap: 10px;
}

.trace-entry {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 18px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.trace-entry.is-error {
    border-color: rgba(255, 122, 146, 0.18);
}

.trace-entry-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.trace-entry-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.trace-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: rgba(89, 240, 167, 0.9);
    box-shadow: 0 0 0 4px rgba(89, 240, 167, 0.08);
    flex: 0 0 auto;
}

.trace-entry.is-error .trace-status-dot {
    background: rgba(255, 122, 146, 0.92);
    box-shadow: 0 0 0 4px rgba(255, 122, 146, 0.08);
}

.trace-tool-name {
    min-width: 0;
    color: var(--chat-text);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-entry-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    color: var(--chat-text-dim);
    font-size: 0.72rem;
}

.trace-entry-preview {
    color: var(--chat-text-soft);
    font-size: 0.78rem;
    line-height: 1.5;
}

.trace-entry-toggle {
    justify-self: start;
    border: none;
    padding: 0;
    color: var(--chat-green);
    background: transparent;
    font-size: 0.76rem;
}

.trace-entry-details {
    display: grid;
    gap: 10px;
}

.trace-detail-block {
    display: grid;
    gap: 6px;
}

.trace-detail-label {
    color: var(--chat-text-dim);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trace-detail-code {
    margin: 0;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(4, 7, 13, 0.92);
    color: var(--chat-code-text);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.ambient-badge {
    position: fixed;
    right: max(16px, env(safe-area-inset-right) + 8px);
    bottom: max(16px, env(safe-area-inset-bottom) + 8px);
    z-index: 16;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.72rem;
    color: rgba(228, 239, 220, 0.74);
    backdrop-filter: blur(16px);
}

.ambient-popover {
    position: fixed;
    z-index: 17;
    right: max(16px, env(safe-area-inset-right) + 8px);
    bottom: max(58px, env(safe-area-inset-bottom) + 50px);
    width: min(320px, calc(100vw - 28px));
}

.ambient-grid {
    display: grid;
    gap: 10px;
}

.ambient-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.ambient-key {
    color: var(--chat-text-dim);
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ambient-value {
    min-width: 0;
    color: var(--chat-text);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: right;
}

.ambient-reason {
    margin: 12px 0 0;
    color: var(--chat-text-soft);
    font-size: 0.8rem;
    line-height: 1.45;
}

.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 7, 13, 0.72);
    backdrop-filter: blur(14px);
}

.auth-card {
    width: min(420px, 100%);
    padding: 24px;
    border-radius: 28px;
}

.auth-card h2 {
    margin: 8px 0 10px;
    font-size: 1.4rem;
}

.auth-card button {
    margin-top: 14px;
    min-height: 44px;
    width: 100%;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(89, 240, 167, 0.96), rgba(95, 227, 255, 0.82));
    color: #07110d;
    font-weight: 700;
}

.auth-error {
    min-height: 1.4em;
    color: rgba(255, 122, 146, 0.92);
}

.voice-playback {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 900px) {
    .message-user .message-main {
        max-width: 80%;
    }
}

@media (max-width: 767px) {
    .slim-app {
        padding-left: 10px;
        padding-right: 10px;
    }

    .chat-shell {
        height: calc(100vh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
        gap: 8px;
    }

    .sidebar {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
    }

    .chat-panels {
        top: calc(max(10px, env(safe-area-inset-top)) + var(--chat-topbar-h) + 8px);
        right: 10px;
        left: 10px;
        bottom: 10px;
        width: auto;
    }

    .chat-panel-tabs {
        border-radius: 18px;
    }

    .chat-panel {
        border-radius: 22px;
    }

    .image-gallery-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        gap: 8px;
    }

    .model-trigger {
        padding-left: 12px;
        padding-right: 12px;
    }

    .model-trigger-value {
        font-size: 0.84rem;
    }

    .messages {
        gap: 24px;
        padding-bottom: 18px;
    }

    .jump-latest {
        right: 2px;
        bottom: 8px;
    }

    .message-assistant,
    .message-system {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 12px;
    }

    .message-system {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-avatar {
        width: 30px;
        height: 30px;
        border-radius: 12px;
        font-size: 0.76rem;
    }

    .message-user .message-main {
        max-width: 88%;
    }

    .welcome-state {
        margin-top: 7vh;
        padding-left: 8px;
        padding-right: 8px;
    }

    .welcome-state h1 {
        font-size: 1.8rem;
    }

    .welcome-copy {
        font-size: 0.95rem;
    }

    .welcome-chips {
        justify-content: stretch;
    }

    .welcome-chip {
        width: 100%;
    }

    .composer-shell {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .composer-icon,
    .composer-send {
        width: 40px;
        height: 40px;
        border-radius: 14px;
    }

    .ambient-badge {
        right: 10px;
        bottom: max(10px, env(safe-area-inset-bottom));
        max-width: calc(100vw - 20px);
    }

    .ambient-popover {
        right: 10px;
        width: min(320px, calc(100vw - 20px));
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   STUDY MODE — Twilight Prep
   Shares the chat-slim chrome (header, body bg). When `body.is-mode-study`
   is set, the chat-stage + composer hide and .study-panel takes their place
   inside the same grid row.
   ═══════════════════════════════════════════════════════════════════════════ */

.study-panel {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}

body.is-mode-study .chat-stage,
body.is-mode-study .composer-wrap {
    display: none !important;
}
body.is-mode-study .study-panel {
    display: grid;
}

.study-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.study-header-left { flex: 1; min-width: 0; }

.study-badge {
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: 11px;
    color: var(--chat-aqua, #5fe3ff);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.study-title {
    font-size: 17px;
    font-weight: 600;
    margin-top: 4px;
    color: var(--chat-text, #e5e9f0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.study-scoreboard {
    display: flex;
    gap: 14px;
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: 12px;
}
.study-score-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.study-score-cell .study-score-label {
    font-size: 9px;
    color: var(--chat-text-dim, #8a94a6);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.study-score-cell .study-score-value { font-size: 14px; font-weight: 700; }
.study-score-cell .study-score-value.correct { color: var(--chat-green, #59f0a7); }
.study-score-cell .study-score-value.wrong { color: var(--chat-coral, #ff7a92); }
.study-score-cell .study-score-value.accent { color: var(--chat-aqua, #5fe3ff); }

.study-progress-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.study-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--chat-aqua, #5fe3ff), var(--chat-green, #59f0a7));
    transition: width 280ms ease;
    width: 0%;
}

.study-stage {
    overflow-y: auto;
    padding: 4px 2px 12px;
}

/* — Start screen — */
.study-start {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 8px 2px;
}
.study-greet { text-align: center; }
.study-greet h1 {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--chat-text, #e5e9f0);
}
.study-greet .study-sub {
    color: var(--chat-text-dim, #8a94a6);
    margin-top: 6px;
    font-size: 14.5px;
}

.study-exam-grid { display: grid; gap: 10px; }
.study-exam-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 24, 39, 0.78);
    border-radius: 14px;
    padding: 16px 18px;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: border-color 160ms ease, transform 120ms ease;
    font: inherit;
    width: 100%;
}
.study-exam-card:hover, .study-exam-card:focus-visible {
    border-color: rgba(95, 227, 255, 0.32);
    outline: none;
    transform: translateY(-1px);
}
.study-exam-card .study-exam-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--chat-text, #e5e9f0);
}
.study-exam-card .study-exam-meta {
    font-size: 12px;
    color: var(--chat-text-dim, #8a94a6);
    margin-top: 4px;
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
}

.study-config-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.study-config-chip {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(17, 24, 39, 0.78);
    color: var(--chat-text-dim, #8a94a6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms ease;
    font: inherit;
}
.study-config-chip:hover {
    border-color: rgba(95, 227, 255, 0.32);
    color: var(--chat-text, #e5e9f0);
}
.study-config-chip.is-active {
    border-color: var(--chat-aqua, #5fe3ff);
    color: var(--chat-aqua, #5fe3ff);
    background: rgba(95, 227, 255, 0.08);
}

/* — Question card — */
.study-question-card {
    background: rgba(17, 24, 39, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 20px;
}
.study-question-meta {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: 11px;
    color: var(--chat-text-faint, #5b6478);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 10px;
}
.study-domain-tag { color: var(--chat-aqua-dim, #0099cc); }

.study-question-stem {
    font-size: 16.5px;
    line-height: 1.55;
    margin-bottom: 16px;
    color: var(--chat-text, #e5e9f0);
}

.study-options { display: flex; flex-direction: column; gap: 9px; }

.study-option-button {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(26, 35, 50, 0.85);
    border-radius: 12px;
    color: var(--chat-text, #e5e9f0);
    font-size: 15px;
    text-align: left;
    cursor: pointer;
    transition: all 120ms ease;
    font: inherit;
    line-height: 1.45;
    width: 100%;
}
.study-option-button:hover:not(:disabled) {
    border-color: rgba(95, 227, 255, 0.32);
    background: rgba(95, 227, 255, 0.04);
}
.study-option-button.is-selected {
    border-color: var(--chat-aqua, #5fe3ff);
    background: rgba(95, 227, 255, 0.08);
}
.study-option-button.is-correct {
    border-color: var(--chat-green, #59f0a7);
    background: rgba(89, 240, 167, 0.10);
    color: var(--chat-green, #59f0a7);
}
.study-option-button.is-wrong {
    border-color: var(--chat-coral, #ff7a92);
    background: rgba(255, 122, 146, 0.10);
    color: var(--chat-coral, #ff7a92);
}
.study-option-button:disabled { cursor: default; }

.study-option-letter {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    flex-shrink: 0;
}
.study-option-button.is-selected .study-option-letter { background: rgba(95, 227, 255, 0.18); }
.study-option-button.is-correct .study-option-letter { background: rgba(89, 240, 167, 0.22); color: var(--chat-green, #59f0a7); }
.study-option-button.is-wrong .study-option-letter { background: rgba(255, 122, 146, 0.22); color: var(--chat-coral, #ff7a92); }

.study-option-text { flex: 1; }

/* — Explanation — */
.study-explanation {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(95, 227, 255, 0.04);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--chat-text, #e5e9f0);
}
.study-verdict {
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}
.study-verdict.correct { color: var(--chat-green, #59f0a7); }
.study-verdict.wrong { color: var(--chat-coral, #ff7a92); }
.study-references {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--chat-text-dim, #8a94a6);
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
}
.study-references a { color: var(--chat-aqua, #5fe3ff); text-decoration: none; word-break: break-all; }
.study-references a:hover { text-decoration: underline; }

/* — Summary — */
.study-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 28px 8px;
    text-align: center;
}
.study-summary h2 { font-size: 22px; color: var(--chat-text, #e5e9f0); }
.study-summary .study-pct {
    font-size: 52px;
    font-weight: 800;
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    color: var(--chat-aqua, #5fe3ff);
}
.study-summary .study-breakdown {
    font-size: 13px;
    color: var(--chat-text-dim, #8a94a6);
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
}

/* — Footer / actions — */
.study-footer {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.study-btn {
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(26, 35, 50, 0.85);
    color: var(--chat-text, #e5e9f0);
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 120ms ease;
    font: inherit;
}
.study-btn:hover:not(:disabled) { border-color: rgba(95, 227, 255, 0.32); }
.study-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.study-btn-primary {
    color: #08110d;
    background: linear-gradient(135deg, var(--chat-green, #59f0a7), var(--chat-aqua, #5fe3ff));
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(89, 240, 167, 0.18);
}
.study-btn-primary:hover:not(:disabled) { box-shadow: 0 12px 26px rgba(89, 240, 167, 0.26); }
.study-btn-ghost {
    background: transparent;
    color: var(--chat-text-dim, #8a94a6);
    border: none;
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 4px;
    padding: 8px 6px;
}

@media (max-width: 700px) {
    .study-scoreboard { gap: 10px; }
    .study-option-button { padding: 13px 13px; font-size: 14.5px; }
    .study-question-stem { font-size: 15px; }
}


/* ── Streak counter — heats up as consecutive correct answers stack ─────── */

.study-streak-cell {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--chat-text-dim, #8a94a6);
    transition: all 200ms ease;
}
.study-streak-cell.is-warm {
    background: rgba(255, 209, 102, 0.12);
    border-color: rgba(255, 209, 102, 0.3);
    color: #ffd166;
}
.study-streak-cell.is-hot {
    background: rgba(255, 122, 146, 0.14);
    border-color: rgba(255, 122, 146, 0.4);
    color: #ff7a92;
    box-shadow: 0 0 12px rgba(255, 122, 146, 0.18);
}
.study-streak-cell.is-blazing {
    background: rgba(255, 122, 146, 0.2);
    border-color: rgba(255, 122, 146, 0.6);
    color: #fff;
    box-shadow: 0 0 18px rgba(255, 122, 146, 0.32);
    animation: study-pulse 1.4s ease-in-out infinite;
}
.study-streak-cell .study-streak-flame {
    font-size: 13px;
    line-height: 1;
}

@keyframes study-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}


/* ── Domain color accents — driven by data-domain-color attribute ──────── */

.study-domain-tag[data-domain-color="aqua"]   { color: #5fe3ff; }
.study-domain-tag[data-domain-color="green"]  { color: #59f0a7; }
.study-domain-tag[data-domain-color="gold"]   { color: #ffd166; }
.study-domain-tag[data-domain-color="coral"]  { color: #ff7a92; }
.study-domain-tag[data-domain-color="violet"] { color: #a78bfa; }
.study-domain-tag[data-domain-color="rose"]   { color: #f472b6; }
.study-domain-tag[data-domain-color="lime"]   { color: #84cc16; }

.study-question-card[data-domain-color="aqua"]   { box-shadow: inset 4px 0 0 0 #5fe3ff, 0 8px 24px rgba(0,0,0,0.12); }
.study-question-card[data-domain-color="green"]  { box-shadow: inset 4px 0 0 0 #59f0a7, 0 8px 24px rgba(0,0,0,0.12); }
.study-question-card[data-domain-color="gold"]   { box-shadow: inset 4px 0 0 0 #ffd166, 0 8px 24px rgba(0,0,0,0.12); }
.study-question-card[data-domain-color="coral"]  { box-shadow: inset 4px 0 0 0 #ff7a92, 0 8px 24px rgba(0,0,0,0.12); }
.study-question-card[data-domain-color="violet"] { box-shadow: inset 4px 0 0 0 #a78bfa, 0 8px 24px rgba(0,0,0,0.12); }
.study-question-card[data-domain-color="rose"]   { box-shadow: inset 4px 0 0 0 #f472b6, 0 8px 24px rgba(0,0,0,0.12); }
.study-question-card[data-domain-color="lime"]   { box-shadow: inset 4px 0 0 0 #84cc16, 0 8px 24px rgba(0,0,0,0.12); }


/* ── Question card slide-in animation between turns ────────────────────── */

.study-question-card { animation: study-card-in 220ms ease-out; }

@keyframes study-card-in {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}


/* ── Summary celebration — glow + scale when ≥ 80% ─────────────────────── */

.study-summary.is-celebrating .study-pct {
    animation: study-celebrate 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.study-summary.is-celebrating .study-pct {
    text-shadow:
        0 0 30px rgba(89, 240, 167, 0.5),
        0 0 60px rgba(95, 227, 255, 0.32);
}

@keyframes study-celebrate {
    0%   { transform: scale(0.6); opacity: 0; }
    55%  { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}


/* ── Per-domain accuracy bars on summary screen ────────────────────────── */

.study-domain-bars {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 6px;
}
.study-domain-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.study-domain-row-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    color: var(--chat-text-dim, #8a94a6);
}
.study-domain-row-head .study-domain-row-pct {
    color: var(--chat-text, #e5e9f0);
    font-weight: 700;
}
.study-domain-row-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 999px;
    overflow: hidden;
}
.study-domain-row-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--chat-aqua, #5fe3ff);
    transition: width 600ms ease;
}
.study-domain-row[data-domain-color="aqua"]   .study-domain-row-fill { background: #5fe3ff; }
.study-domain-row[data-domain-color="green"]  .study-domain-row-fill { background: #59f0a7; }
.study-domain-row[data-domain-color="gold"]   .study-domain-row-fill { background: #ffd166; }
.study-domain-row[data-domain-color="coral"]  .study-domain-row-fill { background: #ff7a92; }
.study-domain-row[data-domain-color="violet"] .study-domain-row-fill { background: #a78bfa; }
.study-domain-row[data-domain-color="rose"]   .study-domain-row-fill { background: #f472b6; }
.study-domain-row[data-domain-color="lime"]   .study-domain-row-fill { background: #84cc16; }


/* ═══════════════════════════════════════════════════════════════════════════
   TABLETOP MODE — D&D 5e player HUD (Phase 1)
   Spec: A.I Vault/J-Bot/Tabletop Mode UI Spec.md
   3-column desktop/tablet grid → vertical stack < 900px.
   Palette: phosphor green + magenta on dark navy. d20-gold for crits,
   scarlet for nat-1s, 10 damage-type tints on spell/attack cards.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Phase-1-additive tabletop palette. Reuses chat-slim's --chat-* fallbacks
       where possible so dark/light shifts ride along automatically. */
    --tt-phosphor:   #00ff85;
    --tt-magenta:    #ff00e5;
    --tt-bg-deep:    #08090e;
    --tt-bg-card:    #0d1018;
    --tt-bg-elev:    #131826;
    --tt-text:       #e8edf2;
    --tt-text-dim:   #8b95a5;
    --tt-border:     rgba(0, 255, 133, 0.22);
    --tt-border-soft:rgba(0, 255, 133, 0.10);
    --tt-magenta-hr: rgba(255, 0, 229, 0.55);

    --tt-d20-gold:   #ffd700;
    --tt-scarlet:    #ff3030;
    --tt-warn:       #ffb84a;

    --tt-tap-default: 48px;
    --tt-tap-quickroll: 64px;

    --tt-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
    --tt-radius:   6px;
    --tt-radius-lg: 9px;
}

/* Mode-toggle hides the regular chat surface and reveals the panel inside the
   same grid row, mirroring how Study mode is integrated. */
body.is-mode-tabletop .chat-stage,
body.is-mode-tabletop .composer-wrap,
body.is-mode-tabletop .study-panel,
body.is-mode-tabletop .welcome-state {
    display: none !important;
}
body.is-mode-tabletop .tabletop-panel { display: grid; }

.tabletop-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
    color: var(--tt-text);
    background: var(--tt-bg-deep);
    padding: 10px 12px 4px;
    border-radius: 8px;
}

.tabletop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--tt-border-soft);
}
.tabletop-header-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.tabletop-header-right { display: flex; align-items: center; gap: 10px; }

.tabletop-badge {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--tt-phosphor);
    text-shadow: 0 0 6px rgba(0, 255, 133, 0.35);
}
.tabletop-title {
    font-family: var(--tt-font-mono);
    font-size: 14px;
    color: var(--tt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tabletop-ws-pill {
    font-family: var(--tt-font-mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--tt-border-soft);
    color: var(--tt-text-dim);
    background: transparent;
    cursor: default;
}
.tabletop-ws-pill[data-state="on"]         { color: var(--tt-phosphor); border-color: var(--tt-border); }
.tabletop-ws-pill[data-state="connecting"] { color: var(--tt-warn);     border-color: rgba(255, 184, 74, 0.25); }
.tabletop-ws-pill[data-state="off"]        { color: var(--tt-text-dim); }
.tabletop-ws-pill[data-state="err"]        { color: var(--tt-scarlet);  border-color: rgba(255, 48, 48, 0.30); }

.tabletop-exit {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    background: transparent;
    color: var(--tt-magenta);
    border: 1px solid var(--tt-magenta-hr);
    border-radius: var(--tt-radius);
    padding: 6px 12px;
    min-height: 32px;
    cursor: pointer;
}
.tabletop-exit:hover { background: rgba(255, 0, 229, 0.10); }

.tabletop-grid {
    display: grid;
    grid-template-columns: minmax(240px, 25%) minmax(0, 1fr) minmax(280px, 30%);
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}

/* ── Generic tabletop card frame ─────────────────────────────────────────── */
.tt-card {
    position: relative;
    background: var(--tt-bg-card);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    padding: 10px 12px;
    font-family: var(--tt-font-mono);
    font-size: 13px;
    color: var(--tt-text);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
.tt-card::after {
    content: "";
    position: absolute;
    right: 6px;
    bottom: 5px;
    width: 28px;
    height: 1px;
    background: var(--tt-magenta-hr);
    pointer-events: none;
}
.tt-card-head {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--tt-phosphor);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tt-card-icon { font-size: 14px; }
.tt-mini-label {
    font-family: var(--tt-font-mono);
    font-size: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--tt-text-dim);
    margin: 6px 0 4px;
}

/* ── HUD column ──────────────────────────────────────────────────────────── */
.tt-hud {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-right: 4px;
    min-height: 0;
}
.tt-hud-body { display: flex; flex-direction: column; gap: 10px; }
.tt-no-char { color: var(--tt-text-dim); padding: 14px 8px; font-family: var(--tt-font-mono); font-size: 13px; line-height: 1.55; }
.tt-no-char-title { color: var(--tt-text); font-size: 14px; margin-bottom: 6px; }
.tt-no-char-body code { background: var(--tt-bg-elev); padding: 1px 5px; border-radius: 3px; color: var(--tt-phosphor); font-size: 12px; }

.tt-hp-row { display: flex; align-items: center; }
.tt-hp-block {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border-radius: var(--tt-radius);
    background: var(--tt-bg-elev);
    border: 1px solid transparent;
}
.tt-hp-block[data-health="ok"]   { border-color: rgba(0, 255, 133, 0.30); }
.tt-hp-block[data-health="warn"] { border-color: rgba(255, 184, 74, 0.40); }
.tt-hp-block[data-health="low"]  { border-color: rgba(255, 48, 48, 0.40); }

.tt-hp-label { font-size: 11px; text-transform: uppercase; color: var(--tt-text-dim); letter-spacing: 0.5px; }
.tt-hp-value {
    flex: 1; text-align: center;
    font-family: var(--tt-font-mono);
    font-size: 22px;
    font-weight: 700;
}
.tt-hp-block[data-health="ok"]   .tt-hp-value { color: var(--tt-phosphor); }
.tt-hp-block[data-health="warn"] .tt-hp-value { color: var(--tt-warn); }
.tt-hp-block[data-health="low"]  .tt-hp-value { color: var(--tt-scarlet); }
.tt-hp-step {
    width: 36px; height: 36px;
    border-radius: var(--tt-radius);
    background: transparent;
    border: 1px solid var(--tt-border-soft);
    color: var(--tt-text);
    font-family: var(--tt-font-mono);
    font-size: 18px;
    cursor: pointer;
    user-select: none;
}
.tt-hp-step:hover { background: rgba(0, 255, 133, 0.08); border-color: var(--tt-border); }

.tt-temp-hp-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 8px; font-size: 12px;
    color: var(--tt-warn);
}

.tt-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 4px;
}
.tt-stat-cell {
    display: flex; flex-direction: column; align-items: center;
    padding: 6px 4px;
    background: var(--tt-bg-elev);
    border-radius: var(--tt-radius);
    min-height: 44px;
    justify-content: center;
}
.tt-stat-label {
    font-family: var(--tt-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tt-text-dim);
}
.tt-stat-value {
    font-family: var(--tt-font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--tt-text);
}

/* Slots */
.tt-slots .tt-slot-rows { display: flex; flex-direction: column; gap: 4px; }
.tt-slot-row {
    display: grid;
    grid-template-columns: 28px 1fr 44px;
    align-items: center;
    gap: 6px;
}
.tt-slot-level { font-size: 11px; color: var(--tt-text-dim); }
.tt-slot-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.tt-slot-dot {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--tt-border-soft);
    color: var(--tt-phosphor);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tt-slot-dot.is-filled { color: var(--tt-phosphor); border-color: var(--tt-border); background: rgba(0, 255, 133, 0.06); }
.tt-slot-dot.is-used   { color: var(--tt-text-dim); border-color: var(--tt-border-soft); }
.tt-slot-dot:hover { box-shadow: 0 0 4px rgba(0, 255, 133, 0.5); }
.tt-slot-count { font-size: 11px; color: var(--tt-text-dim); text-align: right; }
.tt-slot-empty { color: var(--tt-text-dim); font-size: 12px; padding: 4px 2px; }

/* Rest controls */
.tt-rest { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: center; }
.tt-rest .tt-hit-dice { grid-column: 1 / -1; display: flex; justify-content: space-between; padding: 4px 8px; }
.tt-btn {
    font-family: var(--tt-font-mono);
    font-size: 12px;
    color: var(--tt-text);
    background: var(--tt-bg-elev);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius);
    padding: 8px 10px;
    min-height: var(--tt-tap-default);
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.tt-btn:hover { background: rgba(0, 255, 133, 0.08); border-color: var(--tt-border); color: var(--tt-phosphor); }
.tt-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tt-btn-long  { color: var(--tt-phosphor); }
.tt-btn-short { color: var(--tt-warn); }
.tt-btn-ghost { color: var(--tt-text-dim); }
.tt-btn-mini { min-height: 32px; padding: 5px 9px; font-size: 11px; }
.tt-btn-combat-start {
    width: 100%;
    color: var(--tt-magenta);
    border-color: var(--tt-magenta-hr);
}
.tt-btn-combat-start:hover { background: rgba(255, 0, 229, 0.10); color: var(--tt-magenta); border-color: var(--tt-magenta); }

/* Ability scores */
.tt-ability-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.tt-ability-cell {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: baseline;
    gap: 6px;
    padding: 4px 8px;
    background: var(--tt-bg-elev);
    border-radius: var(--tt-radius);
    min-height: 32px;
}
.tt-ability-label { font-size: 10px; color: var(--tt-text-dim); }
.tt-ability-score { font-size: 14px; font-weight: 600; color: var(--tt-text); text-align: right; }
.tt-ability-mod   { font-size: 12px; color: var(--tt-phosphor); }

.tt-drawer-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* ── CHAT column ─────────────────────────────────────────────────────────── */
.tt-chat {
    display: grid;
    grid-template-rows: 1fr auto;
    min-height: 0;
    background: var(--tt-bg-card);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius-lg);
    overflow: hidden;
}
.tt-chat-scroll {
    overflow-y: auto;
    padding: 12px 12px 8px;
    min-height: 0;
    scroll-behavior: smooth;
}
.tt-welcome {
    color: var(--tt-text-dim);
    text-align: center;
    padding: 28px 18px;
    font-family: var(--tt-font-mono);
    font-size: 13px;
    line-height: 1.55;
}
.tt-welcome h2 { color: var(--tt-phosphor); font-size: 18px; margin-bottom: 8px; letter-spacing: 0.5px; }
.tt-welcome code { color: var(--tt-magenta); background: rgba(255, 0, 229, 0.08); padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.tt-welcome-hint { margin-top: 12px; font-size: 12px; }

.tt-messages { display: flex; flex-direction: column; gap: 10px; }
.tt-card-msg { display: flex; }
.tt-card-msg .tt-card { width: 100%; }

.tt-card-user {
    align-self: flex-end;
    background: rgba(255, 0, 229, 0.06);
    border: 1px solid var(--tt-magenta-hr);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--tt-font-mono);
    font-size: 12px;
    color: var(--tt-text);
    max-width: 70%;
}
.tt-card-msg:has(> .tt-card-user) { justify-content: flex-end; }
.tt-card-system { color: var(--tt-text-dim); font-size: 12px; padding: 6px 10px; }
.tt-card-sys-icon { color: var(--tt-magenta); }
.tt-card-error { color: var(--tt-scarlet); border-color: rgba(255, 48, 48, 0.35); }
.tt-card-text { white-space: pre-wrap; word-break: break-word; }
.tt-card-status { color: var(--tt-text-dim); }

/* Roll card */
.tt-roll-card .tt-roll-result {
    font-family: var(--tt-font-mono);
    font-size: 28px;
    font-weight: 700;
    color: var(--tt-text);
    text-align: center;
    margin: 4px 0;
}
.tt-roll-card .tt-roll-breakdown {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    color: var(--tt-text-dim);
    text-align: center;
    word-break: break-word;
}
.tt-roll-card.crit { border-color: var(--tt-d20-gold); box-shadow: 0 0 14px rgba(255, 215, 0, 0.18); }
.tt-roll-card.crit .tt-roll-result { color: var(--tt-d20-gold); text-shadow: 0 0 6px rgba(255, 215, 0, 0.45); }
.tt-roll-card.nat1 { border-color: var(--tt-scarlet); }
.tt-roll-card.nat1 .tt-roll-result { color: var(--tt-scarlet); }
.tt-roll-flash {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: auto;
    letter-spacing: 0.5px;
}
.tt-roll-flash.crit { background: rgba(255, 215, 0, 0.18); color: var(--tt-d20-gold); }
.tt-roll-flash.nat1 { background: rgba(255, 48, 48, 0.18); color: var(--tt-scarlet); }

/* Spell card — left-border tint is set inline from JS (damage type). */
.tt-spell-card {
    border-left-width: 3px;
    border-left-style: solid;
    border-left-color: var(--tt-magenta-hr);
}
.tt-spell-meta { margin-left: auto; color: var(--tt-text-dim); font-size: 11px; }
.tt-spell-body { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 6px; }
.tt-spell-row { font-size: 12px; }
.tt-spell-desc { font-size: 12px; color: var(--tt-text-dim); line-height: 1.45; max-height: 200px; overflow-y: auto; white-space: pre-wrap; }

/* Lookup / Session */
.tt-lookup-body, .tt-session-body {
    margin: 0;
    font-family: var(--tt-font-mono);
    font-size: 12px;
    color: var(--tt-text-dim);
    white-space: pre-wrap;
    max-height: 360px;
    overflow-y: auto;
}
.tt-session-card { border-color: var(--tt-magenta-hr); }
.tt-session-card .tt-card-head { color: var(--tt-magenta); }

.tt-rest-card .tt-rest-body { font-size: 13px; color: var(--tt-text); }

/* Composer */
.tt-composer {
    display: grid;
    grid-template-columns: 1fr 44px;
    gap: 6px;
    padding: 8px 10px;
    border-top: 1px solid var(--tt-border-soft);
    background: var(--tt-bg-deep);
}
#tt-input {
    resize: none;
    background: var(--tt-bg-elev);
    color: var(--tt-text);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius);
    padding: 10px 12px;
    font-family: var(--tt-font-mono);
    font-size: 13px;
    min-height: 44px;
    max-height: 120px;
}
#tt-input:focus { outline: none; border-color: var(--tt-border); box-shadow: 0 0 0 1px var(--tt-border-soft); }
.tt-send {
    background: var(--tt-bg-elev);
    color: var(--tt-phosphor);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    cursor: pointer;
    font-size: 18px;
}
.tt-send:hover { background: rgba(0, 255, 133, 0.10); }

/* ── RIGHT column: combat + quick rolls ──────────────────────────────────── */
.tt-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
}

.tt-combat-head { justify-content: space-between; width: 100%; }
.tt-combat-end {
    font-family: var(--tt-font-mono);
    font-size: 10px;
    background: transparent;
    color: var(--tt-scarlet);
    border: 1px solid rgba(255, 48, 48, 0.35);
    border-radius: var(--tt-radius);
    padding: 3px 8px;
    cursor: pointer;
}
.tt-combat-end:hover { background: rgba(255, 48, 48, 0.10); }
.tt-combat-init-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 5px 8px; background: var(--tt-bg-elev); border-radius: var(--tt-radius);
    margin-bottom: 8px;
}
.tt-combat-section { margin-bottom: 8px; }
.tt-condition-chips {
    display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px;
}
.tt-cond-chip {
    font-family: var(--tt-font-mono);
    font-size: 11px;
    background: rgba(255, 184, 74, 0.10);
    color: var(--tt-warn);
    border: 1px solid rgba(255, 184, 74, 0.35);
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
}
.tt-cond-chip:hover { background: rgba(255, 184, 74, 0.20); }
.tt-cond-empty { color: var(--tt-text-dim); font-size: 11px; }
.tt-cond-add { width: 100%; }
.tt-conc-row {
    font-size: 12px; color: var(--tt-magenta);
    padding: 6px 8px; background: rgba(255, 0, 229, 0.06);
    border-radius: var(--tt-radius); border: 1px solid var(--tt-magenta-hr);
}

/* Quick rolls */
.tt-dice-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 6px;
}
.tt-die {
    background: var(--tt-bg-elev);
    color: var(--tt-text);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius);
    font-family: var(--tt-font-mono);
    font-size: 13px;
    min-height: var(--tt-tap-quickroll);
    cursor: pointer;
    transition: background 80ms ease, border-color 80ms ease;
}
.tt-die:hover { background: rgba(0, 255, 133, 0.08); border-color: var(--tt-border); color: var(--tt-phosphor); }
.tt-die:active { background: rgba(0, 255, 133, 0.16); }
.tt-die-d20 {
    grid-column: span 2;
    color: var(--tt-d20-gold);
    border-color: rgba(255, 215, 0, 0.35);
}
.tt-die-d20:hover { background: rgba(255, 215, 0, 0.12); color: var(--tt-d20-gold); border-color: var(--tt-d20-gold); }

.tt-advdis-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.tt-advdis {
    background: transparent;
    color: var(--tt-text-dim);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius);
    font-family: var(--tt-font-mono);
    font-size: 11px;
    min-height: 36px;
    cursor: pointer;
}
.tt-advdis.is-active { background: rgba(0, 255, 133, 0.10); color: var(--tt-phosphor); border-color: var(--tt-border); }
.tt-advdis:nth-child(2).is-active { background: rgba(255, 48, 48, 0.10); color: var(--tt-scarlet); border-color: rgba(255, 48, 48, 0.35); }

.tt-save-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}
.tt-save {
    background: var(--tt-bg-elev);
    color: var(--tt-text);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius);
    font-family: var(--tt-font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    min-height: 36px;
    cursor: pointer;
}
.tt-save:hover { color: var(--tt-phosphor); border-color: var(--tt-border); }

.tt-cat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.tt-cat {
    background: var(--tt-bg-elev);
    color: var(--tt-text);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius);
    font-family: var(--tt-font-mono);
    font-size: 11px;
    min-height: 36px;
    cursor: pointer;
}
.tt-cat:hover { color: var(--tt-phosphor); border-color: var(--tt-border); }

.tt-custom-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; }
.tt-custom-input {
    background: var(--tt-bg-elev);
    color: var(--tt-text);
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius);
    padding: 6px 9px;
    font-family: var(--tt-font-mono);
    font-size: 12px;
    min-height: 32px;
}
.tt-custom-input:focus { outline: none; border-color: var(--tt-border); }

/* Toast */
.tt-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--tt-bg-elev);
    color: var(--tt-phosphor);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    padding: 8px 16px;
    font-family: var(--tt-font-mono);
    font-size: 12px;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ── Responsive collapse (< 900px → vertical stack) ─────────────────────── */
@media (max-width: 900px) {
    .tabletop-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        gap: 8px;
    }
    .tt-hud {
        max-height: 38vh;
        order: 1;
    }
    .tt-chat { order: 2; min-height: 40vh; }
    .tt-right {
        order: 3;
        max-height: 38vh;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .tt-right .tt-card { min-width: 240px; flex: 0 0 auto; }
    .tt-stat-grid { grid-template-columns: repeat(6, 1fr); }
    .tt-ability-grid { grid-template-columns: repeat(3, 1fr); }
    .tabletop-title { font-size: 12px; }
}

/* Compact phone (< 560px): collapse HUD into a single horizontal bar
   that's tap-to-expand. */
@media (max-width: 560px) {
    .tabletop-panel { padding: 6px; }
    .tt-hud { max-height: 30vh; }
    .tt-stat-grid { grid-template-columns: repeat(3, 1fr); }
    .tt-dice-grid { grid-template-columns: repeat(7, 1fr); }
    .tt-die-d20 { grid-column: auto; }
    .tt-die { min-height: 56px; font-size: 12px; }
    .tt-welcome h2 { font-size: 16px; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .tt-toast, .tt-roll-card.crit { box-shadow: none !important; }
    .tt-chat-scroll { scroll-behavior: auto; }
    .tt-die, .tt-btn, .tt-advdis { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL MODE — Third /chat-slim mode (Phase 1A)
   Mirrors the tabletop-mode CSS shape. Per-persona accent threads through
   --persona-accent on the panel, persona rows, and badge.
   See Social Mode UI Spec §3 + §5.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    --soc-bg-deep: #08090e;
    --soc-bg-panel: #0e1118;
    --soc-bg-card: #11141d;
    --soc-text: #e8edf2;
    --soc-text-dim: #8b95a5;
    --soc-border: rgba(151, 170, 196, 0.18);
    --soc-border-soft: rgba(151, 170, 196, 0.10);
    --soc-phosphor: #00ff85;
    --soc-magenta: #ff00e5;
    --soc-magenta-hr: rgba(255, 0, 229, 0.45);
    --soc-amber: #ffb300;
    --soc-warn: #ff8c42;
    --soc-scarlet: #ff3030;
    --soc-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --soc-radius: 6px;
}

body.is-mode-social .chat-stage,
body.is-mode-social .composer-wrap,
body.is-mode-social .study-panel,
body.is-mode-social .tabletop-panel,
body.is-mode-social .welcome-state {
    display: none !important;
}
body.is-mode-social .social-panel { display: grid; }

.social-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
    color: var(--soc-text);
    background: var(--soc-bg-deep);
    padding: 10px 12px 6px;
    border-radius: 8px;
}

.social-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--soc-border-soft);
}
.social-header-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.social-header-right { display: flex; align-items: center; gap: 10px; }

.social-badge {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--persona-accent, var(--soc-phosphor));
    text-shadow: 0 0 6px color-mix(in srgb, var(--persona-accent, var(--soc-phosphor)) 35%, transparent);
}
.social-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.social-persona-name {
    font-family: var(--soc-font-mono);
    font-size: 14px;
    color: var(--persona-accent, var(--soc-text));
    font-weight: 700;
}
.social-persona-blurb {
    font-size: 11px;
    color: var(--soc-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 540px;
}

.social-stats-chip {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--soc-border-soft);
    color: var(--soc-text-dim);
    cursor: default;
}
.social-stats-chip.is-configured { color: var(--soc-phosphor); border-color: var(--soc-border); }

.social-exit {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    background: transparent;
    color: var(--soc-magenta);
    border: 1px solid var(--soc-magenta-hr);
    border-radius: var(--soc-radius);
    padding: 6px 12px;
    min-height: 32px;
    cursor: pointer;
}
.social-exit:hover { background: rgba(255, 0, 229, 0.10); }

.social-grid {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.soc-rail, .soc-detail, .soc-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: hidden;
}

.soc-card {
    background: var(--soc-bg-card);
    border: 1px solid var(--soc-border-soft);
    border-radius: var(--soc-radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.soc-card-head {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--soc-text-dim);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.soc-empty {
    font-size: 12px;
    color: var(--soc-text-dim);
    padding: 6px 2px;
}

/* Persona switcher rows */
.soc-personas { flex: 0 0 auto; }
.soc-persona-list { display: flex; flex-direction: column; gap: 4px; }
.soc-persona-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--soc-radius);
    color: var(--soc-text);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.soc-persona-row:hover { background: rgba(255, 255, 255, 0.03); }
.soc-persona-row.is-active {
    border-color: var(--persona-accent, var(--soc-border));
    background: color-mix(in srgb, var(--persona-accent, #ffffff) 10%, transparent);
}
.soc-persona-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--persona-accent, var(--soc-text-dim));
    box-shadow: 0 0 6px color-mix(in srgb, var(--persona-accent, transparent) 60%, transparent);
}
.soc-persona-label {
    font-family: var(--soc-font-mono);
    font-size: 13px;
}
.soc-persona-gate { font-size: 11px; color: var(--soc-warn); }
.soc-persona-count {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    color: var(--soc-text-dim);
    min-width: 22px;
    text-align: right;
}

/* Queue */
.soc-queue { flex: 1 1 auto; min-height: 0; }
.soc-queue-head { align-items: center; }
.soc-filter {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    background: var(--soc-bg-deep);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: 4px;
    padding: 3px 6px;
}
.soc-queue-list {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}
.soc-queue-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: transparent;
    border: 1px solid var(--soc-border-soft);
    border-radius: var(--soc-radius);
    color: var(--soc-text);
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.soc-queue-row:hover { background: rgba(0, 217, 255, 0.06); border-color: var(--soc-border); }
.soc-queue-id {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    color: var(--soc-text-dim);
    min-width: 36px;
}
.soc-queue-status {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--soc-border-soft);
    color: var(--soc-text-dim);
    text-transform: uppercase;
}
.soc-queue-row-draft .soc-queue-status     { color: var(--soc-text-dim); }
.soc-queue-row-approved .soc-queue-status  { color: #00d9ff; border-color: rgba(0, 217, 255, 0.30); }
.soc-queue-row-published .soc-queue-status { color: var(--soc-phosphor); border-color: rgba(0, 255, 133, 0.30); }
.soc-queue-row-rejected .soc-queue-status  { color: var(--soc-text-dim); opacity: 0.7; }
.soc-queue-row-failed .soc-queue-status    { color: var(--soc-scarlet); border-color: rgba(255, 48, 48, 0.30); }
.soc-queue-preview {
    font-size: 12px;
    color: var(--soc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.soc-queue-chips { display: flex; gap: 4px; }
.soc-queue-chip { font-size: 11px; }
.soc-queue-chip-warn { color: var(--soc-warn); }

/* Detail / editor */
.soc-detail { background: var(--soc-bg-panel); border: 1px solid var(--soc-border-soft); border-radius: var(--soc-radius); padding: 12px; }
.soc-welcome { display: flex; flex-direction: column; gap: 10px; }
.soc-welcome h2 { font-family: var(--soc-font-mono); font-size: 18px; color: var(--persona-accent, var(--soc-phosphor)); margin: 0; }
.soc-welcome p { font-size: 13px; color: var(--soc-text-dim); line-height: 1.5; }
.soc-welcome-hint { font-size: 12px; }
.soc-welcome-hint code { font-family: var(--soc-font-mono); background: rgba(255,255,255,0.05); padding: 1px 6px; border-radius: 3px; color: var(--soc-text); }

.soc-quickdraft {
    margin-top: 12px;
    padding: 10px;
    background: var(--soc-bg-card);
    border: 1px solid var(--soc-border-soft);
    border-radius: var(--soc-radius);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.soc-quickdraft-label {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--soc-text-dim);
}
.soc-quickdraft-input {
    background: var(--soc-bg-deep);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: 4px;
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
}
.soc-quickdraft-input:focus { outline: none; border-color: var(--persona-accent, var(--soc-phosphor)); }
.soc-quickdraft-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.soc-quickdraft-platform, .soc-quickdraft-grounding {
    background: var(--soc-bg-deep);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: 4px;
    padding: 6px 8px;
    font: inherit;
    font-size: 12px;
}
.soc-quickdraft-status {
    font-size: 11px;
    color: var(--soc-text-dim);
    font-family: var(--soc-font-mono);
    min-height: 14px;
}

.soc-btn {
    font: inherit;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid var(--soc-border-soft);
    background: transparent;
    color: var(--soc-text);
}
.soc-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.soc-btn-primary {
    background: var(--persona-accent, var(--soc-phosphor));
    color: #08090e;
    border-color: var(--persona-accent, var(--soc-phosphor));
    font-weight: 700;
}
.soc-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.soc-btn-ghost { color: var(--soc-magenta); border-color: var(--soc-magenta-hr); }
.soc-btn-ghost:hover { background: rgba(255, 0, 229, 0.10); }
.soc-btn-mini { padding: 3px 8px; font-size: 11px; }

.soc-draft-view { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.soc-draft-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--soc-border-soft);
}
.soc-draft-head > div { display: flex; align-items: center; gap: 8px; }
.soc-draft-id { font-family: var(--soc-font-mono); font-size: 13px; color: var(--soc-text-dim); }
.soc-draft-status {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--soc-border-soft);
    color: var(--soc-text-dim);
}
.soc-draft-status.is-draft     { color: var(--soc-text-dim); }
.soc-draft-status.is-approved  { color: #00d9ff; border-color: rgba(0, 217, 255, 0.30); }
.soc-draft-status.is-published { color: var(--soc-phosphor); border-color: rgba(0, 255, 133, 0.30); }
.soc-draft-status.is-rejected  { color: var(--soc-text-dim); opacity: 0.7; }
.soc-draft-status.is-failed    { color: var(--soc-scarlet); border-color: rgba(255, 48, 48, 0.30); }
.soc-draft-platform { font-family: var(--soc-font-mono); font-size: 11px; color: var(--soc-text-dim); }

.soc-draft-content {
    font: inherit;
    font-family: var(--soc-font-mono);
    font-size: 13px;
    line-height: 1.5;
    background: var(--soc-bg-card);
    border: 1px solid var(--soc-border-soft);
    border-radius: var(--soc-radius);
    padding: 12px;
    margin: 0;
    color: var(--soc-text);
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 360px;
}

.soc-draft-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--soc-text-dim);
}
.soc-draft-meta strong { color: var(--soc-text); font-weight: 600; }
.soc-draft-meta code { font-family: var(--soc-font-mono); background: rgba(255,255,255,0.04); padding: 1px 4px; border-radius: 2px; }
.soc-meta-warn { color: var(--soc-warn); }

.soc-draft-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--soc-border-soft); }

/* Phase 1B editor */
.soc-draft-editor {
    font: inherit;
    font-family: var(--soc-font-mono);
    font-size: 13px;
    line-height: 1.5;
    background: var(--soc-bg-card);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: var(--soc-radius);
    padding: 12px;
    margin: 0;
    width: 100%;
    resize: vertical;
    min-height: 120px;
}
.soc-draft-editor:focus { outline: none; border-color: var(--persona-accent, var(--soc-phosphor)); }
.soc-draft-editor:disabled { opacity: 0.55; cursor: not-allowed; }
.soc-draft-charcount {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    color: var(--soc-text-dim);
    text-align: right;
    margin-top: -4px;
}
.soc-draft-charcount.is-warn { color: var(--soc-warn); }
.soc-draft-charcount.is-over { color: var(--soc-scarlet); font-weight: 700; }

.soc-draft-targets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid var(--soc-border-soft);
}
.soc-targets-label {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--soc-text-dim);
}
.soc-target-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--soc-font-mono);
    font-size: 11px;
    color: var(--soc-text);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--soc-border-soft);
    cursor: pointer;
    user-select: none;
}
.soc-target-chip input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    accent-color: var(--persona-accent, var(--soc-phosphor));
}
.soc-target-chip:has(input:checked) {
    border-color: var(--persona-accent, var(--soc-phosphor));
    background: color-mix(in srgb, var(--persona-accent, var(--soc-phosphor)) 10%, transparent);
}

/* Image gen panel */
.soc-image-panel {
    background: var(--soc-bg-card);
    border: 1px solid var(--soc-border-soft);
    border-radius: var(--soc-radius);
    padding: 8px 12px;
}
.soc-image-panel summary {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    color: var(--soc-text-dim);
    cursor: pointer;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.soc-image-panel summary span { color: var(--soc-text); text-transform: none; letter-spacing: 0; }
.soc-image-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.soc-image-prompt {
    font: inherit;
    font-family: var(--soc-font-mono);
    font-size: 12px;
    background: var(--soc-bg-deep);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: 4px;
    padding: 6px 8px;
    resize: vertical;
}
.soc-image-prompt:focus { outline: none; border-color: var(--persona-accent, var(--soc-phosphor)); }
.soc-image-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.soc-image-engine {
    background: var(--soc-bg-deep);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: 4px;
    padding: 4px 8px;
    font: inherit;
    font-size: 11px;
}
.soc-image-router-chip {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--soc-border-soft);
    color: var(--soc-text-dim);
}
.soc-image-router-chip.is-nano { color: #00d9ff; border-color: rgba(0, 217, 255, 0.40); }
.soc-image-router-chip.is-flux { color: var(--soc-phosphor); border-color: rgba(0, 255, 133, 0.40); }
.soc-image-preview { font-size: 11px; color: var(--soc-text-dim); }
.soc-image-path {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    background: rgba(255,255,255,0.04);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--soc-text);
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Phase 1C — schedule row + calendar */
.soc-schedule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px dashed var(--soc-border-soft);
    border-radius: var(--soc-radius);
    background: rgba(255, 179, 0, 0.04);
}
.soc-schedule-label {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--soc-text-dim);
}
.soc-schedule-when {
    background: var(--soc-bg-deep);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: 4px;
    padding: 5px 8px;
    font: inherit;
    font-size: 12px;
    color-scheme: dark;
}
.soc-schedule-status {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    color: var(--soc-amber);
    margin-left: auto;
}

/* Calendar panel */
.soc-calendar { flex: 0 0 auto; max-height: 320px; }
.soc-cal-head { align-items: center; }
.soc-cal-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    min-height: 0;
}
.soc-cal-day-label {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    color: var(--soc-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-top: 6px;
    padding: 0 2px;
}
.soc-cal-day-label:first-child { margin-top: 0; }
.soc-cal-entry {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--soc-border-soft);
    border-left: 3px solid var(--persona-accent, var(--soc-text-dim));
    border-radius: 4px;
    color: var(--soc-text);
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.soc-cal-entry:hover { background: rgba(255, 255, 255, 0.03); }
.soc-cal-time {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    color: var(--soc-text-dim);
    min-width: 52px;
}
.soc-cal-platform {
    font-family: var(--soc-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--soc-text-dim);
    padding: 1px 5px;
    border-radius: 999px;
    border: 1px solid var(--soc-border-soft);
}
.soc-cal-preview {
    font-size: 11px;
    color: var(--soc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.soc-cal-status {
    font-family: var(--soc-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    color: var(--soc-text-dim);
}
.soc-cal-status.is-scheduled { color: var(--soc-amber); }
.soc-cal-status.is-published { color: var(--soc-phosphor); }
.soc-cal-status.is-failed { color: var(--soc-scarlet); }

/* Right column */
.soc-insights { flex: 0 0 auto; max-height: 280px; }
.soc-insights-body { display: flex; flex-direction: column; gap: 2px; }
.soc-stat-row {
    display: flex;
    justify-content: space-between;
    font-family: var(--soc-font-mono);
    font-size: 11px;
    color: var(--soc-text);
    padding: 3px 2px;
}
.soc-stat-row strong { color: var(--soc-text); font-weight: 700; }
.soc-stat-divider { border-top: 1px solid var(--soc-border-soft); margin-top: 4px; padding-top: 6px; }

.soc-charter { flex: 1 1 auto; min-height: 0; }
.soc-charter-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.soc-charter-text {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    color: var(--soc-text);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

/* Toast */
.soc-toast {
    position: absolute;
    bottom: 16px;
    right: 16px;
    background: var(--soc-bg-card);
    border: 1px solid var(--soc-border);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--soc-text);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    z-index: 10;
}
.soc-toast.is-error   { border-color: rgba(255, 48, 48, 0.45); color: var(--soc-scarlet); }
.soc-toast.is-success { border-color: rgba(0, 255, 133, 0.45); color: var(--soc-phosphor); }

/* Mobile responsive collapse */
@media (max-width: 900px) {
    .social-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        overflow-y: auto;
    }
    .soc-rail { max-height: none; }
    .soc-queue { max-height: 320px; }
    .soc-right { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .soc-toast { box-shadow: none !important; }
    .soc-btn, .soc-persona-row, .soc-queue-row { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SOCIAL MODE — Phase 1D (chat-first redesign, 2026-05-25)
   Layer on top of the existing Social Mode styles. Earlier Phase 1A/B/C
   selectors targeting elements removed in the HTML rewrite are now dead
   (no DOM to render against) — left in place for now; cleanup later.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header — persona dropdown, charter/clear/exit buttons */
.soc-persona-dropdown { position: relative; }
.soc-persona-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--soc-border-soft);
    border-radius: 999px;
    padding: 5px 12px;
    color: var(--soc-text);
    cursor: pointer;
    font: inherit;
    font-family: var(--soc-font-mono);
    font-size: 13px;
}
.soc-persona-trigger:hover { background: rgba(255,255,255,0.07); border-color: var(--persona-accent, var(--soc-border)); }
.soc-persona-trigger .soc-persona-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--persona-accent, var(--soc-text-dim));
    box-shadow: 0 0 6px color-mix(in srgb, var(--persona-accent, transparent) 60%, transparent);
}
.soc-persona-name { font-weight: 700; color: var(--persona-accent, var(--soc-text)); }
.soc-persona-count {
    font-size: 10px;
    color: var(--soc-text-dim);
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 999px;
}
.soc-persona-caret { color: var(--soc-text-dim); font-size: 11px; }

.soc-persona-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 280px;
    margin: 0;
    padding: 4px;
    background: var(--soc-bg-card);
    border: 1px solid var(--soc-border);
    border-radius: 8px;
    list-style: none;
    z-index: 50;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.soc-persona-menu-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: "dot label gate count" "dot blurb blurb blurb";
    align-items: center;
    gap: 4px 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--soc-text);
}
.soc-persona-menu-item:hover { background: rgba(255,255,255,0.04); }
.soc-persona-menu-item.is-active {
    background: color-mix(in srgb, var(--persona-accent, transparent) 12%, transparent);
    border: 1px solid var(--persona-accent, transparent);
    padding: 7px 9px;
}
.soc-persona-menu-item .soc-persona-dot { grid-area: dot; width: 10px; height: 10px; border-radius: 50%; background: var(--persona-accent); }
.soc-persona-menu-label { grid-area: label; font-family: var(--soc-font-mono); font-size: 13px; font-weight: 700; color: var(--persona-accent); }
.soc-persona-menu-blurb { grid-area: blurb; font-size: 11px; color: var(--soc-text-dim); }
.soc-persona-gate { grid-area: gate; font-size: 11px; color: var(--soc-warn); }
.soc-persona-menu-count {
    grid-area: count;
    font-family: var(--soc-font-mono);
    font-size: 10px;
    color: var(--soc-text-dim);
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 999px;
}

.soc-header-btn {
    background: transparent;
    color: var(--soc-text-dim);
    border: 1px solid var(--soc-border-soft);
    border-radius: 6px;
    padding: 5px 10px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    min-height: 32px;
}
.soc-header-btn:hover { background: rgba(255,255,255,0.05); color: var(--soc-text); border-color: var(--soc-border); }

/* Left rail: AWAITING REVIEW + NEXT UP */
.soc-card-sub {
    font-family: var(--soc-font-mono);
    font-size: 10px;
    color: var(--soc-text-dim);
    font-weight: 400;
}
.soc-nextup-list { display: flex; flex-direction: column; gap: 4px; }
.soc-nextup-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "time platform" "preview preview";
    gap: 2px 8px;
    padding: 6px 8px;
    border-left: 3px solid var(--persona-accent, var(--soc-text-dim));
    border-radius: 4px;
    background: rgba(255,255,255,0.02);
    font-family: var(--soc-font-mono);
    font-size: 11px;
}
.soc-nextup-time { grid-area: time; color: var(--soc-amber); }
.soc-nextup-platform { grid-area: platform; font-size: 9px; text-transform: uppercase; color: var(--soc-text-dim); }
.soc-nextup-preview { grid-area: preview; color: var(--soc-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Center: CHAT canvas */
.soc-canvas {
    display: flex;
    flex-direction: column;
    background: var(--soc-bg-panel);
    border: 1px solid var(--soc-border-soft);
    border-radius: var(--soc-radius);
    min-height: 0;
    overflow: hidden;
}
.soc-chat-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
    min-height: 0;
}
.soc-chat-welcome {
    text-align: center;
    padding: 32px 16px 8px;
    color: var(--soc-text-dim);
}
.soc-chat-welcome h2 {
    font-family: var(--soc-font-mono);
    font-size: 22px;
    color: var(--persona-accent, var(--soc-phosphor));
    margin: 0 0 8px;
}
.soc-chat-welcome p { font-size: 13px; line-height: 1.6; margin: 0 auto 12px; max-width: 560px; }
.soc-chat-suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 16px; }
.soc-suggest {
    font: inherit;
    font-size: 12px;
    color: var(--soc-text);
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--soc-border-soft);
    border-radius: 999px;
    padding: 6px 14px;
    cursor: pointer;
}
.soc-suggest:hover { background: rgba(255,255,255,0.07); border-color: var(--persona-accent); border-style: solid; color: var(--persona-accent); }

.soc-chat-messages { display: flex; flex-direction: column; gap: 16px; }
.soc-turn {
    max-width: 86%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.soc-turn.is-user { align-self: flex-end; align-items: flex-end; }
.soc-turn.is-assistant { align-self: flex-start; align-items: flex-start; }
.soc-turn-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--soc-border-soft);
    color: var(--soc-text);
    font-size: 13px;
    line-height: 1.55;
}
.soc-turn.is-user .soc-turn-bubble {
    background: rgba(255,0,229,0.08);
    border-color: rgba(255,0,229,0.30);
}
.soc-turn.is-assistant .soc-turn-bubble {
    background: color-mix(in srgb, var(--persona-accent, transparent) 8%, var(--soc-bg-card));
    border-color: color-mix(in srgb, var(--persona-accent, transparent) 30%, var(--soc-border-soft));
}
.soc-turn-body p { margin: 0 0 8px; }
.soc-turn-body p:last-child { margin-bottom: 0; }
.soc-turn-body code {
    font-family: var(--soc-font-mono);
    font-size: 12px;
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 3px;
}
.soc-turn-footer {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--soc-font-mono);
    font-size: 10px;
    color: var(--soc-text-dim);
    padding: 0 4px;
}
.soc-turn-model { opacity: 0.7; }

/* Inline action chips inside an assistant turn */
.soc-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.soc-chip {
    background: var(--soc-bg-deep);
    border: 1px solid var(--soc-border-soft);
    border-left: 3px solid var(--persona-accent, var(--soc-phosphor));
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.soc-chip-draft { border-left-color: var(--soc-phosphor); }
.soc-chip-image { border-left-color: #00d9ff; }
.soc-chip-schedule { border-left-color: var(--soc-amber); }
.soc-chip-review { border-left-color: #ff00e5; }
.soc-chip-head {
    font-family: var(--soc-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--soc-text-dim);
    display: flex;
    align-items: center;
    gap: 6px;
}
.soc-chip-platform, .soc-chip-when {
    font-size: 10px;
    background: rgba(255,255,255,0.05);
    padding: 1px 6px;
    border-radius: 999px;
    color: var(--soc-text);
    text-transform: none;
}
.soc-chip-body {
    font-family: var(--soc-font-mono);
    font-size: 12px;
    color: var(--soc-text);
    line-height: 1.55;
    background: rgba(255,255,255,0.02);
    padding: 8px 10px;
    border-radius: 4px;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 240px;
    overflow-y: auto;
}
.soc-chip-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.soc-chip-actions .is-done { opacity: 0.7; cursor: default; }

/* Typing dots */
.soc-chat-typing {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    align-self: flex-start;
    color: var(--persona-accent, var(--soc-text-dim));
}
.soc-typing-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: soc-typing 1.2s infinite ease-in-out;
}
.soc-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.soc-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes soc-typing {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Composer */
.soc-chat-composer {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--soc-border-soft);
    background: var(--soc-bg-card);
}
.soc-chat-composer textarea {
    flex: 1 1 auto;
    background: var(--soc-bg-deep);
    color: var(--soc-text);
    border: 1px solid var(--soc-border-soft);
    border-radius: 8px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    resize: none;
    min-height: 38px;
    max-height: 180px;
    line-height: 1.5;
}
.soc-chat-composer textarea:focus { outline: none; border-color: var(--persona-accent, var(--soc-phosphor)); }
.soc-chat-send {
    background: var(--persona-accent, var(--soc-phosphor));
    color: #08090e;
    border: none;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 700;
    align-self: flex-end;
}
.soc-chat-send:hover:not(:disabled) { filter: brightness(1.1); }
.soc-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Insights — collapsible */
.soc-insights-details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.soc-insights-details summary::-webkit-details-marker { display: none; }
.soc-insights-details .soc-fold-caret { transition: transform 0.2s ease; font-size: 12px; }
.soc-insights-details[open] .soc-fold-caret { transform: rotate(180deg); }

/* Voice charter modal */
.soc-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
}
.soc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8,9,14,0.78);
    backdrop-filter: blur(4px);
}
.soc-modal-content {
    position: relative;
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    background: var(--soc-bg-card);
    border: 1px solid var(--soc-border);
    border-radius: 10px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.soc-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--soc-border-soft);
}
.soc-modal-head h3 {
    margin: 0;
    font-family: var(--soc-font-mono);
    font-size: 14px;
    color: var(--persona-accent, var(--soc-phosphor));
    letter-spacing: 0.5px;
}
.soc-modal-close {
    background: transparent;
    border: none;
    color: var(--soc-text-dim);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.soc-modal-close:hover { color: var(--soc-text); }
.soc-modal-body {
    margin: 0;
    padding: 16px 20px;
    font-family: var(--soc-font-mono);
    font-size: 12px;
    line-height: 1.6;
    color: var(--soc-text);
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Mobile collapse — chat-first means the chat canvas stays priority */
@media (max-width: 900px) {
    .social-grid { grid-template-columns: 1fr; grid-auto-rows: auto; overflow-y: auto; }
    .soc-rail { order: 3; max-height: 280px; }
    .soc-right { order: 2; max-height: 260px; }
    .soc-canvas { order: 1; min-height: 50vh; }
    .soc-persona-menu { min-width: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 1D.1 — collapsible side rails. Chat is full-width by default; toggle
   pills in the header reveal Queue (left) + Calendar (right) on demand.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Default: hide both rails, chat fills the row */
.social-panel .soc-rail { display: none; }
.social-panel .soc-right { display: none; }
.social-panel .social-grid {
    grid-template-columns: 1fr;
    max-width: 1100px;       /* keep chat readable on very wide monitors */
    margin: 0 auto;
}

/* Toggled rails reappear; max-width is removed so layout uses available room */
.social-panel.has-rail-queue .soc-rail { display: flex; }
.social-panel.has-rail-calendar .soc-right { display: flex; }
.social-panel.has-rail-queue .social-grid,
.social-panel.has-rail-calendar .social-grid { max-width: none; margin: 0; }

.social-panel.has-rail-queue:not(.has-rail-calendar) .social-grid {
    grid-template-columns: 260px 1fr;
}
.social-panel:not(.has-rail-queue).has-rail-calendar .social-grid {
    grid-template-columns: 1fr 300px;
}
.social-panel.has-rail-queue.has-rail-calendar .social-grid {
    grid-template-columns: 260px 1fr 300px;
}

/* Rail toggle pills in the header */
.soc-rail-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--soc-text-dim);
    border: 1px solid var(--soc-border-soft);
    border-radius: 999px;
    padding: 4px 10px 4px 10px;
    min-height: 30px;
    font: inherit;
    font-family: var(--soc-font-mono);
    font-size: 11px;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.soc-rail-toggle:hover {
    background: rgba(255,255,255,0.05);
    color: var(--soc-text);
    border-color: var(--soc-border);
}
.soc-rail-toggle[aria-pressed="true"] {
    background: color-mix(in srgb, var(--persona-accent, var(--soc-phosphor)) 12%, transparent);
    border-color: var(--persona-accent, var(--soc-phosphor));
    color: var(--persona-accent, var(--soc-phosphor));
}
.soc-rail-toggle-label {
    /* Collapse the label to icon-only on narrow toolbars */
    display: inline;
}
@media (max-width: 1200px) {
    .soc-rail-toggle-label { display: none; }
    .soc-rail-toggle { padding: 4px 8px; min-width: 32px; justify-content: center; }
}
.soc-rail-toggle-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--soc-text);
    background: rgba(255,255,255,0.07);
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
    transition: transform 0.15s ease, background 0.3s ease;
}
.soc-rail-toggle[aria-pressed="true"] .soc-rail-toggle-count {
    background: rgba(0,0,0,0.25);
    color: var(--persona-accent, var(--soc-phosphor));
}
.soc-rail-toggle-count.is-zero { opacity: 0.45; }

/* Pulse when a new item arrives (1s) */
.soc-rail-toggle.is-pulse {
    animation: soc-rail-pulse 1s ease-out 1;
}
.soc-rail-toggle.is-pulse .soc-rail-toggle-count {
    background: var(--soc-amber);
    color: #08090e;
}
@keyframes soc-rail-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--soc-amber) 60%, transparent); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Mobile: rails always allowed via toggles but unconstrain max-width */
@media (max-width: 900px) {
    .social-panel .social-grid { max-width: none; margin: 0; }
}

/* Phase 1E — bad-output banner inside an assistant bubble. Server flags
   turns where the model emitted fake tool-call syntax instead of a chip. */
.soc-turn.is-bad .soc-turn-bubble {
    border-color: rgba(255, 140, 66, 0.45);
    background: color-mix(in srgb, var(--soc-warn) 6%, var(--soc-bg-card));
}
.soc-bad-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(255, 140, 66, 0.10);
    border: 1px dashed rgba(255, 140, 66, 0.40);
    border-radius: 6px;
    font-size: 11px;
    color: var(--soc-warn);
    font-family: var(--soc-font-mono);
}
.soc-bad-icon { font-size: 13px; }
.soc-bad-text { flex: 1; min-width: 0; }
.soc-bad-banner button {
    flex: 0 0 auto;
    background: var(--soc-warn);
    color: #08090e;
    border: none;
    border-radius: 4px;
    padding: 4px 10px;
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}
.soc-bad-banner button:hover:not(:disabled) { filter: brightness(1.1); }
.soc-bad-banner button:disabled { opacity: 0.5; cursor: wait; }