/* CallTranscribe — Design tokens & global styles */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Primary (purple, default) */
  --primary-50:  #f3f0ff;
  --primary-100: #e6e0ff;
  --primary-200: #cdc1ff;
  --primary-400: #8b73ff;
  --primary-500: #6346ff;
  --primary-600: #5530f5;
  --primary-700: #4421d4;
  --primary-grad: linear-gradient(135deg, #6346ff 0%, #8b6dff 100%);

  /* Surface */
  --bg:          #f6f7fb;
  --bg-deep:     #eef0f7;
  --surface:    #ffffff;
  --surface-2: #fafbfd;
  --stroke:    #e6ebf3;
  --stroke-strong: #d6dde8;

  /* Text */
  --text:       #0f1729;
  --text-2:     #3d4866;
  --text-3:     #6b7894;
  --text-4:     #9aa4b8;
  --text-inv:    #ffffff;

  /* Semantic */
  --success: #16a86b;
  --success-bg: #e6f7ee;
  --danger:  #e0395a;
  --danger-bg: #fdebef;
  --warn:    #d97a16;
  --warn-bg: #fef3e2;
  --info:    #1e7ad9;
  --info-bg: #e6f0fb;

  /* Speakers */
  --agent: #6346ff;
  --agent-bg: #efecff;
  --customer: #0a9da0;
  --customer-bg: #e2f5f5;

  /* Sentiment */
  --sent-pos: #16a86b;
  --sent-neg: #e0395a;
  --sent-neu: #8e96ab;

  /* Type scale */
  --fs-1: 12px;
  --fs-2: 13px;
  --fs-3: 14px;
  --fs-4: 16px;
  --fs-5: 18px;
  --fs-6: 22px;
  --fs-7: 28px;
  --fs-8: 36px;

  /* Spacing — comfortable default */
  --pad: 24px;
  --pad-sm: 16px;
  --gap: 16px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 41, 0.04);
  --shadow-md: 0 4px 14px rgba(15, 23, 41, 0.06);
  --shadow-lg: 0 12px 36px rgba(15, 23, 41, 0.10);
}

