/* ═══════════════════════════════════════════════════════════════
   PROPHET AI 2 — design system "Oráculo"
   Fundo cinza-azulado · ciano para o acento · teal para telemetria
   Display: Spectral · UI: Instrument Sans · Dados: JetBrains Mono
   ═══════════════════════════════════════════════════════════════ */

:root {
    --font-ui: "Inter", system-ui, -apple-system, sans-serif;
    --font-display: "Inter", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;

    --sb-w: 288px;
    --chat-max: 848px;

    --ease: cubic-bezier(.22, .8, .36, 1);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg0: #0F1113;          /* fundo profundo */
    --bg1: #222529;          /* painéis */
    --bg2: #2A2D32;          /* elevações */
    --bg3: #33373D;          /* hover / inset */
    --line: #3D4148;
    --line-soft: #2C3035;

    --ink: #F0F4F8;          /* texto principal, off-white */
    --ink-dim: #A0AAB5;      /* texto secundário — contraste 8.5:1 sobre bg0 */
    --ink-faint: #7A808A;

    --accent: #4FA8B8;         /* acento primário — ciano dessaturado */
    --accent-hi: #6DC4D4;
    --accent-ink: #0A1A1F;
    --accent-dim: rgba(79, 168, 184, .14);

    --teal: #6fd3c7;         /* telemetria / links */
    --teal-dim: rgba(111, 211, 199, .13);

    --rose: #e57389;
    --rose-dim: rgba(229, 115, 137, .13);
    --ok: #8fd98f;
    --warn: #e5b95e;

    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 8px 30px rgba(0,0,0,.5);
    --shadow-3: 0 24px 70px rgba(0,0,0,.6);
    --scrim: rgba(13, 14, 16, .62);
    --code-bg: #14171A;
}

[data-theme="light"] {
    color-scheme: light;
    --bg0: #EFF1F3;
    --bg1: #F7F8FA;
    --bg2: #FFFFFF;
    --bg3: #E6E8EB;
    --line: #D2D5DA;
    --line-soft: #DEE0E4;

    --ink: #1A1C1E;
    --ink-dim: #5C6068;
    --ink-faint: #92979F;

    --accent: #4FA8B8;
    --accent-hi: #6DC4D4;
    --accent-ink: #FFFFFF;
    --accent-dim: rgba(79, 168, 184, .12);

    --teal: #0e7d74;
    --teal-dim: rgba(14, 125, 116, .10);

    --rose: #bb3b57;
    --rose-dim: rgba(187, 59, 87, .10);
    --ok: #2c7d3f;
    --warn: #98700e;

    --shadow-1: 0 1px 2px rgba(26, 28, 30, .08);
    --shadow-2: 0 8px 30px rgba(26, 28, 30, .12);
    --shadow-3: 0 24px 70px rgba(26, 28, 30, .16);
    --scrim: rgba(26, 28, 30, .40);
    --code-bg: #E6E8EB;
}

/* ── base ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--bg0);
    color: var(--ink);
    font: 400 14.5px/1.6 var(--font-ui);
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}
::selection { background: var(--accent-dim); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
kbd {
    font: 500 10.5px/1 var(--font-mono);
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 2px 5px 3px;
    background: var(--bg1);
}
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
.i { display: inline-flex; width: 16px; height: 16px; flex: none; }
.i svg { width: 100%; height: 100%; }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── layout raiz ──────────────────────────────────────────────── */
#app { display: flex; height: 100dvh; }
#main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

/* ═══════════════ SIDEBAR ═══════════════ */
#sidebar {
    width: var(--sb-w);
    flex: none;
    display: flex;
    flex-direction: column;
    background: #141617;
    border-right: 1px solid var(--line-soft);
    transition: margin-left .28s var(--ease);
    z-index: 40;
}
body.sb-hidden #sidebar { margin-left: calc(-1 * var(--sb-w)); }

.sb-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 16px 14px 12px;
}
.sb-brand-mark {
    width: 26px; height: 26px; border-radius: 8px; flex: none;
    background:
        radial-gradient(circle at 50% 42%, var(--accent-hi) 0 3px, transparent 3.5px),
        conic-gradient(from 210deg, var(--accent), #2D5A63 55%, var(--accent));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 0 14px rgba(79,168,184,.28);
}
.sb-brand-name {
    font: 600 19px/1 var(--font-display);
    letter-spacing: .02em;
}
.sb-brand-name em { font-style: normal; color: var(--accent); }
.sb-collapse { margin-left: auto; }

.sb-new {
    margin: 2px 12px 10px;
    display: flex; align-items: center; gap: 9px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    background: transparent;
    color: var(--accent);
    font-weight: 600;
    transition: border-color .15s, background .15s;
}
.sb-new:hover { border-color: var(--accent); background: var(--accent-dim); }
.sb-new kbd { margin-left: auto; }
.sb-new-icon { width: 16px; height: 16px; position: relative; flex: none; }
.sb-new-icon::before, .sb-new-icon::after {
    content: ""; position: absolute; inset: 0; margin: auto; background: var(--accent); border-radius: 2px;
}
.sb-new-icon::before { width: 2px; height: 14px; }
.sb-new-icon::after { width: 14px; height: 2px; }

.sb-search { padding: 0 12px 8px; }
.sb-search input {
    width: 100%;
    padding: 7px 11px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-soft);
    background: var(--bg0);
    font-size: 13px;
}
.sb-search input::placeholder { color: var(--ink-faint); }

