:root {
    color-scheme: light dark;
    --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9; --text: #0f172a; --muted: #475569; --line: #e2e8f0;
    --accent: #0369a1; --on-accent: #ffffff; --accent-soft: #e0f2fe; --accent-text: #075985;
    --danger: #b91c1c; --on-danger: #ffffff; --warn-bg: #fef3c7; --warn-text: #78350f; --ring: #0f172a;
    --shadow: 0 1px 2px rgb(15 23 42 / 6%), 0 1px 3px rgb(15 23 42 / 8%);
    --font-ui: "Rubik", "IBM Plex Sans Hebrew", system-ui, "Segoe UI", Arial, sans-serif;
    --font-body: "IBM Plex Sans Hebrew", system-ui, "Segoe UI", Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0b1220; --surface: #121b2d; --surface-2: #1b2740; --text: #e8edf5; --muted: #a3b1c6; --line: #27354d;
      --accent: #38bdf8; --on-accent: #06283d; --accent-soft: #123049; --accent-text: #9adcfb;
      --danger: #f87171; --on-danger: #2a0b0b; --warn-bg: #3b2a0a; --warn-text: #fcd98a; --ring: #e8edf5;
      --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    }
  }
  * { box-sizing: border-box; }
  [hidden] { display: none !important; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font-body); }
  button, select, textarea, input { font: inherit; color: inherit; }
  button, select, label.check, summary, .segmented label { cursor: pointer; }
  button:disabled { cursor: default; }
  :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
  svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

  .app { display: flex; flex-direction: column; height: 100dvh; }
  .topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .brand { margin-inline-end: auto; min-width: 0; }
  .brand h1 { margin: 0; font: 600 18px/1.3 var(--font-ui); }
  .brand p { margin: 0; font-size: 13px; color: var(--muted); }

  .segmented { display: inline-flex; gap: 4px; padding: 4px; margin: 0; border: 0; border-radius: 10px; background: var(--surface-2); }
  .segmented label { position: relative; }
  .segmented input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .segmented span { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 7px; font: 500 15px var(--font-ui); color: var(--muted); transition: background-color .15s, color .15s; }
  .segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
  .segmented input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 2px; }

  .ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: transparent; font: 500 14px var(--font-ui); color: var(--text); text-decoration: none; transition: background-color .15s; }
  .ghost:hover { background: var(--surface-2); }
  .to-settings { display: none; }

  .layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
  .conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
  .scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px 12px; }
  .column { max-width: 720px; margin: 0 auto; width: 100%; }

  .empty { padding: 32px 0 16px; text-align: center; }
  .empty h2 { margin: 0 0 8px; font: 600 22px/1.3 var(--font-ui); text-wrap: balance; }
  .empty p { margin: 0 auto 20px; max-width: 46ch; color: var(--muted); text-wrap: pretty; }
  .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .chip { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); transition: background-color .15s, border-color .15s; }
  .chip:hover { background: var(--accent-soft); border-color: var(--accent); }
  .say-list { margin: 0; padding: 0; list-style: none; color: var(--muted); }
  .say-list strong { display: block; margin-bottom: 4px; font: 500 14px var(--font-ui); color: var(--text); }

  #log { display: flex; flex-direction: column; gap: 14px; }
  .msg { display: flex; flex-direction: column; max-width: 85%; }
  .msg.user { align-self: flex-start; align-items: flex-start; }
  .msg.agent { align-self: flex-end; align-items: flex-start; }
  .bubble { padding: 10px 14px; border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
  .msg.user .bubble { background: var(--accent); color: var(--on-accent); border-start-start-radius: 4px; }
  .msg.agent .bubble { background: var(--surface); border: 1px solid var(--line); border-start-end-radius: 4px; }
  .caption { margin-top: 4px; padding-inline: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
  .divider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
  .divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
  .notice { padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-text); font-size: 14px; }

  .activity { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 14px; }
  .dots { display: inline-flex; gap: 4px; }
  .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1.2s infinite ease-in-out; }
  .dots i:nth-child(2) { animation-delay: .15s; }
  .dots i:nth-child(3) { animation-delay: .3s; }
  @keyframes pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

  .dock { padding: 12px 20px 16px; background: var(--bg); }
  .composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
  .composer:focus-within { border-color: var(--accent); }
  .composer textarea { flex: 1; min-width: 0; max-height: 140px; padding: 8px 10px; border: 0; outline: 0; resize: none; background: transparent; line-height: 1.5; }
  .send { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); transition: opacity .15s; }
  .send:disabled { opacity: .35; }

  .voice-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
  .voice-state { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .voice-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line); flex: none; }
  .voice-state[data-state="listening"] .voice-dot, .voice-state[data-state="hearing"] .voice-dot { background: var(--accent); animation: pulse 1.6s infinite ease-in-out; }
  .voice-state[data-state="connecting"] .voice-dot, .voice-state[data-state="transcribing"] .voice-dot, .voice-state[data-state="thinking"] .voice-dot { background: var(--muted); animation: pulse .9s infinite ease-in-out; }
  .voice-state[data-state="speaking"] .voice-dot { background: var(--accent); }
  .voice-text strong { display: block; font: 500 16px/1.3 var(--font-ui); }
  .voice-text span { font-size: 13px; color: var(--muted); }
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 10px; font: 500 15px var(--font-ui); transition: opacity .15s; }
  .btn:hover { opacity: .9; }
  .btn:disabled { opacity: .5; }
  .btn.primary { background: var(--accent); color: var(--on-accent); }
  .btn.danger { background: var(--danger); color: var(--on-danger); }
  .btn.secondary { background: var(--surface-2); color: var(--text); }
  .btn.secondary[data-muted="true"] { background: var(--warn-bg); color: var(--warn-text); }
  .call-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
  .voice-state[data-state="muted"] .voice-dot { background: var(--warn-text); }

  .side { min-height: 0; overflow-y: auto; padding: 16px; background: var(--surface); border-inline-start: 1px solid var(--line); }
  .card { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
  .card:last-child { border-bottom: 0; margin-bottom: 0; }
  .card h2 { margin: 0 0 10px; font: 600 15px/1.3 var(--font-ui); }
  .field { display: block; margin-bottom: 12px; }
  .field > span { display: block; margin-bottom: 4px; font: 500 14px var(--font-ui); }
  .field select { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .hint { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
  .check { display: flex; align-items: flex-start; gap: 8px; min-height: 32px; font-size: 14px; }
  .check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); flex: none; }
  .big { font: 600 32px/1.1 var(--font-ui); font-variant-numeric: tabular-nums; }
  .big small { font: 400 14px var(--font-body); color: var(--muted); }
  dl.facts { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 10px 0 0; font-size: 14px; }
  dl.facts dt { color: var(--muted); }
  dl.facts dd { margin: 0; font-variant-numeric: tabular-nums; text-align: left; overflow-wrap: anywhere; }
  details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; font: 500 14px var(--font-ui); list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  details > summary::after { content: "+"; font-size: 18px; color: var(--muted); }
  details[open] > summary::after { content: "−"; }
  .subhead { margin: 14px 0 6px; font: 500 13px var(--font-ui); color: var(--muted); }

  .admin-nav { display: inline-flex; gap: 8px; }
  .ghost.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
  .count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 12px/20px var(--font-ui); text-align: center; }

  .fix-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; padding-inline: 4px; font-size: 13px; color: var(--muted); }
  .fix-btn { min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; font: 500 13px var(--font-ui); color: var(--muted); transition: background-color .15s, color .15s; }
  .fix-btn:hover { background: var(--surface-2); color: var(--text); }
  .fix-note { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 240px; }
  .fix-note input { flex: 1 1 160px; min-width: 0; min-height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }

  .page { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 20px 40px; }
  .page-column { max-width: 860px; margin: 0 auto; }
  .page-title { margin: 0 0 4px; font: 600 22px/1.3 var(--font-ui); }
  .page-intro { margin: 0 0 18px; color: var(--muted); }
  .panel { padding: 18px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .panel h3 { margin: 0 0 12px; font: 600 16px/1.3 var(--font-ui); }
  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; align-items: start; }
  .field input { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .field > .input-with-button { display: flex; gap: 8px; margin: 0; font: inherit; }
  .input-with-button input { flex: 1; min-width: 0; }
  .input-with-button .small-btn { min-height: 44px; flex: none; }
  .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }

  .user-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .user-row:last-child { border-bottom: 0; }
  .user-who { flex: 1 1 180px; min-width: 0; }
  .user-who strong { display: block; font: 500 15px var(--font-ui); overflow-wrap: anywhere; }
  .user-who span { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
  .user-row select { min-height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .user-password { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
  .user-password input { flex: 1 1 180px; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  .small-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; font: 500 14px var(--font-ui); transition: background-color .15s; }
  .small-btn:hover { background: var(--surface-2); }
  .small-btn:disabled { opacity: .5; }
  .small-btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
  .small-btn.primary:hover { background: var(--accent); opacity: .9; }
  .small-btn.danger { color: var(--danger); }

  .fix-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
  .filter { min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font: 500 14px var(--font-ui); color: var(--muted); }
  .filter[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
  .presence { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 14px; color: var(--muted); }
  .presence i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
  .presence[data-on="true"] i { background: #16a34a; }
  .fix-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
  .status { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); font: 500 13px var(--font-ui); color: var(--text); }
  .status[data-status="new"] { background: var(--warn-bg); color: var(--warn-text); }
  .status[data-status="sent"], .status[data-status="fixing"] { background: var(--accent-soft); color: var(--accent-text); }
  .fix-label { display: block; margin: 10px 0 2px; font: 500 13px var(--font-ui); color: var(--muted); }
  .fix-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
  .fix-card textarea { width: 100%; min-height: 64px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); resize: vertical; }
  .fix-card details { margin-top: 8px; }
  .fix-detail { margin: 0; padding: 10px; max-height: 320px; overflow: auto; border-radius: 8px; background: var(--surface-2); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
  .fix-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

  .login { flex: 1; display: grid; place-items: center; padding: 24px 16px; }
  .login-card { width: min(100%, 380px); padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
  .login-card h1 { margin: 0 0 4px; font: 600 20px/1.3 var(--font-ui); }
  .login-card p { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
  .login-card .btn { width: 100%; margin-top: 4px; }
  .form-error { margin: 8px 0 0; font-size: 14px; color: var(--danger); }

  .toast { position: fixed; inset-inline: 0; bottom: 20px; width: fit-content; max-width: calc(100% - 32px); margin-inline: auto; padding: 10px 16px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 14px; box-shadow: var(--shadow); z-index: 10; }
  .closed-note { padding: 48px 16px; text-align: center; color: var(--muted); }

  /* A regular user sees only the conversation. The functions refuse the rest anyway. */
  body[data-role="regular"] .side, body[data-role="regular"] .to-settings, body[data-role="regular"] .wide, body[data-role="regular"] .caption { display: none; }
  body[data-role="regular"] .layout { grid-template-columns: minmax(0, 1fr); }
  body[data-closed="true"] .dock, body[data-closed="true"] #empty, body[data-closed="true"] #log { display: none; }

  .to-chat { display: none; }
  @media (max-width: 900px) {
    .nav-btn span { display: inline !important; }
    .fix-btn, .fix-note input { min-height: 44px; }
    .page { padding: 16px 16px 32px; }
    .app { height: auto; min-height: 100dvh; }
    .layout { display: block; }
    .conversation { height: calc(100dvh - var(--topbar-height, 124px)); }
    .topbar { padding: 10px 16px; gap: 10px 8px; }
    .brand { flex: 1 1 0; margin: 0; }
    .brand h1 { font-size: 16px; }
    .brand .wide { display: none; }
    .to-chat { display: inline-flex; margin-bottom: 14px; }
    .segmented { order: 3; width: 100%; }
    .segmented label { flex: 1; }
    .segmented span { justify-content: center; }
    .to-settings { display: inline-flex; }
    .scroll { padding: 16px 16px 8px; }
    .dock { padding: 8px 16px 12px; }
    .side { border-inline-start: 0; border-top: 1px solid var(--line); }
    .ghost span { display: none; }
    .ghost { padding: 0 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }