/* ===========================================
   Integra Phone — Repaginação 2026
   Tokens (dark + light), tipografia, base
   =========================================== */

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

:root {
  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Raios */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.18);

  /* Easing */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);

  /* Densidade */
  --row-h: 68px;
  --sidebar-w: 340px;
  --drawer-w: 380px;
}

/* ============ DARK (default) ============ */
[data-theme="dark"], :root:not([data-theme="light"]) {
  --bg-app: oklch(0.18 0.02 255);            /* fundo do app — azul-petróleo profundo */
  --bg-surface: oklch(0.22 0.022 255);       /* sidebars, panels */
  --bg-surface-2: oklch(0.26 0.025 255);     /* cards elevados */
  --bg-surface-3: oklch(0.30 0.027 255);     /* hover, inputs */
  --bg-chat: oklch(0.16 0.018 255);          /* área de mensagens */

  --border: oklch(0.32 0.022 255);
  --border-strong: oklch(0.40 0.025 255);

  --text: oklch(0.97 0.005 255);
  --text-muted: oklch(0.72 0.015 255);
  --text-subtle: oklch(0.55 0.018 255);

  --accent: oklch(0.68 0.14 240);            /* azul Integra */
  --accent-fg: oklch(0.99 0 0);
  --accent-soft: oklch(0.30 0.08 240);

  --call: oklch(0.72 0.15 155);              /* verde chamada */
  --call-soft: oklch(0.32 0.09 155);
  --danger: oklch(0.65 0.22 25);
  --warn: oklch(0.78 0.16 75);

  --bubble-out: oklch(0.42 0.13 240);        /* balão agente — azul */
  --bubble-out-fg: oklch(0.99 0 0);
  --bubble-in: oklch(0.28 0.022 255);        /* balão cliente */
  --bubble-in-fg: oklch(0.97 0.005 255);

  --pattern-opacity: 0.025;
}

/* ============ LIGHT ============ */
[data-theme="light"] {
  --bg-app: oklch(0.985 0.003 255);
  --bg-surface: oklch(1 0 0);
  --bg-surface-2: oklch(0.97 0.005 255);
  --bg-surface-3: oklch(0.94 0.008 255);
  --bg-chat: oklch(0.975 0.005 255);

  --border: oklch(0.91 0.008 255);
  --border-strong: oklch(0.85 0.012 255);

  --text: oklch(0.22 0.022 255);
  --text-muted: oklch(0.48 0.015 255);
  --text-subtle: oklch(0.62 0.012 255);

  --accent: oklch(0.55 0.16 240);
  --accent-fg: oklch(1 0 0);
  --accent-soft: oklch(0.93 0.03 240);

  --call: oklch(0.58 0.16 155);
  --call-soft: oklch(0.93 0.04 155);
  --danger: oklch(0.58 0.22 25);
  --warn: oklch(0.68 0.16 75);

  --bubble-out: oklch(0.55 0.16 240);
  --bubble-out-fg: oklch(1 0 0);
  --bubble-in: oklch(1 0 0);
  --bubble-in-fg: oklch(0.22 0.022 255);

  --pattern-opacity: 0.04;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root { height: 100vh; }

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

/* ============ Scrollbars ============ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; border: 2px solid transparent; }

/* ============ App Shell ============ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  background: var(--bg-app);
}

.app[data-drawer="open"] {
  grid-template-columns: var(--sidebar-w) 1fr var(--drawer-w);
}

/* ============ Sidebar ============ */
.sidebar {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  min-width: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-dot {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--accent), oklch(0.55 0.18 195));
  display: grid; place-items: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px oklch(0.55 0.18 240 / 0.35);
}
.brand-logo {
  width: 80px; height: 80px;
  object-fit: contain;
}
.brand-actions {
  display: flex;
  gap: 4px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  transition: all 0.15s var(--ease);
}
.icon-btn:hover {
  background: var(--bg-surface-3);
  color: var(--text);
}
.icon-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* User row (ramal) */
.me-card {
  margin: 12px 12px 8px;
  padding: 10px 12px;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
}
.me-avatar {
  position: relative;
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  background: var(--accent-soft);
  display: grid; place-items: center;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
}
.me-avatar::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--call);
  border: 2px solid var(--bg-surface-2);
}
.me-avatar[data-status="connecting"]::after { background: var(--warn); }
.me-avatar[data-status="offline"]::after { background: var(--text-subtle); }

