/* ============================================================
   Counsel AI — legal document intelligence workspace
   Light + dark themes via [data-theme] on <html>.
   ============================================================ */
:root {
  --navy-900: #041627; --navy-800: #072138; --navy-700: #0d2c48; --navy-600: #14385c;
  --accent: #0060ac; --accent-hover: #004f8f; --oxblood: #b33f40;
  --bg: #f7f8fb; --surface: #ffffff; --surface-2: #f1f4f8; --border: #e2e6ee;
  --text: #14202e; --text-soft: #5b6675; --text-faint: #8a94a3;
  --gold: #cca830; --good: #2e9e5b; --bad: #c6413f;
  --radius: 10px; --radius-sm: 6px; --sidebar-w: 264px; --insights-w: 300px;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --shadow-sm: 0 1px 2px rgba(9,24,45,.06), 0 1px 3px rgba(9,24,45,.08);
  --shadow-md: 0 8px 24px rgba(9,24,45,.12);
  /* Sidebar (light theme): pale surface, dark text, blue active */
  --side-bg: #eef1f6;
  --side-border: #e2e6ee;
  --side-text: #3a4657;
  --side-text-dim: #8a94a3;
  --side-label: #9aa4b2;
  --side-hover: #e2e7f0;
  --side-active-bg: #d9e8f7;
  --side-active-text: #0060ac;
  --side-active-bar: #0060ac;
  --side-brand-text: #14202e;
}
html[data-theme="dark"] {
  --bg: #0a1420; --surface: #0f1c2c; --surface-2: #14263a; --border: #1e3349;
  --text: #e6ecf4; --text-soft: #9fb0c4; --text-faint: #6c7d92;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3); --shadow-md: 0 8px 28px rgba(0,0,0,.45);
  /* Dark sidebar (light mode keeps the pale sidebar from :root) */
  --side-bg: #0b1a2b; --side-border: #16283d; --side-text: #b9c6d8;
  --side-text-dim: #7d8ea3; --side-label: #63758c; --side-hover: rgba(255,255,255,.06);
  --side-active-bg: #14385c; --side-active-text: #ffffff; --side-active-bar: #4f8ef7;
  --side-brand-text: #ffffff;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans); background: var(--bg); color: var(--text);
  font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  display: flex; overflow: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.material-symbols-outlined { font-size: 20px; line-height: 1; vertical-align: middle; }

/* Sidebar */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--side-bg); color: var(--side-text); border-right: 1px solid var(--side-border); display: flex; flex-direction: column; height: 100vh; transition: width .22s ease; overflow: hidden; }
.sidebar.collapsed { width: 64px; }

/* Text labels fade + shrink to zero width instead of display:none, so they
   never cause a reflow that shoves the logo. They also don't wrap. */
.nav-label, .brand-text-wrap, .history-group-label, .history-item .h-label {
  white-space: nowrap;
  transition: opacity .12s ease;
}
.sidebar.collapsed .nav-label,
.sidebar.collapsed .brand-text-wrap,
.sidebar.collapsed .history-group-label,
.sidebar.collapsed .history-item .h-label {
  opacity: 0;
  pointer-events: none;
}
/* History rows fade out entirely when collapsed but keep their flex space so
   the footer stays pinned to the bottom. */
.sidebar.collapsed .history-area { opacity: 0; pointer-events: none; }
.history-area { transition: opacity .12s ease; }
.sidebar.collapsed .brand-collapse { display: none; }
.sidebar.collapsed .brand-logo { cursor: pointer; }
.brand-logo { position: relative; }
.sidebar.collapsed .nav-item, .sidebar.collapsed .history-item { justify-content: flex-start; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 15px; border-bottom: 1px solid var(--side-border); }
.brand-logo { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; background: var(--oxblood); display: flex; align-items: center; justify-content: center; }
.brand-gavel { color: #fff; font-size: 20px; }
.brand-text-wrap { flex: 1; min-width: 0; }
.brand-name { font-weight: 700; font-size: 15px; color: var(--side-brand-text); letter-spacing: -.01em; }
.brand-sub { font-size: 11px; color: #7d8ea3; letter-spacing: .04em; text-transform: uppercase; }
.brand-collapse { color: var(--side-text-dim); padding: 4px; border-radius: 6px; display: flex; }
.brand-collapse:hover { background: var(--side-hover); color: var(--side-brand-text); }
.history-area { flex: 1; overflow-y: auto; padding: 12px 10px; }
.history-loading, .history-empty { color: var(--side-text-dim); font-size: 13px; padding: 12px; }
.history-group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--side-label); padding: 12px 8px 5px; }
.history-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: 7px; border-left: 3px solid transparent; text-align: left; color: var(--side-text); font-size: 13px; margin-bottom: 2px; }
.history-item:hover { background: var(--side-hover); }
.history-item.active { background: var(--side-active-bg); color: var(--side-active-text); border-left-color: var(--side-active-bar); font-weight: 600; }
.history-item .mi { font-size: 17px; flex-shrink: 0; opacity: .8; }
.history-item .h-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-nav { padding: 8px 10px; border-top: 1px solid var(--side-border); }
.sidebar-footer { padding: 8px 10px 14px; border-top: 1px solid var(--side-border); }
.nav-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 7px; color: var(--side-text); font-size: 13.5px; cursor: pointer; text-decoration: none; }
.nav-item:hover { background: var(--side-hover); color: var(--side-brand-text); }
.nav-icon { font-size: 19px; flex-shrink: 0; }

/* Main */
.main { flex: 1; display: flex; flex-direction: column; height: 100vh; min-width: 0; }
.topbar { height: 56px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--surface); }
.topbar-title { font-weight: 600; font-size: 15px; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.btn-export { display: flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; padding: 8px 14px; border-radius: 8px; }
.btn-export:hover { background: var(--accent-hover); }
.btn-icon-round { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-soft); }
.btn-icon-round:hover { background: var(--surface-2); color: var(--text); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy-600); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.stats-bar { display: flex; gap: 8px; padding: 10px 20px; flex-wrap: wrap; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.stat-chip { font-size: 12px; color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); padding: 4px 10px; border-radius: 20px; }
.stat-chip strong { color: var(--text); }

