/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #EDE8E1;
  --bg-card:       #FFFFFF;
  --bg-hover:      #FAF7F3;
  --bg-subtle:     #F7F2EC;
  --primary:       #E8734A;
  --primary-dark:  #C95D38;
  --primary-light: #FEF0E8;
  --primary-glow:  rgba(232,115,74,0.22);
  --text:          #1C1008;
  --text-secondary:#68584E;
  --text-muted:    #9C8C80;
  --border:        #E8E0D6;
  --border-light:  #F3EDE6;
  --green:         #16A34A;
  --green-bg:      #ECFDF5;
  --green-glow:    rgba(22,163,74,0.18);
  --orange:        #EA580C;
  --orange-bg:     #FFF7ED;
  --red:           #DC2626;
  --red-bg:        #FEF2F2;
  --red-glow:      rgba(220,38,38,0.18);
  --blue:          #2563EB;
  --blue-bg:       #EFF6FF;
  --purple:        #7C3AED;
  --purple-bg:     #F5F3FF;
  --shadow-xs:     0 1px 3px rgba(28,16,8,0.06);
  --shadow:        0 2px 10px rgba(28,16,8,0.08), 0 1px 3px rgba(28,16,8,0.05);
  --shadow-md:     0 6px 20px rgba(28,16,8,0.10), 0 2px 6px rgba(28,16,8,0.05);
  --shadow-lg:     0 18px 44px rgba(28,16,8,0.13), 0 6px 14px rgba(28,16,8,0.07);
  --shadow-glow:   0 8px 28px rgba(232,115,74,0.28), 0 3px 10px rgba(232,115,74,0.16);
  --radius:        16px;
  --radius-sm:     12px;
  --radius-xs:     8px;
  --font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:          cubic-bezier(0.32, 0, 0.18, 1);
  --ease-spring:   cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --t-fast:        150ms;
  --t-base:        220ms;
  --t-slow:        380ms;
  --wa-bg:         #E8E0D5;
  --wa-outbound:   #D4F7B4;
  --wa-inbound:    #FFFFFF;
  --wa-text:       #111B21;
  --wa-time:       #667781;
}

html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--font); background: var(--bg); color: var(--text);
  min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Material Symbols */
.material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.material-symbols-rounded.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ===== Keyframes ===== */
@keyframes fadeUp    { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeIn    { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp   { from { opacity:0; transform:translateY(18px) } to { opacity:1; transform:translateY(0) } }
@keyframes spin      { to { transform:rotate(360deg) } }
@keyframes pulseDot  { 0%,100% { transform:scale(1); opacity:1 } 50% { transform:scale(1.6); opacity:0.5 } }
@keyframes shimmer   { to { background-position: 200% center } }
@keyframes fillBar   { from { transform:scaleX(0) } to { transform:scaleX(1) } }
@keyframes float     { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
@keyframes rippleAnim { to { transform:scale(4); opacity:0 } }
@keyframes popIn     { from { transform:scale(0.92); opacity:0 } to { transform:scale(1); opacity:1 } }

/* ===== Ripple ===== */
.ripple {
  position:absolute; border-radius:50%;
  background:rgba(232,115,74,0.18);
  transform:scale(0); animation:rippleAnim 0.55s linear;
  pointer-events:none; z-index:0;
}
.lead-card, .esc-row-card, .call-summary-card, .wa-summary-card,
.escalation-card, .section-header {
  position:relative; overflow:hidden;
}

/* ===== Avatar helpers ===== */
.avatar-wrap  { position:relative; flex-shrink:0; }
.avatar-dot {
  position:absolute; bottom:1px; right:1px;
  width:11px; height:11px; border-radius:50%;
  background:var(--green); border:2.5px solid #fff;
  animation:pulseDot 2.2s ease-in-out infinite;
}

/* ===== Navbar ===== */
.navbar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 1.5rem; height:58px;
  background:rgba(255,255,255,0.90);
  backdrop-filter:blur(24px) saturate(200%);
  -webkit-backdrop-filter:blur(24px) saturate(200%);
  border-bottom:1px solid var(--border-light);
  box-shadow:0 1px 0 rgba(28,16,8,0.04), 0 2px 12px rgba(28,16,8,0.04);
}
.nav-brand  { display:flex; align-items:center; gap:0.5rem; cursor:pointer; }
.brand-icon { font-size:1.4rem; color:var(--primary); font-variation-settings:'FILL' 1,'wght' 500; }
.brand-logo { width:28px; height:28px; object-fit:contain; display:block; flex-shrink:0; }
.brand-magical {
  font-weight:800; font-size:1.05rem; letter-spacing:-0.025em;
  background:linear-gradient(130deg,var(--primary) 10%,#C95D38 90%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.brand-divider { width:1px; height:18px; background:var(--border); margin:0 0.15rem; }
.brand-sub  { font-weight:500; font-size:0.88rem; color:var(--text-muted); }
.nav-tabs   { display:flex; align-items:center; gap:0.2rem; margin-left:1rem; }
.nav-tab {
  display:flex; align-items:center; gap:0.3rem;
  background:none; border:none; padding:0.42rem 0.9rem;
  font-size:0.82rem; font-weight:500; color:var(--text-muted);
  cursor:pointer; border-radius:20px;
  transition:all var(--t-base) var(--ease-spring); font-family:inherit;
}
.nav-tab:hover  { background:var(--primary-light); color:var(--primary); transform:translateY(-1px); }
.nav-tab.active { background:var(--primary); color:#fff; box-shadow:0 2px 12px var(--primary-glow); }
.nav-right { display:flex; align-items:center; gap:0.75rem; }
.nav-user  { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--text-secondary); font-weight:500; }
.nav-avatar { width:30px; height:30px; border-radius:50%; border:2px solid var(--border-light); }
.btn-logout {
  background:none; border:1px solid var(--border); border-radius:var(--radius-xs);
  padding:0.35rem 0.75rem; font-size:0.78rem; cursor:pointer;
  color:var(--text-muted); font-family:var(--font); font-weight:500;
  transition:all var(--t-base) var(--ease);
}
.btn-logout:hover { border-color:var(--red); color:var(--red); background:var(--red-bg); }

/* ===== Container ===== */
.container { max-width:780px; margin:0 auto; padding:1.5rem 1.25rem 5rem; }

/* ===== Login ===== */
.login-page {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:75vh; text-align:center;
  animation:fadeUp 0.5s var(--ease) both;
}
.login-icon {
  font-size:3.8rem; color:var(--primary); margin-bottom:1rem;
  font-variation-settings:'FILL' 1,'wght' 400;
  animation:float 3s ease-in-out infinite;
}
.login-logo {
  width:72px; height:72px; object-fit:contain; margin-bottom:1rem;
  animation:float 3s ease-in-out infinite;
}
.login-page h1 { font-size:1.8rem; font-weight:800; margin-bottom:0.35rem; letter-spacing:-0.03em; }
.login-page p  { color:var(--text-secondary); margin-bottom:2rem; font-size:0.95rem; }
.btn-google {
  display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.85rem 1.85rem; border-radius:var(--radius-sm);
  background:var(--primary); color:#fff; font-weight:600;
  font-size:0.95rem; border:none; cursor:pointer;
  font-family:var(--font); transition:all var(--t-base) var(--ease-spring);
  box-shadow:0 4px 16px rgba(232,115,74,0.38);
}
.btn-google:hover  { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-glow); }
.btn-google:active { transform:translateY(0); }
.login-error {
  margin-top:1.25rem; padding:0.7rem 1.25rem; border-radius:var(--radius-xs);
  background:var(--red-bg); color:var(--red); font-size:0.85rem; font-weight:500;
}

/* ===== Search ===== */
.search-section { margin-bottom:1.75rem; animation:fadeUp 0.3s var(--ease) both; }
.search-wrapper { position:relative; display:flex; align-items:center; }
.search-icon {
  position:absolute; left:1rem; font-size:1.25rem; color:var(--text-muted);
  pointer-events:none; transition:color var(--t-base), transform var(--t-base) var(--ease-spring);
}
.search-bar {
  width:100%; padding:0.9rem 1rem 0.9rem 3rem;
  border:1.5px solid var(--border); border-radius:var(--radius);
  font-size:0.95rem; font-family:var(--font);
  background:var(--bg-card); box-shadow:var(--shadow);
  outline:none; transition:all var(--t-base) var(--ease); color:var(--text);
}
.search-bar::placeholder { color:var(--text-muted); }
.search-bar:focus {
  border-color:var(--primary);
  box-shadow:var(--shadow-md), 0 0 0 3px var(--primary-glow);
}
.search-bar:focus + .search-icon,
.search-wrapper:focus-within .search-icon { color:var(--primary); transform:scale(1.1); }
.search-hint  { font-size:0.78rem; color:var(--text-muted); margin-top:0.5rem; padding-left:0.25rem; }
.search-count { font-size:0.78rem; color:var(--text-muted); margin-top:0.5rem; padding-left:0.25rem; font-weight:500; }

/* ===== Welcome / Empty ===== */
.welcome-state {
  display:flex; flex-direction:column; align-items:center;
  padding:4rem 1rem 2rem; text-align:center;
  animation:fadeUp 0.5s var(--ease) both;
}
.welcome-icon { font-size:3.2rem; color:var(--text-muted); margin-bottom:1rem; opacity:0.35; animation:float 3s ease-in-out infinite; }
.welcome-state h2 { font-size:1.1rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.35rem; }
.welcome-state p   { font-size:0.88rem; color:var(--text-muted); }
.empty-state { text-align:center; padding:3rem 1rem; color:var(--text-muted); font-size:0.9rem; animation:fadeIn 0.3s var(--ease); }
.empty-state .material-symbols-rounded { font-size:2.8rem; display:block; margin-bottom:0.75rem; opacity:0.35; animation:float 3s ease-in-out infinite; }

/* ===== Lead List ===== */
.lead-list { display:flex; flex-direction:column; gap:0.45rem; }
.lead-card {
  display:flex; align-items:center; gap:0.85rem;
  padding:0.85rem 1rem; background:var(--bg-card);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-xs);
  cursor:pointer; border:1.5px solid transparent;
  transition:all var(--t-base) var(--ease-spring);
  animation:fadeUp 0.3s var(--ease) both;
}
.lead-card:hover {
  border-color:var(--primary);
  box-shadow:var(--shadow-md), 0 0 0 1px var(--primary-glow);
  transform:translateY(-2px);
  background:var(--bg-hover);
}
.lead-card:active { transform:translateY(0) scale(0.99); }
.lead-avatar {
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.9rem; flex-shrink:0;
  letter-spacing:-0.02em; color:#fff;
  box-shadow:0 3px 12px rgba(0,0,0,0.16);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
}
.lead-card:hover .lead-avatar { transform:scale(1.06); box-shadow:0 5px 16px rgba(0,0,0,0.2); }
.lead-card-info   { flex:1; min-width:0; }
.lead-card-top    { display:flex; justify-content:space-between; align-items:center; gap:0.5rem; }
.lead-name   { font-weight:600; font-size:0.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lead-phone  { font-size:0.8rem; color:var(--text-muted); flex-shrink:0; font-variant-numeric:tabular-nums; }
.lead-card-bottom { display:flex; gap:0.3rem; flex-wrap:wrap; margin-top:0.35rem; }
.lead-card-arrow {
  color:var(--text-muted); font-size:1.1rem; flex-shrink:0;
  transition:transform var(--t-base) var(--ease-spring), color var(--t-fast);
}
.lead-card:hover .lead-card-arrow { transform:translateX(5px); color:var(--primary); }

/* ===== Badges ===== */
.badge {
  display:inline-flex; align-items:center; gap:0.25rem;
  padding:0.24rem 0.68rem; border-radius:20px;
  font-size:0.7rem; font-weight:600; letter-spacing:0.02em;
  text-transform:capitalize; white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast);
}
.badge:hover { transform:scale(1.05); }
.badge-qualified      { background:var(--green-bg); color:var(--green); box-shadow:0 0 0 1px rgba(22,163,74,0.2); }
.badge-unqualified    { background:var(--red-bg); color:var(--red); box-shadow:0 0 0 1px rgba(220,38,38,0.2); }
.badge-nurture        { background:var(--orange-bg); color:var(--orange); box-shadow:0 0 0 1px rgba(234,88,12,0.2); }
.badge-designer-ready { background:var(--blue-bg); color:var(--blue); box-shadow:0 0 0 1px rgba(37,99,235,0.2); }
.badge-neutral  { background:#F0ECE6; color:var(--text-secondary); }
.badge-city     { background:var(--purple-bg); color:var(--purple); }
.badge-budget   { background:var(--orange-bg); color:var(--orange); }
.badge-source   { background:var(--blue-bg); color:var(--blue); }
.badge-score    { background:none; border:1.5px solid var(--border); color:var(--text-secondary); font-variant-numeric:tabular-nums; }

/* ===== Back button ===== */
.btn-back {
  display:inline-flex; align-items:center; gap:0.25rem;
  background:none; border:none; font-size:0.88rem;
  color:var(--text-secondary); cursor:pointer; font-family:var(--font);
  font-weight:500; margin-bottom:1.25rem; padding:0.25rem 0;
  transition:color var(--t-fast); gap:0.3rem;
}
.btn-back:hover { color:var(--primary); }
.btn-back:hover .material-symbols-rounded { transform:translateX(-3px); }
.btn-back .material-symbols-rounded { font-size:1.1rem; transition:transform var(--t-base) var(--ease-spring); }

/* ===== Detail Page ===== */
.detail-header {
  padding:1.5rem; border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:1.25rem;
  animation:slideUp 0.35s var(--ease) both;
  background:linear-gradient(145deg, #fff 0%, #FEF5EF 60%, #FEF0E8 100%);
  border:1px solid var(--border-light);
}
.detail-top-row { display:flex; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.detail-avatar {
  width:58px; height:58px; border-radius:50%;
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.4rem; flex-shrink:0; letter-spacing:-0.025em;
  box-shadow:0 4px 16px rgba(0,0,0,0.18), 0 0 0 3px rgba(255,255,255,0.9);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
}
.detail-avatar:hover { transform:scale(1.05); box-shadow:0 6px 20px rgba(0,0,0,0.2), 0 0 0 3px rgba(255,255,255,0.9), 0 0 0 5px var(--primary-glow); }
.detail-title { flex:1; }
.detail-name  { font-size:1.45rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:0.15rem; }
.detail-phone { color:var(--text-secondary); font-size:0.9rem; font-variant-numeric:tabular-nums; }
.detail-badges { display:flex; gap:0.35rem; flex-wrap:wrap; margin-bottom:1rem; }
.detail-fields {
  display:grid; grid-template-columns:1fr 1fr; gap:0.8rem 1.5rem;
  padding-top:1rem; border-top:1px solid var(--border-light);
}
.field-label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.07em; font-weight:600; margin-bottom:0.15rem; }
.field-value { font-size:0.9rem; font-weight:500; color:var(--text); }

/* ===== Tabs ===== */
.tabs {
  display:flex; background:var(--bg-card);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-xs);
  padding:0.3rem; margin-bottom:1rem;
  animation:slideUp 0.35s var(--ease) 0.05s both;
  gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.tab {
  flex:1; padding:0.6rem 0.5rem; font-size:0.82rem; font-weight:500;
  cursor:pointer; border:none; background:none;
  color:var(--text-muted); font-family:var(--font);
  border-radius:var(--radius-xs);
  white-space:nowrap; transition:all var(--t-base) var(--ease); text-align:center;
}
.tab:hover { color:var(--text); background:var(--bg-hover); }
.tab.active { color:var(--primary); background:var(--primary-light); font-weight:700; box-shadow:inset 0 1px 0 rgba(232,115,74,0.2); }
.tab-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; font-size:0.68rem; font-weight:700;
  background:var(--border); color:var(--text-muted);
  margin-left:0.3rem; font-variant-numeric:tabular-nums;
  transition:background var(--t-base), color var(--t-base);
}
.tab.active .tab-count { background:var(--primary); color:#fff; }
.tab-count-alert { background:#E53E3E; color:#fff; }
.tab.active .tab-count-alert { background:#C53030; }
.tab.tab-meeting { color:#a78bfa; }
.tab.tab-meeting:hover { color:#c4b5fd; background:#1e1b4b22; }
.tab.tab-meeting.active { color:#a78bfa; background:#1e1b4b44; }

/* ===== Meeting Copilot ===== */
.meeting-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem; display: flex;
  flex-direction: column; gap: 0.75rem;
}
.meeting-card-header { display: flex; align-items: center; gap: 0.5rem; }
.meeting-card-title { font-size: 0.95rem; font-weight: 600; color: var(--text); flex: 1; }
.meeting-badge {
  font-size: 0.68rem; font-weight: 600; background: #d1fae522; color: #34d399;
  border: 1px solid #34d39933; border-radius: 20px; padding: 0.15rem 0.5rem;
}
.meeting-info-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.meeting-info-row { display: flex; align-items: flex-start; gap: 0.6rem; }
.mif-icon { font-size: 1rem; color: var(--text-muted); margin-top: 1px; flex-shrink: 0; }
.meeting-field-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; margin-bottom: 1px; }
.meeting-field-value { font-size: 0.84rem; color: var(--text); }
.meeting-zoom-link { font-size: 0.8rem; color: #60a5fa; word-break: break-all; }
.meeting-zoom-link:hover { text-decoration: underline; }
/* Launch card */
.copilot-launch-card { border-color: #7c3aed33; }
.copilot-launch-header { display: flex; align-items: flex-start; gap: 0.75rem; }
.copilot-launch-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; }
.copilot-launch-title { font-size: 0.9rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.copilot-launch-desc { font-size: 0.75rem; color: var(--text-muted); line-height: 1.4; }
.copilot-action-row {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.btn-briefing {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; color: #60a5fa; border: 1px solid #1e3a5f;
  border-radius: var(--radius-xs); padding: 0.55rem 1.1rem;
  font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.btn-briefing:hover { background: #1e3a5f55; border-color: #60a5fa; }
.btn-copilot {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #7c3aed; color: #fff; border: none; border-radius: var(--radius-xs);
  padding: 0.55rem 1.1rem; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: background 0.2s;
}
.btn-copilot:hover { background: #6d28d9; }
.copilot-running-indicator {
  display: flex; align-items: center; gap: 0.5rem;
  background: #064e3b44; border: 1px solid #34d39933;
  border-radius: var(--radius-xs); padding: 0.5rem 0.75rem;
  font-size: 0.78rem; color: #34d399;
}
.copilot-running-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #34d399;
  flex-shrink: 0; animation: co-pulse 1.5s infinite;
}
.copilot-reopen-btn {
  margin-left: auto; background: none; border: 1px solid #34d39944;
  color: #34d399; border-radius: 4px; padding: 2px 8px; font-size: 0.72rem;
  cursor: pointer;
}
.copilot-popover {
  background: var(--bg); border: 1px solid #7c3aed33;
  border-radius: var(--radius-xs); padding: 0.85rem;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.copilot-popover-inner { display: flex; flex-direction: column; gap: 0.3rem; }
.copilot-popover-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.copilot-name-input {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xs);
  color: var(--text); padding: 0.5rem 0.7rem; font-size: 0.85rem; width: 100%; outline: none;
  font-family: var(--font);
}
.copilot-name-input:focus { border-color: #7c3aed; box-shadow: 0 0 0 2px #7c3aed22; }
.copilot-popover-actions { display: flex; gap: 0.5rem; align-items: center; }
.copilot-cancel-btn {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: var(--radius-xs); padding: 0.45rem 0.85rem; font-size: 0.8rem;
  cursor: pointer; font-family: var(--font);
}
.copilot-cancel-btn:hover { border-color: var(--text-muted); color: var(--text); }
.copilot-confirm-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: #7c3aed; color: #fff; border: none; border-radius: var(--radius-xs);
  padding: 0.45rem 1rem; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: background 0.2s;
}
.copilot-confirm-btn:hover { background: #6d28d9; }
.copilot-confirm-btn:disabled { background: #374151; cursor: not-allowed; }
.copilot-tip {
  display: flex; align-items: flex-start; gap: 0.3rem;
  font-size: 0.72rem; color: #6b7280; line-height: 1.4;
}
.copilot-launch-status { font-size: 0.75rem; color: var(--text-muted); min-height: 1rem; }
.copilot-launch-status.success { color: #34d399; }
.copilot-launch-status.error { color: #f87171; }

/* ===== Meeting Session Cards ===== */
.meeting-session-card {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.meeting-session-card:last-child { border-bottom: none; }
.meeting-session-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.meeting-session-status {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: capitalize;
}
.meeting-session-date { font-size: 0.78rem; color: var(--text-muted); margin-left: auto; }
.meeting-session-meta {
  font-size: 0.72rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--text-muted);
}
.meeting-session-zoom { display: flex; align-items: center; gap: 5px; overflow: hidden; }
.meeting-session-zoom .meeting-zoom-link { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meeting-session-actions { display: flex; gap: 8px; align-items: center; }
.btn-open-monitor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-open-monitor:hover { background: #f3f4f6; border-color: #d1d5db; }
.btn-start-bot-existing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.btn-start-bot-existing:hover { opacity: 0.88; }
.btn-start-bot-existing:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Pre-Meeting Briefing Modal ===== */
.briefing-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.65);
  z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 20px; backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.briefing-modal {
  background: #12121e; border: 1px solid #2a2a3e;
  border-radius: 14px; width: 100%; max-width: 580px; max-height: 85vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
  animation: slideUp 0.25s var(--ease);
}
.briefing-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid #1e1e2e; flex-shrink: 0;
}
.briefing-modal-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #f0f0f0;
}
.briefing-close-btn {
  background: none; border: none; color: #6b7280; cursor: pointer;
  font-size: 16px; padding: 4px 8px; border-radius: 6px;
}
.briefing-close-btn:hover { background: #1e1e2e; color: #f0f0f0; }
.briefing-modal-content {
  overflow-y: auto; padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 16px;
}
.briefing-modal-footer {
  padding: 14px 20px; border-top: 1px solid #1e1e2e; flex-shrink: 0;
  display: flex; justify-content: flex-end;
}
.briefing-start-btn {
  background: #7c3aed; color: #fff; border: none; border-radius: 8px;
  padding: 9px 24px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.2s;
}
.briefing-start-btn:hover { background: #6d28d9; }
.briefing-summary {
  font-size: 13px; color: #d1d5db; line-height: 1.6;
  background: #1e1e2e; border-radius: 8px; padding: 12px 14px;
}
.briefing-section { display: flex; flex-direction: column; gap: 6px; }
.briefing-section-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  display: flex; align-items: center; gap: 5px; margin-bottom: 2px;
}
.briefing-green { color: #34d399; }
.briefing-purple { color: #a78bfa; }
.briefing-orange { color: #fb923c; }
.briefing-gray { color: #6b7280; }
.briefing-item {
  font-size: 13px; line-height: 1.5; border-radius: 7px; padding: 8px 12px;
  display: flex; gap: 8px; align-items: flex-start;
}
.briefing-item-green { background: #064e3b33; color: #d1fae5; border-left: 2px solid #34d399; }
.briefing-item-purple { background: #1e1b4b33; color: #ede9fe; border-left: 2px solid #a78bfa; }
.briefing-item-orange { background: #431407aa; color: #fed7aa; border-left: 2px solid #fb923c; }
.briefing-num {
  font-size: 10px; font-weight: 700; color: #a78bfa; background: #1e1b4b;
  border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; margin-top: 1px;
}
.briefing-missing-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.briefing-missing-tag {
  font-size: 11px; color: #9ca3af; background: #1e1e2e;
  border: 1px solid #374151; border-radius: 20px; padding: 3px 10px;
}
.briefing-loading {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 40px 20px; color: #6b7280; font-size: 13px;
}
.briefing-spinner {
  width: 32px; height: 32px; border: 3px solid #1e1e2e;
  border-top-color: #a78bfa; border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Copilot Floating Overlay ===== */
.copilot-overlay {
  position: fixed; bottom: 24px; right: 24px;
  width: 340px; height: 520px;
  min-width: 260px; min-height: 180px; max-width: 680px; max-height: 90vh;
  background: #0f0f0f; border: 1px solid #2a2a3e;
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 9999; font-family: system-ui, sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}
/* Resize handles */
.co-resize-e  {
  position: absolute; top: 36px; right: 0; bottom: 16px; width: 8px;
  cursor: e-resize; z-index: 10;
}
.co-resize-e:hover  { background: #a78bfa22; }
.co-resize-s  {
  position: absolute; bottom: 0; left: 16px; right: 16px; height: 8px;
  cursor: s-resize; z-index: 10;
}
.co-resize-s:hover  { background: #a78bfa22; }
.co-resize-se {
  position: absolute; bottom: 0; right: 0; width: 18px; height: 18px;
  cursor: se-resize; z-index: 11; border-bottom-right-radius: 10px;
  /* 3-dot diagonal grip */
  background-image: radial-gradient(circle, #4b5563 1.5px, transparent 1.5px);
  background-size: 5px 5px;
  background-position: 3px 3px;
  background-repeat: repeat;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.co-resize-se:hover { background-color: #a78bfa22; }
.co-header {
  background: #1a1a2e; padding: 8px 10px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: grab; border-bottom: 1px solid #2a2a3e; flex-shrink: 0;
  user-select: none;
}
.co-header:active { cursor: grabbing; }
.co-hdr-left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.co-hdr-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.co-dot { width: 7px; height: 7px; border-radius: 50%; background: #4b5563; flex-shrink: 0; }
.co-dot.co-dot-live { background: #34d399; animation: co-pulse 1.5s infinite; }
@keyframes co-pulse { 0%,100% { opacity:1; } 50% { opacity:0.3; } }
.co-title { font-size: 12px; font-weight: 700; color: #a78bfa; flex-shrink: 0; }
.co-status { font-size: 10px; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-btn {
  background: none; border: none; color: #6b7280; cursor: pointer;
  font-size: 13px; padding: 2px 5px; line-height: 1; border-radius: 4px;
  text-decoration: none; display: inline-flex;
}
.co-btn:hover { color: #a78bfa; background: #1e1b4b44; }
.co-size-btn { font-size: 9px; padding: 2px 4px; }
.co-close:hover { color: #f87171; }
.co-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px; overflow-y: auto; flex: 1;
}
.co-section-label { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: #4b5563; }
.co-suggestion {
  background: #1e293b; border-left: 3px solid #a78bfa;
  border-radius: 6px; padding: 8px 10px;
}
.co-suggestion.co-suggestion-new { border-left-color: #34d399; animation: co-flash 1.2s ease-out; }
@keyframes co-flash { 0% { background: #064e3b; } 100% { background: #1e293b; } }
.co-suggestion-text { font-size: 13px; font-weight: 600; color: #f0f0f0; line-height: 1.4; margin-bottom: 3px; }
.co-suggestion-meta { font-size: 10px; color: #6b7280; }
.co-transcript {
  background: #1a1a1a; border-radius: 6px; padding: 7px 9px; max-height: 120px; overflow-y: auto;
}
.co-tx-line { font-size: 11px; line-height: 1.5; color: #d1d5db; }
.co-spk { font-weight: 600; }
.co-spk-designer { color: #60a5fa; }
.co-spk-customer { color: #34d399; }
.co-spk-unknown { color: #9ca3af; }
.co-extraction { background: #1a1a1a; border-radius: 6px; padding: 8px 10px; }
.co-score { font-size: 11px; color: #9ca3af; margin-bottom: 5px; }
.co-ext-row { display: flex; gap: 6px; font-size: 11px; padding: 1px 0; }
.co-ext-key { color: #93c5fd; min-width: 80px; flex-shrink: 0; }
.co-ext-val { color: #e0e0e0; word-break: break-word; }
.co-apply-btn {
  background: #7c3aed; color: #fff; border: none; border-radius: 5px;
  padding: 5px 12px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.co-apply-btn:hover { background: #6d28d9; }
.co-apply-btn:disabled { background: #374151; color: #6b7280; cursor: not-allowed; }
.co-full-btn {
  background: none; border: 1px solid #374151; color: #9ca3af;
  border-radius: 5px; padding: 5px 10px; font-size: 11px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
}
.co-full-btn:hover { border-color: #a78bfa; color: #a78bfa; }

/* ===== Escalations ===== */
.escalations-list { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.5rem 0; }
.escalation-card {
  background: var(--bg-card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); padding: 1rem;
  box-shadow: var(--shadow-xs); transition: box-shadow 0.2s;
}
.escalation-card:hover { box-shadow: var(--shadow-sm); }
.escalation-card.esc-open { border-left: 3px solid #E53E3E; }
.escalation-card.esc-actioned { border-left: 3px solid #D69E2E; }
.escalation-card.esc-resolved { border-left: 3px solid #38A169; }
.esc-header {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.5rem; font-size: 0.8rem;
}
.esc-status {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-weight: 600; text-transform: uppercase; font-size: 0.7rem;
  letter-spacing: 0.03em;
}
.esc-open .esc-status { color: #E53E3E; }
.esc-actioned .esc-status { color: #D69E2E; }
.esc-resolved .esc-status { color: #38A169; }
.esc-status .material-symbols-rounded { font-size: 0.95rem; }
.esc-channel {
  display: inline-flex; align-items: center; gap: 0.2rem;
  color: var(--text-muted); font-size: 0.75rem;
}
.esc-channel .material-symbols-rounded { font-size: 0.85rem; }
.esc-time { color: var(--text-muted); font-size: 0.75rem; margin-left: auto; }
.esc-reason {
  display: flex; align-items: center; gap: 0.35rem;
  font-size: 0.88rem; font-weight: 500; color: var(--text);
  margin-bottom: 0.5rem;
}
.esc-trigger {
  background: var(--bg); border-radius: 6px; padding: 0.6rem 0.75rem;
  margin-bottom: 0.5rem;
}
.esc-trigger-label { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.2rem; }
.esc-trigger-text { font-size: 0.82rem; color: var(--text); font-style: italic; }
.esc-resolution {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding-top: 0.5rem; border-top: 1px solid var(--border-light);
  font-size: 0.78rem; color: var(--text-muted);
}
.esc-actioned-by { display: inline-flex; align-items: center; gap: 0.2rem; font-weight: 500; }
.esc-notes { width: 100%; margin-top: 0.25rem; font-style: italic; }

/* Escalations page */
.esc-page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.75rem;
}
.esc-page-title {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 1.1rem; font-weight: 700; color: var(--text);
}
.esc-total-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 11px; font-size: 0.72rem; font-weight: 700;
  background: var(--primary); color: #fff;
}
.esc-filter-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}
.esc-filters { display: flex; gap: 0.35rem; }
.esc-filter {
  background: var(--bg-card); border: 1px solid var(--border-light);
  border-radius: var(--radius-xs); padding: 0.35rem 0.7rem;
  font-size: 0.78rem; font-weight: 500; cursor: pointer;
  color: var(--text-muted); transition: all 0.15s; font-family: inherit;
}
.esc-filter:hover { border-color: var(--primary); color: var(--primary); }
.esc-filter.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.esc-filter-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; font-size: 0.65rem; font-weight: 700;
  background: var(--border); margin-left: 0.25rem;
}
.esc-filter.active .esc-filter-count { background: rgba(255,255,255,0.3); color: #fff; }
/* Escalation row cards */
.esc-global-list { display: flex; flex-direction: column; gap: 0.6rem; }
.esc-row-card {
  display: flex; align-items: center; gap: 1rem;
  background: var(--bg-card); border-radius: var(--radius-sm);
  border: 1px solid var(--border-light); padding: 0.85rem 1rem;
  box-shadow: var(--shadow-xs); cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  animation: fadeIn 0.25s ease both;
}
.esc-row-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.esc-row-card.esc-open { border-left: 3px solid #E53E3E; }
.esc-row-card.esc-actioned { border-left: 3px solid #D69E2E; }
.esc-row-card.esc-resolved { border-left: 3px solid #38A169; }
.esc-row-left { display: flex; align-items: center; gap: 0.5rem; min-width: 160px; flex-shrink: 0; }
.esc-row-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.esc-row-lead-info { min-width: 0; line-height: 1.35; }
.esc-row-name { font-weight: 600; font-size: 0.84rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-row-phone { font-size: 0.73rem; color: var(--text-muted); display: block; white-space: nowrap; }
.esc-row-center { flex: 1; min-width: 0; }
.esc-row-reason { font-size: 0.8rem; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-row-trigger { font-size: 0.75rem; color: var(--text-muted); font-style: italic; margin-top: 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esc-row-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.esc-status-pill {
  display: inline-flex; align-items: center; gap: 0.2rem;
  font-size: 0.67rem; font-weight: 600; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 10px; letter-spacing: 0.02em;
}
.esc-status-pill .material-symbols-rounded { font-size: 0.8rem; }
.esc-status-pill.esc-open { background: #FED7D7; color: #C53030; }
.esc-status-pill.esc-actioned { background: #FEFCBF; color: #B7791F; }
.esc-status-pill.esc-resolved { background: #C6F6D5; color: #276749; }
.esc-row-date { font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.esc-row-arrow { color: var(--text-muted); flex-shrink: 0; font-size: 1.1rem; }
/* Conversation row cards (reuses esc-row-card base) */
.esc-row-card.conv-qualified { border-left: 3px solid #38A169; }
.esc-row-card.conv-not-qualified { border-left: 3px solid #E53E3E; }
.esc-row-card.conv-default { border-left: 3px solid var(--border); }
.conv-row-meta {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.73rem; color: var(--text-muted); margin-top: 0.15rem;
}
.conv-sep { opacity: 0.5; }
/* WhatsApp thread cards */
.esc-row-card.wa-thread-card { border-left: 3px solid #25D366; }
/* Infinite scroll sentinel */
.scroll-sentinel .loading { padding: 1rem; }
.scroll-sentinel .spinner { width: 20px; height: 20px; border-width: 2px; }

/* ===== Sections (RoomGraph collapsible) ===== */
.section {
  margin-bottom: 0.75rem; background: var(--bg-card);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-xs);
  overflow: hidden; border: 1px solid var(--border-light);
  transition: box-shadow 0.2s;
  animation: fadeIn 0.3s var(--ease) both;
}
.section:hover { box-shadow: var(--shadow); }
.section-header {
  padding: 0.8rem 1rem; font-weight: 600; font-size: 0.9rem;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  user-select: none; transition: background 0.15s;
}
.section-header:hover { background: var(--bg-hover); }
.section-icon {
  font-size: 1.1rem; margin-right: 0.5rem; vertical-align: middle;
  color: var(--primary);
}
.section-chevron {
  font-size: 1rem; color: var(--text-muted);
  transition: transform 0.25s var(--ease);
}
.section-chevron.open { transform: rotate(180deg); }
.section-body { padding: 0.85rem 1rem; }
.section-body.collapsed { display: none; }

/* ===== RoomGraph key-value ===== */
.rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; }
.rg-item { }
.rg-label {
  font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.06em; font-weight: 600; margin-bottom: 0.1rem;
}
.rg-value { font-size: 0.88rem; font-weight: 500; word-break: break-word; }
.rg-subsection { margin-top: 0.75rem; }
.rg-subtitle {
  font-size: 0.78rem; font-weight: 600; color: var(--text-secondary);
  margin-bottom: 0.4rem; padding-bottom: 0.2rem; border-bottom: 1px solid var(--border-light);
}

/* ===== Completeness Score Bar ===== */
.score-bar-wrapper { display: flex; align-items: center; gap: 0.6rem; }
.score-bar {
  flex:1; height:7px; background:var(--border-light); border-radius:4px; overflow:hidden;
}
.score-bar-fill {
  height:100%; border-radius:4px;
  transform-origin:left center;
  animation:fillBar 0.9s var(--ease-spring) both;
  animation-delay:0.3s;
}
.score-bar-fill.low    { background:linear-gradient(90deg,var(--red),#F87171); }
.score-bar-fill.medium { background:linear-gradient(90deg,var(--orange),#FB923C); }
.score-bar-fill.good   { background:linear-gradient(90deg,#D97706,#FDE68A); }
.score-bar-fill.high   { background:linear-gradient(90deg,var(--green),#4ADE80); }
.score-label { font-size:0.82rem; font-weight:700; min-width:2.5rem; text-align:right; }

/* ===== Escalations / Conversation / WA Row Cards ===== */
.esc-global-list { display:flex; flex-direction:column; gap:0.45rem; }
.esc-row-card {
  display:flex; align-items:center; gap:1rem;
  background:var(--bg-card); border-radius:var(--radius-sm);
  border:1px solid var(--border-light); padding:0.85rem 1rem;
  box-shadow:var(--shadow-xs); cursor:pointer;
  transition:all var(--t-base) var(--ease-spring);
  animation:fadeUp 0.25s var(--ease) both;
}
.esc-row-card:hover {
  box-shadow:var(--shadow-md), 0 0 0 1px var(--primary-glow);
  transform:translateY(-2px); background:var(--bg-hover);
}
.esc-row-card:active { transform:translateY(0) scale(0.995); }
.esc-row-card.esc-open     { border-left:3px solid #E53E3E; }
.esc-row-card.esc-actioned { border-left:3px solid #D69E2E; }
.esc-row-card.esc-resolved { border-left:3px solid #38A169; }
.esc-row-left { display:flex; align-items:center; gap:0.6rem; min-width:160px; flex-shrink:0; }
.esc-row-avatar {
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:0.82rem; font-weight:700; color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,0.14);
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  transition:transform var(--t-base) var(--ease-spring), box-shadow var(--t-base);
}
.esc-row-card:hover .esc-row-avatar { transform:scale(1.06); box-shadow:0 5px 14px rgba(0,0,0,0.18); }
.esc-row-lead-info { min-width:0; line-height:1.4; }
.esc-row-name  { font-weight:600; font-size:0.88rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.esc-row-phone { font-size:0.74rem; color:var(--text-muted); display:block; white-space:nowrap; font-variant-numeric:tabular-nums; }
.esc-row-center { flex:1; min-width:0; }
.esc-row-reason  { font-size:0.83rem; color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.esc-row-trigger { font-size:0.76rem; color:var(--text-muted); font-style:italic; margin-top:0.18rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.esc-row-right { display:flex; align-items:center; gap:0.5rem; flex-shrink:0; }
.esc-status-pill {
  display:inline-flex; align-items:center; gap:0.2rem;
  font-size:0.67rem; font-weight:600; text-transform:uppercase;
  padding:0.22rem 0.55rem; border-radius:10px; letter-spacing:0.02em;
}
.esc-status-pill .material-symbols-rounded { font-size:0.8rem; }
.esc-status-pill.esc-open     { background:#FED7D7; color:#C53030; }
.esc-status-pill.esc-actioned { background:#FEFCBF; color:#B7791F; }
.esc-status-pill.esc-resolved { background:#C6F6D5; color:#276749; }
.esc-row-date  { font-size:0.72rem; color:var(--text-muted); white-space:nowrap; }
.esc-row-arrow {
  color:var(--text-muted); flex-shrink:0; font-size:1.1rem;
  transition:transform var(--t-base) var(--ease-spring), color var(--t-fast);
}
.esc-row-card:hover .esc-row-arrow { transform:translateX(4px); color:var(--primary); }

/* Conversation outcome borders */
.esc-row-card.conv-qualified     { border-left:3px solid var(--green); }
.esc-row-card.conv-not-qualified { border-left:3px solid var(--red); }
.esc-row-card.conv-default       { border-left:3px solid var(--border); }
.conv-row-meta { display:flex; align-items:center; gap:0.3rem; font-size:0.73rem; color:var(--text-muted); margin-top:0.15rem; }
.conv-sep { opacity:0.45; }

/* WA thread cards — qual-based left borders */
.esc-row-card.wa-thread-card                      { border-left:3px solid #25D366; }
.esc-row-card.wa-thread-card.wa-qualified         { border-left-color:var(--green); }
.esc-row-card.wa-thread-card.wa-qualified:hover   { box-shadow:var(--shadow-md), 0 0 0 1px var(--green-glow); }
.esc-row-card.wa-thread-card.wa-unqualified       { border-left-color:var(--red); }
.esc-row-card.wa-thread-card.wa-unqualified:hover { box-shadow:var(--shadow-md), 0 0 0 1px var(--red-glow); }
.esc-row-card.wa-thread-card.wa-nurture           { border-left-color:var(--orange); }
.esc-row-card.wa-thread-card.wa-designer-ready    { border-left-color:var(--blue); }

/* Infinite scroll */
.scroll-sentinel .loading { padding:1rem; }
.scroll-sentinel .spinner { width:20px; height:20px; border-width:2px; }

/* ===== Page header ===== */
.esc-page-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; margin-bottom:0.75rem; }
.esc-page-title  { display:flex; align-items:center; gap:0.4rem; font-size:1.1rem; font-weight:700; color:var(--text); }
.esc-total-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; font-size:0.72rem; font-weight:700;
  background:var(--primary); color:#fff;
}
.esc-filter-dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.esc-filters { display:flex; gap:0.35rem; }
.esc-filter {
  background:var(--bg-card); border:1px solid var(--border-light);
  border-radius:20px; padding:0.35rem 0.8rem;
  font-size:0.78rem; font-weight:500; cursor:pointer;
  color:var(--text-muted); transition:all var(--t-base) var(--ease-spring); font-family:inherit;
}
.esc-filter:hover  { border-color:var(--primary); color:var(--primary); transform:translateY(-1px); }
.esc-filter.active { background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px var(--primary-glow); }
.esc-filter-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; font-size:0.65rem; font-weight:700;
  background:var(--border); margin-left:0.25rem;
}
.esc-filter.active .esc-filter-count { background:rgba(255,255,255,0.3); color:#fff; }

/* ===== Escalation detail cards ===== */
.escalations-list { display:flex; flex-direction:column; gap:0.75rem; padding:0.5rem 0; }
.escalation-card {
  background:var(--bg-card); border-radius:var(--radius-sm);
  border:1px solid var(--border-light); padding:1rem;
  box-shadow:var(--shadow-xs); transition:box-shadow var(--t-base);
}
.escalation-card:hover { box-shadow:var(--shadow); }
.escalation-card.esc-open     { border-left:3px solid #E53E3E; }
.escalation-card.esc-actioned { border-left:3px solid #D69E2E; }
.escalation-card.esc-resolved { border-left:3px solid #38A169; }
.esc-header { display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap; margin-bottom:0.5rem; font-size:0.8rem; }
.esc-status { display:inline-flex; align-items:center; gap:0.25rem; font-weight:600; text-transform:uppercase; font-size:0.7rem; letter-spacing:0.03em; }
.esc-open .esc-status     { color:#E53E3E; }
.esc-actioned .esc-status { color:#D69E2E; }
.esc-resolved .esc-status { color:#38A169; }
.esc-status .material-symbols-rounded { font-size:0.95rem; }
.esc-channel { display:inline-flex; align-items:center; gap:0.2rem; color:var(--text-muted); font-size:0.75rem; }
.esc-time    { color:var(--text-muted); font-size:0.75rem; margin-left:auto; }
.esc-reason  { display:flex; align-items:center; gap:0.35rem; font-size:0.88rem; font-weight:500; color:var(--text); margin-bottom:0.5rem; }
.esc-trigger { background:var(--bg-subtle); border-radius:8px; padding:0.6rem 0.75rem; margin-bottom:0.5rem; border-left:2px solid var(--border); }
.esc-trigger-label { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:0.2rem; }
.esc-trigger-text  { font-size:0.82rem; color:var(--text); font-style:italic; }
.esc-resolution { display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap; padding-top:0.5rem; border-top:1px solid var(--border-light); font-size:0.78rem; color:var(--text-muted); }
.esc-actioned-by { display:inline-flex; align-items:center; gap:0.2rem; font-weight:500; }
.esc-notes { width:100%; margin-top:0.25rem; font-style:italic; }

/* ===== RoomGraph sections ===== */
.section {
  margin-bottom:0.75rem; background:var(--bg-card);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-xs);
  overflow:hidden; border:1px solid var(--border-light);
  transition:box-shadow var(--t-base), transform var(--t-base) var(--ease-spring);
  animation:fadeUp 0.3s var(--ease) both;
}
.section:hover { box-shadow:var(--shadow); }
.section-header {
  padding:0.85rem 1rem; font-weight:600; font-size:0.9rem;
  cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  user-select:none; transition:background var(--t-fast);
}
.section-header:hover { background:var(--bg-hover); }
.section-icon    { font-size:1.1rem; margin-right:0.5rem; vertical-align:middle; color:var(--primary); }
.section-chevron { font-size:1rem; color:var(--text-muted); transition:transform 0.28s var(--ease-spring); }
.section-chevron.open { transform:rotate(180deg); }
.section-body { padding:0.85rem 1rem; }
.section-body.collapsed { display:none; }
.rg-grid    { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem 1.25rem; }
.rg-label   { font-size:0.68rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; font-weight:600; margin-bottom:0.1rem; }
.rg-value   { font-size:0.88rem; font-weight:500; word-break:break-word; }
.rg-subsection { margin-top:0.75rem; }
.rg-subtitle { font-size:0.78rem; font-weight:600; color:var(--text-secondary); margin-bottom:0.4rem; padding-bottom:0.2rem; border-bottom:1px solid var(--border-light); }

/* ===== Call / WA Summary Cards ===== */
.call-summaries-list { display:flex; flex-direction:column; gap:0.75rem; animation:slideUp 0.35s var(--ease) 0.1s both; }
.call-summary-card, .wa-summary-card {
  padding:1rem 1.15rem; background:var(--bg-card);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-xs);
  border:1px solid var(--border-light); transition:all var(--t-base) var(--ease-spring);
}
.call-summary-card:hover { box-shadow:var(--shadow-md); transform:translateY(-1px); }
.wa-summary-card  { border-left:3px solid #25D366; margin-bottom:1rem; }
.wa-summary-card:hover { box-shadow:var(--shadow-md); }
.call-icon.wa-icon { background:#E8F5E9; color:#25D366; }
.call-header { display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem; }
.call-icon {
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:1.1rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}
.call-icon.inbound  { background:var(--green-bg); color:var(--green); }
.call-icon.outbound { background:var(--blue-bg);  color:var(--blue); }
.call-meta-info   { flex:1; }
.call-meta-top    { display:flex; align-items:center; gap:0.5rem; font-size:0.82rem; font-weight:600; }
.call-meta-bottom { font-size:0.75rem; color:var(--text-muted); margin-top:0.1rem; }
.call-summary-text { font-size:0.88rem; line-height:1.65; color:var(--text-secondary); padding:0.6rem 0; border-top:1px solid var(--border-light); }
.call-collected { display:flex; flex-wrap:wrap; gap:0.3rem; margin-top:0.5rem; }
.transcript-toggle {
  display:inline-flex; align-items:center; gap:0.3rem;
  margin-top:0.5rem; background:none; border:none;
  color:var(--primary); font-size:0.82rem; cursor:pointer;
  font-family:var(--font); font-weight:600; padding:0.25rem 0;
  transition:opacity var(--t-fast), transform var(--t-fast);
}
.transcript-toggle:hover { opacity:0.75; }
.transcript-toggle .material-symbols-rounded { font-size:1rem; transition:transform var(--t-base) var(--ease-spring); }
.transcript-toggle:hover .material-symbols-rounded { transform:translateX(2px); }
.transcript-block {
  margin-top:0.6rem; padding:0.75rem 0.85rem;
  background:var(--bg-subtle); border-radius:var(--radius-xs); border:1px solid var(--border-light);
  font-size:0.82rem; line-height:1.65; max-height:400px; overflow-y:auto;
}
.transcript-turn { margin-bottom:0.5rem; padding-bottom:0.5rem; border-bottom:1px solid var(--border-light); }
.transcript-turn:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.transcript-role { font-weight:700; text-transform:capitalize; font-size:0.75rem; }
.transcript-role-user      { color:var(--text); }
.transcript-role-assistant { color:var(--primary); }
.transcript-text { margin-top:0.15rem; }

/* ===== All interactions ===== */
.interaction-card {
  display:flex; align-items:flex-start; gap:0.75rem;
  padding:0.75rem 0.85rem; background:var(--bg-card);
  border-radius:var(--radius-xs); box-shadow:var(--shadow-xs);
  border:1px solid var(--border-light);
  animation:fadeUp 0.25s var(--ease) both;
  transition:box-shadow var(--t-base);
}
.interaction-card:hover { box-shadow:var(--shadow); }
.interaction-icon { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:0.95rem; }
.interaction-icon.wa-in           { background:var(--green-bg); color:var(--green); }
.interaction-icon.wa-out          { background:var(--primary-light); color:var(--primary); }
.interaction-icon.voice           { background:var(--blue-bg); color:var(--blue); }
.interaction-icon.email-out       { background:#FFF7ED; color:var(--orange); }
.interaction-icon.system          { background:#F0ECE6; color:var(--text-muted); }
.interaction-icon.calendly-booking { background:var(--green-bg); color:var(--green); }
.interaction-content { flex:1; min-width:0; }
.interaction-type { font-size:0.78rem; font-weight:600; text-transform:capitalize; color:var(--text-secondary); }
.interaction-text { font-size:0.85rem; color:var(--text); margin-top:0.15rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.interaction-time { font-size:0.72rem; color:var(--text-muted); flex-shrink:0; white-space:nowrap; margin-top:0.15rem; }

/* ===== WhatsApp Chat ===== */
.wa-container {
  background:var(--wa-bg);
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5c1.5 0 2.5 2 4 2s3-1.5 4.5-.5 1 3 2.5 3.5 3-.5 4 1-.5 3 .5 4.5 3 1.5 3 3-.5 3-.5 4.5 2 2.5 1.5 4-2 2-2.5 3.5 0 3-.5 4.5-2.5 1.5-3.5 2.5-.5 3-2 3.5-3 0-4 1-1.5 3-3 3-2.5-1-4-.5-2 2-3.5 2-2-1.5-3-3 0-3-1-4.5-3-1.5-3-3 .5-3 .5-4.5-2-2.5-1.5-4 2-2 2.5-3.5 0-3 .5-4.5 2.5-1.5 3.5-2.5.5-3 2-3.5 3 0 4-1 1.5-3 3-3z' fill='%23d5cdba' fill-opacity='.08'/%3E%3C/svg%3E");
  border-radius:var(--radius-sm);
  padding:1rem 0.85rem;
  max-height:620px; overflow-y:auto;
  animation:slideUp 0.35s var(--ease) 0.1s both;
}
.wa-container::-webkit-scrollbar { width:4px; }
.wa-container::-webkit-scrollbar-track { background:transparent; }
.wa-container::-webkit-scrollbar-thumb { background:rgba(0,0,0,0.14); border-radius:2px; }
.wa-container::-webkit-scrollbar-thumb:hover { background:rgba(0,0,0,0.25); }
.chat-timeline { display:flex; flex-direction:column; gap:0.4rem; }
.chat-date-divider {
  align-self:center; padding:0.3rem 0.85rem;
  background:rgba(225,218,208,0.92); backdrop-filter:blur(6px);
  border-radius:8px; font-size:0.71rem; font-weight:600;
  color:#5A5046; margin:0.6rem 0; box-shadow:var(--shadow-xs);
  letter-spacing:0.01em;
}
.chat-msg {
  max-width:78%; padding:0.5rem 0.7rem 0.35rem; border-radius:10px;
  font-size:0.88rem; line-height:1.52; position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
  animation:popIn 0.18s var(--ease-spring) both;
}
.chat-inbound  {
  align-self:flex-start; background:var(--wa-inbound); color:var(--wa-text);
  border-top-left-radius:3px; margin-left:8px;
}
.chat-inbound::before {
  content:''; position:absolute; left:-7px; top:0;
  border:7px solid transparent;
  border-right-color:var(--wa-inbound);
  border-top-color:var(--wa-inbound);
}
.chat-outbound {
  align-self:flex-end; background:var(--wa-outbound); color:var(--wa-text);
  border-top-right-radius:3px; margin-right:8px;
}
.chat-outbound::before {
  content:''; position:absolute; right:-7px; top:0;
  border:7px solid transparent;
  border-left-color:var(--wa-outbound);
  border-top-color:var(--wa-outbound);
}
.chat-msg-text { word-break:break-word; }
.chat-msg-text a { color:#039BE5; text-decoration:none; }
.chat-msg-text a:hover { text-decoration:underline; }
.chat-template-badge { font-size:0.7rem; font-weight:600; color:#667781; margin-bottom:0.3rem; padding-bottom:0.25rem; border-bottom:1px solid rgba(0,0,0,0.08); }
.chat-template-body  { white-space:pre-line; }
.chat-template-cta   { display:inline-block; margin-top:0.4rem; padding:0.35rem 1rem; border:1px solid #25d366; border-radius:6px; color:#25d366; font-size:0.82rem; font-weight:600; text-align:center; cursor:default; }
.chat-time-row { display:flex; justify-content:flex-end; align-items:center; gap:0.25rem; margin-top:0.15rem; }
.chat-time { font-size:0.65rem; color:var(--wa-time); }
.wp-status { font-family:'Material Symbols Rounded'; font-size:0.8rem; margin-left:0.1rem; }
.wp-read      { color:#53bdeb; }
.wp-delivered { color:#8696a0; }
.wp-sent      { color:#8696a0; }
.wp-failed    { color:#E53E3E; }
.wp-pending   { color:#8696a0; }
.chat-system {
  align-self:center; text-align:center; font-size:0.76rem; color:#5A5046; font-weight:500;
  background:rgba(225,218,208,0.92); backdrop-filter:blur(4px);
  padding:0.4rem 1rem; border-radius:8px; margin:0.25rem 0; box-shadow:var(--shadow-xs);
}
.chat-media { margin-bottom:0.2rem; }
.chat-media-link { display:block; text-decoration:none; }
.chat-media-thumb {
  max-width:220px; max-height:200px; border-radius:10px; object-fit:cover;
  display:block; cursor:pointer; transition:opacity var(--t-fast), transform var(--t-base) var(--ease-spring);
}
.chat-media-thumb:hover { opacity:0.88; transform:scale(1.02); }
.chat-media-video { width:220px; height:140px; background:#1a1a1a; color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.25rem; border-radius:10px; }
.chat-media-label { font-size:0.75rem; font-weight:500; }
.chat-media-error { width:220px; height:140px; background:#f0ece6; color:var(--text-muted); display:flex; align-items:center; justify-content:center; border-radius:10px; }
.chat-media-indicator { display:inline-flex; align-items:center; gap:0.25rem; color:var(--blue); font-size:0.82rem; font-style:italic; }

/* ===== Loading / Skeleton ===== */
.loading { text-align:center; padding:3rem 1rem; color:var(--text-muted); animation:fadeIn 0.3s var(--ease); }
.spinner {
  width:32px; height:32px; border:3px solid var(--border);
  border-top-color:var(--primary); border-radius:50%;
  animation:spin 0.7s linear infinite; margin:0 auto 0.75rem;
}
.skeleton {
  background:linear-gradient(90deg, var(--border-light) 25%, var(--bg-hover) 50%, var(--border-light) 75%);
  background-size:200% auto;
  animation:shimmer 1.4s linear infinite;
  border-radius:var(--radius-xs);
}

/* ===== Inspiration URLs ===== */
.inspiration-link { display:inline-flex; align-items:center; gap:0.3rem; color:var(--primary); font-size:0.85rem; word-break:break-all; font-weight:500; transition:opacity var(--t-fast); }
.inspiration-link:hover { opacity:0.7; text-decoration:underline; }

/* ===== Meeting Copilot ===== */
.meeting-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:1rem 1.1rem; display:flex;
  flex-direction:column; gap:0.75rem;
}
.meeting-card-header { display:flex; align-items:center; gap:0.5rem; }
.meeting-card-title  { font-size:0.95rem; font-weight:600; color:var(--text); flex:1; }
.meeting-badge { font-size:0.68rem; font-weight:600; background:#d1fae522; color:#34d399; border:1px solid #34d39933; border-radius:20px; padding:0.15rem 0.5rem; }
.meeting-info-grid { display:flex; flex-direction:column; gap:0.6rem; }
.meeting-info-row  { display:flex; align-items:flex-start; gap:0.6rem; }
.mif-icon { font-size:1rem; color:var(--text-muted); margin-top:1px; flex-shrink:0; }
.meeting-field-label { font-size:0.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; font-weight:600; margin-bottom:1px; }
.meeting-field-value { font-size:0.84rem; color:var(--text); }
.meeting-zoom-link { font-size:0.8rem; color:#60a5fa; word-break:break-all; }
.meeting-zoom-link:hover { text-decoration:underline; }
.copilot-launch-card { border-color:#7c3aed33; }
.copilot-launch-header { display:flex; align-items:flex-start; gap:0.75rem; }
.copilot-launch-icon   { font-size:1.6rem; line-height:1; flex-shrink:0; }
.copilot-launch-title  { font-size:0.9rem; font-weight:700; color:var(--text); margin-bottom:2px; }
.copilot-launch-desc   { font-size:0.75rem; color:var(--text-muted); line-height:1.4; }
.copilot-action-row    { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.btn-briefing { display:inline-flex; align-items:center; gap:0.4rem; background:none; color:#60a5fa; border:1px solid #1e3a5f; border-radius:var(--radius-xs); padding:0.55rem 1.1rem; font-size:0.82rem; font-weight:600; cursor:pointer; transition:background 0.2s, border-color 0.2s; }
.btn-briefing:hover { background:#1e3a5f55; border-color:#60a5fa; }
.btn-copilot  { display:inline-flex; align-items:center; gap:0.4rem; background:#7c3aed; color:#fff; border:none; border-radius:var(--radius-xs); padding:0.55rem 1.1rem; font-size:0.82rem; font-weight:600; cursor:pointer; transition:background 0.2s; }
.btn-copilot:hover { background:#6d28d9; }
.copilot-running-indicator { display:flex; align-items:center; gap:0.5rem; background:#064e3b44; border:1px solid #34d39933; border-radius:var(--radius-xs); padding:0.5rem 0.75rem; font-size:0.78rem; color:#34d399; }
.copilot-running-dot { width:7px; height:7px; border-radius:50%; background:#34d399; flex-shrink:0; animation:co-pulse 1.5s infinite; }
@keyframes co-pulse { 0%,100% { opacity:1 } 50% { opacity:0.3 } }
.copilot-reopen-btn { margin-left:auto; background:none; border:1px solid #34d39944; color:#34d399; border-radius:4px; padding:2px 8px; font-size:0.72rem; cursor:pointer; }
.copilot-popover { background:var(--bg); border:1px solid #7c3aed33; border-radius:var(--radius-xs); padding:0.85rem; display:flex; flex-direction:column; gap:0.6rem; }
.copilot-popover-inner  { display:flex; flex-direction:column; gap:0.3rem; }
.copilot-popover-label  { font-size:0.72rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.copilot-name-input { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xs); color:var(--text); padding:0.5rem 0.7rem; font-size:0.85rem; width:100%; outline:none; font-family:var(--font); }
.copilot-name-input:focus { border-color:#7c3aed; box-shadow:0 0 0 2px #7c3aed22; }
.copilot-popover-actions { display:flex; gap:0.5rem; align-items:center; }
.copilot-cancel-btn  { background:none; border:1px solid var(--border); color:var(--text-muted); border-radius:var(--radius-xs); padding:0.45rem 0.85rem; font-size:0.8rem; cursor:pointer; font-family:var(--font); }
.copilot-cancel-btn:hover { border-color:var(--text-muted); color:var(--text); }
.copilot-confirm-btn { display:inline-flex; align-items:center; gap:0.35rem; background:#7c3aed; color:#fff; border:none; border-radius:var(--radius-xs); padding:0.45rem 1rem; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:var(--font); transition:background 0.2s; }
.copilot-confirm-btn:hover { background:#6d28d9; }
.copilot-confirm-btn:disabled { background:#374151; cursor:not-allowed; }
.copilot-tip { display:flex; align-items:flex-start; gap:0.3rem; font-size:0.72rem; color:#6b7280; line-height:1.4; }
.copilot-launch-status { font-size:0.75rem; color:var(--text-muted); min-height:1rem; }
.copilot-launch-status.success { color:#34d399; }
.copilot-launch-status.error   { color:#f87171; }

/* ===== Briefing Modal ===== */
.briefing-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(3px); animation:fadeIn 0.2s ease; }
.briefing-modal { background:#12121e; border:1px solid #2a2a3e; border-radius:14px; width:100%; max-width:580px; max-height:85vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,0.6); animation:popIn 0.25s var(--ease-spring); }
.briefing-modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #1e1e2e; flex-shrink:0; }
.briefing-modal-title  { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#f0f0f0; }
.briefing-close-btn    { background:none; border:none; color:#6b7280; cursor:pointer; font-size:16px; padding:4px 8px; border-radius:6px; }
.briefing-close-btn:hover { background:#1e1e2e; color:#f0f0f0; }
.briefing-modal-content { overflow-y:auto; padding:20px; flex:1; display:flex; flex-direction:column; gap:16px; }
.briefing-modal-footer  { padding:14px 20px; border-top:1px solid #1e1e2e; flex-shrink:0; display:flex; justify-content:flex-end; }
.briefing-start-btn { background:#7c3aed; color:#fff; border:none; border-radius:8px; padding:9px 24px; font-size:14px; font-weight:600; cursor:pointer; transition:background 0.2s; }
.briefing-start-btn:hover { background:#6d28d9; }
.briefing-summary { font-size:13px; color:#d1d5db; line-height:1.6; background:#1e1e2e; border-radius:8px; padding:12px 14px; }
.briefing-section { display:flex; flex-direction:column; gap:6px; }
.briefing-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; display:flex; align-items:center; gap:5px; margin-bottom:2px; }
.briefing-green  { color:#34d399; } .briefing-purple { color:#a78bfa; }
.briefing-orange { color:#fb923c; } .briefing-gray   { color:#6b7280; }
.briefing-item { font-size:13px; line-height:1.5; border-radius:7px; padding:8px 12px; display:flex; gap:8px; align-items:flex-start; }
.briefing-item-green  { background:#064e3b33; color:#d1fae5; border-left:2px solid #34d399; }
.briefing-item-purple { background:#1e1b4b33; color:#ede9fe; border-left:2px solid #a78bfa; }
.briefing-item-orange { background:#431407aa; color:#fed7aa; border-left:2px solid #fb923c; }
.briefing-num { font-size:10px; font-weight:700; color:#a78bfa; background:#1e1b4b; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.briefing-missing-tags { display:flex; flex-wrap:wrap; gap:6px; }
.briefing-missing-tag  { font-size:11px; color:#9ca3af; background:#1e1e2e; border:1px solid #374151; border-radius:20px; padding:3px 10px; }
.briefing-loading { display:flex; flex-direction:column; align-items:center; gap:16px; padding:40px 20px; color:#6b7280; font-size:13px; }
.briefing-spinner { width:32px; height:32px; border:3px solid #1e1e2e; border-top-color:#a78bfa; border-radius:50%; animation:spin 0.8s linear infinite; }

/* ===== Copilot Overlay ===== */
.copilot-overlay { position:fixed; bottom:24px; right:24px; width:340px; height:520px; min-width:260px; min-height:180px; max-width:680px; max-height:90vh; background:#0f0f0f; border:1px solid #2a2a3e; border-radius:10px; box-shadow:0 8px 32px rgba(0,0,0,0.6); z-index:9999; font-family:system-ui,sans-serif; display:flex; flex-direction:column; overflow:hidden; }
.co-resize-e  { position:absolute; top:36px; right:0; bottom:16px; width:8px; cursor:e-resize; z-index:10; }
.co-resize-e:hover  { background:#a78bfa22; }
.co-resize-s  { position:absolute; bottom:0; left:16px; right:16px; height:8px; cursor:s-resize; z-index:10; }
.co-resize-s:hover  { background:#a78bfa22; }
.co-resize-se { position:absolute; bottom:0; right:0; width:18px; height:18px; cursor:se-resize; z-index:11; border-bottom-right-radius:10px; background-image:radial-gradient(circle,#4b5563 1.5px,transparent 1.5px); background-size:5px 5px; background-position:3px 3px; background-repeat:repeat; clip-path:polygon(100% 0,100% 100%,0 100%); }
.co-resize-se:hover { background-color:#a78bfa22; }
.co-header { background:#1a1a2e; padding:8px 10px; display:flex; align-items:center; justify-content:space-between; cursor:grab; border-bottom:1px solid #2a2a3e; flex-shrink:0; user-select:none; }
.co-header:active { cursor:grabbing; }
.co-hdr-left  { display:flex; align-items:center; gap:6px; min-width:0; }
.co-hdr-right { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.co-dot { width:7px; height:7px; border-radius:50%; background:#4b5563; flex-shrink:0; }
.co-dot.co-dot-live { background:#34d399; animation:co-pulse 1.5s infinite; }
.co-title  { font-size:12px; font-weight:700; color:#a78bfa; flex-shrink:0; }
.co-status { font-size:10px; color:#4b5563; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.co-btn { background:none; border:none; color:#6b7280; cursor:pointer; font-size:13px; padding:2px 5px; line-height:1; border-radius:4px; text-decoration:none; display:inline-flex; }
.co-btn:hover { color:#a78bfa; background:#1e1b4b44; }
.co-size-btn  { font-size:9px; padding:2px 4px; }
.co-close:hover { color:#f87171; }
.co-body { display:flex; flex-direction:column; gap:6px; padding:10px; overflow-y:auto; flex:1; }
.co-section-label { font-size:9px; text-transform:uppercase; letter-spacing:1px; color:#4b5563; }
.co-suggestion { background:#1e293b; border-left:3px solid #a78bfa; border-radius:6px; padding:8px 10px; }
.co-suggestion.co-suggestion-new { border-left-color:#34d399; animation:co-flash 1.2s ease-out; }
@keyframes co-flash { 0% { background:#064e3b } 100% { background:#1e293b } }
.co-suggestion-text { font-size:13px; font-weight:600; color:#f0f0f0; line-height:1.4; margin-bottom:3px; }
.co-suggestion-meta { font-size:10px; color:#6b7280; }
.co-transcript  { background:#1a1a1a; border-radius:6px; padding:7px 9px; max-height:120px; overflow-y:auto; }
.co-tx-line { font-size:11px; line-height:1.5; color:#d1d5db; }
.co-spk { font-weight:600; }
.co-spk-designer { color:#60a5fa; } .co-spk-customer { color:#34d399; } .co-spk-unknown { color:#9ca3af; }
.co-extraction { background:#1a1a1a; border-radius:6px; padding:8px 10px; }
.co-score { font-size:11px; color:#9ca3af; margin-bottom:5px; }
.co-ext-row { display:flex; gap:6px; font-size:11px; padding:1px 0; }
.co-ext-key { color:#93c5fd; min-width:80px; flex-shrink:0; }
.co-ext-val { color:#e0e0e0; word-break:break-word; }
.co-apply-btn { background:#7c3aed; color:#fff; border:none; border-radius:5px; padding:5px 12px; font-size:11px; font-weight:600; cursor:pointer; }
.co-apply-btn:hover { background:#6d28d9; }
.co-apply-btn:disabled { background:#374151; color:#6b7280; cursor:not-allowed; }
.co-full-btn { background:none; border:1px solid #374151; color:#9ca3af; border-radius:5px; padding:5px 10px; font-size:11px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
.co-full-btn:hover { border-color:#a78bfa; color:#a78bfa; }

/* ===== Place Call ===== */
.call-action-bar { display:flex; align-items:center; gap:0.6rem; padding:0.65rem 0.9rem; background:var(--primary-light); border:1px solid var(--border); border-radius:var(--radius-xs); margin-bottom:1rem; flex-wrap:wrap; }
.call-action-bar select { padding:0.38rem 0.55rem; border:1px solid var(--border); border-radius:6px; font-size:0.82rem; font-family:var(--font); color:var(--text); background:#fff; cursor:pointer; }
.call-action-bar select:disabled { opacity:0.5; cursor:not-allowed; }
.btn-place-call { display:inline-flex; align-items:center; gap:0.35rem; padding:0.42rem 1rem; background:var(--primary); color:#fff; border:none; border-radius:6px; font-size:0.82rem; font-weight:600; font-family:var(--font); cursor:pointer; transition:background var(--t-fast), transform var(--t-fast); }
.btn-place-call:hover:not(:disabled) { background:var(--primary-dark); transform:translateY(-1px); }
.btn-place-call:active { transform:translateY(0); }
.btn-place-call:disabled { opacity:0.55; cursor:not-allowed; }
.call-action-status { font-size:0.78rem; color:var(--text-secondary); font-style:italic; }

/* ===== Toast ===== */
.toast {
  position:fixed; bottom:1.5rem; left:50%;
  transform:translateX(-50%) translateY(1rem);
  padding:0.7rem 1.3rem; border-radius:10px;
  font-size:0.88rem; font-weight:500; font-family:var(--font);
  box-shadow:0 6px 24px rgba(0,0,0,0.2);
  opacity:0; transition:opacity var(--t-base), transform var(--t-base) var(--ease-spring);
  z-index:9999; pointer-events:none; white-space:nowrap;
  display:flex; align-items:center; gap:0.5rem;
}
.toast-visible { opacity:1; transform:translateX(-50%) translateY(0); }
.toast-success { background:#166534; color:#dcfce7; }
.toast-error   { background:#991b1b; color:#fee2e2; }

/* ===== Scrollbar (global) ===== */
::-webkit-scrollbar       { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(28,16,8,0.12); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:rgba(28,16,8,0.22); }

/* ===== Responsive ===== */
@media (max-width:640px) {
  html { font-size:14px; }
  .container { padding:0.75rem 0.5rem 3rem; }
  .navbar { padding:0 0.6rem; height:auto; min-height:48px; flex-wrap:wrap; gap:0.25rem; padding-top:0.4rem; padding-bottom:0.4rem; }
  .nav-brand { gap:0.3rem; }
  .brand-icon { font-size:1.1rem; }
  .brand-logo { width:24px; height:24px; }
  .brand-magical { font-size:0.88rem; }
  .brand-sub, .brand-divider { display:none; }
  .nav-tabs { margin-left:0.4rem; gap:0.15rem; }
  .nav-tab  { font-size:0.72rem; padding:0.3rem 0.5rem; gap:0.2rem; }
  .nav-tab .material-symbols-rounded { font-size:0.9rem !important; }
  .nav-right { gap:0.4rem; }
  .nav-user  { font-size:0.72rem; gap:0.3rem; }
  .nav-user span:not(.nav-avatar):not(img) { max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .nav-avatar { width:24px; height:24px; }
  .btn-logout { font-size:0.68rem; padding:0.25rem 0.5rem; }
  .detail-header { padding:0.75rem; }
  .detail-top-row { gap:0.6rem; }
  .detail-avatar { width:44px; height:44px; font-size:1.05rem; }
  .detail-name  { font-size:1.05rem; }
  .detail-phone { font-size:0.78rem; }
  .detail-badges { gap:0.3rem; }
  .detail-badges .badge { font-size:0.65rem; padding:0.15rem 0.4rem; }
  .detail-fields { grid-template-columns:1fr 1fr; gap:0.1rem 0.5rem; }
  .detail-fields .field-label { font-size:0.6rem; }
  .detail-fields .field-value { font-size:0.78rem; }
  .tabs { overflow-x:auto; }
  .tab  { font-size:0.72rem; padding:0.5rem 0.3rem; }
  .chat-msg { max-width:88%; }
  .chat-inbound::before, .chat-outbound::before { display:none; }
  .wa-container { max-height:55vh; }
  .rg-grid { grid-template-columns:1fr; }
  .esc-page-header { flex-direction:column; align-items:flex-start; gap:0.5rem; }
  .esc-filters { flex-wrap:wrap; }
  .esc-filter { font-size:0.7rem; padding:0.3rem 0.55rem; }
  .esc-row-card { flex-wrap:wrap; gap:0.5rem; padding:0.7rem; }
  .esc-row-left { min-width:unset; }
  .esc-row-right { flex-wrap:wrap; gap:0.3rem; }
  .esc-row-avatar { width:36px; height:36px; font-size:0.72rem; }
  .search-bar { font-size:0.88rem; padding:0.65rem 0.65rem 0.65rem 2.2rem; }
  .lead-card  { padding:0.6rem; }
  .lead-avatar { width:38px; height:38px; font-size:0.78rem; }
  .lead-name  { font-size:0.82rem; }
  .lead-phone { font-size:0.7rem; }
}