.me-info { flex: 1; min-width: 0; }
.me-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.me-status {
  font-size: 11.5px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}
.me-status .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--call); }
.me-status.dnd { color: var(--danger); font-weight: 600; }
.me-status.dnd .dot { background: var(--danger); }
.me-status.auto-answer { color: var(--call); font-weight: 600; }
.me-status.auto-answer .dot { background: var(--call); }
.me-actions .icon-btn.aa-active { color: var(--call); }

.me-actions {
  display: flex;
  gap: 2px;
}

/* Search */
.search-wrap {
  padding: 4px 12px 10px;
  display: flex;
  gap: 6px;
}
.search-input {
  flex: 1;
  position: relative;
}
.search-input svg {
  position: absolute;
  left: 10px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-subtle);
  pointer-events: none;
}
.search-input input {
  width: 100%;
  height: 36px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 12px 0 34px;
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.search-input input:focus {
  border-color: var(--accent);
  background: var(--bg-surface-3);
}
.search-input input::placeholder { color: var(--text-subtle); }

/* Filter chips */
.filter-chips {
  display: flex;
  gap: 6px;
  padding: 0 12px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s var(--ease);
}
.chip:hover { background: var(--bg-surface-3); color: var(--text); }
.chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}
.chip .count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  opacity: 0.85;
}

/* Conversation list */
.convo-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 12px;
}
.convo {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 10px 10px;
  border-radius: var(--r-md);
  cursor: pointer;
  position: relative;
  transition: background 0.12s;
}
.convo:hover { background: var(--bg-surface-2); }
.convo.active {
  background: var(--accent-soft);
}
[data-theme="light"] .convo.active {
  background: var(--accent-soft);
}
.convo.active .convo-name { color: var(--accent); }

.convo-avatar {
  position: relative;
  width: 44px; height: 44px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 15px;
  color: var(--accent-fg);
  flex-shrink: 0;
  overflow: hidden;
}
.convo-avatar.tone-1 { background: linear-gradient(135deg, oklch(0.62 0.16 30), oklch(0.55 0.18 15)); }
.convo-avatar.tone-2 { background: linear-gradient(135deg, oklch(0.62 0.16 200), oklch(0.55 0.16 230)); }
.convo-avatar.tone-3 { background: linear-gradient(135deg, oklch(0.62 0.16 145), oklch(0.55 0.16 165)); }
.convo-avatar.tone-4 { background: linear-gradient(135deg, oklch(0.65 0.16 80), oklch(0.58 0.18 55)); }
.convo-avatar.tone-5 { background: linear-gradient(135deg, oklch(0.62 0.18 320), oklch(0.55 0.18 290)); }
.convo-avatar.tone-6 { background: linear-gradient(135deg, oklch(0.60 0.14 260), oklch(0.52 0.16 280)); }

.convo-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.convo-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.convo-name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.convo-name.is-num { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em; }
.convo-time {
  font-size: 11px;
  color: var(--text-subtle);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.convo-bottom { display: flex; align-items: center; gap: 6px; }
.convo-preview {
  font-size: 12px;
  color: var(--text-muted);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 5px;
}
.convo-type {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.type-missed { color: var(--danger); }
.type-incoming { color: var(--call); }
.type-outgoing { color: var(--accent); }
.type-whatsapp { color: oklch(0.65 0.16 145); }

.convo-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.unread-badge {
  min-width: 18px; height: 18px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: var(--r-full);
  font-size: 10.5px;
  font-weight: 600;
  padding: 0 6px;
  display: grid; place-items: center;
  font-variant-numeric: tabular-nums;
}
.unread-badge.missed { background: var(--danger); }

/* Sidebar footer */
.sidebar-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-subtle);
}

