/* ============================================================
   Corporate Banking Analyst — finance-grade dark theme
   Owns: static/styles.css
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  --bg: #0a111e;
  --bg-grad-1: #0b1322;
  --bg-grad-2: #0a0f1a;
  --panel: #131c2e;
  --panel-2: #0f1827;
  --panel-3: #18233a;
  --line: #243049;
  --line-soft: #1b2740;
  --text: #e6edf7;
  --muted: #8aa0c0;
  --muted-2: #62748f;
  --accent: #3b82f6;
  --accent-hover: #4f90ff;
  --accent-press: #2f6fd6;
  --accent-soft: rgba(59, 130, 246, 0.14);
  --link: #7eb0ff;
  --danger: #f0526b;
  --danger-soft: rgba(240, 82, 107, 0.13);
  --ok: #34d399;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --sidebar-w: 260px;
  --topbar-h: 56px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 200ms;
  --t-slow: 250ms;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 78% -10%, #14223d 0%, transparent 55%),
    radial-gradient(900px 700px at -5% 110%, #112038 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
}

button, input, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.hidden { display: none !important; }

/* ---------- Custom scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: #2f3e5c; background-clip: content-box; }

/* =========================================================
   SIGN-IN
   ========================================================= */
#login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(24px + var(--sat)) calc(20px + var(--sar))
           calc(24px + var(--sab)) calc(20px + var(--sal));
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 36px 30px 30px;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  animation: card-in 520ms var(--ease) both;
}
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.85;
}

/* brand mark: a clean monogram square */
.login-card .brand {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  padding-left: 52px;
  position: relative;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.login-card .brand::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(145deg, var(--accent), #1e5fc4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), var(--shadow-1);
}
/* bar-chart glyph drawn with layered gradients */
.login-card .brand::after {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 20px; height: 16px;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--text), var(--text)) 0 100% / 4px 7px no-repeat,
    linear-gradient(var(--text), var(--text)) 8px 100% / 4px 14px no-repeat,
    linear-gradient(var(--text), var(--text)) 16px 100% / 4px 10px no-repeat;
  opacity: 0.95;
}

.brand-sub {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-bottom: 26px;
}

#pass {
  width: 100%;
  padding: 13px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  outline: none;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-med) var(--ease);
}
#pass::placeholder { color: var(--muted-2); }
#pass:focus {
  border-color: var(--accent);
  background: #0c1525;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#loginBtn {
  margin-top: 14px;
  width: 100%;
  padding: 13px 14px;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border: 1px solid var(--accent-press);
  border-radius: var(--radius-m);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
#loginBtn:hover { filter: brightness(1.07); box-shadow: var(--shadow-2); }
#loginBtn:active { transform: translateY(1px) scale(0.995); filter: brightness(0.97); }

#loginErr {
  min-height: 18px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--danger);
  text-align: center;
}
#loginErr:not(:empty) {
  animation: shake 420ms var(--ease) both;
}
/* JS toggles .shake on #login (and clears it) to replay the error shake. */
#login.shake .login-card { animation: shake 420ms var(--ease) both; }

/* =========================================================
   APP SHELL
   ========================================================= */
#app {
  height: 100%;
  display: flex;
  position: relative;
}

/* ---------- Sidebar ---------- */
#sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: linear-gradient(180deg, var(--panel-2), #0c1422);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: calc(14px + var(--sat)) 12px calc(12px + var(--sab));
  padding-left: calc(12px + var(--sal));
  gap: 12px;
  z-index: 40;
  /* desktop collapse animates the width smoothly */
  overflow: hidden;
  transition: flex-basis var(--t-med) var(--ease),
              width var(--t-med) var(--ease),
              padding var(--t-med) var(--ease),
              opacity var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
/* Desktop: collapse the sidebar to zero width (the ≡ menu button toggles it).
   The drawer behavior on mobile uses a different mechanism (transform). */
#app.sidebar-collapsed #sidebar {
  flex-basis: 0;
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  border-right-color: transparent;
  pointer-events: none;
}

#newChat {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.45);
  border-radius: var(--radius-m);
  color: var(--text);
  font-weight: 600;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease);
}
#newChat::before {
  content: "";
  width: 14px; height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  opacity: 0.9;
}
#newChat:hover { background: rgba(59,130,246,0.22); border-color: var(--accent); }
#newChat:active { transform: translateY(1px); }

/* Conversation list */
#convList {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -4px;
  padding: 0 4px;
}

.conv-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 34px 9px 11px;
  border-radius: var(--radius-s);
  color: var(--muted);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  animation: fade-in 220ms var(--ease) both;
}
.conv-item:hover { background: var(--panel); color: var(--text); }
.conv-item.active {
  background: var(--panel-3);
  color: var(--text);
  border-color: var(--line);
}
.conv-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

.conv-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.conv-title {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 1.35;
}
/* inline edit field used by rename (double-click title) */
.conv-title-edit {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 2px 6px;
  margin: -3px 0;
  background: var(--panel-2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--text);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.conv-time {
  font-size: 11px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-item.active .conv-time { color: var(--muted); }

.conv-del {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%) scale(0.85);
  width: 24px; height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted-2);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* X glyph */
.conv-del::before, .conv-del::after {
  content: "";
  position: absolute;
  width: 12px; height: 1.6px;
  background: currentColor;
  border-radius: 2px;
}
.conv-del::before { transform: rotate(45deg); }
.conv-del::after { transform: rotate(-45deg); }
.conv-item:hover .conv-del,
.conv-item.active .conv-del {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}
.conv-del:hover { color: var(--danger); background: var(--danger-soft); }

/* Sidebar footer nav */
.sidebar-foot {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.sidebar-foot button {
  padding: 10px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--muted);
  font-weight: 500;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.sidebar-foot button:hover { color: var(--text); border-color: #2f3e5c; }
.sidebar-foot button:active { transform: translateY(1px); }
.sidebar-foot button.active {
  color: var(--text);
  background: var(--accent-soft);
  border-color: rgba(59,130,246,0.45);
}
#signout { grid-column: 1 / -1; }
#signout:hover { color: var(--danger); border-color: rgba(240,82,107,0.4); }

/* ---------- Scrim ---------- */
#scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 16, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 35;
  opacity: 0;
  animation: fade 180ms var(--ease) forwards;
}

/* =========================================================
   MAIN
   ========================================================= */
#main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#topbar {
  flex: 0 0 auto;
  height: calc(var(--topbar-h) + var(--sat));
  padding: var(--sat) calc(16px + var(--sar)) 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  z-index: 20;
}

#menuBtn {
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
#menuBtn:hover { background: var(--panel-3); }
#menuBtn:active { transform: scale(0.94); }

#viewTitle {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- View switch animation ---------- */
#chatView, #reportsView, #logsView, #newsView {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  animation: view-in var(--t-slow) var(--ease) both;
}

/* ---------- Tab bar (segmented control) ---------- */
#tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
  /* center within the topbar; cap so it doesn't sprawl on wide screens */
  margin: 0 auto;
  max-width: 360px;
  overflow-x: auto;
  scrollbar-width: none;
}
#tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: 0 0 auto;
  position: relative;
  padding: 7px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--t-med) var(--ease),
              color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              transform var(--t-fast) var(--ease);
}
.tab:hover { color: var(--text); }
.tab:active { transform: translateY(1px); }
.tab.active {
  color: var(--text);
  background: var(--panel-3);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
.tab.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: 18px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--accent);
}

/* =========================================================
   CHAT
   ========================================================= */
#messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}
#messages > * { width: 100%; }

/* center column for readability */
.msg {
  max-width: 760px;
  width: fit-content;
  margin: 0 auto 0 0;
  align-self: stretch;
}

.msg {
  display: block;
}

/* bubble base */
.msg.user, .msg.assistant, .msg.status {
  max-width: min(85%, 720px);
  padding: 12px 15px;
  border-radius: 16px;
  line-height: 1.55;
  box-shadow: var(--shadow-1);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.msg.assistant {
  align-self: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top-left-radius: 5px;
  color: var(--text);
}

.msg.user {
  align-self: flex-end;
  margin-left: auto;
  background: linear-gradient(180deg, var(--accent), var(--accent-press));
  border: 1px solid var(--accent-press);
  border-top-right-radius: 5px;
  color: #fff;
}

.msg.status {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13.5px;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Markdown content inside assistant bubbles */
.msg.assistant p { margin: 0 0 10px; }
.msg.assistant p:last-child { margin-bottom: 0; }
.msg.assistant h1, .msg.assistant h2, .msg.assistant h3 {
  margin: 14px 0 8px;
  line-height: 1.25;
  font-weight: 650;
}
.msg.assistant h1 { font-size: 19px; }
.msg.assistant h2 { font-size: 17px; }
.msg.assistant h3 { font-size: 15px; color: var(--muted); }
.msg.assistant ul, .msg.assistant ol { margin: 6px 0 10px; padding-left: 20px; }
.msg.assistant li { margin: 3px 0; }
.msg.assistant hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.msg.assistant code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1px 5px;
}
.msg.assistant pre {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 12px;
  overflow-x: auto;
}
.msg.assistant pre code { background: none; border: none; padding: 0; }
.msg.assistant table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 13.5px;
}
.msg.assistant th, .msg.assistant td {
  border: 1px solid var(--line);
  padding: 7px 9px;
  text-align: left;
}
.msg.assistant th { background: var(--panel-2); font-weight: 600; }
.msg.assistant tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }

/* Typing indicator */
.typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.typing span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  display: inline-block;
  animation: typing-bounce 1.3s infinite var(--ease);
}
.typing span:nth-child(2) { animation-delay: 0.18s; }
.typing span:nth-child(3) { animation-delay: 0.36s; }

/* In-chat report card */
.msg-report {
  align-self: flex-start;
  max-width: min(90%, 560px);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  box-shadow: var(--shadow-2);
}
.msg-report { cursor: pointer; }
/* JS emits `.report-head` (title line), `.report-preview`, `.report-actions`. */
.msg-report .rep-title,
.msg-report .report-head {
  font-weight: 650;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.01em;
}
.msg-report .rep-title::before,
.msg-report .report-head::before {
  content: "";
  width: 16px; height: 16px;
  flex: 0 0 auto;
  border: 1.6px solid var(--accent);
  border-radius: 3px;
  background:
    linear-gradient(var(--accent), var(--accent)) 4px 7px / 8px 1.4px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 4px 10px / 6px 1.4px no-repeat;
}
.msg-report .rep-sub,
.msg-report .report-preview {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-report .rep-actions,
.msg-report .report-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-report button, .msg-report a,
.msg-report .rep-act {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.msg-report button:hover, .msg-report a:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
}
.msg-report button:active, .msg-report a:active { transform: translateY(1px); }
.msg-report .primary {
  background: var(--accent);
  border-color: var(--accent-press);
  color: #fff;
}
.msg-report .primary:hover { background: var(--accent-hover); }

/* ---------- Composer ---------- */
#composer {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 16px calc(12px + var(--sab));
  padding-left: calc(16px + var(--sal));
  padding-right: calc(16px + var(--sar));
  border-top: 1px solid var(--line);
  background: rgba(11, 18, 32, 0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
#composer .composer-inner {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

#input {
  flex: 1 1 auto;
  resize: none;
  max-height: 180px;
  min-height: 44px;
  padding: 11px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  line-height: 1.45;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
#input::placeholder { color: var(--muted-2); }
#input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#send, #reportBtn {
  flex: 0 0 auto;
  height: 44px;
  border-radius: 14px;
  font-weight: 600;
  transition: background var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}

#send {
  padding: 0 20px;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border: 1px solid var(--accent-press);
  color: #fff;
  box-shadow: var(--shadow-1);
}
#send:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-2); }
#send:active:not(:disabled) { transform: translateY(1px) scale(0.98); }

#reportBtn {
  padding: 0 16px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  color: var(--muted);
}
#reportBtn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#reportBtn:active:not(:disabled) { transform: translateY(1px); }

#send:disabled, #reportBtn:disabled, #composer.busy #input {
  opacity: 0.5;
  filter: grayscale(0.3);
  transform: none;
  box-shadow: none;
}

/* =========================================================
   REPORTS VIEW
   ========================================================= */
#reportsView { overflow: hidden; }
#repList, #repDoc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

#repList {
  padding: 18px 16px calc(20px + var(--sab));
  gap: 14px;
}

#genBar {
  display: flex;
  gap: 8px;
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
}
#topic {
  flex: 1 1 auto;
  padding: 11px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  outline: none;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
#topic::placeholder { color: var(--muted-2); }
#topic:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

#gen {
  flex: 0 0 auto;
  padding: 0 20px;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border: 1px solid var(--accent-press);
  border-radius: var(--radius-m);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: filter var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
#gen:hover:not(:disabled) { filter: brightness(1.08); }
#gen:active:not(:disabled) { transform: translateY(1px); }
#gen:disabled { opacity: 0.55; }

#repErr {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  color: var(--danger);
  font-size: 13.5px;
  min-height: 0;
}
#repErr:not(:empty) {
  padding: 10px 14px;
  background: var(--danger-soft);
  border: 1px solid rgba(240,82,107,0.35);
  border-radius: var(--radius-s);
  animation: fade-in 220ms var(--ease) both;
}

/* Cards grid */
#cards {
  max-width: 920px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 15px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  animation: fade-in 280ms var(--ease) both;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.card:active { transform: translateY(-1px); }
.card .card-title {
  font-weight: 650;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.card .card-meta { font-size: 12.5px; color: var(--muted); }
.card .card-preview {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Report document ---------- */
#repDoc { padding: 0; }

.docbar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(11, 18, 32, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
#repBack {
  padding: 8px 14px 8px 30px;
  position: relative;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 500;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
#repBack::before {
  content: "";
  position: absolute;
  left: 13px; top: 50%;
  width: 8px; height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
#repBack:hover { background: var(--accent-soft); border-color: var(--accent); }
#dlBtns { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* download pill buttons */
a.dl, .dl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
a.dl::before, .dl::before {
  content: "";
  width: 11px; height: 13px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  background:
    linear-gradient(currentColor, currentColor) center 3px / 5px 1.4px no-repeat,
    linear-gradient(currentColor, currentColor) center 6px / 5px 1.4px no-repeat;
  opacity: 0.85;
}
a.dl:hover, .dl:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
}
a.dl:active, .dl:active { transform: translateY(1px); }

/* Document typography */
.doc {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 22px calc(40px + var(--sab));
  line-height: 1.65;
  color: var(--text);
}
.doc h1, .doc h2, .doc h3 { line-height: 1.25; letter-spacing: -0.01em; }
.doc h1 { font-size: 26px; font-weight: 700; margin: 0 0 14px; }
.doc h2 {
  font-size: 20px;
  font-weight: 650;
  margin: 28px 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.doc h3 { font-size: 16px; font-weight: 600; margin: 20px 0 8px; color: var(--muted); }
.doc p { margin: 0 0 13px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin: 5px 0; }
.doc li::marker { color: var(--accent); }
.doc hr { border: none; border-top: 1px solid var(--line); margin: 22px 0; }
.doc a { color: var(--link); border-bottom: 1px solid rgba(126,176,255,0.3); }
.doc a:hover { border-bottom-color: var(--link); text-decoration: none; }
.doc strong { font-weight: 650; color: #f1f5fc; }
.doc code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1.5px 6px;
}
.doc pre {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 14px;
  overflow-x: auto;
  margin: 0 0 14px;
}
.doc pre code { background: none; border: none; padding: 0; }

/* Tables */
.doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 18px;
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.doc thead th {
  background: var(--panel-3);
  font-weight: 650;
  text-align: left;
  font-size: 13px;
  letter-spacing: 0.01em;
}
.doc th, .doc td {
  border: 1px solid var(--line);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.doc tbody tr:nth-child(even) { background: rgba(255,255,255,0.022); }
.doc tbody tr:hover { background: var(--accent-soft); }

/* Chart panel */
.chartwrap {
  margin: 8px 0 20px;
  padding: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  position: relative;
  flex: 0 0 auto;          /* never let a flex parent stretch/shrink it */
}
/* Chart uses maintainAspectRatio:true, so the canvas height is derived from its
   width and the box grows to fit the whole graph — no clipping, no overlap. */
.chartwrap canvas { display: block; max-width: 100%; }
.chartwrap img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   LOGS VIEW (admin)
   ========================================================= */
#logsView { overflow: hidden; }
#logsContent {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 16px calc(24px + var(--sab));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.log-section {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  animation: fade-in 280ms var(--ease) both;
}
.log-section > h2 {
  margin: 0;
  padding: 13px 16px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-3);
  border-bottom: 1px solid var(--line);
}

.log-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-fast) var(--ease);
}
.log-row:last-child { border-bottom: none; }
.log-row:nth-child(even) { background: rgba(255, 255, 255, 0.018); }
.log-row:hover { background: var(--accent-soft); }

/* primary line: first non-meta content of the row */
.log-row > :first-child {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}

.log-meta {
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}
/* dotted separators between meta fields if JS uses <span> segments */
.log-meta > span + span::before {
  content: "·";
  color: var(--muted-2);
  margin-right: 6px;
}
.log-meta .ok { color: var(--ok); }
.log-meta .bad, .log-meta .danger { color: var(--danger); }
/* sign-in status pill (JS emits `log-status ok|fail`) */
.log-status { font-weight: 600; font-size: 12px; letter-spacing: .02em; }
.log-status.ok { color: var(--ok); }
.log-status.fail { color: var(--danger); }

/* =========================================================
   SYSTEM MONITOR (in #metricsPanel, above #logsContent)
   ========================================================= */
#metricsPanel {
  flex: 0 0 auto;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
#metricsPanel:empty { display: none; }

/* current-value cards */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.metric-card {
  position: relative;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  animation: fade-in 280ms var(--ease) both;
}
.metric-card:hover {
  transform: translateY(-2px);
  border-color: #2f3e5c;
  box-shadow: var(--shadow-2);
}
.metric-value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.metric-value .unit {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
.metric-label {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.metric-sub,
.metric-sublabel {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric-sublabel:empty { display: none; }

/* live line-chart wrappers */
.metric-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.metric-chart {
  display: flex;
  flex-direction: column;
  height: 210px;
  padding: 12px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  animation: fade-in 280ms var(--ease) both;
}
.metric-chart .metric-chart-title {
  flex: 0 0 auto;
  margin-bottom: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
/* canvas wrapper grows to fill the remaining height; Chart.js sizes to it */
.metric-chart .metric-chart-canvas {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.metric-chart .metric-chart-canvas canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* status dot for model / services */
.status-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
  vertical-align: middle;
  background: var(--muted-2);
  box-shadow: 0 0 0 3px transparent;
}
.status-dot.up {
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
.status-dot.down {
  background: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}
/* allow inline dot + text inside a metric value */
.metric-value .status-dot { align-self: center; }

/* =========================================================
   MODAL — #reportModal (report context prompt)
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--sat)) calc(18px + var(--sar))
           calc(20px + var(--sab)) calc(18px + var(--sal));
  background: rgba(4, 8, 16, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade var(--t-med) var(--ease) both;
}
.modal.hidden { display: none; }

.modal-card {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  animation: modal-in var(--t-slow) var(--ease) both;
}
.modal-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.85;
}
.modal-card h2 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.modal-sub {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
#reportContext {
  width: 100%;
  resize: vertical;
  min-height: 76px;
  max-height: 240px;
  padding: 11px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  outline: none;
  line-height: 1.5;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
#reportContext::placeholder { color: var(--muted-2); }
#reportContext:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* shared modal/overlay button styles */
.btn-primary, .btn-secondary {
  padding: 10px 18px;
  border-radius: var(--radius-m);
  font-weight: 600;
  font-size: 14px;
  transition: background var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn-primary {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border: 1px solid var(--accent-press);
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-2); }
.btn-primary:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-secondary {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
}
.btn-secondary:hover:not(:disabled) { color: var(--text); border-color: #2f3e5c; background: var(--panel); }
.btn-secondary:active:not(:disabled) { transform: translateY(1px); }
.btn-secondary:disabled { opacity: 0.55; cursor: not-allowed; }

/* =========================================================
   OVERLAY — #reportOverlay (full-screen report reader)
   ========================================================= */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--sat)) calc(18px + var(--sar))
           calc(20px + var(--sab)) calc(18px + var(--sal));
  background: rgba(4, 8, 16, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade var(--t-med) var(--ease) both;
}
.overlay.hidden { display: none; }

.overlay-card {
  width: 100%;
  max-width: 820px;
  height: 90dvh;
  max-height: 90dvh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: overlay-in var(--t-slow) var(--ease) both;
}

/* sticky header */
.overlay-head {
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
#overlayTitle {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlay-head-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
#overlayDl { display: inline-flex; gap: 8px; flex-wrap: wrap; }
#overlayClose {
  padding: 8px 14px 8px 30px;
  position: relative;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* X glyph */
#overlayClose::before, #overlayClose::after {
  content: "";
  position: absolute;
  left: 13px; top: 50%;
  width: 11px; height: 1.7px;
  background: currentColor;
  border-radius: 2px;
}
#overlayClose::before { transform: translateY(-50%) rotate(45deg); }
#overlayClose::after { transform: translateY(-50%) rotate(-45deg); }
#overlayClose:hover { background: var(--accent-soft); border-color: var(--accent); }
#overlayClose:active { transform: translateY(1px); }

/* scrollable report body (reuses .doc typography/tables/links/.chartwrap) */
#overlayBody.doc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 26px;
}

/* sticky revise footer */
.overlay-revise {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 16px calc(12px + var(--sab));
  border-top: 1px solid var(--line);
  background: rgba(11, 18, 32, 0.85);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}
#reviseInput {
  flex: 1 1 auto;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  padding: 11px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: none;
  line-height: 1.45;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
}
#reviseInput::placeholder { color: var(--muted-2); }
#reviseInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
#reviseBtn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border: 1px solid var(--accent-press);
  color: #fff;
  box-shadow: var(--shadow-1);
  transition: filter var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
#reviseBtn:hover:not(:disabled) { filter: brightness(1.08); box-shadow: var(--shadow-2); }
#reviseBtn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
#reviseBtn:disabled { opacity: 0.5; cursor: not-allowed; }

/* =========================================================
   SPINNER
   ========================================================= */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
}
.spinner.lg { width: 32px; height: 32px; border-width: 3px; }

/* =========================================================
   ANIMATIONS
   ========================================================= */
.fade-in { animation: fade-in 280ms var(--ease) both; }

@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }   /* must end at none, or it breaks position:sticky (#newsBar) inside */
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-8px); }
  30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}
@keyframes drawer-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes overlay-in {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* =========================================================
   RESPONSIVE — mobile drawer (<= 820px)
   ========================================================= */
@media (max-width: 820px) {
  #menuBtn { display: inline-flex; }

  #sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(84vw, 300px);
    flex-basis: auto;
    transform: translateX(-100%);
    transition: transform var(--t-slow) var(--ease);
    box-shadow: var(--shadow-3);
    will-change: transform;
  }
  #app.drawer-open #sidebar { transform: translateX(0); }

  /* fallback: if JS toggles .open on sidebar directly */
  #sidebar.open { transform: translateX(0); }

  /* tab bar: let it own the row, shrink and scroll beside #menuBtn */
  #tabs { margin: 0; max-width: none; justify-content: flex-start; }
  .tab { padding: 7px 13px; font-size: 13px; }

  .msg.user, .msg.assistant, .msg.status { max-width: 92%; }
  .msg-report { max-width: 100%; }

  #cards { grid-template-columns: 1fr; }
  .doc { padding: 20px 16px calc(36px + var(--sab)); }
  .doc h1 { font-size: 22px; }
  .doc table { font-size: 13px; }
  .doc th, .doc td { padding: 7px 9px; }

  /* modal: full-width with screen margins */
  .modal { padding: calc(16px + var(--sat)) 14px calc(16px + var(--sab)); }
  .modal-card { max-width: none; }

  /* overlay: fill the screen */
  .overlay {
    padding: calc(var(--sat)) 0 0;
    align-items: stretch;
    justify-content: stretch;
  }
  .overlay-card {
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  #overlayBody.doc { padding: 20px 16px; }
}

@media (min-width: 821px) {
  /* scrim only matters on mobile; keep it hidden on desktop even if class lingers */
  #scrim { display: none !important; }
}

/* small phones */
@media (max-width: 380px) {
  #composer { gap: 6px; }
  #send { padding: 0 14px; }
  #reportBtn { padding: 0 11px; }
}

/* =========================================================
   ADDENDUM v4 POLISH — composer tools, attachments, streaming,
   message actions, logs dashboard, empty/loading states, toasts.
   (Layered after the base so refinements win without regressing.)
   ========================================================= */

/* ---- additional design tokens (spacing scale + extras) ---- */
:root {
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --ring: 0 0 0 3px var(--accent-soft);
  --pop: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --chip-bg: #16213a;
}

/* =========================================================
   COMPOSER — icon tool buttons (#attachBtn, #stopBtn) + report
   ========================================================= */
/* shared shape for the round icon buttons that flank the textarea */
#attachBtn,
#stopBtn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 0; /* hide any text glyph; we draw icons */
  line-height: 0;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease);
}

