/* ------------------------------------------------------------
   Explain-with-AI drawer — scoped CSS.
   Sits on the right edge, slides in. Sized 480px wide and resizable.
   When the drawer opens from inside AuditResolveModal, the modal closes
   itself and hands focus to the drawer (see AuditResolveModal.HandleExplainOpened).
   ------------------------------------------------------------ */

.explain-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: transparent; /* don't dim — the AuditResolveModal already has its own backdrop */
    z-index: 8400;
    pointer-events: none;
}

.explain-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    z-index: 8500;
    background: #FFFFFF;
    border-left: 1px solid var(--color-oyster-300);
    box-shadow: -4px 0 24px rgba(26, 16, 44, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.explain-drawer.is-open {
    transform: translateX(0);
}

.explain-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px 16px 24px;
    gap: 12px;
    border-bottom: 1px solid var(--color-oyster-300);
}

.explain-drawer-title-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.explain-drawer-eyebrow {
    display: flex;
    align-items: center;
    gap: 6px;
    font: 600 11px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.6px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.explain-drawer-eyebrow .material-icons {
    color: var(--color-primary);
}

/* WISEcode owl mark in the eyebrow — same /WISEcode-bug.svg used for AI chats.
   The source SVG is dark, so mask + background-color recolors it to the indigo
   eyebrow tint (filter can't hit an arbitrary hex cleanly). The owl is wide
   (193×100 ≈ 1.93:1), so the box keeps that aspect at ~13px tall. */
.explain-drawer-owl {
    width: 25px;
    height: 13px;
    flex-shrink: 0;
    background-color: var(--color-primary);
    -webkit-mask: url(/WISEcode-bug.svg) no-repeat center / contain;
    mask: url(/WISEcode-bug.svg) no-repeat center / contain;
}

.explain-drawer-admin-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 9999px;
    background: var(--color-indigo-100);
    color: var(--color-primary);
    font: 700 10px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.4px;
}

.explain-drawer-title {
    font: 700 19px/1.2 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-900);
    word-break: break-word;
}

.explain-drawer-subtitle {
    font: 500 12px/1.2 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-600);
    word-break: break-word;
}

.explain-drawer-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: var(--color-oyster-600);
}

.explain-drawer-close:hover {
    background: #FAFAFE;
}

.explain-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.explain-section-label {
    font: 700 10px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.6px;
    color: #A8A2B3;
    text-transform: uppercase;
}

/* -------- Context cards -------- */

.explain-context-card {
    border: 1px solid var(--color-oyster-300);
    border-radius: 8px;
    background: #FAFAFE;
    overflow: hidden;
}

.explain-context-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
}

.explain-context-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.explain-context-text {
    flex: 1;
    min-width: 0;
}

.explain-context-eyebrow {
    font: 600 11px/1.2 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.4px;
    color: var(--color-oyster-600);
    text-transform: uppercase;
}

.explain-context-detail {
    font: 500 12px/1.3 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-900);
    margin-top: 2px;
}

.explain-context-chevron {
    color: #A8A2B3;
    flex-shrink: 0;
}

.explain-context-card.is-expanded .explain-context-chevron {
    color: var(--color-primary);
}

.explain-context-body {
    border-top: 1px solid var(--color-oyster-300);
    background: #FFFFFF;
}

.explain-meta-strip {
    display: flex;
    gap: 16px;
    padding: 10px 16px;
    background: #FAFAFE;
    border-bottom: 1px solid #F0EDF6;
}

.explain-meta-strip > div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.explain-meta-k {
    font: 600 9px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.4px;
    color: #A8A2B3;
    text-transform: uppercase;
}

.explain-meta-v {
    font: 500 11px/1 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-900);
}

.explain-meta-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
}

.explain-raw-input {
    padding: 10px 16px;
    border-bottom: 1px solid #F0EDF6;
}

.explain-raw-input-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.explain-raw-input-lbl {
    font: 700 9px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.6px;
    color: #A8A2B3;
}

.explain-raw-input-mod {
    font: 700 9px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.4px;
    color: var(--color-warning-text);
    background: var(--color-warning-100);
    padding: 2px 8px;
    border-radius: 9999px;
}

.explain-raw-input-box {
    background: #FAFAFE;
    border: 1px solid var(--color-oyster-300);
    border-radius: 6px;
    padding: 8px 10px;
    font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-oyster-800);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}

.explain-context-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    background: #FAFAFE;
    border-top: 1px solid #F0EDF6;
    font: 10px/1 'DM Sans', system-ui, sans-serif;
    color: #A8A2B3;
}