/* ============ Theme toggle ============ */
.theme-toggle {
  position: relative;
  display: inline-flex;
  background: var(--bg-surface-3);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 0;
}
.theme-toggle button {
  width: 26px; height: 26px;
  border: none;
  background: transparent;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  color: var(--text-subtle);
  transition: all 0.2s var(--ease);
}
.theme-toggle button.active {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* ============ Chat panel ============ */
.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-chat);
  position: relative;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  height: 64px;
  flex-shrink: 0;
}
.chat-header .convo-avatar { width: 38px; height: 38px; font-size: 14px; }
.chat-title { flex: 1; min-width: 0; cursor: pointer; }
.chat-title h2 {
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}
.chat-title .sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 1px;
  display: flex; align-items: center; gap: 5px;
}
.chat-title .sub .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--call); }
.chat-actions {
  display: flex;
  gap: 2px;
  align-items: center;
}
.chat-actions .icon-btn { width: 36px; height: 36px; }
.chat-actions .divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }

/* call button accent */
.icon-btn.call-btn { color: var(--call); }
.icon-btn.call-btn:hover { background: oklch(from var(--call) l c h / 0.12); color: var(--call); }

/* Messages */
.messages {
  flex: 1;
  overflow-y: auto;
  padding: 24px 0 12px;
  position: relative;
  scroll-behavior: smooth;
}
.messages::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><circle cx='10' cy='10' r='1' fill='currentColor'/><circle cx='40' cy='30' r='1' fill='currentColor'/><circle cx='70' cy='15' r='1' fill='currentColor'/><circle cx='20' cy='55' r='1' fill='currentColor'/><circle cx='55' cy='65' r='1' fill='currentColor'/></svg>");
  opacity: var(--pattern-opacity);
  pointer-events: none;
  color: var(--text);
}

.messages-inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Date divider */
.date-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 18px 0 10px;
}
.date-divider span {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  padding: 4px 12px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Bubble */
.msg-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.msg-row.out { justify-content: flex-end; }
.msg-row.in { justify-content: flex-start; }

.msg-author {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 4px;
  margin-left: 12px;
}
.msg-row.out .msg-author { text-align: right; margin-left: 0; margin-right: 12px; }

.msg-group {
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.bubble {
  padding: 8px 13px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
}
.msg-row.out .bubble {
  background: var(--bubble-out);
  color: var(--bubble-out-fg);
  border-bottom-right-radius: 6px;
}
.msg-row.in .bubble {
  background: var(--bubble-in);
  color: var(--bubble-in-fg);
  border-bottom-left-radius: 6px;
  border: 1px solid var(--border);
}

.bubble-time {
  font-size: 10.5px;
  opacity: 0.7;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.msg-row.out .bubble-time { color: var(--bubble-out-fg); }
.msg-row.in .bubble-time { color: var(--text-muted); }

/* group spacing — when consecutive same-side */
.msg-row + .msg-row.same { margin-top: -4px; }
.msg-row.same .msg-author { display: none; }

/* ============ Call summary card ============ */
.call-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  margin: 0 0 12px;
  box-shadow: var(--shadow-sm);
}
.call-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.call-icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: oklch(from var(--call) l c h / 0.15);
  color: var(--call);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.call-icon.missed { background: oklch(from var(--danger) l c h / 0.15); color: var(--danger); }
.call-meta { flex: 1; min-width: 0; }
.call-meta h3 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.call-meta .call-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex; gap: 10px; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.call-meta .call-sub .pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Audio player */
.audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.play-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform 0.1s;
}
.play-btn:hover { transform: scale(1.06); }
.play-btn:active { transform: scale(0.96); }

.waveform {
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  position: relative;
  cursor: pointer;
}
.waveform .bar {
  flex: 1;
  background: var(--border-strong);
  border-radius: 2px;
  transition: background 0.15s;
}
.waveform .bar.played { background: var(--accent); }

.audio-time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  min-width: 70px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.call-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.btn {
  height: 34px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.12s var(--ease);
}
.btn:hover { background: var(--bg-surface-3); border-color: var(--border-strong); }
.btn.primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.btn.primary:hover { background: oklch(from var(--accent) calc(l - 0.04) c h); }
.btn.ghost { background: transparent; }

/* Transcript divider */
.transcript-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.transcript-marker .line { flex: 1; height: 1px; background: var(--border); }

/* ============ System messages (legacy 'fez chamada') ============ */
.system-msg {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}
.system-msg .pill {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: var(--r-full);
  font-size: 12px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.system-msg .pill svg { color: var(--call); }

/* ============ Composer ============ */
.composer {
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 12px 18px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.composer-input {
  flex: 1;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  transition: border-color 0.15s;
}
.composer-input:focus-within { border-color: var(--accent); }
.composer-input textarea {
  flex: 1;
  background: transparent;
  border: none;
  resize: none;
  outline: none;
  color: var(--text);
  font-size: 13.5px;
  line-height: 1.5;
  max-height: 120px;
  min-height: 22px;
  font-family: var(--font-sans);
}
.composer-input textarea::placeholder { color: var(--text-subtle); }

.send-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: transform 0.1s, background 0.15s;
}
.send-btn:hover { background: oklch(from var(--accent) calc(l - 0.04) c h); }
.send-btn:active { transform: scale(0.94); }
.send-btn:disabled { background: var(--border); color: var(--text-subtle); cursor: not-allowed; }

/* ============ Drawer (info do contato) ============ */
.drawer {
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  height: 64px;
}
.drawer-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.drawer-body { padding: 24px 18px; }
.drawer-avatar {
  width: 88px; height: 88px;
  border-radius: var(--r-full);
  margin: 0 auto 14px;
  font-size: 30px;
}
.drawer-name {
  text-align: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 4px;
}
.drawer-handle {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.drawer-quick-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 22px;
}
.qa {
  width: 56px;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}
.qa .qa-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--accent);
  transition: all 0.15s var(--ease);
}
.qa:hover .qa-icon { background: var(--accent-soft); border-color: var(--accent); }
.qa.danger .qa-icon { color: var(--danger); }
.qa.danger:hover .qa-icon { background: oklch(from var(--danger) l c h / 0.15); border-color: var(--danger); }

