/* Sederr — customer-facing pages (login, change-password, dashboard).
   Hebrew RTL, brand palette per CLAUDE.md. Separate from public/admin/
   admin.css by design - admin pages are English/LTR/utilitarian, these are
   the actual product-facing brand experience. */

:root {
  --indigo: #6366f1;
  --indigo-dark: #4f46e5;
  --cyan: #0ea5e9;
  --bg: #f8fafc;
  --surface: #ffffff;
  --text: #0f172a;
  --text-muted: #64748b;
  --border: #e2e8f0;
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --gradient: linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #0ea5e9 100%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: var(--indigo);
}

/* ---------- Auth pages (login / change-password) ---------- */

body.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

.brand-bar {
  height: 6px;
  background: var(--gradient);
}

.auth-card-body {
  padding: 32px 28px;
}

.auth-card h1 {
  margin: 0 0 4px;
  font-size: 22px;
}

.subtitle {
  color: var(--text-muted);
  margin: 0 0 24px;
  font-size: 14px;
}

form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 6px;
}

form label:first-of-type {
  margin-top: 0;
}

form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}

form input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Sign-in page: the "remember this device" row (Session 5.29). */
form label.remember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin: 16px 0 0;
}
form label.remember-row input {
  width: auto;
  margin: 0;
  flex: none;
}
.auth-card .field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 20px;
}

.hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.btn {
  display: inline-block;
  background: var(--indigo);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

.btn:hover {
  background: var(--indigo-dark);
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  background: var(--bg);
}

.btn-block {
  width: 100%;
  margin-top: 22px;
}

.message {
  margin-top: 16px;
  font-size: 14px;
  min-height: 20px;
}

.message.error {
  color: var(--error);
}

.message.success {
  color: var(--success);
}

/* ---------- Dashboard shell ---------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.topbar-brand img {
  height: 30px;
  width: auto;
  display: block;
}

.auth-logo {
  display: block;
  height: auto;
  max-width: 160px;
  margin: 0 0 20px;
}

/* Login pages only: logo centered as the card's headline. */
.auth-logo.auth-logo-center {
  width: 200px;
  max-width: 100%;
  margin: 4px auto 28px;
}

.topbar-business {
  font-size: 14px;
  color: var(--text-muted);
}

.page-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.panel h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.panel-note {
  color: var(--text-muted);
  font-size: 13px;
  margin: 0 0 16px;
}

.field-group {
  margin-bottom: 16px;
}

.field-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.field-group .field-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

.field-group input[type='text'],
.field-group textarea,
.field-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
}

.field-group textarea {
  min-height: 80px;
}

.field-group input:focus,
.field-group textarea:focus,
.field-group select:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .grid-2 {
    grid-template-columns: 1fr;
  }
}

.faq-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--bg);
}

