/*
 * Bootstrap 5 + Font Awesome handle layout and components — this file
 * covers everything that gives the app a developer-tool/IDE-terminal look
 * instead of a generic Bootstrap site: a GitHub-Dark-inspired palette
 * (light+dark), JetBrains Mono as the app-wide font, terminal window
 * chrome on the top bar (traffic-light dots, a blinking-cursor prompt
 * brand), sharp small-radius panels instead of soft rounded ones,
 * messages styled as log/code lines with an accent gutter instead of
 * filled chat bubbles, and bracket-decorated buttons ([ Approve ]) —
 * plus the flex/height chain that makes the message list scroll on its
 * own instead of the whole page scrolling.
 *
 * Two different override mechanisms are needed, not one: Bootstrap 5.3's
 * root-level tokens (--bs-body-bg, --bs-secondary-color, --bs-border-color,
 * --bs-border-radius, ...) ARE read live by utility classes and components
 * like .btn, .form-control, .alert, .list-group — overriding them here
 * (loaded after bootstrap.min.css) recolors/reshapes every use of those
 * automatically. Component classes like .btn-primary do NOT read from
 * those tokens — Bootstrap's compiled CSS bakes fixed hex values into each
 * component's own --bs-btn-bg etc. at build time — so this app never uses
 * .btn-primary at all and instead has its own .btn-brand for the accent
 * color, defined directly below.
 */

:root {
  /* GitHub Light-ish */
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: #1f2328;
  --bs-body-color-rgb: 31, 35, 40;
  --bs-emphasis-color: #1f2328;
  --bs-secondary-color: #59636e;
  --bs-secondary-bg: #eaeef2;
  --bs-tertiary-bg: #f6f8fa;
  --bs-tertiary-bg-rgb: 246, 248, 250;
  --bs-border-color: #d0d7de;
  --bs-border-color-translucent: rgba(31, 35, 40, 0.12);
  --bs-link-color: #0969da;
  --bs-link-hover-color: #0550ae;

  /* Sharp, small radius — a code-editor panel, not a soft mobile app. */
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 0.65rem;

  --accent: #0969da; /* "keyword" blue */
  --accent-rgb: 9, 105, 218;
  --accent-purple: #8250df; /* secondary accent, e.g. history active state */
  --accent-green: #1a7f37; /* string-literal green */
  --accent-amber: #9a6700; /* number/constant amber */
  --pending-bg: #fff8c5;
  --pending-text: #7d5b00;

  --chrome-bg: #161b22; /* the top bar's own fixed "window chrome" color,
                            independent of light/dark theme, like an
                            editor's title bar. */
  --chrome-fg: #c9d1d9;
  --chrome-border: #30363d;
  --chrome-dim: #8b949e;

  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Reserved for actual prose people read (message text, hints, taglines)
     — the UI chrome (nav, buttons, labels, headings) stays monospace for
     the developer-tool identity, but long monospace paragraphs are
     measurably slower to read than proportional text. GitHub, Linear, and
     even VS Code's own UI all make this same split (monospace for code/
     chrome, proportional for content), so this isn't a compromise of the
     "coding style" brief, it's how real developer tools actually do it. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --shadow-soft: 0 1px 2px rgba(31, 35, 40, 0.06);
  --shadow-soft-lg: 0 4px 12px rgba(31, 35, 40, 0.1);
}

[data-bs-theme="dark"] {
  /* GitHub Dark */
  --bs-body-bg: #0d1117;
  --bs-body-bg-rgb: 13, 17, 23;
  --bs-body-color: #c9d1d9;
  --bs-body-color-rgb: 201, 209, 217;
  --bs-emphasis-color: #f0f6fc;
  --bs-secondary-color: #8b949e;
  --bs-secondary-bg: #21262d;
  --bs-tertiary-bg: #161b22;
  --bs-tertiary-bg-rgb: 22, 27, 34;
  --bs-border-color: #30363d;
  --bs-border-color-translucent: rgba(240, 246, 252, 0.12);
  --bs-link-color: #58a6ff;
  --bs-link-hover-color: #79c0ff;

  --accent: #58a6ff;
  --accent-rgb: 88, 166, 255;
  --accent-purple: #bc8cff;
  --accent-green: #3fb950;
  --accent-amber: #d29922;
  --pending-bg: rgba(210, 153, 34, 0.15);
  --pending-text: #d29922;

  --chrome-bg: #010409;
  --chrome-fg: #c9d1d9;
  --chrome-border: #21262d;
  --chrome-dim: #6e7681;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-soft-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
}

