@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=Source+Sans+3:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  --primary: #1c647a;
  --primary-hover: #1c647a;
  --primary-dark: #1c647a;
  --primary-light: #E4ECEA;
  --teal-light: #5BA8A8;
  --accent: #ec6606;
  --accent-hover: #ff6a00;
  --accent-light: #FDE8DC;
  --bg: #F6F8F7;
  --surface: #ffffff;
  --surface-alt: #F6F8F7;
  --border: #E4ECEA;
  --text: #1A2020;
  --text-muted: #4D5C5C;
  --text-light: #aed5e0;
  --user-bubble: #1c647a;
  --user-text: #ffffff;
  --agent-bubble: #F6F8F7;
  --agent-text: #1A2020;
  --error: #ef4444;
  --error-hover: #dc2626;
  --confirm: #ec6606;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --sidebar-w: 240px;
  --transition: .2s cubic-bezier(.4,0,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Ensure [hidden] wins over class-level display rules (display:flex etc). */
[hidden] { display: none !important; }

html, body {
  font-family: 'Source Sans 3', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- CHAT PAGE: layout = sidebar + main shell ---------- */
body.page-chat {
  overflow: hidden;
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
  display: flex;
  flex-direction: row;
  /* On desktop this is fully covered by the sidebar + shell; on mobile it's
     only visible in the iOS standalone bottom safe-area (home-indicator) strip
     below the input bar. Default it to white (= the input bar's --surface) so
     that strip blends in instead of showing the brand blue. The header gradient
     still covers the top safe area. */
  background: var(--surface);
  transition: background-color var(--transition);
}

/* While the mobile menu drawer is open, the bottom safe-area strip sits next to
   the blue sidebar, so a white strip reads as an awkward gap. Paint the body
   blue then, matching the sidebar (and the always-blue backoffice). Degrades to
   white where :has() is unsupported. */
body.page-chat:has(.bo-sidebar.open) {
  background: var(--primary-dark);
}

.chat-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Fill the fixed, inset:0 body rather than using 100dvh. On Android the
     dynamic-viewport height disagrees with the fixed/layout viewport the body
     is pinned to, which made the shell taller than the visible area and pushed
     the input bar below the fold. */
  height: 100%;
  background: var(--bg);
}

/* ---------- VERSION ---------- */
.app-version {
  position: fixed;
  bottom: 2px;
  right: 6px;
  font-size: 8px;
  color: rgba(0,0,0,.38);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

/* ---------- LOGO ---------- */
.logo-icon {
  flex-shrink: 0;
  border-radius: 8px;
}

/* ---------- SIDEBAR (chat page; matches backoffice pattern) ---------- */
.bo-sidebar {
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  background: var(--primary-dark);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
  transition: transform var(--transition);
  padding-bottom: var(--safe-bottom);
}

.bo-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  padding-top: calc(20px + var(--safe-top));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* On desktop the sidebar is always visible; align its header with the chat
   header (same vertical height, content vertically centered). */
@media (min-width: 769px) {
  .bo-sidebar-header {
    display: flex;
    align-items: center;
    min-height: calc(40px + 1.75rem);
    padding: 0 20px;
    padding-top: var(--safe-top);
  }
}

.bo-logo { border-radius: 8px; flex-shrink: 0; }

.bo-sidebar-title {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  letter-spacing: .02em;
}

.bo-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bo-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
}

.bo-nav-item svg { flex-shrink: 0; opacity: .7; transition: opacity var(--transition); }
.bo-nav-item:hover { color: #fff; background: rgba(255,255,255,.08); }
.bo-nav-item:hover svg { opacity: 1; }
.bo-nav-item.active { color: #fff; background: rgba(91,168,168,.25); }
.bo-nav-item.active svg { opacity: 1; }

.bo-sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.eu-mode-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(91, 168, 168, .15);
  border: 1px solid rgba(91, 168, 168, .35);
  border-radius: 8px;
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  line-height: 1.35;
}

.eu-mode-notice[hidden] {
  display: none;
}

.eu-mode-notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #8fd3d3;
}

.eu-mode-notice strong {
  display: block;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.eu-mode-notice span {
  display: block;
  color: rgba(255, 255, 255, .75);
}

.bo-username {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  font-weight: 500;
}

/* In the chat sidebar footer the username sits on its own line, so center
   it. (The backoffice header reuses .bo-username inside a flex row, where
   inline behaviour is correct — this scoped selector leaves it alone.) */
.bo-sidebar-footer .bo-username {
  display: block;
  text-align: center;
}

/* ---------- Subscription minutes bar (chat sidebar footer) ---------- */
.minutes-usage {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: rgba(255,255,255,.92);
}
.minutes-usage[hidden] { display: none; }
/* Label on its own line, value + bar below — keeps the long Dutch label
   "Spraakminuten deze maand" from wrapping mid-word in a narrow sidebar. */
.minutes-usage-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: .78rem;
  margin-bottom: 6px;
}
.minutes-usage-label {
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.minutes-usage-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #fff;
  white-space: nowrap;
  flex-shrink: 0;
}
.minutes-usage-bar {
  height: 6px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  overflow: hidden;
}
.minutes-usage-bar-fill {
  height: 100%;
  width: 0%;
  background: #5BA8A8;
  transition: width .4s ease, background .2s ease;
}
.minutes-usage-bar-fill.warn   { background: #E07B4F; }
.minutes-usage-bar-fill.danger { background: #C0392B; }

/* ---------- Over-quota banner (above chat messages) ---------- */
.minutes-empty-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 16px 0;
  padding: 12px 16px;
  background: #FDECEA;
  color: #9B2C2C;
  border: 1px solid #F5C2C0;
  border-radius: 10px;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
}
.minutes-empty-banner[hidden] { display: none; }
.minutes-empty-banner svg { flex-shrink: 0; color: #C0392B; }

/* ---------- PWA install bar (mobile, non-invasive, above composer) ---------- */
.pwa-install-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  font-size: .9rem;
  line-height: 1.35;
  color: var(--text);
  animation: pwaBarIn .28s cubic-bezier(.4, 0, .2, 1);
}
.pwa-install-icon { width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; }
.pwa-install-text { flex: 1; min-width: 0; }
.pwa-install-share { display: inline-flex; vertical-align: -3px; margin: 0 1px; color: var(--primary); }
.pwa-install-btn {
  flex-shrink: 0;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: .875rem;
  cursor: pointer;
}
.pwa-install-btn:hover { background: var(--accent-hover); }
.pwa-install-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
}
@keyframes pwaBarIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- HAMBURGER (mobile) + OVERLAY ---------- */
.bo-hamburger {
  display: none;
  position: fixed;
  top: calc(14px + var(--safe-top));
  left: calc(14px + var(--safe-left));
  z-index: 200;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

.bo-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: all var(--transition);
}

.bo-hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.bo-hamburger.open span:nth-child(2) { opacity: 0; }
.bo-hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.bo-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 90;
  backdrop-filter: blur(2px);
}
.bo-overlay.visible { display: block; }