/* Attach (+) button — subtle, clean plus icon drawn with gradients */
#attachBtn {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  position: relative;
}
#attachBtn::before {
  content: "";
  width: 16px;
  height: 16px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.8px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.8px 100% no-repeat;
  opacity: 0.92;
  transition: transform var(--t-med) var(--ease);
}
#attachBtn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#attachBtn:active { transform: translateY(1px) scale(0.96); }
/* rotate the plus into an × when the menu is open (JS toggles .open) */
#attachBtn.open {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#attachBtn.open::before { transform: rotate(45deg); }

/* Stop button — visible danger state, only shown while streaming */
#stopBtn {
  background: var(--danger-soft);
  border: 1px solid rgba(240, 82, 107, 0.5);
  color: var(--danger);
  box-shadow: var(--shadow-1);
  animation: fade-in 160ms var(--ease) both;
}
/* solid stop square */
#stopBtn::before {
  content: "";
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: currentColor;
}
#stopBtn:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
  box-shadow: var(--shadow-2);
}
#stopBtn:active { transform: translateY(1px) scale(0.96); }
/* soft pulse so it reads as "live / interruptible" */
#stopBtn:not(.hidden) { animation: fade-in 160ms var(--ease) both, stop-pulse 2s var(--ease) 160ms infinite; }

/* keep #reportBtn comfortable next to the new icon buttons */
#reportBtn { white-space: nowrap; }

/* =========================================================
   ATTACH MENU — small popover above the composer
   (#attachMenu sits AFTER #composer; anchor it to #chatView)
   ========================================================= */
#chatView { position: relative; }

#attachMenu {
  position: absolute;
  left: max(16px, calc(50% - 380px + 4px));
  bottom: calc(76px + var(--sab));
  z-index: 30;
  min-width: 188px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--pop);
  transform-origin: bottom left;
  animation: pop-in 180ms var(--ease) both;
}
#attachMenu.hidden { display: none !important; }
/* little pointer at the bottom-left toward the attach button */
#attachMenu::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -6px;
  width: 11px;
  height: 11px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
#attachMenu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
#attachMenu button:hover { background: var(--accent-soft); border-color: rgba(59,130,246,0.4); }
#attachMenu button:active { transform: translateY(1px); }
/* leading icons */
#menuUploadFile::before,
#menuAddUrl::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  opacity: 0.85;
}
/* document glyph */
#menuUploadFile::before {
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) 3px 5px / 7px 1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 3px 8px / 7px 1.3px no-repeat,
    linear-gradient(currentColor, currentColor) 3px 11px / 4px 1.3px no-repeat;
}
/* link glyph (two rounded rings) */
#menuAddUrl::before {
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background:
    linear-gradient(currentColor, currentColor) center / 9px 1.5px no-repeat;
}

/* inline URL input variant (if JS swaps the menu for a small field) */
#attachMenu .url-input {
  width: 100%;
  padding: 9px 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  outline: none;
  font-size: 13.5px;
  transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
#attachMenu .url-input:focus { border-color: var(--accent); box-shadow: var(--ring); }

/* =========================================================
   ATTACHMENTS ROW — chips under the messages, above composer
   ========================================================= */
#attachments {
  flex: 0 0 auto;
  width: 100%;
  max-width: calc(760px + 32px);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 8px 16px 0;
  padding-left: calc(16px + var(--sal));
  padding-right: calc(16px + var(--sar));
}
#attachments:empty { display: none; padding: 0; }
#attachments > * { animation: chip-in 200ms var(--ease) both; }

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 280px;
  padding: 7px 8px 7px 11px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.attach-chip:hover { border-color: #2f3e5c; }
/* file-type glyph */
.attach-chip .chip-icon,
.attach-chip::before {
  content: "";
  width: 14px;
  height: 16px;
  flex: 0 0 auto;
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  background:
    linear-gradient(var(--accent), var(--accent)) 3px 5px / 6px 1.2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 3px 8px / 6px 1.2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 3px 11px / 4px 1.2px no-repeat;
  opacity: 0.9;
}
/* url chips get a ring glyph instead (JS may add .url) */
.attach-chip.url::before {
  border-radius: 999px;
  background: linear-gradient(var(--accent), var(--accent)) center / 7px 1.4px no-repeat;
}
.attach-chip .chip-name,
.attach-chip .name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.attach-chip .chip-size,
.attach-chip .size {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
/* remove × */
.attach-chip .remove,
.attach-chip .chip-remove {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--muted-2);
  border-radius: 50%;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.attach-chip .remove::before,
.attach-chip .remove::after,
.attach-chip .chip-remove::before,
.attach-chip .chip-remove::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}
.attach-chip .remove::before,
.attach-chip .chip-remove::before { transform: rotate(45deg); }
.attach-chip .remove::after,
.attach-chip .chip-remove::after { transform: rotate(-45deg); }
.attach-chip .remove:hover,
.attach-chip .chip-remove:hover {
  background: var(--danger-soft);
  color: var(--danger);
}
.attach-chip .remove:active,
.attach-chip .chip-remove:active { transform: scale(0.9); }

/* loading state — replace the × area with a spinner, dim the chip */
.attach-chip.loading {
  border-color: rgba(59, 130, 246, 0.4);
  background: var(--accent-soft);
}
.attach-chip.loading .remove,
.attach-chip.loading .chip-remove { display: none; }
.attach-chip.loading .chip-size,
.attach-chip.loading .size { display: none; }
.attach-chip.loading::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.attach-chip.error {
  border-color: rgba(240, 82, 107, 0.5);
  background: var(--danger-soft);
}
.attach-chip.error::before { border-color: var(--danger); }

/* =========================================================
   THINKING / STREAMING indicators
   ========================================================= */
/* subtle reasoning area while the model "thinks" (JS may render .thinking) */
.msg.status .status-text { font-weight: 500; }

.thinking,
.reasoning {
  align-self: flex-start;
  max-width: min(85%, 720px);
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.015);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: none;
  animation: fade-in 200ms var(--ease) both;
}
.thinking-head,
.reasoning-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
/* animated sheen on the word "Thinking…" */
.thinking-head .label,
.reasoning-head .label {
  background: linear-gradient(90deg, var(--muted-2) 30%, var(--text) 50%, var(--muted-2) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2.2s linear infinite;
}
/* faint preview of reasoning text, clamped */
.thinking-body,
.reasoning-body {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted-2);
  line-height: 1.5;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}

/* streaming caret on the live assistant bubble (JS may add .streaming) */
.msg.assistant.streaming::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--accent);
  border-radius: 1px;
  animation: caret-blink 1s steps(2, start) infinite;
}

/* =========================================================
   MESSAGE HOVER ACTION BAR (Copy / Regenerate / Edit)
   ========================================================= */
.msg { position: relative; }
.msg-actions {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  z-index: 4;
}
.msg.assistant .msg-actions { left: 6px; }
.msg.user .msg-actions { right: 6px; }
.msg:hover .msg-actions,
.msg:focus-within .msg-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.msg-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.msg-actions button:hover { background: var(--accent-soft); color: var(--text); }
.msg-actions button:active { transform: translateY(1px); }
.msg-actions button.copied { color: var(--ok); }

/* keep action bars from being clipped at the message column edge */
#messages { padding-bottom: 20px; }

/* =========================================================
   LOGS / MONITOR — clean scrollable admin dashboard
   ========================================================= */
/* Single comfortable scroll container; metrics + logs share one column.
   #metricsPanel is fixed at top of #logsView, #logsContent scrolls below;
   make both align to one width and breathe. */
#logsView {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* When both panels live in the same scroll view, let logsView own the
   single scroll. Neutralize the base flex sizing / nested overflow so
   metrics + logs flow as one comfortable column (no double scrollbars). */
#logsView { display: block; padding-bottom: calc(28px + var(--sab)); }
#logsContent {
  flex: none;
  overflow: visible;
  min-height: 0;
}
#metricsPanel {
  flex: none;
  padding-top: 22px;
  padding-bottom: 4px;
}
/* "System" section heading above the metric grid */
.section-head {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-head::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.section-head .section-meta {
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* clear divider band between System block and the log sections */
#logsContent {
  padding-top: 8px;
}
#logsContent::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 920px;
  margin: 0 auto 18px;
  height: 1px;
  background: var(--line-soft);
}

/* log section internal scroll if very long, so the page stays tidy */
.log-section .log-body {
  max-height: 360px;
  overflow-y: auto;
}
.log-empty {
  padding: 20px 16px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
.log-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}
.log-when { color: var(--muted-2); }
.log-row.log-clickable { cursor: pointer; }
.log-row.log-clickable:hover { background: var(--accent-soft); }
.log-row.log-clickable:active { background: rgba(59, 130, 246, 0.2); }

/* model status line inside a metric card reads as a clean string */
.metric-card .metric-value .model-name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.metric-card.metric-wide { grid-column: span 2; }
@media (max-width: 520px) {
  .metric-card.metric-wide { grid-column: span 1; }
}

/* =========================================================
   EMPTY / LOADING / SKELETON STATES
   ========================================================= */
.empty {
  margin: auto;
  max-width: 360px;
  padding: 40px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  animation: fade-in 280ms var(--ease) both;
}
.empty::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border: 1.6px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(var(--muted-2), var(--muted-2)) 12px 26px / 5px 8px no-repeat,
    linear-gradient(var(--muted-2), var(--muted-2)) 20px 26px / 5px 14px no-repeat,
    linear-gradient(var(--muted-2), var(--muted-2)) 28px 26px / 5px 11px no-repeat;
  opacity: 0.6;
}
/* full-bleed empty state for the messages pane (no chat yet) */
#messages .empty { padding-top: 12vh; }

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  color: var(--muted);
  font-size: 13.5px;
  animation: fade-in 220ms var(--ease) both;
}

.error {
  margin: 8px auto;
  max-width: 920px;
  padding: 12px 14px;
  background: var(--danger-soft);
  border: 1px solid rgba(240, 82, 107, 0.35);
  border-radius: var(--radius-s);
  color: var(--danger);
  font-size: 13.5px;
  animation: fade-in 220ms var(--ease) both;
}
.msg.assistant.error {
  background: var(--danger-soft);
  border-color: rgba(240, 82, 107, 0.4);
  color: #ffd9df;
}

/* skeleton shimmer blocks (JS may render .skeleton placeholders) */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--panel-2);
  border-radius: var(--radius-s);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  animation: skeleton-sweep 1.4s var(--ease) infinite;
}
.skeleton.line { height: 12px; margin: 8px 0; }
.skeleton.line.short { width: 55%; }

/* report doc helpers JS emits */
.doc-md { width: 100%; }
.doc-sources {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.doc-sources h3 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.doc-sources a { display: block; padding: 4px 0; }
.chart-img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-s); }

/* card actions (in reports library cards) */
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.card-actions button,
.card-actions a {
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.card-actions button:hover,
.card-actions a:hover { background: var(--accent-soft); border-color: var(--accent); text-decoration: none; }
.card-actions button:active,
.card-actions a:active { transform: translateY(1px); }

/* revise status line in the overlay footer */
.revise-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
}
.revise-status-text { color: var(--muted); }

/* =========================================================
   TOASTS — friendly transient notifications (JS may emit .toast)
   ========================================================= */
.toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--sab));
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  max-width: min(92vw, 420px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: linear-gradient(180deg, var(--panel-3), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--pop);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  animation: toast-in 240ms var(--ease) both;
}
.toast.leaving { animation: toast-out 200ms var(--ease) both; }
.toast.ok { border-color: rgba(52, 211, 153, 0.45); }
.toast.ok::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(52,211,153,0.18);
}
.toast.error { border-color: rgba(240, 82, 107, 0.5); }
.toast.error::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft);
}

/* =========================================================
   SCROLL-TO-BOTTOM AFFORDANCE
   ========================================================= */