#conv-list { flex: 1; overflow-y: auto; padding: 2px 8px 10px; }
.conv-group-label {
    font: 600 10.5px/1 var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--ink-faint);
    padding: 12px 8px 6px;
}
.conv-item {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    text-align: left;
    color: var(--ink-dim);
    transition: background .12s, color .12s;
}
.conv-item:hover { background: var(--bg2); color: var(--ink); }
.conv-item.active { background: var(--accent-dim); color: var(--ink); }
.conv-item.active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2.5px;
    border-radius: 2px; background: var(--accent);
}
.conv-item-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.conv-item-pin { color: var(--accent); width: 12px; height: 12px; flex: none; }
.conv-item-menu {
    opacity: 0; flex: none;
    width: 24px; height: 24px; border-radius: 6px;
    display: grid; place-items: center; color: var(--ink-faint);
}
.conv-item:hover .conv-item-menu, .conv-item-menu:focus-visible { opacity: 1; }
.conv-item-menu:hover { background: var(--bg3); color: var(--ink); }
.conv-empty { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 28px 12px; }

.sb-footer {
    border-top: 1px solid var(--line-soft);
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 8px;
}
#storage-meter { font: 500 10.5px/1.5 var(--font-mono); color: var(--ink-faint); }
#storage-meter .bar { height: 3px; border-radius: 2px; background: var(--bg3); overflow: hidden; margin-top: 4px; }
#storage-meter .bar > div { height: 100%; background: var(--teal); border-radius: 2px; }
.sb-footer-btn {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px; border-radius: var(--r-sm);
    color: var(--ink-dim); font-weight: 500;
}
.sb-footer-btn:hover { background: var(--bg2); color: var(--ink); }

#sb-scrim { display: none; }

/* ═══════════════ HEADER ═══════════════ */
#hdr {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--bg0) 82%, transparent);
    backdrop-filter: blur(10px);
    z-index: 20;
}
body:not(.sb-hidden) #sb-open { display: none; }

.ghost-btn {
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: var(--ink-dim);
    transition: background .12s, color .12s;
}
.ghost-btn:hover { background: var(--bg2); color: var(--ink); }
.ghost-btn[aria-pressed="true"] { color: var(--accent); background: var(--accent-dim); }

#conv-title-wrap { flex: 1; min-width: 0; }
#conv-title {
    width: 100%; max-width: 460px;
    background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
    padding: 5px 9px;
    font-weight: 600; font-size: 14.5px;
    overflow: hidden; text-overflow: ellipsis;
}
#conv-title:hover { border-color: var(--line-soft); }
#conv-title:focus { border-color: var(--accent); outline: none; background: var(--bg1); }

#persona-sel {
    background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
    padding: 5px 24px 5px 9px; font-size: 13px; font-weight: 500; color: var(--ink-dim);
    cursor: pointer; max-width: 150px; min-width: 0;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23a2a7b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 7px center; background-size: 10px;
}
#persona-sel:hover { border-color: var(--line-soft); color: var(--ink); }
#persona-sel:focus { border-color: var(--accent); outline: none; background-color: var(--bg1); }
#persona-sel option { background: var(--bg1); color: var(--ink); }

.hdr-right { display: flex; align-items: center; gap: 4px; }
.tts-progress-track { width: 54px; height: 3px; border-radius: 2px; background: var(--bg3); overflow: hidden; opacity: 0; transition: opacity .2s; }
.tts-progress-track.on { opacity: 1; }
#tts-progress { height: 100%; width: 0; background: var(--accent); transition: width .3s linear; }

.telemetry {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11.5px/1 var(--font-mono);
    color: var(--teal);
    background: var(--teal-dim);
    border-radius: 999px;
    padding: 6px 11px;
    white-space: nowrap;
}
.telemetry--soft { background: transparent; color: var(--ink-faint); padding: 6px 4px; }
.telemetry .i { width: 12px; height: 12px; }

/* ═══════════════ CHAT ═══════════════ */
#chat-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; }
#chat {
    max-width: var(--chat-max);
    margin: 0 auto;
    padding: 26px 22px 30px;
    display: flex; flex-direction: column; gap: 22px;
}

#scroll-down {
    position: absolute; right: 26px; bottom: 158px;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bg2); border: 1px solid var(--line);
    color: var(--ink-dim);
    box-shadow: var(--shadow-2);
    z-index: 15;
}
#scroll-down:hover { color: var(--accent); border-color: var(--accent); }