/* Color themes via [data-primary] */
[data-primary="blue"] {
  --primary-50:  #ecf3ff;
  --primary-100: #d8e6ff;
  --primary-200: #b6cdff;
  --primary-400: #5b8aff;
  --primary-500: #2563eb;
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --primary-grad: linear-gradient(135deg, #2563eb 0%, #5b8aff 100%);
  --agent: #2563eb;
  --agent-bg: #ecf3ff;
}
[data-primary="green"] {
  --primary-50:  #e8f7ee;
  --primary-100: #ceeed9;
  --primary-200: #9adcb6;
  --primary-400: #2cb37e;
  --primary-500: #0f9b62;
  --primary-600: #088053;
  --primary-700: #066441;
  --primary-grad: linear-gradient(135deg, #0f9b62 0%, #2cb37e 100%);
  --agent: #0f9b62;
  --agent-bg: #e8f7ee;
}
[data-primary="orange"] {
  --primary-50:  #fff1e6;
  --primary-100: #ffdec0;
  --primary-200: #ffbe85;
  --primary-400: #ff8a3a;
  --primary-500: #ed6611;
  --primary-600: #c8520b;
  --primary-700: #9c4209;
  --primary-grad: linear-gradient(135deg, #ed6611 0%, #ff8a3a 100%);
  --agent: #ed6611;
  --agent-bg: #fff1e6;
}

/* Density */
[data-density="compact"] {
  --pad: 16px;
  --pad-sm: 12px;
  --gap: 12px;
}
[data-density="spacious"] {
  --pad: 32px;
  --pad-sm: 22px;
  --gap: 22px;
}

/* Type scale knob */
[data-typescale="sm"] { --fs-3: 13px; --fs-4: 15px; --fs-5: 17px; --fs-6: 20px; --fs-7: 26px; --fs-8: 32px;}
[data-typescale="lg"] { --fs-3: 15px; --fs-4: 17px; --fs-5: 20px; --fs-6: 24px; --fs-7: 32px; --fs-8: 40px;}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: 'Heebo', -apple-system, system-ui, sans-serif;
  font-size: var(--fs-3);
  color: var(--text);
  background: var(--bg);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* English / numbers in Hebrew context */
.num, .en { font-family: 'Inter', sans-serif; direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.mono { font-family: 'JetBrains Mono', monospace; direction: ltr; unicode-bidi: isolate; }

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

/* Layout */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  background: var(--bg);
}
.main {
  flex: 1 1 auto;
  padding: 20px 24px 28px 24px;
  min-width: 0;
  overflow-x: hidden;
}

/* Sidebar */
.sidebar {
  flex: 0 0 220px;
  width: 220px;
  position: sticky;
  top: 12px;
  align-self: flex-start;
  height: calc(100vh - 24px);
  margin: 12px 12px 12px 0;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: 18px 12px 12px 12px;
  display: flex;
  flex-direction: column;
}
.sidebar__brand {
  padding: 4px 8px 16px 8px;
  border-bottom: 1px solid var(--stroke);
  margin-bottom: 12px;
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
}
/* Brand logo: anchor-right (RTL natural), capped height for the sidebar
   chrome. `object-fit: contain` keeps the wordmark crisp on hi-DPI and
   never letterboxes against the transparent PNG background. */
.sidebar__brand-logo {
  display: block;
  height: 34px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: right center;
  margin: 2px 0 4px;
}
/* Legacy h1 + dot kept as a fallback for any screen that hasn't migrated
   to the <img> yet — same visual rhythm. */
.sidebar__brand h1 { font-size: 17px; font-weight: 800; margin: 0; color: var(--text); letter-spacing: -0.01em; display: flex; gap: 8px; align-items: center; justify-content: flex-start; flex-direction: row-reverse;}
.sidebar__brand h1 .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary-grad); display: inline-block; box-shadow: 0 0 0 3px var(--primary-50); }
.sidebar__brand p { margin: 4px 0 0; color: var(--text-3); font-size: 11px; }
.sidebar__nav { flex: 1; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.sidebar__nav::-webkit-scrollbar { width: 4px;}
.sidebar__nav::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 2px;}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: right;
  font-weight: 500;
  transition: background 120ms;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active {
  background: var(--primary-grad);
  color: white;
  box-shadow: 0 6px 18px -6px var(--primary-500);
  font-weight: 600;
}
.nav-item.active .nav-icon { color: white; }
.nav-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center;}
.nav-item .badge {
  margin-right: auto;
  background: var(--danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  min-width: 20px;
  text-align: center;
}
.nav-item.active .badge { background: rgba(255,255,255,0.25); }

.sidebar__user {
  border-top: 1px solid var(--stroke);
  padding-top: 12px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
  text-align: right;
}
.sidebar__user .avatar { width: 30px; height: 30px; font-size: 11px;}
.sidebar__user-info b { font-size: 12px;}
.sidebar__user-info span { font-size: 10px;}
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-grad); color: white; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px;}
.avatar--sm { width: 28px; height: 28px; font-size: 12px; }
.avatar--lg { width: 56px; height: 56px; font-size: 18px;}
.sidebar__user-info { flex: 1; min-width: 0; }
.sidebar__user-info b { display: block; font-size: 14px; color: var(--text); font-weight: 600;}
.sidebar__user-info span { font-size: 12px; color: var(--text-3);}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.topbar h2 {
  font-size: var(--fs-7);
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--text);
}
.topbar h2 .sub { color: var(--text-3); font-weight: 400; font-size: var(--fs-5); margin-right: 8px; }
/* The spacer pushes itself to the end of the flex line via `order:99`, so
   actions sit immediately next to the title rather than at the opposite
   edge. In an RTL document this puts: [title][actions]——————[spacer]
   → both title and date/dept filters anchor on the right side. */
.topbar__spacer  { flex: 1; order: 99; }
.topbar__actions { display: flex; gap: 10px; align-items: center; flex-direction: row-reverse;}

/* ── Department picker (rendered inside TopBar.actions) ────────────────
   Pill-shaped chip with an icon, a static label, a thin divider, the
   actual <select>, and a subtle "active selection" dot when scoped to a
   single department. The whole pill responds to hover with the same
   primary-tinted surface used elsewhere in the app so it visually
   belongs in the toolbar. */
.ct-dept-picker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 6px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 13px;
  transition: border-color 150ms, background 150ms, box-shadow 150ms;
  height: 34px;
}
.ct-dept-picker:hover {
  border-color: var(--primary-300, #c4b6ff);
  background: var(--surface-2);
}
.ct-dept-picker:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.ct-dept-picker > svg { color: var(--primary-500); flex-shrink: 0; }
.ct-dept-picker__label {
  color: var(--text-3); font-weight: 600; letter-spacing: 0.01em;
}
.ct-dept-picker__divider {
  width: 1px; height: 16px; background: var(--stroke);
  margin: 0 2px;
}
.ct-dept-picker__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  border: 0; background: transparent;
  color: var(--text); font-weight: 600; font-size: 13px;
  cursor: pointer;
  padding: 4px 22px 4px 4px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%236346ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: left 4px center;
  background-size: 10px 10px;
  font-family: inherit;
  min-width: 130px;
}
.ct-dept-picker__select:focus { outline: none; }
.ct-dept-picker__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-500);
  box-shadow: 0 0 0 2px var(--primary-50);
  flex-shrink: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 120ms;
  white-space: nowrap;
  flex-direction: row-reverse;
}
.btn:hover { border-color: var(--stroke-strong); background: var(--surface-2); }
.btn--primary {
  background: var(--primary-grad);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 14px -4px var(--primary-500);
  font-weight: 600;
}
.btn--primary:hover { filter: brightness(1.05); background: var(--primary-grad); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: var(--danger); border-color: transparent; color: white;}
.btn--danger:hover { background: #c12d4d;}
.btn--sm { padding: 6px 12px; font-size: 13px; border-radius: var(--r-sm);}
.btn--icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
.btn--icon.btn--sm { width: 30px; height: 30px;}

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-lg);
  padding: var(--pad);
}
.card__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.card__head h3 { margin: 0; font-size: var(--fs-5); font-weight: 600; color: var(--text); letter-spacing: -0.01em;}
.card__head p { margin: 4px 0 0; color: var(--text-3); font-size: 13px;}
.card__head .spacer { flex: 1; }

/* Stats grid (dashboard) */
.stat {
  position: relative;
  padding: 22px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--stroke);
}
.stat__label { font-size: 13px; color: var(--text-3); font-weight: 500;}
.stat__value { font-size: 30px; font-weight: 700; color: var(--text); margin-top: 10px; letter-spacing: -0.02em; line-height: 1.4; padding-top: 2px;}
.stat__delta { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 600; margin-top: 12px; padding: 3px 8px; border-radius: var(--r-pill); flex-direction: row-reverse;}
.stat__delta.up { background: var(--success-bg); color: var(--success);}
.stat__delta.down { background: var(--danger-bg); color: var(--danger);}
.stat__icon { position: absolute; top: 18px; inset-inline-end: 18px; width: 38px; height: 38px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; }
.stat { text-align: right; }
.stat__label { display: block; padding-inline-end: 50px; }

/* Chips & tags */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--stroke);flex-direction: row-reverse;}
.chip--success { background: var(--success-bg); color: var(--success); border-color: transparent;}
.chip--danger { background: var(--danger-bg); color: var(--danger); border-color: transparent;}
.chip--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent;}
.chip--info { background: var(--info-bg); color: var(--info); border-color: transparent;}
.chip--primary { background: var(--primary-50); color: var(--primary-700); border-color: transparent;}
.chip--solid { background: var(--text); color: white; border-color: transparent;}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0;}

/* Search input */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-md);
  padding: 9px 14px;
  font-size: 14px;
  color: var(--text-2);
  min-width: 280px;
  flex-direction: row-reverse;
}
.search input { border: 0; background: transparent; outline: none; flex: 1; font-size: 14px; color: var(--text); text-align: right; }
.search input::placeholder { color: var(--text-4); }