.explain-json-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font: 600 11px/1 'DM Sans', system-ui, sans-serif;
    color: var(--color-primary);
    padding: 4px 6px;
    border-radius: 4px;
}

.explain-json-link:hover {
    background: #F1F0F7;
}

.explain-ai-runs {
    padding: 10px 16px;
}

.explain-ai-run-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-oyster-200);
    font: 11px/1 'DM Sans', system-ui, sans-serif;
}

.explain-ai-run-row:last-child {
    border-bottom: none;
}

.explain-ai-run-when { color: var(--color-oyster-500); flex-shrink: 0; min-width: 100px; }
.explain-ai-run-model { color: var(--color-oyster-900); flex: 1; min-width: 0; }
.explain-ai-run-tokens { color: var(--color-oyster-500); flex-shrink: 0; }

.explain-ai-run-link {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font: 600 11px/1 'DM Sans', system-ui, sans-serif;
    padding: 2px 6px;
    border-radius: 4px;
}

.explain-ai-run-link:hover {
    background: #F1F0F7;
}

/* -------- Messages -------- */

.explain-msg {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.explain-msg-user .explain-msg-bubble {
    align-self: flex-end;
    background: var(--color-primary);
    color: #FFFFFF;
    padding: 10px 14px;
    border-radius: 16px 16px 4px 16px;
    font: 500 13px/1.5 'DM Sans', system-ui, sans-serif;
    max-width: 90%;
}

.explain-msg-assistant .explain-msg-bubble {
    background: #F8F7FE;
    border: 1px solid #E8E5F4;
    padding: 14px 16px;
    border-radius: 10px;
    font: 13px/1.55 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-900);
}

.explain-msg-markdown p { margin: 0 0 10px 0; }
.explain-msg-markdown p:last-child { margin-bottom: 0; }
.explain-msg-markdown h1,
.explain-msg-markdown h2,
.explain-msg-markdown h3 {
    margin: 14px 0 6px 0;
    font-weight: 700;
}
.explain-msg-markdown h2:has(> .explain-suggested-action-marker) {
    background: #FFFFFF;
    border: 1px solid var(--color-primary);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--color-oyster-900);
    font: 700 12px/1 'DM Sans', system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 14px;
    margin-bottom: 6px;
}
.explain-msg-markdown h2 .explain-suggested-action-marker {
    display: none;
}

.explain-citation {
    color: var(--color-primary);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    cursor: pointer;
}

.explain-citation:hover {
    color: var(--color-indigo-600);
}

/* -------- Tool chips -------- */

.explain-tool-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.explain-tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: #F1F0F7;
    border: 1px solid var(--color-oyster-300);
    cursor: pointer;
    font: 600 11px/1 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-600);
}

.explain-tool-chip.is-running .material-icons {
    color: var(--color-primary);
    animation: explain-spin 1s linear infinite;
}

.explain-tool-chip.is-done .material-icons {
    color: var(--color-success-text);
}

.explain-tool-chip-meta {
    color: #A8A2B3;
    font-weight: 500;
}

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

/* -------- Follow-up chips -------- */

.explain-followups {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.explain-followups-label {
    font: 700 10px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.6px;
    color: #A8A2B3;
    text-transform: uppercase;
}

.explain-followups-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.explain-followup-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 9999px;
    background: #FFFFFF;
    border: 1px solid var(--color-oyster-300);
    cursor: pointer;
    font: 500 12px/1.2 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-900);
    text-align: left;
}

.explain-followup-chip:hover:not([disabled]) {
    background: #F8F7FE;
    border-color: var(--color-primary);
}

.explain-followup-chip[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.explain-followup-chip .material-icons {
    color: var(--color-primary);
}

/* -------- Composer -------- */

.explain-composer {
    padding: 16px 24px 20px 24px;
    border-top: 1px solid var(--color-oyster-300);
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.explain-composer-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-warning-100);
    border: 1px solid var(--color-warning-200);
    border-radius: 6px;
    font: 500 11px/1.3 'DM Sans', system-ui, sans-serif;
    color: var(--color-warning-text);
}

.explain-composer-notice.is-blocked {
    background: var(--color-danger-100);
    border-color: var(--color-danger-300);
    color: var(--color-danger-text);
}

.explain-composer-input-box {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--color-oyster-300);
    border-radius: 10px;
    background: #FFFFFF;
}

.explain-composer-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font: 13px/1.4 'DM Sans', system-ui, sans-serif;
    color: var(--color-oyster-900);
    background: transparent;
    max-height: 120px;
}

.explain-composer-input::placeholder {
    color: #A8A2B3;
}