/* ── mensagem: usuário ── */
.msg { animation: msg-in .3s var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .msg { animation: none; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

.msg.user { display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 10px; }
.msg.user .msg-col { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.msg.user .bubble {
    max-width: 78%;
    background: var(--bg2);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
    padding: 11px 15px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.msg.user .bubble .att-inline { margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.msg .meta {
    display: flex; align-items: center; gap: 8px;
    font: 500 11px/1 var(--font-mono);
    color: var(--ink-faint);
    min-height: 24px;
    flex-wrap: wrap;
}
.msg.user .meta { justify-content: flex-end; padding-right: 2px; }
.msg .meta .actions { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.msg:hover .meta .actions, .msg .meta .actions:focus-within { opacity: 1; }

.meta-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 7px;
    border-radius: 6px;
    color: var(--ink-faint);
    font: 500 11px/1 var(--font-ui);
}
.meta-btn:hover { background: var(--bg2); color: var(--ink); }
.meta-btn .i { width: 13px; height: 13px; }
.meta-btn.danger:hover { color: var(--rose); background: var(--rose-dim); }

.branch-nav {
    display: inline-flex; align-items: center; gap: 2px;
    border: 1px solid var(--line-soft); border-radius: 999px;
    padding: 1px 4px;
    font: 600 10.5px/1 var(--font-mono);
    color: var(--accent);
    background: var(--bg1);
}
.branch-nav button { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-dim); }
.branch-nav button:hover:not(:disabled) { color: var(--accent); background: var(--accent-dim); }
.branch-nav button:disabled { opacity: .3; cursor: default; }

/* ── mensagem: modelo ── */
.msg.model { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; position: relative; }
.msg.model .msg-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.msg.model.is-error .msg-avatar { border-color: var(--rose); color: var(--rose); background: var(--rose-dim); }
.msg.model .meta { margin-bottom: 8px; }
.meta-model { color: var(--accent); font-weight: 600; letter-spacing: .02em; }
.meta-sep { color: var(--line); }

/* edição inline */
.edit-area { width: 100%; }
.edit-area textarea {
    width: 100%; min-height: 90px; resize: vertical;
    background: var(--bg1); border: 1px solid var(--accent); border-radius: var(--r-md);
    padding: 10px 12px; line-height: 1.55;
}
.edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }

/* ── raciocínio ── */
.reasoning {
    margin: 2px 0 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--bg1);
    overflow: hidden;
}
.reasoning > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    font: 500 11.5px/1 var(--font-mono);
    color: var(--ink-dim);
    user-select: none;
}
.reasoning > summary::-webkit-details-marker { display: none; }
.reasoning > summary .i { width: 13px; height: 13px; color: var(--accent); }
.reasoning > summary .chev { margin-left: auto; transition: transform .2s var(--ease); color: var(--ink-faint); }
.reasoning[open] > summary .chev { transform: rotate(180deg); }
.reasoning.live > summary .i { animation: pulse-soft 1.4s ease-in-out infinite; }
@keyframes pulse-soft { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.reasoning-body {
    padding: 4px 14px 12px;
    color: var(--ink-dim);
    font-size: 13px;
    line-height: 1.6;
    max-height: 300px; overflow-y: auto;
    border-top: 1px dashed var(--line-soft);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.tool-calls {
    margin: 2px 0 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    background: var(--bg1);
    overflow: hidden;
}
.tool-calls > summary {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    font: 500 11.5px/1 var(--font-ui);
    color: var(--ink-dim);
    user-select: none;
}
.tool-calls > summary::-webkit-details-marker { display: none; }
.tool-calls > summary .i { width: 13px; height: 13px; color: var(--accent); }
.tool-calls > summary .chev { margin-left: auto; transition: transform .2s var(--ease); color: var(--ink-faint); }
.tool-calls[open] > summary .chev { transform: rotate(180deg); }
.tool-calls-body {
    padding: 8px 14px 12px;
    border-top: 1px dashed var(--line-soft);
    display: flex; flex-direction: column; gap: 8px;
}
.tool-call-item {
    background: var(--bg0);
    border-radius: var(--r-sm);
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.tool-call-detail {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 12.5px;
    line-height: 1.5;
}
.tool-call-detail .tcl {
    color: var(--ink-faint);
    font-family: var(--font-ui);
    font-weight: 500;
    flex-shrink: 0;
}
.tool-call-detail code {
    font-family: var(--font-mono);
    background: rgba(79,168,184,.08);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--ink);
    word-break: break-all;
    font-size: 12px;
}
.tool-call-detail code.err { color: var(--rose); }

/* ── corpo markdown ── */
.content { overflow-wrap: anywhere; }
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }
.content h1, .content h2, .content h3, .content h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.25;
    margin: 1.5em 0 .55em;
    letter-spacing: .005em;
}
.content h1 { font-size: 1.55em; }
.content h2 { font-size: 1.32em; border-bottom: 1px solid var(--line-soft); padding-bottom: .25em; }
.content h3 { font-size: 1.14em; }
.content p { margin: .65em 0; }
.content ul, .content ol { padding-left: 1.5em; margin: .6em 0; }
.content li { margin: .28em 0; }
.content li::marker { color: var(--accent); }
.content blockquote {
    margin: .8em 0; padding: 6px 14px;
    border-left: 3px solid var(--accent);
    background: var(--accent-dim);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--ink-dim);
}
.content hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
.content table { border-collapse: collapse; margin: .9em 0; width: 100%; font-size: .93em; display: block; overflow-x: auto; }
.content th, .content td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; }
.content th { background: var(--bg2); font-weight: 600; font-family: var(--font-mono); font-size: .86em; }
.content img { max-width: 100%; border-radius: var(--r-sm); }
.content code:not(pre code) {
    font: 500 .86em var(--font-mono);
    background: var(--bg2);
    border: 1px solid var(--line-soft);
    padding: 2px 6px;
    border-radius: 6px;
    color: var(--teal);
}

