/* ═══════════════════════════════════════════
   Quindi Intelligence — Shared Design System
   ═══════════════════════════════════════════ */

/* ── Design tokens ──────────────────────── */
:root {
    --primary: #00C26E;
    --bg: #000;
    --bg-panel: #0d0d0d;
    --bg-hover: #1a1a1a;
    --border: #222;
    --text: #eee;
    --text-muted: #777;
    --mono: 'SF Mono','Menlo','Cascadia Code','JetBrains Mono',monospace;
}

/* ── Reset ──────────────────────────────── */
* { margin:0; padding:0; box-sizing:border-box; }
html {
    height:100%; overflow:hidden; position:fixed; width:100%;
}
body {
    height:100%; overflow:hidden; position:fixed; width:100%;
    font-family: -apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;
    background:var(--bg); color:var(--text);
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
}

/* ── Shell layout ───────────────────────── */
.shell { display:flex; flex-direction:column; height:100%; overflow:hidden; }

/* ── Top bar ────────────────────────────── */
.topbar {
    display:flex; align-items:center; gap:.75rem;
    padding:0 1rem; background:var(--bg-panel);
    border-bottom:1px solid var(--border); flex-shrink:0;
    height:48px;
}
.topbar img { height:20px; }
.topbar .title { font-size:.85rem; color:var(--text-muted); font-weight:600; }
.topbar .back-btn {
    background:none; border:1px solid var(--border); color:var(--text-muted);
    border-radius:6px; padding:.25rem .7rem; font-size:.82rem;
    cursor:pointer; font-family:inherit;
    -webkit-tap-highlight-color:transparent;
    height:32px; display:flex; align-items:center; gap:.3rem;
}
.topbar .back-btn:active { background:var(--bg-hover); }
.topbar-spacer { flex:1; }

/* ── Top bar user/logout ────────────────── */
.topbar-user {
    display:flex; align-items:center; gap:.5rem;
    font-size:.72rem; color:var(--text-muted);
}
.topbar-user .user-name { color:#FFD700; font-weight:600; }
.logout-btn, .topbar-link[href*="logout"] {
    background:none; border:1px solid #FFD700; color:#FFD700;
    border-radius:4px; padding:.2rem .5rem; font-size:.68rem;
    cursor:pointer; font-family:inherit; text-decoration:none;
    transition:all .15s;
}
.logout-btn:hover, .topbar-link[href*="logout"]:hover { background:rgba(255,215,0,.1); }
.logout-btn:active, .topbar-link[href*="logout"]:active { background:rgba(255,215,0,.15); }
.topbar-link {
    color:var(--text-muted); text-decoration:none; border:1px solid var(--border);
    border-radius:4px; padding:.2rem .5rem; font-size:.68rem;
}
.topbar-link:active { color:var(--text); border-color:var(--text); }

/* ── Mode toggle (Chat/Trace/Memorie) ──── */
.mode-toggle {
    display:flex; background:#111; border:1px solid var(--border);
    border-radius:8px; overflow:hidden; flex-shrink:0;
}
.mode-btn {
    flex:1; text-align:center;
    padding:.35rem .7rem; font-size:.72rem; font-weight:600;
    color:var(--text-muted); text-decoration:none;
    border-right:1px solid var(--border);
    transition:background .15s, color .15s;
    -webkit-tap-highlight-color:transparent;
}
.mode-btn:last-child { border-right:none; }
.mode-btn:active, .mode-btn:hover { background:var(--bg-hover); }
.mode-btn.active { background:var(--primary); color:#000; }

/* ── Star rating ────────────────────────── */
.star-group { display:flex; gap:.25rem; }
.star-btn {
    background:none; border:none; color:#333; font-size:1.4rem;
    cursor:pointer; padding:.1rem; line-height:1;
    -webkit-tap-highlight-color:transparent;
    min-width:44px; min-height:44px;
    display:flex; align-items:center; justify-content:center;
    user-select:none; -webkit-user-select:none;
}
.star-btn:active { transform:scale(1.2); }
.star-btn.filled { /* color set inline per vote value */ }

/* ── No vote button ─────────────────────── */
.no-vote-btn {
    background:none; border:1px solid var(--border); color:var(--text-muted);
    border-radius:6px; padding:.35rem .6rem; font-size:.75rem; cursor:pointer;
    font-family:inherit; min-height:36px;
    -webkit-tap-highlight-color:transparent;
    transition:all .15s;
}
.no-vote-btn:active, .no-vote-btn:hover { border-color:var(--text); color:var(--text); }
.no-vote-btn.active { border-color:var(--primary); color:var(--primary); }

/* ── Vote save button ───────────────────── */
.vote-save {
    background:var(--primary); color:#000; border:none;
    border-radius:6px; padding:.35rem .9rem; font-size:.75rem;
    font-weight:700; cursor:pointer; min-height:36px;
    -webkit-tap-highlight-color:transparent;
    transition:opacity .15s;
}
.vote-save.edit-mode { background:#F0A030; }
.vote-save:active, .vote-save:hover { opacity:.85; }
.vote-saved { font-size:.75rem; color:var(--primary); }

/* ── Empty state ────────────────────────── */
.empty-state {
    flex:1; display:flex; align-items:center; justify-content:center;
    flex-direction:column;
    color:var(--text-muted); font-size:.88rem; padding:2rem;
    text-align:center;
}

/* ── User picker ────────────────────────── */
.user-picker {
    padding:.75rem 1rem; border-bottom:1px solid var(--border);
    background:var(--bg-panel); flex-shrink:0;
}
.user-picker label {
    font-size:.75rem; color:var(--text-muted); font-weight:600;
    display:block; margin-bottom:.4rem;
}
.user-select {
    background:#111; color:var(--text); border:1px solid var(--border);
    border-radius:6px; padding:.5rem .6rem; font-size:16px;
    font-family:inherit; width:100%; cursor:pointer;
    outline:none; min-height:44px;
    -webkit-appearance:none; appearance:none;
    transition:border-color .15s;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23777' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right .6rem center;
}
.user-select:focus { border-color:var(--primary); }
.user-select option { background:#111; color:var(--text); }

/* ── Vote note textarea/input ───────────── */
.vote-note {
    background:#111; color:var(--text);
    border:1px solid var(--border); border-radius:6px;
    padding:.5rem .6rem; font-size:16px; font-family:inherit;
    outline:none; transition:border-color .15s;
    line-height:1.5;
}
.vote-note:focus { border-color:var(--primary); }
.vote-note::placeholder { color:#555; }
.vote-note.required { border-color:#FF6B6B; }
.vote-note.readonly { opacity:.7; background:#0a0a0a; }

/* ── Vote dot (file list) ───────────────── */
.vote-dot { font-size:.7rem; letter-spacing:-1px; }