.explain-composer-send {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #FFFFFF;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.explain-composer-send[disabled] {
    background: var(--color-indigo-200);
    cursor: not-allowed;
}

.explain-composer-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: 10px/1 'DM Sans', system-ui, sans-serif;
    color: #A8A2B3;
}

.explain-composer-footer-left {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* -------- Buttons -------- */

.explain-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 999px;
    background: var(--color-indigo-100);
    border: 1px solid var(--color-primary);
    cursor: pointer;
    font-family: var(--font-family-serif);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-primary);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 4px 12px rgba(37, 80, 124, 0.18);
}

.explain-pill-btn:hover {
    background: var(--color-indigo-100);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(37, 80, 124, 0.24);
}

.explain-pill-btn:focus,
.explain-pill-btn:active {
    background: var(--color-indigo-100);
}

.explain-pill-btn .material-icons {
    color: var(--color-primary);
    font-size: 16px !important;
}

.explain-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px rgba(26, 16, 44, 0.15);
    transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
    /* Keep icon button at the trailing edge of the audit row action cell so it
       lines up across every row regardless of what else sits in the cell. */
    margin-left: auto;
    flex-shrink: 0;
}

.explain-icon-btn:hover {
    background: var(--color-indigo-600);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(26, 16, 44, 0.25);
}

.explain-icon-btn .material-icons {
    color: #FFFFFF;
}

/* WISEcode owl mark (the same /WISEcode-bug.svg used as the AI-chat assistant
   avatar). The source SVG is dark, so recolor it white to read on the indigo
   button — mirrors ChatTranscript's .add-food-welcome-logo img treatment. The
   owl is wide (193×100), so contain it within the 28px round button. */
.explain-icon-btn .explain-icon-owl {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* -------- JSON overlay (above the drawer) -------- */

.explain-json-overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 16, 44, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.explain-json-overlay-modal {
    width: 480px;
    max-width: 95vw;
    max-height: 80vh;
    background: #FFFFFF;
    border: 1px solid var(--color-oyster-300);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(26, 16, 44, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.explain-json-overlay-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-oyster-300);
    gap: 12px;
}

.explain-json-overlay-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.explain-json-overlay-eyebrow {
    font: 700 10px/1 'DM Sans', system-ui, sans-serif;
    letter-spacing: 0.6px;
    color: var(--color-primary);
}

.explain-json-overlay-titletext {
    font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-oyster-900);
    word-break: break-all;
}

.explain-json-overlay-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.explain-json-overlay-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--color-indigo-100);
    color: var(--color-primary);
    border: none;
    cursor: pointer;
    font: 600 11px/1 'DM Sans', system-ui, sans-serif;
}

.explain-json-overlay-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #A8A2B3;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.explain-json-overlay-body {
    flex: 1;
    margin: 0;
    padding: 12px 16px;
    background: #FAFAFE;
    overflow: auto;
    font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-oyster-900);
    white-space: pre-wrap;
    word-break: break-word;
}

.explain-json-overlay-foot {
    padding: 10px 18px;
    border-top: 1px solid var(--color-oyster-300);
    font: 10px/1 'DM Sans', system-ui, sans-serif;
    color: #A8A2B3;
}

/* -------- Read-only ingredient tree — uses .ingredient-table styles from
   IngredientsVerification.razor.css. The .read-only-tree class hook lets us
   gate any future overrides specific to this context. -------- */

.read-only-tree thead th {
    background: #FAFAFE;
}

/* -------- Read-only parse tree — restated styles --------
   <ParsedIngredientRow> relies on table + tree-rail + match-badge CSS that
   lives in IngredientsVerification.razor.css (scoped to the Verify page).
   The Audit Queue's Explain drawer renders the same component but is
   outside that scope, so the rules below restate the visual contract
   under .explain-drawer so the tree renders cleanly inside the drawer.
   Mirrors what ParseAttestationModal does for the AddFoodChat
   attestation modal (see ParseAttestationModal.razor.css). */

.explain-drawer .ingredient-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    table-layout: fixed;
}

.explain-drawer .ingredient-table thead th {
    background: #FAFAFE;
    padding: 6px 10px;
    text-align: left;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-oyster-500);
    border-bottom: 1px solid var(--color-oyster-300);
}

