/* Velvet Study v2 surfaces: editor modal, chips, menus, usage views, ledger filters, notes, fallback,
   appearance preferences, command palette. Loaded after ui.css. */

/* ---------- Telemetry states ---------- */
.telemetry-line .tl-warn, .strip-chip.tl-warn { color: #fbbf24; font-weight: 600; }
.telemetry-line .tl-bad { color: #f87171; font-weight: 700; }
.telemetry-line .tl-muted { color: var(--text-muted); font-style: italic; }
.telemetry-line.tl-state-failed { border-color: rgba(248, 113, 113, 0.45) !important; background: rgba(248, 113, 113, 0.07) !important; }
.telemetry-line.tl-state-offline { opacity: 0.85; }
body.hide-telemetry .tl-cost { display: none; }

/* ---------- Small shared widgets ---------- */
.edit-btn {
    background: none; border: 1px solid transparent; color: var(--text-muted); cursor: pointer; border-radius: 5px;
    padding: 0.05rem 0.35rem; font-size: 0.8rem; line-height: 1.4; font-family: inherit;
}
.edit-btn:hover { color: #fff; border-color: var(--border-light); background: #20202b; }
.chip {
    display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; padding: 0.1rem 0.5rem; border-radius: 999px;
    background: rgba(139, 92, 246, 0.14); border: 1px solid rgba(139, 92, 246, 0.35); color: #ddd6fe; font-size: 0.74rem; font-family: inherit;
}
.chip-static { cursor: default; }
button.chip-pick { cursor: pointer; }
button.chip-pick:hover, .chip-on { background: rgba(139, 92, 246, 0.32); border-color: var(--primary); color: #fff; }
.chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.chip-remove { background: none; border: none; color: inherit; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 0.1rem; opacity: 0.7; }
.chip-remove:hover { opacity: 1; color: #fca5a5; }
.chip-count { opacity: 0.65; font-size: 0.68rem; }
.chip-editor {
    display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; padding: 0.35rem 0.45rem; min-height: 2.3rem;
    background: #0f0f15; border: 1px solid var(--border-color); border-radius: 6px;
}
.chip-editor:focus-within { border-color: var(--primary); }
.chip-list { display: contents; }
.chip-input { flex: 1; min-width: 8rem; background: none; border: none; color: var(--text-main); font-family: inherit; font-size: 0.85rem; padding: 0.15rem 0.2rem; }
.chip-input:focus-visible { outline: none; }
.stars-input { display: flex; align-items: center; gap: 0.15rem; }
.star-btn { background: none; border: none; font-size: 1.5rem; color: #3f3f50; cursor: pointer; padding: 0 0.1rem; line-height: 1; }
.star-btn.on { color: var(--accent-gold); }
.star-btn:hover { color: #fde68a; }
.ledger-stars, .ledger-fav { color: var(--accent-gold); letter-spacing: 0.05em; }
.header-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
.header-tags[hidden] { display: none; }

/* ---------- Editor modal ---------- */
.editor-card { max-width: 560px; }
.editor-card.editor-lg { max-width: 860px; }
.editor-card.editor-sm { max-width: 420px; }
.editor-body { gap: 0.75rem; }
.editor-subtitle { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; }
.editor-help { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.25rem; display: block; }
.editor-error { color: #f87171; font-size: 0.82rem; min-height: 1.1em; }
.editor-quick { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.editor-check { width: 1rem; height: 1rem; accent-color: var(--primary); }
.editor-checkbox { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.5rem; }
.editor-checkbox .form-label { margin: 0; }
.editor-lg .editor-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; align-content: start; }
.editor-lg .editor-textarea, .editor-lg .editor-chips, .editor-lg .editor-subtitle, .editor-lg .editor-error { grid-column: 1 / -1; }
.editor-lg .editor-body .form-group { margin: 0; }
.dialog-message { white-space: pre-line; }
.dialog-option { display: flex; gap: 0.6rem; align-items: flex-start; cursor: pointer; font-size: 0.85rem; }
.dialog-option-label { display: block; font-weight: 600; }

/* ---------- Popup menu ---------- */
.popup-menu {
    position: fixed; z-index: 2000; min-width: 230px; max-width: min(340px, calc(100vw - 16px)); max-height: calc(100vh - 80px); overflow-y: auto;
    background: #1a1a24; border: 1px solid var(--border-light); border-radius: 8px; padding: 0.35rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.menu-item {
    display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; width: 100%; text-align: left; background: none; border: none;
    color: var(--text-main); padding: 0.4rem 0.6rem; border-radius: 5px; cursor: pointer; font-family: inherit; font-size: 0.82rem;
}
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: #2a2a3a; }
.menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.menu-hint { color: var(--text-muted); font-size: 0.7rem; white-space: nowrap; }
.menu-sep { height: 1px; background: var(--border-color); margin: 0.3rem 0; }
.menu-heading { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); padding: 0.3rem 0.6rem 0.15rem; }
.menu-options { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.2rem 0.6rem 0.3rem; }
.menu-opt { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: #d4d4d8; }
.menu-opt-check { justify-content: flex-start; }
.menu-select { width: auto; padding: 0.2rem 0.4rem; font-size: 0.75rem; }

/* ---------- Session strip + usage ---------- */
body.hide-strip .telemetry-footer { display: none; }
.telemetry-footer { flex-direction: column; gap: 0.25rem; }
.session-strip { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; align-items: center; font-size: 0.72rem; }
.strip-chip { white-space: nowrap; color: #c4c4cf; }
.strip-btn { margin-left: auto; background: none; border: 1px solid var(--border-color); border-radius: 5px; color: var(--text-muted); font-size: 0.7rem; padding: 0.1rem 0.45rem; cursor: pointer; font-family: inherit; }
.strip-btn:hover { color: #fff; border-color: var(--border-light); }
.usage-popover { width: min(420px, calc(100vw - 16px)); }
.usage-pop { padding: 0.4rem 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.usage-pop-title, .usage-section h3 { font-size: 0.82rem; font-weight: 700; color: var(--accent-gold); margin: 0; }
.usage-table-wrap { overflow-x: auto; }
.usage-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.usage-table th, .usage-table td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--border-color); text-align: left; font-weight: 400; }
.usage-table thead th { color: var(--text-muted); font-weight: 600; font-size: 0.7rem; }
.usage-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.usage-table .usage-total th, .usage-table .usage-total td { font-weight: 700; border-bottom: none; }
.usage-empty { color: var(--text-muted); font-style: italic; }
.usage-chart { margin: 0; color: var(--primary); display: flex; flex-direction: column; gap: 0.2rem; }
.usage-chart svg { max-width: 100%; height: auto; }
.usage-summary { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.78rem; color: #d4d4d8; }
.usage-pane { display: flex; flex-direction: column; gap: 1rem; }
.usage-pane-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.usage-pane-note { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }
.usage-section { display: flex; flex-direction: column; gap: 0.4rem; }
.dossier-session { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; padding: 0.55rem 0.8rem; background: #14141c; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.78rem; }

/* ---------- Facts + notes ---------- */
.fact-head { display: flex; align-items: center; gap: 0.35rem; }
.fact-head .fact-label { flex: 1; }
.fact-badge { font-size: 0.62rem; padding: 0 0.35rem; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--border-light); color: var(--text-muted); }
.fact-badge-manual { color: var(--accent-gold); border-color: rgba(251, 191, 36, 0.5); background: rgba(251, 191, 36, 0.1); }
.fact-manual { border-left: 2px solid var(--accent-gold); }
.fact-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.75rem; padding: 0.05rem 0.3rem; border-radius: 4px; font-family: inherit; }
.fact-btn:hover { background: #272733; color: #fff; }
.fact-add { align-self: flex-start; margin-top: 0.4rem; }
.notes-pane { display: flex; flex-direction: column; gap: 0.4rem; height: 100%; }
.notes-textarea { flex: 1; min-height: 12rem; resize: vertical; font-family: inherit; font-size: 0.85rem; line-height: 1.5; }
.notes-status { font-size: 0.72rem; color: var(--text-muted); min-height: 1em; }
.notes-status.err { color: #f87171; }
.meter-spark { margin-top: 0.15rem; color: var(--text-muted); line-height: 0; }
.meter-spark svg { display: block; max-width: 100%; }

/* ---------- Messages ---------- */
.msg-words { margin-left: auto; font-size: 0.7rem; color: var(--text-muted); opacity: 0.55; }
.message-wrapper:hover .msg-words { opacity: 1; }
.msg-copy { opacity: 0.7; }
.message-wrapper:hover .msg-copy { opacity: 1; }
body.hide-copy .msg-copy, body.hide-words .msg-words { display: none; }
.message-wrapper { max-width: var(--chat-max-width, 85%); }
.chat-bubble { font-size: calc(1.05rem * var(--chat-scale, 1)); }
.chat-bubble.role-player { font-size: calc(1rem * var(--chat-scale, 1)); }

/* ---------- Ledger ---------- */
.ledger-filters { display: flex; flex-direction: column; gap: 0.45rem; }
.ledger-filter-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ledger-filter-row .form-select { width: auto; padding: 0.3rem 0.5rem; font-size: 0.8rem; }
.ledger-fav-filter.active { border-color: var(--accent-gold); color: var(--accent-gold); }
.ledger-tag-filter, .ledger-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ledger-tags { margin: 0 0 0.4rem; }
.ledger-case-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; }
.ledger-case-actions-row { display: flex; gap: 0.4rem; justify-content: flex-end; }
.ledger-empty-actions { text-align: center; margin-top: 0.5rem; }
.ledger-more { align-self: center; margin: 0.25rem 0 0.5rem; }
.modal-card-ledger.drop-active { outline: 2px dashed var(--primary); outline-offset: -6px; }
.modal-card-ledger.drop-active::after {
    content: 'Drop a .velvet.json bundle to import it'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 15, 19, 0.82); color: #ddd6fe; font-weight: 700; font-size: 1.05rem; pointer-events: none; z-index: 5;
}
.modal-card-ledger { position: relative; }
.dossier-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.45rem 1rem; font-size: 0.82rem; }
.dossier-fact { display: flex; flex-direction: column; gap: 0.1rem; }
.dossier-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.6rem 1.2rem; }
.dossier-stat-head { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 0.2rem; }
.dossier-actions { flex-wrap: wrap; }

/* ---------- Settings additions ---------- */
.settings-subheading { font-size: 0.9rem; font-weight: 700; color: var(--accent-gold); margin: 0 0 0.5rem; }
.ai-fallback, .ai-config-general { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.5rem; }
.fallback-options { display: flex; flex-direction: column; gap: 0.35rem; margin-left: 1.7rem; max-width: 28rem; }
.fallback-options.is-off, .qa-fields.is-off { opacity: 0.5; }
.fallback-live { font-size: 0.78rem; color: var(--text-muted); padding: 0.4rem 0.6rem; border-radius: 6px; background: #14141c; border: 1px solid var(--border-color); }
.fallback-live.is-warn { color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }
.fallback-live.is-bad { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.inline-field { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: #d4d4d8; }
.inline-field .fi-num { width: 4.5rem; }
.qa-defaults { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.2rem; margin-top: 0.4rem; }
.qa-defaults .form-label { margin: 0; }
.scene-section { margin-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, 0.08); padding-top: 0.8rem; }
.scene-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.scene-section-title { font-weight: 600; color: var(--accent-gold); font-size: 0.85rem; }
.scene-section-note { font-size: 0.72rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.qa-fields { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; align-items: flex-start; }
.qa-hints, .qa-extra { flex: 1 1 100%; margin: 0; }
.appearance-pane { display: flex; flex-direction: column; gap: 0.9rem; max-width: 640px; }
.appearance-row { display: grid; grid-template-columns: 10rem 1fr; gap: 0.5rem 1rem; align-items: center; font-size: 0.85rem; }
.appearance-control { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.appearance-control .form-select { width: auto; }
.appearance-value { font-variant-numeric: tabular-nums; color: var(--text-muted); min-width: 3rem; }
.swatches { display: flex; gap: 0.5rem; }
.swatch { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.on { border-color: #fff; box-shadow: 0 0 0 2px var(--bg-dark), 0 0 0 4px rgba(255, 255, 255, 0.35); }

/* ---------- Command palette ---------- */
.palette-overlay { align-items: flex-start; padding-top: 12vh; }
.palette-card { max-width: 560px; max-height: 70vh; }
.palette-input { background: #11111a; border: none; border-bottom: 1px solid var(--border-color); color: var(--text-main); font-size: 1rem; padding: 0.9rem 1.1rem; font-family: inherit; }
.palette-input:focus-visible { outline: none; }
.palette-list { overflow-y: auto; padding: 0.35rem; }
.palette-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border-radius: 6px; cursor: pointer; font-size: 0.88rem; }
.palette-item.active { background: rgba(139, 92, 246, 0.22); }
.palette-label { flex: 1; }
.palette-group { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.palette-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ---------- Density / effects ---------- */
body.density-compact .messages-container { padding: 0.75rem; gap: 0.7rem; }
body.density-compact .chat-bubble { padding: 0.55rem 0.8rem; }
body.density-compact header { padding: 0.35rem 1rem; }
body.density-compact .tabs-bar { padding: 0.15rem 1rem; }
body.density-compact .customer-header-bar { padding: 0.35rem 1rem; }
body.density-compact .modal-body { padding: 0.85rem; gap: 0.7rem; }
body.density-compact .fact-card, body.density-compact .soft-note-card { padding: 0.45rem 0.6rem; }
body.reduce-fx *:not(.spinner-circle):not(.spinner-inline), body.reduce-fx *::before, body.reduce-fx *::after {
    animation: none !important; transition: none !important; box-shadow: none !important; backdrop-filter: none !important; text-shadow: none !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .editor-lg .editor-body { grid-template-columns: minmax(0, 1fr); }
    .ledger-case-card { flex-direction: column; align-items: stretch; }
    .ledger-case-actions { flex-direction: row; align-items: center; justify-content: space-between; }
    .appearance-row { grid-template-columns: 1fr; }
    .settings-nav-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .settings-nav-tabs .tab-btn { flex: none; }
    .usage-pane-head { flex-direction: column; }
    .palette-overlay { padding-top: 6vh; }
}

/* ---------- Phones: the mood portrait must not eat the whole message width ---------- */
@media (max-width: 700px) {
    .message-wrapper.role-assistant { max-width: 100%; gap: 0.5rem; }
    .chat-mood-avatar-col { width: 84px; }
    .chat-mood-img-wrapper { width: 84px; height: 84px; }
}

/* ---------- Quick actions switched off ---------- */
.qa-off-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding: 0.35rem 0.75rem; font-size: 0.78rem; color: var(--text-muted); }
.qa-off-hint .link-btn { background: none; border: none; padding: 0; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; }
.qa-off-hint .link-btn:hover { color: #fff; }

/* ---------- Segmented control (usage scope) ---------- */
.usage-pane-tools { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; flex: none; }
.seg { display: inline-flex; border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; }
.seg-btn { background: transparent; border: none; color: var(--text-muted); font: inherit; font-size: 0.75rem; padding: 0.3rem 0.7rem; cursor: pointer; }
.seg-btn + .seg-btn { border-left: 1px solid var(--border-color); }
.seg-btn.on { background: var(--primary); color: #fff; font-weight: 600; }
.seg-btn:disabled { opacity: 0.45; cursor: not-allowed; }