/* ---------- LOGIN ---------- */
body.page-login {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}

.login-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: inherit;
}

.login-wrap {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.login-card h1 {
  font-family: 'Sora', sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.25rem;
}

.login-card p {
  color: var(--text-muted);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.form-group { margin-bottom: 1.25rem; }
.form-group label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}
.form-group input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 1.0625rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26,77,77,.12);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border: none;
  border-radius: 10px;
  font-size: 1.0625rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.login-error {
  color: var(--error);
  font-size: 0.9375rem;
  margin-top: 0.75rem;
  display: none;
}

.login-success {
  color: #1A6A4D;
  background: #E6F4EC;
  border: 1px solid #BFE3CF;
  font-size: .9375rem;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 0.75rem;
}

.login-foot {
  margin-top: .9rem;
  text-align: center;
  font-size: .9rem;
}
.login-foot a {
  color: var(--primary);
  text-decoration: none;
}
.login-foot a:hover { text-decoration: underline; }

/* Forgot-password modal */
.login-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(26, 77, 77, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
}
.login-modal-backdrop[hidden] { display: none; }
.login-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px 26px 22px 26px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
}
.login-modal h2 {
  margin: 0 0 .5rem 0;
  color: var(--primary);
  font-size: 1.25rem;
}
.login-modal p {
  margin: 0 0 1rem 0;
  color: #4D5C5C;
  font-size: .92rem;
}
.login-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .8rem;
}
.login-modal .btn-ghost {
  background: transparent;
  color: var(--primary);
  border: 1px solid #D7DEDE;
}
.login-modal .btn-ghost:hover { background: #F0F3F3; }

/* ---------- CHAT HEADER ---------- */
.chat-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--surface);
}

.chat-header {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  color: #fff;
  flex-shrink: 0;
  padding-top: var(--safe-top);
}

.chat-header-inner {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.875rem 1.5rem;
  padding-left: calc(1.5rem + var(--safe-left));
  padding-right: calc(1.5rem + var(--safe-right));
  position: relative;
}

.chat-header-spacer { display: none; }

.chat-header-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.chat-header h1 {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}

.env-badge {
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #d97706;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.chat-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.625rem;
  margin-left: auto;
}