.scroll-bottom {
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  box-shadow: var(--shadow-2);
  z-index: 6;
  animation: fade-in 180ms var(--ease) both;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.scroll-bottom::before {
  content: "";
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.scroll-bottom:hover { border-color: var(--accent); background: var(--accent-soft); }
.scroll-bottom:active { transform: translateY(1px) scale(0.95); }

/* =========================================================
   MICRO-INTERACTION REFINEMENTS (hover elevation, press)
   ========================================================= */
/* unify subtle press feedback on primary actions */
#loginBtn:focus-visible,
#send:focus-visible,
#gen:focus-visible,
#reviseBtn:focus-visible,
.btn-primary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: var(--ring), var(--shadow-2);
}
/* nicer focus ring on text inputs (already have soft ring; make crisp) */
#input:focus, #topic:focus, #pass:focus,
#reportContext:focus, #reviseInput:focus { box-shadow: var(--ring); }

/* keyboard users get a clear ring on tabs/sidebar items */
.tab:focus-visible, .conv-item:focus-visible,
.sidebar-foot button:focus-visible { outline-offset: -2px; }

/* =========================================================
   NEW KEYFRAMES
   ========================================================= */
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes chip-in {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes caret-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
@keyframes skeleton-sweep {
  to { transform: translateX(100%); }
}
@keyframes stop-pulse {
  0%, 100% { box-shadow: var(--shadow-1), 0 0 0 0 rgba(240, 82, 107, 0.0); }
  50%      { box-shadow: var(--shadow-1), 0 0 0 4px rgba(240, 82, 107, 0.12); }
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

/* =========================================================
   RESPONSIVE refinements for new elements
   ========================================================= */
@media (max-width: 820px) {
  #attachMenu {
    left: 12px;
    right: 12px;
    min-width: 0;
  }
  #attachMenu::after { left: 18px; }
  .attach-chip { max-width: 100%; }
  .section-head, #logsContent::before { padding-left: 16px; padding-right: 16px; }
  .msg-actions { box-shadow: var(--shadow-3); }
}

@media (max-width: 380px) {
  #attachBtn, #stopBtn { width: 40px; height: 40px; }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== v4 reconciliation: style the real class names app.js emits ===== */
#attachments { display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 6px; }
#attachments:empty { display:none; }
.att-chip {
  display:inline-flex; align-items:center; gap:8px; max-width:240px; padding:6px 10px;
  background:var(--panel-3); border:1px solid var(--line); border-radius:var(--radius-pill);
  font-size:12.5px; animation:chip-in 200ms var(--ease) both;
}
.att-chip.pending { opacity:.7; }
.att-name { color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
.att-meta { color:var(--muted); font-size:11.5px; flex:0 0 auto; }
.att-remove {
  border:none; background:transparent; color:var(--muted); font-size:16px; line-height:1;
  padding:0 3px; border-radius:var(--radius-s); cursor:pointer;
  transition:color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.att-remove:hover { color:var(--danger); background:var(--danger-soft); }
.att-url-input { display:flex; gap:8px; padding:8px; }
.att-url-input input {
  flex:1; padding:9px 12px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-m); color:var(--text); outline:none;
  transition:border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.att-url-input input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.att-url-input button {
  padding:9px 15px; background:var(--accent); color:#fff; border:1px solid var(--accent-press);
  border-radius:var(--radius-m); font-weight:600; transition:filter var(--t-fast) var(--ease);
}
.att-url-input button:hover { filter:brightness(1.07); }
.status-reasoning {
  margin-top:6px; font-size:12px; color:var(--muted-2); line-height:1.45; font-style:italic; opacity:.85;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; max-height:66px;
}
.logs-section-head {
  font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  margin:20px 4px 8px; padding-bottom:6px; border-bottom:1px solid var(--line-soft);
}
.conv-rename {
  width:100%; padding:5px 7px; font:inherit; color:var(--text); background:var(--panel-2);
  border:1px solid var(--accent); border-radius:var(--radius-s); outline:none;
}
.conv-empty { padding:20px 12px; color:var(--muted); font-size:13px; text-align:center; line-height:1.5; }

/* =========================================================
   ADDENDUM v5 — NEWS HUB (default landing view)
   #newsView > #marketsStrip + #newsBar(#newsFilters,#newsMeta)
              + #newsGrid(.news-card)
   Premium financial dashboard. No emojis; CSS/SVG icons only.
   Reuses base tokens, easing, animations, scrollbars.
   ========================================================= */

/* ---- hub-specific tokens (extend palette, don't replace) ---- */
:root {
  --hub-max: 1180px;          /* comfortable content width on wide screens */
  --up: var(--ok);            /* w/w gainers green */
  --down: var(--danger);      /* w/w losers red */
  --up-soft: rgba(52, 211, 153, 0.13);
  --down-soft: rgba(240, 82, 107, 0.13);
}

/* ---------------------------------------------------------
   #newsView — full-height scroll container (joins view-in)
   --------------------------------------------------------- */
#newsView {
  /* flex column: a FIXED #newsBar on top + a single scrolling region below.
     (The bar lives OUTSIDE the scroller so it can never scroll away.) */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}
/* #newsScroll — the one element that scrolls on Home */
#newsScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  padding: 0 0 calc(28px + var(--sab));
}
/* inner blocks share one centered column with safe-area aware gutters */
#marketsStrip,
#newsBar,
#newsGrid {
  width: 100%;
  max-width: var(--hub-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: calc(18px + var(--sal));
  padding-right: calc(18px + var(--sar));
}

/* =========================================================
   #marketsStrip — responsive row of .mkt-pill stat pills
   ========================================================= */
#marketsStrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 20px;
  padding-bottom: 16px;
}
#marketsStrip:empty { display: none; }

.mkt-pill {
  flex: 1 1 170px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  position: relative;
  overflow: hidden;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  animation: fade-in 280ms var(--ease) both;
}
button.mkt-pill { -webkit-appearance: none; appearance: none; cursor: pointer; }
/* clickable tiles hint a chart on hover */
.mkt-pill.clickable::after {
  content: "View chart";
  position: absolute;
  right: 10px; top: 11px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(59,130,246,0.34);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mkt-pill.clickable:hover::after,
.mkt-pill.clickable:focus-visible::after { opacity: 1; transform: none; }
/* thin accent rail on the left edge */
.mkt-pill::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0.7;
}
.mkt-pill:hover {
  transform: translateY(-2px);
  border-color: #2f3e5c;
  box-shadow: var(--shadow-2);
}
.mkt-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-val {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mkt-val .unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: 3px;
}
.mkt-wow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--muted-2);
}
/* directional arrow drawn with borders (no emoji) */
.mkt-wow::before {
  content: "";
  width: 0; height: 0;
  flex: 0 0 auto;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.mkt-wow-num { font-variant-numeric: tabular-nums; }
/* "vs last week" caption — breaks to its own line, always muted (spells out w/w) */
.mkt-wow-cap {
  flex-basis: 100%;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted-2);
}
.mkt-wow.up { color: var(--up); }
.mkt-wow.up::before { border-bottom: 6px solid currentColor; }
.mkt-wow.down { color: var(--down); }
.mkt-wow.down::before { border-top: 6px solid currentColor; }
/* flat / n.a. movers: no arrow */
.mkt-wow:not(.up):not(.down)::before { display: none; }

/* =========================================================
   #newsBar — filters (left) + meta/refresh (right)
   ========================================================= */
#newsBar {
  /* FIXED bar: a flex child of #newsView, OUTSIDE the scroll region, so it stays
     pinned no matter how the cards scroll (was position:sticky, which could drift). */
  flex: 0 0 auto;
  /* sit ABOVE the news cards so the grid scrolls cleanly underneath */
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
  padding-top: 12px;
  padding-bottom: 12px;
  /* SOLID opaque background (no backdrop-blur) to kill scroll jank and
     prevent cards bleeding through the sticky bar */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.55);
  /* extend the bar edge-to-edge while content stays in the column */
  max-width: none;
  padding-left: max(calc(18px + var(--sal)), calc(50% - var(--hub-max) / 2 + 18px));
  padding-right: max(calc(18px + var(--sar)), calc(50% - var(--hub-max) / 2 + 18px));
}

/* search field within the sticky bar */
#newsSearch {
  flex: 1 1 200px;
  min-width: 150px;
  max-width: 320px;
  padding: 8px 12px 8px 34px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  outline: none;
  caret-color: var(--accent);
  /* leading magnifier glyph (muted) */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238aa0c0' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.6' cy='6.6' r='4.4'/%3E%3Cline x1='10' y1='10' x2='14' y2='14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 11px 50%;
  background-size: 15px 15px;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background-color var(--t-med) var(--ease);
}
#newsSearch::placeholder { color: var(--muted-2); }
#newsSearch:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  background-color: var(--panel);
}
#newsSearch::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* filter chips */
#newsFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.news-chip {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.news-chip:hover {
  color: var(--text);
  border-color: #2f3e5c;
  background: var(--panel-3);
}
.news-chip:active { transform: translateY(1px); }
.news-chip.active {
  color: #fff;
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  border-color: var(--accent-press);
  box-shadow: var(--shadow-1);
}

/* meta + refresh */
#newsMeta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
#newsUpdated {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#newsUpdated:empty { display: none; }
/* #newsRefresh carries .icon-btn but renders as a clean ICON-ONLY round
   button (its "Refresh" text is hidden by .icon-btn's text-indent). Restore
   a proper square/round shape, glyph centering, and finished states. */
#newsRefresh {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  box-shadow: var(--shadow-1);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* circular-refresh glyph: an open ring with an arrowhead */
#newsRefresh::before {
  content: "";
  width: 13px; height: 13px;
  flex: 0 0 auto;
  border: 1.7px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.9;
  transition: transform var(--t-slow) var(--ease);
}
#newsRefresh:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#newsRefresh:hover::before { transform: rotate(180deg); }
#newsRefresh:active { transform: translateY(1px); }
#newsRefresh:disabled { opacity: 0.55; cursor: not-allowed; }
/* spin the glyph while refreshing (JS adds .loading) */
#newsRefresh.loading { color: var(--muted); pointer-events: none; }
#newsRefresh.loading::before { animation: spin 0.75s linear infinite; border-top-color: transparent; }

/* =========================================================
   #newsGrid — responsive card grid (auto-fill, min ~300px)
   ========================================================= */
#newsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
  padding-top: 4px;
}
/* empty/loading states fill the grid track cleanly */
#newsGrid .empty,
#newsGrid .loading,
#newsGrid .error { grid-column: 1 / -1; }
#newsGrid .empty { padding-top: 8vh; }

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 17px 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  animation: fade-in 280ms var(--ease) both;
}
.news-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.news-card:active { transform: translateY(-1px); }
.news-card:focus-visible { outline-offset: -2px; }

/* top row: source badge + category tag */
.news-src {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 3px 9px;
  background: var(--accent-soft);
  border: 1px solid rgba(59, 130, 246, 0.34);
  border-radius: var(--radius-pill);
  color: var(--link);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-title {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease);
}
/* the headline is a link (opens in new tab) */
a.news-title,
.news-title a {
  color: var(--text);
  text-decoration: none;
}
.news-card:hover .news-title,
.news-card:hover a.news-title,
.news-card:hover .news-title a { color: var(--link); }

/* footer row: time + category, with discuss revealing on hover */
.news-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.news-time {
  font-size: 12px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.news-cat {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* Discuss action — text/icon button, reveals on hover, accessible on focus */
.news-discuss {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 10px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease),
              transform var(--t-med) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
/* chat-bubble glyph (no emoji) */
.news-discuss::before {
  content: "";
  width: 13px; height: 11px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 4px 4px 4px 1px;
  opacity: 0.9;
}
.news-card:hover .news-discuss,
.news-card:focus-within .news-discuss {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.news-discuss:hover {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent-press);
}
.news-discuss:active { transform: translateY(1px); }
/* while a discuss action is starting a chat (JS adds .loading) */
.news-discuss.loading { color: var(--muted); pointer-events: none; }
.news-discuss.loading::before {
  border-radius: 50%;
  border-color: var(--line);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
/* touch devices have no hover: keep Discuss visible so it's reachable */
@media (hover: none) {
  .news-discuss { opacity: 1; transform: none; pointer-events: auto; }
}

/* skeleton placeholder card for the loading grid (JS may emit .news-card.skeleton) */
.news-card.skeleton {
  cursor: default;
  pointer-events: none;
  border-color: var(--line-soft);
}
.news-card.skeleton:hover { transform: none; box-shadow: var(--shadow-1); }

/* =========================================================
   HUB — responsive
   ========================================================= */
@media (max-width: 820px) {
  /* markets strip scrolls horizontally as a neat single row on phones */
  #marketsStrip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* let pills bleed to the edges while scrolling */
    margin-left: 0;
    margin-right: 0;
    padding-left: calc(14px + var(--sal));
    padding-right: calc(14px + var(--sar));
  }
  #marketsStrip::-webkit-scrollbar { display: none; }
  .mkt-pill {
    flex: 0 0 auto;
    min-width: 156px;
    scroll-snap-align: start;
  }

  #newsBar {
    padding-left: calc(14px + var(--sal));
    padding-right: calc(14px + var(--sar));
  }
  /* filters scroll horizontally; meta drops below if cramped */
  #newsFilters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -2px;
    padding: 2px;
  }
  #newsFilters::-webkit-scrollbar { display: none; }

  #newsGrid {
    grid-template-columns: 1fr;
    padding-left: calc(14px + var(--sal));
    padding-right: calc(14px + var(--sar));
  }
}