/* Tables */
.table { width: 100%; border-collapse: collapse; table-layout: auto; }
.table th, .table td {
  padding: 14px 16px;
  text-align: right;
  font-size: 14px;
  border-bottom: 1px solid var(--stroke);
  vertical-align: middle;
  white-space: nowrap;       /* prevents wrap that visually breaks alignment */
}
/* Long ULID ids would otherwise dominate the layout and squeeze every
   other column — clip to one line with an ellipsis and keep things
   honest. The full id is still visible on hover via the cell's title. */
.table td.num,
.table td:first-child {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table th {
  font-weight: 500;
  color: var(--text-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
}
.table tbody tr { cursor: pointer; transition: background 80ms;}
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.selected { background: var(--primary-50);}
.table tbody tr:last-child td { border-bottom: 0;}

/* Severity / sentiment dot */
.sent-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block;}
.sent-dot.pos { background: var(--sent-pos);}
.sent-dot.neg { background: var(--sent-neg);}
.sent-dot.neu { background: var(--sent-neu);}

/* Page sections */
.section-title { font-size: var(--fs-6); font-weight: 700; margin: 0 0 16px 0; letter-spacing: -0.01em;}

/* Utility */
.row { display: flex; gap: var(--gap); flex-direction: row-reverse;}
.col { display: flex; flex-direction: column; gap: var(--gap);}
.flex1 { flex: 1; }
.muted { color: var(--text-3); }
.tnum { font-variant-numeric: tabular-nums; }
.divider { height: 1px; background: var(--stroke); margin: 16px 0;}

/* DLP redaction */
.dlp {
  display: inline-flex;
  background: repeating-linear-gradient(135deg, #ffe6c8 0 6px, #ffdcb0 6px 12px);
  color: #844209;
  padding: 1px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border: 1px dashed #d97a16;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.92em;
  direction: ltr;
  unicode-bidi: isolate;
}
.dlp::before { content: '🔒 '; font-size: 0.85em;}

/* Speaker bubble — `content-visibility: auto` is the single biggest win
   for long transcripts: it tells the browser to skip layout + paint for
   bubbles outside the viewport. Combined with `contain-intrinsic-size`
   (a height hint so the scrollbar still behaves), a 200-segment call
   renders in a couple of frames instead of hundreds of ms. */
.bubble {
  display: flex; gap: 12px; padding: 14px;
  border-radius: var(--r-lg);
  flex-direction: row-reverse;
  content-visibility: auto;
  contain-intrinsic-size: 0 110px;
}
.bubble--agent { background: var(--agent-bg); }
.bubble--customer { background: var(--customer-bg);}
/* Defense-in-depth — when a segment somehow reaches the UI with an
   `unknown` speaker (e.g. legacy data), give it a muted grey style
   instead of a colourless transparent bubble that looks broken. The
   pipeline already pins every segment to agent/customer, so this
   should never render in current code paths. */
.bubble--unknown { background: var(--surface-2);}
.bubble__avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: white;}
.bubble--agent .bubble__avatar { background: var(--agent);}
.bubble--customer .bubble__avatar { background: var(--customer);}
.bubble--unknown .bubble__avatar { background: var(--text-3);}
.bubble__body { flex: 1; min-width: 0;}
.bubble__head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; flex-direction: row-reverse;}
.bubble__name { font-weight: 600; font-size: 14px;}
.bubble--agent .bubble__name { color: var(--agent);}
.bubble--customer .bubble__name { color: var(--customer);}
.bubble--unknown .bubble__name { color: var(--text-3);}
.bubble__time { font-size: 12px; color: var(--text-3); font-family: 'Inter', sans-serif;}
.bubble__text { font-size: 15px; line-height: 1.65; color: var(--text);}
.bubble__text mark { background: #fff7d4; padding: 1px 3px; border-radius: 3px;}
.bubble__meta { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-size: 12px; color: var(--text-3); flex-direction: row-reverse;}

/* Confidence bar */
.confidence { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); flex-direction: row-reverse;}
.confidence__bar { width: 48px; height: 4px; border-radius: 2px; background: var(--stroke); overflow: hidden;}
.confidence__bar > span { display: block; height: 100%; background: var(--success); }
.confidence__bar.low > span { background: var(--warn);}

