/* ═══════════════════════════════════════════════════════════════════════════
   theme.css — shared design system.

   Direction: Clean, professional, minimal light theme.
   Optimized for high readability, flat clean surfaces, and soft contrast.
   Loaded AFTER each page's inline <style>, so these variables and rules win.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Clean light background surface family */
  --bg: #F8FAFC;
  /* Slate 50 */
  --bg2: #F1F5F9;
  /* Slate 100 */
  --card: #FFFFFF;
  /* Pure white */
  --border: #E2E8F0;
  /* Slate 200 */
  --border2: #F1F5F9;
  /* Slate 100 */

  /* Dark slate typography colors for high contrast and readability */
  --text: #0F172A;
  /* Slate 900 */
  --text2: #334155;
  /* Slate 700 — darkened for stronger contrast */
  --text3: #475569;
  /* Slate 600 — darkened for stronger contrast */
  --text4: #64748B;
  /* Slate 500 — darkened so muted text still passes AA */

  /* Professional indigo accents */
  --accent: #4F46E5;
  /* Primary Indigo-600 */
  --accent2: #EEF2FF;
  /* Indigo Tint-50 */
  --accent3: #4F46E5;
  --magenta: #db2777;

  /* Semantic colors tuned for light background */
  --green: #16a34a;
  /* Green 600 */
  --red: #DC2626;
  /* Red 600 */
  --yellow: #FEFCE8;
  /* Soft yellow warning bg */
  --orange: #ea580c;
  --cyan: #0891b2;

  --radius: 16px;
  /* Large container radius */
  --radius-md: 12px;
  /* Medium element radius */
  --radius-sm: 6px;
  /* Small tag radius */
  --shadow-soft: 0 4px 20px -4px rgba(15, 23, 42, 0.05), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-glow: 0 0 0 1px rgba(79, 70, 229, 0.04), 0 4px 12px -2px rgba(79, 70, 229, 0.08);
}

/* Base Body Styles */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Header styling */
header {
  background: var(--card) !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}

h1 b {
  color: var(--accent) !important;
}

/* Typography overrides for cleaner, less bold, and smaller headings */
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong,
th,
td {
  letter-spacing: -0.01em;
}

h1 {
  font-size: 18px !important;
  font-weight: 600 !important;
}

h2,
.card h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.mode-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.mode-desc {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--text3) !important;
  line-height: 1.4 !important;
}

.etags {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 16px !important;
}

.etag-l {
  font-size: 11px !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
  margin-right: 4px !important;
  display: inline-block !important;
  align-self: center !important;
}

.col-h,
.sec-h,
.ch-title {
  /* font-size: 12px !important; */
  font-weight: 600 !important;
  color: var(--text2) !important;
}

/* Large numbers overrides: smaller and lighter weight */
.big-sc {
  font-size: 36px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.t-num {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.kpi-v {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: var(--text);
}

.ls-val {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

.ls-big .ls-val {
  font-size: 24px !important;
  font-weight: 600 !important;
}

.live-timer {
  font-size: 22px !important;
  font-weight: 600 !important;
}

.live-status,
.live-langtag,
.live-phase {
  font-weight: 600 !important;
}

.assist-title {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.assist-btn {
  font-weight: 500 !important;
}

.assist-conf {
  font-weight: 600 !important;
}

.ab-text {
  font-weight: 400 !important;
}

.mood-val,
.flag-sev,
.sc-badge,
.pill-v,
.rt-h,
.sc-v,
.mp-v,
.tl-m,
.imp-n,
.imp-a,
.ex-l,
.q-score,
.src-badge,
.type-tag {
  font-weight: 600 !important;
}

.an-dot {
  font-weight: 500 !important;
}

.cost-v {
  font-weight: 600 !important;
}

.ex-name {
  font-weight: 600 !important;
}

.score-tag {
  font-weight: 600 !important;
}

.wpill {
  font-weight: 600 !important;
}

.advice-h {
  font-weight: 600 !important;
}

.pair-name {
  font-weight: 600 !important;
}

label,
.setup-box label,
.model-pick-l,
.pill-l {
  font-weight: 600 !important;
  color: var(--text3) !important;
}

/* Cards & containers */
.card,
.kpi,
.ch-w,
.rt-card,
.t-box,
.setup-box,
.lib-item,
.q-item,
.rec-row {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: none !important;
  padding: 16px !important;
  /* slightly smaller padding for simplicity */
}

.setup-box {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}

.dz {
  background: var(--bg) !important;
  border: 2px dashed var(--border2) !important;
  border-radius: var(--radius) !important;
}

.dz:hover {
  border-color: var(--accent) !important;
}

/* Primary Button Overrides - Solid flat style instead of glowing gradient */
.btn-p,
.btn {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: none !important;
  padding: 10px 20px !important;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out !important;
}

.btn-p:hover:not(:disabled),
.btn:hover:not(:disabled) {
  background: #4338ca !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: none !important;
}

.btn-p:disabled,
.btn:disabled {
  background: var(--border) !important;
  border-color: var(--border) !important;
  color: var(--text4) !important;
  cursor: not-allowed !important;
}

/* Live Button overrides aligned with Indigo theme */
.btn-live {
  background: var(--accent) !important;
  border: 1px solid var(--accent) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 8px !important;
  padding: 12px 28px !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.1) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-live:hover:not(:disabled) {
  background: #4338ca !important;
  border-color: #4338ca !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2) !important;
}

.btn-live:active {
  transform: translateY(0) !important;
}

/* Secondary & Ghost Button Overrides */
.btn-g,
.btn-s,
.chip-btn,
.mini-btn,
.mini-btn.ghost {
  background: var(--card) !important;
  color: var(--text2) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
}

.btn-g:hover:not(:disabled),
.btn-s:hover:not(:disabled),
.chip-btn:hover,
.mini-btn:hover {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border-color: var(--border2) !important;
}

/* Styled red logout button */
.logout-btn {
  background: var(--card) !important;
  color: var(--red) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  border: 1px solid var(--red) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
}

.logout-btn:hover {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* End call button styling */
.btn-end {
  background: #fef2f2 !important;
  color: var(--red) !important;
  border-color: #fca5a5 !important;
}

.btn-end:hover:not(:disabled) {
  background: #fee2e2 !important;
}

/* Navigation Tabs Layout */
.tabs {
  display: flex !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
  flex-wrap: wrap !important;
}

/* Mode bar cards & navigation tab overrides */
.mode-card,
.tab,
.tab-b {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text2) !important;
  padding: 10px 18px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  outline: none !important;
  transition: all 0.15s ease-in-out !important;
}

.mode-card.active,
.tab.active,
.tab-b.on {
  border-color: var(--accent) !important;
  background: rgba(79, 70, 229, 0.05) !important;
  color: var(--accent) !important;
}

.mode-card:hover,
.tab:hover,
.tab-b:hover {
  border-color: var(--border2) !important;
  background: var(--bg2) !important;
}

.mode-card.active:hover,
.tab.active:hover,
.tab-b.on:hover {
  background: rgba(79, 70, 229, 0.05) !important;
  border-color: var(--accent) !important;
}

.tab svg,
.tab-b svg {
  stroke: var(--text3) !important;
  fill: none !important;
  transition: stroke 0.15s ease-in-out !important;
}

.tab.active svg,
.tab-b.on svg {
  stroke: var(--accent) !important;
}

.tab:hover:not(.active) svg,
.tab-b:hover:not(.on) svg {
  stroke: var(--text2) !important;
}

/* Badge (Chips) styling */
.badge {
  background: rgba(79, 70, 229, 0.08) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(79, 70, 229, 0.15) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-sm) !important;
}

/* Badge and tag element radii */
.badge,
.src-badge,
.type-tag,
.etag,
.live-langtag,
.live-phase,
.sc-badge {
  border-radius: var(--radius-sm) !important;
}

/* User avatar and info chip styling */
.user-chip .av,
.ex-av {
  background: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.spinner {
  border: 3px solid var(--border) !important;
  border-top-color: var(--accent) !important;
}

/* Form controls (select, input, textarea) */
select,
textarea,
input,
select.lang-select,
select.exec-select {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.15s ease-in-out !important;
}

select:focus,
textarea:focus,
input:focus,
select.lang-select:focus,
select.exec-select:focus {
  border-color: var(--accent) !important;
}

.model-pick select {
  padding: 5px 10px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}

/* Switches styling */
.sw {
  background: var(--border2) !important;
  border-color: var(--border2) !important;
  height: 20px !important;
  width: 38px !important;
}

.sw.on {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}

.sw i {
  height: 14px !important;
  width: 14px !important;
  top: 2px !important;
  left: 2px !important;
}

.sw.on i {
  left: 20px !important;
}

/* Scrollbar customization */
*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-thumb {
  background: var(--border2) !important;
  border-radius: 4px !important;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--text4) !important;
}

*::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Flags panel and severity indicators */
.flags-panel {
  background: var(--bg) !important;
  border: 1px solid var(--border) !important;
}

.flag-item.critical {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #991b1b !important;
}

.flag-item.warning {
  background: var(--yellow) !important;
  border: 1px solid #fde047 !important;
  color: #854d0e !important;
}

.flag-item.info {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e40af !important;
}

.flag-sev.critical {
  color: #dc2626 !important;
}

.flag-sev.warning {
  color: #ca8a04 !important;
}

.flag-sev.info {
  color: var(--accent) !important;
}

.flag-msg {
  color: var(--text) !important;
  font-weight: 500 !important;
}

.flag-suggest {
  color: var(--text3) !important;
}

/* Agent Assist Panels and suggested chat text styling */
.assist-wrap {
  background: #f0fdf4 !important;
  /* Soft green tint */
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

.assist-title {
  color: #166534 !important;
  font-weight: 600 !important;
}

.ab {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft) !important;
}

.ab.latest {
  border-color: #86efac !important;
}

.ab-text {
  color: var(--text) !important;
  font-weight: 400 !important;
}

.ab-meta span {
  font-weight: 500 !important;
}

/* Live visualization audio elements */
.live-viz {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
}

.viz-bar {
  background: var(--accent) !important;
}

/* Live transcript text styles */
.live-transcript {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}

.lt-line.s1 {
  background: var(--bg2) !important;
  border-left-color: var(--accent) !important;
}

.lt-line.s2 {
  background: rgba(219, 39, 119, .06) !important;
  border-left: 3px solid var(--magenta) !important;
}

/* Tables styling */
table {
  color: var(--text) !important;
}

th {
  border-bottom: 1px solid var(--border) !important;
  color: var(--text3) !important;
  font-weight: 500 !important;
}

td {
  border-bottom: 1px solid var(--border) !important;
}

tr:hover td {
  background: var(--bg2) !important;
}

/* Error panels */
.err {
  background: #fef2f2 !important;
  border: 1px solid #fca5a5 !important;
  color: #991b1b !important;
}

/* Tips and downloads styling */
.live-tips,
.rec-dl {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

.str-box {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: 20px !important;
  color: var(--text) !important;
  margin-top: 16px !important;
}

.tip-item {
  color: #166534 !important;
}

.rec-dl a {
  color: #166534 !important;
  border: 1px solid #86efac !important;
  background: #ffffff !important;
}

.rec-dl a:hover {
  background: #f0fdf4 !important;
}

/* Custom font resets and adjustments */
pre,
code {
  background: var(--bg2) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border) !important;
}

/* Live dot indicator */
.live-dot {
  background: var(--red) !important;
}

.live-dot.idle {
  background: var(--text4) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR LAYOUT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */
.app-layout {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP BRAND HEADER STYLE SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */
.app-header {
  background: var(--card) !important;
  border-bottom: 1px solid var(--border) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

.header-container {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 10px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.header-brand .logo-icon-svg {
  transition: transform 0.25s ease !important;
}

.header-brand:hover .logo-icon-svg {
  transform: rotate(-10deg) scale(1.05) !important;
}

.header-brand .brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.header-brand .brand-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  line-height: 1.2 !important;
}

.header-brand .brand-title b {
  color: var(--accent) !important;
}

.header-brand .brand-sub {
  font-size: 10px !important;
  color: var(--text3) !important;
  line-height: 1.2 !important;
}

.header-controls {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.model-pick {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
}

.model-pick-l {
  font-size: 9px !important;
  font-weight: 600 !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.model-pick select {
  padding: 5px 10px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  outline: none !important;
  cursor: pointer !important;
}

.header-controls .user-profile {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.header-controls .user-chip {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  color: var(--text2) !important;
}

.header-controls .user-chip .av {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.header-controls .user-name-text {
  font-weight: 600 !important;
  color: var(--text) !important;
}

.header-controls .logout-btn {
  padding: 5px 10px !important;
  font-size: 11px !important;
  border-radius: 6px !important;
}

.main-content {
  flex: 1;
  min-width: 0;
  padding: 28px 24px 48px !important;
  background: var(--bg) !important;
  height: auto !important;
  overflow-y: visible !important;
}

.main-content .main {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}



@media (max-width: 768px) {
  .header-container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .header-controls {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .main-content {
    padding: 20px 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COMPACT DASHBOARD CARDS & MOOD PANEL
   ═══════════════════════════════════════════════════════════════════════════ */
.live-transcript {
  max-height: 180px !important;
  font-size: 11.5px !important;
}

.flags-panel {
  max-height: 150px !important;
}

.assist-chat {
  min-height: 200px !important;
  max-height: 380px !important;
}

.live-viz {
  height: 44px !important;
  margin-bottom: 10px !important;
}

.ls-card {
  padding: 8px 10px !important;
}

.live-score-grid {
  gap: 6px !important;
  margin-bottom: 10px !important;
}

/* Mood strip grid */
.mood-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

.mood-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 64px !important;
  text-align: center !important;
  box-shadow: var(--shadow-soft) !important;
}

.mood-lbl {
  font-size: 9px !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.1 !important;
}

.mood-val-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mood-val-badge span {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  padding: 2px 6px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg2) !important;
  display: inline-block !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVAMPED PREMIUM CONFIGURATION CARD & CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */
.config-container {
  max-width: 800px !important;
  margin: 0 auto !important;
  text-align: left !important;
  padding: 0 !important;
}

.config-header {
  margin-bottom: 24px;
  text-align: center !important;
  padding-bottom: 8px;
}

.config-badge {
  display: inline-block;
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: rgba(79, 70, 229, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.config-container h2 {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
}

.config-subtitle {
  font-size: 13px !important;
  color: var(--text3) !important;
  line-height: 1.5;
}

.setup-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  margin: 20px 0 !important;
}

@media (max-width: 768px) {
  .setup-grid {
    grid-template-columns: 1fr !important;
  }
}

.setup-box {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02), 0 1px 2px rgba(15, 23, 42, 0.03) !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
  flex: none !important;
}

.setup-box::after {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 4px 4px 0;
}

.box-lang::after {
  background: #3b82f6;
}

.box-assist::after {
  background: #ec4899;
}

.box-kb::after {
  background: #10b981;
}

.box-sys::after {
  background: #f59e0b;
}

.setup-box-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border-bottom: 1px solid var(--border2);
  padding-bottom: 8px;
  margin-bottom: 2px;
}

.box-header-svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--text3) !important;
}

.setup-box label {
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text2) !important;
  margin-bottom: 0 !important;
}

/* Custom dropdown chevron arrow */
select.lang-select {
  width: 100%;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border) !important;
  background-color: #ffffff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

select.lang-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.15) !important;
}

/* iOS Toggle switch styling */
.sw {
  background: #e2e8f0 !important;
  border: none !important;
  padding: 0 !important;
  height: 20px !important;
  width: 36px !important;
  border-radius: 10px !important;
  position: relative !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  transition: background-color 0.2s ease !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.sw.on {
  background: var(--accent) !important;
}

.sw i {
  position: absolute !important;
  height: 16px !important;
  width: 16px !important;
  border-radius: 50% !important;
  top: 2px !important;
  left: 2px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(0) !important;
}

.sw.on i {
  transform: translateX(16px) !important;
  left: 2px !important;
}

/* Toggle Row Alignment */
.assist-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 !important;
  width: 100% !important;
}

.assist-toggle-row span {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text2) !important;
  line-height: 1.4 !important;
}

/* Textarea height controls */
textarea {
  padding: 8px 12px !important;
  line-height: 1.5 !important;
  border-radius: 8px !important;
}

.setup-box textarea {
  flex: 1 !important;
}

textarea#assistKB {
  min-height: 110px !important;
  height: auto !important;
}

textarea#assistSys {
  min-height: 60px !important;
  height: auto !important;
}

.config-action-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}

.config-action-hint {
  font-size: 11px !important;
  color: var(--text3) !important;
  text-align: center;
}

.config-container .btn-live {
  max-width: 400px !important;
  margin: 0 auto !important;
}

/* Library and queue item icon styling */
.lib-icon {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: var(--bg2) !important;
  flex-shrink: 0 !important;
}

.lib-icon svg {
  width: 16px !important;
  height: 16px !important;
  display: block;
}

.q-icon {
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.q-icon svg {
  display: block;
}

/* Card inner sub-components (pills, stats boxes, metrics) light-theme alignment */
.pill,
.t-box,
.mp {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.pill-l,
.t-lbl,
.mp-l {
  color: var(--text3) !important;
}

.pill-v,
.t-num,
.mp-v {
  color: var(--text) !important;
}

/* Improvements recommendations styling alignment */
.imp-c {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}

.imp-s {
  color: var(--text2) !important;
}

.imp-e {
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text2) !important;
}

.ex-l {
  color: var(--accent) !important;
}

/* Transcript Chat UI */
.transcript-chat-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  max-height: 380px !important;
  overflow-y: auto !important;
  padding: 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--bg2) !important; /* Slightly darker than card for contrast */
  margin-bottom: 20px !important;
}

/* Custom scrollbar for transcript container */
.transcript-chat-container::-webkit-scrollbar {
  width: 6px !important;
}
.transcript-chat-container::-webkit-scrollbar-track {
  background: transparent !important;
}
.transcript-chat-container::-webkit-scrollbar-thumb {
  background: var(--text4) !important;
  border-radius: 3px !important;
}
.transcript-chat-container::-webkit-scrollbar-thumb:hover {
  background: var(--text3) !important;
}

.chat-bubble-group {
  display: flex !important;
  flex-direction: column !important;
  max-width: 80% !important;
}

.chat-bubble-group.agent {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

.chat-bubble-group.customer {
  align-self: flex-end !important;
  align-items: flex-end !important;
}

.chat-speaker-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 4px !important;
  padding: 0 4px !important;
}

.chat-bubble-group.agent .chat-speaker-label {
  color: var(--accent) !important;
}

.chat-bubble-group.customer .chat-speaker-label {
  color: var(--text2) !important;
}

.chat-bubble {
  padding: 10px 14px !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  box-shadow: var(--shadow-soft) !important;
  position: relative !important;
  word-break: break-word !important;
}

.chat-bubble-group.agent .chat-bubble {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 12px 12px 12px 2px !important;
}

.chat-bubble-group.customer .chat-bubble {
  background: var(--accent2) !important; /* Tinted light indigo background */
  border: 1px solid rgba(79, 70, 229, 0.08) !important;
  color: var(--text) !important;
  border-radius: 12px 12px 2px 12px !important;
}

.chat-system-message {
  align-self: center !important;
  max-width: 90% !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text3) !important;
  font-size: 11px !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-sm) !important;
  text-align: center !important;
  margin: 6px 0 !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Bullet list styles for Key Strengths */