@media (max-width: 380px) {
  .mkt-val { font-size: 20px; }
  .news-title { font-size: 14.5px; }
  #newsRefresh { width: 34px; height: 34px; padding: 0; }
}

/* ===== v5 hub reconciliation: state + layout classes app.js emits ===== */
.news-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
.news-empty { grid-column:1 / -1; color:var(--muted); font-size:13.5px; padding:26px 10px; text-align:center; }
.news-loading { grid-column:1 / -1; color:var(--muted); font-size:13px; padding:20px 10px;
  display:flex; align-items:center; justify-content:center; gap:9px; }
.mkt-empty, .mkt-loading { color:var(--muted); font-size:13px; padding:10px 4px;
  display:flex; align-items:center; gap:8px; }

/* =========================================================
   ADDENDUM v6 — LIGHT THEME + platform components
   (search, settings, calendar, bookmarks, top actions)
   Dark stays the default :root above. Light is opt-in via
   document.documentElement.dataset.theme = "light".
   ========================================================= */

/* ---------------------------------------------------------
   LIGHT THEME — override EVERY color token so the whole app
   (sign-in, sidebar, topbar, tabs, chat, tables, modals,
   overlays, hub, markets, logs, charts) reads cleanly.
   Clean professional finance palette: paper-grey canvas,
   white panels, soft cool-grey borders, dark ink text,
   muted slate, the same blue accent, lighter shadows.
   --------------------------------------------------------- */
:root[data-theme="light"] {
  --bg: #eef1f6;
  --bg-grad-1: #f4f6fb;
  --bg-grad-2: #e9edf4;
  --panel: #ffffff;
  --panel-2: #f5f7fb;
  --panel-3: #eef2f8;
  --line: #d6deea;
  --line-soft: #e4eaf3;
  --text: #16202e;
  --muted: #5c6b80;
  --muted-2: #8493a8;
  --accent: #2563eb;
  --accent-hover: #3b82f6;
  --accent-press: #1d4ed8;
  --accent-soft: rgba(37, 99, 235, 0.10);
  --link: #1d4ed8;
  --danger: #d72f4b;
  --danger-soft: rgba(215, 47, 75, 0.10);
  --ok: #0f9d6b;
  --shadow-1: 0 1px 2px rgba(16, 32, 64, 0.07);
  --shadow-2: 0 8px 22px rgba(16, 32, 64, 0.10);
  --shadow-3: 0 18px 46px rgba(16, 32, 64, 0.16);
  --ring: 0 0 0 3px var(--accent-soft);
  --pop: 0 12px 30px rgba(16, 32, 64, 0.16), 0 2px 6px rgba(16, 32, 64, 0.08);
  --chip-bg: #eef2f8;
  /* hub directional tints */
  --up: #0f9d6b;
  --down: #d72f4b;
  --up-soft: rgba(15, 157, 107, 0.12);
  --down-soft: rgba(215, 47, 75, 0.10);
}

/* Canvas: swap the dark radial glow for a soft, airy light backdrop */
:root[data-theme="light"] body {
  background:
    radial-gradient(1200px 800px at 78% -10%, #e3ebfa 0%, transparent 55%),
    radial-gradient(900px 700px at -5% 110%, #e7eef9 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-grad-1), var(--bg-grad-2));
  background-attachment: fixed;
}

/* Sidebar gradient was tuned for dark; give it a clean light wash */
:root[data-theme="light"] #sidebar {
  background: linear-gradient(180deg, #ffffff, #f4f6fb);
}

/* Topbar / composer / sticky bars use a hardcoded dark rgba — make them light-glass */
:root[data-theme="light"] #topbar,
:root[data-theme="light"] #composer,
:root[data-theme="light"] .docbar {
  background: rgba(255, 255, 255, 0.78);
}
:root[data-theme="light"] .overlay-head,
:root[data-theme="light"] .overlay-revise {
  background: rgba(255, 255, 255, 0.82);
}
/* sticky news bar stays SOLID opaque (theme-correct) — no blur/transparency */
:root[data-theme="light"] #newsBar { background: var(--bg); }

/* Scrim + modal/overlay backdrops: lighten the wash so light mode isn't muddy */
:root[data-theme="light"] #scrim { background: rgba(40, 56, 86, 0.30); }
:root[data-theme="light"] .modal,
:root[data-theme="light"] .overlay { background: rgba(40, 56, 86, 0.34); }

/* Strong-emphasis text in docs hardcodes a near-white; flip to ink */
:root[data-theme="light"] .doc strong { color: #0b1422; }

/* Brand glyph + login button keep white-on-blue (good in both themes) */
:root[data-theme="light"] .login-card .brand::before {
  background: linear-gradient(145deg, var(--accent-hover), var(--accent-press));
}

/* Zebra rows used rgba(255,255,255,…) which vanishes on white — use ink tint */
:root[data-theme="light"] .msg.assistant tbody tr:nth-child(even),
:root[data-theme="light"] .doc tbody tr:nth-child(even) { background: rgba(16, 32, 64, 0.025); }
:root[data-theme="light"] .log-row:nth-child(even) { background: rgba(16, 32, 64, 0.02); }
:root[data-theme="light"] .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(16, 32, 64, 0.06), transparent);
}
:root[data-theme="light"] .thinking,
:root[data-theme="light"] .reasoning { background: rgba(16, 32, 64, 0.02); }

/* Focus-visible white outline on primary buttons reads poorly on light bg */
:root[data-theme="light"] #loginBtn:focus-visible,
:root[data-theme="light"] #send:focus-visible,
:root[data-theme="light"] #gen:focus-visible,
:root[data-theme="light"] #reviseBtn:focus-visible,
:root[data-theme="light"] .btn-primary:focus-visible {
  outline-color: var(--accent-press);
}

/* Scrollbar thumb hover color was a dark-only hex */
:root[data-theme="light"] *::-webkit-scrollbar-thumb:hover { background: #b9c4d6; background-clip: content-box; }
:root[data-theme="light"] .sidebar-foot button:hover,
:root[data-theme="light"] .btn-secondary:hover:not(:disabled),
:root[data-theme="light"] .news-chip:hover,
:root[data-theme="light"] .mkt-pill:hover,
:root[data-theme="light"] .metric-card:hover { border-color: #b9c4d6; }
:root[data-theme="light"] #menuBtn:hover { background: var(--panel-3); }

/* Smooth the theme flip itself (respects reduced-motion via the global rule) */
body,
#sidebar, #topbar, #composer, .docbar, .overlay-head, .overlay-revise, #newsBar,
.login-card, .modal-card, .overlay-card, .card, .news-card, .mkt-pill,
.metric-card, .log-section, .msg.assistant, .msg.user {
  transition: background-color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              color var(--t-med) var(--ease);
}

/* =========================================================
   #topActions + .icon-btn — compact topbar buttons
   (#searchBtn magnifier, #themeToggle contrast/moon)
   ========================================================= */
#topActions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}

/* Square icon buttons in the topbar (#searchBtn, #themeToggle). They contain
   the words "Search"/"Theme" in markup — we hide that text and draw a glyph,
   so they read as finished icon buttons (never unstyled white text). */
.icon-btn {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* robustly hide the text label without collapsing the box; we draw glyphs */
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  color: var(--muted);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-1);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
/* the glyph pseudo-elements must not inherit the text-indent hack */
.icon-btn::before, .icon-btn::after { text-indent: 0; }
.icon-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.icon-btn:active { transform: translateY(1px) scale(0.96); }
.icon-btn:focus-visible { outline-offset: 1px; }

/* magnifier glyph for #searchBtn — ring + handle */
#searchBtn::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.95;
}
#searchBtn::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  /* place the handle off the lower-right of the ring */
  transform: translate(6px, 6px) rotate(45deg);
  opacity: 0.95;
}

/* contrast / half-moon glyph for #themeToggle */
#themeToggle::before {
  content: "";
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 50%;
  /* fill the right half only -> a clean contrast disc */
  background: linear-gradient(90deg, transparent 50%, currentColor 50%);
  opacity: 0.95;
}
/* in light mode invert the fill so the glyph mirrors the active theme */
:root[data-theme="light"] #themeToggle::before {
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* gear glyph for #settingsBtn — toothed ring + hub, drawn with a single
   masked element so it stays crisp and matches the magnifier/contrast icons.
   Uniform with the other .icon-btn glyphs (size ~16px, uses currentColor). */
#settingsBtn::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--gear-glyph) center / contain no-repeat;
  mask: var(--gear-glyph) center / contain no-repeat;
  opacity: 0.95;
  transition: transform var(--t-slow) var(--ease);
}
#settingsBtn:hover::before { transform: rotate(40deg); }
:root {
  --gear-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M19.14 12.94a7.49 7.49 0 0 0 .05-.94 7.49 7.49 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.62l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.03 7.03 0 0 0-1.62-.94l-.36-2.54a.5.5 0 0 0-.5-.42h-3.84a.5.5 0 0 0-.5.42l-.36 2.54a7.03 7.03 0 0 0-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.31 8.86a.5.5 0 0 0 .12.62l2.03 1.58a7.49 7.49 0 0 0 0 1.88l-2.03 1.58a.5.5 0 0 0-.12.62l1.92 3.32a.5.5 0 0 0 .6.22l2.39-.96a7.03 7.03 0 0 0 1.62.94l.36 2.54a.5.5 0 0 0 .5.42h3.84a.5.5 0 0 0 .5-.42l.36-2.54a7.03 7.03 0 0 0 1.62-.94l2.39.96a.5.5 0 0 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.62l-2.03-1.58ZM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2Z'/%3E%3C/svg%3E");
}

@media (max-width: 820px) {
  /* keep them present but tighten beside the scrolling tabs */
  #topActions { gap: 4px; margin-left: 2px; }
  .icon-btn { width: 34px; height: 34px; }
}
@media (max-width: 380px) {
  .icon-btn { width: 32px; height: 32px; }
}

/* =========================================================
   #searchOverlay — prominent input + grouped results
   (reuses the .overlay / .overlay-card pattern)
   ========================================================= */
/* the search overlay opens from the top, not centered, so it feels like
   a command palette */
#searchOverlay { align-items: flex-start; }
#searchOverlay .overlay-card {
  max-width: 680px;
  height: auto;
  max-height: min(76dvh, 640px);
  margin-top: calc(8dvh + var(--sat));
}

/* big search field lives in the overlay head, replacing the title slot */
#searchInput {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 11px 14px 11px 40px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  outline: none;
  font-size: 15px;
  color: var(--text);
  caret-color: var(--accent);
  /* leading magnifier as an inline SVG, tinted with the muted token */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238aa0c0' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='6.6' cy='6.6' r='4.4'/%3E%3Cline x1='10' y1='10' x2='14' y2='14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 13px 50%;
  background-size: 16px 16px;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background-color var(--t-med) var(--ease);
}
#searchInput::placeholder { color: var(--muted-2); }
#searchInput:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  background-color: var(--panel);
}
#searchInput::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

#searchClose {
  flex: 0 0 auto;
  padding: 9px 15px;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
#searchClose:hover { background: var(--accent-soft); border-color: var(--accent); }
#searchClose:active { transform: translateY(1px); }

/* results region: not document typography — a tidy scrollable list */
#searchResults {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  max-width: none;
  margin: 0;
  padding: 8px 10px 14px;
  line-height: 1.5;
}
#searchResults .empty,
#searchResults .loading { padding: 36px 16px; }