/* blocos de código */
.codewrap { position: relative; margin: 1em 0; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--code-bg); }
.codewrap-head {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px 6px 14px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.06);
    font: 500 10.5px/1 var(--font-mono);
    color: #9aa0b5;
    text-transform: lowercase;
    letter-spacing: .06em;
}
[data-theme="light"] .codewrap-head { color: #aeb3c6; }
.codewrap-head .grow { flex: 1; }
.codewrap-head button {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 6px;
    color: inherit; font: inherit;
}
.codewrap-head button:hover { background: rgba(255,255,255,.08); color: #fff; }
.codewrap pre { margin: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 13px 16px !important; font-size: 12.8px !important; max-height: 560px; overflow: auto; }
.codewrap pre code { font-family: var(--font-mono) !important; }
.codewrap.wrapped pre { white-space: pre-wrap; word-break: break-word; }

/* cursor de streaming */
.stream-caret { display: inline-block; width: 8px; height: 1.05em; vertical-align: -0.18em; margin-left: 2px; background: var(--accent); border-radius: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* status de pipeline (busca / tradução / etc.) */
.pipeline { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.pipeline-step {
    display: flex; align-items: center; gap: 9px;
    font: 500 12px/1.4 var(--font-mono);
    color: var(--ink-dim);
}
.pipeline-step .i { width: 13px; height: 13px; color: var(--accent); flex: none; }
.pipeline-step.done { color: var(--ink-faint); }
.pipeline-step.done .i { color: var(--ok); }
.pipeline-step.err .i { color: var(--rose); }
.pipeline-step .spin { animation: rot 1s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.pipeline-sub { padding-left: 22px; color: var(--ink-faint); font-size: 11.5px; font-family: var(--font-mono); }

/* citações */
.cit {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 17px; height: 17px; padding: 0 4px;
    margin: 0 1px;
    border-radius: 5px;
    background: var(--teal-dim);
    color: var(--teal);
    font: 600 10.5px/1 var(--font-mono);
    vertical-align: .12em;
    text-decoration: none !important;
    transition: background .12s;
}
.cit:hover { background: var(--teal); color: var(--bg0); }

/* fontes */
.sources { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 10px; }
.sources-head {
    display: flex; align-items: center; gap: 8px;
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
    cursor: pointer; user-select: none;
    padding: 3px 0;
}
.sources-head:hover { color: var(--ink); }
.sources-head .chev { transition: transform .2s var(--ease); }
.sources.open .sources-head .chev { transform: rotate(180deg); }
.sources-grid { display: none; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-top: 10px; }
.sources.open .sources-grid { display: grid; }
.source-card {
    display: flex; gap: 9px;
    border: 1px solid var(--line-soft);
    background: var(--bg1);
    border-radius: var(--r-md);
    padding: 9px 11px;
    color: var(--ink);
    text-decoration: none !important;
    transition: border-color .13s, transform .13s;
    min-width: 0;
}
.source-card:hover { border-color: var(--teal); transform: translateY(-1px); }
.source-card .n {
    flex: none; width: 19px; height: 19px; border-radius: 6px;
    display: grid; place-items: center;
    background: var(--teal-dim); color: var(--teal);
    font: 600 10.5px/1 var(--font-mono);
}
.source-card .t { font-size: 12px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.source-card .u { font: 400 10.5px/1.3 var(--font-mono); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px; }
.source-card > div { min-width: 0; flex: 1; }
.source-card img { width: 42px; height: 42px; object-fit: cover; border-radius: 7px; flex: none; }

/* mapa deep research */
.dr-map { margin-top: 10px; border: 1px solid var(--line-soft); border-radius: var(--r-md); background: var(--bg1); overflow: hidden; }
.dr-map > summary { list-style: none; cursor: pointer; padding: 8px 12px; font: 600 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 8px; }
.dr-map > summary::-webkit-details-marker { display: none; }
.dr-map > summary:hover { color: var(--ink); }
.dr-map-body { padding: 4px 14px 12px; font: 400 12px/1.7 var(--font-mono); color: var(--ink-dim); overflow-x: auto; border-top: 1px dashed var(--line-soft); }
.dr-map-body .round { color: var(--accent); font-weight: 600; margin-top: 8px; }
.dr-map-body .q { color: var(--teal); }
.dr-map-body .s { color: var(--ink-faint); }

/* chips de queries */
.query-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.query-chip {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11px/1 var(--font-mono);
    color: var(--ink-dim);
    border: 1px solid var(--line-soft);
    background: var(--bg1);
    border-radius: 999px;
    padding: 4px 10px;
}
.query-chip .i { width: 11px; height: 11px; color: var(--teal); }

/* barra de tokens por mensagem */
.tokbar { display: inline-flex; align-items: center; gap: 7px; }
.tokbar .track { width: 74px; height: 4px; border-radius: 3px; overflow: hidden; display: flex; background: var(--bg3); }
.tokbar .track > i { height: 100%; }
.tokbar .lbl { font: 500 10.5px/1 var(--font-mono); color: var(--ink-faint); }

/* anexos no chat */
.att-chip {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--line-soft); background: var(--bg1);
    border-radius: var(--r-sm); padding: 5px 9px;
    font: 500 11.5px/1.3 var(--font-mono);
    max-width: 240px;
}
.att-chip .i { width: 13px; height: 13px; color: var(--accent); flex: none; }
.att-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-chip .sz { color: var(--ink-faint); flex: none; }
.att-chip img { width: 30px; height: 30px; border-radius: 6px; object-fit: cover; }
.att-chip button { color: var(--ink-faint); display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; flex: none; }
.att-chip button:hover { color: var(--rose); background: var(--rose-dim); }
.att-thumb { max-width: 180px; max-height: 140px; border-radius: var(--r-sm); border: 1px solid var(--line-soft); }

/* ═══════════════ WELCOME ═══════════════ */
.welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 9vh 12px 20px; gap: 6px; }
.welcome-seal {
    width: 62px; height: 62px; border-radius: 20px;
    background:
        radial-gradient(circle at 50% 42%, var(--accent-hi) 0 6px, transparent 7px),
        conic-gradient(from 210deg, var(--accent), #2A5059 55%, var(--accent));
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 0 44px rgba(79,168,184,.24);
    margin-bottom: 14px;
}
.welcome h1 { font: 600 34px/1.15 var(--font-display); margin: 0; letter-spacing: .01em; }
.welcome h1 em { font-style: normal; color: var(--accent); }
.welcome p { color: #A0AAB5; max-width: 520px; margin: 8px 0 0; }
.welcome-cta {
    margin-top: 22px;
    display: inline-flex; align-items: center; gap: 9px;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    border-radius: var(--r-md);
    padding: 11px 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    transition: transform .15s var(--ease), background .15s;
}
.welcome-cta:hover { transform: translateY(-1px); background: var(--accent-dim); }
.welcome-hint { margin-top: 14px; font: 400 12px/1.6 var(--font-mono); color: var(--ink-faint); }
.qp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 26px; width: 100%; max-width: 700px; }
.qp {
    text-align: left;
    border: 1px solid rgba(79, 168, 184, .15); border-radius: var(--r-md);
    background: var(--bg0);
    padding: 13px 15px;
    transition: border-color .13s, transform .13s;
}
.qp:hover { border-color: var(--accent); transform: translateY(-2px); }
.qp .qp-t { font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.qp .qp-t .i { color: var(--accent); width: 14px; height: 14px; }
.qp .qp-d { font-size: 12.5px; color: #A0AAB5; line-height: 1.45; }

/* ═══════════════ COMPOSER ═══════════════ */
#composer-zone {
    position: relative;
    padding: 4px 18px 10px;
    max-width: calc(var(--chat-max) + 36px);
    width: 100%;
    margin: 0 auto;
}
#composer {
    position: relative;
    background: var(--bg0);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    transition: border-color .15s;
}
#composer:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
#composer-foot { text-align: center; font: 400 10.5px/1 var(--font-mono); color: var(--ink-faint); margin: 8px 0 0; }

#attach-strip { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 12px 0; }

.composer-row { padding: 6px 14px 0; }
#u-in {
    width: 100%;
    background: transparent; border: 0; outline: none;
    resize: none;
    padding: 8px 2px;
    max-height: 42vh;
    line-height: 1.55;
    font-size: 14.5px;
}
#u-in::placeholder { color: var(--ink-faint); }

.composer-bar { display: flex; align-items: center; gap: 6px; padding: 4px 9px 9px; }
.composer-tools { display: flex; align-items: center; gap: 4px; position: relative; flex-wrap: wrap; }
.composer-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.tool-btn {
    width: 30px; height: 30px; display: grid; place-items: center;
    border-radius: var(--r-sm); color: var(--ink-dim);
}
.tool-btn:hover { background: var(--bg2); color: var(--ink); }
.tool-sep { width: 1px; height: 18px; background: var(--line-soft); margin: 0 3px; }

.pill-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 11px;
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    color: var(--ink-dim);
    font-weight: 600; font-size: 12.5px;
    transition: all .13s;
}
.pill-btn .i { width: 13px; height: 13px; }
.pill-btn:hover { border-color: var(--line); color: var(--ink); }
.pill-btn[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.pill-btn#deep-toggle[aria-pressed="true"] { background: var(--teal-dim); border-color: var(--teal); color: var(--teal); }

#model-chip {
    display: inline-flex; align-items: center; gap: 8px;
    height: 32px; padding: 0 6px 0 5px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-sm);
    max-width: 250px;
    font-weight: 600; font-size: 12.5px;
    color: var(--ink);
}
#model-chip:hover { border-color: var(--accent); }
#model-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#model-chip .i { width: 13px; height: 13px; color: var(--ink-faint); flex: none; }

.tier {
    flex: none;
    min-width: 24px; height: 20px; padding: 0 4px;
    display: inline-grid; place-items: center;
    border-radius: 6px;
    font: 700 10px/1 var(--font-mono);
    letter-spacing: .03em;
    background: var(--bg3); color: var(--ink-dim);
}
.tier[data-t="S+"] { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 10px rgba(79,168,184,.4); }
.tier[data-t="S"]  { background: var(--accent-dim); color: var(--accent); border: 1px solid var(--accent); }
.tier[data-t="A+"] { background: var(--teal-dim); color: var(--teal); }
.tier[data-t="A"]  { background: var(--teal-dim); color: var(--teal); opacity: .8; }

#snd, #stop-btn {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--r-md);
    background: var(--accent); color: var(--accent-ink);
    transition: transform .12s var(--ease), background .12s, box-shadow .12s;
    box-shadow: 0 3px 16px rgba(79,168,184,.4);
}
#snd:hover { transform: translateY(-1px); background: var(--accent-hi); box-shadow: 0 5px 22px rgba(79,168,184,.5); }
#snd:disabled { background: var(--bg3); color: var(--ink-faint); box-shadow: none; cursor: default; transform: none; }
#stop-btn { background: var(--rose); color: #fff; box-shadow: 0 3px 14px rgba(229,115,137,.3); }

#drop-hint {
    position: absolute; inset: -6px 12px 40px;
    border: 2px dashed var(--accent);
    border-radius: var(--r-lg);
    background: color-mix(in srgb, var(--bg0) 80%, transparent);
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: var(--accent); font-weight: 700;
    z-index: 30; pointer-events: none;
    backdrop-filter: blur(3px);
}