.drawer-section {
  border-top: 1px solid var(--border);
  padding: 16px 18px;
}
.drawer-section h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-section h4 .count {
  font-family: var(--font-mono);
  background: var(--bg-surface-2);
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-size: 10px;
  border: 1px solid var(--border);
  text-transform: none;
  letter-spacing: 0;
}

.recording-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 10px;
  border-radius: var(--r-md);
  margin: 0 -8px;
  transition: background 0.12s;
}
.recording-item:hover { background: var(--bg-surface-2); }
.recording-item .rec-play {
  width: 32px; height: 32px;
  border-radius: var(--r-full);
  background: oklch(from var(--call) l c h / 0.15);
  color: var(--call);
  border: none;
  display: grid; place-items: center;
}
.recording-item .rec-play:hover { background: var(--call); color: var(--accent-fg); }
.rec-info { min-width: 0; }
.rec-date { font-size: 12.5px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.rec-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; font-family: var(--font-mono); }
.rec-dl {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: transparent;
  border: none;
  color: var(--text-muted);
  display: grid; place-items: center;
}
.rec-dl:hover { background: var(--bg-surface-3); color: var(--text); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--r-full);
  font-size: 11.5px;
  color: var(--text-muted);
}

.note {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  min-height: 64px;
}

/* ============ Empty state ============ */
.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
}
.empty-mark {
  width: 72px; height: 72px;
  border-radius: var(--r-xl);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 18px;
}
.empty-state h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 6px;
}
.empty-state p {
  font-size: 13px;
  max-width: 360px;
  line-height: 1.55;
  margin: 0 0 20px;
}
.empty-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin-top: 8px;
}
.stat {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: left;
}
.stat .v {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat .l {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat .delta { font-size: 10.5px; color: var(--call); margin-top: 4px; font-family: var(--font-mono); }
.stat .delta.down { color: var(--danger); }

/* ============ Dialer modal ============ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.5);
  display: grid;
  place-items: center;
  z-index: 100;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.dialer {
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  width: 320px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  animation: pop 0.2s var(--ease);
}
@keyframes pop { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.dialer-display {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.02em;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.dialer-display.empty { color: var(--text-subtle); }

.dialer-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.dial-key {
  height: 56px;
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.1s var(--ease);
  line-height: 1;
}
.dial-key span {
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-subtle);
  margin-top: 3px;
  font-family: var(--font-sans);
}
.dial-key:hover { background: var(--bg-surface-3); border-color: var(--accent); }
.dial-key:active { transform: scale(0.96); }

.dialer-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.dialer-actions .btn { flex: 1; height: 44px; justify-content: center; }
.dial-call {
  background: var(--call);
  color: white;
  border-color: var(--call);
  font-weight: 600;
}
.dial-call:hover { background: oklch(from var(--call) calc(l - 0.04) c h); }
.dial-bksp {
  width: 44px; height: 44px; flex: 0 0 44px;
}

/* ============ Tweaks tweaks panel custom ============ */
/* ============ Search overlay in chat ============ */
.search-bar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.search-bar input {
  flex: 1;
  height: 34px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 12px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.search-bar input:focus { border-color: var(--accent); }

/* ============ Toast ============ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--text);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toastIn 0.25s var(--ease);
}
.toast .ok { color: var(--call); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ============ Density variant ============ */
[data-density="compact"] .convo { padding: 7px 10px; }
[data-density="compact"] .convo-avatar { width: 38px; height: 38px; }
[data-density="compact"] .convo-name { font-size: 13px; }
[data-density="compact"] .me-card { padding: 8px 10px; }

/* ============ Bubble style variant ============ */
[data-bubbles="square"] .bubble { border-radius: 8px !important; }
[data-bubbles="minimal"] .bubble {
  background: transparent !important;
  border: none !important;
  padding: 4px 0 !important;
  color: var(--text) !important;
}
[data-bubbles="minimal"] .msg-row.out .bubble { color: var(--accent) !important; }

/* ============ MVP additions: call entry, hint, in-call modal, settings ============ */
.call-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin: 6px 0;
}
.call-entry .call-icon { width: 36px; height: 36px; border-radius: var(--r-sm); }
.call-entry-meta { flex: 1; min-width: 0; }
.call-entry-title { font-size: 13px; font-weight: 600; color: var(--text); }
.call-entry-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }

.mvp-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 28px auto;
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-full);
  width: fit-content;
}