.explain-drawer .ingredient-table tbody td {
    padding: 6px 10px;
    color: var(--color-oyster-700);
    border-bottom: 1px solid var(--color-oyster-200);
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explain-drawer .ingredient-table tbody tr:last-child td {
    border-bottom: none;
}

.explain-drawer .ingredient-table td:nth-child(3) { white-space: nowrap; }

/* Tree indent rails — mirrors IngredientsVerification.razor.css */
.explain-drawer .tree-cell { padding-left: 4px; }
.explain-drawer .tree-cell-inner {
    display: flex;
    align-items: center;
}
.explain-drawer .tree-cell-railed .tree-cell-inner {
    height: 100%;
}
.explain-drawer .tree-rail {
    display: inline-block;
    flex: 0 0 auto;
    width: 22px;
    align-self: stretch;
    position: relative;
}
.explain-drawer .tree-rail-continue::before,
.explain-drawer .tree-rail-branch::before,
.explain-drawer .tree-rail-lastbranch::before {
    content: '';
    position: absolute;
    left: 10px;
    width: 1.5px;
    background: var(--color-oyster-400);
}
.explain-drawer .tree-rail-continue::before,
.explain-drawer .tree-rail-branch::before { top: -8px; bottom: -9px; }
.explain-drawer .tree-rail-lastbranch::before { top: -8px; height: calc(50% + 8px); }
.explain-drawer .tree-rail-branch::after,
.explain-drawer .tree-rail-lastbranch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10px;
    width: 11px;
    height: 1.5px;
    background: var(--color-oyster-400);
    transform: translateY(-0.5px);
}

.explain-drawer .tree-name-root {
    font-weight: 600;
    color: var(--color-oyster-900);
    text-transform: capitalize;
}
.explain-drawer .tree-name-child {
    color: var(--color-oyster-700);
    text-transform: capitalize;
}

/* Depth-based row tinting (subtle) */
.explain-drawer .ingredient-table tr[data-depth] {
    background: hsl(220 14% calc(99% - min(var(--tree-depth, 0), 10) * 0.55%));
}

.explain-drawer .parser-norm-static { font-size: 0.72rem; }
.explain-drawer .parser-norm-td { font-size: 0.72rem; color: var(--color-oyster-500); }

/* Match badges */
.explain-drawer .match-cell {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.explain-drawer .code-interp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    white-space: nowrap;
}
.explain-drawer .code-badge-green   { background: var(--color-success-100); color: var(--color-success-text); }
.explain-drawer .code-badge-yellow  { background: var(--color-warning-100); color: var(--color-warning-text); }
.explain-drawer .code-badge-red     { background: var(--color-danger-100); color: var(--color-danger-text); }
.explain-drawer .code-badge-gray    { background: var(--color-oyster-200); color: var(--color-oyster-700); }
.explain-drawer .code-badge-audited { background: var(--color-indigo-100); color: var(--color-indigo-700); }

/* Three-column proportional layout inside the drawer.
   The Verify page uses 44/33/23 explicit <col> via <th width=%>. The drawer's
   narrower viewport benefits from a slightly tighter Match column. */
.explain-drawer .ingredient-table thead th:nth-child(1) { width: 48%; }
.explain-drawer .ingredient-table thead th:nth-child(2) { width: 34%; }
.explain-drawer .ingredient-table thead th:nth-child(3) { width: 18%; text-align: right; }
.explain-drawer .ingredient-table tbody td:nth-child(3) { text-align: right; }

/* Raw input <pre> should wrap so long ingredient lists don't overflow horizontally. */
.explain-drawer .explain-raw-input-box {
    white-space: pre-wrap;
    word-break: break-word;
}

/* -------- Typing indicator (busy state) --------
   Shown only while the AI is awaiting its first token; disappears as soon as
   TextDelta events start arriving. The dots themselves are the shared
   <ThinkingDots /> component; these rules only draw the avatar and bubble. */

.explain-typing-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.explain-typing-avatar {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.explain-typing-dots {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--color-oyster-100);
    border: 1px solid var(--color-oyster-300);
    border-radius: 16px 16px 16px 4px;
}

/* -------- Resize handle on left edge -------- */

.explain-drawer {
    /* Allow JS to set width inline; keep min/max so the user can't break it. */
    min-width: 360px;
    max-width: 90vw;
}

.explain-drawer-resize-handle {
    position: absolute;
    top: 0;
    left: -6px;
    width: 12px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 2;
}

.explain-drawer-resize-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 2px;
    height: 60px;
    background: var(--color-oyster-300);
    border-radius: 1px;
    transition: background 0.12s ease;
}

.explain-drawer-resize-handle:hover::before,
.explain-drawer-resize-handle.is-dragging::before {
    background: var(--color-primary);
}

body.explain-drawer-resizing {
    cursor: ew-resize !important;
    user-select: none !important;
}