#slash-hint {
    position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px);
    background: var(--bg2); border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    z-index: 25;
}
.slash-item { display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; cursor: pointer; }
.slash-item:hover, .slash-item.active { background: var(--accent-dim); }
.slash-item code { font: 600 12px var(--font-mono); color: var(--accent); }
.slash-item span { font-size: 12.5px; color: var(--ink-dim); }

#engines-pop {
    position: absolute; bottom: calc(100% + 10px); left: 0;
    min-width: 250px;
    background: var(--bg2); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: var(--shadow-2);
    padding: 8px; z-index: 26;
}
.eng-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 9px; border-radius: var(--r-sm); cursor: pointer;
    font-size: 13px;
}
.eng-row:hover { background: var(--bg3); }
.eng-row input { accent-color: var(--accent); }
.eng-row .i { width: 14px; height: 14px; color: var(--ink-dim); }
.eng-head { font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); padding: 6px 9px 4px; }

/* ═══════════════ OVERLAYS ═══════════════ */
.overlay {
    position: fixed; inset: 0;
    background: var(--scrim);
    display: flex; align-items: flex-start; justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
    animation: fade .18s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.overlay[hidden] { display: none; }

/* palette */
#palette {
    margin-top: 11vh;
    width: min(620px, calc(100vw - 32px));
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    overflow: hidden;
    animation: pop .2s var(--ease);
}
@keyframes pop { from { transform: translateY(-8px) scale(.985); opacity: 0; } }
.palette-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.palette-head .i { color: var(--accent); }
.palette-head input { flex: 1; background: none; border: 0; outline: none; font-size: 15px; }
#palette-list { max-height: min(430px, 56vh); overflow-y: auto; padding: 6px; }
.pal-group { font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); padding: 11px 12px 5px; display: flex; align-items: center; gap: 8px; }
.pal-group .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.pal-item {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 11px; border-radius: var(--r-sm);
    text-align: left;
}
.pal-item:hover, .pal-item.active { background: var(--accent-dim); }
.pal-item.current { box-shadow: inset 0 0 0 1px var(--accent); }
.pal-item .nm { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-item .nm small { display: block; font: 400 10.5px/1.4 var(--font-mono); color: var(--ink-faint); font-weight: 400; }
.pal-meta { display: flex; align-items: center; gap: 8px; flex: none; font: 500 10.5px/1 var(--font-mono); color: var(--ink-faint); }
.swe { display: inline-flex; align-items: center; gap: 5px; }
.swe .track { width: 42px; height: 3.5px; border-radius: 2px; background: var(--bg3); overflow: hidden; }
.swe .track > i { display: block; height: 100%; background: var(--teal); }
.palette-foot { display: flex; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--line-soft); font: 400 11px/1 var(--font-mono); color: var(--ink-faint); }
.palette-foot span:last-child { margin-left: auto; }
.pal-empty { text-align: center; color: var(--ink-faint); padding: 30px 10px; font-size: 13px; }