/* History item in drawer */
.history-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  margin: 0 -8px;
}
.history-item:hover { background: var(--bg-surface-2); }
.call-icon-mini {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.call-icon-mini.in { background: oklch(from var(--call) l c h / 0.15); color: var(--call); }
.call-icon-mini.out { background: oklch(from var(--accent) l c h / 0.15); color: var(--accent); }

/* ============ In-Call modal ============ */
.incall {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  width: 380px;
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-lg);
  animation: pop 0.22s var(--ease);
  position: relative;
}
.incall-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.incall-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.state-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px oklch(from var(--call) l c h / 0.15);
}
.incall-timer {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
}

.incall-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 18px;
  position: relative;
}
.incall-avatar {
  width: 96px; height: 96px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 32px;
  font-weight: 600;
  color: white;
  margin-bottom: 14px;
  position: relative;
}
.incall-avatar[data-pulse="true"]::before,
.incall-avatar[data-pulse="true"]::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.3;
  animation: pulse 1.6s ease-out infinite;
}
.incall-avatar[data-pulse="true"]::after { animation-delay: 0.8s; }
@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 0; }
}

.incall-name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 18px;
  color: var(--text);
  letter-spacing: -0.01em;
}
.incall-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.incall-volume {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  color: var(--text-muted);
}
.incall-volume input[type="range"] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  outline: none;
}
.incall-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}
.vol-pct { font-family: var(--font-mono); font-size: 11px; min-width: 32px; text-align: right; }

.incall-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 18px;
}
.call-action-sm { grid-column: span 1; }
.call-action-lg { grid-column: span 1; }
.call-action {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.12s var(--ease);
}
.call-action:hover { background: var(--bg-surface-3); color: var(--text); }
.call-action.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
}
.ca-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
}

.incall-bottom {
  display: flex;
  gap: 10px;
}
.big-btn {
  flex: 1;
  height: 56px;
  border-radius: var(--r-lg);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: white;
  transition: transform 0.1s var(--ease), background 0.15s;
}
.big-btn:active { transform: scale(0.97); }
.big-btn.accept { background: var(--call); }
.big-btn.accept:hover { background: oklch(from var(--call) calc(l - 0.04) c h); }
.big-btn.decline { background: var(--danger); }
.big-btn.decline:hover { background: oklch(from var(--danger) calc(l - 0.04) c h); }
.big-btn.solo { flex: 1; }