/* Waveform */
.waveform { display: flex; gap: 2px; align-items: center; height: 64px; padding: 0 4px;}
.waveform__bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--stroke-strong); transition: background 80ms;}
.waveform__bar.played { background: var(--primary-500);}
.waveform__bar.cursor { background: var(--primary-700) !important; box-shadow: 0 0 0 2px var(--primary-100);}

/* Audio player */
/* Base player layout — no visual chrome. The host card supplies the
   border / background; this rule is purely about positioning the
   controls. In an RTL document, default `flex: row` orders the
   children right-to-left (play first → rightmost, speed last → leftmost). */
.player {
  display: flex; align-items: center; gap: 14px;
}
.player--polished { /* reserved for any future visual tweaks */ }

/* Logical pairs: play + elapsed time on one side, total time + speed on
   the other. Each pair sits in its own pill so the eye reads them as a
   single control unit instead of three lonely items adrift. */
.player__group {
  display: inline-flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.player__group--start { padding-inline-end: 4px; }
.player__group--end   { padding-inline-start: 4px; }

.player__btn {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--primary-grad); color: white;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px -6px var(--primary-500), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 120ms, box-shadow 120ms, filter 120ms;
  flex-shrink: 0;
}
.player__btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 22px -8px var(--primary-500); filter: brightness(1.06); }
.player__btn:active:not(:disabled) { transform: translateY(0); }
.player__btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.player__time {
  font-size: 13px;
  font-weight: 600;
  font-feature-settings: 'tnum';
  letter-spacing: 0.01em;
  color: var(--text-3);
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.player__time--now    { color: var(--primary-600, var(--primary-500)); }
.player__time--total  { color: var(--text-2); }

.player__speed {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text-2);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.player__speed:hover { border-color: var(--primary-500); background: var(--primary-50); color: var(--primary-600, var(--primary-500)); }

.player__wave { flex: 1; min-width: 0; overflow: hidden; cursor: pointer; }

/* Sentiment timeline */
.sentiment-timeline { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--stroke);}
.sentiment-timeline > span { height: 100%;}
.sentiment-timeline > .pos { background: var(--sent-pos);}
.sentiment-timeline > .neg { background: var(--sent-neg);}
.sentiment-timeline > .neu { background: var(--sent-neu);}

/* Tabs */
/* In an RTL doc, default `flex: row` already orders tabs right-to-left
   (תמלול first → rightmost, סיכום last → leftmost). */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--stroke); margin-bottom: 20px;}
.tab { padding: 10px 16px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--text-3); font-size: 14px; font-weight: 500; cursor: pointer; margin-bottom: -1px;}
.tab.active { color: var(--primary-600); border-bottom-color: var(--primary-500); font-weight: 600;}
.tab:hover { color: var(--text-2);}

/* Toggle switch */
.switch { position: relative; width: 40px; height: 22px; background: var(--stroke-strong); border-radius: 11px; cursor: pointer; transition: background 120ms; border: 0; padding: 0;}
.switch.on { background: var(--primary-500);}
.switch::before { content: ''; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: right 120ms;}
.switch.on::before { right: 20px;}

/* Form */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 500; color: var(--text-2);}
.field input, .field select, .field textarea {
  padding: 10px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--stroke);
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  outline: none;
  transition: border-color 120ms;
  text-align: right;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50);}

/* Focus ring for inline-styled inputs (tag/mention editors) — the inline
   styles can't express :focus, so this class adds the house focus affordance
   without overriding their existing inline border/padding. */
.ct-input:focus { border-color: var(--primary-400); box-shadow: 0 0 0 3px var(--primary-50); outline: none; }

/* Layout variants for transcription page */
[data-tx-layout="default"] .tx-grid { grid-template-columns: 1.6fr 1fr; }
[data-tx-layout="wide"] .tx-grid    { grid-template-columns: 2.4fr 1fr; }
[data-tx-layout="focus"] .tx-grid   { grid-template-columns: 1fr; }
[data-tx-layout="focus"] .tx-side   { display: none;}