/* settings */
#stg {
    margin: auto;
    width: min(880px, calc(100vw - 28px));
    height: min(660px, calc(100dvh - 48px));
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: pop .2s var(--ease);
}
.stg-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line-soft); }
.stg-head h2 { margin: 0; font: 600 20px/1 var(--font-display); }
.stg-head-right { display: flex; align-items: center; gap: 10px; }
.stg-body { flex: 1; display: flex; min-height: 0; }
.stg-tabs { width: 196px; flex: none; border-right: 1px solid var(--line-soft); padding: 12px 10px; display: flex; flex-direction: column; gap: 3px; overflow-y: auto; }
.stg-tab {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--r-sm);
    color: var(--ink-dim); font-weight: 600; font-size: 13px;
    text-align: left;
}
.stg-tab .i { width: 15px; height: 15px; }
.stg-tab:hover { background: var(--bg2); color: var(--ink); }
.stg-tab.active { background: var(--accent-dim); color: var(--accent); }
.stg-panels { flex: 1; overflow-y: auto; padding: 20px 26px 34px; }
.stg-panel { display: none; }
.stg-panel.active { display: block; }
.stg-panel > h3 { font: 600 17px/1.2 var(--font-display); margin: 0 0 2px; }
.stg-panel > .panel-desc { color: var(--ink-dim); font-size: 12.5px; margin: 0 0 18px; }

.stg-section { border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 14px; background: var(--bg0); }
.stg-section > h4 {
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 8px;
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent);
}
.stg-section > h4 .i { width: 13px; height: 13px; }
.stg-section > h4 .h-act { margin-left: auto; }

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; }
.set-row + .set-row { border-top: 1px dashed var(--line-soft); }
.set-info { min-width: 0; }
.set-lbl { font-weight: 600; font-size: 13.5px; }
.set-desc { color: var(--ink-faint); font-size: 11.5px; line-height: 1.45; margin-top: 1px; }
.set-ctrl { flex: none; display: flex; align-items: center; gap: 8px; }
.set-ctrl select, .set-ctrl input[type="number"], .set-ctrl input[type="text"], .set-ctrl input[type="password"] {
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    font-size: 13px;
    min-width: 120px;
}
.set-ctrl input[type="number"] { width: 96px; min-width: 0; font-family: var(--font-mono); }
.set-ctrl input.wide { width: 250px; }
.set-ctrl input[type="range"] { accent-color: var(--accent); width: 160px; }
.set-ctrl .range-val { font: 600 11.5px/1 var(--font-mono); color: var(--accent); min-width: 44px; text-align: right; }
.stg-panel textarea {
    width: 100%; min-height: 110px; resize: vertical;
    background: var(--bg1); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 9px 12px; line-height: 1.55; font-size: 13px;
}

/* switch */
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .knob { position: absolute; inset: 0; border-radius: 999px; background: var(--bg3); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.switch .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-faint); transition: transform .18s var(--ease), background .15s; }
.switch input:checked + .knob { background: var(--accent-dim); border-color: var(--accent); }
.switch input:checked + .knob::after { transform: translateX(16px); background: var(--accent); }
.switch input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: var(--bg2);
    font-weight: 600; font-size: 13px;
    transition: border-color .13s, background .13s, transform .12s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hi); }
.btn.danger { color: var(--rose); }
.btn.danger:hover { border-color: var(--rose); background: var(--rose-dim); }
.btn .i { width: 14px; height: 14px; }
.btn-grid { display: flex; flex-wrap: wrap; gap: 8px; }

.conn-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.conn-card {
    border: 1px solid var(--line-soft); border-radius: var(--r-sm);
    background: var(--bg1); padding: 8px 12px;
    font: 500 11.5px/1.5 var(--font-mono);
}
.conn-card b { color: var(--accent); font-weight: 600; }
.conn-card .k { color: var(--ink-faint); }

/* cockpit de teste */
#test-out { margin-top: 12px; display: none; }
#test-out.on { display: block; }
.test-table { width: 100%; border-collapse: collapse; font: 500 11.5px/1.5 var(--font-mono); }
.test-table td { padding: 5px 8px; border-bottom: 1px dashed var(--line-soft); }
.test-table .ok { color: var(--ok); }
.test-table .bad { color: var(--rose); }
.test-table .lat { color: var(--teal); text-align: right; }

/* balance display */
#ds-balance { margin-top: 8px; font: 600 13px/1.5 var(--font-mono); color: var(--teal); }

/* dialog */
#dlg {
    margin: auto;
    width: min(440px, calc(100vw - 32px));
    background: var(--bg1);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    padding: 20px;
    animation: pop .18s var(--ease);
}
#dlg-body { font-size: 14px; line-height: 1.6; }
#dlg-body h4 { margin: 0 0 8px; font: 600 16px/1.3 var(--font-display); display: flex; align-items: center; gap: 9px; }
#dlg-body h4 .i { color: var(--accent); }
#dlg-body .mono { font: 500 12px/1.7 var(--font-mono); color: var(--ink-dim); }
#dlg-body input {
    width: 100%; margin-top: 10px;
    background: var(--bg0); border: 1px solid var(--line); border-radius: var(--r-sm);
    padding: 8px 11px;
}
#dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* menu contextual */
.ctx-menu {
    position: fixed;
    min-width: 176px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    padding: 5px;
    z-index: 200;
    animation: pop .14s var(--ease);
}
.ctx-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 8px 11px;
    border-radius: var(--r-sm);
    font-size: 13px; font-weight: 500;
    text-align: left;
}
.ctx-item .i { width: 14px; height: 14px; color: var(--ink-dim); }
.ctx-item:hover { background: var(--bg3); }
.ctx-item.danger { color: var(--rose); }
.ctx-item.danger .i { color: var(--rose); }
.ctx-item.danger:hover { background: var(--rose-dim); }
.ctx-sep { height: 1px; background: var(--line-soft); margin: 4px 6px; }

/* toasts */
#toasts { position: fixed; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 300; }
.toast {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
    padding: 11px 15px;
    max-width: 360px;
    font-size: 13px; font-weight: 500;
    animation: toast-in .25s var(--ease);
}
.toast.err { border-left-color: var(--rose); }
.toast.ok { border-left-color: var(--ok); }
.toast .i { flex: none; color: var(--accent); }
.toast.err .i { color: var(--rose); }
.toast.ok .i { color: var(--ok); }
@keyframes toast-in { from { opacity: 0; transform: translateX(14px); } }
.toast.out { opacity: 0; transform: translateX(14px); transition: all .25s var(--ease); }