/* Round orange voice-call button (header + composer share the same look) */
.btn-call-top,
.btn-composer.btn-voice-call {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.2s;
  box-shadow: 0 3px 12px rgba(236, 102, 6, 0.35);
}
.btn-call-top:hover:not(:disabled),
.btn-composer.btn-voice-call:hover:not(:disabled) {
  background: var(--accent-hover);
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 5px 18px rgba(236, 102, 6, 0.45);
}
.btn-call-top:active:not(:disabled),
.btn-composer.btn-voice-call:active:not(:disabled) { transform: scale(0.96); }
.btn-call-top:disabled {
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.55);
  cursor: not-allowed;
  box-shadow: none;
}
.btn-composer.btn-voice-call:disabled {
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.35);
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- CHAT MESSAGES ---------- */
.chat-messages-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: var(--surface-alt);
}

.chat-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 280px;
  height: 280px;
  background: url('/static/img/crm-agent-logo-800-v2.png') center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}

.chat-messages {
  position: relative;
  z-index: 1;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  background: transparent;
}

.message {
  max-width: 75%;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  font-size: 1.0625rem;
  line-height: 1.55;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.message-user {
  align-self: flex-end;
  background: var(--user-bubble);
  color: var(--user-text);
  border-bottom-right-radius: 4px;
}
.message-agent {
  align-self: flex-start;
  background: var(--agent-bubble);
  color: var(--agent-text);
  border-bottom-left-radius: 4px;
  white-space: normal;
}
.message-confirm {
  border-left: 3px solid var(--confirm);
  background: var(--accent-light);
}

.confirm-buttons { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.confirm-buttons .btn-confirm {
  padding: 0.5rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.confirm-buttons .btn-confirm:active { transform: scale(0.95); }
.confirm-buttons .btn-confirm-yes { background: var(--primary); color: #fff; }
.confirm-buttons .btn-confirm-yes:hover { background: var(--primary-hover); }
.confirm-buttons .btn-confirm-no { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.confirm-buttons .btn-confirm-no:hover { background: var(--surface-alt); border-color: var(--text-muted); }

.message-error {
  background: #fef2f2;
  color: var(--error);
  align-self: center;
  font-size: 0.9375rem;
}
.message strong { font-weight: 600; }

.message-time {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-light);
  margin-bottom: 0.125rem;
}
.message-user .message-time { text-align: right; }
.message-agent .message-time { text-align: left; }

.typing-indicator {
  align-self: flex-start;
  color: var(--text-muted);
  font-size: 0.9375rem;
  padding: 0.5rem 1rem;
  display: none;
}
.typing-indicator.visible { display: block; }

.tool-indicator {
  align-self: flex-start;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
  padding: 0.25rem 1rem;
}
.tool-indicator-error {
  color: var(--error);
  border-left: 2px solid var(--error);
  padding-left: 0.75rem;
  margin-left: 0.25rem;
}

/* ---------- CHAT INPUT BAR + UNIFIED COMPOSER CARD ---------- */
.chat-input-bar {
  padding: 0.5rem 1.5rem 0.875rem;
  padding-bottom: calc(0.875rem + var(--safe-bottom));
  padding-left: calc(1.5rem + var(--safe-left));
  padding-right: calc(1.5rem + var(--safe-right));
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  position: relative;
}

.composer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 10px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: text;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.composer:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(28,100,122,.12);
}

.composer-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--text);
  padding: 6px 4px;
  cursor: text;
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  min-height: calc(1.4em + 12px);
  max-height: calc(1.4em * 4 + 12px);
}
.composer-input:disabled { color: var(--text-muted); }
.composer-input::placeholder { color: var(--text-muted); opacity: 0.7; }

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.composer-actions-left, .composer-actions-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.btn-composer {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.btn-composer:hover:not(:disabled) {
  background: var(--surface-alt);
  color: var(--text);
}
.btn-composer:active:not(:disabled) { transform: scale(0.94); }
.btn-composer:disabled { opacity: 0.4; cursor: not-allowed; }

/* Dictating state — same red pulse as legacy */
.btn-composer.dictating {
  background: var(--error);
  color: #fff;
  animation: dictate-pulse 1.5s ease-in-out infinite;
}
.btn-composer.dictating:hover:not(:disabled) { background: var(--error-hover); color: #fff; }

@keyframes dictate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

/* Hide voice-call buttons (header + inline) while dictating */
.voice-btn-row.dictating .btn-voice-call { display: none; }
body:has(.voice-btn-row.dictating) .btn-call-top { display: none; }

/* Dictate cancel link */
.dictate-cancel {
  display: none;
  font-size: 0.8125rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  background: none;
  border: none;
  font-family: inherit;
  padding: 0.25rem 0.5rem;
  align-self: center;
}
.dictate-cancel:hover { color: var(--text); }
.voice-btn-row.dictating .dictate-cancel { display: inline; }

/* ---------- MODE TOGGLE POPOVER ---------- */
.mode-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  padding: 4px;
  display: none;
  flex-direction: column;
  min-width: 220px;
  z-index: 20;
}
.composer-actions-left { position: relative; }
.mode-popover.visible { display: flex; }

.mode-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 0.12s;
}
.mode-option:hover { background: var(--surface-alt); }
.mode-option-icon { opacity: 0; flex-shrink: 0; color: var(--primary); }
.mode-option.active .mode-option-icon { opacity: 1; }
.mode-option.active { font-weight: 600; }

/* ---------- VOICE MODE (input bar transforms) ---------- */
/* Lay the bar out as a row so the status text (flex:1) fills the left and
   pushes the "Ophangen" button to the right edge of the screen. Applies to
   both the agent chat view and the transcript view (shared input bar). */
.chat-input-bar.voice-active {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.chat-input-bar.voice-active .composer { display: none; }

/* Dictation mode: hide input + mode toggle, keep dictate button visible */
.chat-input-bar.dictation-active .composer-input,
.chat-input-bar.dictation-active .composer-actions-left {
  display: none;
}

/* Dictation status (chat area) */
.dictation-status {
  align-self: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-style: italic;
  padding: 0.5rem 1rem;
  animation: status-pulse 1.5s ease-in-out infinite;
}

.dictation-meter-wrap {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 1rem 0.5rem;
}
.dictation-meter-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
}
.dictation-meter-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--primary);
  transition: height 0.08s linear;
}

.voice-mode-status {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
  min-height: 44px;
}
.voice-mode-status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: pulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
.voice-mode-status.status-listening { color: var(--primary); }
.voice-mode-status.status-listening::before { background: var(--primary); }
.voice-mode-status.status-thinking { color: var(--accent); }
.voice-mode-status.status-thinking::before { background: var(--accent); }
.voice-mode-status.status-speaking { color: var(--teal-light); }
.voice-mode-status.status-speaking::before { background: var(--teal-light); }
.voice-mode-status.status-dictation { color: var(--accent); }
.voice-mode-status.status-dictation::before { background: var(--accent); }
.voice-mode-status.status-tool { color: #1c647a; }
.voice-mode-status.status-tool::before { background: #1c647a; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.3; transform: scale(0.7); }
}

/* Hidden compat element so voice-call.js can still attach handler */
.btn-settings-inline[hidden] { display: none !important; }

.btn-stop-speaking {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--teal-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-stop-speaking:hover { color: var(--error); border-color: var(--error); }

.btn-stop-speaking-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem auto;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.btn-stop-speaking-inline:hover { color: var(--error); border-color: var(--error); }
.btn-stop-speaking-inline svg { flex-shrink: 0; }

.voice-mode-hangup {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 9999px;
  background: var(--error);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.voice-mode-hangup:hover { background: var(--error-hover); }

/* ---------- VOICE SETTINGS PANEL (slides up above input bar) ---------- */
.voice-settings-panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 1rem 1.5rem 0.75rem;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 -4px 16px rgba(0,0,0,.08);
  z-index: 10;
}
.voice-settings-panel.visible { display: flex; }

.voice-settings-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.voice-settings-heading {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}
.voice-settings-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.375rem;
  border-radius: 6px;
  transition: background 0.12s, color 0.12s;
}
.voice-settings-close:hover {
  background: var(--surface-alt);
  color: var(--text);
}

/* Partial transcript */
.message-partial { opacity: 0.5; font-style: italic; }

/* Transient agent status bubble */
.message-status-transient {
  opacity: 0.6;
  font-style: italic;
  animation: status-pulse 1.5s ease-in-out infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.3; }
}

/* Greeting loading dots */
.greeting-dots span {
  display: inline-block;
  font-size: 1.5em;
  line-height: 1;
  animation: greeting-dot-bounce 1.4s ease-in-out infinite;
}
.greeting-dots span:nth-child(2) { animation-delay: 0.2s; }
.greeting-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes greeting-dot-bounce {
  0%, 80%, 100% { opacity: 0.2; }
  40%           { opacity: 1; }
}

/* Markdown inside bubbles */
.message p { margin: 0.25rem 0; }
.message p:first-child { margin-top: 0; }
.message p:last-child { margin-bottom: 0; }
.message ul, .message ol { margin: 0.25rem 0; padding-left: 1.25rem; }
.message li { margin: 0.125rem 0; }
.message strong { font-weight: 600; }
.message table { border-collapse: collapse; margin: 0.5rem 0; font-size: 0.875rem; width: 100%; }
.message th, .message td { border: 1px solid var(--border); padding: 0.25rem 0.5rem; text-align: left; }
.message th { background: rgba(0,0,0,.05); font-weight: 600; }
.message code { background: rgba(0,0,0,.06); padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.875em; }
.message pre { background: rgba(0,0,0,.06); padding: 0.5rem; border-radius: 6px; overflow-x: auto; margin: 0.25rem 0; }
.message pre code { background: none; padding: 0; }

/* Voice settings rows */
.voice-setting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.25rem 0.75rem;
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.voice-setting-row label {
  grid-column: 1 / -1;
  font-weight: 500;
  font-size: 0.8125rem;
}
.voice-setting-row input[type="range"] {
  grid-column: 1;
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.voice-setting-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.voice-setting-row input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.voice-setting-row span {
  grid-column: 2;
  min-width: 3rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.voice-volume-meter-bar {
  grid-column: 1;
  position: relative;
  width: 100%;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: visible;
}
.voice-volume-meter-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: #22c55e;
  transition: width 0.08s linear;
}
.voice-volume-meter-threshold {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 14px;
  background: var(--text);
  border-radius: 1px;
  pointer-events: none;
  opacity: 0.6;
}

/* Admin test speak */
.voice-setting-admin-test { flex-direction: column; gap: 0.5rem; border-top: 1px solid var(--border); padding-top: 0.75rem; margin-top: 0.25rem; }
.voice-setting-admin-test textarea {
  width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--border);
  padding: 0.5rem; font: inherit; font-size: 0.875rem; resize: vertical; min-height: 3rem;
  background: var(--surface-alt, #f5f5f5); color: var(--text);
}
.btn-admin-test-speak {
  align-self: flex-end; padding: 0.4rem 1rem; border-radius: 8px; border: 1px solid var(--primary);
  background: var(--primary); color: #fff; cursor: pointer; font-size: 0.875rem; font-family: inherit;
  transition: opacity 0.15s;
}
.btn-admin-test-speak:hover { opacity: 0.9; }
.btn-admin-test-speak:disabled { opacity: 0.5; cursor: not-allowed; }

.voice-setting-reset-row {
  display: flex;
  justify-content: center;
  padding-top: 0.25rem;
}
.btn-reset-defaults {
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-reset-defaults:hover {
  background: var(--surface-alt);
  color: var(--text);
  border-color: var(--text-muted);
}

/* ---------- TRANSCRIPT VIEW ---------- */
.transcript-view {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.transcript-view[hidden] { display: none; }

.transcript-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
}

.transcript-inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.transcript-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  background: none;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
}
.transcript-back:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.transcript-header h2 {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.375rem;
}
.transcript-sub {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.transcript-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.transcript-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.entity-picker { position: relative; }

.entity-search-input,
.contact-select,
.transcript-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.entity-search-input:focus,
.contact-select:focus,
.transcript-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(28,100,122,.12);
}

.transcript-textarea {
  resize: vertical;
  min-height: 220px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.entity-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
  z-index: 30;
}
.entity-results[hidden] { display: none; }

.entity-result {
  padding: 0.625rem 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.entity-result:last-child { border-bottom: none; }
.entity-result:hover, .entity-result.focused { background: var(--surface-alt); }
.entity-result-name { font-size: 0.9375rem; color: var(--text); }
.entity-result-kind {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary);
}
.entity-result-kind.lead {
  background: rgba(236, 102, 6, 0.1);
  color: var(--accent);
}
.entity-results-empty {
  padding: 0.75rem 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-style: italic;
}

.entity-results-loading {
  padding: 0.75rem 1rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.entity-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: entity-spin 0.6s linear infinite;
}
@keyframes entity-spin { to { transform: rotate(360deg); } }

.entity-selected {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--primary-light);
  border-radius: 10px;
}
.entity-badge { font-weight: 600; color: var(--text); }
.entity-badge-kind {
  font-size: 0.6875rem;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--primary);
}
.entity-badge-kind.lead { color: var(--accent); }

.btn-link {
  background: none;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
  margin-left: auto;
  padding: 0;
}
.btn-link:hover { color: var(--primary-hover); }

.contact-picker {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Tabs (Plakken / Bestand uploaden) */
.transcript-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.625rem;
}
.transcript-tab {
  background: none;
  border: none;
  padding: 0.5rem 0.875rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.transcript-tab:hover { color: var(--text); }
.transcript-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: 600;
}
.transcript-tab-pane[hidden] { display: none; }

/* File drop */
.file-drop {
  display: block;
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 2rem 1rem;
  background: var(--surface-alt);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}