/* Canvas */
.canvas { flex: 1; display: flex; min-height: 0; }
.chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 24px; }
.empty-state { max-width: 560px; margin: 8vh auto 0; text-align: center; }
.empty-icon { font-size: 44px; color: var(--oxblood); opacity: .9; }
.empty-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; margin: 12px 0 6px; }
.empty-sub { color: var(--text-soft); margin-bottom: 24px; }
.suggestion-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chip { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); font-size: 13px; text-align: left; cursor: pointer; transition: border-color .12s, transform .12s; }
.chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.msg-user { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.msg-user .bubble { max-width: 76%; background: var(--accent); color: #fff; padding: 11px 15px; border-radius: 14px 14px 2px 14px; font-size: 14px; white-space: pre-wrap; }
.msg-ai { margin-bottom: 24px; }
.ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ai-avatar { width: 26px; height: 26px; border-radius: 6px; background: var(--oxblood); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ai-avatar .material-symbols-outlined { color: #fff; font-size: 16px; }
.ai-name { font-weight: 600; font-size: 13px; }
.ai-timing { font-size: 11px; color: var(--text-faint); margin-left: auto; }
.ai-body { background: var(--surface); border: 1px solid var(--border); border-radius: 2px 14px 14px 14px; padding: 16px 18px; font-size: 14px; line-height: 1.65; }
.ai-body p { margin: 0 0 10px; } .ai-body p:last-child { margin-bottom: 0; }
.ai-body h1, .ai-body h2, .ai-body h3 { font-family: var(--font-serif); margin: 14px 0 8px; }
.ai-body ul, .ai-body ol { margin: 0 0 10px 20px; }
.ai-body code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.ai-body pre { background: var(--surface-2); padding: 12px; border-radius: 8px; overflow-x: auto; margin-bottom: 10px; }
.citations { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cite-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); padding: 4px 9px; border-radius: 6px; font-size: 11.5px; color: var(--text-soft); cursor: pointer; }
.cite-chip:hover { border-color: var(--accent); color: var(--text); }
.cite-chip .doc-id { font-weight: 700; color: var(--accent); font-family: ui-monospace, monospace; }
.ai-actions { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.ai-actions button { width: 30px; height: 30px; border-radius: 6px; color: var(--text-faint); display: flex; align-items: center; justify-content: center; }
.ai-actions button:hover { background: var(--surface-2); color: var(--text); }
.ai-actions button.active-up { color: var(--good); }
.ai-actions button.active-down { color: var(--bad); }
.ai-actions .material-symbols-outlined { font-size: 18px; }
.thinking { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
.thinking .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bounce 1.2s infinite; }
.thinking .dot:nth-child(2){ animation-delay: .15s; } .thinking .dot:nth-child(3){ animation-delay: .3s; }
@keyframes bounce { 0%,80%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-4px);} }
@media (prefers-reduced-motion: reduce){ .thinking .dot{ animation: none; } }
.input-area { padding: 14px 24px 18px; border-top: 1px solid var(--border); background: var(--surface); }
.input-box { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 8px; }
.input-box:focus-within { border-color: var(--accent); }
.input-box textarea { flex: 1 1 auto; min-width: 0; border: none; background: none; resize: none; color: var(--text); font-size: 14px; line-height: 1.5; max-height: 120px; padding: 6px 4px; box-sizing: border-box; }
.input-box textarea:focus { outline: none; }
.btn-send { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.btn-send:hover { background: var(--accent-hover); } .btn-send:disabled { opacity: .5; cursor: default; }
.input-disclaimer { text-align: center; font-size: 11px; color: var(--text-faint); margin-top: 8px; }
.insights-panel { width: var(--insights-w); flex-shrink: 0; border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; height: 100%; }
.insights-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.insights-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.insights-bulb { color: var(--gold); }
.btn-icon-sm { color: var(--text-faint); padding: 4px; border-radius: 6px; } .btn-icon-sm:hover { background: var(--surface-2); }
.insights-body { flex: 1; overflow-y: auto; padding: 14px; }
.insights-placeholder { color: var(--text-faint); font-size: 13px; text-align: center; padding: 24px 8px; }
.insight-card { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 11px 12px; margin-bottom: 10px; }
.insight-type { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); font-weight: 700; margin-bottom: 4px; }
.insight-text { font-size: 13px; line-height: 1.5; margin-bottom: 8px; }
.insight-source { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-faint); }
.insight-source .mi { font-size: 14px; }
.insight-del { position: absolute; top: 8px; right: 8px; color: var(--text-faint); padding: 2px; border-radius: 4px; opacity: 0; transition: opacity .12s; }
.insight-card:hover .insight-del { opacity: 1; } .insight-del:hover { color: var(--bad); }
.btn-add-note { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 10px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-soft); font-size: 13px; margin-top: 4px; }
.btn-add-note:hover { border-color: var(--accent); color: var(--accent); }
#toast-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 1000; align-items: center; }
.toast { padding: 10px 18px; border-radius: 8px; font-size: 13px; color: #fff; background: var(--navy-700); box-shadow: var(--shadow-md); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--good); } .toast-error { background: var(--bad); }
@media (max-width: 1080px) { .insights-panel { display: none; } }
@media (max-width: 720px) { .sidebar { position: absolute; z-index: 50; height: 100vh; box-shadow: var(--shadow-md); } .stats-bar { display: none; } }

/* --- Insights: floating add-note button (10) --- */
.insights-panel { position: relative; }
.insights-body { padding-bottom: 68px; }  /* room so last card isn't hidden by the floating button */
.btn-add-note {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: var(--surface); box-shadow: var(--shadow-md);
  margin-top: 0; z-index: 5;
}
.btn-add-note:hover { background: var(--surface-2); }

/* --- Modal (manual note) (5) --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(4,22,39,.45);
  display: flex; align-items: center; justify-content: center; z-index: 2000;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md);
  width: 100%; max-width: 440px; padding: 22px;
}
.modal-title { font-family: var(--font-serif); font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.modal-input {
  width: 100%; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text); font-family: inherit; font-size: 14px;
  padding: 11px 13px; resize: vertical; min-height: 90px;
}
.modal-input:focus { outline: none; border-color: var(--accent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.modal-btn { padding: 9px 16px; border-radius: 9px; font-weight: 600; font-size: 13px; }
.modal-btn.ghost { background: var(--surface-2); color: var(--text-soft); }
.modal-btn.ghost:hover { color: var(--text); }
.modal-btn.primary { background: var(--accent); color: #fff; }
.modal-btn.primary:hover { background: var(--accent-hover); }

/* --- Account row reads as info, not a button (2) --- */
#account-item { cursor: default; }
#account-item:hover { background: none; }

/* Clickable citation superscripts in answer text */
.cite-ref-link { text-decoration: none; }
.cite-ref {
  display: inline-block; font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: var(--accent); border-radius: 4px;
  padding: 2px 4px; margin: 0 1px; vertical-align: super; cursor: pointer;
  transition: background .12s;
}
.cite-ref-link:hover .cite-ref { background: var(--accent-hover); }
/* Citation chips as links */
a.cite-chip { text-decoration: none; }
a.cite-chip:hover { border-color: var(--accent); }

/* In-chat model picker */
.model-picker-wrap{ display:flex; align-items:center; gap:4px; flex-shrink:0; height:38px; padding:0 8px; border:1px solid var(--border); border-radius:10px; background:var(--surface); cursor:pointer; }
.model-picker-wrap:hover{ border-color:var(--accent); }
.model-picker-icon{ font-size:16px; color:var(--accent); }
.model-picker-wrap select{
  font-size:12px; border:none; background:none; color:var(--text);
  cursor:pointer; outline:none; max-width:130px;
  text-overflow:ellipsis;
}

/* Timeline nav link in the topbar */
.btn-nav{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;
  padding:8px 14px;border-radius:8px;border:1.5px solid var(--accent);color:var(--accent);
  background:var(--surface);transition:background .12s,color .12s}
.btn-nav:hover{background:var(--accent);color:#fff}

/* Add-to-timeline modal (from chat) */
.tl-modal-overlay{position:fixed;inset:0;background:rgba(8,18,30,.45);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.tl-modal-overlay.show{display:flex}
.tl-modal{background:var(--surface);border-radius:14px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.tl-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.tl-modal-head h2{font-family:var(--font-serif);font-size:18px;margin:0}
.tl-modal-close{border:none;background:none;font-size:22px;color:var(--text-faint);cursor:pointer;line-height:1}
.tl-modal-body{padding:16px 20px;display:flex;flex-direction:column;gap:12px}
.tl-field{display:flex;flex-direction:column;gap:5px}
.tl-field label{font-size:12px;font-weight:600;color:var(--text-soft)}
.tl-field input,.tl-field textarea{font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);width:100%}
.tl-field textarea{resize:vertical;min-height:70px}
.tl-field-row{display:flex;gap:12px}.tl-field-row>*{flex:1}
.tl-seg{display:flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.tl-seg button{flex:1;padding:9px;font-size:13px;font-weight:600;border:none;background:var(--surface);color:var(--text-soft);cursor:pointer}
.tl-seg button.on{background:var(--gold);color:#23324a}
.tl-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}
.tl-btn-ghost{border:1px solid var(--border);background:var(--surface);color:var(--text-soft);padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}
.tl-btn-primary{border:none;background:var(--accent);color:#fff;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer}