/* Tokens de aparência (temas + fonte). Defaults = valores antigos exatos, então
o tema Padrão renderiza idêntico ao de antes. Temas os sobrescrevem em
css/themes.css (body.theme-X); família e tamanho em body.font-X e body.fs-X. */
:root {
--accent:#7c6ff7;
--accent-rgb:124,111,247;
--accent-hover:#5b4fd0;
--accent-deep:#6d5bd0;
--accent-light:#b3a9f5;
--accent-soft:#e3def5;
--accent-faint:#faf9ff;
--font-ui:'Inter','Segoe UI','PingFang SC','Microsoft YaHei','Noto Sans SC','Noto Sans',sans-serif;
--ui-scale:1;
}
/* ===== LOGIN SCREEN ===== */
#loginOverlay {
position:fixed; inset:0; z-index:2000;
background:linear-gradient(135deg,#13141f 0%,#1f2035 50%,#1a1b2b 100%);
display:flex; align-items:center; justify-content:center;
transition:opacity .4s ease;
}
#loginOverlay.hidden { opacity:0; pointer-events:none; }
/* Estado inicial de carregamento: mostra um splash neutro (spinner)
em vez de piscar o formulário de login enquanto a sessão é verificada. */
#loginOverlay.booting .auth-panel { display:none; }
#loginBoot { display:none; flex-direction:column; align-items:center; gap:16px; }
#loginOverlay.booting #loginBoot { display:flex; }
.login-boot-spinner {
width:44px; height:44px; border-radius:50%;
border:3px solid rgba(255,255,255,.16);
border-top-color:var(--accent);
animation:loginBootSpin .8s linear infinite;
}
@keyframes loginBootSpin { to { transform:rotate(360deg); } }
.login-boot-text { color:#8a8ca8; font-size:13px; letter-spacing:.3px; }
.auth-panel {
background:#fff; border-radius:24px; padding:44px 40px;
width:420px; max-width:95vw;
box-shadow:0 24px 80px rgba(0,0,0,.4);
position:relative; overflow:hidden;
}
body.dark-mode .auth-panel { background:#262733; color:#d0d0e0; }
.auth-logo {
text-align:center; margin-bottom:32px;
}
.auth-logo .auth-icon { font-size:40px; color:var(--accent); display:block; margin-bottom:8px; }
.auth-logo-img { height:34px; width:auto; display:block; margin:0 auto 4px; }
.auth-logo-dark { display:none; }
body.dark-mode .auth-logo-light { display:none; }
body.dark-mode .auth-logo-dark { display:block; }
.auth-logo h2 { font-size:22px; font-weight:700; color:#1a1a2e; margin:0; }
.auth-logo p { font-size:13px; color:#888; margin:4px 0 0; }
body.dark-mode .auth-logo h2 { color:#e0e0e0; }
.auth-step { display:none; }
.auth-step.active { display:block; }
.auth-label { font-size:12px; font-weight:600; color:#555; margin-bottom:5px; display:block; }
body.dark-mode .auth-label { color:#aaa; }
.auth-input-wrap { position:relative; margin-bottom:14px; }
.auth-input {
width:100%; padding:12px 16px; border:1.5px solid #e3e6f0;
border-radius:10px; font-size:14px; font-family:inherit;
outline:none; transition:border-color .2s; background:#fff; color:#1a1a2e;
box-sizing:border-box;
}
.auth-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); }
body.dark-mode .auth-input { background:#323342; border-color:#424354; color:#d0d0e0; }
body.dark-mode .auth-input:focus { border-color:var(--accent); }
.auth-input.error { border-color:#e74c3c; }
.pass-toggle {
position:absolute; right:12px; top:50%; transform:translateY(-50%);
background:none; border:none; cursor:pointer; color:#888; font-size:15px; padding:4px;
}
.auth-btn {
width:100%; background:var(--accent); color:white; border:none;
padding:14px; border-radius:12px; font-size:15px; font-weight:600;
cursor:pointer; transition:background .2s, transform .1s; margin-top:4px;
}
.auth-btn:hover { background:#6558e6; }
.auth-btn:active { transform:scale(.98); }
.auth-btn:disabled { background:#aaa; cursor:not-allowed; }
.auth-divider { text-align:center; font-size:13px; color:#bbb; margin:16px 0; position:relative; }
.auth-divider::before { content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:#eee; z-index:0; }
body.dark-mode .auth-divider::before { background:#373848; }
.auth-divider span { background:#fff; padding:0 12px; position:relative; z-index:1; }
body.dark-mode .auth-divider span { background:#262733; }
.auth-footer { text-align:center; font-size:13px; color:#777; margin-top:20px; }
.auth-footer a { color:var(--accent); cursor:pointer; font-weight:600; text-decoration:none; }
.auth-footer a:hover { text-decoration:underline; }
.auth-error {
background:#fef0f0; color:#c0392b; border:1px solid #fad7d7;
padding:10px 14px; border-radius:8px; font-size:13px;
margin-bottom:14px; display:none; align-items:center; gap:8px;
}
.auth-error.show { display:flex; }
.auth-success {
background:#e8f8f0; color:#27ae60; border:1px solid #b7e9cc;
padding:10px 14px; border-radius:8px; font-size:13px;
margin-bottom:14px; display:none; align-items:center; gap:8px;
}
.auth-success.show { display:flex; }
.code-wrap { text-align:center; margin:20px 0 24px; }
.code-wrap p { font-size:13px; color:#777; margin-bottom:16px; line-height:1.5; }
.code-wrap strong { color:#1a1a2e; }
body.dark-mode .code-wrap strong { color:#e0e0e0; }
.code-inputs { display:flex; gap:10px; justify-content:center; }
.code-input {
width:52px; height:60px; text-align:center; font-size:24px; font-weight:700;
border:2px solid #e3e6f0; border-radius:12px; outline:none;
transition:border-color .2s, box-shadow .2s; background:#fff; color:#1a1a2e;
font-family:inherit;
}
.code-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15); }
body.dark-mode .code-input { background:#323342; border-color:#424354; color:#d0d0e0; }
.code-display {
background:#f0eeff; border:1px dashed var(--accent); border-radius:12px;
padding:14px 20px; text-align:center; margin-bottom:16px;
}
.code-display .code-num { font-size:32px; font-weight:700; letter-spacing:8px; color:var(--accent); }
.code-display p { font-size:12px; color:#888; margin-top:4px; }
.auth-resend { background:none; border:none; color:var(--accent); font-size:13px; cursor:pointer; margin-top:10px; font-family:inherit; }
.auth-resend:hover { text-decoration:underline; }
.auth-back { background:none; border:none; color:#888; font-size:13px; cursor:pointer; display:flex; align-items:center; gap:6px; margin-bottom:16px; padding:0; font-family:inherit; }
.auth-back:hover { color:var(--accent); }
.pwd-strength { height:3px; border-radius:2px; margin-top:4px; transition:all .3s; }
.strength-weak { background:#e74c3c; width:33%; }
.strength-medium { background:#f39c12; width:66%; }
.strength-strong { background:#27ae60; width:100%; }
* { margin:0; padding:0; box-sizing:border-box; }
/* ===== CUSTOM SCROLLBAR (ThreadBoard theme) ===== */
* { scrollbar-width: thin; scrollbar-color: #c7c2ec transparent; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track {
background:transparent;
border-radius:20px;
}
::-webkit-scrollbar-thumb {
background:linear-gradient(180deg,#a99bf0,var(--accent));
border-radius:20px;
border:3px solid transparent;
background-clip:padding-box;
min-height:40px;
}
::-webkit-scrollbar-thumb:hover {
background:linear-gradient(180deg,#8b7bf0,#6558e6);
background-clip:padding-box;
border:3px solid transparent;
}
::-webkit-scrollbar-corner { background:transparent; }
/* Remove ALL scrollbar buttons (arrows) — cover every pseudo-variant */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment,
::-webkit-scrollbar-button:vertical:start:increment,
::-webkit-scrollbar-button:vertical:end:decrement,
::-webkit-scrollbar-button:horizontal:start:increment,
::-webkit-scrollbar-button:horizontal:end:decrement {
display:none !important;
width:0 !important;
height:0 !important;
background:transparent !important;
}
body.dark-mode * { scrollbar-color:#4a3f7a transparent; }
body.dark-mode ::-webkit-scrollbar-thumb {
background:linear-gradient(180deg,#5a4fcf,#3f3a6e);
background-clip:padding-box;
border:3px solid transparent;
}
body.dark-mode ::-webkit-scrollbar-thumb:hover {
background:linear-gradient(180deg,var(--accent),#5a4fcf);
background-clip:padding-box;
border:3px solid transparent;
}
/* Inter não cobre CJK nem cobre bem o cirílico: as fontes do sistema entram
depois dela, então pt/en/es continuam idênticos e ru/zh ficam legíveis. */
body { font-family:var(--font-ui); background:#f5f7fb; color:#1a1a2e; height:calc(100vh / var(--ui-scale)); display:flex; overflow:hidden; transition:background .3s,color .3s; zoom:var(--ui-scale); }
body.dark-mode { background:#1a1b24; color:#d0d0e0; }
body.dark-mode .topbar { background:#262733; border-bottom-color:#373848; box-shadow:0 1px 3px rgba(0,0,0,.3); }
body.dark-mode .topbar .welcome h2 { color:#e0e0e0; }
body.dark-mode .topbar .welcome span { color:#999; }
body.dark-mode .search { background:#323342; }
body.dark-mode .search input { color:#d0d0e0; }
body.dark-mode .sidebar { background:#13141c; border-right-color:#323345; }
body.dark-mode .sidebar .logo { color:#f0f0f0; border-bottom-color:#323345; }
body.dark-mode .nav-item { color:#a0a0b0; }
body.dark-mode .nav-item:hover, body.dark-mode .nav-item.active { background:var(--accent); color:#fff; }
body.dark-mode .section-title { color:#969bb2; }
body.dark-mode .thread-submenu { background:#171722; border-left-color:#323345; }
body.dark-mode .submenu-item { color:#a0a0b0; }
body.dark-mode .submenu-item:hover { background:var(--accent); color:#fff; }
body.dark-mode .toggle-btn { color:#a0a0b0; }
body.dark-mode .toggle-btn:hover { color:#fff; }
body.dark-mode .last-thread-summary { background:#262733; border-color:#373848; box-shadow:0 2px 8px rgba(0,0,0,.2); }
body.dark-mode .last-thread-summary .thread-title { color:#e0e0e0; }
body.dark-mode .last-thread-summary .thread-action { color:#aaa; }
body.dark-mode .card { background:#262733; border-color:#373848; box-shadow:0 4px 20px rgba(0,0,0,.2); }
body.dark-mode .card-title { color:#e0e0e0; }
body.dark-mode .card-desc { color:#aaa; }
body.dark-mode .card-actions svg.lucide { color:#9b9bac; }
body.dark-mode .tag { background:#323342; color:#c0c0d0; }
body.dark-mode .last-updated { color:#9b9bac; }
body.dark-mode .continue-btn { background:#323342; color:#e0e0e0; }
body.dark-mode .continue-btn:hover { background:var(--accent); color:#fff; }
body.dark-mode .rating svg.lucide { color:#4a4b5a; }
body.dark-mode .rating svg.lucide.active { color:#f9b934; }
body.dark-mode .right-panel { background:#22232e; border-left-color:#373848; }
body.dark-mode .right-panel .section-block h4 { color:#d0d0e0; }
body.dark-mode .attachments-section h4 { color:#d0d0e0; }
body.dark-mode .file-item { border-bottom-color:#373848; }
body.dark-mode .file-name { color:#d0d0e0; }
body.dark-mode .file-date { color:#9b9bac; }
body.dark-mode .file-actions svg.lucide { color:#9b9bac; }
body.dark-mode .file-actions svg.lucide:hover { color:var(--accent); }
body.dark-mode .file-actions .lucide-trash-2:hover { color:#e74c3c; }
body.dark-mode .drop-zone { background:#262733; border-color:#424354; }
body.dark-mode .drop-zone p { color:#aaa; }
body.dark-mode .drop-zone.dragover { background:#323343; border-color:var(--accent); }
body.dark-mode .prompt-item, body.dark-mode .preview-log-item, body.dark-mode .activity-log-item { color:#ccc; border-bottom-color:#373848; }
body.dark-mode .prompt-item .meta, body.dark-mode .preview-log-item .meta, body.dark-mode .activity-log-item .meta { color:#9b9bac; }
body.dark-mode .favorite-item { background:#2a2b18; border-left-color:#f9b934; }
body.dark-mode .favorite-item .summary { color:#e0e0c0; }
body.dark-mode .view-more-btn { color:var(--accent); }
body.dark-mode .chat-header .btn-voltar { background:#323342; color:#ccc; border-color:#424354; }
body.dark-mode .chat-actions button { background:#323342; color:#ccc; border-color:#424354; }
body.dark-mode .chat-input { background:#262733; border-color:#373848; }
body.dark-mode .chat-input input, body.dark-mode .chat-input textarea { color:#e0e0e0; background:transparent; }
body.dark-mode .chat-input input::placeholder, body.dark-mode .chat-input textarea::placeholder { color:#9b9bac; }
body.dark-mode .bubble.ai { background:#262733; border-color:#373848; box-shadow:0 2px 8px rgba(0,0,0,.3); color:#d0d0e0; }
body.dark-mode .bubble.user { background:var(--accent); color:#fff; }
body.dark-mode .code-block-wrapper { background:#323342; border-color:#424354; }
body.dark-mode .code-actions { background:#262733; border-bottom-color:#424354; }
body.dark-mode .code-action-btn { border-color:#525364; color:#ccc; }
body.dark-mode .code-action-btn:hover { background:#424354; border-color:var(--accent); }
body.dark-mode .code-block { background:#13141c; color:#c3d2e5; }
body.dark-mode .modal { background:#262733; color:#d0d0e0; }
body.dark-mode .modal h3 { color:#f0f0f0; }
body.dark-mode .modal p { color:#aaa; }
body.dark-mode .btn-cancel { background:#424354; color:#ddd; }
body.dark-mode .btn-cancel:hover { background:#525364; }
body.dark-mode .btn-download { background:var(--accent); }
body.dark-mode .restore-button { background:#27ae60; }
body.dark-mode .archive-button { background:#f39c12; }
body.dark-mode .archive-trigger { background:#f39c12; }
body.dark-mode .bubble-actions button { background:#323342; color:#ccc; border-color:#424354; }
body.dark-mode .bubble-actions button:hover { background:#424354; }
body.dark-mode .bubble-rating svg.lucide { color:#4a4b5a; }
body.dark-mode .bubble-rating svg.lucide.active { color:#f9b934; }
body.dark-mode .settings-btn { color:#aaa; }
body.dark-mode .settings-btn:hover { color:var(--accent); }
body.dark-mode .settings-modal input, body.dark-mode .settings-modal select { background:#323342; border-color:#424354; color:#e0e0e0; }
.topbar-right { display:flex; align-items:center; gap:30px; }
.theme-toggle { width:56px; height:28px; background:#e4e7ec; border-radius:14px; display:flex; align-items:center; padding:2px; cursor:pointer; transition:background .3s; position:relative; }
.theme-toggle svg.lucide { position:absolute; top:50%; transform:translateY(-50%); font-size:16px; transition:left .3s,opacity .3s; }
.theme-toggle .lucide-sun { left:6px; opacity:1; color:#f39c12; }
.theme-toggle .lucide-moon { right:6px; opacity:0; color:#f1c40f; }
body.dark-mode .theme-toggle { background:#5d5d5d; }
body.dark-mode .theme-toggle .lucide-sun { opacity:0; }
body.dark-mode .theme-toggle .lucide-moon { opacity:1; }
.sidebar { width:260px; background:#1b1c2b; color:#aeb9cf; display:flex; flex-direction:column; flex-shrink:0; transition:width .25s ease; overflow-y:auto; height:calc(100vh / var(--ui-scale)); }
.sidebar-spacer { flex:1 1 auto; min-height:8px; }
.sidebar-account { margin-top:auto; }
.sidebar.collapsed { width:72px; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .logo-text, .sidebar.collapsed .section-title, .sidebar.collapsed .thread-submenu, .sidebar.collapsed .submenu-arrow { display:none; }
.logo { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; min-height:72px; padding:12px 20px; font-weight:700; font-size:20px; color:white; border-bottom:1px solid #2a2b3d; }
.logo svg.lucide { color:var(--accent); font-size:24px; }
.logo-img-wrap { display:flex; align-items:center; gap:12px; }
.logo-img { height:26px; width:auto; display:block; }
.logo-mark { display:none; height:24px; }
/* Versão do app abaixo do logo (desktop apenas) */
.logo-versao {
font-size: 10px; font-weight: 500; color: #6b7189;
background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 4px;
white-space: nowrap;
}
body.dark-mode .logo-versao { color: #8a90a6; background: rgba(255,255,255,.06); }
.sidebar.collapsed .logo { padding:24px 0; justify-content:center; align-items:center; }
.sidebar.collapsed .logo-full { display:none; }
.sidebar.collapsed .logo-mark { display:block; }
.sidebar.collapsed .logo-versao { display:none; }
.toggle-btn { background:transparent; border:none; color:#aeb9cf; font-size:20px; padding:14px 20px; cursor:pointer; text-align:left; }
.toggle-btn:hover { color:white; }
.nav-section { margin-top:20px; }
.section-title { padding:0 20px 8px; font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#6b7189; }
.nav-item { display:flex; align-items:center; gap:12px; padding:12px 20px; color:#aeb9cf; font-size:15px; cursor:pointer; transition:.2s; }
/* Botão Admin: leve destaque roxo para diferenciar dos itens de conta comuns. */
.nav-item.nav-admin { color:#8f83f9; font-weight:600; }
.nav-item.nav-admin svg.lucide { color:var(--accent); }
.nav-item svg.lucide { width:22px; text-align:center; }
.nav-item:hover, .nav-item.active { background:var(--accent); color:white; }
.submenu-arrow { margin-left:auto; transition:transform .2s; }
.thread-submenu { background:#15161f; margin-left:20px; border-left:2px solid #2a2b3d; padding-left:8px; max-height:0; overflow:hidden; transition:max-height .3s ease; }
.thread-submenu.open { max-height:500px; }
.submenu-item { padding:8px 12px; font-size:13px; color:#aeb9cf; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-radius:6px; }
.submenu-item:hover { background:var(--accent); color:white; }
.right-wrapper { flex:1; display:flex; flex-direction:column; overflow:hidden; height:calc(100vh / var(--ui-scale)); }
/* position+z-index: sem stacking context próprio, o backdrop-filter dos temas
ativos prende o menu ⋮ (z-index:120) dentro da topbar e o chat (position:
relative, depois no DOM) pinta por cima dele. 140: acima do conteúdo e abaixo
do overlay de drawer (150), drawers (200), módulo Código (900), modais (1000). */
.topbar { position:relative; z-index:140; background:white; padding:16px 28px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #e3e6f0; box-shadow:0 1px 3px rgba(0,0,0,.02); flex-shrink:0; }
.welcome h2 { font-size:18px; font-weight:600; }
.welcome span { font-size:12px; color:#777; }
.search { display:flex; align-items:center; background:#f0f2f5; border-radius:30px; padding:12px 20px; gap:8px; flex:1; max-width:560px; margin:0 20px; border:1.5px solid transparent; transition:border-color .15s, box-shadow .15s; }
.search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12); background:#fff; }
.search input { border:none; background:transparent; outline:none; font-size:16px; flex:1; min-width:0; }
body.dark-mode .search:focus-within { background:#2b2c3c; }
.user { display:flex; align-items:center; gap:10px; }
.topbar .user img { width:38px; height:38px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); }
.user .name { font-weight:600; font-size:14px; }
.user .role { font-size:11px; color:#999; }
.layout-row { display:flex; flex:1; overflow:hidden; }
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.chat-preview-container { display:flex; flex:1; overflow:hidden; min-height:0; }
.chat-area { flex:1 1 auto; min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.dashboard { flex:1; padding:24px 28px; overflow-y:auto; display:flex; flex-direction:column; gap:20px; min-height:0; }
.dashboard.chat-mode { overflow:hidden; padding:0; gap:0; }
.dashboard.chat-mode #chatView.active { padding:8px 28px 24px; height:100%; overflow:hidden; display:flex; flex-direction:column; }
.view { display:none; flex-direction:column; flex:1; min-height:0; }
.view.active { display:flex; }
/* Nova Thread vira um bloco à esquerda, mesma altura da barra Continuar */
.resume-row { display:flex; align-items:stretch; gap:12px; margin-bottom:15px; }
.resume-row .last-thread-summary { flex:1; margin-bottom:0; min-width:0; }
.btn-new-thread-side { background:#00b5b5; color:white; border:none; border-radius:14px; padding:0 22px; font-weight:500; font-size:14px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; white-space:nowrap; transition:background .2s; }
.btn-new-thread-side svg.lucide { font-size:16px; }
.btn-new-thread-side:hover { background:#009999; }
.last-thread-summary { background:white; border-radius:14px; padding:18px 24px; border:1px solid #eef1f6; box-shadow:0 2px 8px rgba(0,0,0,.02); display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:15px; }
.last-thread-summary .thread-info { flex:1; min-width:200px; }
.last-thread-summary .thread-title { font-weight:600; font-size:16px; }
.last-thread-summary .thread-action { font-size:13px; color:#555; margin-top:4px; }
.last-thread-summary .btn-continue { background:var(--accent); color:white; border:none; padding:8px 18px; border-radius:8px; cursor:pointer; }
.last-thread-summary .btn-new-thread { background:#00b5b5; color:white; border:none; padding:10px 20px; border-radius:10px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:8px; transition:background .2s; margin-left:auto; }
.last-thread-summary .btn-new-thread:hover { background:#009999; }
.grid-header { display:flex; justify-content:space-between; align-items:center; }
.grid-header h3 { font-weight:600; font-size:20px; }
/* align-items:start — sem isto o grid estica TODOS os cards até a altura do
mais alto da linha, e a sobra vira um vazio antes do rodapé. Cada tile
agora tem a altura do próprio conteúdo. */
.thread-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:16px; margin-top:10px; align-items:start; }
@media (max-width:1100px){ .thread-grid { grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:12px; } }
@media (max-width:700px){ .thread-grid { grid-template-columns:1fr 1fr; gap:10px; } }
@media (max-width:480px){ .thread-grid { grid-template-columns:1fr; } }
.card { background:white; border-radius:16px; padding:16px; box-shadow:0 4px 20px rgba(0,0,0,.04); border:1px solid #f0f0f5; display:flex; flex-direction:column; transition:transform .15s; position:relative; z-index:1; overflow:visible; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.06); }
/* O gatilho de arquivar fica escondido e só aparece na intenção do usuário:
passar o mouse (desktop) ou pressionar o tile (mobile, classe .archive-peek
posta pelo mobile.js). Antes ele ficava sempre visível, poluindo o grid. */
.archive-trigger { position:absolute; top:-10px; right:-10px; width:20px; height:20px; background:#f39c12; border-radius:50%; z-index:0; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; }
.card:hover .archive-trigger,
.card.archive-peek .archive-trigger { opacity:1; pointer-events:auto; }
.archive-button { position:absolute; top:-22px; right:-22px; width:44px; height:44px; background:#f39c12; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:18px; cursor:pointer; z-index:3; box-shadow:0 4px 12px rgba(243,156,18,.4); transition:transform .3s cubic-bezier(.175,.885,.32,1.275),opacity .2s; transform:translateY(30px) scale(0); opacity:0; pointer-events:none; }
.card.archive-active .archive-trigger { opacity:0; pointer-events:none; }
.card.archive-active .archive-button { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
/* Excluir direto do tile, ao lado de arquivar — evita ter que arquivar antes só
para poder apagar. Menor e vermelho: a ação destrutiva não deve ter o mesmo
peso visual da reversível. Entra com um respiro depois do arquivar. */
.delete-button-tile { position:absolute; top:-18px; right:30px; width:36px; height:36px; background:#e74c3c; border-radius:50%; display:flex; align-items:center; justify-content:center; color:white; font-size:14px; cursor:pointer; z-index:3; box-shadow:0 4px 12px rgba(231,76,60,.4); transition:transform .3s cubic-bezier(.175,.885,.32,1.275) .06s,opacity .2s,background .15s; transform:translateY(30px) scale(0); opacity:0; pointer-events:none; }
.delete-button-tile:hover { background:#c0392b; }
.card.archive-active .delete-button-tile { transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
.restore-button { background:#27ae60; color:white; border:none; border-radius:8px; padding:6px 14px; font-size:13px; cursor:pointer; transition:.2s; }
.restore-button:hover { background:#219a52; }
.delete-button { background:#fdecec; color:#c0392b; border:1px solid #f5c6c6; border-radius:8px; padding:6px 11px; font-size:13px; cursor:pointer; transition:.2s; }
.delete-button:hover { background:#c0392b; color:#fff; border-color:#c0392b; }
body.dark-mode .delete-button { background:#3a2222; color:#e88; border-color:#5a3333; }
body.dark-mode .delete-button:hover { background:#c0392b; color:#fff; }
.card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.card-actions { flex-shrink:0; }
/* Título em DUAS linhas: virou textarea porque não quebra linha.
A altura é travada em 2 linhas (sem resize, sem barra de rolagem) e o
Enter é interceptado no HTML para não inserir quebra dentro do título. */
/* flex:1 + min-width:0 em vez do antigo width:70%: o título usa toda a
largura que sobra dos ícones, então cabe mais texto nas duas linhas antes
de o overflow:hidden começar a cortar. */
.card-title { font-weight:600; font-size:16px; line-height:1.3; height:2.6em; border:none; outline:none; background:transparent; flex:1; min-width:0; color:#1a1a2e; border-bottom:1px dashed transparent; transition:border .2s; resize:none; overflow:hidden; font-family:inherit; display:block; }
.card-title:focus { border-bottom:1px dashed var(--accent); }
.card-actions { display:flex; gap:8px; align-items:center; }
.card-actions svg.lucide { font-size:16px; cursor:pointer; transition:.2s; color:#aaa; }
.card-actions svg.lucide-heart { color:#ff4d6d; }
.card-actions svg.lucide-pin { color:var(--accent); }
.download-icon { position:relative; }
.download-icon svg.lucide { color:#aaa; }
.download-icon.downloaded svg.lucide { color:var(--accent); }
.tooltip { visibility:hidden; background:#333; color:#fff; text-align:center; border-radius:6px; padding:4px 8px; position:absolute; z-index:10; bottom:125%; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; opacity:0; transition:opacity .2s; }
.download-icon:hover .tooltip { visibility:visible; opacity:1; }
/* Descrição encolhida (era min-height:60px) para compensar a segunda linha do
título e o respiro novo da linha de meta — no saldo o tile fica mais baixo. */
.card-desc { font-size:13px; color:#555; margin:4px 0 8px; border:none; outline:none; background:transparent; resize:none; min-height:34px; height:auto; font-family:inherit; line-height:1.5; border-bottom:1px dashed transparent; transition:border .2s; overflow:hidden; }
.card-desc:focus { border-bottom:1px dashed var(--accent); }
.tags-container { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:2px 0 10px; }
.tag { background:#eef0fa; padding:2px 6px 2px 12px; border-radius:20px; font-size:11px; color:#4b4f6c; cursor:text; outline:none; transition:.2s; display:inline-flex; align-items:center; gap:4px; }
.tag:focus { background:#e0e3ff; color:#2e2b5c; }
.tag .delete-tag { display:none; width:16px; height:16px; background:#ff4d6d; color:white; border-radius:50%; font-size:10px; line-height:16px; text-align:center; cursor:pointer; margin-left:2px; }
.tag:hover .delete-tag { display:inline-block; }
.add-tag-btn { width:24px; height:24px; background:var(--accent); color:white; border-radius:50%; font-size:14px; line-height:24px; text-align:center; cursor:pointer; border:none; transition:.2s; flex-shrink:0; }
.add-tag-btn:hover { background:#6558e6; }
.last-updated { font-size:11px; color:#888; margin:0 0 3px; }
.msg-count-line { margin:0 0 10px; font-weight:600; }
/* O seletor de pasta subiu para cá: agora ele e o "Abrir" dividem a mesma
linha, alinhados pelo centro. margin-top fixo (era auto) porque o tile já
tem a altura do conteúdo — não há sobra para o "auto" empurrar. */
.card-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:12px; }
/* Nas arquivadas só existe um bloco no rodapé: o auto o empurra para a direita. */
.card-footer-acoes { display:flex; align-items:center; gap:8px; margin-left:auto; flex-shrink:0; }
/* O seletor cede espaço antes do botão: quem encolhe é o nome da pasta. */
.card-folder-select { font-size:11px; padding:4px 8px; border-radius:8px; border:1px solid #e3e6f0; background:transparent; cursor:pointer; color:#888; min-width:0; flex:0 1 auto; text-overflow:ellipsis; }
body.dark-mode .card-folder-select { border-color:#424354; color:#999; }
body.dark-mode .card-folder-select option { background:#262733; color:#ddd; }
.rating svg.lucide { color:#dfe3ee; cursor:pointer; transition:.2s; }
.rating svg.lucide.active { color:#f9b934; }
.continue-btn { background:#f0f2f5; border:none; padding:6px 14px; border-radius:8px; font-size:13px; cursor:pointer; color:#1a1a2e; transition:.2s; }
.continue-btn:hover { background:var(--accent); color:white; }
.empty-state { grid-column:1/-1; text-align:center; padding:56px 24px; color:#aaa; display:flex; flex-direction:column; align-items:center; }
.empty-state-icon { width:72px; height:72px; border-radius:20px; background:#f0eefb; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.empty-state-icon svg.lucide { font-size:30px; color:var(--accent); }
body.dark-mode .empty-state-icon { background:#323342; }
.empty-state-title { font-size:17px; font-weight:600; color:#333; margin-bottom:6px; }
body.dark-mode .empty-state-title { color:#e6e6ef; }
.empty-state p { font-size:14px; margin-bottom:24px; color:#888; max-width:340px; line-height:1.5; }
body.dark-mode .empty-state p { color:#9a9aa8; }
.empty-new-btn { background:var(--accent); color:white; border:none; padding:11px 22px; border-radius:10px; font-size:14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .2s; }
.empty-new-btn:hover { background:#6a5de0; }
.folder-new-thread-btn { background:#f0eefb; color:var(--accent-hover); border:1px solid #cfc9f5; padding:6px 12px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.folder-new-thread-btn:hover { background:#e6e2f9; border-color:var(--accent); }
body.dark-mode .folder-new-thread-btn { background:#323342; color:var(--accent-light); border-color:#4a4470; }
.empty-state svg.lucide { font-size:48px; margin-bottom:16px; display:block; color:#ddd; }
.empty-state p { font-size:15px; margin-bottom:20px; }
.modal-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.4); z-index:1000; align-items:center; justify-content:center; } /* 1000: acima do módulo Código (900), abaixo de toasts (1200) */
.modal-overlay.active { display:flex; }
.modal { background:white; padding:30px; border-radius:18px; max-width:500px; width:90%; box-shadow:0 20px 40px rgba(0,0,0,.2); text-align:center; max-height:80vh; overflow-y:auto; }
.modal.large { max-width:90vw; width:90vw; max-height:90vh; height:90vh; }
.modal h3 { margin-bottom:15px; }
.modal p { font-size:14px; color:#555; margin-bottom:25px; }
.modal-buttons { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* Botão de X no canto dos modais: área de clique generosa e visual discreto. */
.modal-x { background:transparent; border:none; cursor:pointer; padding:7px; border-radius:8px; color:#9aa0b4; display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.modal-x:hover { background:rgba(var(--accent-rgb),.12); color:#555; }
body.dark-mode .modal-x { color:#9aa0b4; }
body.dark-mode .modal-x:hover { background:rgba(255,255,255,.08); color:#fff; }
.modal-x svg.lucide { width:16px; height:16px; }
.btn { padding:10px 20px; border-radius:10px; border:none; cursor:pointer; font-weight:500; font-size:14px; }
.btn-download { background:var(--accent); color:white; } .btn-download:hover { background:#6558e6; }
.btn-archive { background:#fbf6ec; color:#c79a3a; border:1px solid #f0e6d0; } .btn-archive:hover { background:#c79a3a; color:#fff; }
.btn-import { background:#eef3f9; color:#4a7ab0; border:1px solid #d6e3f0; } .btn-import:hover { background:#4a7ab0; color:#fff; }
.btn-cancel { background:#eee; color:#333; } .btn-cancel:hover { background:#ddd; }
.btn-action-memorize { background:#f3f1fb; color:var(--accent-deep); border:1px solid var(--accent-soft); } .btn-action-memorize:hover { background:var(--accent-deep); color:#fff; }
.btn-action-identify { background:#eef7f1; color:#3d9970; border:1px solid #d8ecdf; } .btn-action-identify:hover { background:#3d9970; color:#fff; }
.btn-action-recreate { background:#fbf4ec; color:#c17a3a; border:1px solid #f0e2d2; } .btn-action-recreate:hover { background:#c17a3a; color:#fff; }
.btn-action-upscale { background:#eef3f9; color:#4a7ab0; border:1px solid #d6e3f0; } .btn-action-upscale:hover { background:#4a7ab0; color:#fff; }
.btn-action-transcribe { background:#edf6f5; color:#3a9b8e; border:1px solid #d3eae6; } .btn-action-transcribe:hover { background:#3a9b8e; color:#fff; }
body.dark-mode .btn-action-memorize { background:#2a2740; color:#a99bf0; border-color:#3a3654; } body.dark-mode .btn-action-memorize:hover { background:var(--accent-deep); color:#fff; }
body.dark-mode .btn-action-identify { background:#1f2e28; color:#6dcea5; border-color:#2d4039; } body.dark-mode .btn-action-identify:hover { background:#3d9970; color:#fff; }
body.dark-mode .btn-action-recreate { background:#312a20; color:#e0a86a; border-color:#43392c; } body.dark-mode .btn-action-recreate:hover { background:#c17a3a; color:#fff; }
body.dark-mode .btn-action-upscale { background:#1f2832; color:#7ba8d6; border-color:#2d3845; } body.dark-mode .btn-action-upscale:hover { background:#4a7ab0; color:#fff; }
body.dark-mode .btn-action-transcribe { background:#1d2b29; color:#5fc4b5; border-color:#2b3d3a; } body.dark-mode .btn-action-transcribe:hover { background:#3a9b8e; color:#fff; }
.btn-action-analyze { background:#f3f1fb; color:var(--accent-deep); border:1px solid var(--accent-soft); } .btn-action-analyze:hover { background:var(--accent-deep); color:#fff; }
.btn-action-kb { background:#efedff; color:#5b4bd5; border:1px solid #d9d4ff; } .btn-action-kb:hover { background:#6a5cf0; color:#fff; }
.btn-action-copy { background:#eef7f1; color:#3d9970; border:1px solid #d8ecdf; } .btn-action-copy:hover { background:#3d9970; color:#fff; }
.btn-action-store { background:#fef9ee; color:#b45309; border:1px solid #fde8c8; } .btn-action-store:hover { background:#b45309; color:#fff; }
body.dark-mode .btn-action-analyze { background:#2a2740; color:#a99bf0; border-color:#3a3654; } body.dark-mode .btn-action-analyze:hover { background:var(--accent-deep); color:#fff; }
body.dark-mode .btn-action-kb { background:#2b2650; color:var(--accent-light); border-color:#3d3670; } body.dark-mode .btn-action-kb:hover { background:#6a5cf0; color:#fff; }
body.dark-mode .btn-action-copy { background:#1f2e28; color:#6dcea5; border-color:#2d4039; } body.dark-mode .btn-action-copy:hover { background:#3d9970; color:#fff; }
body.dark-mode .btn-action-store { background:#2e2517; color:#fbbf24; border-color:#4a3a20; } body.dark-mode .btn-action-store:hover { background:#b45309; color:#fff; }
.thread-list-item { display:flex; align-items:center; justify-content:space-between; padding:12px; border-bottom:1px solid #f0f0f5; text-align:left; gap:10px; }
.thread-list-item .info { flex:1; }
.thread-list-item .title { font-weight:600; font-size:14px; }
.thread-list-item .desc { font-size:12px; color:#777; }
.chat-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:5px; }
/* Título e selinho empilhados: lado a lado eles empurravam os botões (e o
menu "⋮" no mobile) para fora da tela. O min-width:0 é essencial — sem ele
um flex item com input dentro se recusa a encolher abaixo do conteúdo. */
.chat-header-left { display:flex; flex-direction:column; align-items:flex-start; gap:5px; flex:1; min-width:0; }
.chat-title-input { font-weight:600; font-size:18px; border:none; outline:none; background:transparent; width:100%; min-width:0; border-bottom:1px dashed transparent; transition:border .2s; color:#1a1a2e; }
.chat-title-input:focus { border-bottom:1px dashed var(--accent); }
body.dark-mode .chat-title-input { color:#f0f0f0; }
body.dark-mode .chat-meta { color:#999; }
.chat-meta { font-size:12px; color:#888; margin-bottom:12px; display:flex; align-items:center; gap:6px; }
/* flex-shrink:0 garante que os botões (e o "⋮") nunca sejam espremidos para
fora: quem cede espaço é o título, que já tem min-width:0. */
.chat-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.chat-actions-mobile { flex-shrink:0; }
.chat-actions button { background:white; border:1px solid #e3e6f0; padding:8px 12px; border-radius:10px; cursor:pointer; font-size:13px; transition:.2s; display:flex; align-items:center; gap:4px; }
.chat-actions button:hover { background:#f0f2f5; }
.btn-voltar { background-color:#f1f1f1; color:#333; border:1px solid #ccc; font-weight:500; padding:8px 12px; }
.insight-btn { background:linear-gradient(135deg,var(--accent),#9d7bf5) !important; color:#fff !important; border:1px solid var(--accent) !important; font-weight:600; }
.insight-btn svg.lucide { color:#fff !important; }
.insight-btn:hover { background:linear-gradient(135deg,#6558e6,#8b6ae8) !important; color:#fff !important; }
.insight-panel { background:#f7f6ff; border:1px solid var(--accent-soft); border-radius:14px; padding:16px; margin:12px 0; }
body.dark-mode .insight-panel { background:#1f1d2e; border-color:#332f4a; }
.insight-panel h4 { font-size:14px; margin-bottom:12px; color:var(--accent-deep); display:flex; align-items:center; gap:8px; }
body.dark-mode .insight-panel h4 { color:#a99bf0; }
.insight-option { background:#fff; border:1px solid #e8e5f5; border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer; transition:.18s; display:flex; align-items:flex-start; gap:10px; }
.insight-option:hover { border-color:var(--accent); background:var(--accent-faint); transform:translateX(3px); box-shadow:0 2px 12px rgba(var(--accent-rgb),.12); }
body.dark-mode .insight-option { background:#262438; border-color:#393552; }
body.dark-mode .insight-option:hover { border-color:var(--accent); background:#2c2942; }
.insight-num { width:26px; height:26px; flex-shrink:0; background:var(--accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.insight-text { flex:1; }
.insight-text .it-title { font-weight:600; font-size:13px; color:#1a1a2e; margin-bottom:2px; }
body.dark-mode .insight-text .it-title { color:#e0e0e0; }
.insight-text .it-desc { font-size:12px; color:#777; line-height:1.4; }
body.dark-mode .insight-text .it-desc { color:#999; }
.insight-close { background:none; border:none; color:#aaa; cursor:pointer; font-size:13px; }
.insight-stop { margin-top:6px; padding:10px; text-align:center; font-size:13px; font-weight:600; color:#3d9970; background:#eef7f1; border:1px solid #d8ecdf; border-radius:10px; cursor:pointer; transition:.18s; display:flex; align-items:center; justify-content:center; gap:8px; }
.insight-stop:hover { background:#3d9970; color:#fff; border-color:#3d9970; }
body.dark-mode .insight-stop { background:#1f2e28; color:#6dcea5; border-color:#2d4039; }
body.dark-mode .insight-stop:hover { background:#3d9970; color:#fff; }
.folder-item { display:flex; align-items:center; gap:12px; padding:10px 20px; color:#aeb9cf; font-size:14px; cursor:pointer; transition:.2s; position:relative; }
.folder-item:hover { background:rgba(var(--accent-rgb),.12); }
.folder-item.active { background:var(--accent); color:#fff; }
.folder-item .folder-icon { width:22px; text-align:center; }
.folder-item .folder-count { margin-left:auto; font-size:11px; opacity:.7; background:rgba(255,255,255,.12); padding:1px 7px; border-radius:10px; }
.folder-item .folder-del { opacity:0; font-size:11px; margin-left:6px; transition:.2s; }
.folder-item:hover .folder-del { opacity:.6; }
.folder-item .folder-del:hover { opacity:1; color:#ff6b6b; }
.folder-item .folder-add { opacity:0; font-size:11px; margin-left:6px; transition:.2s; cursor:pointer; }
.folder-item:hover .folder-add { opacity:.6; }
.folder-item .folder-add:hover { opacity:1; color:var(--accent); }
.sidebar.collapsed .folder-item span:not(.folder-icon) { display:none; }
.icon-picker { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:10px 0; }
.icon-opt { aspect-ratio:1; display:flex; align-items:center; justify-content:center; border:1.5px solid #e3e6f0; border-radius:10px; cursor:pointer; font-size:18px; color:#888; transition:.15s; }
.icon-opt:hover { border-color:var(--accent); color:var(--accent); }
.icon-opt.selected { background:var(--accent); color:#fff; border-color:var(--accent); }
body.dark-mode .icon-opt { border-color:#424354; background:#323342; }
.folder-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; padding:2px 8px; border-radius:10px; cursor:pointer; }
/* Tags removidas da thread — ficam só no cartão da gaveta */
.thread-tags { display:none; }
.messages { flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:16px; padding-right:8px; }
.bubble-wrap { display:flex; flex-direction:column; max-width:75%; }
.bubble-wrap.ai-wrap { align-self:flex-start; align-items:flex-start; }
.bubble-wrap.user-wrap { align-self:flex-end; align-items:flex-end; }
.bubble-wrap.coop-wrap { max-width:85%; }
.bubble-wrap.coop-wrap .bubble.user { max-width:100%; }
.bubble-wrap .bubble { max-width:100%; }
.bubble-time { font-size:10px; color:#8a8a99; margin-top:3px; padding:0 4px; user-select:none; }
.bubble-time.ai-time { text-align:left; }
.bubble-time.user-time { text-align:right; }
body.dark-mode .bubble-time { color:#9a9aa8; }
.bubble { max-width:75%; padding:14px 18px; border-radius:14px; font-size:14px; line-height:1.6; position:relative; overflow-wrap:break-word; word-break:break-word; white-space:pre-wrap; }
.bubble.ai { background:white; border:1px solid #eaeef5; align-self:flex-start; box-shadow:0 2px 8px rgba(0,0,0,.03); white-space:normal; }
.bubble.user { background:var(--accent); color:white; align-self:flex-end; }
/* O glifo do Font Awesome não preenche a caixa de forma simétrica: a fonte
reserva espaço de ascendente/descendente que a tinta do ícone não usa.
Num botão só-de-ícone isso faz o desenho parecer alto ou baixo demais.
Dar ao botão um quadrado fixo e centrar o glifo dentro dele resolve. */
.fav-btn { position:absolute; top:8px; right:8px; background:none; border:none; cursor:pointer; font-size:18px; color:#ccc; transition:color .2s; line-height:1; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; }
/* Mesma ideia para ícone + texto lado a lado: sem isto, o navegador alinha as
CAIXAS pelo centro, mas as linhas de base do glifo e do texto continuam em
alturas diferentes, porque as duas caixas têm métricas distintas. */
button > svg.lucide,
.btn > svg.lucide {
display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.fav-btn:hover { color:#ff4d6d; }
.fav-btn.favorited { color:#ff4d6d; }
/* Favoritar prompt do usuário: coração branco (visível no balão roxo) */
.bubble.user { padding-right:34px; }
.fav-btn-user { color:rgba(255,255,255,.55); font-size:15px; }
.fav-btn-user:hover { color:#fff; }
.fav-btn-user.favorited { color:#fff; }
.bubble-actions { display:flex; gap:8px; margin-top:10px; align-items:center; justify-content:flex-start; flex-wrap:wrap; }
.bubble-actions button { background:#f0f2f5; border:1px solid #e3e6f0; border-radius:8px; padding:4px 10px; font-size:12px; cursor:pointer; display:flex; align-items:center; gap:4px; color:#4b5563; transition:.2s; }
.bubble-actions button:hover { background:#e4e7ec; }
.bubble-rating { display:flex; gap:3px; margin-left:auto; }
.bubble-rating svg.lucide { font-size:14px; color:#dfe3ee; cursor:pointer; transition:color .2s; }
.bubble-rating svg.lucide.active { color:#f9b934; }
.code-block-wrapper { margin-top:10px; border-radius:10px; overflow:hidden; border:1px solid #e0e0e0; background:#f9fafb; }
.code-actions { display:flex; gap:6px; padding:8px 12px; align-items:center; background:#ffffff; border-bottom:1px solid #e0e0e0; }
.code-action-btn { background:transparent; border:1px solid #d1d5db; border-radius:6px; padding:4px 10px; font-size:12px; cursor:pointer; color:#4b5563; display:flex; align-items:center; gap:4px; transition:background .15s,border-color .15s; }
.code-action-btn:hover { background:#f3f4f6; border-color:#9ca3af; }
.code-action-btn svg.lucide { font-size:12px; }
.code-block { background:#1e1e2d; color:#c3d2e5; padding:12px; margin:0; font-family:'Fira Code',monospace; font-size:13px; white-space:pre-wrap; overflow-x:auto; }
.code-block.collapsed { max-height:250px; overflow-y:auto; }
.code-actions-bottom { display:flex; align-items:center; gap:8px; padding:8px 10px; background:#181824; border-top:1px solid #2a2a3c; }
body.dark-mode .code-actions-bottom { background:#13141c; border-color:#2a2a37; }
.code-expand-btn { font-size:12px; padding:5px 12px; border-radius:8px; border:1px solid #3a3a52; background:transparent; color:#b3b3c8; cursor:pointer; display:inline-flex; align-items:center; gap:6px; }
.code-expand-btn:hover { border-color:var(--accent); color:#fff; }
.code-actions-bottom .preview-inline { margin-left:auto; background:var(--accent); color:white; border:none; }
.code-actions-bottom .preview-inline:hover { background:#6a5de0; }
/* Código chegando em streaming: cursor pulsante na faixa escura de baixo do
bloco, para o usuário saber que ainda está sendo escrito ali dentro. Fica na
caixa e sobrevive ao expandir/recolher. Sem texto de propósito: content de
CSS não passa pelo i18n, e palavra cravada em pt quebraria nos outros
idiomas. Reaproveita a keyframe `pulse` que já existe. */
.bubble.streaming .code-actions-bottom::before {
content:'▌'; order:-1; font-family:'Fira Code',monospace; font-size:13px; line-height:1;
color:#a99cff; background:rgba(var(--accent-rgb),.14); border:1px solid rgba(var(--accent-rgb),.35);
border-radius:999px; padding:3px 10px; animation:pulse 1s ease-in-out infinite;
}
/* Borda viva no bloco enquanto escreve, para o olho achar a caixa certa quando
a resposta tem mais de um bloco de código. */
.bubble.streaming .code-block-wrapper { border-color:var(--accent); }
.chat-input-area { display:flex; flex-direction:column; gap:6px; margin-top:10px; flex-shrink:0; }
.archive-btn-row { display:flex; justify-content:flex-end; }
.btn-archive-thread { background-color:#f39c12; color:white; border:none; font-weight:600; padding:8px 12px; border-radius:8px; display:flex; align-items:center; gap:4px; cursor:pointer; font-size:13px; transition:.2s; }
.btn-archive-thread:hover { background-color:#e08e0b; }
.btn-archive-thread.disabled { opacity:.8; cursor:not-allowed; }
#btnArchiveInChat.disabled { opacity:.5; cursor:not-allowed; }
.chat-input { display:flex; flex-wrap:wrap; gap:10px; align-items:center; background:white; padding:12px; border-radius:14px; border:1px solid #e3e6f0; }
.pending-attach-row { display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.pending-chip {
display:flex; align-items:center; gap:8px; background:#f4f5fa; border:1px solid #e3e6f0;
border-radius:10px; padding:6px 8px; max-width:240px; cursor:pointer; transition:.15s;
}
.pending-chip:hover { background:#eef0fa; border-color:#c7c2ec; }
body.dark-mode .pending-chip { background:#323342; border-color:#424354; }
body.dark-mode .pending-chip:hover { background:#3b3c52; }
.pending-chip .pc-thumb { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.pending-chip .pc-info { display:flex; flex-direction:column; min-width:0; }
.pending-chip .pc-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.pending-chip .pc-fmt { font-size:10px; color:#999; }
.pending-chip .pc-fid { font-size:10px; color:var(--accent); font-family:ui-monospace,monospace; }
.pending-chip .pc-remove { background:none; border:none; color:#aaa; cursor:pointer; font-size:12px; padding:2px 4px; border-radius:4px; flex-shrink:0; }
.pending-chip .pc-remove:hover { color:#e74c3c; background:rgba(231,76,60,.1); }
.chat-input input, .chat-input textarea { flex:1; border:none; outline:none; font-size:14px; background:transparent; color:inherit; font-family:inherit; resize:none; line-height:1.5; padding:6px 0; max-height:200px; }
.chat-input textarea { overflow-y:hidden; }
/* Highlight backdrop that mirrors the textarea and colors FID tokens */
.prompt-input-wrap { position:relative; flex:1; min-width:0; display:flex; align-items:stretch; cursor:text; }
.prompt-input-wrap textarea { position:relative; z-index:2; width:100%; background:transparent; }
.prompt-highlight {
position:absolute; inset:0; z-index:1; pointer-events:none;
font-size:14px; font-family:inherit; line-height:1.5; padding:6px 0;
white-space:pre-wrap; word-break:break-word; overflow:hidden;
color:transparent;
}
.prompt-highlight .fid-token {
background:rgba(var(--accent-rgb),.22); color:transparent; border-radius:4px;
box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35);
}
body.dark-mode .prompt-highlight .fid-token { background:rgba(var(--accent-rgb),.32); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5); }
.chat-input .preview-btn, .chat-input .coop-suggest-btn { align-self:flex-end; }
.chat-input .send { background:#00b5b5; color:white; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; flex-shrink:0; align-self:flex-end; }
.chat-input .send:disabled { background:#aaa; cursor:not-allowed; }
.provider-bar { display:flex; align-items:center; gap:8px; padding:0 0 6px 4px; }
/* Separador de linha da provider-bar: só atua no painel recolhido do mobile */
.provider-bar-break { display:none; }
/* Botão que recolhe a provider-bar (só aparece no mobile, via .mobile-only) */
.provider-bar-toggle {
width:36px; height:36px; border-radius:10px; border:1px solid #e3e6f0;
background:#fff; color:#555; cursor:pointer; font-size:15px; margin:0 0 6px 0;
align-items:center; justify-content:center; flex-shrink:0; transition:.15s;
}
.provider-bar-toggle:active { background:#f0eefb; }
.chat-input-area.provider-open .provider-bar-toggle { background:var(--accent); color:#fff; border-color:var(--accent); }
body.dark-mode .provider-bar-toggle { background:#323342; border-color:#424354; color:#ccc; }
.provider-bar-label { font-size:12px; font-weight:600; color:#888; }
.provider-select { font-size:12px; padding:3px 8px; border-radius:8px; border:1px solid #e3e6f0; background:white; cursor:pointer; color:#333; max-width:200px; outline:none; }
body.dark-mode .provider-select { background:#323342; border-color:#424354; color:#ddd; }
.provider-select:focus { border-color:var(--accent); }
#modeSelector { font-weight:600; border-color:#cfc9f5; color:var(--accent-hover); }
body.dark-mode #modeSelector { border-color:#4a4470; color:var(--accent-light); }
#modeSelector:focus { border-color:var(--accent); }
/* Chip-resumo da IA + popover com os controles (modo/IA/modelo/effort/estrutura).
A barra mostra só o resumo; tudo o mais abre no popover acima do chip. */
.ai-config-wrap { position:relative; }
.ai-config-chip {
display:inline-flex; align-items:center; gap:6px;
font-size:12px; font-weight:600; padding:5px 12px; border-radius:999px;
border:1px solid #cfc9f5; background:#f7f6fc; color:var(--accent-hover);
cursor:pointer; transition:.15s; white-space:nowrap;
}
.ai-config-chip:hover { border-color:var(--accent); }
.ai-config-chip svg.lucide { width:14px; height:14px; }
/* 420px: cabe o resumo completo com Estrutura ligada
("Texto · DeepSeek · deepseek-v4-flash · High · Estrutura"); o ellipsis
só atua em modelos com nomes extremos. */
.ai-config-chip #aiConfigSummary { max-width:420px; overflow:hidden; text-overflow:ellipsis; }
body.dark-mode .ai-config-chip { background:#323342; border-color:#4a4470; color:var(--accent-light); }
.ai-config-popover {
position:absolute; bottom:calc(100% + 8px); left:0; z-index:40;
min-width:264px; padding:10px;
display:flex; flex-direction:column; gap:8px;
/* Contraste com o fundo da página: borda mais escura + sombra em duas
camadas (profundidade + contorno) para destacar o popover do fundo. */
background:#fff; border:1px solid #c9cfe3; border-radius:12px;
box-shadow:0 12px 32px rgba(26,26,60,.22), 0 2px 8px rgba(26,26,60,.12);
}
.ai-config-popover[hidden] { display:none; }
body.dark-mode .ai-config-popover { background:#2e3040; border-color:#52556e; box-shadow:0 12px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.35); }
.ai-cfg-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:600; color:#666; margin:0; }
body.dark-mode .ai-cfg-row { color:#9a9aa8; }
.ai-cfg-row > span { flex-shrink:0; }
.ai-cfg-row .provider-select { flex:1; min-width:0; max-width:none; }
.chat-gen-img { max-width:420px; }
.chat-gen-img img { display:block; border:0.5px solid #e3e6f0; }
body.dark-mode .chat-gen-img img { border-color:#424354; }
.provider-bar-model { font-size:11px; color:#aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.model-checkbox-list { max-height:260px; overflow-y:auto; border:1px solid #e3e6f0; border-radius:10px; padding:4px; }
.model-checkbox-label { display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:8px; cursor:pointer; transition:.1s; margin-bottom:2px; }
.model-checkbox-label:hover { background:#f0f2f5; }
.model-checkbox-label.selected { background:#f0eeff; }
body.dark-mode .model-checkbox-label:hover { background:#323342; }
body.dark-mode .model-checkbox-label.selected { background:#2c2942; }
.model-checkbox-label input[type="checkbox"] { accent-color:var(--accent); flex-shrink:0; }
.model-checkbox-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.model-checkbox-name { font-size:13px; font-weight:500; }
.model-checkbox-id { font-size:10px; color:#aaa; }
.model-badge-free { font-size:10px; background:#e8f8f0; color:#27ae60; padding:1px 6px; border-radius:8px; font-weight:600; white-space:nowrap; }
.model-badge-paid { font-size:10px; background:#fef9e7; color:#c79a3a; padding:1px 6px; border-radius:8px; font-weight:600; white-space:nowrap; }
body.dark-mode .model-badge-free { background:#1a3a2a; color:#4ade80; }
body.dark-mode .model-badge-paid { background:#2a2810; color:#fbbf24; }
.model-sep { height:1px; background:#e3e6f0; margin:4px 8px; }
.model-chips { display:flex; flex-wrap:wrap; gap:4px; }
.model-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; background:#eef0fa; color:#4b4f6c; padding:3px 8px; border-radius:12px; border:1px solid #d8dcef; }
.model-chip svg.lucide { cursor:pointer; font-size:10px; color:#888; }
.model-chip svg.lucide:hover { color:#e74c3c; }
body.dark-mode .model-chip { background:#323342; border-color:#424354; color:#ddd; }
.model-select { max-width:280px; }
.provider-card { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border:1px solid #e3e6f0; border-radius:10px; margin-bottom:6px; background:white; transition:.15s; }
.provider-card:hover { border-color:#c7c2ec; background:var(--accent-faint); }
body.dark-mode .provider-card { background:#323342; border-color:#424354; }
body.dark-mode .provider-card:hover { border-color:var(--accent); background:#2c2942; }
.provider-card-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.provider-card-icon { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.provider-card-info { min-width:0; }
.provider-card-name { font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; }
.provider-card-meta { font-size:11px; color:#888; display:flex; align-items:center; gap:4px; margin-top:2px; }
.provider-default-badge { font-size:10px; background:#e8f8f0; color:#27ae60; padding:1px 7px; border-radius:10px; font-weight:600; }
body.dark-mode .provider-default-badge { background:#1a3a2a; color:#4ade80; }
.provider-card-actions { display:flex; gap:4px; flex-shrink:0; }
.provider-action-btn { background:none; border:1px solid #e3e6f0; border-radius:6px; width:30px; height:30px; cursor:pointer; color:#888; display:flex; align-items:center; justify-content:center; transition:.15s; font-size:12px; }
.provider-action-btn:hover { background:#f0f2f5; color:var(--accent); border-color:var(--accent); }
.provider-action-btn.danger:hover { color:#e74c3c; border-color:#e74c3c; background:#fef0f0; }
body.dark-mode .provider-action-btn { border-color:#424354; color:#aaa; }
body.dark-mode .provider-action-btn:hover { background:#424354; color:#a78bfa; border-color:var(--accent); }
.preview-btn, .import-btn { background:#eef0fa; border:1px solid #d8dcef; color:#4b4f6c; padding:6px 12px; border-radius:8px; cursor:pointer; font-size:12px; display:flex; align-items:center; gap:4px; transition:.2s; white-space:nowrap; }
.preview-btn:hover, .import-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
body.dark-mode .preview-btn, body.dark-mode .import-btn { background:#424354; border-color:#525364; color:#e0e0e0; }
body.dark-mode .preview-btn:hover, body.dark-mode .import-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.typing-dots { display:flex; gap:4px; align-items:center; padding:4px 0; }
.typing-dot { width:8px; height:8px; background:var(--accent); border-radius:50%; animation:dotPulse 1.2s infinite ease-in-out; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes dotPulse { 0%,80%,100% { transform:scale(.6); opacity:.4; } 40% { transform:scale(1); opacity:1; } }
.streaming-badge {
display:inline-flex; align-items:center; gap:4px;
font-size:11px; color:var(--accent); font-weight:500;
margin-left:8px; animation:pulse 1.5s ease-in-out infinite;
}
.streaming-badge::after {
content:''; width:6px; height:6px;
background:var(--accent); border-radius:50%;
animation:dotPulse 1.2s infinite ease-in-out;
}
.bubble.ai.streaming .bubble-actions { opacity:0.5; pointer-events:none; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:0.6; } }
.right-panel { width:420px; background:white; border-left:1px solid #eef1f6; padding:24px; display:flex; flex-direction:column; overflow:hidden; flex-shrink:0; height:100%; }
.right-panel .section-block { margin-bottom:24px; display:flex; flex-direction:column; overflow:hidden; }
.right-panel .workspace-section.section-block { overflow:visible; }
.right-panel .knowledgebase-section.section-block { overflow:visible; }
.right-panel .section-block h4 { margin-bottom:8px; flex-shrink:0; }
.collapsible-head { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
.collapsible-head .collapse-chevron { font-size:11px; opacity:.6; transition:.2s; }
.collapsible-head:hover .collapse-chevron { opacity:1; color:var(--accent); }
.section-heading-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.section-heading-row h4 { margin-bottom:0 !important; }
.panel-icon-btn {
width:30px; height:30px; border-radius:8px; border:1px solid #d8dcef;
background:#eef0fa; color:#4b4f6c; cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:.2s; flex-shrink:0;
}
.panel-icon-btn:hover { background:var(--accent); border-color:var(--accent); color:white; }
body.dark-mode .panel-icon-btn { background:#323342; border-color:#424354; color:#d0d0e0; }
body.dark-mode .panel-icon-btn:hover { background:var(--accent); border-color:var(--accent); color:white; }
.log-content { flex:1; overflow-y:auto; overflow-x:hidden; min-height:0; max-height:22vh; }
.log-content.expanded { max-height:45vh; }
.attachments-section { flex-shrink:0; }
.file-list { max-height:26vh; overflow-y:auto; overflow-x:clip; padding-left:16px; margin-left:-2px; }
.drop-zone { border:2px dashed #cbd0e6; border-radius:16px; padding:8px 12px; text-align:center; background:#fafbff; transition:.2s; cursor:pointer; min-height:auto; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; flex-shrink:0; }
.drop-zone.dragover { background:#f0eeff; border-color:var(--accent); }
.drop-zone svg.lucide { font-size:18px; color:var(--accent); margin-bottom:0; }
.drop-zone p { font-size:13px; color:#5a5f7a; }
.file-item { display:flex; align-items:flex-start; padding:8px 0; border-bottom:1px solid #f0f0f5; gap:12px; }
.file-thumb { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:20px; }
.file-info { flex:1; min-width:0; border-radius:6px; transition:background .15s; }
.file-info[onclick]:hover { background:rgba(var(--accent-rgb),.08); }
body.dark-mode .file-info[onclick]:hover { background:rgba(var(--accent-rgb),.15); }
.file-name { font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.file-meta { font-size:11px; color:#888; margin-top:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.file-badge { display:inline-flex; align-items:center; gap:3px; padding:1px 6px; border-radius:10px; font-size:10px; font-weight:600; }
.badge-extracted { background:#e8f8f0; color:#27ae60; }
.badge-extracting { background:#fef9e7; color:#f39c12; }
.badge-error { background:#fef0f0; color:#e74c3c; }
.badge-image { background:#e0f2fe; color:#0ea5e9; }
.badge-notext { background:#f0f2f5; color:#888; }
.file-actions { display:flex; gap:6px; align-items:center; flex-shrink:0; }
.file-actions button { background:none; border:none; cursor:pointer; color:#aaa; font-size:13px; padding:3px; border-radius:4px; transition:.2s; }
.file-actions button:hover { color:var(--accent); background:#f0eeff; }
.file-actions button.danger:hover { color:#e74c3c; background:#fef0f0; }
body.dark-mode .file-badge.badge-extracted { background:#1a3a2a; color:#4ade80; }
body.dark-mode .file-badge.badge-extracting { background:#2a2810; color:#fbbf24; }
body.dark-mode .file-actions button { color:#666; }
body.dark-mode .file-actions button:hover { color:#a78bfa; background:#323342; }
.workspace-section { flex-shrink:0; max-height:none; overflow:visible; }
.knowledgebase-section { flex-shrink:0; max-height:none; overflow:visible; }
.workspace-panel-content { min-height:0; overflow:visible; padding-bottom:4px; }
.workspace-empty {
border:1px dashed #d8dcef; border-radius:8px; padding:14px;
display:flex; flex-direction:column; align-items:flex-start; gap:8px; color:#6b7189; font-size:12px;
}
.workspace-empty svg.lucide { color:var(--accent); font-size:18px; }
.workspace-primary-btn {
background:var(--accent); color:white; border:none; border-radius:8px; padding:7px 10px;
display:inline-flex; align-items:center; gap:6px; cursor:pointer; font-size:12px; font-weight:600;
}
.workspace-folder-card {
border:1px solid #e3e6f0; border-radius:8px; padding:10px;
display:flex; align-items:flex-start; gap:10px; justify-content:space-between; margin-bottom:8px;
}
.workspace-folder-main { display:flex; gap:9px; min-width:0; align-items:flex-start; }
.workspace-folder-main > svg.lucide { color:var(--accent); margin-top:2px; flex-shrink:0; }
.workspace-folder-name { font-size:13px; font-weight:700; color:#333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:210px; }
.workspace-folder-path { font-size:11px; color:#888; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:240px; font-family:monospace; }
.workspace-actions { display:flex; gap:4px; flex-shrink:0; }
.workspace-actions button {
width:26px; height:26px; border-radius:6px; border:none; cursor:pointer;
background:#f0f2f5; color:#6b7189; display:flex; align-items:center; justify-content:center; transition:.2s;
}
.workspace-actions button:hover { background:#f0eeff; color:var(--accent); }
.workspace-actions button.danger:hover { background:#fef0f0; color:#e74c3c; }
.workspace-tree {
max-height:24vh; overflow:auto; border:1px solid #eef1f6; border-radius:8px; padding:6px 0; background:#fafbff;
}
.workspace-tree-row {
height:26px; display:flex; align-items:center; gap:7px; padding:0 8px 0 calc(8px + var(--depth) * 16px);
font-size:12px; color:#4b4f6c; min-width:0;
}
.workspace-tree-row.is-folder { cursor:pointer; }
.workspace-toggle, .workspace-toggle-spacer {
width:14px; height:18px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
}
.workspace-toggle {
border:none; background:transparent; color:var(--accent); cursor:pointer; padding:0; font-size:10px;
}
.workspace-toggle:hover { color:#5a4fcf; }
.workspace-tree-row svg.lucide { width:14px; color:var(--accent); flex-shrink:0; }
.workspace-toggle svg.lucide { width:auto; color:inherit; }
.workspace-tree-row span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.workspace-tree-row:hover { background:#f0eeff; }
.workspace-muted { font-size:12px; color:#999; padding:8px; }
body.dark-mode .workspace-empty { border-color:#424354; color:#aaa; }
body.dark-mode .workspace-folder-card { border-color:#424354; background:#282935; }
body.dark-mode .workspace-folder-name { color:#d0d0e0; }
body.dark-mode .workspace-actions button { background:#323342; color:#aaa; }
body.dark-mode .workspace-actions button:hover { background:#424354; color:#a78bfa; }
body.dark-mode .workspace-tree { background:#282935; border-color:#373848; }
body.dark-mode .workspace-tree-row { color:#d0d0e0; }
body.dark-mode .workspace-tree-row:hover { background:#323342; }
body.dark-mode .workspace-toggle { color:#a78bfa; }
.prompt-item, .preview-log-item { font-size:13px; color:#333; padding:8px 0; border-bottom:1px solid #f0f0f5; }
.prompt-item .summary, .preview-log-item .summary { font-weight:500; }
.prompt-item .meta, .preview-log-item .meta { font-size:11px; color:#888; margin-top:4px; display:flex; align-items:center; gap:12px; }
.prompt-item .meta button, .preview-log-item .meta button { background:none; border:none; color:var(--accent); font-size:11px; cursor:pointer; padding:0; }
.activity-log-item { display:flex; align-items:center; gap:8px; font-size:12px; color:#555; padding:4px 0; }
.activity-log-item svg.lucide { width:16px; color:#888; }
.thread-only { display:none; }
.thread-active .thread-only.accordion { display:flex; flex-direction:column; flex:1; overflow:hidden; gap:12px; }
/* All sections open and visible. Attachments + Workspace get the bulk (~65%),
Previews + Prompts share ~35% total. Each section is a flex column so its
header (and the folder's add button) stays fixed and only its list scrolls. */
.thread-active .acc-item { display:flex; flex-direction:column; overflow:hidden; margin-bottom:0; }
.thread-active .acc-item .acc-head { margin:0; flex-shrink:0; }
.thread-active .acc-item .acc-body { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden; margin-top:8px; }
/* Arquivos da Thread grows with its content but caps at ~4 files, then scrolls.
Pasta do projeto takes whatever space is left above Previews/Prompts. */
.thread-active .attachments-section { flex:0 0 auto; min-height:0; }
.thread-active .workspace-section { flex:1 1 auto; min-height:120px; }
.thread-active .knowledgebase-section { flex:1 1 auto; min-height:160px; overflow-y:auto; margin-top:25px; }
/* Previews + Prompts espremidos para dar espaço a Arquivos e Base de Conhecimento */
.thread-active .previews-section { flex:0 0 auto; height:12%; min-height:56px; }
.thread-active .prompts-section { flex:0 0 auto; height:12%; min-height:56px; }
/* Header styling (chevrons now just decorative since all stay open) */
.acc-head { display:flex; align-items:center; justify-content:space-between; user-select:none; padding:2px 0; }
.acc-head .acc-head-right { display:flex; align-items:center; gap:8px; }
.acc-head .collapse-chevron { display:none; }
/* File list grows with content up to ~5 files (≈300px), then scrolls */
.thread-active .attachments-section .file-list { flex:0 1 auto; max-height:300px; min-height:0; overflow-y:auto; }
.thread-active .previews-section .log-content,
.thread-active .prompts-section .log-content { flex:1; max-height:none; min-height:0; overflow-y:auto; }
/* Workspace: the tree scrolls, but the "Enviar ao prompt" button row stays visible */
.thread-active .workspace-section .workspace-panel-content { flex:1; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.thread-active .workspace-section .workspace-tree { flex:1; min-height:0; max-height:none; overflow-y:auto; }
.thread-active .workspace-section .workspace-send-row { flex-shrink:0; }
.thread-active .workspace-section .workspace-folder-card { flex-shrink:0; }
.preview-log-item.latest-preview { border-left:3px solid #27ae60; padding-left:8px; }
.favorite-item { background:#fff9e6; border-left:3px solid #f9b934; padding:5px 8px; margin-bottom:4px; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:7px; }
.favorite-item svg.lucide-star { color:#f9b934; cursor:pointer; font-size:11px; flex-shrink:0; }
.favorite-item .summary { font-weight:600; font-size:11px; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.favorite-item .meta { font-size:9px; color:#888; flex-shrink:0; }
/* Favorito de prompt do usuário: tema roxo (vs dourado das respostas) */
.favorite-item.fav-user { background:#f0eefe; border-left-color:var(--accent); }
.favorite-item.fav-user svg.lucide.fav-icon { color:var(--accent); }
.favorite-item svg.lucide.fav-icon { color:#f9b934; cursor:pointer; font-size:11px; flex-shrink:0; }
body.dark-mode .favorite-item.fav-user { background:#241f3a; border-left-color:var(--accent); }
body.dark-mode .favorite-item.fav-user .summary { color:#cfc8f0; }
/* Resumo ao fim da resposta da IA (tracking do último pedido) */
.resumo-block { display:flex; gap:10px; align-items:flex-start; background:#f5f6fc; border:1px solid #e6e9f6; border-left:3px solid var(--accent); border-radius:8px; padding:10px 12px; margin-top:12px; }
.resumo-block > svg.lucide { color:var(--accent); font-size:13px; margin-top:2px; flex-shrink:0; }
.resumo-block .resumo-body { flex:1; font-size:13px; line-height:1.5; color:#4b5563; }
.resumo-block .resumo-label { display:block; font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:var(--accent); margin-bottom:2px; }
.resumo-block .resumo-body strong { color:#333; }
body.dark-mode .resumo-block { background:#282a36; border-color:#373848; border-left-color:var(--accent); }
body.dark-mode .resumo-block .resumo-body { color:#c8ccda; }
body.dark-mode .resumo-block .resumo-body strong { color:#e8e8f4; }
/* ===== TIPOS DE THREAD (Sincronizada / Modo Cofre) ===== */
.thread-kind-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; cursor:pointer; user-select:none; white-space:nowrap; transition:filter .15s; }
.thread-kind-badge:hover { filter:brightness(.96); }
.thread-kind-badge.kind-sync { background:#eaf1ff; color:#2f6bd6; border:1px solid #d3e2fb; }
.thread-kind-badge.kind-cofre { background:#efeafe; color:#6b52d6; border:1px solid #ddd2fa; }
body.dark-mode .thread-kind-badge.kind-sync { background:#1c2740; color:#7fa8ee; border-color:#2a3a5c; }
body.dark-mode .thread-kind-badge.kind-cofre { background:#241f3a; color:#b39dfb; border-color:#3a2f5c; }
/* Linha logo abaixo do nome no tile: código da thread + selinho do tipo. */
.card-meta-row { display:flex; align-items:center; gap:8px; margin:10px 0 10px; flex-wrap:wrap; }
.thread-code { font-size:11px; font-weight:600; letter-spacing:.4px; color:#a8a5b8; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; user-select:all; }
body.dark-mode .thread-code { color:#6f6c80; }
/* Variante compacta do selinho para o tile: menor e sem cara de clicável. */
.card-kind-badge { font-size:10px; padding:2px 8px; gap:4px; cursor:default; }
.card-kind-badge:hover { filter:none; }
/* ===== PAR ORIGEM + RAMO PRIVADO =====
A ligação é uma barra no RODAPÉ dos dois tiles, na mesma cor. Como os dois
ficam sempre lado a lado, as barras alinhadas leem como uma linha só
passando por baixo do par. A barra lateral anterior foi removida: ela
decorava cada tile isoladamente, sem ligar um ao outro. */
.card.tem-par { border-bottom:4px solid var(--par, #f39c12); }
/* ATENÇÃO: `body.dark-mode .card` define border-color (os quatro lados) e tem
especificidade maior que `.card.tem-par` — sem esta linha o rodapé fica
pintado da cor do fundo escuro e some. Qualquer variante futura de .card
que dependa de cor de borda precisa do mesmo par de regras. */
body.dark-mode .card.tem-par { border-bottom-color:var(--par, #f39c12); }
/* O ramo já se distingue pelo selo verde, pelo selinho de cofre e pelo chip
de vínculo — não precisa de mais peso visual competindo com o rodapé. */
/* Selo de segurança do ramo: afirma o que está protegido, em vez de só decorar. */
.selo-seguro {
display:flex; align-items:center; gap:6px; margin:0 0 8px;
font-size:10.5px; font-weight:600; color:#3a8f68;
background:#eef8f2; border:1px solid #d6ecdf; border-radius:8px; padding:4px 8px;
}
.selo-seguro svg.lucide { font-size:11px; }
body.dark-mode .selo-seguro { color:#7fcfa4; background:#16281f; border-color:#24402f; }
/* Chip de vínculo entre a thread Sincronizada e seu ramo privado. Este SIM é
clicável (pula para o outro lado), então mantém o cursor de mão. */
.thread-link-badge { display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:600; padding:2px 8px; border-radius:999px; cursor:pointer; user-select:none; white-space:nowrap; background:#f3f1fd; color:#6b52d6; border:1px solid #e2dcfa; transition:filter .15s; }
.thread-link-badge:hover { filter:brightness(.96); }
/* Ramo que vive em outro aparelho: existe, mas não pode ser aberto aqui. */
.thread-link-badge.link-remoto { opacity:.55; border-style:dashed; }
body.dark-mode .thread-link-badge { background:#241f3a; color:#b39dfb; border-color:#3a2f5c; }
/* Pisca o seletor quando a pessoa tenta enviar sem ter escolhido o tipo. */
@keyframes tkcPedindo {
0%,100% { box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); border-color:#ece8fb; }
30% { box-shadow:0 0 0 6px rgba(var(--accent-rgb),.22); border-color:var(--accent); }
65% { box-shadow:0 0 0 0 rgba(var(--accent-rgb),0); border-color:var(--accent); }
}
.thread-kind-chooser.tkc-pedindo { animation:tkcPedindo .8s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) {
.thread-kind-chooser.tkc-pedindo { animation:none; border-color:var(--accent); }
}
.thread-kind-chooser { margin:14px auto 6px; max-width:560px; background:var(--accent-faint); border:1px solid #ece8fb; border-radius:14px; padding:16px; text-align:center; }
.thread-kind-chooser .tkc-title { font-size:14px; font-weight:600; color:#3a3550; margin-bottom:12px; }
.thread-kind-chooser .tkc-cards { display:flex; gap:12px; }
.thread-kind-chooser .tkc-card { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 12px; border-radius:12px; border:1.5px solid #e6e2f5; background:#fff; cursor:pointer; transition:transform .12s, border-color .15s, box-shadow .15s; text-align:center; }
.thread-kind-chooser .tkc-card:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(var(--accent-rgb),.14); }
.thread-kind-chooser .tkc-card > svg.lucide { font-size:22px; }
.thread-kind-chooser .tkc-sync:hover { border-color:#7ba3ee; }
.thread-kind-chooser .tkc-sync > svg.lucide { color:#2f6bd6; }
.thread-kind-chooser .tkc-cofre:hover { border-color:var(--accent); }
.thread-kind-chooser .tkc-cofre > svg.lucide { color:var(--accent); }
.thread-kind-chooser .tkc-name { font-size:14px; font-weight:700; color:#2c2840; }
.thread-kind-chooser .tkc-desc { font-size:11.5px; color:#7a7690; line-height:1.4; }
.thread-kind-chooser .tkc-aviso { display:flex; gap:6px; align-items:flex-start; font-size:10.5px; color:#8a6d1f; background:#fff8e6; border:1px solid #f0e0b0; border-radius:8px; padding:6px 8px; line-height:1.4; text-align:left; margin-top:2px; }
.thread-kind-chooser .tkc-aviso svg.lucide { margin-top:1px; flex-shrink:0; }
.thread-kind-chooser .tkc-saiba { display:inline-flex; gap:5px; align-items:center; font-size:10.5px; font-weight:600; color:var(--accent-hover); background:rgba(var(--accent-rgb),.12); border-radius:999px; padding:3px 10px; cursor:pointer; margin-top:2px; }
.thread-kind-chooser .tkc-saiba:hover { background:rgba(var(--accent-rgb),.22); }
.thread-kind-chooser .tkc-hint { font-size:11px; color:#9a96ad; margin-top:11px; }
body.dark-mode .thread-kind-chooser { background:#242531; border-color:#373848; }
body.dark-mode .thread-kind-chooser .tkc-title { color:#d8d5ea; }
body.dark-mode .thread-kind-chooser .tkc-card { background:#2a2b37; border-color:#3b3c52; }
body.dark-mode .thread-kind-chooser .tkc-name { color:#e6e3f4; }
body.dark-mode .thread-kind-chooser .tkc-desc { color:#9b98b3; }
body.dark-mode .thread-kind-chooser .tkc-aviso { color:#e5c880; background:rgba(240,224,176,.08); border-color:rgba(240,224,176,.25); }
body.dark-mode .thread-kind-chooser .tkc-saiba { color:var(--accent-light); background:rgba(var(--accent-rgb),.18); }
.cofre-block-notice { display:flex; gap:12px; align-items:flex-start; background:#fdf3f3; border:1px solid #f4d4d4; border-left:3px solid #e07a7a; border-radius:10px; padding:12px 14px; margin:10px 0; max-width:75%; align-self:flex-start; }
.cofre-block-notice > svg.lucide { color:#d05656; font-size:18px; margin-top:2px; flex-shrink:0; }
.cofre-block-notice .cofre-block-body strong { display:block; font-size:13px; color:#a83e3e; margin-bottom:3px; }
.cofre-block-notice .cofre-block-body p { font-size:12.5px; color:#7d5a5a; line-height:1.5; margin:0 0 8px; }
.cofre-retry-btn { background:#fff; border:1px solid #e0b4b4; color:#b45454; font-size:12px; padding:5px 11px; border-radius:7px; cursor:pointer; }
.cofre-retry-btn:hover { background:#fbeaea; }
body.dark-mode .cofre-block-notice { background:#2b1e1e; border-color:#4a2f2f; border-left-color:#c06060; }
body.dark-mode .cofre-block-notice .cofre-block-body strong { color:#e79a9a; }
body.dark-mode .cofre-block-notice .cofre-block-body p { color:#cba5a5; }
body.dark-mode .cofre-retry-btn { background:#3a2626; border-color:#5a3a3a; color:#e0a0a0; }
.view-more-btn { background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; padding:6px 0; margin-top:4px; display:flex; align-items:center; gap:4px; transition:color .2s; }
.view-more-btn:hover { color:#5a4fcf; }
.settings-btn { background:none; border:none; color:#888; font-size:18px; cursor:pointer; transition:color .2s; }
.settings-btn:hover { color:var(--accent); }
.settings-modal .form-group { margin-bottom:15px; text-align:left; }
.settings-modal label { display:block; font-size:12px; font-weight:600; margin-bottom:4px; }
.settings-modal input, .settings-modal select { width:100%; padding:8px 12px; border-radius:8px; border:1px solid #ddd; font-size:14px; }
.tag-cloud-btn { background:#eef0fa; border:1px solid #e0e3ff; padding:10px 20px; border-radius:30px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; color:#4b4f6c; font-weight:500; transition:all .2s; }
.tag-cloud-btn:hover { background:var(--accent); color:white; border-color:var(--accent); }
.tag-cloud-btn:hover .tag-count { background:rgba(255,255,255,.3); }
.tag-count { background:var(--accent); color:white; border-radius:12px; padding:2px 8px; font-size:11px; transition:background .2s; }
.modal.wide { max-width:660px; }
.settings-tabs { display:flex; gap:4px; margin-bottom:20px; flex-wrap:wrap; border-bottom:1px solid #eee; padding-bottom:12px; }
.stab { background:#f0f2f5; border:1px solid #e3e6f0; padding:7px 13px; border-radius:8px; cursor:pointer; font-size:12px; font-weight:500; transition:.2s; color:#555; }
.stab.active { background:var(--accent); color:white; border-color:var(--accent); }
.stab:hover:not(.active) { background:#e4e7ec; }
.stab svg.lucide { width:13px; height:13px; vertical-align:-2px; margin-right:3px; }
#settingsModal .settings-tab-content p > svg.lucide { width:15px; height:15px; vertical-align:-2px; margin-right:5px; color:var(--accent); }
.stab-content { animation:fadeIn .15s; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
/* Cartões das Configurações (Minhas APIs dentro da aba IA, MCP dentro de
Integrações) — classes reutilizáveis com modo escuro. */
.settings-card { background:#f7f6ff; border:1px solid var(--accent-soft); border-radius:12px; padding:16px; font-size:14px; line-height:1.7; }
.settings-card p { margin:0; }
.settings-card .sub { color:#555; }
/* Dark usa a superfície padrão do site (mesma de inputs, botões e stabs). */
body.dark-mode .settings-card { background:#323342; border-color:#424354; }
body.dark-mode .settings-card .sub { color:#b9b9c6; }
/* Linha da lista de APIs cadastradas */
.sapi-row { display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid #eee; border-radius:10px; margin-bottom:6px; }
body.dark-mode .sapi-row { background:#2e2f3e; border-color:#424354; color:#d0d0e0; }
/* Diretório de APIs alternativas (admin + Configurações doméstica) */
.api-dir { margin-top:14px; border:1px dashed #cfd0e4; border-radius:12px; padding:10px 14px; background:#fbfaff; }
.api-dir-title { font-size:13px; font-weight:600; color:#555; }
.api-dir-title svg.lucide { width:14px; height:14px; vertical-align:-2px; margin-right:4px; color:var(--accent); }
.api-dir-why { font-size:12px; color:#666; line-height:1.6; margin:10px 0 8px; }
.api-dir-item { display:flex; gap:8px; align-items:center; font-size:12px; color:#666; margin:6px 0; line-height:1.5; }
.api-dir-logo, .api-dir-logo-fb { width:20px; height:20px; border-radius:6px; flex:none; }
.api-dir-logo { background:#fff; border:1px solid #e6e6f0; padding:3px; box-sizing:border-box; }
.api-dir-logo-fb { display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:700; }
.api-dir-item a { font-weight:600; color:#2f6bd6; text-decoration:none; white-space:nowrap; }
.api-dir-item a:hover { text-decoration:underline; }
.api-dir-item a svg.lucide { width:12px; height:12px; vertical-align:-2px; }
body.dark-mode .api-dir { background:#2b2c3b; border-color:#424354; }
body.dark-mode .api-dir-title { color:#c9c9d6; }
body.dark-mode .api-dir-why, body.dark-mode .api-dir-item { color:#a9a9ba; }
body.dark-mode .api-dir-item a { color:#8ab4f8; }
body.dark-mode .api-dir-logo { border-color:#424354; }
.form-row { display:flex; gap:10px; }
.form-row .form-group { flex:1; }
.settings-modal .form-group small { display:block; font-size:11px; color:#888; margin-top:3px; font-weight:400; }
.ai-status { display:flex; align-items:center; gap:8px; font-size:12px; padding:8px 12px; border-radius:8px; margin-bottom:12px; }
.ai-status.ok { background:#e8f8f0; color:#27ae60; }
.ai-status.error { background:#fef0f0; color:#e74c3c; }
.ai-status.idle { background:#f0f2f5; color:#888; }
.test-btn { background:#f0f2f5; border:1px solid #e3e6f0; padding:6px 12px; border-radius:8px; font-size:12px; cursor:pointer; transition:.2s; }
.test-btn:hover { background:#e4e7ec; }
body.dark-mode .stab { background:#323342; border-color:#424354; color:#aaa; }
body.dark-mode .stab.active { background:var(--accent); color:white; border-color:var(--accent); }
body.dark-mode .stab:hover:not(.active) { background:#424354; }
body.dark-mode .settings-tabs { border-bottom-color:#373848; }
body.dark-mode .ai-status.idle { background:#323342; }
body.dark-mode .test-btn { background:#323342; border-color:#424354; color:#aaa; }
/* ===== Dark mode: perfil, settings cards, botões de anexo ===== */
body.dark-mode #profileModal input,
body.dark-mode #profileModal select,
body.dark-mode #profileModal textarea,
body.dark-mode #threadContextModal textarea {
background:#323342 !important; border-color:#424354 !important; color:#e0e0e0 !important;
}
body.dark-mode #profileModal input[readonly] { background:#2a2b37 !important; color:#9b9bac !important; }
body.dark-mode #profileModal label,
body.dark-mode #threadContextModal label { color:#c0c0d0; }
body.dark-mode #profileModal .btn[style*="eef0fa"],
body.dark-mode #threadContextModal .btn[style*="eef0fa"] {
background:#323342 !important; color:#c0c0d0 !important; border-color:#424354 !important;
}
/* Cards informativos dentro do modal de settings (inline styles) */
body.dark-mode #settingsModal [style*="f7f6ff"],
body.dark-mode #settingsModal [style*="fffdf5"],
body.dark-mode #settingsModal [style*="f0f9f4"] {
background:#2a2b37 !important; border-color:#424354 !important;
}
body.dark-mode #settingsModal [style*="f7f6ff"] p,
body.dark-mode #settingsModal [style*="fffdf5"] p,
body.dark-mode #settingsModal [style*="f0f9f4"] p { color:#b0b0c0 !important; }
body.dark-mode #settingsModal [style*="f7f6ff"] p[style*="font-weight:600"],
body.dark-mode #settingsModal [style*="fffdf5"] p[style*="font-weight:600"],
body.dark-mode #settingsModal [style*="f0f9f4"] p[style*="font-weight:600"] { color:#e0e0f0 !important; }
/* Input do servidor local */
body.dark-mode #localLlmUrlInput { background:#323342 !important; border-color:#424354 !important; color:#e0e0e0 !important; }
/* Status da IA */
body.dark-mode .ai-status.ok { background:#1a3a2a; color:#4ade80; }
body.dark-mode .ai-status.error { background:#3a1a1a; color:#f87171; }
/* Botões de ação de arquivo anexado */
body.dark-mode .btn-action-memorize { background:#2a2540; color:#a78bfa; border-color:#3d3560; }
body.dark-mode .btn-action-identify { background:#1a3a2a; color:#4ade80; border-color:#2a4a3a; }
body.dark-mode .btn-action-recreate { background:#3a2a1a; color:#fbbf24; border-color:#4a3a2a; }
body.dark-mode .btn-archive { background:#2a2510; color:#fbbf24; border-color:#3a3520; }
body.dark-mode .btn-import { background:#1a2a3a; color:#60a5fa; border-color:#2a3a4a; }
/* Storage info box */
body.dark-mode #storageInfoBox { color:#b0b0c0; }
body.dark-mode #storageInfoBox [style*="background:#e8f8f0"],
body.dark-mode #storageInfoBox [style*="e8f8f0"] { background:#1a3a2a !important; color:#4ade80 !important; border-color:#2a4a3a !important; }
/* Tag cloud button */
body.dark-mode .tag-cloud-btn { background:#323342; border-color:#424354; color:#b0b0c0; }
body.dark-mode .tag-cloud-btn:hover { background:var(--accent); color:white; border-color:var(--accent); }
@media (min-width:1025px) and (max-width:1200px) { .right-panel { width:340px; } }
/* ===== FOLDER CONTEXT IN CHAT ===== */
.chat-folder-bar {
display:flex; align-items:center; gap:8px; padding:6px 28px;
background:#f0eeff; border-bottom:1px solid #e3e6f0; font-size:12px; color:#5a4fcf;
}
body.dark-mode .chat-folder-bar { background:#1f1b35; border-bottom-color:#373848; color:#a99bf0; }
.chat-folder-bar svg.lucide { font-size:14px; }
.chat-folder-path { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:monospace; }
.chat-folder-clear {
background:none; border:none; color:#5a4fcf; cursor:pointer; font-size:14px; padding:2px 6px; border-radius:4px;
}
.chat-folder-clear:hover { background:rgba(var(--accent-rgb),.15); }
.apply-btn {
background:#27ae60; color:white; border:none; padding:3px 10px; border-radius:5px;
font-size:11px; cursor:pointer; transition:.2s; font-family:inherit; display:inline-flex; align-items:center; gap:4px;
}
.apply-btn:hover { background:#219a52; }
.code-lang-badge {
font-size:11px; color:#888; padding:2px 8px; background:#f0f2f5;
border-radius:4px; font-family:monospace;
}
body.dark-mode .code-lang-badge { background:#323342; color:#aaa; }
/* ============================================================ */
/* CO-OP BRAINSTORM */
/* ============================================================ */
/* Avatars */
.coop-avatar {
display:inline-flex; align-items:center; justify-content:center;
width:30px; height:30px; border-radius:50%; color:#fff;
font-size:11px; font-weight:700; position:relative; flex-shrink:0;
box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.coop-avatar.offline { opacity:.45; }
/* Presence bar (top right, na mesma linha do #ID) */
.coop-presence-bar {
display:flex; align-items:center; gap:6px; justify-content:flex-end;
padding:6px 0 2px; flex-wrap:wrap;
}
/* Quando há sessão CO-OP, a barra "Na sessão:" divide a linha com o #ID
(chatMeta): ID à esquerda, participantes à direita, mesma altura. */
#chatMetaHome.has-coop-presence { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#chatMetaHome.has-coop-presence .chat-meta { flex:1 1 auto; min-width:0; }
#chatMetaHome.has-coop-presence .coop-presence-bar { flex:0 0 auto; padding:0; margin:0; }
.coop-presence-label { font-size:11px; color:#888; margin-right:2px; }
.coop-presence-dot {
position:absolute; bottom:-1px; right:-1px; width:9px; height:9px;
border-radius:50%; background:#bbb; border:2px solid #fff;
}
.coop-presence-dot.online { background:#2ecc71; }
body.dark-mode .coop-presence-dot { border-color:#262733; }
.coop-presence-share {
background:#eef0fa; border:1px solid #d8dcef; color:var(--accent);
width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:12px;
display:flex; align-items:center; justify-content:center; transition:.2s;
}
.coop-presence-share:hover { background:var(--accent); color:#fff; }
body.dark-mode .coop-presence-bar .coop-presence-label { color:#999; }
body.dark-mode .coop-presence-share { background:#323342; border-color:#424354; }
/* Message attribution */
.bubble.user.coop-authored { position:relative; }
/* Linha: balão + avatar ao lado (fora do balão), avatar alinhado ao topo */
.coop-row { display:flex; align-items:flex-start; justify-content:flex-end; gap:10px; }
.coop-row .bubble { max-width:100%; }
.coop-row-avatar { flex-shrink:0; }
.coop-row-avatar .coop-avatar {
width:40px; height:40px; font-size:14px;
border:2px solid var(--surface-2, #fff);
}
body.dark-mode .coop-row-avatar .coop-avatar { border-color:#262733; }
/* Assinatura abaixo do balão: hora | nome, à direita */
.coop-signature {
display:flex; align-items:center; gap:8px; justify-content:flex-end;
margin-top:4px; margin-right:50px; font-size:11px;
}
.coop-sig-time { color:#8a8a99; }
.coop-sig-name { color:#6a6a78; font-weight:600; }
.coop-sig-sep { color:#c8c8d0; }
body.dark-mode .coop-sig-time { color:#9a9aa8; }
body.dark-mode .coop-sig-name { color:#b0b0be; }
body.dark-mode .coop-sig-sep { color:#4a4b5a; }
.coop-reply-tag {
display:inline-block; color:#fff; font-size:10px; font-weight:600;
padding:1px 8px; border-radius:10px; margin-left:6px; vertical-align:middle;
}
/* Turn banner */
.coop-turn-banner {
display:flex; align-items:center; gap:10px;
background:#fff8ec; border:1px solid #f0e2c8; border-left-width:4px;
padding:8px 12px; border-radius:10px; margin-bottom:8px;
font-size:12px; color:#8a6d3b;
}
body.dark-mode .coop-turn-banner { background:#2a2519; border-color:#43392c; color:#e0b870; }
/* The central chat column is the positioning context for CO-OP widgets */
.chat-area { position:relative; }
/* Floating green chat button — bottom-right of the CENTRAL column, above input */
.coop-chat-btn {
position:absolute; bottom:88px; right:0; z-index:30;
width:52px; height:52px; border-radius:50%; border:none; cursor:pointer;
background:linear-gradient(135deg,#2ecc71,#27ae60); color:#fff; font-size:20px;
box-shadow:0 4px 16px rgba(46,204,113,.45); transition:.2s;
display:flex; align-items:center; justify-content:center;
}
.coop-chat-btn:hover { transform:scale(1.08); box-shadow:0 6px 22px rgba(46,204,113,.6); }
.coop-chat-badge {
position:absolute; top:-2px; right:-2px; background:#e74c3c; color:#fff;
min-width:20px; height:20px; border-radius:10px; font-size:11px; font-weight:700;
display:flex; align-items:center; justify-content:center; padding:0 5px;
border:2px solid #fff;
}
/* Chat box — docked at the bottom-right of the central column, aligned with the prompt bar */
.coop-chat-box {
position:absolute; bottom:0; right:0; z-index:35;
width:320px; height:420px; max-height:calc(100% - 14px);
background:#fff; border-radius:16px;
box-shadow:0 8px 40px rgba(0,0,0,.22); display:flex; flex-direction:column;
overflow:hidden; border:1px solid #eee; transition:height .2s ease;
}
/* When chat is open (not minimized), push the prompt bar in to make room */
#chatView.coop-chat-docked .chat-input-area {
padding-right:340px;
transition:padding-right .25s ease;
}
body.dark-mode .coop-chat-box { background:#262733; border-color:#373848; }
.coop-chat-header {
background:linear-gradient(135deg,#2ecc71,#27ae60); color:#fff;
padding:12px 16px; font-weight:600; font-size:14px;
display:flex; align-items:center; justify-content:space-between;
cursor:pointer; flex-shrink:0;
}
.coop-chat-header button { background:none; border:none; color:#fff; cursor:pointer; font-size:15px; }
.coop-chat-header-btns { display:flex; gap:4px; align-items:center; }
.coop-chat-header-btns button { width:26px; height:26px; border-radius:6px; display:flex; align-items:center; justify-content:center; transition:.15s; }
.coop-chat-header-btns button:hover { background:rgba(255,255,255,.2); }
/* Minimized: collapse to just the header bar, sit above the input bar
at the same height as the round chat button */
.coop-chat-box.minimized { height:46px !important; bottom:88px !important; }
.coop-chat-box.minimized .coop-chat-log,
.coop-chat-box.minimized .coop-chat-input { display:none; }
/* Hover "use as prompt" button on chat messages */
.coop-chat-bubble { position:relative; }
.coop-chat-toprompt {
position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
background:var(--accent); color:#fff; border:2px solid #fff; cursor:pointer; font-size:10px;
display:none; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.coop-chat-msg:hover .coop-chat-toprompt { display:flex; }
.coop-chat-toprompt:hover { background:#6558e6; transform:scale(1.1); }
body.dark-mode .coop-chat-toprompt { border-color:#262733; }
.coop-chat-log { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.coop-chat-system { text-align:center; font-size:11px; color:#999; margin:4px 0; }
.coop-chat-msg { display:flex; align-items:flex-end; gap:6px; max-width:85%; }
.coop-chat-msg.mine { align-self:flex-end; flex-direction:row-reverse; }
.coop-chat-bubble {
background:#f0f2f5; padding:8px 12px; border-radius:14px; font-size:13px;
line-height:1.4; word-break:break-word;
}
.coop-chat-msg.mine .coop-chat-bubble { background:var(--accent); color:#fff; }
body.dark-mode .coop-chat-bubble { background:#323342; color:#e0e0e0; }
body.dark-mode .coop-chat-msg.mine .coop-chat-bubble { background:var(--accent); color:#fff; }
.coop-chat-name { font-size:10px; font-weight:700; margin-bottom:2px; }
.coop-chat-input { display:flex; gap:8px; padding:10px; border-top:1px solid #eee; }
body.dark-mode .coop-chat-input { border-color:#373848; }
.coop-chat-input input { flex:1; border:1px solid #ddd; border-radius:20px; padding:8px 14px; font-size:13px; outline:none; background:transparent; color:inherit; }
body.dark-mode .coop-chat-input input { border-color:#424354; }
.coop-chat-input button { background:#2ecc71; color:#fff; border:none; width:38px; height:38px; border-radius:50%; cursor:pointer; }
/* Share modal pieces */
.share-link-box { display:flex; gap:8px; }
.share-link-box input { flex:1; border:1px solid #ddd; border-radius:8px; padding:9px 12px; font-size:12px; font-family:monospace; background:#f7f7fb; color:#555; }
body.dark-mode .share-link-box input { background:#2e2f40; border-color:#424354; color:#bbb; }
.share-link-box button { background:#eef0fa; border:1px solid #d8dcef; color:var(--accent); border-radius:8px; padding:0 14px; cursor:pointer; }
.share-link-box button:hover { background:var(--accent); color:#fff; }
.share-participant { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; border-bottom:1px solid #f0f0f5; }
body.dark-mode .share-participant { border-color:#323342; }
.share-participant .coop-presence-dot { position:static; width:9px; height:9px; border:none; }
/* Toast */
.coop-toast {
position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px);
background:#1a1a2e; color:#fff; padding:11px 20px; border-radius:12px;
font-size:13px; z-index:1200; opacity:0; pointer-events:none; transition:.3s;
box-shadow:0 6px 24px rgba(0,0,0,.3); max-width:90%;
}
.coop-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
/* ============================================================ */
/* SOFT-REVERT (hidden/inactive messages) */
/* ============================================================ */
.bubble-inactive {
display:flex; align-items:center; gap:8px;
padding:7px 12px; margin:4px 0; border-radius:10px;
background:rgba(120,120,140,.07); border:1px dashed #cfd2e0;
font-size:12px; color:#9a9ab0; cursor:pointer; opacity:.65;
transition:.18s;
}
.bubble-inactive:hover { opacity:1; background:rgba(var(--accent-rgb),.08); border-color:#b3a9f0; }
.bubble-inactive .bi-who { font-weight:600; flex-shrink:0; }
.bubble-inactive .bi-preview { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-style:italic; }
.bubble-inactive .bi-restore { flex-shrink:0; color:var(--accent); font-weight:600; font-size:11px; }
body.dark-mode .bubble-inactive { background:rgba(255,255,255,.04); border-color:#424354; color:#9b9bac; }
body.dark-mode .bubble-inactive:hover { background:rgba(var(--accent-rgb),.12); border-color:#5a4fcf; }
.restore-all-banner, .prompt-restore-all {
text-align:center; padding:9px 12px; margin:8px 0 2px;
background:#f0eeff; color:var(--accent-deep); border:1px solid #ddd6f5;
border-radius:10px; font-size:12px; font-weight:600; cursor:pointer;
transition:.18s; display:flex; align-items:center; justify-content:center; gap:8px;
}
.restore-all-banner { cursor:default; }
.restore-banner-x {
background:none; border:none; color:var(--accent-deep); cursor:pointer;
font-size:13px; padding:2px 6px; border-radius:6px; flex-shrink:0; opacity:.7; transition:.15s;
}
.restore-banner-x:hover { opacity:1; background:rgba(109,91,208,.15); }
.restore-all-banner span:hover, .prompt-restore-all:hover { background:var(--accent-deep); color:#fff; border-color:var(--accent-deep); }
.prompt-restore-all:hover { background:var(--accent-deep); color:#fff; border-color:var(--accent-deep); }
body.dark-mode .restore-all-banner, body.dark-mode .prompt-restore-all {
background:#241f3a; color:#a99bf0; border-color:#39335a;
}
body.dark-mode .restore-banner-x { color:#a99bf0; }
.prompt-restore-all { margin-bottom:10px; }
/* ============================================================ */
/* ATTACHMENT HOVER PREVIEW */
/* ============================================================ */
.attachment-preview-pop {
position:fixed; z-index:1500; display:none;
width:264px; max-height:340px; overflow:hidden;
background:#fff; border:1px solid #e3e6f0; border-radius:14px;
box-shadow:0 10px 40px rgba(0,0,0,.22); padding:12px;
animation:attPopIn .15s ease;
}
@keyframes attPopIn { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} }
body.dark-mode .attachment-preview-pop { background:#262733; border-color:#373848; }
.attachment-preview-pop .app-title {
font-size:12px; font-weight:700; margin-bottom:8px; color:#1a1a2e;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.dark-mode .attachment-preview-pop .app-title { color:#e0e0e0; }
.attachment-preview-pop .app-img {
width:100%; max-height:280px; object-fit:contain; border-radius:8px;
background:#f5f5fa;
}
body.dark-mode .attachment-preview-pop .app-img { background:#1a1b24; }
.attachment-preview-pop .app-html-frame {
width:100%; height:280px; border:1px solid #e3e6f0; border-radius:8px; background:white;
}
body.dark-mode .attachment-preview-pop .app-html-frame { border-color:#373848; }
.attachment-preview-pop .app-snippet {
font-size:11px; line-height:1.5; color:#555; white-space:pre-wrap;
max-height:280px; overflow:hidden; font-family:ui-monospace,monospace;
}
body.dark-mode .attachment-preview-pop .app-snippet { color:#aaa; }
.attachment-preview-pop .app-loading,
.attachment-preview-pop .app-empty {
font-size:12px; color:#999; padding:14px 4px; text-align:center;
}
/* ============================================================ */
/* CHAT FILE CARD (file sent into the conversation) */
/* ============================================================ */
/* Flat compact document card inside a chat message */
.msg-attachments { display:flex; flex-direction:column; gap:6px; margin-bottom:6px; }
.msg-attachments:last-child { margin-bottom:0; }
.msg-text { margin-top:2px; }
.chat-doc-card {
display:flex; align-items:center; gap:10px;
background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28);
border-radius:10px; padding:6px 10px; max-width:260px;
}
.chat-doc-card .cdoc-thumb {
width:30px; height:30px; border-radius:7px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-size:14px;
}
.chat-doc-card .cdoc-info { display:flex; flex-direction:column; min-width:0; }
.chat-doc-card .cdoc-name { font-size:12px; font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-doc-card .cdoc-fmt { font-size:10px; color:rgba(255,255,255,.8); }
/* Big image preview card */
.chat-img-card { display:block; max-width:260px; width:fit-content; border-radius:12px; overflow:hidden; line-height:0; position:relative; }
.chat-img-card .cimg-preview { max-width:260px; max-height:240px; width:auto; height:auto; object-fit:contain; display:block; border-radius:12px; }
.chat-img-card .cimg-loading { padding:24px; text-align:center; color:#fff; opacity:.8; line-height:normal; }
.chat-img-card .cimg-name { display:none; }
.chat-file-card .cfc-thumb {
width:42px; height:42px; border-radius:10px; flex-shrink:0;
display:flex; align-items:center; justify-content:center; font-size:20px;
}
.chat-file-card .cfc-info { min-width:0; }
.chat-file-card .cfc-name {
font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden;
text-overflow:ellipsis; color:#fff;
}
.chat-file-card .cfc-meta { font-size:11px; opacity:.85; margin-top:2px; color:#fff; }
/* When inside a light AI bubble the text needs dark color — but file cards are
sent by the user (purple bubble), so white works. Fallback for safety: */
.bubble.user .chat-file-card { background:rgba(255,255,255,.18); }
/* ============================================================ */
/* ATTACHMENT ADD-TO-PROMPT BUTTON (left of thumb, on hover) */
/* ============================================================ */
.file-thumb-wrap { position:relative; display:flex; align-items:center; flex-shrink:0; overflow:visible; }
.file-add-btn {
position:absolute; left:-14px; top:50%; transform:translateY(-50%) scale(.5);
width:24px; height:24px; border-radius:50%; border:2px solid #fff;
background:var(--accent); color:#fff; cursor:pointer; font-size:10px;
display:flex; align-items:center; justify-content:center; z-index:50;
opacity:0; pointer-events:none; transition:.18s;
box-shadow:0 2px 10px rgba(var(--accent-rgb),.5);
}
.file-item:hover .file-add-btn { opacity:1; pointer-events:auto; transform:translateY(-50%) scale(1); }
.file-add-btn:hover { background:#6558e6; transform:translateY(-50%) scale(1.15); }
body.dark-mode .file-add-btn { border-color:#262733; }
/* Status dot on file thumb (green=analyzed, orange=stored) */
.file-status-dot { position:absolute; bottom:-4px; left:-4px; width:16px; height:16px; border-radius:50%; border:2.5px solid #fff; z-index:10; box-shadow:0 1px 4px rgba(0,0,0,.25); }
body.dark-mode .file-status-dot { border-color:#323345; }
.file-status-dot.analyzed { background:#22c55e; }
.file-status-dot.stored { background:#f59e0b; }
.file-thumb { position:relative; }
/* Hover actions for stored files */
.file-hover-actions { position:absolute; top:-8px; right:-6px; display:flex; gap:3px; opacity:0; pointer-events:none; transition:.15s; z-index:60; }
.file-item:hover .file-hover-actions { opacity:1; pointer-events:auto; }
.file-hover-actions button { width:22px; height:22px; border-radius:6px; border:1px solid #e5e5ea; background:#fff; color:#555; cursor:pointer; font-size:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.12); transition:.12s; }
.file-hover-actions button:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
body.dark-mode .file-hover-actions button { background:#323342; border-color:#424352; color:#ccc; }
body.dark-mode .file-hover-actions button:hover { background:var(--accent); color:#fff; }
/* ============================================================ */
/* SIDEBAR ACTIVITIES */
/* ============================================================ */
.sidebar-activities-content { padding:2px 12px 8px; }
.sidebar-act-item {
display:flex; align-items:flex-start; gap:8px; padding:6px 8px; border-radius:8px;
font-size:11px; color:#aeb9cf; line-height:1.35;
}
.sidebar-act-item:hover { background:rgba(var(--accent-rgb),.1); }
.sidebar-act-item svg.lucide { font-size:10px; margin-top:2px; opacity:.7; flex-shrink:0; }
.sidebar-act-item .sa-text { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-act-item .sa-time { font-size:9px; opacity:.5; flex-shrink:0; }
.sidebar-act-empty { padding:8px 12px; font-size:11px; color:#6b7189; }
.sidebar-act-more {
padding:6px 8px; font-size:11px; color:var(--accent); cursor:pointer; text-align:center;
border-radius:6px; margin-top:2px; font-weight:600;
}
.sidebar-act-more:hover { background:rgba(var(--accent-rgb),.12); }
/* Add-folder button in sidebar */
.add-folder-btn {
width:100%; background:rgba(var(--accent-rgb),.12); color:#a99bf0; border:1px dashed #4a4570;
border-radius:8px; padding:7px; font-size:12px; cursor:pointer; transition:.18s;
display:flex; align-items:center; justify-content:center; gap:6px;
}
.add-folder-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
/* ============================================================ */
/* THREAD DATE DRAWERS */
/* ============================================================ */
.thread-drawers { display:flex; flex-direction:column; gap:18px; margin-top:10px; }
.thread-drawer { }
.drawer-head {
display:flex; align-items:center; gap:10px; cursor:pointer;
padding:6px 2px; margin-bottom:10px; border-bottom:1px solid #ececf2;
user-select:none;
}
body.dark-mode .drawer-head { border-bottom-color:#323342; }
.drawer-head svg.lucide { font-size:12px; color:var(--accent); width:14px; }
.drawer-label { font-size:14px; font-weight:700; color:#1a1a2e; }
body.dark-mode .drawer-label { color:#e0e0e0; }
.drawer-count { font-size:11px; font-weight:600; color:#999; background:#f0f0f5; padding:1px 8px; border-radius:10px; }
body.dark-mode .drawer-count { background:#323342; }
.drawer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:16px; align-items:start; }
@media (max-width:1100px){ .drawer-grid { grid-template-columns:repeat(auto-fill,minmax(252px,1fr)); gap:12px; } }
@media (max-width:700px){ .drawer-grid { grid-template-columns:1fr 1fr; gap:10px; } }
@media (max-width:480px){ .drawer-grid { grid-template-columns:1fr; } }
/* Pinned cards get a subtle accent so "leftmost/first" reads clearly */
.card.pinned-card { border-color:#d8d2f7; box-shadow:0 4px 20px rgba(var(--accent-rgb),.10); }
/* ============================================================ */
/* SELECTABLE LIST (checkbox options from AI responses) */
/* ============================================================ */
.sel-list {
display:flex; flex-direction:column; gap:4px;
margin:8px 0; padding:10px 12px;
background:#f7f6ff; border:1px solid var(--accent-soft); border-radius:12px;
}
.sel-list-head { font-size:12px; font-weight:700; color:var(--accent-deep); margin-bottom:4px; display:flex; align-items:center; gap:7px; }
body.dark-mode .sel-list-head { color:#a99bf0; }
body.dark-mode .sel-list { background:#1f1d2e; border-color:#332f4a; }
.sel-list-item {
display:flex; align-items:flex-start; gap:9px;
padding:6px 8px; border-radius:8px; cursor:pointer;
font-size:13px; line-height:1.45; transition:background .15s;
}
.sel-list-item:hover { background:rgba(var(--accent-rgb),.08); }
body.dark-mode .sel-list-item:hover { background:rgba(var(--accent-rgb),.15); }
.sel-list-cb {
width:16px; height:16px; margin-top:2px; flex-shrink:0;
accent-color:var(--accent); cursor:pointer;
}
.sel-list-send {
align-self:flex-start; margin-top:6px;
display:flex; align-items:center; gap:7px;
background:var(--accent); color:#fff; border:none; border-radius:9px;
padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer;
transition:.18s;
}
.sel-list-send:hover { background:#6558e6; transform:translateY(-1px); }
/* ============================================================ */
/* WORKSPACE SELECTION → PROMPT */
/* ============================================================ */
.workspace-tree-row { display:flex; align-items:center; gap:6px; }
.workspace-cb { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; flex-shrink:0; margin-left:calc(var(--depth,0) * 14px); }
.workspace-row-body { display:flex; align-items:center; gap:6px; flex:1; min-width:0; cursor:pointer; }
.workspace-row-body > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-send-row { display:flex; justify-content:flex-end; margin-top:10px; padding-top:2px; }
.workspace-send-btn {
display:flex; align-items:center; gap:7px;
background:var(--accent); color:#fff; border:none; border-radius:9px;
padding:7px 13px; font-size:12px; font-weight:600; cursor:pointer; transition:.18s;
}
.workspace-send-btn:hover { background:#6558e6; transform:translateY(-1px); }
/* Path tag inside a sent message bubble */
.path-tag {
display:inline-flex; align-items:center; gap:5px;
background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.32);
border-radius:8px; padding:1px 8px; font-size:12px; margin:1px 2px;
cursor:default; vertical-align:middle;
}
.path-tag svg.lucide { font-size:10px; opacity:.85; }
/* ============================================================ */
/* FILE ID + COPY (in attachment card) */
/* ============================================================ */
.file-side { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
.file-fid {
display:flex; align-items:center; gap:4px;
font-size:10px; color:#999;
}
.file-fid code {
font-family:ui-monospace,monospace; font-size:10px; color:var(--accent);
background:rgba(var(--accent-rgb),.1); padding:1px 5px; border-radius:5px;
}
.fid-copy {
background:none; border:none; color:#aaa; cursor:pointer; font-size:10px; padding:1px 3px; border-radius:4px;
}
.fid-copy:hover { color:var(--accent); background:rgba(var(--accent-rgb),.12); }
body.dark-mode .file-fid { color:#9b9bac; }
/* Path chip in pending row */
.pending-chip.path-chip .pc-thumb { font-size:13px; }
.msg-paths { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
/* ============================================================ */
/* NEW THREAD TILE (in most-recent drawer) */
/* ============================================================ */
.new-thread-tile {
display:flex; align-items:center; justify-content:center;
width:56px; height:56px; align-self:center; border:none; cursor:pointer;
background:#1b1c2b; color:var(--accent); border-radius:14px;
font-size:22px; transition:.2s;
box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.new-thread-tile:hover { background:#232438; color:#a99bf0; transform:translateY(-2px); }
body.dark-mode .new-thread-tile { background:#282935; color:var(--accent); }
body.dark-mode .new-thread-tile:hover { background:#323342; color:#a99bf0; }
/* ===== Console de Administração — PÁGINA inteira ===== */
.admin-page { position: fixed; inset: 0; z-index: 2000; background: #f5f5fa; display: none; flex-direction: column; }
.admin-page.active { display: flex; }
body.dark-mode .admin-page { background: #1c1d25; }
/* Modais abertos a partir do Admin precisam ficar acima da página do Admin. */
#akbDocModal { z-index: 2100; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-bottom: 1px solid #e6e4f0; background: #fff; flex-shrink: 0; }
body.dark-mode .admin-topbar { background: #23242e; border-bottom-color: #323342; }
.admin-topbar-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
.admin-back { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 14px; border-radius: 10px; border: 1px solid #e3e6f0; background: #fff; color: #555; cursor: pointer; transition: .15s; white-space: nowrap; }
.admin-back:hover { border-color: var(--accent); color: var(--accent); }
body.dark-mode .admin-back { background: #323342; border-color: #424354; color: #ccc; }
.admin-title { font-size: 17px; font-weight: 700; color: #2c2840; display: inline-flex; align-items: center; gap: 9px; }
.admin-title svg.lucide { color: var(--accent); }
body.dark-mode .admin-title { color: #ece9fb; }
.admin-layout { flex: 1; display: flex; min-height: 0; }
.admin-tabs { width: 210px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid #e6e4f0; overflow-y: auto; background: #fbfaff; }
body.dark-mode .admin-tabs { background: #20212c; border-right-color: #323342; }
.atab { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 14px; padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--accent-hover); cursor: pointer; transition: .15s; }
.atab svg.lucide { width: 18px; text-align: center; }
.atab:hover { background: #eceaf9; }
.atab.active { background: var(--accent); color: white; }
body.dark-mode .atab { color: var(--accent-light); }
body.dark-mode .atab:hover { background: #2b2c42; }
body.dark-mode .atab.active { background: var(--accent); color: white; }
/* O corpo continua ocupando tudo (a barra de rolagem fica na borda); quem tem
largura máxima e centraliza é o conteúdo. Antes o max-width estava aqui, sem
margem automática — o painel ficava estreito E colado à esquerda. */
.admin-body { flex: 1; overflow-y: auto; padding: 24px 28px; min-width: 0; }
.admin-tab-content { max-width: 1400px; margin: 0 auto; }
/* Célula de ações: os botões EMPILHAM em vez de estourar a largura da tabela.
A linha de empresa tem sete deles. */
.admin-acoes { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.admin-acoes .admin-mini { white-space: nowrap; }
.admin-table td.acoes { text-align: right; }
/* Mobile: tabs viram uma barra horizontal rolável no topo do conteúdo */
@media (max-width: 760px) {
.admin-layout { flex-direction: column; }
.admin-tabs { width: auto; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid #e6e4f0; padding: 10px; }
body.dark-mode .admin-tabs { border-bottom-color: #323342; }
.atab { white-space: nowrap; }
.atab span { display: none; }
.atab svg.lucide { width: auto; }
.admin-body { padding: 16px; }
}
.admin-row-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.admin-input { font-size: 14px; padding: 8px 12px; border-radius: 8px; border: 1px solid #e3e6f0; background: white; color: #333; outline: none; }
.admin-input:focus { border-color: var(--accent); }
body.dark-mode .admin-input { background: #323342; border-color: #424354; color: #ddd; }
.admin-field { margin-bottom: 12px; }
.admin-field label { display: block; font-size: 12px; color: #888; margin-bottom: 4px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: #aaa; padding: 8px; border-bottom: 1px solid #eceaf5; }
.admin-table td { padding: 10px 8px; border-bottom: 1px solid #f3f2f9; vertical-align: middle; }
body.dark-mode .admin-table td { border-bottom-color: #323342; }
.admin-badge { font-size: 11px; padding: 2px 8px; border-radius: 20px; margin-right: 4px; }
.admin-badge.ok { background: #e6f7ee; color: #1a8a4f; }
.admin-badge.off { background: #fdecea; color: #c0392b; }
.admin-badge.upd { background: #fdf1dc; color: #a26100; }
body.dark-mode .admin-badge.ok { background: #14351f; color: #5dca8c; }
body.dark-mode .admin-badge.off { background: #3a1512; color: #f0958c; }
body.dark-mode .admin-badge.upd { background: #3a2c12; color: #e5b269; }
.admin-mini { font-size: 12px; padding: 5px 10px; border-radius: 6px; border: 1px solid #ddd; background: white; color: #555; cursor: pointer; margin-left: 4px; }
.admin-mini:hover { border-color: var(--accent); color: var(--accent); }
.admin-mini.danger:hover { border-color: #e74c3c; color: #e74c3c; }
body.dark-mode .admin-mini { background: #323342; border-color: #424354; color: #bbb; }
.admin-key-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border: 1px solid #eceaf5; border-radius: 10px; margin-bottom: 8px; font-size: 14px; }
body.dark-mode .admin-key-row { border-color: #323342; }
/* Painel de métricas (aba Painel) */
.metric-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.metric-card { border: 1px solid #eceaf5; border-radius: 12px; padding: 14px; text-align: center; background: var(--accent-faint); }
body.dark-mode .metric-card { background: #201f30; border-color: #34314f; }
.metric-ico { font-size: 18px; color: var(--accent); margin-bottom: 6px; }
.metric-val { font-size: 26px; font-weight: 700; color: #2c2840; line-height: 1.1; }
body.dark-mode .metric-val { color: #ece9fb; }
.metric-lbl { font-size: 11px; color: #999; margin-top: 4px; }
.metric-section { margin: 18px 0; }
.metric-section h4 { font-size: 13px; color: #666; margin: 0 0 10px; text-transform: uppercase; letter-spacing: .4px; }
body.dark-mode .metric-section h4 { color: #aaa; }
.metric-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.metric-bar-lbl { width: 80px; font-size: 13px; color: #555; }
body.dark-mode .metric-bar-lbl { color: #bbb; }
.metric-bar-track { flex: 1; height: 12px; background: #eceaf5; border-radius: 999px; overflow: hidden; }
body.dark-mode .metric-bar-track { background: #323342; }
.metric-bar-fill { display: block; height: 100%; border-radius: 999px; min-width: 2px; transition: width .3s; }
.metric-bar-num { width: 56px; text-align: right; font-size: 12px; font-weight: 600; color: #666; }
body.dark-mode .metric-bar-num { color: #bbb; }
.metric-roles { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #555; }
body.dark-mode .metric-roles { color: #bbb; }
.metric-hint { font-size: 12px; color: #999; margin: 10px 0 0; line-height: 1.5; }
/* Página Sistema — seções de configuração empilhadas */
.sys-block { margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid #eceaf5; }
body.dark-mode .sys-block { border-bottom-color: #323342; }
.sys-block:last-child { border-bottom: none; }
.sys-h { font-size: 15px; color: #2c2840; margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.sys-h svg.lucide { color: var(--accent); font-size: 14px; }
body.dark-mode .sys-h { color: #ece9fb; }
/* Editor inline de teto/cota (empresa e usuário) */
.admin-editor-panel { border: 1px solid #e0dcf7; background: var(--accent-faint); border-radius: 12px; padding: 14px 16px; margin: 4px 0 16px; }
body.dark-mode .admin-editor-panel { background: #201f30; border-color: #38335a; }
.admin-editor-title { font-size: 14px; margin-bottom: 12px; color: #3a3550; }
body.dark-mode .admin-editor-title { color: #d6d2ee; }
.admin-grant-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.admin-grant-name { display: flex; align-items: center; gap: 7px; min-width: 130px; font-size: 13px; font-weight: 600; color: #444; cursor: pointer; }
body.dark-mode .admin-grant-name { color: #ccc; }
.admin-grant-field { display: inline-flex; align-items: center; gap: 6px; }
.admin-grant-num { max-width: 96px; }
.admin-grant-unit { font-size: 12px; color: #999; white-space: nowrap; }
.admin-grant-hint { font-size: 12px; color: #999; margin: 8px 0 0; line-height: 1.5; }
/* ===== CO-OP: entrar por código, typing ao vivo, threads compartilhadas ===== */
.btn-join-coop {
font-size: 13px; padding: 8px 14px; border-radius: 10px; border: 1px solid #cfc9f5;
background: #f4f3fb; color: var(--accent-hover); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
text-decoration: none;
}
.btn-join-coop:hover { background: #eceaf9; border-color: var(--accent); }
body.dark-mode .btn-join-coop { background: #323342; border-color: #4a4470; color: var(--accent-light); }
/* Módulo de código: botão dividido em dois motores. OpenCode é o caminho
primário (lado roxo + badge "Recomendado") para reduzir fadiga de decisão;
o harness é o laboratório experimental (badge "Beta"). */
.code-split {
display: inline-flex; align-items: stretch; border: 1px solid #cfc9f5;
border-radius: 10px; overflow: hidden; background: #f4f3fb;
}
/* Dentro de uma thread o botão dividido some: a topbar da thread já tem as
ações próprias, e o módulo de código não depende da thread aberta. O
!important vence o display inline que o initCodeModuleButton aplica. */
body.thread-open .code-split { display: none !important; }
.code-split-lado {
display: inline-flex; align-items: center; gap: 6px; border: none;
background: transparent; padding: 5px 10px; font-size: 11.5px; font-weight: 600;
color: var(--accent-hover); cursor: pointer; font-family: inherit; white-space: nowrap;
}
.code-split-lado + .code-split-lado { border-left: 1px solid #cfc9f5; }
.code-split-lado:hover { background: #eceaf9; }
.code-split-primario { background: var(--accent); color: #fff; }
.code-split-primario:hover { background: #6558e6; }
.code-split-lado svg.lucide { width: 13px; height: 13px; }
/* Selo ("Recomendado"/"Beta") como texto pequeno SOB o rótulo, não como pill
ao lado — mantém o botão compacto na página principal. */
.code-split-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.code-split-sub {
font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
opacity: .8;
}
body.dark-mode .code-split { background: #323342; border-color: #4a4470; }
body.dark-mode .code-split-lado { color: var(--accent-light); }
body.dark-mode .code-split-lado + .code-split-lado { border-left-color: #4a4470; }
body.dark-mode .code-split-lado:hover { background: #3b3c52; }
body.dark-mode .code-split-primario { background: var(--accent); color: #fff; }
body.dark-mode .code-split-primario:hover { background: #6558e6; }
.coop-live-typing {
background: #f4f3fb; border: 1px dashed #cfc9f5; border-radius: 10px;
padding: 6px 10px; margin-bottom: 6px; font-size: 12px;
}
body.dark-mode .coop-live-typing { background: #2b2c3970; border-color: #4a4470; }
.coop-live-line { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.coop-live-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.coop-live-name { font-weight: 600; color: #666; }
body.dark-mode .coop-live-name { color: #aaa; }
.coop-live-text { color: #444; opacity: .85; }
body.dark-mode .coop-live-text { color: #ccc; }
.sidebar-shared-content { padding: 4px 8px; }
.shared-thread-item {
background: #f4f3fb; border: 1px solid var(--accent-soft); border-radius: 10px;
padding: 8px 10px; cursor: pointer; margin-bottom: 6px;
}
.shared-thread-item:hover { border-color: var(--accent); }
body.dark-mode .shared-thread-item { background: #323342; border-color: #424354; }
.shared-thread-title { font-size: 12px; font-weight: 600; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.dark-mode .shared-thread-title { color: #ddd; }
.shared-thread-code { font-size: 10px; color: #999; margin-top: 2px; letter-spacing: 1px; }
.shared-thread-avatars { display: flex; gap: 3px; margin-top: 6px; flex-wrap: wrap; }
.coop-avatar.shared-mini { width: 22px; height: 22px; font-size: 9px; position: relative; }
.coop-avatar.shared-mini.offline { opacity: .4; }
/* ===== Divisórias arrastáveis (redimensionar colunas) ===== */
.col-resizer {
width: 6px; flex-shrink: 0; cursor: col-resize; background: transparent;
position: relative; z-index: 20; transition: background .15s;
}
.col-resizer:hover, .col-resizer.dragging { background: var(--accent); }
.col-resizer::after {
content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
width: 2px; height: 40px; border-radius: 2px; background: #d8dcef;
}
body.dark-mode .col-resizer::after { background: #424354; }
.col-resizer:hover::after, .col-resizer.dragging::after { background: white; }
body.resizing-cols { cursor: col-resize; user-select: none; }
body.resizing-cols iframe { pointer-events: none; }
/* ===== Banner de reentrar na sala CO-OP ===== */
.coop-reenter-banner {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
background: #f4f3fb; border: 1px solid #cfc9f5; border-radius: 10px;
padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: var(--accent-hover);
}
body.dark-mode .coop-reenter-banner { background: #323342; border-color: #4a4470; color: var(--accent-light); }
.coop-reenter-banner button {
font-size: 13px; padding: 6px 12px; border-radius: 8px; border: none;
background: var(--accent); color: white; cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.coop-reenter-banner button:hover { background: #6a5de0; }
.coop-reenter-banner .coop-banner-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.coop-reenter-banner button.coop-banner-x {
background: transparent; color: inherit; padding: 4px 6px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.coop-reenter-banner button.coop-banner-x:hover { background: rgba(var(--accent-rgb),.15); }
/* ===== Convite direto CO-OP (mesma empresa) — aviso flutuante ===== */
.coop-invite-stack {
position: fixed; right: 20px; bottom: 20px; z-index: 3000;
display: flex; flex-direction: column; gap: 10px; max-width: 360px;
}
.coop-invite-card {
background: #f4f3fb; border: 1px solid #cfc9f5; border-left: 4px solid var(--accent);
border-radius: 10px; padding: 12px 14px; font-size: 13px; color: #3d3660;
box-shadow: 0 6px 22px rgba(60,50,120,.18);
}
body.dark-mode .coop-invite-card { background: #323342; border-color: #4a4470; color: #d5d0f0; }
.coop-invite-txt { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.coop-invite-txt svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.coop-invite-btns { display: flex; gap: 8px; justify-content: flex-end; }
.coop-invite-join {
font-size: 12px; padding: 5px 14px; border-radius: 8px; border: none;
background: var(--accent); color: #fff; cursor: pointer;
}
.coop-invite-join:hover { background: #6a5de0; }
.coop-invite-dismiss {
font-size: 12px; padding: 5px 14px; border-radius: 8px;
border: 1px solid #cfc9f5; background: transparent; color: #777; cursor: pointer;
}
.coop-invite-dismiss:hover { background: rgba(var(--accent-rgb),.08); }
body.dark-mode .coop-invite-dismiss { border-color: #4a4470; color: #9a94b8; }
/* ===== Seção só do grid (tela principal) na coluna direita ===== */
.grid-only { display:flex; flex-direction:column; gap:12px; }
.thread-active .grid-only { display:none; }
/* ===== Avatares de participantes no card (thread co-op) ===== */
.coop-card-members { display:flex; align-items:center; }
.coop-card-avatar {
width:24px; height:24px; border-radius:50%; border:2px solid white;
display:flex; align-items:center; justify-content:center;
font-size:9px; font-weight:700; color:white; margin-left:-8px;
background:var(--accent); overflow:hidden; flex-shrink:0;
}
.coop-card-avatar:first-child { margin-left:0; }
.coop-card-avatar.more { background:#b8b3d9; color:#fff; }
.coop-card-avatar.offline { opacity:.4; filter:grayscale(.5); }
body.dark-mode .coop-card-avatar { border-color:#262733; }
.coop-card-badge {
display:inline-flex; align-items:center; justify-content:center;
width:24px; height:24px; border-radius:50%; background:#f0eefb; color:var(--accent); font-size:11px;
}
body.dark-mode .coop-card-badge { background:#323342; }
/* ===== Timestamp no chat CO-OP ===== */
.coop-chat-col { display:flex; flex-direction:column; min-width:0; flex:1; }
.coop-chat-time { font-size:9px; color:#8a8a99; margin-top:3px; padding:0 2px; }
.coop-chat-msg.mine .coop-chat-time { text-align:right; }
body.dark-mode .coop-chat-time { color:#9a9aa8; }
/* ===== Tracker: switch (dia/noite) sem fundo de botão, painel ao vivo, fluxograma ===== */
/* Interruptor estilo dia/noite + rótulo ao lado; o estado ON pinta o trilho.
O rótulo carrega o title que explica o Tracker no mouseover. */
.tracker-switch {
display:inline-flex; align-items:center; gap:7px;
background:none; border:none; padding:0; margin-left:10px;
cursor:pointer; color:#666; font-size:12px; font-weight:600;
}
.tracker-switch .tracker-track {
width:30px; height:17px; border-radius:999px; background:#d8dbe6;
position:relative; transition:.15s; flex-shrink:0;
}
.tracker-switch .tracker-knob {
position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:.15s;
}
.tracker-switch.active { color:var(--accent-hover); }
.tracker-switch.active .tracker-track { background:var(--accent); }
.tracker-switch.active .tracker-knob { left:15px; }
body.dark-mode .tracker-switch { color:#9a9aa8; }
body.dark-mode .tracker-switch .tracker-track { background:#424354; }
body.dark-mode .tracker-switch.active { color:var(--accent-light); }
/* Botão "Fontes" na barra de ações da resposta */
.sources-btn { display:inline-flex; align-items:center; gap:5px; }
.sources-btn .sources-count { background:var(--accent); color:#fff; border-radius:999px; font-size:11px; font-weight:700; padding:0 6px; min-width:16px; text-align:center; }
/* Modal de fontes (criado dinamicamente) */
.sources-overlay { position:fixed; inset:0; z-index:2200; background:rgba(20,20,35,.5); display:flex; align-items:center; justify-content:center; padding:20px; }
.sources-modal { background:#fff; border-radius:16px; max-width:560px; width:100%; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25); }
body.dark-mode .sources-modal { background:#262733; }
.sources-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eceaf5; }
body.dark-mode .sources-head { border-bottom-color:#323342; }
.sources-head h3 { margin:0; font-size:16px; display:flex; align-items:center; gap:8px; color:#2c2840; }
.sources-head h3 svg.lucide { color:var(--accent); }
body.dark-mode .sources-head h3 { color:#ece9fb; }
.sources-close { background:none; border:none; font-size:18px; color:#999; cursor:pointer; padding:4px 8px; border-radius:8px; }
.sources-close:hover { background:#f0f0f5; color:#333; }
body.dark-mode .sources-close:hover { background:#323342; color:#ddd; }
.sources-list { list-style:none; margin:0; padding:12px 20px; overflow-y:auto; }
.sources-list li { padding:10px 0; border-bottom:1px solid #f3f2f9; }
body.dark-mode .sources-list li { border-bottom-color:#323342; }
.sources-list li:last-child { border-bottom:none; }
.src-title { font-weight:600; color:var(--accent-hover); text-decoration:none; font-size:14px; line-height:1.4; }
.src-title:hover { text-decoration:underline; }
body.dark-mode .src-title { color:var(--accent-light); }
.src-num { color:#999; font-weight:700; margin-right:2px; }
.src-url { font-size:12px; color:#999; margin-top:2px; word-break:break-all; }
.sources-note { font-size:12px; color:#999; margin:0; padding:12px 20px 16px; border-top:1px solid #eceaf5; }
body.dark-mode .sources-note { border-top-color:#323342; }
/* Knowledge chips (GraphRAG por thread) */
.knowledge-chips { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:8px; padding:6px 0 2px; }
.knowledge-chips-label { font-size:11.5px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:4px; }
.knowledge-chip { font-size:11px; background:#f0eeff; color:var(--accent-hover); border:1px solid #ddd8f8; border-radius:999px; padding:2px 9px; font-weight:500; }
body.dark-mode .knowledge-chip { background:#2a2845; color:var(--accent-light); border-color:#3d3860; }
/* Knowledge modal (dropzone, tabs, doc list) */
.k-dropzone { border:2px dashed #d4d0f0; border-radius:12px; padding:24px 16px; text-align:center; cursor:pointer; transition:border-color .2s, background .2s; }
.k-dropzone:hover, .k-dropzone.dragover { border-color:var(--accent); background:#f8f7ff; }
body.dark-mode .k-dropzone { border-color:#3d3860; }
body.dark-mode .k-dropzone:hover, body.dark-mode .k-dropzone.dragover { border-color:var(--accent); background:#22203a; }
.k-tabs .btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.k-doc-item { display:flex; align-items:center; justify-content:space-between; padding:7px 10px; border-radius:8px; background:#f8f7fc; margin-bottom:5px; font-size:12.5px; }
body.dark-mode .k-doc-item { background:#2a2b42; }
.k-doc-item .k-doc-name { font-weight:500; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%; }
body.dark-mode .k-doc-item .k-doc-name { color:#ddd; }
.k-doc-item .k-doc-remove { background:none; border:none; color:#ccc; cursor:pointer; font-size:13px; padding:2px 6px; border-radius:6px; }
.k-doc-item .k-doc-remove:hover { color:#e05555; background:#fef2f2; }
.k-import-item { display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:8px; background:#f8f7fc; margin-bottom:5px; }
body.dark-mode .k-import-item { background:#2a2b42; }
.k-import-info { display:flex; flex-direction:column; gap:2px; }
.k-import-info strong { font-size:13px; color:#333; }
body.dark-mode .k-import-info strong { color:#ddd; }
.k-import-info small { font-size:11px; color:#999; }
/* Painel de raciocínio ao vivo dentro do balão */
.tracker-live { background:#f7f6fc; border:1px solid var(--accent-soft); border-radius:10px; margin:6px 0 10px; overflow:hidden; }
body.dark-mode .tracker-live { background:#2b2c3980; border-color:#424354; }
.tracker-live-head { font-size:11px; font-weight:700; color:var(--accent); padding:7px 12px; border-bottom:1px solid var(--accent-soft); display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none; }
.tracker-live-head::-webkit-details-marker { display:none; }
.tracker-live[open] .tracker-live-head { border-bottom:1px solid var(--accent-soft); }
body.dark-mode .tracker-live-head { border-color:#424354; }
.tracker-live-body { font-size:12px; color:#777; line-height:1.45; padding:10px 12px 10px 14px; max-height:200px; overflow-y:auto; }
body.dark-mode .tracker-live-body { color:#9a9aa8; }
.tracker-view-btn { color:var(--accent) !important; }
.tracker-view-btn:hover { text-decoration:underline; }
/* Modal do fluxograma */
.tracker-modal { max-width:640px; width:92vw; max-height:88vh; display:flex; flex-direction:column; }
.tracker-toolbar { display:flex; align-items:center; justify-content:space-between; margin:12px 0; }
.tracker-modal-body { overflow-y:auto; flex:1; padding:4px; }
.tracker-flow { display:flex; flex-direction:column; align-items:stretch; }
.tracker-node { background:var(--accent-faint); border:1px solid #eceaf5; border-radius:10px; padding:10px 14px; }
body.dark-mode .tracker-node { background:#2b2c37; border-color:#3b3c52; }
.tracker-node-head { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:700; text-transform:uppercase; margin-bottom:4px; }
.tracker-node-badge { width:20px; height:20px; border-radius:50%; color:white; display:flex; align-items:center; justify-content:center; font-size:10px; }
.tracker-node-num { margin-left:auto; opacity:.5; }
.tracker-node-text { font-size:13px; color:#444; line-height:1.55; white-space:pre-wrap; }
body.dark-mode .tracker-node-text { color:#ccc; }
.tracker-connector { display:flex; justify-content:center; padding:3px 0; }
.tracker-arrow { color:#c8c8d8; font-size:12px; }
.tracker-raw { font-size:12px; color:#555; line-height:1.6; white-space:pre-wrap; background:#f7f6fc; padding:14px; border-radius:10px; font-family:inherit; }
body.dark-mode .tracker-raw { background:#2b2c37; color:#bbb; }
/* ===== Tracker: fluxo horizontal (mapa) ===== */
.tracker-hflow { display:flex; align-items:stretch; gap:0; overflow-x:auto; padding:16px 4px; }
.tracker-hnode { min-width:200px; max-width:240px; flex-shrink:0; background:var(--accent-faint); border:1px solid #eceaf5; border-radius:12px; padding:12px 14px; display:flex; flex-direction:column; }
body.dark-mode .tracker-hnode { background:#2b2c37; border-color:#3b3c52; }
.tracker-hnode-start { border-top:3px solid #1a8a4f; }
.tracker-hnode-head { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:700; text-transform:uppercase; margin-bottom:6px; }
.tracker-hnode-badge { width:20px; height:20px; border-radius:50%; color:white; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0; }
.tracker-hnode-num { margin-left:auto; opacity:.5; }
.tracker-hnode-text { font-size:12.5px; color:#444; line-height:1.5; white-space:pre-wrap; overflow-y:auto; max-height:220px; }
body.dark-mode .tracker-hnode-text { color:#ccc; }
.tracker-hconnector { display:flex; align-items:center; padding:0 8px; color:#c8c8d8; flex-shrink:0; }
.tracker-files { margin-top:8px; padding-top:8px; border-top:1px dashed #ddd; }
body.dark-mode .tracker-files { border-color:#424354; }
.tracker-files-label { font-size:10px; color:#999; text-transform:uppercase; margin-bottom:4px; }
.tracker-file { font-size:11px; color:var(--accent); padding:2px 0; display:flex; align-items:center; gap:5px; }
/* ===== Drag & drop na barra de chat ===== */
.chat-input.drag-over { outline:2px dashed var(--accent); outline-offset:2px; background:#f7f6fc; }
body.dark-mode .chat-input.drag-over { background:#2b2c42; }
/* ===== Tracker: passos com linha vertical (dentro do balão) — compacto ===== */
.tracker-steps { position:relative; }
.tracker-step { position:relative; padding:0 0 8px 18px; }
.tracker-step:last-child { padding-bottom:0; }
/* Linha vertical fina ligando os passos */
.tracker-step::before {
content:''; position:absolute; left:4px; top:8px; bottom:-1px; width:1px; background:#dcd9ea;
}
.tracker-step:last-child::before { display:none; }
body.dark-mode .tracker-step::before { background:#3a3850; }
.tracker-step-dot {
position:absolute; left:0; top:5px; width:9px; height:9px; border-radius:50%;
border:2px solid #f7f6fc; z-index:1;
}
body.dark-mode .tracker-step-dot { border-color:#2b2c39; }
.tracker-step-text { font-size:12px; color:#777; line-height:1.45; }
body.dark-mode .tracker-step-text { color:#9a9aa8; }
/* ============================================================
RESPONSIVO — Tablet e Smartphone (drawers deslizáveis)
============================================================ */
.mobile-only { display:none; }
.mobile-drawer-btn {
background:transparent; border:none; color:var(--accent); font-size:20px;
width:40px; height:40px; border-radius:10px; cursor:pointer; flex-shrink:0;
}
.mobile-drawer-btn:active { background:rgba(var(--accent-rgb),.12); }
.mobile-drawer-overlay {
display:none; position:fixed; inset:0; background:rgba(0,0,0,.45);
z-index:150; opacity:0; transition:opacity .25s ease;
}
.mobile-drawer-overlay.active { display:block; opacity:1; }
/* ---------- Tablet e menores (<=1024px) ---------- */
@media (max-width:1024px) {
/* Colunas viram drawers deslizáveis por cima do conteúdo */
.sidebar {
position:fixed; top:0; left:0; bottom:0; z-index:200;
width:78%; max-width:420px;
transform:translateX(-100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:2px 0 24px rgba(0,0,0,.18);
}
body.drawer-left-open .sidebar { transform:translateX(0); }
.right-panel {
display:flex !important; position:fixed; top:0; right:0; bottom:0; z-index:200;
width:82%; max-width:440px; box-sizing:border-box;
transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:-2px 0 24px rgba(0,0,0,.18);
border-left:none;
}
body.drawer-right-open .right-panel { transform:translateX(0); }
/* O conteúdo central ocupa a tela toda */
.right-wrapper { width:100%; overflow:visible; }
.col-resizer { display:none; }
.mobile-only { display:inline-flex; align-items:center; justify-content:center; }
/* Altura dinâmica: considera a barra do navegador mobile (evita corte embaixo) */
body { height:calc(100vh / var(--ui-scale)); height:calc(100dvh / var(--ui-scale)); }
.right-wrapper { height:calc(100vh / var(--ui-scale)); height:calc(100dvh / var(--ui-scale)); }
.sidebar { height:calc(100vh / var(--ui-scale)); height:calc(100dvh / var(--ui-scale)); }
/* Menos padding vertical no chat para a barra de envio não ser cortada */
.dashboard.chat-mode #chatView.active { padding:12px 14px; }
/* No mobile a toolbar é fluida (padding 12px da topbar vs 14px do chat) */
.chat-meta-fabs { right:-2px; }
.chat-input-area { padding-bottom:env(safe-area-inset-bottom, 0px); }
/* Topbar mais compacta */
.topbar { gap:8px; padding:10px 12px; }
.topbar .welcome h2 { font-size:16px; }
.topbar .welcome span { display:none; }
.topbar .search { max-width:none; flex:1; min-width:0; }
.topbar .user > div:last-child { display:none; } /* só o avatar */
.topbar-right { gap:10px; flex-shrink:0; }
.theme-toggle { flex-shrink:0; }
/* Thread aberta no mobile: o cabeçalho da thread vive na topbar, mas aqui a
coluna direita é gaveta (fora da tela). A topbar não pode herdar a altura
fixa (84px) nem a largura forçada por JS do desktop — cresce com o conteúdo
e o cabeçalho volta a ser fluido. (!important vence .topbar.thread-mode). */
.topbar, .topbar.thread-mode { height:auto !important; }
.topbar.thread-mode { padding:8px 12px; }
.topbar.thread-mode .chat-header { width:auto !important; flex:1 1 auto !important; min-width:0; margin:0 8px 0 2px; }
.topbar.thread-mode .topbar-right { flex-shrink:0; }
body.thread-open .logo { height:72px; }
/* --- Thread mobile: topo menos espremido (fontes e alvos menores) --- */
.topbar.thread-mode .chat-title-input { font-size:15px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Pasta+badge numa linha só: com o flex-wrap:wrap da base eles empilham quando o
header encolhe e a topbar dobra de altura. nowrap+clip mantém a altura estável. */
.topbar.thread-mode .chat-title-meta-row { flex-wrap:nowrap; min-width:0; max-width:100%; overflow:hidden; }
/* O .cfd-btn (pasta) tem white-space:normal: espremido, quebra o rótulo em
várias linhas (vira 68px) e dobra a topbar. nowrap+clip o mantém numa linha;
min-width:0 no wrapper deixa encolher sem estourar o .chat-header. */
.topbar.thread-mode .chat-folder-dd { min-width:0; overflow:hidden; }
.topbar.thread-mode .cfd-btn { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* O theme-toggle é redundante dentro da thread (vive na topbar do grid e nas
Configurações). Escondê-lo devolve ~62px ao título, que senão fica esmagado
pelo cluster direito (voltar/menu/painel/concierge). */
.topbar.thread-mode .theme-toggle { display:none; }
.topbar.thread-mode .chat-header-left { gap:2px; }
.topbar.thread-mode .chat-folder-dd,
.topbar.thread-mode .chat-folder-dd *,
.topbar.thread-mode .thread-kind-badge { font-size:11px; }
.topbar.thread-mode .topbar-right { gap:6px; }
.chat-actions-mobile { gap:6px; }
.chat-actions-mobile .btn-voltar-mobile,
.chat-actions-menu-btn { width:34px; height:34px; }
.topbar.thread-mode .mobile-drawer-btn { width:34px; height:34px; font-size:17px; }
#chatMetaHome .chat-meta { font-size:11px; }
/* --- 'Na sessão' um pouco mais alto no mobile --- */
#chatMetaHome.has-coop-presence { gap:0 10px; }
#chatMetaHome.has-coop-presence .chat-meta { margin:2px 0; }
#chatMetaHome.has-coop-presence .coop-presence-bar { margin-top:-9px; padding:0; }
/* --- Provider-bar recolhível: vira um PAINEL de 2 linhas sobreposto acima
da caixa. Linha 1: Modo / IA / modelo. Linha 2: Tracker / Busca. --- */
.chat-input-area { position:relative; }
.provider-bar {
display:none;
position:absolute; left:0; right:0; bottom:calc(100% + 8px);
flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 14px;
background:#fff; border:1px solid #e3e6f0; border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,.16); z-index:30;
}
body.dark-mode .provider-bar { background:#2b2c37; border-color:#424354; }
/* Painel aberto sobe um pouco mais, para ficar ACIMA do botão flutuante */
.chat-input-area.provider-open .provider-bar { display:flex; bottom:calc(100% + 52px); }
.provider-bar-label { flex-shrink:0; font-size:12px; }
/* Os 3 selects (Modo/IA/modelo) DIVIDEM a 1ª linha e encolhem sem quebrar */
.provider-bar .provider-select { flex:1 1 0; min-width:0; max-width:none; }
/* Quebra forçada: joga Tracker/Busca para a 2ª linha */
.provider-bar-break { display:block; flex-basis:100%; width:100%; height:0; margin:0; }
.provider-bar .tracker-switch { flex:0 0 auto; padding:7px 0; } /* alvo de toque: era 17px de altura */
/* --- Botão de opções FLUTUANTE: não ocupa uma barra; flutua sobre as
mensagens, no lado direito, acima da caixa de envio (z-index alto). --- */
.provider-bar-toggle {
position:absolute; right:12px; bottom:calc(100% + 10px); z-index:31;
margin:0; border-radius:50%; width:40px; height:40px;
box-shadow:0 3px 14px rgba(0,0,0,.22);
}
/* --- Grid (fora da thread): coop só ícone. Hambúrguer (abre a coluna
esquerda) fica à ESQUERDA; o botão de painel (abre a coluna direita)
fica à DIREITA; coop + toggle ficam à esquerda do botão de painel.
Ordena sem mudar o HTML (só flex order). --- */
body:not(.thread-open) .topbar { flex-wrap:nowrap; }
body:not(.thread-open) #mobileMenuBtn { order:0; }
body:not(.thread-open) .topbar .search { order:1; }
body:not(.thread-open) .topbar-right { order:2; }
body:not(.thread-open) .topbar-right .btn-join-coop { order:1; }
body:not(.thread-open) .topbar-right .theme-toggle { order:2; }
/* Na página principal (grid) o botão de painel direito (tiles empilhados)
é removido — essa coluna não tem uso no mobile aqui. (Continua na thread.) */
body:not(.thread-open) #mobilePanelBtn { display:none; }
/* Na thread, esse mesmo botão (tiles) vai para a EXTREMA DIREITA da topbar. */
body.thread-open .topbar-right #mobilePanelBtn { order:5; }
body:not(.thread-open) .topbar-right .btn-join-coop {
font-size:0; width:38px; height:38px; padding:0; gap:0;
justify-content:center; border-radius:10px;
}
body:not(.thread-open) .topbar-right .btn-join-coop svg.lucide { font-size:15px; margin:0; }
/* --- Busca mais enxuta no mobile --- */
.topbar .search { padding:7px 12px; gap:6px; }
.topbar .search input { font-size:14px; }
.search-scope-btn { font-size:12px; padding:2px 8px 2px 2px; margin-right:6px; }
}
/* ---------- Smartphone (<=640px) ---------- */
@media (max-width:640px) {
.sidebar { width:85%; }
.right-panel { width:85%; }
.topbar .welcome { display:none; } /* dá espaço para a busca */
.topbar-right { gap:8px; }
.topbar .user { display:none; } /* esconde avatar em telas bem estreitas */
.theme-toggle { margin-right:2px; }
.thread-grid { grid-template-columns:1fr; gap:10px; }
.chat-header { padding:10px 12px; }
.messages { padding:12px 10px; }
.bubble-wrap { max-width:90%; }
.bubble-wrap.coop-wrap { max-width:95%; }
.chat-input { padding:10px; border-radius:12px; }
.provider-bar { gap:6px; } /* recolhida em barra única sobreposta (ver bloco 1024) */
/* Toca confortável: alvos de toque maiores */
.nav-item, .folder-item { padding-top:12px; padding-bottom:12px; }
.modal { width:94vw; max-width:94vw; }
/* Abas do Settings: alvos maiores (~30px→~38px) e mais vão entre elas (4px→6px). */
.settings-tabs { gap:6px; }
.stab { padding:9px 12px; }
}
/* ---------- Tablet em paisagem: painel direito lado a lado ---------- */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
.right-panel { width:52%; max-width:520px; }
}
/* Trava o scroll do fundo quando um drawer está aberto */
body.drawer-left-open, body.drawer-right-open { overflow:hidden; }
/* ===== Menu de ações extras da thread (mobile) ===== */
.chat-actions-mobile { display:none; align-items:center; gap:8px; position:relative; }
.chat-actions-mobile .btn-voltar-mobile,
.chat-actions-menu-btn {
width:38px; height:38px; border-radius:10px; border:1px solid #e3e6f0;
background:white; color:#555; cursor:pointer; font-size:16px;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.chat-actions-mobile .btn-voltar-mobile:active,
.chat-actions-menu-btn:active { background:#f0eefb; }
body.dark-mode .chat-actions-mobile .btn-voltar-mobile,
body.dark-mode .chat-actions-menu-btn { background:#323342; border-color:#424354; color:#ccc; }
.chat-actions-menu {
display:none; position:absolute; top:46px; right:0; z-index:120;
background:white; border:1px solid #e3e6f0; border-radius:12px;
box-shadow:0 8px 28px rgba(0,0,0,.15); padding:6px; min-width:220px;
}
.chat-actions-menu.open { display:block; }
body.dark-mode .chat-actions-menu { background:#2b2c37; border-color:#424354; }
.chat-actions-menu button {
display:flex; align-items:center; gap:10px; width:100%; text-align:left;
padding:11px 14px; border:none; background:transparent; color:#333;
font-size:14px; cursor:pointer; border-radius:8px;
}
.chat-actions-menu button:hover { background:#f5f4fb; }
.chat-actions-menu button svg.lucide { width:18px; text-align:center; color:var(--accent); }
body.dark-mode .chat-actions-menu button { color:#e0e0ea; }
body.dark-mode .chat-actions-menu button:hover { background:#373848; }
@media (max-width:1024px) {
.chat-header .chat-actions { display:none; }
/* .chat-actions-mobile agora vive na .topbar-right; só aparece na thread */
.topbar.thread-mode .chat-actions-mobile { display:flex; }
}
/* ===== Comando /task — cartão de criação de tarefa no chat ===== */
.task-card { background:#fff; border:1px solid var(--accent-soft); border-radius:12px; padding:14px 16px; margin-top:6px; max-width:520px; }
.task-card-head { font-size:14px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.task-card-head .lucide-square-kanban { color:#0079bf; }
.task-card-src { font-size:11px; color:#999; margin-left:auto; }
.task-lbl { display:block; font-size:12px; font-weight:600; color:#666; margin:10px 0 4px; }
.task-inp { width:100%; padding:8px 10px; border:1px solid #d5d5e0; border-radius:8px; font-size:13px; box-sizing:border-box; font-family:inherit; background:#fff; color:inherit; }
.task-inp:focus { border-color:var(--accent); outline:none; }
.task-ta { resize:vertical; min-height:90px; line-height:1.5; }
.task-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.task-card-actions { display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.task-status { font-size:12px; color:#e74c3c; }
.task-card-done .task-done-title { font-weight:600; font-size:14px; margin:6px 0 10px; }
body.dark-mode .task-card { background:#2b2c37; border-color:#424354; }
body.dark-mode .task-lbl { color:#aaa; }
body.dark-mode .task-inp { background:#323342; border-color:#424354; color:#d0d0e0; }
@media (max-width:600px){ .task-grid { grid-template-columns:1fr; } }
/* /task — modo resumo (campos pré-preenchidos, edição opcional) */
.task-summary { padding:4px 0 2px; }
.task-sum-title { font-size:14px; font-weight:600; margin-bottom:8px; }
.task-sum-desc { font-size:12.5px; color:#666; line-height:1.6; margin-bottom:10px; white-space:pre-wrap; }
.task-sum-meta { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:#888; }
.task-sum-meta svg.lucide { color:var(--accent); margin-right:4px; }
body.dark-mode .task-sum-desc { color:#9a9ab0; }
body.dark-mode .task-sum-meta { color:#8a8aa0; }
.task-sum-why { font-style:normal; font-size:11px; color:#b0a8d9; }
/* Apps de projetos (/task) — fileira de botões por app */
.task-apps-row { display:flex; gap:8px; flex-wrap:wrap; }
.task-app-btn { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid #d5d5e0; border-radius:10px; background:#fff; font-size:13px; font-weight:600; color:#444; cursor:pointer; transition:border-color .15s, box-shadow .15s; font-family:inherit; }
.task-app-btn:hover { border-color:var(--accent); }
.task-app-btn.active { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.18); color:#333; }
.task-app-btn.soon { opacity:.6; }
.task-app-soon { font-size:10px; font-weight:600; color:#b28a2e; background:#fbf3dc; border-radius:6px; padding:1px 6px; }
body.dark-mode .task-app-btn { background:#2b2c37; border-color:#424354; color:#c8c8da; }
body.dark-mode .task-app-btn.active { border-color:var(--accent); color:#e6e6f2; }
body.dark-mode .task-app-soon { background:#3a3420; color:#d8b45e; }
/* Integrações — blocos "conexão da empresa" vs "minha conta" */
.task-conn-box { border:1px solid #e0e0ea; border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.task-conn-box.in-use { border-color:var(--accent); box-shadow:0 0 0 2px rgba(var(--accent-rgb),.12); }
.task-conn-title { font-size:13.5px; font-weight:700; display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.task-conn-title svg.lucide { color:var(--accent); }
.task-conn-user { font-weight:400; color:#888; font-size:12px; }
.task-conn-badge { font-size:10px; font-weight:700; color:#27ae60; background:#e8f8f0; border-radius:6px; padding:2px 7px; margin-left:auto; }
.task-conn-desc { font-size:12px; color:#999; line-height:1.6; margin:4px 0 8px; }
body.dark-mode .task-conn-box { border-color:#424354; }
body.dark-mode .task-conn-badge { background:#1d3328; }
/* Botão enviar em modo PARAR (IA respondendo) */
.send.stop-mode { background:#e74c3c !important; }
.send.stop-mode:hover { background:#c0392b !important; }
/* Estilo de fala — chips de escolha (Perfil de respostas) */
.tone-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border:1px solid #d5d5e0; border-radius:20px; background:#fff; font-size:12.5px; font-weight:600; color:#555; cursor:pointer; transition:border-color .15s, box-shadow .15s; font-family:inherit; }
.tone-chip:hover { border-color:var(--accent); }
.tone-chip.active { border-color:var(--accent); background:#f4f2ff; color:#5a4fd0; box-shadow:0 0 0 2px rgba(var(--accent-rgb),.15); }
body.dark-mode .tone-chip { background:#2b2c37; border-color:#424354; color:#c8c8da; }
body.dark-mode .tone-chip.active { background:#2c2a45; color:#b9b0ff; }
.tone-chip svg.lucide { width:14px; height:14px; }
.ic-sm { width:14px; height:14px; vertical-align:-2px; }
/* ===== Markdown das respostas da IA (híbrido Claude/Gemini) ===== */
.md-p { margin:6px 0; line-height:1.65; }
.md-h { font-weight:700; line-height:1.35; margin:14px 0 6px; }
.md-h1 { font-size:1.25em; }
.md-h2 { font-size:1.15em; }
.md-h3 { font-size:1.06em; }
.md-h4 { font-size:1em; color:#666; }
.md-hr { border:none; border-top:1px solid #e5e5ee; margin:14px 0; }
.md-list { margin:6px 0 6px 4px; padding-left:20px; line-height:1.7; }
.md-list li { margin:3px 0; }
.md-sub { margin:2px 0 2px 2px; }
.md-quote { border-left:3px solid var(--accent); background:#f7f6ff; padding:8px 14px; margin:8px 0; border-radius:0 8px 8px 0; color:#555; }
.md-check { display:inline-block; width:15px; height:15px; border:1.5px solid #b9b3d8; border-radius:4px; vertical-align:-2px; margin-right:2px; font-size:11px; line-height:13px; text-align:center; color:transparent; }
.md-check.done { background:var(--accent); border-color:var(--accent); color:#fff; }
/* Painel de próximos passos (checklist pendente da análise): multi-seleção
com checkboxes + botão que manda as seleções ao prompt */
.md-next-panel { margin:10px 0; padding:14px 16px; background:#eeecfb; border:1px solid #dddaf5; border-radius:12px; }
.md-next-title { display:flex; align-items:center; gap:8px; font-weight:700; color:#5a4fd0; font-size:13.5px; margin-bottom:8px; }
.md-next-title svg { width:16px; height:16px; flex:none; }
.md-next-opt { display:flex; align-items:flex-start; gap:10px; padding:7px 2px; cursor:pointer; color:#241f45; font-size:14px; line-height:1.45; }
.md-next-chk { appearance:none; -webkit-appearance:none; width:18px; height:18px; min-width:18px; margin:2px 0 0; border:2px solid #241f45; border-radius:4px; background:#fff; cursor:pointer; position:relative; }
.md-next-chk:checked { background:var(--accent); border-color:var(--accent); }
.md-next-chk:checked::after { content:'✓'; color:#fff; font-size:12px; font-weight:700; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.md-next-chk:disabled { opacity:.55; cursor:default; }
.md-next-sub { display:block; color:#6b6690; font-size:12.5px; margin-top:2px; }
.md-next-send { margin-top:10px; display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff; border:none; border-radius:8px; padding:9px 16px; font-weight:700; font-size:13px; cursor:pointer; transition:background .15s; }
.md-next-send svg { width:15px; height:15px; }
.md-next-send:hover { background:#5a4fd0; }
.md-next-send:disabled { opacity:.6; cursor:default; }
.md-next-panel.md-next-sent .md-next-opt { opacity:.6; cursor:default; }
/* Modo noturno: o painel nascia com cores do tema dia (fundo lavanda claro)
e ficava destoante no escuro. */
body.dark-mode .md-next-panel { background:#2b2c42; border-color:#34365a; }
body.dark-mode .md-next-title { color:#a79ff0; }
body.dark-mode .md-next-opt { color:#e8e6f5; }
body.dark-mode .md-next-chk { border-color:#8f8ac0; background:#212234; }
body.dark-mode .md-next-sub { color:#9a94b8; }
/* Código inline — chip estilo Gemini */
.inline-code { font-family:'SF Mono', Consolas, Monaco, monospace; font-size:0.88em; background:#f1f0f7; border:1px solid #e4e2ef; border-radius:6px; padding:1.5px 7px; color:#5a4fd0; white-space:nowrap; }
/* Tabelas */
.md-table-wrap { overflow-x:auto; margin:10px 0; border:1px solid #e5e3f0; border-radius:10px; }
.md-table { border-collapse:collapse; width:100%; font-size:13px; }
.md-table th { background:#f7f6ff; font-weight:700; padding:8px 12px; border-bottom:2px solid #e5e3f0; white-space:nowrap; }
.md-table td { padding:7px 12px; border-bottom:1px solid #efeef6; }
.md-table tbody tr:last-child td { border-bottom:none; }
.md-table tbody tr:hover { background:var(--accent-faint); }
/* Tema escuro */
body.dark-mode .md-h4 { color:#9a9ab0; }
body.dark-mode .md-hr { border-top-color:#3b3c52; }
body.dark-mode .md-quote { background:#303245; color:#b8b8cc; }
body.dark-mode .inline-code { background:#343548; border-color:#44455d; color:#b9b0ff; }
body.dark-mode .md-table-wrap { border-color:#3b3c52; }
body.dark-mode .md-table th { background:#303245; border-bottom-color:#3b3c52; }
body.dark-mode .md-table td { border-bottom-color:#36374c; }
body.dark-mode .md-table tbody tr:hover { background:#2d2e42; }
/* Seletor de pasta/projeto no cabeçalho da thread */
.chat-folder-select { max-width:180px; padding:5px 8px; border:1px solid #d5d5e0; border-radius:8px; background:#fff; font-size:12px; font-weight:600; color:#666; cursor:pointer; font-family:inherit; }
.chat-folder-select:hover, .chat-folder-select:focus { border-color:var(--accent); outline:none; }
body.dark-mode .chat-folder-select { background:#2b2c37; border-color:#424354; color:#c8c8da; }
/* Dropdown de pasta no cabeçalho da thread (com ícones das pastas) */
.chat-folder-dd { position:relative; display:inline-block; }
.cfd-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid #d5d5e0; border-radius:8px; background:#fff; font-size:12px; font-weight:600; color:#666; cursor:pointer; font-family:inherit; max-width:190px; }
.cfd-btn:hover { border-color:var(--accent); }
.cfd-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cfd-chev { font-size:9px; color:#aaa; }
.cfd-menu { position:absolute; top:calc(100% + 4px); left:0; z-index:300; min-width:190px; max-height:260px; overflow-y:auto; background:#fff; border:1px solid #e0e0ea; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:4px; }
.cfd-item { display:flex; align-items:center; gap:8px; padding:7px 10px; border-radius:7px; font-size:12.5px; font-weight:600; color:#555; cursor:pointer; white-space:nowrap; }
.cfd-item:hover { background:#f4f2ff; }
.cfd-item.active { background:#f4f2ff; color:#5a4fd0; }
.cfd-item svg.lucide { width:16px; text-align:center; }
body.dark-mode .cfd-btn { background:#2b2c37; border-color:#424354; color:#c8c8da; }
body.dark-mode .cfd-menu { background:#2b2c37; border-color:#424354; box-shadow:0 8px 24px rgba(0,0,0,.4); }
body.dark-mode .cfd-item { color:#c8c8da; }
body.dark-mode .cfd-item:hover, body.dark-mode .cfd-item.active { background:#2c2a45; }
/* Linha de meta sob o título da thread: pasta + badge lado a lado */
.chat-title-meta-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Filtro de escopo DENTRO da barra de busca (dropdown no mesmo campo) */
.search { position:relative; }
.search-scope-btn { display:inline-flex; align-items:center; gap:7px; background:transparent; border:none; border-right:1px solid #e0e0ea; padding:2px 12px 2px 2px; margin-right:10px; font-size:14px; font-weight:600; color:#777; cursor:pointer; font-family:inherit; white-space:nowrap; }
.search-scope-btn:hover { color:var(--accent); }
.search-scope-btn .lucide-search { color:#888; }
.search-scope-chev { font-size:9px; color:#aaa; }
.search-scope-menu { position:absolute; top:calc(100% + 6px); left:0; z-index:400; min-width:170px; background:#fff; border:1px solid #e0e0ea; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:4px; }
.ssm-item { display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:7px; font-size:13px; font-weight:600; color:#555; cursor:pointer; }
.ssm-item svg.lucide { width:15px; text-align:center; color:var(--accent); font-size:12px; }
.ssm-item:hover { background:#f4f2ff; }
body.dark-mode .search-scope-btn { border-right-color:#424354; color:#a0a0b5; }
body.dark-mode .search-scope-btn:hover { color:#b9b0ff; }
body.dark-mode .search-scope-menu { background:#2b2c37; border-color:#424354; box-shadow:0 8px 24px rgba(0,0,0,.4); }
body.dark-mode .ssm-item { color:#c8c8da; }
body.dark-mode .ssm-item:hover { background:#2c2a45; }
/* Topbar em modo thread: o cabeçalho da thread ocupa o centro da barra */
.topbar .chat-header { flex:1; min-width:0; margin:0 16px 0 4px; padding:0; }
.topbar .chat-header .chat-title-input { font-size:17px; }
.topbar .chat-header-left { gap:3px; }
.topbar #chatMeta { margin:0; font-size:11px; gap:12px; flex-wrap:wrap; }
.topbar.thread-mode .btn-join-coop { display:none; } /* dentro da thread já há o Co-Op! */
.topbar.thread-mode { padding-top:10px; padding-bottom:10px; }
/* Grid principal: menos espaço entre o banner Continuar e as gavetas */
.resume-row { margin-bottom:8px; }
.btn-new-thread-side { padding:0 14px; font-size:13px; }
.grid-header { min-height:0; }
/* Nivelamento: a linha de baixo do logo e a da topbar na MESMA altura (72px) */
.logo { height:72px; padding-top:0; padding-bottom:0; box-sizing:border-box; }
.sidebar.collapsed .logo { height:72px; padding-top:0; padding-bottom:0; }
.topbar { height:72px; box-sizing:border-box; padding-top:0; padding-bottom:0; }
.topbar.thread-mode { height:72px; padding-top:0; padding-bottom:0; }
@media (max-width: 900px) {
.topbar { height:auto; } /* no mobile a sidebar é gaveta — altura livre */
}
/* Botões do cabeçalho da thread na topbar: centralizados na vertical e
contidos antes da divisória (a .topbar-right é sincronizada via JS) */
.topbar .chat-header { align-items:center; }
.topbar .chat-actions { align-self:center; flex-wrap:wrap; justify-content:flex-end; row-gap:4px; }
.topbar .topbar-right { justify-content:flex-end; }
/* Modo thread: barra mais alta e respirada (logo acompanha p/ manter a linha) */
.topbar.thread-mode { height:84px; }
body.thread-open .logo { height:84px; }
.topbar .chat-header-left { gap:7px; }
.topbar .chat-header .chat-title-input { font-size:19px; }
/* Meta da thread na área central: abaixo da barra, acima das tags */
#chatMetaHome .chat-meta { margin:6px 0; }
/* Sidebar comprimida: "Novo projeto" vira botão só de ícone (fundo/borda mantidos) */
.sidebar.collapsed #foldersSection > div:first-child { padding:4px 8px 8px; }
.sidebar.collapsed .add-folder-btn { font-size:0; width:40px; height:34px; padding:0; margin:0 auto; display:flex; align-items:center; justify-content:center; }
.sidebar.collapsed .add-folder-btn svg.lucide { font-size:15px; margin:0; }
/* Sidebar comprimida: some o titulo "Projetos" (tem display:flex inline que
vencia a regra) e centraliza TODOS os icones na vertical da coluna */
.sidebar.collapsed .section-title { display:none !important; }
.sidebar.collapsed .nav-item { justify-content:center; padding-left:0; padding-right:0; }
.sidebar.collapsed .nav-item svg.lucide { width:22px; text-align:center; margin:0; }
.sidebar.collapsed .folder-item { justify-content:center; padding-left:0; padding-right:0; }
.sidebar.collapsed .toggle-btn { text-align:center; padding-left:0; padding-right:0; }
/* Seletor de aspect ratio para modo imagem */
.image-ratio-row {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
width: 100%; padding: 6px 10px; border-bottom: 1px solid rgba(var(--accent-rgb),0.15);
background: rgba(var(--accent-rgb),0.04);
}
.image-ratio-label { font-size: 12px; color: #666; margin-right: 4px; }
body.dark-mode .image-ratio-label { color: #aaa; }
.image-ratio-btn {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 8px; border-radius: 8px; border: 1px solid #dcd9f2;
background: #fff; color: #555; font-size: 12px; cursor: pointer;
transition: all .15s ease;
}
.image-ratio-btn:hover { border-color: var(--accent); color: var(--accent-hover); }
.image-ratio-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
body.dark-mode .image-ratio-btn { background: #2b2c39; border-color: #4a4470; color: var(--accent-light); }
body.dark-mode .image-ratio-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.image-ratio-shape {
display: inline-block; width: 18px; aspect-ratio: var(--r);
background: currentColor; opacity: .75; border-radius: 2px;
}
.image-ratio-sep { width: 1px; height: 20px; background: rgba(var(--accent-rgb),.25); margin: 0 4px; }
.image-res-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ===== Modo Estrutura (metaprompting) ===== */
/* O switch da Estrutura na barra usa as classes .tracker-switch (trilho/
botão roxo no ON); o estado também entra no resumo do chip da IA. */
.estrutura-card {
border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 12px;
background: rgba(var(--accent-rgb),.05); padding: 12px; margin-top: 6px;
display: flex; flex-direction: column; gap: 10px;
}
/* O card editável precisa de mais largura que um balão comum:
alarga o wrap e o balão quando o card está dentro. */
.bubble-wrap:has(.estrutura-card) { max-width: min(980px, 100%); }
.bubble-wrap:has(.estrutura-card) .bubble { max-width: 100%; }
.bubble-wrap.estrutura-wrap { max-width: min(1100px, 100%); }
.bubble-wrap.estrutura-wrap .bubble { max-width: 100%; }
body.dark-mode .estrutura-card { background: rgba(var(--accent-rgb),.08); border-color: #4a4470; }
.estrutura-head {
display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--accent-hover);
font-size: 13px; flex-wrap: wrap;
}
body.dark-mode .estrutura-head { color: var(--accent-light); }
.estrutura-head > span { font-weight: 400; color: #888; font-size: 12px; }
.estrutura-done { margin-left: auto; font-size: 11px; color: #1a7f4e; background: rgba(26,127,78,.12); border-radius: 8px; padding: 2px 8px; }
body.dark-mode .estrutura-done { color: #6fd39f; }
.estrutura-bloco { display: flex; flex-direction: column; gap: 6px; }
.estrutura-bloco > label { font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: .4px; display: flex; gap: 6px; align-items: center; }
body.dark-mode .estrutura-bloco > label { color: #aaa; }
.estrutura-textarea, .estrutura-input {
width: 100%; border: 1px solid #dcd9f2; border-radius: 8px; background: #fff;
padding: 6px 8px; font: inherit; font-size: 13px; color: #333; resize: vertical;
}
.estrutura-textarea { min-height: 46px; overflow: hidden; resize: none; }
body.dark-mode .estrutura-textarea, body.dark-mode .estrutura-input { background: #2b2c39; border-color: #4a4470; color: #e0e0e0; }
.estrutura-ramo { border: 1px solid #dcd9f2; border-radius: 10px; background: #fff; padding: 6px 10px; }
body.dark-mode .estrutura-ramo { background: #2b2c39; border-color: #4a4470; }
.estrutura-ramo summary {
cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--accent-hover); list-style: none;
}
body.dark-mode .estrutura-ramo summary { color: var(--accent-light); }
.estrutura-ramo summary::-webkit-details-marker { display: none; }
.estrutura-ramo-btn {
margin-left: auto; font-size: 11px; border: 1px solid #cfc9f5; background: #f4f3fb; color: var(--accent-hover);
border-radius: 8px; padding: 3px 8px; cursor: pointer; white-space: nowrap;
}
.estrutura-ramo-btn:hover { background: var(--accent); color: #fff; }
.estrutura-ramo-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.estrutura-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.estrutura-actions button {
border: 1px solid #cfc9f5; background: #f4f3fb; color: var(--accent-hover); border-radius: 10px;
padding: 7px 12px; font-size: 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center;
}
body.dark-mode .estrutura-actions button { background: #2b2c39; border-color: #4a4470; color: var(--accent-light); }
.estrutura-actions button.estrutura-exec { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.estrutura-actions button:hover { filter: brightness(1.05); }
/* Card compartilhado no CO-OP: selo do dono e aviso para quem só edita. */
.estrutura-coop { font-size: 11px; color: var(--accent-hover); background: rgba(var(--accent-rgb),.12); border-radius: 8px; padding: 2px 8px; display: inline-flex; gap: 5px; align-items: center; }
body.dark-mode .estrutura-coop { color: var(--accent-light); background: rgba(var(--accent-rgb),.18); }
.estrutura-skills { font-size: 11px; color: var(--accent-hover); background: rgba(var(--accent-rgb),.08); border: 1px dashed rgba(var(--accent-rgb),.45); border-radius: 8px; padding: 2px 8px; display: inline-flex; gap: 5px; align-items: center; }
body.dark-mode .estrutura-skills { color: var(--accent-light); background: rgba(var(--accent-rgb),.12); border-color: rgba(var(--accent-rgb),.4); }
.estrutura-locked {
font-size: 12px; color: #8a6d1f; background: #fff8e6; border: 1px solid #f0e0b0;
border-radius: 10px; padding: 8px 11px; display: flex; gap: 7px; align-items: center;
}
body.dark-mode .estrutura-locked { color: #e0c579; background: #2b2718; border-color: #4d4426; }
/* Passar a liderança da sessão CO-OP */
.coop-host-btn {
border: 1px solid #f0dca8; background: #fff6e0; color: #b8860b; border-radius: 8px;
padding: 3px 8px; font-size: 11px; cursor: pointer; line-height: 1;
}
.coop-host-btn:hover { filter: brightness(1.04); }
body.dark-mode .coop-host-btn { background: #2b2718; border-color: #4d4426; color: #e0c579; }
/* ---- Base de Conhecimento (barra lateral direita) ---- */
.kb-panel-content { padding: 10px 12px 14px; font-size: 12.5px; }
.kb-head { margin-bottom: 8px; }
.kb-scope { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--accent); font-weight: 600; }
.kb-row { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.kb-select { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #e2dff3; border-radius: 8px; background: #fff; font-size: 12.5px; color: #333; }
body.dark-mode .kb-select { background: #262738; border-color: #42435a; color: #ddd; }
.kb-mini { width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid #e2dff3; border-radius: 8px; background: #fff; color: var(--accent); cursor: pointer; }
.kb-mini:hover { background: #f4f2fe; }
body.dark-mode .kb-mini { background: #262738; border-color: #42435a; }
.kb-hint { color: #999; font-size: 12px; line-height: 1.5; margin: 6px 0; }
.kb-info { color: #666; font-size: 12px; margin: 4px 0; }
body.dark-mode .kb-info { color: #aaa; }
.kb-docs { margin: 8px 0; max-height: 140px; overflow-y: auto; }
.kb-upload { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.kb-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.kb-mini-text { background: none; border: none; color: var(--accent); font-size: 12px; cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.kb-mini-text:hover { background: #f4f2fe; }
body.dark-mode .kb-mini-text:hover { background: #2b2c42; }
/* Modal de destino do documento (base do projeto / thread / chat) */
.kd-options { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.kd-option { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--accent-soft); border-radius: 10px; cursor: pointer; font-size: 13px; transition: border-color .15s, background .15s; }
.kd-option:hover { border-color: var(--accent); background: var(--accent-faint); }
body.dark-mode .kd-option { border-color: #34354d; }
body.dark-mode .kd-option:hover { border-color: var(--accent); background: #252638; }
.kd-option input { margin-top: 3px; accent-color: var(--accent); }
.kd-option small { display: block; color: #888; font-size: 11.5px; line-height: 1.4; margin-top: 2px; }
body.dark-mode .kd-option small { color: #999; }
/* Viewer .md da análise (documentos da base de conhecimento) */
.kb-doc-click { cursor: pointer; gap: 8px; }
.kb-doc-click:hover { outline: 1px solid var(--accent); }
.kb-doc-click .k-doc-name { flex: 1; max-width: none; }
.kb-doc-md { color: var(--accent); font-size: 11px; }
.kb-doc-md-body { max-height: 50vh; overflow: auto; background: #f7f7fb; border: 1px solid var(--accent-soft); border-radius: 10px; padding: 12px; font-size: 12px; line-height: 1.55; white-space: pre-wrap; text-align: left; margin: 10px 0 0; }
body.dark-mode .kb-doc-md-body { background: #252638; border-color: #34354d; color: #ccc; }
/* Modal da Trilha do Modo Estrutura: fluxograma + etapas expansíveis. */
.trilha-body { max-height: 62vh; overflow-y: auto; text-align: left; margin-top: 10px; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.trilha-flow, .trilha-etapa { border: 1px solid var(--accent-soft); border-radius: 10px; background: var(--accent-faint); }
body.dark-mode .trilha-flow, body.dark-mode .trilha-etapa { background: #252638; border-color: #34354d; }
.trilha-flow > summary, .trilha-etapa > summary { cursor: pointer; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #4a3fa8; list-style: none; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
body.dark-mode .trilha-flow > summary, body.dark-mode .trilha-etapa > summary { color: #b3a8ff; }
.trilha-flow > summary::-webkit-details-marker, .trilha-etapa > summary::-webkit-details-marker { display: none; }
.trilha-flow > summary::before, .trilha-etapa > summary::before { content: '\25B8'; font-size: 11px; color: var(--accent); transition: transform .15s; }
.trilha-flow[open] > summary::before, .trilha-etapa[open] > summary::before { transform: rotate(90deg); }
.trilha-flow-box { padding: 10px 12px 14px; overflow-x: auto; background: #fff; border-radius: 0 0 10px 10px; }
body.dark-mode .trilha-flow-box { background: #fff; }
.trilha-flow-box .mermaid svg { max-width: 100%; height: auto; }
.trilha-etapa-body { padding: 4px 14px 12px; font-size: 12.5px; line-height: 1.6; color: #333; border-top: 1px dashed var(--accent-soft); }
body.dark-mode .trilha-etapa-body { color: #ccc; border-top-color: #34354d; }
.trilha-etapa-body p { margin: 6px 0; }
.trilha-etapa-body ul { margin: 4px 0 8px; padding-left: 20px; }
.trilha-etapa-body li { margin: 3px 0; }
.trilha-etapa-body hr { border: none; border-top: 1px solid var(--accent-soft); margin: 10px 0; }
.trilha-etapa-body pre { white-space: pre-wrap; background: #f7f7fb; border-radius: 8px; padding: 8px; font-size: 11.5px; }
body.dark-mode .trilha-etapa-body pre { background: #1c1d2c; }
.trilha-status { font-size: 11px; font-weight: 500; color: #999; background: #f0f0f5; border-radius: 20px; padding: 2px 8px; }
.trilha-status.ok { color: #1e7e46; background: #e5f6ec; }
body.dark-mode .trilha-status { background: #2b2c42; color: #999; }
body.dark-mode .trilha-status.ok { color: #6fd39a; background: #1c3227; }
.kb-mini-text.kb-danger { color: #e05555; }
.k-export-doc { display: flex; gap: 8px; align-items: center; padding: 5px 6px; font-size: 13px; cursor: pointer; border-radius: 8px; color: #444; }
.k-export-doc:hover { background: #f4f2fe; }
body.dark-mode .k-export-doc { color: #ccc; }
body.dark-mode .k-export-doc:hover { background: #2b2c42; }
body.dark-mode #kExportDocsList { background: #252638; border-color: #34354d; }
/* Resumo narrativo da IA nos viewers de documento (painel + Empresa). */
.kb-doc-resumo { margin-bottom: 12px; border: 1px solid var(--accent-soft); border-radius: 10px; background: var(--accent-faint); padding: 12px 14px; }
.kb-doc-resumo-title { font-weight: 600; color: #4a3fa8; font-size: 13px; margin-bottom: 8px; }
.kb-doc-resumo-title svg.lucide { color: var(--accent); margin-right: 6px; }
body.dark-mode .kb-doc-resumo { background: #252638; border-color: #34354d; }
body.dark-mode .kb-doc-resumo-title { color: var(--accent-light); }
/* Análise da Base de Conhecimento publicada no chat (resumo narrativo + .md). */
.kb-chat-block { margin: 6px 0; font-size: 13px; }
.kb-chat-title { font-weight: 600; color: #4a3fa8; margin-bottom: 8px; }
.kb-chat-title svg.lucide { color: var(--accent); margin-right: 6px; }
body.dark-mode .kb-chat-title { color: var(--accent-light); }
.kb-chat-skills { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -2px 0 8px; font-size: 11px; color: #8a8ea6; }
.kb-chat-skills svg.lucide { font-size: 10px; color: var(--accent); }
.kb-chat-skills .kb-skill-tag { background: rgba(var(--accent-rgb),.12); color: var(--accent-hover); border-radius: 999px; padding: 1px 9px; font-weight: 600; font-size: 10.5px; }
body.dark-mode .kb-chat-skills { color: #666b85; }
body.dark-mode .kb-chat-skills .kb-skill-tag { background: rgba(143,131,255,.16); color: var(--accent-light); }
.kb-chat-resumo { line-height: 1.6; margin-bottom: 10px; }
.kb-chat-resumo ul, .kb-chat-resumo ol { margin: 6px 0 6px 18px; padding: 0; }
.kb-chat-resumo li { margin-bottom: 3px; }
.kb-chat-resumo strong { color: #4a3fa8; }
body.dark-mode .kb-chat-resumo strong { color: var(--accent-light); }
/* Mapa do conhecimento extraído: vitrine do grafo salvo na base. */
.kb-chat-graph { border: 1px solid var(--accent-soft); border-radius: 10px; background: var(--accent-faint); padding: 10px 12px; margin-bottom: 10px; }
.kb-graph-title { font-weight: 600; color: #4a3fa8; margin-bottom: 8px; }
.kb-graph-title svg.lucide { color: var(--accent); margin-right: 6px; }
.kb-grupo-tipo { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8a8ea6; margin: 8px 0 4px; }
.kb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kb-chip { background: rgba(var(--accent-rgb),.12); color: var(--accent-hover); border-radius: 999px; padding: 2px 10px; font-size: 11.5px; font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-chip-mais { background: transparent; color: #8a8ea6; font-weight: 500; }
.kb-rels { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--accent-soft); }
.kb-rel { font-size: 12px; color: #444; margin-bottom: 3px; line-height: 1.5; }
.kb-rel-verbo { color: var(--accent); font-weight: 600; }
.kb-rel-mais { color: #8a8ea6; font-style: italic; }
/* Mini gráfico: conceitos mais conectados (barras por nº de relações) */
.kb-chart { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--accent-soft); }
.kb-chart-title { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #4a3fa8; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
.kb-chart-title svg { width: 12px; height: 12px; }
.kb-chart-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.kb-chart-label { width: 110px; flex: 0 0 110px; font-size: 11.5px; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-chart-bar { flex: 1; height: 7px; background: #efeef6; border-radius: 4px; overflow: hidden; }
.kb-chart-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8f83ff, #6a5cf0); }
.kb-chart-val { width: 18px; flex: 0 0 18px; text-align: right; font-size: 11px; font-weight: 700; color: var(--accent); }
/* Cabeçalhos das seções da análise (🎯 📌 🔗 🚀 📎) ganham destaque */
.kb-chat-resumo .md-h2 { margin-top: 14px; padding: 5px 10px; background: #f3f1ff; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; }
.kb-chat-resumo .md-h2:first-child { margin-top: 2px; }
body.dark-mode .kb-chat-graph { background: #252638; border-color: #34354d; }
body.dark-mode .kb-graph-title { color: var(--accent-light); }
body.dark-mode .kb-grupo-tipo { color: #666b85; }
body.dark-mode .kb-chip { background: rgba(143,131,255,.16); color: var(--accent-light); }
body.dark-mode .kb-rel { color: #cfd0dd; }
body.dark-mode .kb-rel-verbo { color: #a99df8; }
body.dark-mode .kb-rels { border-top-color: #34354d; }
body.dark-mode .kb-chart { border-top-color: #34354d; }
body.dark-mode .kb-chart-title { color: var(--accent-light); }
body.dark-mode .kb-chart-label { color: #cfd0dd; }
body.dark-mode .kb-chart-bar { background: #34354d; }
body.dark-mode .kb-chat-resumo .md-h2 { background: #2e2f48; }
.kb-chat-analysis { border: 1px solid var(--accent-soft); border-radius: 10px; background: var(--accent-faint); padding: 8px 12px; font-size: 12.5px; }
.kb-chat-analysis > summary { cursor: pointer; font-weight: 600; color: #4a3fa8; list-style: none; }
.kb-chat-analysis > summary::-webkit-details-marker { display: none; }
.kb-chat-analysis > summary::before { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 10px; margin-right: 8px; color: var(--accent); display: inline-block; transition: transform .15s; }
.kb-chat-analysis[open] > summary::before { transform: rotate(90deg); }
.kb-chat-md { margin-top: 10px; max-height: 50vh; overflow: auto; background: #f7f7fb; border: 1px solid var(--accent-soft); border-radius: 8px; padding: 10px 12px; font-size: 12px; line-height: 1.55; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #333; }
body.dark-mode .kb-chat-analysis { background: #252638; border-color: #34354d; }
body.dark-mode .kb-chat-analysis > summary { color: var(--accent-light); }
body.dark-mode .kb-chat-md { background: #1d1e32; border-color: #34354d; color: #ccc; }
/* ===== Skills (instruções permanentes para a IA) ===== */
#skillsBtn { position: relative; }
#skillsBtn.tem-skills { border-color: var(--accent) !important; color: var(--accent-hover) !important; }
body.dark-mode #skillsBtn.tem-skills { color: var(--accent-light) !important; }
.skills-badge {
position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(var(--accent-rgb),.4);
}
.skills-sec {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
color: var(--accent); margin: 14px 0 6px;
}
.skills-sec:first-child { margin-top: 0; }
.skill-row {
display: flex; align-items: center; gap: 10px; padding: 9px 10px;
border: 1px solid var(--accent-soft); border-radius: 10px; background: #fff; margin-bottom: 6px;
transition: border-color .15s ease, background .15s ease;
}
.skill-row.ativa { border-color: #c9c1f2; background: var(--accent-faint); }
.skill-toggle { position: relative; display: inline-block; width: 34px; height: 19px; flex: 0 0 34px; cursor: pointer; }
.skill-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.skill-toggle-track {
position: absolute; inset: 0; border-radius: 10px; background: #d5d7e3; transition: background .15s ease;
}
.skill-toggle-track::after {
content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px;
border-radius: 50%; background: #fff; transition: left .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.skill-toggle input:checked + .skill-toggle-track { background: var(--accent); }
.skill-toggle input:checked + .skill-toggle-track::after { left: 17px; }
.skill-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.skill-nome { font-size: 13.5px; font-weight: 600; color: #333; }
.skill-desc { font-size: 11.5px; color: #888; line-height: 1.35; }
.skill-tag-builtin {
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
color: var(--accent); background: #eeeafd; border-radius: 6px; padding: 1px 5px; vertical-align: middle;
}
.skill-contexto {
flex: 0 0 auto; font-size: 10.5px; color: #6a6f8c; background: #f0f1f8;
border-radius: 6px; padding: 3px 7px; white-space: nowrap;
}
.skill-mini {
flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--accent-soft);
background: #fff; color: #666; cursor: pointer; font-size: 12px; transition: all .15s ease;
}
.skill-mini:hover { border-color: var(--accent); color: var(--accent-hover); }
.skill-mini.perigo:hover { border-color: #e05555; color: #e05555; }
.skill-vazio { font-size: 12.5px; color: #999; padding: 10px; text-align: center; border: 1px dashed #d8dcef; border-radius: 10px; }
.skills-rodape { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
body.dark-mode .skill-row { background: #252638; border-color: #34354d; }
body.dark-mode .skill-row.ativa { background: #2b2c40; border-color: #4a4470; }
body.dark-mode .skill-nome { color: #e8e6f5; }
body.dark-mode .skill-desc { color: #8a8aa3; }
body.dark-mode .skill-tag-builtin { background: #2e2a52; color: var(--accent-light); }
.skill-tag-extra {
font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
background: rgba(240, 196, 60, .16); color: #8a6d1a; border: 1px solid rgba(240, 196, 60, .55);
}
body.dark-mode .skill-tag-extra { background: rgba(240, 196, 60, .12); color: #e8cd7a; }
body.dark-mode .skill-contexto { background: #2e2f44; color: #a9aac4; }
body.dark-mode .skill-mini { background: #2b2c39; border-color: #4a4470; color: var(--accent-light); }
body.dark-mode .skill-toggle-track { background: #52526b; }
body.dark-mode .skill-vazio { border-color: #4a4470; color: #77778f; }
/* ===== MCP (Fase 2): servidores, tools e chip de resultado pendente ===== */
.mcp-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: #c3c6d4; }
.mcp-dot-online { background: #2fbf71; box-shadow: 0 0 0 3px rgba(47,191,113,.15); }
.mcp-dot-conectando { background: #e0a93a; }
.mcp-dot-erro { background: #e05555; }
.mcp-dot-parado { background: #c3c6d4; }
/* Dropdown por servidor: agrupa as opções (login/token, remover, tools)
dentro da própria linha do MCP — a lista principal fica enxuta. */
.mcp-drop { flex-basis: 100%; margin: 2px 0 0 44px; min-width: 0; } /* min-width:0 deixa o item encolher — sem isso o texto nowrap das tools estoura a linha */
.mcp-drop summary {
cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: var(--accent); padding: 2px 0; list-style: none;
}
.mcp-drop summary::-webkit-details-marker { display: none; }
.mcp-drop summary::before { content: '▸'; font-size: 10px; color: #9a93d8; transition: transform .15s; }
.mcp-drop[open] summary::before { transform: rotate(90deg); }
.mcp-drop-body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 8px; width: 100%; }
.mcp-drop-body .mcp-tools { margin-left: 0; }
.mcp-auth-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* Botões com rótulo dentro do dropdown (Remover/Conectar/Token): skill-mini é
quadrada 28px e o texto quebrava embaixo do ícone — aqui vira pílula. */
.mcp-drop-body > .skill-mini, .mcp-auth-btns .skill-mini {
width: auto; height: 26px; display: inline-flex; align-items: center; gap: 5px;
padding: 0 10px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.mcp-drop-body > .skill-mini svg.lucide, .mcp-auth-btns .skill-mini svg.lucide { width: 13px; height: 13px; }
body.dark-mode .mcp-drop summary { color: #a89cff; }
body.dark-mode .mcp-drop summary::before { color: #6d68a8; }
.mcp-tools { width: 100%; margin: 4px 0 2px 46px; display: flex; flex-direction: column; gap: 6px; }
.mcp-tool-row { border: 1px solid #eceef6; border-radius: 8px; padding: 8px 10px; background: #fbfbff; }
.mcp-tool-cab { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.mcp-tool-nome { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: #4a4668; font-family: monospace; padding-top: 5px; }
/* Descrição sem reticências: o texto quebra em várias linhas e, se não couber
ao lado do nome, empilha abaixo (flex-basis força a quebra de linha). */
.mcp-tool-desc { flex: 1 1 260px; min-width: 0; font-size: 11.5px; color: #999; line-height: 1.45; padding-top: 6px; }
.mcp-tool-cab .skill-mini { margin-left: auto; }
.mcp-exec { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.mcp-exec textarea {
width: 100%; min-height: 60px; padding: 8px 10px; border-radius: 8px; border: 1px solid #ddd;
font-size: 12.5px; font-family: monospace; resize: vertical;
}
.mcp-exec-btns { display: flex; gap: 8px; }
.mcp-resultado {
margin: 0; max-height: 180px; overflow: auto; padding: 8px 10px; border-radius: 8px;
background: #f2f3fa; border: 1px solid var(--accent-soft); font-size: 12px; white-space: pre-wrap; word-break: break-word;
}
.mcp-usar { align-self: flex-start; }
.mcp-pending-row { padding: 6px 8px 0; }
.mcp-chip {
display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--accent-hover);
background: #f3f1ff; border: 1px solid #d9d3f8; border-radius: 20px; padding: 4px 10px;
}
.mcp-chip button {
border: none; background: none; color: #8f85d8; cursor: pointer; font-size: 12px; padding: 0 2px;
}
.mcp-chip button:hover { color: #e05555; }
body.dark-mode .mcp-tool-row { background: #212234; border-color: #34354d; }
body.dark-mode .mcp-tool-nome { color: #c9c1f2; }
body.dark-mode .mcp-tool-desc { color: #77778f; }
body.dark-mode .mcp-exec textarea { background: #1d1e32; border-color: #34354d; color: #e8e6f5; }
body.dark-mode .mcp-resultado { background: #1d1e32; border-color: #34354d; color: #cfd0e4; }
body.dark-mode .mcp-chip { background: #26244a; border-color: #4a4470; color: var(--accent-light); }
.mcp-modo {
padding: 6px 11px; font-size: 12px; border-radius: 8px; cursor: pointer;
border: 1px solid #ddd; background: transparent; color: #666;
}
.mcp-modo.ativo { background: var(--accent); border-color: var(--accent); color: #fff; }
body.dark-mode .mcp-modo { border-color: #34354d; color: #9a9ab5; }
body.dark-mode .mcp-modo.ativo { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.mcp-ajuda {
border: none; background: none; color: #8f85d8; cursor: pointer; font-size: 11px; padding: 0 2px;
}
.mcp-ajuda:hover { color: var(--accent-hover); }
body.dark-mode .mcp-ajuda { color: #77778f; }
body.dark-mode .mcp-ajuda:hover { color: #c9c1f2; }
/* ===== Menu "mais ações" da thread (desktop, à direita do Voltar) ===== */
.chat-more-wrap { position: relative; }
.chat-more-btn { padding: 8px 11px !important; }
.chat-more-menu {
display: none; position: absolute; top: 44px; right: 0; z-index: 120;
background: white; border: 1px solid #e3e6f0; border-radius: 12px;
box-shadow: 0 8px 28px rgba(0,0,0,.15); padding: 6px; min-width: 190px;
}
.chat-more-menu.open { display: block; }
.chat-more-menu button {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
padding: 10px 14px; border: none; background: transparent; color: #333;
font-size: 13.5px; cursor: pointer; border-radius: 8px;
}
.chat-more-menu button:hover { background: #f5f4fb; }
.chat-more-menu button svg.lucide { width: 18px; text-align: center; color: var(--accent); }
.chat-more-menu button.disabled { opacity: .5; cursor: not-allowed; }
body.dark-mode .chat-more-menu { background: #2b2c37; border-color: #424354; }
body.dark-mode .chat-more-menu button { color: #e0e0ea; }
body.dark-mode .chat-more-menu button:hover { background: #373848; }
/* ===== Botão CO-OP na linha do ID/tags (canto superior direito) ===== */
#chatMetaHome { position: relative; }
/* Wrapper absoluto ancora CO-OP + Concierge (injetado pelo concierge.js à
direita do CO-OP) no canto da toolbar. right: 0 mantém o grupo dentro da
coluna de conteúdo — com offset negativo ele caía em cima da barra de
rolagem do chat. */
.chat-meta-fabs {
position: absolute; top: 0; right: 0; z-index: 20;
display: flex; align-items: center; gap: 6px;
}
.chat-coop-fab {
width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e3e6f0;
background: rgba(255,255,255,.92); color: var(--accent); font-size: 14px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 10px rgba(0,0,0,.08); transition: all .2s ease;
}
.chat-coop-fab:hover { background: #f0eefb; border-color: var(--accent); }
.chat-coop-fab.em-sessao { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 2px 12px rgba(var(--accent-rgb),.45); }
body.dark-mode .chat-coop-fab { background: rgba(50,51,66,.92); border-color: #424354; color: var(--accent-light); }
body.dark-mode .chat-coop-fab:hover { background: #3b3c52; border-color: var(--accent); }
body.dark-mode .chat-coop-fab.em-sessao { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Thread que já teve sessão CO-OP (sala salva): pontinho no canto do ícone. */
.chat-coop-fab.tem-sala { position: relative; }
.chat-coop-fab.tem-sala::after {
content: ''; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px;
border-radius: 50%; background: var(--accent); border: 2px solid #fff;
}
body.dark-mode .chat-coop-fab.tem-sala::after { border-color: #323342; }
/* ===== Status "interno" de análise/estrutura (log de sistema) ===== */
/* Linha fina e monoespaçada, ícones monocromáticos e o contador de tempo
em roxo ThreadSeek no canto direito — parece log interno, não chat. */
.sys-line { display: block; padding: 2px 8px; margin: 2px 0; }
.sys-status {
display: flex; align-items: center; gap: 7px; width: 100%;
font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 10.5px; letter-spacing: .4px; color: #8a8ea6;
}
.sys-status svg.lucide { font-size: 10px; color: #9a9db4; }
.sys-status .sys-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sys-status .sys-timer {
color: var(--accent); font-weight: 700;
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.sys-status .sys-eta {
color: var(--accent); font-weight: 700;
font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.sys-status .sys-long { font-style: italic; opacity: .85; }
body.dark-mode .sys-status { color: #666b85; }
body.dark-mode .sys-status svg.lucide { color: #5d6178; }
body.dark-mode .sys-status .sys-timer, body.dark-mode .sys-status .sys-eta { color: #8f83ff; }
.k-prog-text .sys-status { width: 100%; }
/* ==== Modo agente MCP: toggle, badge de confiança e cartões de confirmação ==== */
/* Container unificado MCP (botão + mini toggle lado a lado) */
.mcp-unified { display:flex; align-items:center; gap:4px; }
/* O par conta uma história: tomada (plugue) + cabo + robô. Ligando o Auto MCP o
plugue gira para o lado do robô e o cabo tracejado vira linha verde viva. */
.mcp-cabo {
flex:0 0 10px; height:2px; border-radius:2px; transition:.25s ease;
background:repeating-linear-gradient(90deg,#c3c7d6 0 3px,rgba(0,0,0,0) 3px 6px);
}
body.dark-mode .mcp-cabo { background:repeating-linear-gradient(90deg,#52556b 0 3px,rgba(0,0,0,0) 3px 6px); }
.mcp-unified.ligado { gap:2px; }
.mcp-unified.ligado .mcp-cabo {
background:#34c77b; box-shadow:0 0 6px rgba(52,199,123,.55);
animation:mcpEnergia 1.9s ease-in-out infinite;
}
#mcpBtn svg.lucide, #mcpBtn i[data-lucide] { transition:transform .25s ease; }
.mcp-unified.ligado #mcpBtn svg.lucide, .mcp-unified.ligado #mcpBtn i[data-lucide] { transform:rotate(90deg); }
.mcp-unified.ligado #mcpAgentToggle { box-shadow:0 0 0 3px rgba(52,199,123,.16); }
@keyframes mcpEnergia { 0%,100% { opacity:.65 } 50% { opacity:1; box-shadow:0 0 9px rgba(52,199,123,.8) } }
@media (prefers-reduced-motion:reduce) { .mcp-unified.ligado .mcp-cabo { animation:none } }
.mcp-unified .mcp-agent-toggle-mini {
background:transparent; border:1.5px solid #e05555; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:13px; transition:.2s; display:flex; align-items:center; gap:4px; color:#c0392b;
}
.mcp-unified .mcp-agent-toggle-mini:hover { background:rgba(224,85,85,.08); }
.mcp-unified .mcp-agent-toggle-mini.on { background:rgba(52,199,123,.12); color:#1e9e5a; border-color:#34c77b; }
.mcp-unified .mcp-agent-toggle-mini.on:hover { background:rgba(52,199,123,.2); }
body.dark-mode .mcp-agent-toggle-mini { border-color:#e05555; color:#ff8a80; }
body.dark-mode .mcp-agent-toggle-mini:hover { background:rgba(224,85,85,.15); }
body.dark-mode .mcp-agent-toggle-mini.on { background:rgba(52,199,123,.18); color:#7ee2a8; border-color:#34c77b; }
.mcp-trust-badge-mini {
display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; cursor:pointer;
color:#8a6d1a; background:rgba(240,196,60,.16); border:1px solid rgba(240,196,60,.55); font-size:12px;
}
.mcp-trust-badge-mini:hover { background:rgba(240,196,60,.28); }
body.dark-mode .mcp-trust-badge-mini { color:#e8cd7a; background:rgba(240,196,60,.12); }
.mcp-agent-toggle.on {
background: rgba(var(--accent-rgb), .14);
color: var(--accent);
border-color: rgba(var(--accent-rgb), .55);
}
body.dark-mode .mcp-agent-toggle.on { background: rgba(var(--accent-rgb), .22); color: #a89cff; }
.mcp-trust-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 999px; cursor: pointer;
font-size: 11.5px; font-weight: 600;
color: #8a6d1a; background: rgba(240, 196, 60, .16); border: 1px solid rgba(240, 196, 60, .55);
}
body.dark-mode .mcp-trust-badge { color: #e8cd7a; background: rgba(240, 196, 60, .12); }
.mcp-wrap { display: flex; justify-content: center; margin: 6px 0; }
.mcp-col { display: flex; flex-direction: column; gap: 6px; width: min(640px, 100%); }
.mcp-card {
width: 100%;
background: #fafaff; border: 1px solid #e4e1f7; border-left: 4px solid #b8b0ec;
border-radius: 12px; padding: 12px 14px;
/* .bubble base usa white-space:pre-wrap; sem isto as quebras de linha do
template do card viram espaço vazio gigante dentro do balão. */
white-space: normal;
}
body.dark-mode .mcp-card { background: #282a36; border-color: #3b3e52; }
.mcp-card.mcp-aprovado, .mcp-card.mcp-auto { border-left-color: #34c77b; }
.mcp-card.mcp-recusado, .mcp-card.mcp-expirado { border-left-color: #c9ccd8; opacity: .82; }
.mcp-card-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #555; }
body.dark-mode .mcp-card-head { color: #a7abc2; }
.mcp-card-head strong { color: var(--accent); }
.mcp-servidor { font-weight: 600; color: #444; }
body.dark-mode .mcp-servidor { color: #cfd3e4; }
.mcp-status { margin-left: auto; font-size: 12px; font-weight: 600; }
.mcp-pendente .mcp-status { color: #c98a1a; }
.mcp-aprovado .mcp-status, .mcp-auto .mcp-status { color: #20955c; }
.mcp-recusado .mcp-status { color: #c0392b; }
.mcp-expirado .mcp-status { color: #8b8fa3; }
.mcp-card-tool { margin-top: 6px; font-size: 14px; font-weight: 600; color: #333; }
body.dark-mode .mcp-card-tool { color: #e3e5f0; }
.mcp-card-erro { margin-top: 6px; font-size: 13px; color: #c0392b; }
.mcp-card-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mcp-card-imgs a { display: block; line-height: 0; border-radius: 8px; overflow: hidden; border: 1px solid #e4e1f7; }
body.dark-mode .mcp-card-imgs a { border-color: #3b3e52; }
.mcp-card-imgs img { display: block; max-width: 220px; max-height: 220px; object-fit: cover; cursor: zoom-in; }
/* Saída técnica: balão próprio, minimizado, com cara de terminal. Guarda
argumentos e resultado — o balão principal fica só com o essencial. */
.mcp-tech { border-radius: 10px; overflow: hidden; border: 1px solid #2b2f3a; background: #14161d; font-size: 12px; }
.mcp-tech summary {
cursor: pointer; padding: 6px 12px; list-style: none;
display: flex; align-items: center; gap: 7px;
font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
font-size: 11.5px; color: #8b93a8; user-select: none;
}
.mcp-tech summary::-webkit-details-marker { display: none; }
.mcp-tech summary::before { content: '▸'; font-size: 10px; color: #5c6478; transition: transform .15s; }
.mcp-tech[open] summary::before { transform: rotate(90deg); }
.mcp-tech summary:hover { color: #b6bdd0; }
.mcp-tech summary .lucide-terminal { font-size: 10.5px; color: #34c77b; }
.mcp-tech-body { padding: 0 12px 10px; }
.mcp-tech-lbl {
margin-top: 8px; font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: #5c6478;
}
.mcp-tech pre {
margin: 4px 0 0; padding: 8px 10px; max-height: 200px; overflow: auto;
background: #1b1e27; border: 1px solid #262a36; border-radius: 6px;
font-family: 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
font-size: 12px; line-height: 1.5; color: #a7e9c2;
white-space: pre-wrap; word-break: break-word;
}
/* Seletores de pré-chamada (qual IA, qual tamanho...) — estilo parecido com
os botões de formato/resolução do modo imagem. */
.mcp-pergunta { margin-top: 10px; }
.mcp-pergunta-lbl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--accent); }
.mcp-sel-grp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mcp-sel-opt {
padding: 5px 12px; border-radius: 999px; cursor: pointer;
font-size: 12px; font-weight: 600; font-family: inherit;
color: #555; background: #fff; border: 1px solid #d5d2ea; transition: all .15s;
}
.mcp-sel-opt:hover { border-color: var(--accent); color: var(--accent); }
.mcp-sel-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
body.dark-mode .mcp-sel-opt { background: #323544; color: #d5d8e6; border-color: #45495f; }
body.dark-mode .mcp-sel-opt:hover { border-color: #a89cff; color: #a89cff; }
body.dark-mode .mcp-sel-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mcp-card-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* Widget de upload (elicitacao MCP): botao de arquivo dentro do card */
.mcp-widget-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 12.5px; cursor: pointer; transition: background .15s; }
.mcp-widget-btn:hover { background: #6558e6; }
.mcp-card-actions .btn-small { padding: 5px 12px; font-size: 12.5px; border-radius: 8px; cursor: pointer; border: 1px solid #d5d2ea; background: #fff; }
body.dark-mode .mcp-card-actions .btn-small { background: #323544; color: #d5d8e6; border-color: #45495f; }
.mcp-card-actions .btn-import { background: var(--accent); color: #fff; border-color: var(--accent); }
.mcp-card-actions .btn-danger-outline { color: #c0392b; border-color: rgba(192, 57, 43, .45); background: transparent; }
/* ===== Ícones Lucide (migração do Font Awesome) =====
createIcons() troca por