/* Scrollable area */
.scroll-area { overflow-y: auto; }
.scroll-area::-webkit-scrollbar { width: 6px;}
.scroll-area::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: 3px;}

/* Animation */
@keyframes slideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0);} }
.fade-in { animation: slideIn 200ms ease-out;}

@keyframes pulse { 0%,100% { opacity: 1;} 50% { opacity: 0.4;} }
.pulse { animation: pulse 1.6s ease-in-out infinite;}

@keyframes recordPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224, 57, 90, 0.5);} 50% { box-shadow: 0 0 0 10px rgba(224, 57, 90, 0);} }
.rec { animation: recordPulse 1.6s ease-out infinite;}

@keyframes pulse-dot { 0%,100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.55);} 50% { box-shadow: 0 0 0 6px rgba(34,197,94,0);} }
@keyframes ct-pulse { 0% { box-shadow: 0 0 0 0 rgba(99,102,241,0.7);} 70% { box-shadow: 0 0 0 8px rgba(99,102,241,0);} 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0);} }

/* Live cursor */
.typing-cursor::after { content: '▎'; color: var(--primary-500); animation: pulse 800ms infinite; margin-right: 2px;}

/* ────────────────────────────────────────────────────────────────
   ─── Login screen + UserChip (Firebase Auth gate)
   ──────────────────────────────────────────────────────────────── */

.ct-login {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 80% 10%, rgba(99,70,255,0.12), transparent 60%),
    radial-gradient(900px 500px at 10% 90%, rgba(139,109,255,0.10), transparent 60%),
    var(--bg);
  z-index: 9999;
  padding: 24px;
}
.ct-login__card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-xl);
  padding: 40px 36px 32px;
  box-shadow: var(--shadow-lg);
  text-align: right;
}
/* Brand block — centered wordmark at the top of the card. A subtle
   divider beneath it separates the logo from the welcome copy without
   adding clutter. */
.ct-login__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--stroke);
}
.ct-login__brand--stacked {
  gap: 8px;
}
.ct-login__brand--stacked p {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
}
.ct-login__logo {
  display: block;
  height: 52px;
  max-width: 260px;
  width: auto;
  object-fit: contain;
  object-position: center;
}
.ct-login__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--primary-grad);
  box-shadow: 0 0 0 4px var(--primary-50);
  display: inline-block;
}
.ct-login__card h1 {
  font-size: 26px; font-weight: 700;
  margin: 0 0 6px; letter-spacing: -0.02em;
  color: var(--text);
  text-align: right;
}
.ct-login__sub {
  margin: 0 0 24px;
  color: var(--text-3);
  font-size: 14px;
  text-align: right;
  line-height: 1.55;
}
.ct-login__form {
  display: flex; flex-direction: column; gap: 16px;
}
.ct-login__form label {
  display: flex; flex-direction: column;
  font-size: 13px; color: var(--text-2); font-weight: 600; gap: 8px;
  text-align: right;
}
.ct-login__form input {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: inherit;
  text-align: right;
  transition: border-color 120ms, box-shadow 120ms, background 120ms;
}
.ct-login__form input::placeholder { color: var(--text-3); opacity: 0.7; }
.ct-login__form input:hover { border-color: var(--stroke-strong); }
.ct-login__form input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100, rgba(99,70,255,0.15));
}
/* Suppress the browser's blue/yellow autofill wash — keeps the card
   visually clean when Chrome restores saved credentials. */
.ct-login__form input:-webkit-autofill,
.ct-login__form input:-webkit-autofill:hover,
.ct-login__form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset;
  caret-color: var(--text);
  transition: background-color 9999s ease-in-out 0s;
}
/* RTL password row: input fills the line; toggle pill is the LAST DOM
   child so default flex-row in an RTL doc anchors it to the LEFT (away
   from where the text starts). Old layout had the toggle in the way of
   the field, which felt off. */
.ct-login__pwd-row {
  display: flex; gap: 8px; align-items: stretch;
}
.ct-login__pwd-row input { flex: 1; }
.ct-login__pwd-toggle {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: 10px;
  padding: 0 16px;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  min-width: 64px;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.ct-login__pwd-toggle:hover { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-700, var(--primary-500)); }