.ended-msg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 14px;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  font-variant-numeric: tabular-nums;
}

/* DTMF/transfer overlays inside in-call — cover entire modal */
.dtmf-panel, .transfer-panel {
  position: absolute;
  top: 50px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
  animation: fadeIn 0.15s var(--ease);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.dtmf-panel .dialer-pad {
  flex: 1;
  margin-bottom: 0;
  min-height: 0;
}
.dtmf-panel .dial-key {
  height: auto;
  min-height: 44px;
}
.dtmf-display {
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 20px;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  color: var(--text);
  letter-spacing: 0.05em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.transfer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  font-size: 13px;
}
.transfer-body { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.transfer-search {
  position: relative;
  display: flex;
  align-items: center;
}
.transfer-search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle);
}
.transfer-search input {
  width: 100%;
  height: 34px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 12px 0 32px;
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.transfer-search input:focus { border-color: var(--accent); }
.transfer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--r-sm);
}
.transfer-row:hover { background: var(--bg-surface-2); }
.transfer-row .btn { padding: 0 10px; height: 28px; font-size: 11.5px; }

/* Operation notes inside panels */
.op-note {
  font-size: 11.5px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
  text-align: center;
}
.op-note-warn {
  color: var(--warn, #f59e0b);
}

/* Transfer mode tabs */
.transfer-mode-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg-surface-2);
  border-radius: var(--r-md);
  padding: 3px;
  flex-shrink: 0;
}
.transfer-mode-tab {
  flex: 1;
  height: 27px;
  border-radius: var(--r-sm);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.transfer-mode-tab.active {
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* Attended transfer progress overlay */
.attended-transfer-panel {
  position: absolute;
  top: 50px;
  left: 14px;
  right: 14px;
  bottom: 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 5;
  animation: fadeIn 0.15s var(--ease);
  box-shadow: var(--shadow-md);
}
.atp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.atp-parties {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.atp-party {
  border-radius: var(--r-md);
  padding: 10px 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-left-color: var(--border-strong);
}
.atp-party--hold { border-left-color: var(--warn); }
.atp-party--consult.atp-party--connected { border-left-color: var(--call); }
.atp-party-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.atp-party--hold .atp-party-label { color: var(--warn); }
.atp-party--consult.atp-party--connected .atp-party-label { color: var(--call); }
.atp-party-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.atp-party-info { flex: 1; min-width: 0; }
.atp-party-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atp-party-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.atp-arrow {
  text-align: center;
  color: var(--text-subtle);
  font-size: 13px;
  line-height: 1;
  padding: 1px 0;
}
.atp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.atp-dot.trying { background: var(--text-subtle); }
.atp-dot.ringing { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.atp-dot.connected { background: var(--call); }
.atp-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}
.atp-btn-complete {
  background: var(--call) !important;
  color: #fff !important;
  justify-content: center;
  height: 40px;
  font-size: 13px;
  font-weight: 600;
}
.atp-btn-end {
  background: transparent !important;
  color: var(--text-muted);
  border: 1px solid var(--border) !important;
  justify-content: center;
  height: 36px;
}
.atp-btn-cancel {
  background: transparent !important;
  color: var(--danger, #e05) !important;
  border: 1px solid var(--danger, #e05) !important;
  justify-content: center;
  height: 36px;
}

/* ============ Settings modal ============ */
.settings-modal {
  display: grid;
  grid-template-columns: 220px 1fr;
  width: min(880px, 92vw);
  height: min(640px, 88vh);
  background: var(--bg-surface);
  border-radius: var(--r-xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: pop 0.22s var(--ease);
}
.settings-nav {
  background: var(--bg-app);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.settings-nav-head {
  padding: 16px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.settings-nav nav {
  flex: 1;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow-y: auto;
}
.settings-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: left;
  transition: all 0.12s;
}
.settings-nav-btn:hover { background: var(--bg-surface-2); color: var(--text); }
.settings-nav-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.settings-nav-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-main {
  padding: 28px 32px;
  overflow-y: auto;
}
.settings-h {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.settings-sh {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 22px 0 8px;
  font-weight: 600;
}
.settings-p {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 22px;
}

.setting-field { margin-bottom: 16px; }
.setting-field-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.setting-field-head label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
}
.setting-field-head .hint {
  font-size: 11px;
  color: var(--text-subtle);
  font-family: var(--font-mono);
}

.input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: var(--font-sans);
}
.input.mono { font-family: var(--font-mono); }
.input:focus { border-color: var(--accent); }
.input:disabled { opacity: 0.6; }
select.input { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }

.settings-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }

.tgl {
  width: 36px; height: 22px;
  border-radius: 999px;
  background: var(--border);
  border: none;
  position: relative;
  transition: background 0.18s;
  flex-shrink: 0;
}
.tgl-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: left 0.18s var(--ease);
}
.tgl.on { background: var(--accent); }
.tgl.on .tgl-knob { left: 16px; }

.danger-zone {
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid oklch(from var(--danger) l c h / 0.4);
  border-radius: var(--r-md);
  background: oklch(from var(--danger) l c h / 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.btn.danger {
  background: oklch(from var(--danger) l c h / 0.15);
  color: var(--danger);
  border-color: oklch(from var(--danger) l c h / 0.3);
}
.btn.danger:hover { background: var(--danger); color: white; }

.meter {
  margin-bottom: 16px;
}
.meter-label {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.meter-bar {
  display: flex;
  gap: 3px;
  height: 18px;
  align-items: center;
}
.meter-tick {
  flex: 1;
  height: 100%;
  background: var(--bg-surface-3);
  border-radius: 1px;
}
.meter-tick.on { background: var(--call); }
.meter-tick.on.hot { background: var(--warn); }

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
}

.theme-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.theme-card {
  text-align: left;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px;
  transition: all 0.12s;
}
.theme-card:hover { border-color: var(--border-strong); }
.theme-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.theme-preview {
  height: 60px;
  border-radius: var(--r-sm);
  display: flex;
  gap: 4px;
  padding: 6px;
  margin-bottom: 8px;
}
.theme-preview span { flex: 1; border-radius: 3px; }
.theme-preview-dark { background: oklch(0.18 0.02 255); }
.theme-preview-dark span:nth-child(1) { background: oklch(0.22 0.022 255); }
.theme-preview-dark span:nth-child(2) { background: oklch(0.16 0.018 255); }
.theme-preview-dark span:nth-child(3) { background: oklch(0.68 0.14 240); }
.theme-preview-light { background: oklch(0.985 0.003 255); border: 1px solid oklch(0.91 0.008 255); }
.theme-preview-light span:nth-child(1) { background: oklch(0.97 0.005 255); }
.theme-preview-light span:nth-child(2) { background: oklch(1 0 0); }
.theme-preview-light span:nth-child(3) { background: oklch(0.55 0.16 240); }
.theme-card-meta strong { display: block; font-size: 13px; color: var(--text); }
.theme-card-meta span { font-size: 11.5px; color: var(--text-muted); }

.seg {
  display: inline-flex;
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 3px;
  gap: 0;
}
.seg button {
  border: none;
  background: transparent;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--r-sm);
  transition: all 0.12s;
}
.seg button.active {
  background: var(--bg-surface);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.video-preview {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  aspect-ratio: 16/9;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.video-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-subtle);
  font-size: 12px;
}

.shortcut-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 13px;
}
.shortcut-row + .shortcut-row { border-top: 1px solid var(--border); }
.shortcut-row kbd {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 3px 8px;
  color: var(--text-muted);
}

.about-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 13px;
}
.info-row + .info-row { border-top: 1px solid var(--border); }
.info-row .mono { font-family: var(--font-mono); color: var(--text-muted); font-size: 12px; }
@media (max-width: 1100px) {
  .app[data-drawer="open"] {
    grid-template-columns: 0 1fr var(--drawer-w);
  }
  .sidebar { display: none; }
}

/* Login screen — contraste explícito dos inputs */
.login-input {
  color: var(--text) !important;
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  caret-color: var(--accent);
}
.login-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}
.login-input:focus {
  border-color: var(--accent) !important;
  outline: none;
}
/* Dark: reforço de contraste máximo */
:root .login-input,
[data-theme="dark"] .login-input {
  color: oklch(0.96 0.008 255) !important;
  background: oklch(0.28 0.025 255) !important;
  border: 1px solid oklch(0.36 0.026 255) !important;
}
[data-theme="dark"] .login-input::placeholder {
  color: oklch(0.62 0.018 255);
}
/* Light: texto escuro sobre fundo claro */
[data-theme="light"] .login-input {
  color: oklch(0.15 0.02 255) !important;
  background: oklch(0.96 0.005 255) !important;
  border: 1px solid oklch(0.80 0.01 255) !important;
}
[data-theme="light"] .login-input::placeholder {
  color: oklch(0.52 0.015 255);
}

/* ============ Multi-call held lines ============ */
.incall-line-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px 9px;
}

.held-calls {
  border-top: 1px solid var(--border);
  padding: 10px 0 4px;
  margin-bottom: 10px;
}

.held-calls-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-subtle);
  margin-bottom: 8px;
}