/* section header within results (Reports / Chats / News) */
.search-section {
  margin: 14px 6px 6px;
  padding-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.search-section:first-child { margin-top: 4px; }
.search-section .count {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}

/* a single result row */
.search-result {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  animation: fade-in 200ms var(--ease) both;
}
.search-result:hover,
.search-result:focus-visible {
  background: var(--accent-soft);
  border-color: rgba(59, 130, 246, 0.3);
  outline: none;
}
.search-result:active { transform: translateY(1px); }
.search-result-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* source / category tag at the end of the title line */
.search-result-title .tag {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 1px 8px;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.search-result-snippet {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* highlight the matched substring (JS may wrap matches in <mark>) */
.search-result mark,
#searchResults mark {
  background: rgba(59, 130, 246, 0.22);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

@media (max-width: 820px) {
  #searchOverlay { align-items: stretch; }
  #searchOverlay .overlay-card {
    margin-top: 0;
    max-height: none;
    height: 100%;
  }
}

/* =========================================================
   #settingsModal / #settingsBody — watchlist + schedule form
   ========================================================= */
/* roomier card; body scrolls if the form gets long */
#settingsModal .modal-card { max-width: 540px; }
#settingsBody {
  max-height: min(64dvh, 560px);
  overflow-y: auto;
  margin: 4px -4px 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* a labelled group within settings — rendered as a tidy card so the panel
   reads as clearly separated, premium sections rather than a flat form */
.settings-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px 16px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
/* fields inside a group card sit on the slightly deeper panel surface */
.settings-group .watch-row input,
.settings-group .settings-field input,
.settings-group .settings-field select,
.settings-group .settings-field textarea { background: var(--panel); }
.settings-group > h3,
.settings-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-title::after,
.settings-group > h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.settings-hint { font-size: 12px; color: var(--muted-2); line-height: 1.5; margin: -4px 0 0; }

/* ---- watchlist editor rows ---- */
.watch-list { display: flex; flex-direction: column; gap: 8px; }
.watch-row {
  display: grid;
  grid-template-columns: 1fr 0.9fr auto;
  align-items: center;
  gap: 8px;
  animation: chip-in 180ms var(--ease) both;
}
/* the add row reuses .watch-row but with an add button at the end */
.watch-row input,
.settings-field input,
.settings-field select,
.settings-field textarea {
  width: 100%;
  padding: 9px 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  outline: none;
  font-size: 13.5px;
  transition: border-color var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              background var(--t-med) var(--ease);
}
.watch-row input::placeholder,
.settings-field input::placeholder { color: var(--muted-2); }
.watch-row input:focus,
.settings-field input:focus,
.settings-field select:focus,
.settings-field textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--ring);
  background: var(--panel);
}
/* read-only label cell for an existing watch item (JS may render a span) */
.watch-row .watch-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.watch-row .watch-sym {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* kind badge (yahoo / fred) */
.watch-row .watch-kind {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  background: var(--panel-3);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
/* remove (×) + add (+) square buttons */
.watch-remove,
.watch-add {
  flex: 0 0 auto;
  position: relative;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.watch-remove::before, .watch-remove::after {
  content: "";
  position: absolute;
  width: 11px; height: 1.6px;
  background: currentColor;
  border-radius: 2px;
}
.watch-remove::before { transform: rotate(45deg); }
.watch-remove::after { transform: rotate(-45deg); }
.watch-remove:hover { color: var(--danger); border-color: rgba(240,82,107,0.4); background: var(--danger-soft); }
/* plus glyph for the add button */
.watch-add::before {
  content: "";
  width: 13px; height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.8px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.8px 100% no-repeat;
}
.watch-add:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.watch-remove:active, .watch-add:active { transform: translateY(1px) scale(0.95); }

/* ---- schedule form fields ---- */
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-field > label,
.settings-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
/* lay weekday + time side by side */
.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.settings-row > .settings-field { flex: 1 1 150px; min-width: 130px; }
.settings-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  /* chevron */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.settings-field input[type="time"] { font-variant-numeric: tabular-nums; }

/* checkbox targets (Hub / Telegram) — tidy chip-style toggles */
.settings-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.settings-check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.settings-check:hover { border-color: #2f3e5c; }
.settings-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 17px; height: 17px;
  margin: 0;
  border: 1.6px solid var(--line);
  border-radius: 5px;
  background: var(--panel);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.settings-check input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent-press);
}
/* check glyph */
.settings-check input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  left: 5px; top: 1.5px;
  width: 5px; height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(42deg);
}
.settings-check input[type="checkbox"]:focus-visible { outline-offset: 2px; }

/* ---- toggle switch (schedule "enabled") ---- */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.switch-row .switch-label { font-size: 14px; font-weight: 600; color: var(--text); }
.switch-row .switch-sub { font-size: 12px; color: var(--muted-2); }
.switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 44px;
  height: 25px;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.switch .track {
  position: absolute;
  inset: 0;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.switch .track::before {
  content: "";
  position: absolute;
  left: 3px; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-med) var(--ease);
}
.switch input:checked + .track {
  background: var(--accent);
  border-color: var(--accent-press);
}
.switch input:checked + .track::before { transform: translate(19px, -50%); }
.switch input:focus-visible + .track { box-shadow: var(--ring); }

/* settings save / run-now actions row */
.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.settings-actions .grow { flex: 1 1 auto; }
.settings-status {
  font-size: 12.5px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.settings-status.ok { color: var(--ok); }
.settings-status.bad { color: var(--danger); }

@media (max-width: 480px) {
  .watch-row { grid-template-columns: 1fr auto; }
  .watch-row .watch-sym, .watch-row .watch-kind { grid-column: 1 / -1; }
}

/* =========================================================
   #calendarCard — compact upcoming-events list (Hub)
   shares the centered hub column with markets/news
   ========================================================= */
#calendarCard {
  width: 100%;
  max-width: var(--hub-max);
  margin: 0 auto;
  padding-left: calc(18px + var(--sal));
  padding-right: calc(18px + var(--sar));
  padding-bottom: 6px;
}
#calendarCard:empty { display: none; }
/* the actual card surface (JS wraps items in .cal-inner; fall back to direct) */
#calendarCard .cal-inner,
#calendarCard > .cal-list {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  animation: fade-in 280ms var(--ease) both;
}
/* clickable dropdown header — toggles the body open/closed */
.cal-head {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.cal-head:hover { background: var(--panel-2); color: var(--text); }
.cal-head:focus-visible { outline-offset: -2px; }
/* small calendar glyph */
.cal-head::before {
  content: "";
  width: 14px; height: 14px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor, currentColor) 0 3px / 100% 1.5px no-repeat;
  opacity: 0.85;
}
.cal-heading { flex: 0 0 auto; }
/* event count, pushed to sit just before the chevron */
.cal-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted-2);
}
/* chevron on the far right; rotates when expanded */
.cal-chevron {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin-left: 4px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg);            /* points down = expandable */
  transition: transform var(--t-med) var(--ease);
  opacity: 0.8;
}
.cal-inner:not(.collapsed) .cal-chevron { transform: rotate(-135deg); }  /* points up */
.cal-inner.collapsed .cal-head { border-bottom: 0; }
/* collapsible body — animate via grid-template-rows 1fr<->0fr, which transitions
   the REAL content height smoothly (max-height easing over a guessed value is
   what made it feel janky). The inner wrapper carries overflow:hidden. */
.cal-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--t-med) var(--ease);
}
.cal-body > * {
  min-height: 0;
  overflow: hidden;
}
.cal-inner.collapsed .cal-body { grid-template-rows: 0fr; }

.cal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line-soft);
  transition: background var(--t-fast) var(--ease);
  animation: fade-in 220ms var(--ease) both;
}
.cal-item:last-child { border-bottom: none; }
.cal-item:hover { background: var(--accent-soft); }

/* date chip on the left */
.cal-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: 6px 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  line-height: 1.05;
  text-align: center;
}
.cal-date .cal-day {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cal-date .cal-mon {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1px;
}

.cal-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
/* kind tag, colored by kind (JS adds .fed / .holiday) */
.cal-kind {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--line-soft);
  background: var(--panel-3);
  color: var(--muted);
}
.cal-kind.fed {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(59, 130, 246, 0.34);
}
.cal-kind.holiday {
  color: var(--ok);
  background: var(--up-soft);
  border-color: rgba(52, 211, 153, 0.3);
}
.cal-empty { padding: 16px 15px; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 820px) {
  #calendarCard { padding-left: calc(14px + var(--sal)); padding-right: calc(14px + var(--sar)); }
}

/* =========================================================
   .news-save — bookmark toggle on news cards
   outline (default) -> filled (saved)
   ========================================================= */
.news-save {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--muted-2);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
/* bookmark glyph: a tag/ribbon. Outline by default, FILLED when saved.
   Drawn with an SVG mask so a single element gives a crisp ribbon. */
.news-save::before {
  content: "";
  width: 13px;
  height: 16px;
  background: currentColor;
  /* OUTLINE ribbon: stroked path, transparent interior */
  -webkit-mask: var(--bm-outline) center / contain no-repeat;
  mask: var(--bm-outline) center / contain no-repeat;
  transition: -webkit-mask-image var(--t-fast) var(--ease), mask-image var(--t-fast) var(--ease);
}
:root {
  --bm-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='none' stroke='black' stroke-width='1.7'%3E%3Cpath d='M1.9 1.6h10.2v14.4l-5.1-3.7-5.1 3.7z'/%3E%3C/svg%3E");
  --bm-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath fill='black' d='M1.9 1.6h10.2v14.4l-5.1-3.7-5.1 3.7z'/%3E%3C/svg%3E");
}
.news-save:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.news-save:active { transform: scale(0.9); }
.news-save:focus-visible { outline-offset: 1px; }

/* saved state — solid accent ribbon */
.news-save.saved,
.news-save[aria-pressed="true"] {
  color: var(--accent);
}
.news-save.saved::before,
.news-save[aria-pressed="true"]::before {
  -webkit-mask-image: var(--bm-filled);
  mask-image: var(--bm-filled);
}
/* give the headline room so it doesn't slide under the bookmark */
.news-card .news-title { padding-right: 26px; }

/* a "Saved" filter chip in #newsFilters can reuse .news-chip; add a glyph */
.news-chip.saved-chip { display: inline-flex; align-items: center; gap: 6px; }
.news-chip.saved-chip::before {
  content: "";
  width: 10px; height: 13px;
  background: currentColor;
  -webkit-mask: var(--bm-filled) center / contain no-repeat;
  mask: var(--bm-filled) center / contain no-repeat;
  opacity: 0.9;
}

@media (hover: none) {
  /* always show the bookmark on touch (no hover to reveal) */
  .news-save { color: var(--muted); }
}

/* ===== v6 reconciliation: style the real class names app.js emits ===== */
/* Global search results */
.search-section { margin: 6px 0 16px; }
.search-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 8px; padding-bottom:5px; border-bottom:1px solid var(--line-soft); }
.search-row { padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-m); margin-bottom:8px;
  cursor:pointer; background:var(--panel-2); transition:background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.search-row:hover { background:var(--panel-3); border-color:var(--accent); }
.search-row-title { font-weight:600; color:var(--text); font-size:14px; margin-bottom:2px; }
.search-row-snippet { color:var(--muted); font-size:12.5px; line-height:1.45; }
.search-hint, .search-empty { color:var(--muted); font-size:13px; padding:20px 6px; text-align:center; }

/* Settings: catch-all form controls + groups */
.settings-section { margin:6px 0 18px; padding-bottom:14px; border-bottom:1px solid var(--line-soft); }
.settings-section:last-child { border-bottom:none; }
.settings-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:var(--text); font-size:13.5px; }
#settingsBody select, #settingsBody input[type="text"], #settingsBody input[type="number"], #settingsBody input[type="time"] {
  padding:7px 10px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius-s);
  color:var(--text); font:inherit; }