.str-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.str-i {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: var(--text2) !important;
  margin-bottom: 0 !important;
}

.str-bullet {
  color: var(--accent) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* Call Library Button Styling Overrides for light theme contrast */
.lib-btn-play {
  background: rgba(8, 145, 178, 0.08) !important;
  color: var(--cyan) !important;
  border-color: rgba(8, 145, 178, 0.25) !important;
}
.lib-btn-play:hover {
  background: rgba(8, 145, 178, 0.15) !important;
}
.lib-btn-play svg {
  color: var(--cyan) !important;
}

.lib-btn-use {
  background: rgba(79, 70, 229, 0.08) !important;
  color: var(--accent) !important;
  border-color: rgba(79, 70, 229, 0.25) !important;
}
.lib-btn-use:hover {
  background: rgba(79, 70, 229, 0.15) !important;
}

.lib-btn-del {
  background: rgba(220, 38, 38, 0.08) !important;
  color: var(--red) !important;
  border-color: rgba(220, 38, 38, 0.2) !important;
}
.lib-btn-del:hover {
  background: rgba(220, 38, 38, 0.15) !important;
}

/* Call library inline progress player positioning and toggles */
.lib-player {
  display: none !important;
  width: auto !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  margin: 0 !important;
  padding: 4px 8px !important;
  height: 28px !important;
  box-shadow: none !important;
}

.lib-player.open {
  display: inline-flex !important;
}
/* ── header de-squish + KPI color guarantees (fix) ── */
.header-container { max-width: 1180px !important; flex-wrap: wrap !important; }
.header-controls { flex-wrap: wrap !important; justify-content: flex-end !important; gap: 16px !important; row-gap: 8px !important; min-width: 0 !important; }
.model-pick { min-width: 0 !important; }
.model-pick select { max-width: 200px !important; min-width: 120px !important; text-overflow: ellipsis !important; }
.kpi-good { color: #15803d !important; }
.kpi-focus { color: #b45309 !important; }
.kpi-bad { color: #b91c1c !important; }