.held-call-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--r-md);
  transition: background 0.12s;
}
.held-call-row:hover { background: var(--bg-surface-2); }

.held-avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-full);
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.held-avatar.tone-1 { background: linear-gradient(135deg, oklch(0.62 0.16 30), oklch(0.55 0.18 15)); }
.held-avatar.tone-2 { background: linear-gradient(135deg, oklch(0.62 0.16 200), oklch(0.55 0.16 230)); }
.held-avatar.tone-3 { background: linear-gradient(135deg, oklch(0.62 0.16 145), oklch(0.55 0.16 165)); }
.held-avatar.tone-4 { background: linear-gradient(135deg, oklch(0.65 0.16 80), oklch(0.58 0.18 55)); }
.held-avatar.tone-5 { background: linear-gradient(135deg, oklch(0.62 0.18 320), oklch(0.55 0.18 290)); }
.held-avatar.tone-6 { background: linear-gradient(135deg, oklch(0.60 0.14 260), oklch(0.52 0.16 280)); }

.held-info { flex: 1; min-width: 0; }
.held-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.held-state {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}

.held-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.held-btn-resume {
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-md);
  background: var(--call-soft, oklch(from var(--call) l c h / 0.15));
  border: 1px solid oklch(from var(--call) l c h / 0.3);
  color: var(--call);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s;
}
.held-btn-resume:hover { background: var(--call); color: white; border-color: var(--call); }