.file-drop:hover { border-color: var(--primary); background: var(--primary-light); }
.file-drop.dragover { border-color: var(--primary); background: var(--primary-light); }
.file-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-drop-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  text-align: center;
}
.file-drop-prompt p { margin: 0; font-size: 0.9375rem; }
.file-drop-hint { font-size: 0.8125rem !important; color: var(--text-light); }
.file-drop-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.file-name { font-weight: 600; color: var(--text); }

/* Global file drag-and-drop overlay (desktop) — drag a supported file anywhere
   over the chat/transcript window to add it as the transcription file. Direct
   children are pointer-events:none so the overlay's own dragleave fires only
   when the cursor truly leaves the window (prevents flicker over children). */
.global-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(28, 100, 122, 0.22);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.global-drop-overlay > * { pointer-events: none; }
.global-drop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2.5rem 3.5rem;
  border: 3px dashed var(--primary);
  border-radius: 20px;
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}
.global-drop-title { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--text); }
.global-drop-hint { margin: 0; font-size: 0.875rem; color: var(--text-muted); }

/* Action button */
.transcript-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}
.btn-primary-lg {
  padding: 0.75rem 1.5rem;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary-lg:hover:not(:disabled) { background: var(--primary-hover); }
.btn-primary-lg:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- CRM onboarding ---- */
.page-onboarding .login-card .btn,
.page-onboarding .login-card .btn-primary-lg { width: 100%; margin-top: 0.75rem; }
.page-onboarding .onboard-link {
  background: transparent;
  color: var(--text-muted, #667);
  border: none;
  font-weight: 500;
}
.page-onboarding .onboard-link:hover { background: transparent; text-decoration: underline; }
.crm-type-list { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0; }
.crm-type-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 1rem;
  border: 1.5px solid var(--border, #d8e0e0);
  border-radius: 10px;
  background: var(--surface, #fff);
  font-family: inherit; font-size: 1rem; font-weight: 600;
  color: var(--text, #1a2b2b);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.crm-type-option:hover:not(.disabled) { border-color: var(--primary); background: #f3f8f8; }
.crm-type-option.disabled { opacity: 0.55; cursor: not-allowed; }
.crm-type-badge {
  font-size: 0.72rem; font-weight: 600; color: var(--text-muted, #667);
  background: #eef2f2; border-radius: 999px; padding: 0.15rem 0.55rem;
}
.onboard-spinner {
  width: 28px; height: 28px; margin: 1.25rem auto 0;
  border: 3px solid var(--border, #d8e0e0);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: onboard-spin 0.8s linear infinite;
}
@keyframes onboard-spin { to { transform: rotate(360deg); } }
.transcript-error {
  color: var(--error);
  font-size: 0.875rem;
}

/* Status / progress section */
.transcript-status {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.transcript-status[hidden] { display: none; }
.transcript-status-title {
  font-family: 'Sora', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}
.transcript-status-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.transcript-progress {
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  overflow: hidden;
}
.transcript-progress-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.4s ease;
}
.transcript-summary-preview {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  max-height: 360px;
  overflow-y: auto;
}
.transcript-summary-preview p { margin: 0 0 0.5rem; }
.transcript-summary-preview p:last-child { margin-bottom: 0; }
.transcript-summary-preview ul,
.transcript-summary-preview ol {
  margin: 0.375rem 0;
  padding-left: 1.25rem;
}
.transcript-summary-preview li { margin: 0.125rem 0; }
.transcript-summary-preview h1,
.transcript-summary-preview h2,
.transcript-summary-preview h3 {
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0.5rem 0 0.25rem;
}
.transcript-extracted-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.transcript-extracted-pill {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 4px 10px;
}
.transcript-status-actions {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}
.btn-secondary-lg {
  padding: 0.625rem 1.25rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-secondary-lg:hover { background: var(--surface-alt); border-color: var(--text-muted); }
.btn-danger-lg {
  padding: 0.625rem 1.25rem;
  background: var(--surface);
  color: var(--error);
  border: 1px solid var(--error);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger-lg:hover { background: rgba(239, 68, 68, 0.06); }

/* ---------- REVIEW FLOW (Phase 3) ---------- */
.review-bubble { max-width: 92% !important; }
.review-bubble ul, .review-bubble ol { margin: 0.375rem 0; padding-left: 1.25rem; }
.review-bubble li { margin: 0.125rem 0; }

.review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.btn-review {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-review:active { transform: scale(0.96); }

.btn-review-speak {
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--primary-light);
}
.btn-review-speak:hover:not(:disabled) {
  background: var(--primary-light);
}
.btn-review-speak:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-review-speak.speaking {
  background: var(--error);
  color: #fff;
  border-color: var(--error);
  animation: dictate-pulse 1.5s ease-in-out infinite;
}
.btn-review-speak.speaking:hover { background: var(--error-hover); }

.btn-review-yes {
  background: var(--primary);
  color: #fff;
}
.btn-review-yes:hover:not(:disabled) { background: var(--primary-hover); }

.btn-review-no {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-review-no:hover:not(:disabled) {
  background: var(--surface-alt);
  border-color: var(--text-muted);
}

.btn-review-cancel {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}
.btn-review-cancel:hover {
  color: var(--text);
  border-color: var(--border);
  background: var(--surface);
}

/* Cancel the whole transcript job (escape hatch within the review) */
.btn-review-abort {
  background: transparent;
  color: var(--error, #ef4444);
  border: 1px solid transparent;
  margin-left: auto;
}
.btn-review-abort:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.08);
}

.btn-review-submit {
  background: var(--accent);
  color: #fff;
}
.btn-review-submit:hover:not(:disabled) { background: var(--accent-hover); }

.review-feedback {
  margin-top: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.review-feedback-prompt {
  font-weight: 500;
  color: var(--text);
}
.review-feedback-input {
  width: 100%;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  resize: vertical;
  min-height: 60px;
  background: var(--surface);
  outline: none;
}
.review-feedback-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(28,100,122,.12);
}
.review-feedback-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.review-note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 1px solid rgba(0,0,0,.08);
  font-size: 0.9375rem;
  color: var(--text-muted);
}
.review-check {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #22c55e;
  color: #fff;
  text-align: center;
  line-height: 18px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.review-error { color: var(--error); }

/* Notification card in chat view */
.transcript-notification {
  align-self: stretch;
  margin: 0.5rem auto;
  max-width: 86%;
  background: linear-gradient(135deg, var(--accent-light) 0%, #fff 100%);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 0.875rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text);
}
/* Clickable region (icon + text) — navigates to the review */
.transcript-notification-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: transform 0.15s;
}
.transcript-notification-main:hover { transform: translateY(-1px); }
.transcript-notification-icon {
  flex-shrink: 0;
  color: var(--accent);
}
.transcript-notification-body { flex: 1; min-width: 0; }
.transcript-notification-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
}
.transcript-notification-sub {
  font-size: 0.8125rem;
  color: var(--text-muted);
}
.transcript-notification-cancel {
  flex-shrink: 0;
  align-self: center;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: var(--error, #ef4444);
  border-radius: 999px;
  padding: 0.3125rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.transcript-notification-cancel:hover { background: rgba(239, 68, 68, 0.08); }

/* Counts shown at the top of the summary HITL step (req 2) */
.review-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 0.625rem;
}

/* Summary revision diff (finding 4): show what a revision changed */
.summary-diff {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}
.summary-diff-ins {
  background: rgba(34, 197, 94, 0.18);
  text-decoration: none;
  border-radius: 3px;
  padding: 0 1px;
}
.summary-diff-del {
  background: rgba(239, 68, 68, 0.14);
  color: var(--text-muted);
  text-decoration: line-through;
  border-radius: 3px;
  padding: 0 1px;
}

/* ---------- iOS PWA standalone ---------- */
@media (display-mode: standalone) {
  .chat-input-bar { padding-bottom: calc(0.25rem + var(--safe-bottom)); }
}
@media (display-mode: standalone) and (max-width: 640px) {
  .chat-input-bar { padding-bottom: calc(0.125rem + var(--safe-bottom)); }
}

/* ---------- DESKTOP: centered chat column ---------- */
@media (min-width: 769px) {
  .chat-wrap,
  .transcript-view {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    /* No card background on desktop — the composer/messages have their own
       surfaces and the shell handles the rest. */
    background: transparent;
  }
  .chat-header-inner {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* Desktop: brand sits left, actions right; spacer not needed */
  .chat-header-spacer { display: none; }
  .chat-header-brand { justify-content: flex-start; }
  /* The composer card already has its own white surface; let the input bar
     blend into the shell so it doesn't cut off at the column edge. */
  .chat-input-bar {
    background: transparent;
    border-top: none;
  }
}

/* ---------- RESPONSIVE: TABLET / MOBILE ---------- */
@media (max-width: 768px) {
  .bo-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
  }
  .bo-sidebar.open { transform: translateX(0); }
  .bo-hamburger { display: flex; }
  .bo-hamburger.open { left: calc(var(--sidebar-w) - 48px); }

  /* Leave room for the fixed hamburger on the left */
  .chat-header-inner {
    padding-left: calc(60px + var(--safe-left));
  }
  /* Absolute-center the brand so it visually sits in the viewport center
     rather than between the hamburger and the right edge. */
  .chat-header-brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 140px);
    pointer-events: none;
  }
  .chat-header-brand h1,
  .chat-header-brand .logo-icon {
    pointer-events: auto;
  }
  /* Login page has no hamburger and no header actions, so the absolute-centering
     above doesn't apply. Keep the brand in normal flow so it gives the header
     its natural height (otherwise it collapses to just the padding) and sits
     left like on desktop. */
  body.page-login .chat-header-inner {
    padding-left: calc(1.5rem + var(--safe-left));
  }
  body.page-login .chat-header-brand {
    position: static;
    transform: none;
    max-width: none;
    pointer-events: auto;
  }
}

@media (max-width: 640px) {
  html, body { background: var(--surface); }
  .message { max-width: 88%; }
  .chat-input-bar {
    padding: 0.5rem 0.75rem 0.75rem;
    padding-bottom: calc(0.75rem + var(--safe-bottom));
    padding-left: calc(0.75rem + var(--safe-left));
    padding-right: calc(0.75rem + var(--safe-right));
  }
  .chat-header-inner {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    padding-right: calc(1rem + var(--safe-right));
  }
  .chat-messages { padding: 1rem; }
  .chat-header h1 { font-size: 1.1rem; }
  .logo-icon { width: 36px; height: 36px; }
}

@media (max-width: 380px) {
  .chat-header-brand { gap: 0.5rem; }
  .chat-header h1 { font-size: 1rem; }
  .logo-icon { width: 32px; height: 32px; }
  .btn-call-top { width: 36px; height: 36px; }
  .composer { padding: 8px 10px 6px; }
  .btn-composer { width: 34px; height: 34px; }
  .btn-composer.btn-voice-call { width: 36px; height: 36px; }
}

/* ===== First-use tutorial (tutorial.js) ===== */
.tut-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(16, 32, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(20px + var(--safe-top)) 20px calc(20px + var(--safe-bottom));
  animation: tutFadeIn 0.25s ease;
}
@keyframes tutFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.tut-card {
  position: relative;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  max-width: 440px;
  width: 100%;
  padding: 30px 28px 22px;
  text-align: center;
  animation: tutCardIn 0.3s cubic-bezier(0.34, 1.3, 0.64, 1);
  /* Tall slides on small (phone) screens: scroll inside the card. The
     overlay is fixed, so without this the flex-centered overflow would be
     clipped and the top even unreachable. dvh tracks mobile browser chrome. */
  max-height: calc(100vh - 40px - var(--safe-top) - var(--safe-bottom));
  max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
@keyframes tutCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tut-close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
}
.tut-close:hover { color: var(--text); }
.tut-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: linear-gradient(135deg, var(--primary-light), var(--accent-light));
}
.tut-title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: var(--primary);
}
.tut-text {
  margin: 0 0 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
}
.tut-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}
.tut-chip {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
}
.tut-dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-bottom: 16px;
}
.tut-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
}
.tut-dot.active {
  background: var(--accent);
  transform: scale(1.25);
}
.tut-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tut-nav-spacer { flex: 1; }
.tut-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--transition);
}
.tut-btn:hover { background: var(--surface-alt); }
.tut-skip {
  border: none;
  color: var(--text-muted);
  background: none;
}
.tut-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.tut-primary:hover { background: var(--primary-hover); opacity: 0.92; }
.tut-ring {
  position: fixed;
  z-index: 1201;
  border: 3px solid var(--accent);
  border-radius: 12px;
  pointer-events: none;
  box-shadow: 0 0 0 6px rgba(236, 102, 6, 0.25);
  animation: tutPulse 1.6s ease-in-out infinite;
}
@keyframes tutPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(236, 102, 6, 0.3); }
  50% { box-shadow: 0 0 0 10px rgba(236, 102, 6, 0.12); }
}
@media (max-width: 480px) {
  .tut-card { padding: 24px 18px 16px; }
  .tut-title { font-size: 1.1rem; }
}

/* Tutorial: icon+text rows (e.g. voice vs dictate on one slide) */
.tut-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  text-align: left;
}
.tut-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}
.tut-item-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  background: var(--primary-light);
}
.tut-item-icon svg { width: 17px; height: 17px; }
.tut-item-body {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text);
}
.tut-item-body strong {
  display: block;
  margin-bottom: 2px;
  color: var(--primary);
}

/* Tutorial: compact bullet list (term + explanation per line) */
.tut-bullets {
  margin: 0 0 14px;
  padding: 0 0 0 4px;
  list-style: none;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tut-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text);
}
.tut-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.tut-bullets strong { color: var(--primary); }