/* ═══════════════ RESPONSIVO ═══════════════ */
@media (max-width: 900px) {
    :root { --sb-w: 280px; }
    #sidebar { position: fixed; inset: 0 auto 0 0; box-shadow: var(--shadow-3); }
    body.sb-hidden #sidebar { margin-left: calc(-1 * var(--sb-w) - 20px); }
    body:not(.sb-hidden) #sb-scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: 35; }
    body:not(.sb-hidden) #sb-open { display: grid; }
    #chat { padding: 18px 14px 24px; }
    #composer-zone { padding: 4px 10px 8px; }
    .msg.user .bubble { max-width: 92%; }
    #conv-title { max-width: none; }
    .stg-tabs { width: 58px; }
    .stg-tab span { display: none; }
    .stg-tab { justify-content: center; }
    .stg-panels { padding: 16px 16px 30px; }
    #tk-hdr { display: none; }
    .composer-right #tk-estimate { display: none; }
    #model-chip { max-width: 150px; }
}

/* ═══════════════ NOVOS: avatar, data-sep, busca local, badge, salvo ═══════════════ */
.msg-avatar {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid; place-items: center;
    font: 600 13px/1 var(--font-mono);
    margin-top: 2px;
}
.user-avatar {
    background: var(--bg3);
    color: var(--ink-dim);
    border: 1px solid var(--line);
}
.model-avatar {
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.model-avatar.tier-bg-Sp { background: color-mix(in srgb, var(--accent) 30%, var(--bg1)); color: var(--accent); }
.model-avatar.tier-bg-S { background: color-mix(in srgb, var(--accent) 22%, var(--bg1)); }
.model-avatar.tier-bg-Ap { background: color-mix(in srgb, var(--teal) 22%, var(--bg1)); color: var(--teal); }
.model-avatar.tier-bg-A { background: color-mix(in srgb, var(--teal) 16%, var(--bg1)); color: var(--teal); }
.model-avatar.tier-bg-Bp,
.model-avatar.tier-bg-B { background: var(--bg3); color: var(--ink-dim); }
.msg-author { color: var(--ink-faint); font-weight: 600; }

/* separador de data */
.date-sep {
    display: flex; align-items: center; gap: 12px;
    margin: 8px 0 4px;
    color: var(--ink-faint);
    font: 600 11px/1 var(--font-mono);
    letter-spacing: .04em; text-transform: uppercase;
}
.date-sep::before, .date-sep::after {
    content: ""; flex: 1; height: 1px;
    background: linear-gradient(to right, transparent, var(--line), transparent);
}

/* barra de busca local (fixa, fora do scroll) */
#local-search-bar {
    position: fixed;
    top: 62px; right: 18px;
    z-index: 30;
    display: flex; align-items: center; gap: 6px;
    background: var(--bg-elevated, var(--bg2));
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px 8px;
    box-shadow: var(--shadow-2);
}
#local-search-bar .i { color: var(--ink-faint); flex: none; }
#local-search-bar #local-search-in { width: 180px; }
#local-search-count {
    font: 500 11px/1 var(--font-mono);
    color: var(--ink-faint);
    min-width: 38px; text-align: center;
}
.local-search-count { white-space: nowrap; }

/* layer de highlight da busca local */
.ls-layer {
    position: absolute; top: 0; left: 0;
    pointer-events: none;
    z-index: 5;
}
.ls-mark {
    position: absolute;
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 2px;
    transition: background .12s;
}
.ls-mark.current {
    background: color-mix(in srgb, var(--accent) 70%, transparent);
    outline: 1px solid var(--accent);
}

/* badge de motores ativos no botão engines */
.tool-btn .eng-badge,
#engines-btn .eng-badge {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--accent); color: var(--bg0);
    font: 700 9.5px/16px var(--font-mono);
    text-align: center;
    pointer-events: none;
}
#engines-btn { position: relative; }

/* indicador de salvamento */
.save-indicator {
    display: inline-flex; align-items: center; gap: 6px;
    font: 500 11px/1 var(--font-mono);
    color: var(--ink-faint);
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.save-indicator.saving,
.save-indicator.saved { opacity: 1; }
.save-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-faint);
    transition: background .25s;
}
.save-indicator.saving .save-dot { background: var(--accent); animation: pulse-dot 1s infinite; }
.save-indicator.saved .save-dot { background: var(--ok); }
.save-indicator.saving .save-txt { color: var(--accent); }
.save-indicator.saved .save-txt { color: var(--ok); }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* botão comparar no composer */
#compare-btn[aria-pressed="true"] {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-dim);
}

/* botão adicionar atalho na welcome */
.qp-add {
    margin-top: 14px;
    background: transparent; border: 1px dashed var(--line);
    color: var(--ink-faint);
    padding: 9px 16px; border-radius: 10px;
    font: 500 13px/1 var(--font-ui);
    display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer;
}
.qp-add:hover { border-color: var(--accent); color: var(--accent); }

/* botão desfazer dentro do toast */
.toast-undo {
    margin-left: 8px;
    background: var(--accent); color: var(--bg0);
    border: none; border-radius: 6px;
    padding: 3px 9px;
    font: 600 11px/1 var(--font-ui);
    cursor: pointer;
}
.toast-undo:hover { background: var(--accent-hi); }

/* linhas da lixeira no painel Sistema */
.trash-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
}
.trash-row .nm { font-weight: 600; }
.trash-row .ts { color: var(--ink-faint); font: 500 11px/1 var(--font-mono); }
.trash-row .msgs { color: var(--ink-faint); }
.trash-row .btn { margin-left: auto; padding: 4px 10px; font-size: 12px; }