.held-btn-decline {
  width: 30px; height: 30px;
  border-radius: var(--r-md);
  background: oklch(from var(--danger) l c h / 0.12);
  border: 1px solid oklch(from var(--danger) l c h / 0.25);
  color: var(--danger);
  display: grid; place-items: center;
  transition: all 0.12s;
}
.held-btn-decline:hover { background: var(--danger); color: white; }

.held-btn-transfer {
  height: 30px;
  padding: 0 10px;
  border-radius: var(--r-md);
  background: oklch(from var(--warn) l c h / 0.12);
  border: 1px solid oklch(from var(--warn) l c h / 0.3);
  color: var(--warn);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.12s;
}
.held-btn-transfer:hover { background: var(--warn); color: white; border-color: var(--warn); }

/* New-call mini panel inside InCall */
.new-call-panel {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-surface-2);
  padding: 10px 12px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: fadeIn 0.15s var(--ease);
}
.new-call-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.new-call-input-row {
  display: flex;
  gap: 8px;
}
.new-call-input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.04em;
  outline: none;
}
.new-call-input:focus { border-color: var(--accent); }
.new-call-input::placeholder { color: var(--text-subtle); font-family: var(--font-sans); font-size: 13px; letter-spacing: 0; }
.btn-newcall-dial {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  background: var(--call);
  color: white;
  border-color: var(--call);
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.btn-newcall-dial:hover { background: oklch(from var(--call) calc(l - 0.05) c h); }
.btn-newcall-dial:disabled { background: var(--border); color: var(--text-subtle); cursor: not-allowed; border-color: var(--border); }