#settingsBody select:focus, #settingsBody input:focus { border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft); }
/* Watchlist editor */
.wl-rows { display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.wl-row { display:flex; align-items:center; gap:8px; background:var(--panel-2); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:6px 9px; }
.wl-label { flex:1; font-weight:600; color:var(--text); font-size:13px; }
.wl-symbol { color:var(--muted); font-family:var(--mono); font-size:12px; }
.wl-kind { font-size:10px; text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:1px 7px; }
.wl-remove { border:none; background:transparent; color:var(--muted); font-size:16px; cursor:pointer; padding:0 4px; }
.wl-remove:hover { color:var(--danger); }
.wl-add { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap; }
.wl-add input, .wl-add select { flex:1; min-width:80px; }
.wl-add-btn { padding:7px 14px; background:var(--accent); color:#fff; border:1px solid var(--accent-press);
  border-radius:var(--radius-s); font-weight:600; cursor:pointer; flex:0 0 auto; }
/* Schedule */
.sched-time { display:flex; align-items:center; gap:6px; }
.sched-targets { display:flex; gap:14px; flex-wrap:wrap; margin:6px 0; }
.sched-topic { width:100%; }
/* News card bookmark container */
.news-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
/* Calendar date chip sub-parts */
.cal-date-day { font-size:16px; font-weight:700; line-height:1; color:var(--text); }
.cal-date-mon { font-size:10px; text-transform:uppercase; color:var(--muted); letter-spacing:.04em; }

/* =========================================================
   ADDENDUM v7 — in-app article reader, header actions, pagination
   #articleOverlay (.overlay/.overlay-card/.overlay-head reused)
   #articleBody (.doc typography) + #articleOpen/#articleDiscuss/#articleClose
   #newsPager — Prev / page indicator / Next
   Works in both themes; no emojis.
   ========================================================= */

/* scrollable article body — give it the same flex/scroll treatment as the
   report overlay body and comfortable reading typography */
#articleBody.doc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: none;
  margin: 0;
  /* center a comfortable measure within the scroll area */
  padding: 26px clamp(18px, 6vw, 56px) calc(40px + var(--sab));
}
/* constrain the running text to a readable line length */
#articleBody.doc > * {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}
#articleBody.doc h1 { font-size: 25px; line-height: 1.25; margin: 0 auto 16px; }
#articleBody.doc h2 { font-size: 19px; margin: 26px auto 10px; }
#articleBody.doc h3 { font-size: 16px; margin: 20px auto 8px; }
#articleBody.doc p {
  margin: 0 auto 16px;
  line-height: 1.72;
  font-size: 15.5px;
  color: var(--text);
}
#articleBody.doc .byline,
#articleBody.doc .article-byline {
  max-width: 70ch;
  margin: 0 auto 18px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.01em;
}
/* responsive content images */
#articleBody .article-img,
#articleBody.doc img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 8px auto 20px;
  border-radius: var(--radius-m);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
#articleBody .article-img { max-width: min(100%, 70ch); }

/* article reader header actions: Open original / Discuss / Close */
#articleOpen,
#articleDiscuss {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--panel-3);
  color: var(--text);
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
#articleOpen:hover,
#articleDiscuss:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
  text-decoration: none;
}
#articleOpen:active,
#articleDiscuss:active { transform: translateY(1px); }
/* "open original" external-link glyph (framed box + out arrow), via SVG mask
   so it stays crisp and adopts currentColor in both themes */
#articleOpen::after {
  content: "";
  width: 12px; height: 12px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: 0.85;
  -webkit-mask: var(--ext-link) center / contain no-repeat;
  mask: var(--ext-link) center / contain no-repeat;
}
:root {
  --ext-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h5v5'/%3E%3Cpath d='M14 2 7.5 8.5'/%3E%3Cpath d='M12 9.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3.5'/%3E%3C/svg%3E");
}
/* Discuss = primary-ish accent action with a chat-bubble glyph */
#articleDiscuss {
  background: var(--accent);
  border-color: var(--accent-press);
  color: #fff;
  font-weight: 600;
}
#articleDiscuss:hover { background: var(--accent-hover); filter: brightness(1.03); }
#articleDiscuss::before {
  content: "";
  width: 13px; height: 11px;
  flex: 0 0 auto;
  border: 1.5px solid currentColor;
  border-radius: 4px 4px 4px 1px;
  opacity: 0.95;
}

/* close button mirrors #overlayClose styling (X glyph, pill) */
#articleClose {
  flex: 0 0 auto;
  padding: 8px 14px 8px 30px;
  position: relative;
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-weight: 500;
  font-size: 13px;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
#articleClose::before, #articleClose::after {
  content: "";
  position: absolute;
  left: 13px; top: 50%;
  width: 11px; height: 1.7px;
  background: currentColor;
  border-radius: 2px;
}
#articleClose::before { transform: translateY(-50%) rotate(45deg); }
#articleClose::after { transform: translateY(-50%) rotate(-45deg); }
#articleClose:hover { background: var(--accent-soft); border-color: var(--accent); }
#articleClose:active { transform: translateY(1px); }

/* article loading / error states inside the body */
#articleBody .loading,
#articleBody .empty,
#articleBody .error { max-width: none; }

/* =========================================================
   #newsPager — centered Prev / page indicator / Next
   (lives at the bottom of #newsView, outside the hub column)
   ========================================================= */
#newsPager {
  width: 100%;
  max-width: var(--hub-max);
  margin: 8px auto 0;
  padding: 14px calc(18px + var(--sar)) 6px calc(18px + var(--sal));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
#newsPager:empty { display: none; }

#newsPager button,
.pager-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-1);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
#newsPager button:hover:not(:disabled),
.pager-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#newsPager button:active:not(:disabled),
.pager-btn:active:not(:disabled) { transform: translateY(1px); }
#newsPager button:disabled,
.pager-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
/* chevron glyphs on prev/next (JS may add .pager-prev / .pager-next) */
.pager-btn.pager-prev::before,
.pager-btn.pager-next::after {
  content: "";
  width: 7px; height: 7px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.85;
}
.pager-btn.pager-prev::before { transform: rotate(135deg); }
.pager-btn.pager-next::after { transform: rotate(-45deg); }

/* page indicator text between the buttons */
#newsPager .pager-info,
.pager-info {
  flex: 0 0 auto;
  min-width: 96px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
#newsPager .pager-info b,
.pager-info b { color: var(--text); font-weight: 700; }

/* numbered, jumpable page buttons (with … gaps). #newsPager-prefixed so they win
   over the generic `#newsPager button` pill style above. */
#newsPager .pager-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
#newsPager .pager-num {
  flex: 0 0 auto;
  min-width: 36px;
  height: 36px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-s);
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  box-shadow: none;
  gap: 0;
}
#newsPager .pager-num:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
#newsPager .pager-num.active {
  background: var(--accent);
  border-color: var(--accent-press);
  color: #fff;
  box-shadow: var(--shadow-1);
  cursor: default;
}
#newsPager .pager-gap {
  flex: 0 0 auto;
  align-self: flex-end;
  min-width: 16px;
  padding-bottom: 6px;
  text-align: center;
  color: var(--muted-2);
  font-weight: 700;
  letter-spacing: 1px;
  user-select: none;
}

@media (max-width: 820px) {
  #newsPager {
    padding-left: calc(14px + var(--sal));
    padding-right: calc(14px + var(--sar));
  }
  #articleBody.doc { padding: 20px 18px calc(36px + var(--sab)); }
  #articleBody.doc > *,
  #articleBody .article-img { max-width: 100%; }
}

/* ===== v7 reconciliation: article reader states ===== */
.article-p { margin: 0 0 13px; }
.article-fallback { white-space: pre-wrap; line-height: 1.6; }
.article-empty { color: var(--muted); text-align: center; padding: 28px 12px; font-size: 13.5px; }

/* =========================================================
   ADDENDUM v8 — restructured news card
   Layout: [.news-thumb] -> .news-top (.news-src | .news-save)
           -> .news-title -> .news-foot (.news-time .news-cat .news-discuss)
   Loads LAST so it overrides the legacy absolute .news-save.
   ========================================================= */

/* The card already has its own padding for text; pull the thumbnail to the
   card edges so it spans full width and meets the rounded top corners. The
   negative margins exactly cancel .news-card's top/side padding (16px 17px). */
.news-thumb {
  display: block;
  width: calc(100% + 34px);
  margin: -16px -17px 12px;       /* -top -side, then breathing room below */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--panel-3);     /* graceful placeholder while loading */
  /* match only the card's TOP corners; bottom stays square against text */
  border-radius: var(--radius-m) var(--radius-m) 0 0;
  border-bottom: 1px solid var(--line);
}
/* if the thumbnail is an <a> wrapping an <img>, keep the wrapper flush too */
a.news-thumb { line-height: 0; }
a.news-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: inherit;
}
/* card stays clean WITHOUT a thumbnail: default padded layout is unchanged. */

/* ---- FIX: .news-top is the flex row; .news-save sits INLINE on the right ----
   Override the legacy `position:absolute` that overlapped the source badge. */
.news-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.news-top .news-src { margin: 0; }     /* row handles alignment, not align-self */

.news-save {
  position: static;                    /* was absolute — caused the overlap bug */
  top: auto;
  right: auto;
  z-index: auto;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  margin: -3px -4px -3px 0;            /* optical: tuck flush to the card edge */
}
/* with the bookmark no longer floating over the headline, drop the old reserve */
.news-card .news-title { padding-right: 0; }

/* =========================================================
   ADDENDUM v9 — Home polish: section headings + featured hero
   (loads last so featured overrides the v8 .news-thumb rules)
   ========================================================= */

/* section headings ("Markets", "Latest headlines") — share the centered hub
   column + gutters with the strip/grid below them */
.hub-head {
  width: 100%;
  max-width: var(--hub-max);
  margin: 0 auto;
  padding-left: calc(18px + var(--sal));
  padding-right: calc(18px + var(--sar));
  padding-top: 20px;
  padding-bottom: 2px;
}
.hub-head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
/* little accent tick before the label */
.hub-head span::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
}
#marketsHead { padding-top: 8px; }        /* sits right under the fixed bar */

/* ---- Featured hero card: full-width, image-forward ----
   Spans every grid column; on wide screens the image sits beside the text. */