.ct-login__error {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: #94203a;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
}
.ct-login__submit {
  background: var(--primary-grad);
  color: white;
  border: 0;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  margin-top: 10px;
  font-family: inherit;
  box-shadow: 0 8px 22px -6px var(--primary-500), inset 0 1px 0 rgba(255,255,255,0.18);
  transition: transform 120ms, filter 120ms, box-shadow 120ms;
  letter-spacing: 0.01em;
}
.ct-login__submit:hover { filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 12px 28px -8px var(--primary-500), inset 0 1px 0 rgba(255,255,255,0.22); }
.ct-login__submit:active { transform: translateY(0); }
.ct-login__submit:disabled { opacity: .55; cursor: not-allowed; filter: none; transform: none; box-shadow: none; }
.ct-login__foot {
  margin: 24px 0 0;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.ct-login__foot a, .ct-login__foot button { color: var(--primary-600, var(--primary-500)); }
.ct-login__spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--primary-100);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: ct-login-spin 800ms linear infinite;
}
@keyframes ct-login-spin { to { transform: rotate(360deg); } }

/* ── UserChip — used inside the existing shell ────────────────── */
.ct-userchip {
  display: inline-flex; align-items: center; gap: 10px;
  flex-direction: row-reverse;
  padding: 6px 10px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.ct-userchip__avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--primary-grad);
  color: white;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.ct-userchip__info {
  display: flex; flex-direction: column;
  line-height: 1.2;
  font-size: 12px;
  min-width: 0;
}
.ct-userchip__info b {
  font-size: 13px; font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 160px;
}
.ct-userchip__info span { color: var(--text-3); }
.ct-userchip__logout {
  background: transparent;
  border: 1px solid var(--stroke);
  border-radius: var(--r-sm);
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  font-family: inherit;
  margin-right: 4px;
}
.ct-userchip__logout:hover {
  background: var(--danger-bg); border-color: var(--danger); color: var(--danger);
}

/* ── Data-source chip (now docked at TOP-LEFT, well clear of the
 *    right-side sidebar). Previously top: 14px / left: 18px overlapped
 *    the sticky sidebar's brand area on viewports where the sidebar's
 *    real width changed (responsive collapses). Keep it tight to the
 *    edge so it never bleeds into the main content either. ─────────── */
.ct-source-chip {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 9000;
  display: inline-flex; align-items: center; gap: 8px;
  flex-direction: row-reverse;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  box-shadow: var(--shadow-sm);
}
/* On viewports where the sidebar collapses to a bottom rail, hide the
   chip entirely — the same info now lives in the user menu. */
@media (max-width: 899px) {
  .ct-source-chip { display: none !important; }
}
.ct-source-chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(22, 168, 107, 0.16);
  display: inline-block;
  animation: ct-chip-pulse 1.6s ease-in-out infinite;
}
.ct-source-chip__dot--warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(217, 122, 22, 0.16); }
.ct-source-chip--live  { border-color: rgba(22, 168, 107, 0.35); }
.ct-source-chip--mock  { border-color: rgba(217, 122, 22, 0.35); }
@keyframes ct-chip-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18); opacity: .75; }
}