html, body { height: 100%; }
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.55;
}

/* Prose people actually read at length gets the readable font — see the
   --font-sans comment above for why this split exists. */
.bubble-text, .comment-text, p {
  font-family: var(--font-sans);
}
/* Only the chat pages (room/day) have their own internal scroll region
   (.message-list); everywhere else — the approvals dashboard's list,
   landing/status cards — needs the page itself to scroll normally, so
   this must NOT be a blanket rule or long content becomes unreachable. */
body:has(.room-shell) { overflow: hidden; }
main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; }

/* --- Comment-style secondary text: `// like this`, a cheap but *
 * authentic developer-tool touch used for hints/taglines/empty states. */
.comment-text { color: var(--bs-secondary-color); line-height: 1.6; }
.comment-text::before { content: "// "; opacity: 0.7; }

/* --- Top bar: fixed terminal-window chrome, independent of the page's *
 * light/dark theme (like an editor's title bar usually is). --- */
.app-topbar { background: var(--chrome-bg); border-bottom: 1px solid var(--chrome-border); color: var(--chrome-fg); }
.traffic-lights { display: inline-flex; gap: 0.4rem; }
.traffic-lights .dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; display: inline-block; }
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }
.navbar-brand { display: inline-flex; align-items: baseline; gap: 0.1rem; font-weight: 600; font-size: 1.05rem; color: var(--chrome-fg) !important; text-decoration: none; }
.navbar-brand .prompt-symbol { color: var(--accent-green); }
.cursor-blink { display: inline-block; margin-left: 0.15rem; animation: blink 1.1s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }
.topbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; row-gap: 0.5rem; }
.topbar-nav .nav-username { display: flex; align-items: center; font-weight: 600; font-size: 0.88rem; padding: 0 0.25rem; color: var(--chrome-fg); }
.app-topbar .btn-outline-secondary { --bs-btn-color: var(--chrome-fg); --bs-btn-border-color: var(--chrome-border); --bs-btn-hover-bg: var(--chrome-border); --bs-btn-hover-color: var(--chrome-fg); --bs-btn-hover-border-color: var(--chrome-border); }