.news-card.featured {
  grid-column: 1 / -1;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.news-card.featured .news-thumb {
  width: 100%;
  margin: 0;
  aspect-ratio: 21 / 7;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
/* text block gets its own padding back (the card padding was zeroed) */
.news-card.featured .news-top,
.news-card.featured .news-title,
.news-card.featured .news-foot {
  margin-left: 18px;
  margin-right: 18px;
}
.news-card.featured .news-top { margin-top: 15px; }
.news-card.featured .news-title {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.28;
  -webkit-line-clamp: 2;
  margin-top: 2px;
}
.news-card.featured .news-foot { margin-bottom: 15px; padding-top: 10px; }
/* on wider screens, lay image LEFT and text RIGHT for a true hero look.
   Explicit row/column placement (the card's children are thumb, top, title,
   foot in DOM order) so nothing relies on grid auto-flow. */
@media (min-width: 760px) {
  .news-card.featured {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: stretch;
  }
  .news-card.featured .news-thumb {
    grid-column: 1;
    grid-row: 1 / 4;
    height: 100%;
    aspect-ratio: auto;
    min-height: 250px;
    border-bottom: 0;
    border-right: 1px solid var(--line);
  }
  .news-card.featured .news-top   { grid-column: 2; grid-row: 1; margin-top: 20px; }
  .news-card.featured .news-title {
    grid-column: 2; grid-row: 2;
    align-self: center;
    font-size: 24px;
    -webkit-line-clamp: 4;
  }
  .news-card.featured .news-foot  { grid-column: 2; grid-row: 3; margin-bottom: 20px; }
}

/* =========================================================
   ADDENDUM v10 — interactive market chart modal (#marketModal)
   ========================================================= */
.mkt-modal-card {
  max-width: 680px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mkt-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.mkt-modal-title h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.mkt-modal-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 5px;
}
.mkt-modal-val {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.mkt-modal-chg {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mkt-modal-chg.up { color: var(--up); }
.mkt-modal-chg.down { color: var(--down); }

/* range selector */
.mkt-ranges { display: flex; gap: 8px; }
.mkt-range-btn {
  flex: 0 0 auto;
  padding: 6px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.mkt-range-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.mkt-range-btn.active {
  background: var(--accent);
  border-color: var(--accent-press);
  color: #fff;
  cursor: default;
}

/* chart canvas wrapper — fixed height so Chart.js has a box to fill */
.mkt-chart-wrap {
  position: relative;
  width: 100%;
  height: 320px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: 12px 12px 8px;
}
.mkt-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.mkt-modal-note { font-size: 11.5px; color: var(--muted-2); min-height: 14px; }

@media (max-width: 560px) {
  .mkt-chart-wrap { height: 260px; }
}

/* =========================================================
   ADDENDUM v11 — article reader "blocked / unavailable" fallback
   ========================================================= */
.article-blocked {
  max-width: 560px;
  margin: 6vh auto 0;
  padding: 26px 24px;
  text-align: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}
.article-blocked-title { font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.article-blocked-sub { margin: 9px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.article-blocked-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.article-blocked-acts .btn-primary,
.article-blocked-acts .btn-secondary { text-decoration: none; }

/* =========================================================
   ADDENDUM v12 — redesigned Logs page (toolbar, stats, timeline)
   Blocks share the same centered 920px column as the metrics grid.
   ========================================================= */
.logs-bar, .logs-stats, .logs-filter, .logs-timeline {
  width: 100%;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* toolbar */
.logs-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.logs-bar-title h2 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.logs-bar-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted-2); }
.logs-bar-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.logs-act {
  flex: 0 0 auto;
  padding: 7px 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.logs-act:hover { border-color: var(--accent); background: var(--accent-soft); }
.logs-act:active { transform: translateY(1px); }
.logs-act:disabled { opacity: 0.5; cursor: not-allowed; }
.logs-act.danger { color: #e2687a; }
.logs-act.danger:hover { border-color: var(--danger); background: rgba(220,90,110,0.12); color: var(--danger); }

/* summary stat cards */
.logs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.logs-stat {
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
}
.logs-stat-val { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1; }
.logs-stat-lab { margin-top: 3px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.logs-stat.warn .logs-stat-val { color: #e0a33a; }

/* filter chips + search */
.logs-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.logs-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.logs-chip {
  flex: 0 0 auto;
  padding: 6px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.logs-chip:hover { color: var(--text); border-color: var(--accent); }
.logs-chip.active { background: var(--accent); border-color: var(--accent-press); color: #fff; }
.logs-search {
  flex: 1 1 200px;
  max-width: 280px;
  padding: 8px 13px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.logs-search:focus { border-color: var(--accent); box-shadow: var(--ring); }
.logs-search::placeholder { color: var(--muted-2); }
.logs-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* timeline */
.logs-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-1);
  padding: 6px;
}
.log-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 10px;
  border-radius: var(--radius-s);
  transition: background var(--t-fast) var(--ease);
}
.log-item + .log-item { border-top: 1px solid var(--line-soft); }
.log-item.log-clickable { cursor: pointer; }
.log-item.log-clickable:hover { background: var(--accent-soft); }
.log-item:focus-visible { outline-offset: -2px; }

/* colored timeline node, keyed by type */
.log-node {
  flex: 0 0 auto;
  width: 11px; height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.03);
}
.log-node.login { background: var(--accent); }
.log-node.login.ok { background: var(--ok); }
.log-node.login.fail { background: var(--danger); }
.log-node.report { background: #c08bff; }
.log-node.chat { background: var(--accent); }
.log-node.system { background: #e0a33a; }

.log-item-body { flex: 1 1 auto; min-width: 0; }
.log-item-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.log-type-pill {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--panel-3);
  border: 1px solid var(--line-soft);
  color: var(--muted);
}
.log-type-pill.login { color: var(--ok); background: var(--up-soft, rgba(52,199,134,0.12)); border-color: rgba(52,199,134,0.3); }
.log-type-pill.report { color: #c08bff; background: rgba(192,139,255,0.12); border-color: rgba(192,139,255,0.32); }
.log-type-pill.chat { color: var(--link, var(--accent)); background: var(--accent-soft); border-color: rgba(59,130,246,0.34); }
.log-type-pill.system { color: #e0a33a; background: rgba(224,163,58,0.12); border-color: rgba(224,163,58,0.32); }
.log-item-title { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; }
.log-item-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 10px;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-2);
}
.log-item-where { color: var(--muted); }
.log-item-when { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.log-go {
  flex: 0 0 auto;
  align-self: center;
  color: var(--muted-2);
  font-size: 20px;
  line-height: 1;
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.log-item.log-clickable:hover .log-go { color: var(--accent); transform: translateX(2px); }

@media (max-width: 560px) {
  .logs-bar, .logs-stats, .logs-filter, .logs-timeline { padding-left: 14px; padding-right: 14px; }
}

/* =========================================================
   ADDENDUM v13 — watchlist quick-add presets (Settings)
   ========================================================= */
.wl-presets { margin: 12px 0 14px; }
.wl-presets-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.wl-preset-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.wl-preset {
  flex: 0 0 auto;
  padding: 6px 12px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.wl-preset:hover { border-color: var(--accent); background: var(--accent-soft); }
.wl-preset.added { color: var(--ok); border-color: rgba(52,199,134,0.3); background: rgba(52,199,134,0.1); cursor: default; opacity: 0.85; }

/* =========================================================
   ADDENDUM v14 — market chart compare mode
   ========================================================= */
.mkt-compare { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.mkt-compare:empty { display: none; }
.mkt-compare-lab { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-right: 2px; }
.mkt-cmp-chip {
  flex: 0 0 auto;
  padding: 5px 11px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.mkt-cmp-chip:hover { color: var(--text); border-color: var(--accent); }
.mkt-cmp-chip.active { background: var(--accent); border-color: var(--accent-press); color: #fff; }
.mkt-modal-mode { font-size: 11.5px; font-weight: 600; color: var(--muted-2); font-style: italic; }

/* =========================================================
   ADDENDUM v15 — RTL support (Arabic). dir="rtl" on <html> flips
   flex/text automatically; these fix the spots that use physical sides.
   ========================================================= */
[dir="rtl"] body, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button { letter-spacing: 0; }
/* the markets accent rail + featured/news thumbs read fine; fix obvious physical offsets */
[dir="rtl"] .mkt-pill::before { left: auto; right: 0; background: linear-gradient(180deg, var(--accent), transparent); }
[dir="rtl"] .mkt-pill.clickable::after { right: auto; left: 10px; }
[dir="rtl"] .news-save { margin: -3px 0 -3px -4px; }
[dir="rtl"] .conv-item { padding: 9px 11px 9px 34px; }
/* timeline / logs nodes and chevrons */
[dir="rtl"] .log-go { transform: scaleX(-1); }
[dir="rtl"] .log-item.log-clickable:hover .log-go { transform: scaleX(-1) translateX(2px); }
[dir="rtl"] .cal-chevron { /* chevron is symmetric enough; leave */ }
/* news search magnifier glyph sits on the right in RTL */
[dir="rtl"] #newsSearch {
  background-position: right 11px center;
  padding: 8px 34px 8px 12px;
}
/* keep numeric/Latin tickers and charts LTR even in RTL layout */
[dir="rtl"] .mkt-val, [dir="rtl"] .mkt-wow, [dir="rtl"] .logs-stat-val,
[dir="rtl"] .metric-value, [dir="rtl"] .mkt-modal-val { direction: ltr; }
/* article reader + chat bubbles already follow dir; ensure list bullets sit right */
[dir="rtl"] .article-blocked { text-align: center; }
/* the language toggle shows the OTHER language's name; keep it readable */
#langToggle { font-weight: 600; }

/* =========================================================
   ADDENDUM v16 — AI article summary box (top of the reader)
   ========================================================= */
.article-summary {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(59,130,246,0.30);
  border-radius: var(--radius-m);
  border-inline-start: 3px solid var(--accent);
}
.article-summary-lab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.article-summary-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
}
.article-summary.loading-sum .article-summary-text { color: var(--muted); display: flex; align-items: center; gap: 8px; }

/* =========================================================
   ADDENDUM v17 — bilingual chat: "translating…" banner
   ========================================================= */
.chat-translating {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 8px auto 14px;
  padding: 8px 14px;
  max-width: 320px;
  background: var(--accent-soft);
  border: 1px solid rgba(59,130,246,0.30);
  border-radius: var(--radius-pill);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

/* =========================================================
   ADDENDUM v18 — polish: empty-chat welcome state
   ========================================================= */
.chat-empty {
  max-width: 560px;
  margin: auto;
  padding: 8vh 24px 24px;
  text-align: center;
  animation: fade-in 320ms var(--ease) both;
}
.chat-empty-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.chat-empty-sub { margin: 8px 0 20px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.chat-empty-examples { display: flex; flex-direction: column; gap: 8px; max-width: 440px; margin: 0 auto; }
.chat-example {
  width: 100%;
  text-align: start;
  padding: 12px 15px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.chat-example:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.chat-example:active { transform: translateY(0); }

/* =========================================================
   ADDENDUM v19 — blind polish: lang button, mobile sweep, misc a11y
   ========================================================= */
/* language toggle shows TEXT (العربية / English), not an icon glyph */
.lang-btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-1);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.lang-btn:hover { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.lang-btn:active { transform: translateY(1px) scale(0.97); }

/* --- mobile sweep for components added this session --- */
@media (max-width: 820px) {
  .lang-btn { height: 34px; padding: 0 9px; font-size: 12px; }
}
@media (max-width: 560px) {
  /* logs toolbar: stack heading above the action buttons */
  .logs-bar { flex-direction: column; align-items: stretch; gap: 10px; }
  .logs-bar-acts { justify-content: flex-start; }
  .logs-stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
  .logs-stat-val { font-size: 19px; }
  /* market modal: tighter ranges/compare, smaller header */
  .mkt-modal-head { flex-wrap: wrap; }
  .mkt-modal-title h2 { font-size: 17px; }
  .chat-empty { padding-top: 5vh; }
  .chat-empty-title { font-size: 19px; }
  /* market & settings dialogs: comfortable full-width padding */
  .mkt-modal-card, .modal-card { padding-left: 16px; padding-right: 16px; }
}
/* very narrow phones: let the top tabs scroll instead of squeezing actions off-screen */
@media (max-width: 380px) {
  .lang-btn { padding: 0 7px; }
  #topActions { gap: 3px; }
}

/* =========================================================
   ADDENDUM v20 — per-report RTL (Arabic reports). dir="rtl" is set
   on the .doc-md element itself (not <html>), so an Arabic report
   renders RTL even while the UI language is English, and vice versa.
   ========================================================= */
.doc-md[dir="rtl"] { text-align: right; }
.doc-md[dir="rtl"] h1, .doc-md[dir="rtl"] h2, .doc-md[dir="rtl"] h3,
.doc-md[dir="rtl"] p, .doc-md[dir="rtl"] li { text-align: right; }
.doc-md[dir="rtl"] ul, .doc-md[dir="rtl"] ol { padding-right: 1.4em; padding-left: 0; }
.doc-md[dir="rtl"] table { direction: rtl; }
.doc-md[dir="rtl"] th, .doc-md[dir="rtl"] td { text-align: right; }
/* keep Latin tickers / numeric cells readable inside RTL tables */
.doc-md[dir="rtl"] td.num, .doc-md[dir="rtl"] .ltr { direction: ltr; }
/* report library cards for Arabic reports */
.card.rtl { text-align: right; }
.card.rtl .card-title { direction: rtl; }

/* =========================================================
   ADDENDUM v21 — bilingual report language sub-tabs (overlay)
   ========================================================= */
.report-langtabs {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #2a3344);
}
.rl-tab {
  padding: 5px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  background: var(--chip-bg, #1a2230); color: var(--text-dim, #9aa7bd);
  border: 1px solid var(--border, #2a3344);
}
.rl-tab:hover { color: var(--text, #e7edf6); }
.rl-tab.active {
  background: var(--accent, #2563eb); color: #fff; border-color: var(--accent, #2563eb);
}
.rl-tab.pending { opacity: .6; cursor: default; display: inline-flex; align-items: center; gap: 6px; }
.rl-tab.pending:hover { color: var(--text-dim, #9aa7bd); }
.rl-note { font-size: 12px; color: var(--text-dim, #9aa7bd); margin-inline-start: auto; }

/* =========================================================
   ADDENDUM v22 — news card origin-language badge (combined hub)
   ========================================================= */
.news-orig {
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
  padding: 1px 6px; border-radius: 999px; line-height: 1.5;
  background: rgba(37,99,235,.14); color: var(--accent, #2563eb);
  border: 1px solid rgba(37,99,235,.3); flex: 0 0 auto;
}
.news-orig.ar { background: rgba(16,151,103,.14); color: #12a06a; border-color: rgba(16,151,103,.32); }
/* push Save to the far right; source + origin badge stay grouped on the left */
.news-top .news-save { margin-inline-start: auto; }

/* =========================================================
   ADDENDUM v23 — in-app article translation banner / toggle
   ========================================================= */
.article-trans {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 9px 13px; border-radius: 10px;
  background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.28);
  font-size: 13px; color: var(--text, #e7edf6);
}
.article-trans.pending { color: var(--text-dim, #9aa7bd); }
.article-trans-lab { font-weight: 600; }
.article-trans-btn {
  margin-inline-start: auto; padding: 4px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: #fff;
  background: var(--accent, #2563eb); border: 1px solid var(--accent, #2563eb);
}
.article-trans-btn:hover { filter: brightness(1.08); }
.article-trans-note { width: 100%; font-size: 12px; color: var(--text-dim, #9aa7bd); }