/* ── Empty-state overlay (live mode, no calls yet) ────────────── */
.ct-empty-tenant {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 70vh;
  padding: 40px 24px;
  color: var(--text);
}
.ct-empty-tenant__icon {
  font-size: 64px;
  margin-bottom: 14px;
  filter: grayscale(0.2);
}
.ct-empty-tenant h2 {
  font-size: 24px; font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
  letter-spacing: -0.02em;
}
.ct-empty-tenant p {
  max-width: 540px;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  margin: 6px 0;
}
.ct-empty-tenant code {
  background: var(--bg-deep);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--primary-600);
  font-weight: 500;
}
.ct-empty-tenant__err {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  color: #94203a;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  max-width: 480px;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE — viewport-driven layout
   ─────────────────────────────────────────────────────────────────────────
   Breakpoints:
     XXL ≥1920px  — ultra-wide desktops: cap main content width, center it
     XL  ≥1440px  — large desktops: default layout
     LG  1200-1439 — standard laptops: tighten paddings
     MD  900-1199  — small laptops: narrow sidebar, smaller font
     SM  600-899   — tablets: collapse sidebar to icon-only rail
     XS  <600px    — phones: stack everything, hide sidebar nav labels
   ───────────────────────────────────────────────────────────────────────── */

/* XXL — center content on ultra-wide monitors so lines don't get unreadable */
@media (min-width: 1920px) {
  .main {
    padding: 28px 48px 36px 48px;
  }
  .main > * {
    max-width: 1760px;
    margin-inline: auto;
  }
}

/* LG — tighten padding so KPIs fit without overflow on 1366×768 laptops */
@media (max-width: 1439px) and (min-width: 1200px) {
  .main { padding: 16px 18px 24px 18px; }
  .stat__value { font-size: 26px; }
}

/* MD — sidebar gets narrower, font scales down */
@media (max-width: 1199px) and (min-width: 900px) {
  .sidebar { flex: 0 0 180px; width: 180px; }
  .main { padding: 14px 16px 20px 16px; }
  .stat__value { font-size: 22px; }
  /* 4-column KPI grids reflow to 2 columns */
  .stat-grid-4,
  div[style*="repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  div[style*="repeat(5, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
}

/* SM — sidebar becomes an icon-rail; main content takes the rest */
@media (max-width: 899px) {
  .app { flex-direction: column-reverse; }
  .sidebar {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    position: sticky;
    bottom: 0;
    top: auto;
    margin: 0;
    border-radius: 0;
    flex-direction: row;
    padding: 8px;
    z-index: 100;
  }
  .sidebar__brand,
  .sidebar__user { display: none; }
  .sidebar__nav { flex-direction: row; gap: 2px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .sidebar__nav > button { flex: 0 0 auto; padding: 6px 10px !important; font-size: 11px; }
  .sidebar__nav .nav-icon { width: 14px; height: 14px; }
  .nav-label { display: none; }   /* labels hidden on phones; icon-only */
  .main { padding: 12px; }

  /* Any grid > 2 cols collapses to 2 */
  div[style*="repeat(2, 1fr)"],
  div[style*="repeat(3, 1fr)"],
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(5, 1fr)"],
  div[style*="repeat(6, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
  div[style*="1.5fr 1fr"],
  div[style*="2fr 1fr"],
  div[style*="auto 1fr"] { grid-template-columns: 1fr !important; }

  .stat__value { font-size: 20px; }
  .card__head h3 { font-size: 14px; }
  .table { font-size: 11px; }
  .table th, .table td { padding: 6px 8px; }
}

/* XS — phones */
@media (max-width: 600px) {
  .main { padding: 8px; }
  div[style*="repeat(2, 1fr)"],
  div[style*="repeat(3, 1fr)"],
  div[style*="repeat(4, 1fr)"],
  div[style*="repeat(5, 1fr)"],
  div[style*="repeat(6, 1fr)"] { grid-template-columns: 1fr !important; }
  .stat__value { font-size: 18px; }
  .card { padding: 12px; }
  .card__head h3 { font-size: 13px; }
  .card__head p { font-size: 10px; }

  /* Make the top bar wrap so the title doesn't overflow */
  .topbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .topbar h2 { font-size: 16px; }
  .topbar > * { flex-basis: auto; }

  /* Transcription bubbles fill width */
  .bubble {
    max-width: 95% !important;
  }
}

/* Common: prevent any element from overflowing horizontally on small viewports */
@media (max-width: 1199px) {
  svg[viewBox] {
    max-width: 100%;
    height: auto;
  }
  pre, code {
    word-break: break-word;
    white-space: pre-wrap;
  }
}

/* Dashboard — volume-chart drill-down modal table: must fit its container
   with no horizontal scroll. Overrides the global .table nowrap so columns
   may wrap/shrink instead of overflowing. */
.table--fit { width: 100%; }
.table--fit th, .table--fit td { white-space: normal; overflow-wrap: anywhere; }