.faq-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.faq-row-header span {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.link-btn {
  background: none;
  border: none;
  color: var(--error);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
}

.btn-add {
  background: var(--surface);
  border: 1px dashed var(--indigo);
  color: var(--indigo);
  border-radius: 8px;
  padding: 10px;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
}

.actions-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.status-banner {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 20px;
}

.status-banner.submitted {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.status-banner.draft {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* ---------- Dashboard nav / home / conversations (Session 5.2) ---------- */

.page-shell.wide { max-width: 960px; }

.topbar-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.topbar-nav a {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: none;
}
.topbar-nav a:hover { background: var(--bg); color: var(--text); }
.topbar-nav a.active { background: #eef2ff; color: var(--indigo-dark); font-weight: 600; }

/* Attention counters (Session 5.25): a small number on the navigation links and the "needs you" strip on Home. */
.nav-badge {
  display: inline-block;
  min-width: 18px;
  margin-inline-start: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.needs-you {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.needs-you-head { font-weight: 700; margin-bottom: 4px; }
.needs-you-item { padding: 2px 0; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.stat-tile .stat-value { font-size: 26px; font-weight: 700; color: var(--indigo); }
.stat-tile.alert .stat-value { color: var(--error); }
.stat-tile .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.status-banner.info { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.status-banner.alert { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.status-banner a { font-weight: 600; }

.conv-list { list-style: none; margin: 0; padding: 0; }
.conv-item {
  display: block;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
}
.conv-item:last-child { border-bottom: 0; }
.conv-item:hover { background: var(--bg); }
.conv-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.conv-phone { font-weight: 600; direction: ltr; unicode-bidi: embed; }
.conv-preview { font-size: 13px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-time { font-size: 12px; color: var(--text-muted); }
.empty-state { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 14px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.conv-badge-open { background: #ecfdf5; color: var(--success); }
.conv-badge-escalated { background: #fef2f2; color: var(--error); }
.conv-badge-closed { background: #f1f5f9; color: var(--text-muted); }

.filters { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px; align-items: end; }
.filters .field-group { margin-bottom: 0; }
.filters input[type='date'] {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--surface);
}
.filters input[type='text'] { width: 100%; }

.transcript { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.transcript-row { display: flex; }
.bubble { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; }
.bubble-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.bubble-body { white-space: pre-wrap; word-break: break-word; }
/* RTL: flex-start is the right edge - the end customer sits on the right, the bot on the left */
.transcript-row.bubble-inbound { justify-content: flex-start; }
.transcript-row.bubble-inbound .bubble { background: var(--bg); border: 1px solid var(--border); }
.transcript-row.bubble-outbound { justify-content: flex-end; }
.transcript-row.bubble-outbound .bubble { background: #eef2ff; border: 1px solid #c7d2fe; }
.transcript-row.bubble-owner_checkin_reply { justify-content: flex-end; }
.transcript-row.bubble-owner_checkin_reply .bubble { background: #fffbeb; border: 1px solid #fde68a; }
.transcript-row.bubble-system { justify-content: center; }
.transcript-row.bubble-system .bubble { background: transparent; color: var(--text-muted); font-style: italic; text-align: center; }

@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .filters { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
}

/* ---------- Bot settings / Account / forgot-password (Session 5.5) ---------- */
.field-group input[type='email'],
.field-group input[type='tel'],
.field-group input[type='password'],
.field-group input[type='number'] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
.field-group input[type='email'],
.field-group input[type='tel'] { direction: ltr; text-align: right; }
.field-group input[type='email']:focus,
.field-group input[type='tel']:focus,
.field-group input[type='password']:focus,
.field-group input[type='number']:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.doc-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  background: var(--bg);
}
.doc-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.doc-type { background: #eef2ff; color: var(--indigo-dark); }
.doc-text { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; margin: 0; }
.doc-actions { display: flex; gap: 12px; }
.link-btn.neutral { color: var(--indigo-dark); }
.char-count { font-size: 12px; color: var(--text-muted); margin: 4px 0 0; }

.panel.danger { border-color: #fecaca; }
.panel.danger h2 { color: #991b1b; }
.btn-danger { background: var(--error); }
.btn-danger:hover { background: #dc2626; }
.auth-links { margin: 16px 0 0; font-size: 14px; text-align: center; }

/* ---------- Onboarding progress timeline (Session 5.6) ---------- */
.progress-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.progress-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  color: var(--text-muted);
}

.progress-step::before {
  content: '';
  flex: 0 0 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
}

.progress-step.done {
  color: var(--text);
}

.progress-step.done::before {
  background: var(--success);
  border-color: var(--success);
}

.progress-step.current {
  color: var(--text);
  font-weight: 700;
}

.progress-step.current::before {
  border-color: var(--indigo);
  background: var(--indigo);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}

.progress-step .progress-step-tag {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.progress-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  white-space: pre-wrap;
}

.progress-note-label {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* Per-answer instructions shown under a questionnaire choice (Session 5.6). */
.guidance {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.25);
  border-radius: 10px;
  color: var(--text);
  line-height: 1.6;
}

.guidance.warn {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.4);
}

/* ---------- Booking hours editor (Session 5.7) ---------- */
.avail-rows { margin-bottom: 8px; }
.avail-day {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 16px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.avail-day:last-child { border-bottom: 0; }
.avail-day-name { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.avail-day-name input { width: 18px; height: 18px; accent-color: var(--indigo); }
.avail-ranges { display: flex; flex-direction: column; gap: 8px; }
.avail-closed { color: var(--text-muted); font-size: 14px; padding-top: 2px; }
.avail-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.avail-range span { color: var(--text-muted); font-size: 14px; }
.avail-actions { display: flex; gap: 12px; }
.avail-subtitle { font-size: 16px; margin: 28px 0 4px; }
.avail-range input[type='time'],
.blocked-row input[type='date'],
.blocked-row input[type='text'] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
}
.avail-range input[type='time'], .blocked-row input[type='date'] { direction: ltr; }
.avail-range input:focus, .blocked-row input:focus {
  outline: none;
  border-color: var(--indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.blocked-row {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg);
}
.blocked-row label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
@media (max-width: 600px) {
  .avail-day { grid-template-columns: 1fr; }
  .blocked-row { grid-template-columns: 1fr 1fr; }
  .blocked-row .blocked-reason { grid-column: 1 / -1; }
}

/* ---------- Bookable services editor (Session 5.19) ---------- */
.svc-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg);
}
.svc-row label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.svc-row input[type='text'], .svc-row input[type='number'] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
}
.svc-row input[type='number'] { direction: ltr; text-align: right; }
.svc-row input:disabled { background: var(--bg); opacity: 0.6; }
.svc-row input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.svc-row .svc-quote-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text); margin: 0; }
.svc-row .svc-quote-label input { width: 18px; height: 18px; accent-color: var(--indigo); }
@media (max-width: 600px) {
  .svc-row { grid-template-columns: 1fr 1fr; }
  .svc-row .svc-name-box { grid-column: 1 / -1; }
}

/* ---------- The owner's own questions before an appointment (Session 5.20) ---------- */
.q-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--bg);
}
.q-row label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.q-row input[type='text'], .q-row select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  background: var(--surface);
}
.q-row input:focus, .q-row select:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); }
.q-row .svc-quote-label { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; color: var(--text); margin: 0; }
.q-row .svc-quote-label input { width: 18px; height: 18px; accent-color: var(--indigo); }
@media (max-width: 600px) {
  .q-row { grid-template-columns: 1fr 1fr; }
  .q-row .q-text-box, .q-row .q-options-box { grid-column: 1 / -1; }
}

/* ---------- Connection plan (Session 5.12) ---------- */
.guidance .plan-step + .plan-step { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(99, 102, 241, 0.2); }
.guidance .plan-step-title { font-weight: 600; }
.guidance .plan-step-body { margin-top: 2px; }
.guidance.ok { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.35); }
.guidance.blocked { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.35); }
.plan-headline { font-weight: 600; margin-bottom: 10px; }
.plan-headline.ready { color: var(--success); }
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-list li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); }
.plan-list li:last-child { border-bottom: 0; }
.plan-mark { flex: none; width: 18px; text-align: center; font-weight: 700; }
.plan-list .ok .plan-mark { color: var(--success); }
.plan-list .todo .plan-mark, .plan-list .blocked .plan-mark { color: var(--error); }
.plan-list .warn .plan-mark { color: var(--warning, #f59e0b); }
.plan-list .sederr .plan-mark, .plan-list .info .plan-mark { color: var(--text-muted); }

/* ---------- Setup Guide (Session 5.13) ---------- */
.guide-lead { margin-bottom: 18px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.guide-toc a {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); font-size: 14px; text-decoration: none;
}
.guide-toc a:hover { border-color: var(--indigo); color: var(--indigo-dark); }
.guide-section { scroll-margin-top: 16px; }
.guide-section h3 { margin: 22px 0 6px; font-size: 16px; }
.guide-section p { margin: 0 0 12px; }
.guide-list { margin: 0 0 12px; padding: 0 20px 0 0; }
.guide-list li { margin-bottom: 8px; }
.guide-steps { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: guide-step; }
.guide-steps li {
  counter-increment: guide-step; position: relative; padding: 0 44px 14px 0; margin-bottom: 4px;
}
.guide-steps li::before {
  content: counter(guide-step); position: absolute; right: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%; background: var(--indigo); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px;
}
.guide-defs { margin: 0 0 12px; }
.guide-defs dt { font-weight: 600; margin-top: 12px; }
.guide-defs dd { margin: 2px 0 0; color: var(--text-muted); }
.callout {
  border: 1px solid rgba(99, 102, 241, 0.35); background: rgba(99, 102, 241, 0.06);
  border-radius: 10px; padding: 12px 14px; margin: 12px 0;
}
.shot { margin: 16px 0 8px; }
.shot img {
  display: block; width: 100%; max-width: 860px; height: auto;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}
.shot figcaption { margin-top: 6px; font-size: 13px; color: var(--text-muted); }
.guide-group-title { margin: 28px 0 12px; font-size: 18px; }
.email-card h3 { margin: 0 0 8px; }
.email-meta { margin: 0 0 12px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 14px; }
.email-meta dt { color: var(--text-muted); font-weight: 600; }
.email-meta dd { margin: 0; }
.email-frame { width: 100%; min-height: 360px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); }
@media (max-width: 600px) {
  .email-meta { grid-template-columns: 1fr; }
  .email-meta dd { margin-bottom: 6px; }
  .guide-toc a { font-size: 13px; }
}

/* ============================================================
   Session 5.14 - Summaries tab + Analytics tab
   ============================================================ */
.check-row { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 15px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--indigo); flex: none; }
.muted { color: var(--text-muted); }

.summary-card .summary-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.summary-card .summary-head h2 { margin: 0; }
.summary-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; color: var(--text-muted); margin-bottom: 12px; }
.summary-stats strong { color: var(--text); font-size: 18px; margin-left: 4px; }
.summary-text { margin: 0 0 8px; white-space: pre-wrap; }
.summary-sub { font-size: 14px; margin: 14px 0 4px; }
.summary-list { margin: 0; padding: 0 20px 0 0; }
.summary-list li { margin-bottom: 4px; }
.summary-topics { margin: 14px 0 0; font-size: 14px; color: var(--text-muted); }
.summary-topics strong { color: var(--text); }
.summary-foot { margin: 14px 0 0; font-size: 14px; }
.sentiment-positive { background: #ecfdf5; color: var(--success); }
.sentiment-neutral { background: #f1f5f9; color: var(--text-muted); }
.sentiment-negative { background: #fef2f2; color: var(--error); }

.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 16px; }
.chart-panel { margin-bottom: 0; min-width: 0; }
.chart-panel h2 { font-size: 15px; margin: 0 0 4px; }
.chart-panel .panel-note { margin: 0 0 12px; font-size: 12px; }
/* Charts read left to right (oldest first) like numbers on an axis, also in the RTL page. */
.bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; border-bottom: 1px solid var(--border); padding-bottom: 2px; direction: ltr; }
.bar-chart .bar-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; min-width: 3px; }
.bar-chart .bar-stack { display: flex; flex-direction: column-reverse; width: 100%; border-radius: 3px 3px 0 0; overflow: hidden; }
.bar-chart .bar-seg { width: 100%; }
.bar-chart .bar-seg-inbound, .bar-chart .bar-seg-default { background: var(--indigo); }
.bar-chart .bar-seg-outbound { background: var(--cyan); }
.chart-x-labels { display: flex; gap: 3px; margin-top: 6px; direction: ltr; }
.chart-x-labels span { flex: 1; text-align: center; font-size: 10px; color: var(--text-muted); min-width: 3px; white-space: nowrap; overflow: visible; }
.chart-legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
.chart-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-left: 5px; vertical-align: -1px; }
.swatch-inbound { background: var(--indigo); }
.swatch-outbound { background: var(--cyan); }

.meter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14px; }
.meter-label { width: 52px; flex: none; }
.meter-row-wide .meter-label { width: 84px; }
.meter { flex: 1; height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.meter-fill { display: block; height: 100%; }
.meter-fill.sentiment-positive { background: var(--success); }
.meter-fill.sentiment-neutral { background: #94a3b8; }
.meter-fill.sentiment-negative { background: var(--error); }
.meter-count { width: 28px; text-align: left; color: var(--text-muted); flex: none; }
.topic-list { margin: 0; padding: 0 18px 0 0; }
.topic-list li { margin-bottom: 6px; }
#tiles { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 720px) {
  .chart-grid { grid-template-columns: 1fr; }
  #tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Session 5.15 - documents to sign, signed copies, inactive banner
   ============================================================ */
.doc-panel summary { cursor: pointer; font-weight: 700; font-size: 17px; }
.doc-panel .doc-heading { font-size: 15px; margin: 16px 0 2px; }
.doc-accept { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; cursor: pointer; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.doc-accept input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--indigo); flex: none; }
.signed-list { list-style: none; margin: 0; padding: 0; }
.signed-list li { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.signed-list li:last-child { border-bottom: 0; }
.signed-text { white-space: pre-wrap; font-size: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-top: 8px; }
.inactive-banner { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; font-weight: 600; }
.inactive-banner a { color: #991b1b; text-decoration: underline; }
.inactive-banner .inactive-sub { font-weight: 400; margin-top: 4px; }

/* ============================================================
   Session 5.16 - "Test your bot" chat
   ============================================================ */
.testchat-rules { background: #eef2ff; color: #3730a3; border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.6; margin-bottom: 14px; }
.testchat-box { display: flex; flex-direction: column; gap: 10px; }
.testchat-log { height: 420px; overflow-y: auto; background: #f1f5f9; border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.testchat-empty { color: var(--text-muted); font-size: 14px; margin: auto; text-align: center; max-width: 340px; }
.testchat-row { display: flex; }
.testchat-user { justify-content: flex-start; }
.testchat-bot { justify-content: flex-end; }
.testchat-bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.testchat-user .testchat-bubble { background: #dcfce7; border-bottom-right-radius: 4px; }
.testchat-bot .testchat-bubble { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.testchat-pending .testchat-bubble { color: var(--text-muted); font-style: italic; }
.testchat-note { align-self: stretch; font-size: 12.5px; line-height: 1.55; color: #475569; background: #fff7ed; border: 1px dashed #fdba74; border-radius: 8px; padding: 8px 12px; }
.testchat-note-unknown { background: #fefce8; border-color: #fde047; }
.testchat-note-booking { background: #ecfeff; border-color: #67e8f9; }
.testchat-note-failed { background: #fef2f2; border-color: #fca5a5; }
.testchat-note-safety { background: #fef2f2; border-color: #fca5a5; }
.testchat-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.testchat-chip { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--text); }
.testchat-chip:hover { border-color: var(--indigo); color: var(--indigo-dark); }
.testchat-form { display: flex; gap: 8px; }
.testchat-form input[type='text'] { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; }
.testchat-form input[type='text']:focus { outline: none; border-color: var(--indigo); }
.testchat-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 32px; }
@media (max-width: 600px) {
  .testchat-log { height: 360px; }
  .testchat-bubble { max-width: 90%; }
}

/* ---------- Appointments tab (Session 5.21) ---------- */
.appt-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; background: var(--surface); }
.appt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.appt-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }
.appt-when { margin: 4px 0; font-weight: 600; }
.appt-line { margin: 2px 0; font-size: 14px; }
.appt-note { margin: 6px 0; font-size: 13px; color: #92400e; }
.appt-lines { margin: 4px 0; padding-inline-start: 18px; font-size: 14px; }
.appt-field { margin: 8px 0 0; }
.appt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.appt-source { background: #eef2ff; color: var(--indigo); }
.appt-badge-pending { background: #fffbeb; color: #92400e; }
.appt-badge-proposed { background: #eff6ff; color: #1d4ed8; }
.appt-badge-approved { background: #ecfdf5; color: var(--success); }
.appt-badge-declined, .appt-badge-client_declined, .appt-badge-expired { background: #f1f5f9; color: var(--text-muted); }
.appt-field input[type='datetime-local'], .field-group input[type='datetime-local'] { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; background: var(--surface); direction: ltr; text-align: right; }
@media (max-width: 720px) { .appt-actions .btn { flex: 1 1 100%; } }

/* The owner use-case table in the Setup Guide (Session 5.21): a table on a wide screen, stacked cards on a phone */
.guide-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 4px; }
.guide-table th, .guide-table td { border: 1px solid var(--border); padding: 8px 10px; text-align: right; vertical-align: top; }
.guide-table th { background: var(--bg); font-weight: 600; }
@media (max-width: 720px) {
  .guide-table thead { display: none; }
  .guide-table, .guide-table tbody, .guide-table tr, .guide-table td { display: block; width: 100%; }
  .guide-table tr { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
  .guide-table td { border: 0; border-bottom: 1px solid var(--border); }
  .guide-table td:last-child { border-bottom: 0; }
  .guide-table td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--text-muted); font-size: 12px; margin-bottom: 2px; }
}

/* ---------- Minimum-information checklist (Session 5.27) ---------- */
.static-value { padding: 10px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; direction: ltr; text-align: right; }
.checklist-meter { height: 10px; background: var(--bg); border-radius: 5px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 10px; }
.checklist-meter-fill { height: 100%; width: 0; background: var(--indigo); transition: width 0.3s ease; }
.checklist-meter-fill.complete { background: var(--success); }
.checklist-item { align-items: flex-start !important; }
.checklist-item a.checklist-link { color: inherit; text-decoration: none; font-weight: 600; }
.checklist-item a.checklist-link:hover { color: var(--indigo-dark); text-decoration: underline; }
.checklist-item .checklist-note { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.plan-list .done .plan-mark { color: var(--success); }
.plan-list .partial .plan-mark { color: var(--warning, #f59e0b); }
.plan-list .missing .plan-mark { color: var(--text-muted); }