/* FollowStack AI — design tokens */
@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  --accent: #0E7A5F;
  --accent-hover: #0A6A52;
  --accent-soft: #E3F1EC;
  --accent-text: #0B6B53;

  --ink: #10201B;          /* sidebar background */
  --ink-2: #182B25;        /* sidebar hover */
  --ink-line: #24382F;
  --ink-text: #AFC4BB;
  --ink-text-dim: #6E8278;
  --ink-strong: #FFFFFF;

  --bg: #F4F6F4;
  --surface: #FFFFFF;
  --surface-2: #FAFBFA;
  --border: #E4E8E4;
  --border-strong: #D2D9D3;

  --text: #16211C;
  --text-2: #51605A;
  --text-3: #88958F;

  --warn: #B45309;
  --warn-soft: #FCEFD9;
  --danger: #B3372E;
  --danger-soft: #FBE9E7;
  --info: #2B5FA8;
  --info-soft: #E5EDF8;
  --good: #0E7A5F;
  --good-soft: #E3F1EC;
  --violet: #6D4FA3;
  --violet-soft: #EEE9F7;

  --ai: #6D4FA3;
  --ai-soft: #F4F0FB;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20, 32, 27, 0.06);
  --shadow-md: 0 2px 8px rgba(20, 32, 27, 0.08), 0 1px 2px rgba(20, 32, 27, 0.05);
  --shadow-lg: 0 12px 32px rgba(20, 32, 27, 0.14), 0 2px 8px rgba(20, 32, 27, 0.08);

  --font: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
#root { height: 100vh; }

::selection { background: var(--accent-soft); }

button { font-family: var(--font); cursor: pointer; }
input, textarea, select { font-family: var(--font); }

/* scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #C9D2CB; border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* shared utility classes */
.fs-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.mono { font-family: var(--mono); }

/* unified inbox 3-column grid — context rail collapses on narrow viewports */
.fs-inbox-grid {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) minmax(240px, 312px);
  height: 100%;
}
.fs-inbox-context { display: flex; flex-direction: column; }
@media (max-width: 1180px) {
  .fs-inbox-grid { grid-template-columns: minmax(200px, 256px) minmax(0, 1fr); }
  .fs-inbox-context { display: none !important; }
  .fs-inbox-thread { display: none !important; }
}

/* tables: hover via CSS (replaces per-row JS handlers) */
.fs-table tbody tr { transition: background 0.1s; }
.fs-table tbody tr:hover { background: var(--surface-2); }

  /* Live Call Assistant — transcript must never collapse */
  .fs-call-feed { min-height: 170px; }
  @media (max-height: 760px) {
    .fs-call-checklist .fs-chips { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 4px; }
    .fs-call-checklist { padding-top: 8px !important; padding-bottom: 8px !important; }
  }

@media (max-width: 700px) {
  /* Calendar: agenda list replaces the week grid on phones */
  .fs-cal-inner { display: none !important; }
  .fs-cal-agenda { display: flex !important; }
}

@keyframes fsFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference) {
  .fs-fade { animation: fsFadeUp 0.3s ease; }
}

/* ============ responsive layer ============ */
/* app shell fills the dynamic viewport (iOS Safari safe) */
.fs-app { height: 100vh; height: 100dvh; }

/* tables: scroll sideways instead of crushing */
.fs-card:has(> table) { overflow-x: auto !important; }
.fs-card > table { min-width: 620px; }
.fs-scroll-x { overflow-x: auto !important; }
.fs-cal-inner { min-width: 680px; }

/* sidebar drawer below 900px */
.fs-burger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); flex-shrink: 0; }
.fs-nav-backdrop { position: fixed; inset: 0; background: rgba(16, 32, 27, 0.45); z-index: 140; }
@media (max-width: 900px) {
  aside.fs-sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 150; transform: translateX(-105%); transition: transform 0.22s ease; box-shadow: var(--shadow-lg); }
  aside.fs-sidebar.open { transform: translateX(0); }
  .fs-burger { display: inline-flex; }
}

/* topbar search slims down */
@media (max-width: 1100px) {
  .fs-topbar-search { width: auto !important; flex: 0 0 auto; }
  .fs-search-hint { display: none !important; }
}

/* grid utilities — !important beats inline styles */
@media (max-width: 1100px) {
  .fs-grid-5 { grid-template-columns: repeat(3, 1fr) !important; }
  .fs-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .fs-tpl-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .fs-cols, .fs-grid-3, .fs-auto-grid { grid-template-columns: 1fr !important; }
  /* Live Call Assistant — tabbed on mobile so the transcript is never buried */
  .fs-call-grid { grid-template-columns: 1fr !important; grid-template-rows: auto minmax(0, 1fr); }
  .fs-call-tabs { display: flex !important; }
  .fs-call-grid[data-mtab="transcript"] .fs-call-panel { display: none !important; }
  .fs-call-grid[data-mtab="transcript"] .fs-call-checklist { display: none !important; }
  .fs-call-grid[data-mtab="hints"] .fs-call-left > *:not(:first-child) { display: none !important; }
  .fs-call-grid[data-mtab="hints"] .fs-call-left { flex: none; }
  .fs-call-grid[data-mtab="checklist"] .fs-call-panel { display: none !important; }
  .fs-call-grid[data-mtab="checklist"] .fs-call-left > *:not(.fs-call-checklist):not(:first-child) { display: none !important; }
  .fs-call-grid[data-mtab="checklist"] .fs-call-checklist { border-top: none; }
  .fs-call-panel { border-left: none !important; border-top: 1px solid var(--border); }
  .fs-auto-grid { grid-template-rows: 230px minmax(0, 1fr); }
  .fs-grid-2 { grid-template-columns: 1fr !important; }
  .fs-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .fs-stepper { flex-wrap: wrap; row-gap: 8px; }
}
@media (max-width: 760px) {
  .fs-login-split { flex-direction: column !important; }
}
@media (max-width: 720px) {
  .fs-inbox-grid { grid-template-columns: 1fr !important; grid-template-rows: 250px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .fs-grid-5, .fs-grid-4 { grid-template-columns: 1fr 1fr !important; }
  .fs-grid-3 { grid-template-columns: 1fr !important; }
}
@keyframes fsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes fsBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}