/* --- Avatars: small rounded squares (file-icon style), not circles --- */
.avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.avatar-inline {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 0.25rem;
  font-size: 0.68rem;
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* --- Flat-accent variants of Bootstrap-shaped components --- */
.btn-brand { background: var(--accent); color: #fff; border: none; }
.btn-brand:hover, .btn-brand:active, .btn-brand:focus { background: var(--accent); color: #fff; filter: brightness(1.1); }
.icon-badge {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  background: var(--accent);
}
.icon-badge.is-warning { background: var(--pending-bg); color: var(--pending-text); }
.icon-badge.is-decline { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* --- Bracket-decorated buttons: [ Approve ] — a CLI-menu touch, scoped *
 * away from icon-only circular/square controls (mic, send, attach,
 * theme toggle) so it only wraps genuine labeled actions. --- */
.btn:not(.btn-icon)::before { content: "["; margin-right: 0.35em; opacity: 0.4; }
.btn:not(.btn-icon)::after { content: "]"; margin-left: 0.35em; opacity: 0.4; }

/* --- Cards: sharp bordered panels, like an editor pane --- */
.card { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-soft) !important; }
.list-group-item { background: transparent; }

/* --- Landing / status pages --- */
.landing-card { max-width: 440px; margin: 3rem auto; }

/* --- Room layout --- */
.room-shell { display: flex; flex: 1; min-height: 0; }
.members-sidebar { width: 270px; flex-shrink: 0; overflow-y: auto; background: var(--bs-tertiary-bg); }
.members-sidebar .list-group-item { border-left: none; border-right: none; }
.members-sidebar h6 { letter-spacing: 0.06em; }

.presence-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--bs-secondary-color); flex-shrink: 0; display: inline-block; }
.presence-dot.online { background: var(--accent-green); box-shadow: 0 0 0 3px rgba(63, 185, 80, 0.2); }

/* Shared between server-rendered and JS-rendered member rows (poll-room.js
   rebuilds these on every poll, so the two must stay in sync). */
.member-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.member-row.mine .member-name { font-weight: 700; }
.member-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-icon { width: 2.6rem; height: 2.6rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

.history-row { border-left: 2px solid transparent; }
.history-row.active { background: var(--bs-tertiary-bg) !important; border-left-color: var(--accent-purple) !important; color: var(--bs-body-color) !important; }
.history-preview { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.room-main { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

.drop-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--accent-rgb), 0.08);
  border: 2px dashed var(--accent);
  pointer-events: none;
}
.drop-overlay-inner {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-weight: 600;
  color: var(--accent);
}

/* --- Messages: log/code lines with a colored accent gutter instead of *
 * filled chat bubbles — mine vs theirs reads via the gutter color and
 * alignment, like a diff or a terminal chat log. --- */
.message-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.bubble {
  max-width: 80%;
  padding: 0.5rem 0.8rem;
  border-radius: 0.3rem;
  border: 1px solid var(--bs-border-color);
  border-left-width: 3px;
  background: var(--bs-tertiary-bg);
  animation: line-in 0.15s ease-out;
}
@keyframes line-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.bubble.mine { align-self: flex-end; border-left-color: var(--accent); }
.bubble.theirs { align-self: flex-start; border-left-color: var(--accent-green); }
.bubble.pending { display: flex; align-items: center; gap: 0.5rem; opacity: 0.75; border-style: dashed; }
.bubble.pending .spinner-border { width: 0.9rem; height: 0.9rem; border-width: 0.15em; color: var(--accent); flex-shrink: 0; }
.bubble.pending .pending-label { font-size: 0.85rem; }
.bubble-sender { display: flex; align-items: center; font-size: 0.75rem; font-weight: 700; color: var(--accent-green); margin-bottom: 0.25rem; }
.bubble.mine .bubble-sender { color: var(--accent); }
.bubble-text { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.bubble a { color: inherit; }
.bubble-time { display: block; font-size: 0.68rem; color: var(--bs-secondary-color); margin-top: 0.25rem; }
.bubble-time::before { content: "// "; opacity: 0.7; }
.bubble audio { max-width: 100%; height: 2.25rem; }

/* --- Composer --- */
.composer-bar { background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); flex-shrink: 0; }
.composer-bar .form-control { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
.composer-bar .form-control:focus { background: var(--bs-body-bg); border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.15); }
.upload-status .progress { background-color: var(--bs-tertiary-bg); }
.upload-status .progress-bar { background-color: var(--accent); transition: width 0.15s ease; }
#upload-filename { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.btn-mic.recording { background-color: var(--bs-danger) !important; color: #fff !important; border-color: var(--bs-danger) !important; animation: pulse-ring 1.4s ease-out infinite; }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* --- Approvals dashboard --- */
.stat-value { font-size: 1.7rem; font-weight: 800; color: var(--accent); }
.approval-card { transition: border-color 0.15s ease; }
.approval-card:hover { border-color: var(--accent) !important; }
.status-pill.status-approved { background-color: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.status-pill.status-rejected { background-color: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.status-pill.status-pending { background-color: var(--pending-bg); color: var(--pending-text); }

/* --- Responsive --- */
@media (max-width: 991.98px) {
  /* Bootstrap's offcanvas-lg default width (400px) comfortably fits
     tablets but overwhelms narrow phones — cap it to a share of the
     viewport instead so it never approaches full-bleed. */
  .offcanvas-lg { width: min(320px, 85vw); }
}
@media (max-width: 575.98px) {
  .stat-value { font-size: 1.35rem; }
  .bubble { max-width: 88%; }
  .topbar-nav .nav-username span:not(.avatar-inline) { display: none; }
}