/* WhatsApp Bot page and the Bookings page (ui/whatsapp-bot.html, ui/bookings.html). */
/* WhatsApp bot page. Solid colours only, Tajawal 400/500 (700 for the page title only). */
.wa-bot-page {
  --wa-primary: #7c3aed;
  --wa-primary-ink: #6d28d9;
  --wa-primary-soft: #f3effe;
  --wa-primary-line: #ddd3fb;
  --wa-ink: #111827;
  --wa-text: #374151;
  --wa-muted: #6b7280;
  --wa-line: #e6e8f0;
  --wa-line-strong: #d9dce5;
  --wa-soft: #f7f7fa;
  --wa-success: #15803d;
  --wa-success-soft: #ecfdf3;
  --wa-warning: #b45309;
  --wa-warning-soft: #fffbeb;
  --wa-danger: #b91c1c;
  --wa-danger-soft: #fef2f2;
  font-family: 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--wa-ink);
  display: grid;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
}
.wa-bot-page *,
.wa-bot-page *::before,
.wa-bot-page *::after { box-sizing: border-box; }
.wa-bot-page button,
.wa-bot-page input,
.wa-bot-page select,
.wa-bot-page textarea { font-family: inherit; }
.wa-admin-shell { display: grid; gap: 20px; min-width: 0; max-width: 100%; }
.wa-tab-panel { display: grid; gap: 16px; min-width: 0; }
.wa-tab-panel[hidden] { display: none !important; }
.wa-admin-shell [hidden] { display: none !important; }
.wa-ico { width: 18px; height: 18px; flex: none; display: block; }
.wa-ico-lg { width: 22px; height: 22px; }

/* Page header */
.wa-page-head { display: grid; gap: 14px; }
.wa-page-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.wa-page-title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--wa-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; min-width: 0; }
.wa-page-title-sep,
.wa-page-title-brand { color: var(--wa-muted); font-weight: 400; }
.wa-page-title-brand { overflow-wrap: anywhere; }
.wa-status-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; background: #f3f4f6; color: #4b5563; white-space: nowrap; }
.wa-status-pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wa-status-pill[data-tone="training"] { background: var(--wa-primary-soft); color: var(--wa-primary-ink); }
.wa-status-pill[data-tone="live"] { background: var(--wa-success-soft); color: var(--wa-success); }
.wa-status-pill[data-tone="paused"] { background: var(--wa-warning-soft); color: var(--wa-warning); }
.wa-status-pill[data-tone="attention"] { background: var(--wa-danger-soft); color: var(--wa-danger); }

.wa-nav { display: flex; gap: 4px; border-bottom: 1px solid var(--wa-line); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.wa-nav::-webkit-scrollbar { display: none; }
.wa-nav-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--wa-muted); font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.wa-nav-btn:hover { color: var(--wa-ink); }
.wa-nav-btn.active { color: var(--wa-primary-ink); border-bottom-color: var(--wa-primary); }
.wa-nav-btn:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: -2px; border-radius: 6px; }
.wa-nav-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--wa-primary-soft); color: var(--wa-primary-ink); font-size: 12px; font-weight: 500; display: inline-grid; place-items: center; }

/* Shared building blocks */
.wa-card { background: #fff; border: 1px solid var(--wa-line); border-radius: 16px; padding: 20px; min-width: 0; }
.wa-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.wa-card-head > div { min-width: 0; }
.wa-card-head > div:first-child { flex: 1 1 320px; }
.wa-admin-shell [aria-live]:empty,
.wa-admin-shell .wa-train-main > [aria-live]:empty { display: none; }
.wa-card-title { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--wa-ink); }
.wa-card-sub { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--wa-muted); }
.wa-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wa-section-head h2 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 500; }
.wa-section-head p { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--wa-muted); max-width: 68ch; }
.wa-eyebrow { font-size: 13px; font-weight: 500; color: var(--wa-muted); }
.wa-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wa-inline-note { font-size: 13px; line-height: 1.5; color: var(--wa-muted); }
.wa-inline-note:empty { display: none; }
.wa-link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; color: var(--wa-primary-ink); font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wa-link-btn:hover { color: #5b21b6; }
.wa-link-btn .wa-ico { width: 16px; height: 16px; }
.wa-tag { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wa-mini-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wa-pill-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wa-owner-pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; background: var(--wa-primary-soft); color: var(--wa-primary-ink); white-space: nowrap; }
.wa-owner-pill[data-owner-tone="human"] { background: var(--wa-warning-soft); color: var(--wa-warning); }
.wa-muted-empty { padding: 20px 16px; border: 1px dashed var(--wa-line-strong); border-radius: 12px; text-align: center; color: var(--wa-muted); font-size: 14px; line-height: 1.5; }
.wa-empty { display: grid; justify-items: center; gap: 8px; padding: 36px 16px; text-align: center; }
.wa-empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--wa-soft); color: var(--wa-muted); display: grid; place-items: center; }
.wa-empty h3 { margin: 4px 0 0; font-size: 16px; font-weight: 500; }
.wa-empty p { margin: 0; max-width: 42ch; font-size: 14px; line-height: 1.55; color: var(--wa-muted); }
.wa-phone-ltr { direction: ltr; unicode-bidi: isolate; }
.wa-admin-shell .button[hidden] { display: none !important; }
.wa-admin-shell .button .wa-ico { width: 16px; height: 16px; }

/* Form fields */
.wa-field { display: grid; gap: 6px; min-width: 0; }
.wa-field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wa-field label,
.wa-field-label { font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-field-help { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wa-muted); }
.wa-field-state { font-size: 12px; font-weight: 500; color: var(--wa-muted); }
.wa-field-state.important { color: var(--wa-primary-ink); }
.wa-input,
.wa-textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--wa-line-strong); border-radius: 10px; background: #fff; color: var(--wa-ink); font-size: 15px; line-height: 1.5; font-weight: 400; }
.wa-textarea { min-height: 96px; resize: vertical; }
.wa-textarea.guided { min-height: 120px; }
select.wa-input { appearance: auto; padding-block: 8px; }
.wa-input:focus,
.wa-textarea:focus { outline: none; border-color: var(--wa-primary); box-shadow: 0 0 0 3px #ede9fe; }
.wa-input:disabled,
.wa-textarea:disabled { background: var(--wa-soft); color: var(--wa-muted); }
.wa-field-grid { display: grid; gap: 16px; min-width: 0; }
.wa-field-grid.two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wa-fieldset { display: grid; gap: 16px; padding-top: 20px; border-top: 1px solid var(--wa-line); min-width: 0; }
.wa-fieldset:first-of-type { padding-top: 0; border-top: 0; }
.wa-fieldset-head { display: grid; gap: 2px; }
.wa-fieldset-head strong { font-size: 16px; font-weight: 500; color: var(--wa-ink); }
.wa-fieldset-head span { font-size: 13px; line-height: 1.5; color: var(--wa-muted); }
.wa-check-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding-block: 10px; font-size: 14px; line-height: 1.5; color: var(--wa-text); cursor: pointer; }
.wa-check-row input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--wa-primary); flex: none; }

/* Switch */
.wa-switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-block: 4px; cursor: pointer; }
.wa-switch-copy { display: grid; gap: 4px; min-width: 0; }
.wa-switch-copy strong { font-size: 15px; font-weight: 500; color: var(--wa-ink); }
.wa-switch-copy span { font-size: 13px; line-height: 1.5; color: var(--wa-muted); }
.wa-switch { position: relative; flex: none; width: 46px; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; border-radius: 999px; background: #d1d5db; cursor: pointer; transition: background-color 150ms ease; }
.wa-switch::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.2); transition: inset-inline-start 150ms ease; }
.wa-switch:checked { background: var(--wa-primary); }
.wa-switch:checked::after { inset-inline-start: 21px; }
.wa-switch:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: 2px; }

/* Segmented controls and underline tabs */
.wa-dual-toggle { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: #f1f2f6; max-width: 100%; }
.wa-dual-toggle-btn { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: none; color: var(--wa-muted); font-size: 14px; font-weight: 500; cursor: pointer; }
.wa-dual-toggle-btn.active { background: #fff; color: var(--wa-ink); box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08); }
.wa-underline-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wa-line); overflow-x: auto; scrollbar-width: none; }
.wa-underline-tabs::-webkit-scrollbar { display: none; }
.wa-underline-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--wa-muted); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.wa-underline-tab.active { color: var(--wa-primary-ink); border-bottom-color: var(--wa-primary); }
.wa-underline-tab:hover { color: var(--wa-ink); }

/* Home: journey */
.wa-journey { display: grid; gap: 16px; }
.wa-journey-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.wa-jstep { display: grid; align-content: start; gap: 12px; padding: 20px; border: 1px solid var(--wa-line); border-radius: 16px; background: #fff; min-width: 0; }
.wa-jstep[data-state="current"] { border-color: var(--wa-primary); box-shadow: inset 0 0 0 1px var(--wa-primary); }
.wa-jstep[data-state="attention"] { border-color: #f1b4b4; }
.wa-jstep[data-state="locked"] { background: var(--wa-soft); }
.wa-jstep-top { display: flex; align-items: center; gap: 12px; }
.wa-jstep-marker { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #eceef3; color: var(--wa-muted); font-size: 15px; font-weight: 500; }
.wa-jstep-marker .wa-ico { width: 18px; height: 18px; }
.wa-jstep[data-state="current"] .wa-jstep-marker { background: var(--wa-primary); color: #fff; }
.wa-jstep[data-state="done"] .wa-jstep-marker { background: var(--wa-success-soft); color: var(--wa-success); }
.wa-jstep[data-state="attention"] .wa-jstep-marker { background: var(--wa-danger-soft); color: var(--wa-danger); }
.wa-jstep-heading { display: grid; gap: 2px; min-width: 0; }
.wa-jstep-heading h3 { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--wa-ink); }
.wa-jstep[data-state="locked"] .wa-jstep-heading h3 { color: var(--wa-muted); }
.wa-jstep-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wa-text); }
.wa-jstep[data-state="locked"] .wa-jstep-text,
.wa-jstep[data-state="done"] .wa-jstep-text { color: var(--wa-muted); }
.wa-jstep-progress { display: grid; gap: 6px; }
.wa-jstep-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wa-jstep-actions:empty { display: none; }
.wa-jstep .wa-inline-note { margin: 0; }
.wa-progress { height: 6px; border-radius: 999px; background: #eceef3; overflow: hidden; }
.wa-progress > span { display: block; height: 100%; width: 0; background: var(--wa-primary); border-radius: inherit; transition: width 200ms ease; }

/* Home: live strip and dashboard */
.wa-live-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 14px 18px; border: 1px solid var(--wa-line); border-radius: 16px; background: #fff; }
.wa-live-items { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; min-width: 0; }
.wa-live-item { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--wa-text); min-width: 0; }
.wa-live-item .wa-ico { width: 16px; height: 16px; color: var(--wa-success); }
.wa-live-item[data-tone="paused"] .wa-ico { color: var(--wa-warning); }
.wa-home-dash { display: grid; gap: 16px; min-width: 0; }
.wa-admin-shell.is-loading .wa-tab-panel,
.wa-admin-shell.is-loading .wa-status-pill { visibility: hidden; }
.wa-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.wa-stat { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border: 1px solid var(--wa-line); border-radius: 14px; background: #fff; min-width: 0; }
.wa-stat-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--wa-muted); }
.wa-stat-label .wa-ico { width: 16px; height: 16px; }
.wa-stat-value { font-size: 26px; line-height: 1.25; font-weight: 500; color: var(--wa-ink); overflow-wrap: anywhere; }
.wa-stat-value.is-text { font-size: 17px; line-height: 1.45; padding-block: 5px; }
.wa-stat-sub { font-size: 13px; color: var(--wa-muted); }
.wa-home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wa-recent-list { display: grid; }
.wa-recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; width: 100%; min-height: 56px; padding: 10px 8px; border: 0; border-top: 1px solid var(--wa-line); background: none; text-align: start; cursor: pointer; border-radius: 0; color: inherit; }
.wa-recent-row:first-child { border-top: 0; }
.wa-recent-row:hover { background: var(--wa-soft); }
.wa-recent-name { font-size: 15px; font-weight: 500; color: var(--wa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-recent-time { font-size: 12px; color: var(--wa-muted); white-space: nowrap; }
.wa-recent-preview { grid-column: 1 / -1; font-size: 13px; color: var(--wa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-kv-list { display: grid; margin: 0; }
.wa-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding-block: 8px; border-top: 1px solid var(--wa-line); font-size: 14px; }
.wa-kv-row:first-child { border-top: 0; }
.wa-kv-row dt { color: var(--wa-muted); }
.wa-kv-row dd { margin: 0; font-weight: 500; color: var(--wa-ink); text-align: end; overflow-wrap: anywhere; min-width: 0; }
.wa-card-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wa-line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Home: operations audit card (the original green audit card) */
.meta-wa-ops-audit-card {
  border-color: #bbf7d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 42%, #f0f9ff 100%);
  box-shadow: 0 14px 36px rgba(22, 163, 74, 0.08);
  margin-bottom: 18px;
}
.meta-wa-ops-audit-card .meta-ai-audit-glow {
  background: radial-gradient(circle, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0) 70%);
}
.meta-wa-ops-audit-card .meta-ai-audit-eyebrow,
.meta-wa-ops-audit-card.is-rtl .meta-ai-audit-eyebrow {
  color: #15803d;
}
.meta-wa-ops-audit-card .meta-ai-audit-title {
  color: #14532d;
}
.meta-wa-ops-audit-card .meta-ai-audit-icon {
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.22);
  box-shadow: 0 8px 20px rgba(22, 163, 74, 0.12);
}
.meta-wa-ops-audit-card .meta-ai-audit-score-pill {
  border-color: rgba(34, 197, 94, 0.22);
  color: #14532d;
  background: rgba(255, 255, 255, 0.92);
}
.meta-wa-ops-audit-card .meta-ai-audit-btn {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 55%, #15803d 100%);
  border-color: #15803d;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.24);
  color: #fff;
}
.meta-wa-ops-audit-card .meta-ai-audit-btn:hover:not(:disabled) {
  box-shadow: 0 14px 28px rgba(22, 163, 74, 0.28);
}
/* (the redesigned card styles below are no longer used by the audit card) */
.wa-ops-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 18px; align-items: start; }
.wa-ops-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--wa-success-soft); color: var(--wa-success); }
.wa-ops-copy { display: grid; gap: 6px; min-width: 0; }
.wa-ops-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wa-ops-title-row h2 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; }
.wa-ops-copy p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--wa-text); max-width: 70ch; }
.wa-ops-copy .wa-field-help { color: var(--wa-muted); }
.wa-ops-side { display: grid; justify-items: end; gap: 10px; }
.wa-ops-score { padding: 6px 12px; border-radius: 999px; background: var(--wa-success-soft); color: var(--wa-success); font-size: 14px; font-weight: 500; white-space: nowrap; }

/* Home: help */
.wa-help { border: 1px solid var(--wa-line); border-radius: 16px; background: #fff; }
.wa-help > summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 20px; cursor: pointer; }
.wa-help > summary::-webkit-details-marker { display: none; }
.wa-help-summary-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wa-help-summary-copy strong { font-size: 16px; font-weight: 500; }
.wa-help-summary-copy span { font-size: 13px; color: var(--wa-muted); }
.wa-help > summary > .wa-ico:first-child { color: var(--wa-muted); }
.wa-help-chevron { transition: transform 150ms ease; color: var(--wa-muted); }
.wa-help[open] .wa-help-chevron { transform: rotate(180deg); }
.wa-help-body { padding: 0 20px 16px; display: grid; gap: 4px; }
.wa-help-trouble { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 14px; border-radius: 12px; background: var(--wa-soft); font-size: 14px; color: var(--wa-text); }
.wa-help-trouble a { color: var(--wa-primary-ink); font-weight: 500; text-underline-offset: 3px; min-height: 40px; display: inline-flex; align-items: center; }
.wa-faq { column-count: 2; column-gap: 32px; }
.wa-faq details { break-inside: avoid; border-bottom: 1px solid var(--wa-line); }
.wa-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding-block: 10px; font-size: 15px; font-weight: 500; line-height: 1.45; cursor: pointer; }
.wa-faq summary::-webkit-details-marker { display: none; }
.wa-faq summary::after { content: '+'; flex: none; font-size: 18px; color: var(--wa-muted); }
.wa-faq details[open] summary::after { content: '\2212'; }
.wa-faq p,
.wa-faq ol { margin: 0 0 12px; font-size: 14px; line-height: 1.65; color: var(--wa-text); }
.wa-faq ol { padding-inline-start: 20px; }
.wa-faq a { color: var(--wa-primary-ink); text-underline-offset: 3px; }

/* Conversations */
.wa-conv-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wa-conv-layout.is-empty { grid-template-columns: minmax(0, 1fr); }
.wa-conversation-list { display: grid; }
.wa-conversation-card { display: grid; gap: 4px; width: 100%; min-height: 64px; padding: 12px 10px; border: 0; border-top: 1px solid var(--wa-line); background: none; text-align: start; color: inherit; cursor: pointer; }
.wa-conversation-card:first-child { border-top: 0; }
.wa-conversation-card:hover { background: var(--wa-soft); }
.wa-conversation-card.active { background: var(--wa-primary-soft); }
.wa-conversation-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.wa-conversation-top strong { font-size: 15px; font-weight: 500; color: var(--wa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wa-conversation-sub { font-size: 13px; line-height: 1.5; color: var(--wa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-pagination-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--wa-line); flex-wrap: wrap; }
.wa-pagination-row:empty { display: none; }
.wa-pagination-note { font-size: 13px; color: var(--wa-muted); }
.wa-pagination-actions { display: flex; gap: 8px; }
.wa-preview-panel { position: sticky; top: 16px; display: grid; gap: 12px; }
.wa-preview-panel h3 { margin: 0; font-size: 18px; font-weight: 500; overflow-wrap: anywhere; }
.wa-preview-panel p { margin: 0; font-size: 14px; color: var(--wa-muted); line-height: 1.5; }

/* Train */
.wa-train { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 20px; align-items: start; }
.wa-train-nav { position: sticky; top: 16px; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--wa-line); border-radius: 16px; background: #fff; }
.wa-train-progress { display: grid; gap: 8px; padding: 4px 6px 12px; border-bottom: 1px solid var(--wa-line); }
.wa-train-progress-text { font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-train-subnav { display: grid; gap: 2px; }
.wa-sub-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--wa-text); font-size: 14px; font-weight: 500; text-align: start; cursor: pointer; }
.wa-sub-btn:hover { background: var(--wa-soft); }
.wa-sub-btn.active { background: var(--wa-primary-soft); color: var(--wa-primary-ink); }
.wa-sub-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #eceef3; color: var(--wa-muted); font-size: 12px; font-weight: 500; }
.wa-sub-mark .wa-ico { width: 14px; height: 14px; }
.wa-sub-btn.active .wa-sub-mark { background: var(--wa-primary); color: #fff; }
.wa-sub-btn.done .wa-sub-mark { background: var(--wa-success-soft); color: var(--wa-success); }
.wa-sub-label { min-width: 0; }
.wa-sub-tag { margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--wa-muted); }
.wa-train-main { display: grid; gap: 16px; min-width: 0; }
.wa-train-panel { display: grid; gap: 20px; padding: 24px; border: 1px solid var(--wa-line); border-radius: 16px; background: #fff; min-width: 0; }
.wa-train-panel[hidden] { display: none !important; }
#wa-setup-form { display: grid; gap: 16px; min-width: 0; }
.wa-panel-intro { display: grid; gap: 4px; }
.wa-panel-intro h2 { margin: 0; font-size: 20px; line-height: 1.35; font-weight: 500; color: var(--wa-ink); }
.wa-panel-intro p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--wa-muted); max-width: 70ch; }
.wa-train-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border: 1px solid var(--wa-line); border-radius: 16px; background: #fff; }
.wa-train-footer-copy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--wa-muted); max-width: 56ch; }
.wa-setup-actions { display: flex; gap: 8px; margin-inline-start: auto; }
.wa-callout { padding: 12px 14px; border-radius: 12px; background: var(--wa-soft); font-size: 14px; line-height: 1.55; color: var(--wa-text); }
.wa-callout strong { font-weight: 500; color: var(--wa-ink); }
.wa-callout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }

/* Knowledge sources */
.wa-source-method-panel { display: grid; gap: 16px; }
.wa-source-method-panel[hidden] { display: none !important; }
.wa-ingest-mode-row { display: grid; gap: 8px; }
.wa-ingest-mode-label { font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-dropzone { position: relative; display: grid; justify-items: center; gap: 12px; padding: 28px 20px; border: 1.5px dashed #cbbff6; border-radius: 14px; background: #faf8ff; text-align: center; cursor: pointer; }
.wa-dropzone:hover { border-color: var(--wa-primary); }
.wa-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wa-dropzone:focus-within { border-color: var(--wa-primary); }
.wa-dropzone-head { display: grid; justify-items: center; gap: 6px; }
.wa-dropzone-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--wa-primary-ink); border: 1px solid var(--wa-primary-line); }
.wa-dropzone-title { font-size: 15px; font-weight: 500; color: var(--wa-ink); }
.wa-dropzone-copy,
.wa-dropzone-support { font-size: 13px; line-height: 1.5; color: var(--wa-muted); max-width: 52ch; }
.wa-file-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; width: 100%; }
.wa-file-preview-grid:empty { display: none; }
.wa-dropzone .wa-upload-empty-state { display: none; }
.wa-file-preview { position: relative; display: grid; gap: 6px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid var(--wa-line); }
.wa-file-preview-thumb { aspect-ratio: 1 / 1; border-radius: 8px; background: var(--wa-soft); display: grid; place-items: center; font-size: 12px; font-weight: 500; color: var(--wa-muted); overflow: hidden; }
.wa-file-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-file-preview-name { font-size: 12px; color: var(--wa-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-file-preview-remove { position: absolute; top: 4px; inset-inline-end: 4px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(17, 24, 39, 0.72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 1; }
.wa-ingest-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wa-ingest-footer-copy { font-size: 13px; line-height: 1.5; color: var(--wa-muted); max-width: 52ch; }
.wa-url-field { display: grid; gap: 6px; }
.wa-url-field label { font-size: 14px; font-weight: 500; }
.wa-url-helper { font-size: 13px; line-height: 1.5; color: var(--wa-muted); }
.wa-autofill-summary { padding: 10px 14px; border-radius: 10px; background: var(--wa-primary-soft); color: var(--wa-primary-ink); font-size: 14px; }
.wa-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 4px; }
.wa-list-head h3 { margin: 0; font-size: 16px; font-weight: 500; }
.wa-list-head span { font-size: 13px; color: var(--wa-muted); }
.wa-sources-grid { display: grid; }
.wa-source-card { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--wa-line); min-width: 0; }
.wa-source-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.wa-source-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wa-source-thumb { width: 40px; height: 40px; flex: none; border-radius: 8px; background: var(--wa-soft); display: grid; place-items: center; font-size: 11px; font-weight: 500; color: var(--wa-muted); text-transform: uppercase; overflow: hidden; }
.wa-source-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wa-source-title { font-size: 15px; font-weight: 500; color: var(--wa-ink); overflow-wrap: anywhere; min-width: 0; }
.wa-source-meta { font-size: 13px; color: var(--wa-muted); overflow-wrap: anywhere; }
.wa-source-body { font-size: 14px; line-height: 1.55; color: var(--wa-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wa-fact-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wa-library { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.wa-library-list { display: grid; gap: 8px; min-width: 0; }
.wa-facts-list,
.wa-example-list { display: grid; }
.wa-fact-card,
.wa-example-card { display: grid; gap: 6px; padding: 14px 0; border-top: 1px solid var(--wa-line); min-width: 0; }
.wa-fact-question { font-size: 15px; font-weight: 500; color: var(--wa-ink); overflow-wrap: anywhere; }
.wa-fact-answer,
.wa-example-row { font-size: 14px; line-height: 1.55; color: var(--wa-text); overflow-wrap: anywhere; }
.wa-example-row strong { font-weight: 500; color: var(--wa-ink); }
.wa-example-kind { justify-self: start; padding: 2px 8px; border-radius: 999px; background: #f3f4f6; color: #4b5563; font-size: 12px; font-weight: 500; }

/* Templates */
.wa-templates-table-wrap { overflow-x: auto; }
.wa-templates-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.wa-templates-table th { padding: 10px 12px; border-bottom: 1px solid var(--wa-line); text-align: start; font-size: 13px; font-weight: 500; color: var(--wa-muted); white-space: nowrap; }
.wa-templates-table td { padding: 12px; border-bottom: 1px solid var(--wa-line); vertical-align: middle; color: var(--wa-text); }
.wa-templates-table td strong { font-weight: 500; color: var(--wa-ink); overflow-wrap: anywhere; }
.wa-templates-table tr:last-child td { border-bottom: 0; }
.wa-tpl-empty { text-align: center; color: var(--wa-muted); padding: 28px 12px !important; }
.wa-tpl-status { display: inline-flex; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; background: #f3f4f6; color: #4b5563; }
.wa-tpl-status.approved { background: var(--wa-success-soft); color: var(--wa-success); }
.wa-tpl-status.pending { background: var(--wa-warning-soft); color: var(--wa-warning); }
.wa-tpl-status.rejected { background: var(--wa-danger-soft); color: var(--wa-danger); }
.wa-tpl-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-tpl-preview-card { padding: 14px; border-radius: 12px; background: var(--wa-soft); }
.wa-tpl-preview-card h4 { margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.wa-tpl-preview-card ul { margin: 0; padding-inline-start: 18px; font-size: 14px; }
.wa-tpl-preview-body { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--wa-text); overflow-wrap: anywhere; }
.wa-tpl-vars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.wa-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.wa-meta-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--wa-soft); }
.wa-meta-label { font-size: 12px; color: var(--wa-muted); }
.wa-meta-value { font-size: 14px; font-weight: 500; }

/* Settings */
.wa-settings { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wa-col { display: grid; gap: 16px; min-width: 0; }
.wa-settings-form { display: grid; gap: 18px; }
.wa-settings-divider { border: 0; border-top: 1px solid var(--wa-line); margin: 0; }
.wa-audit-excl-add-row { display: flex; gap: 8px; }
.wa-audit-excl-add-row .wa-input { flex: 1; min-width: 0; }
.wa-audit-excl-list { display: grid; margin-top: 12px; }
.wa-audit-excl-list .wa-inline-note { padding: 8px 0; }
.wa-audit-excl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--wa-line); }
.wa-audit-excl-row-main { display: grid; gap: 2px; min-width: 0; }
.wa-audit-excl-name { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.wa-audit-excl-meta { font-size: 13px; color: var(--wa-muted); }
.wa-audit-excl-meta bdi { direction: ltr; unicode-bidi: isolate; }

/* Modals */
.wa-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; }
.wa-modal-overlay[hidden] { display: none !important; }
.wa-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, 0.5); }
.wa-modal-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; display: grid; gap: 16px; align-content: start; padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 20px 50px rgba(17, 24, 39, 0.18); }
.wa-modal-card-wide { width: min(880px, 100%); }
.wa-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wa-modal-head h3 { margin: 0; font-size: 18px; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.wa-modal-body { display: grid; gap: 14px; font-size: 14px; line-height: 1.55; color: var(--wa-text); }
.wa-modal-body p { margin: 0; }
.wa-autofill-modal-group h4 { margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-autofill-modal-group ul { margin: 0; padding-inline-start: 18px; }
.wa-autofill-modal-empty { color: var(--wa-muted); }
.wa-detail-stack { display: grid; gap: 14px; min-width: 0; }
.wa-conv-owner-banner { display: flex; }
.wa-conv-modal-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wa-line); overflow-x: auto; scrollbar-width: none; }
.wa-conv-modal-tabs::-webkit-scrollbar { display: none; }
.wa-conv-modal-tab { min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--wa-muted); font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.wa-conv-modal-tab.active { color: var(--wa-primary-ink); border-bottom-color: var(--wa-primary); }
.wa-conv-modal-panel { display: grid; gap: 14px; min-width: 0; }
.wa-conv-modal-panel[hidden] { display: none !important; }
.wa-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wa-panel-head h3 { margin: 0; font-size: 16px; font-weight: 500; }
.wa-panel-head p { margin: 2px 0 0; font-size: 13px; color: var(--wa-muted); }
.wa-chat-like-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 12px; border-radius: 12px; background: var(--wa-soft); }
.wa-message-card { display: grid; gap: 4px; max-width: 82%; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--wa-line); align-self: flex-start; min-width: 0; }
.wa-message-card[data-direction="outbound"] { align-self: flex-end; background: var(--wa-primary-soft); border-color: var(--wa-primary-line); }
.wa-message-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; color: var(--wa-muted); }
.wa-message-meta span:empty { display: none; }
.wa-message-text { font-size: 14px; line-height: 1.55; color: var(--wa-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.wa-voice-badge { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; font-size: 12px; color: var(--wa-muted); vertical-align: middle; }
.wa-voice-badge .wa-ico { width: 14px; height: 14px; }
.wa-actions-stack,
.wa-audits-stack { display: grid; gap: 8px; }
.wa-action-card,
.wa-audit-card { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: var(--wa-soft); min-width: 0; }

/* Operations audit modal (report body comes from the shared renderer) */
#wa-ops-audit-modal .meta-ai-audit-head-kicker { color: var(--wa-success, #15803d); }
#wa-ops-audit-modal .meta-ai-audit-head-score { border-color: #bbf7d0; background: #f0fdf4; color: #14532d; }
#wa-ops-audit-modal .wa-ops-audit-summary-wrap { margin-top: 8px; }
#wa-ops-audit-modal .wa-ops-summary-collapsed .meta-ai-audit-head-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-height: 3.4em; }
#wa-ops-audit-modal .wa-ops-summary-expanded .meta-ai-audit-head-summary { display: block; max-height: none; overflow: visible; }
#wa-ops-audit-modal .wa-ops-audit-summary-toggle { margin-top: 6px; padding: 0; border: 0; background: transparent; color: #15803d; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
#wa-ops-audit-modal .wa-ops-audit-summary-toggle:hover,
#wa-ops-audit-modal .wa-ops-audit-summary-toggle:focus-visible { color: #166534; }
#wa-ops-audit-modal .meta-ai-audit-score-ring { background: conic-gradient(#16a34a calc(var(--score, 0) * 1%), #dcfce7 0); }

/* Bookings tab and Photos step (whatsapp-bookings.js) */
.wa-bk { display: grid; gap: 16px; min-width: 0; }
.wa-bk-setup { list-style: none; margin: 0; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--wa-line); border-radius: 14px; background: #fff; }
.wa-bk-setup li { flex: 1 1 200px; min-width: 0; }
.wa-bk-setup-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--wa-text); font-size: 14px; font-weight: 500; text-align: start; cursor: pointer; }
.wa-bk-setup-btn:hover { background: var(--wa-soft); }
.wa-bk-setup-btn:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: 1px; }
.wa-bk-setup-mark { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #eceef3; color: var(--wa-muted); font-size: 12px; font-weight: 500; }
.wa-bk-setup-mark .wa-ico { width: 14px; height: 14px; }
.wa-bk-setup li[data-done="1"] .wa-bk-setup-btn { color: var(--wa-muted); }
.wa-bk-setup li[data-done="1"] .wa-bk-setup-mark { background: var(--wa-success-soft); color: var(--wa-success); }
.wa-bk-setup li[data-done="0"]:first-of-type .wa-bk-setup-mark,
.wa-bk-setup li[data-done="1"] + li[data-done="0"] .wa-bk-setup-mark { background: var(--wa-primary); color: #fff; }

.wa-bk-loading { display: grid; gap: 10px; padding: 8px 0; }
.wa-bk-loading span { display: block; height: 56px; border-radius: 12px; background: linear-gradient(90deg, #f1f2f6 0%, #f7f7fa 50%, #f1f2f6 100%); background-size: 200% 100%; animation: wa-bk-shimmer 1.2s ease-in-out infinite; }
.wa-bk-loading.small span { height: 36px; }
@keyframes wa-bk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .wa-bk-loading span { animation: none; } }

.wa-bk-cal { display: grid; gap: 14px; min-width: 0; }
.wa-bk-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.wa-bk-week-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.wa-bk-week-label { margin-inline-start: 6px; font-size: 15px; font-weight: 500; color: var(--wa-ink); white-space: nowrap; }
.wa-admin-shell .wa-bk-icon-btn { width: 40px; padding: 0; justify-content: center; }
[dir="rtl"] .wa-bk-icon-btn .wa-ico { transform: scaleX(-1); }
.wa-bk-filter select { min-height: 40px; width: auto; max-width: 180px; padding-block: 6px; font-size: 14px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wa-bk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.wa-bk-day { display: grid; justify-items: center; gap: 2px; min-height: 76px; padding: 8px 4px; border: 1px solid var(--wa-line); border-radius: 12px; background: #fff; color: var(--wa-text); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; }
.wa-bk-day:hover { border-color: var(--wa-line-strong); background: var(--wa-soft); }
.wa-bk-day:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-bk-day-name { font-size: 13px; color: var(--wa-muted); }
.wa-bk-day-num { font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--wa-ink); font-variant-numeric: tabular-nums; }
.wa-bk-day-count { font-size: 12px; font-weight: 500; color: var(--wa-primary-ink); white-space: nowrap; }
.wa-bk-day.is-closed .wa-bk-day-count { color: var(--wa-muted); font-weight: 400; }
.wa-bk-day.is-today .wa-bk-day-num { color: var(--wa-primary-ink); }
.wa-bk-day.active { border-color: var(--wa-primary); background: var(--wa-primary-soft); box-shadow: inset 0 0 0 1px var(--wa-primary); }
.wa-bk-day.active .wa-bk-day-name { color: var(--wa-primary-ink); }

.wa-bk-list-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.wa-bk-list-head h3 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 500; color: var(--wa-ink); }
.wa-bk-list-head span { font-size: 13px; color: var(--wa-muted); }
.wa-bk-rows { display: grid; }
.wa-bk-row,
.wa-bk-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: 100%; min-height: 64px; padding: 10px 8px; border: 0; border-top: 1px solid var(--wa-line); background: none; color: inherit; text-align: start; font: inherit; cursor: pointer; }
.wa-bk-rows > :first-child { border-top: 0; }
.wa-bk-row:hover,
.wa-bk-item:hover { background: var(--wa-soft); }
.wa-bk-row:focus-visible,
.wa-bk-item:focus-visible,
.wa-bk-row-main:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: -2px; border-radius: 8px; }
.wa-bk-row.is-off { cursor: default; background: var(--wa-soft); }
.wa-bk-row.is-off .wa-bk-who strong { color: var(--wa-muted); }
.wa-bk-row.is-struck .wa-bk-who strong { text-decoration: line-through; color: var(--wa-muted); }
.wa-bk-when { display: grid; gap: 1px; font-variant-numeric: tabular-nums; }
.wa-bk-when strong { font-size: 15px; font-weight: 500; color: var(--wa-ink); white-space: nowrap; }
.wa-bk-when span { font-size: 13px; color: var(--wa-muted); white-space: nowrap; }
.wa-bk-who,
.wa-bk-item-main { display: grid; gap: 2px; min-width: 0; }
.wa-bk-who strong,
.wa-bk-item-main strong { font-size: 15px; font-weight: 500; color: var(--wa-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-bk-who span,
.wa-bk-item-main span { font-size: 13px; line-height: 1.5; color: var(--wa-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-bk-row-end,
.wa-bk-item-end { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; }
.wa-bk-item { grid-template-columns: minmax(0, 1fr) auto; }
.wa-bk-item:has(.wa-bk-avatar) { grid-template-columns: 40px minmax(0, 1fr) auto; }
.wa-bk-item.is-static { cursor: default; }
.wa-bk-item.is-static:hover { background: none; }
.wa-bk-item.is-muted .wa-bk-item-main strong { color: var(--wa-muted); }
.wa-bk-price { font-size: 14px; font-weight: 500; color: var(--wa-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.wa-bk-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-primary-soft); color: var(--wa-primary-ink); font-size: 16px; font-weight: 500; }
.wa-bk-confirmed-mark { color: var(--wa-success); }
.wa-bk-confirmed-mark .wa-ico { width: 16px; height: 16px; }
.wa-bk-status { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; background: #f3f4f6; color: #4b5563; }
.wa-bk-status[data-status="confirmed"] { background: var(--wa-success-soft); color: var(--wa-success); }
.wa-bk-status[data-status="pending"] { background: var(--wa-warning-soft); color: var(--wa-warning); }
.wa-bk-status[data-status="no_show"],
.wa-bk-status[data-status="declined"] { background: var(--wa-danger-soft); color: var(--wa-danger); }
.wa-bk-hint { font-size: 12px; color: var(--wa-muted); }

.wa-bk-pending { border-color: #f5d9a8; background: #fffdf8; }
.wa-bk-pending-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 8px 0; border-top: 1px solid #f3e6cc; }
.wa-bk-pending-row:first-child { border-top: 0; }
.wa-bk-row-main { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 4px 14px; flex: 1 1 280px; min-width: 0; min-height: 52px; padding: 4px; border: 0; background: none; color: inherit; text-align: start; font: inherit; cursor: pointer; border-radius: 8px; }
.wa-bk-row-main:hover { background: #fff6e6; }
.wa-bk-pending-actions { display: flex; gap: 8px; }

.wa-bk-waitlist { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--wa-soft); }
.wa-bk-waitlist h4 { margin: 0 0 6px; font-size: 14px; font-weight: 500; }
.wa-bk-waitlist ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; color: var(--wa-text); }
.wa-bk-waitlist strong { font-weight: 500; }
.wa-bk-waitlist li span { color: var(--wa-muted); }

.wa-bk-modal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; }
.wa-bk-modal-error { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--wa-danger-soft); color: var(--wa-danger); font-size: 14px; line-height: 1.5; }
.wa-bk-modal-error[hidden] { display: none; }
.wa-bk-note { min-height: 72px; }
.wa-bk-when-text { min-height: 96px; }
.wa-bk-history { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--wa-text); }
.wa-bk-history .wa-ico { color: var(--wa-muted); width: 16px; height: 16px; }
.wa-admin-shell .button.secondary.wa-bk-danger,
.wa-bk-danger { color: var(--wa-danger); border-color: #f1c4c4; }
.wa-bk-danger:hover { background: var(--wa-danger-soft); }
.wa-bk-danger-link { color: var(--wa-danger); }
.wa-bk-danger-link:hover { color: #991b1b; }
.wa-bk-move { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--wa-line); }
.wa-bk-move h4 { margin: 0; font-size: 16px; font-weight: 500; }
.wa-bk-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.wa-bk-slots[hidden] { display: none; }
.wa-bk-slot { min-height: 40px; min-width: 88px; padding: 0 12px; border: 1px solid var(--wa-line-strong); border-radius: 10px; background: #fff; color: var(--wa-ink); font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; }
.wa-bk-slot:hover { border-color: var(--wa-primary); }
.wa-bk-slot[aria-pressed="true"] { border-color: var(--wa-primary); background: var(--wa-primary); color: #fff; }
.wa-bk-slot:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-bk-three { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.wa-bk-result { display: grid; justify-items: center; gap: 8px; padding: 12px 4px 4px; text-align: center; }
.wa-bk-result-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-success-soft); color: var(--wa-success); }
.wa-bk-result[data-tone="warn"] .wa-bk-result-icon { background: var(--wa-warning-soft); color: var(--wa-warning); }
.wa-bk-result h4 { margin: 4px 0 0; font-size: 17px; font-weight: 500; color: var(--wa-ink); }
.wa-bk-result p { margin: 0; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--wa-text); }
.wa-bk-result .wa-actions { margin-top: 8px; justify-content: center; }
.wa-bk-price-input { display: flex; align-items: center; gap: 8px; margin-top: 8px; max-width: 220px; }
.wa-bk-price-input[hidden] { display: none; }
.wa-bk-price-input span { font-size: 14px; color: var(--wa-muted); }
.wa-bk-more { border-top: 1px solid var(--wa-line); padding-top: 4px; }
.wa-bk-more > summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--wa-primary-ink); cursor: pointer; }
.wa-bk-more > summary::-webkit-details-marker { display: none; }
.wa-bk-more > summary .wa-ico { width: 16px; height: 16px; transition: transform 150ms ease; }
.wa-bk-more[open] > summary .wa-ico { transform: rotate(180deg); }
.wa-bk-more > .wa-field-grid { padding-block: 8px 4px; }
.wa-bk-fieldset { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wa-bk-fieldset legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-bk-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.wa-bk-checks[hidden] { display: none; }
.wa-bk-checks .wa-check-row { min-height: 40px; padding-block: 8px; }
.wa-bk-radios { display: grid; gap: 2px; }
.wa-bk-radios strong { font-weight: 500; color: var(--wa-ink); }

.wa-bk-week { display: grid; }
.wa-bk-weekday { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 8px 16px; min-height: 60px; padding: 8px 0; border-top: 1px solid var(--wa-line); }
.wa-bk-weekday:first-child { border-top: 0; }
.wa-bk-weekday-name { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--wa-ink); cursor: pointer; }
.wa-bk-ranges { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.wa-bk-range { display: inline-flex; align-items: center; gap: 6px; }
.wa-bk-range .wa-input { width: 116px; min-height: 40px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.wa-bk-range > span { color: var(--wa-muted); }
.wa-bk-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--wa-muted); cursor: pointer; }
.wa-bk-x:hover { background: var(--wa-soft); color: var(--wa-danger); }
.wa-bk-x .wa-ico { width: 16px; height: 16px; }
.wa-bk-closed { font-size: 14px; color: var(--wa-muted); }
.wa-bk-hours-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.wa-card-foot .button { margin-inline-start: auto; }
.wa-bk-sticky-foot { position: sticky; bottom: 0; z-index: 2; margin-inline: -20px; margin-bottom: -20px; padding: 12px 20px; border-radius: 0 0 16px 16px; background: #fff; box-shadow: 0 -1px 0 var(--wa-line); }

.wa-bk-templates { position: sticky; top: 16px; display: grid; gap: 12px; }
.wa-bk-templates .wa-card-head { margin-bottom: 0; }
.wa-bk-tpl-progress { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-bk-tpl-list { margin: 0; padding: 0; list-style: none; display: grid; }
.wa-bk-tpl-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--wa-line); font-size: 14px; color: var(--wa-text); }
.wa-bk-tpl-list li:first-child { border-top: 0; }
.wa-bk-templates .wa-card-foot { margin-top: 0; }
.wa-bk-templates .wa-card-foot .button { margin-inline-start: 0; }

.wa-bk-photo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.wa-bk-upload { position: relative; cursor: pointer; }
.wa-bk-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wa-bk-upload:focus-within { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-bk-photos { display: grid; }
.wa-bk-photo { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--wa-line); }
.wa-bk-photos > :first-child { border-top: 0; padding-top: 4px; }
.wa-bk-photo-thumb { display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--wa-soft); border: 1px solid var(--wa-line); }
.wa-bk-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-bk-photo[data-status="off"] .wa-bk-photo-thumb img { opacity: 0.5; filter: grayscale(1); }
.wa-bk-photo-fields { display: grid; gap: 10px; min-width: 0; }
.wa-bk-photo-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.wa-bk-photo-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.wa-bk-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; max-height: 56vh; overflow: auto; padding: 2px; }
.wa-bk-lib-item { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 2px solid transparent; background: var(--wa-soft); cursor: pointer; }
.wa-bk-lib-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wa-bk-lib-item input { position: absolute; top: 8px; inset-inline-start: 8px; width: 20px; height: 20px; accent-color: var(--wa-primary); z-index: 1; }
.wa-bk-lib-item:has(input:checked) { border-color: var(--wa-primary); }
.wa-bk-lib-item:has(input:focus-visible) { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-bk-lib-tag { position: absolute; bottom: 6px; inset-inline-start: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(17, 24, 39, 0.72); color: #fff; font-size: 12px; }

/* Bookings: the owner's own message wording */
.wa-bk-wording-box { display: grid; gap: 14px; min-width: 0; }
.wa-bk-wording { gap: 8px; }
.wa-bk-w-text { min-height: 96px; }
.wa-bk-w-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.wa-bk-w-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.wa-bk-w-insert { font-size: 13px; color: var(--wa-muted); }
.wa-bk-w-chip { min-height: 32px; padding: 0 10px; border: 1px solid var(--wa-primary-line); border-radius: 999px; background: var(--wa-primary-soft); color: var(--wa-primary-ink); font-size: 13px; font-weight: 500; cursor: pointer; }
.wa-bk-w-chip:hover { border-color: var(--wa-primary); }
.wa-bk-w-chip:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: 2px; }
.wa-bk-w-count { font-size: 12px; color: var(--wa-muted); font-variant-numeric: tabular-nums; }
.wa-bk-w-preview { display: grid; gap: 6px; }
.wa-bk-w-preview-label { font-size: 13px; color: var(--wa-muted); }
.wa-bk-w-chat { display: grid; justify-items: end; gap: 4px; padding: 14px; border-radius: 12px; background: #efeae2; }
.wa-bk-w-bubble { max-width: min(420px, 92%); padding: 8px 12px; border-radius: 10px; border-start-end-radius: 2px; background: #d9fdd3; color: #111b21; font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.12); }
.wa-bk-w-bubble:empty { display: none; }
.wa-bk-w-buttons { display: grid; grid-auto-flow: column; gap: 4px; max-width: min(420px, 92%); width: 100%; }
.wa-bk-w-buttons span { display: grid; place-items: center; min-height: 36px; padding: 0 8px; border-radius: 8px; background: #fff; color: #027eb5; font-size: 13px; font-weight: 500; box-shadow: 0 1px 1px rgba(17, 27, 33, 0.1); }
@media (max-width: 1279px) {
  .wa-bk-hours-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .wa-bk-templates { position: static; }
}
@media (max-width: 720px) {
  .wa-bk-toolbar { align-items: stretch; }
  .wa-bk-toolbar > .wa-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .wa-bk-toolbar > .wa-actions .wa-bk-filter { grid-column: 1 / -1; }
  .wa-bk-filter select { max-width: none; width: 100%; min-height: 44px; }
  .wa-bk-week-nav { width: 100%; }
  .wa-bk-week-label { margin-inline-start: auto; font-size: 14px; }
  .wa-bk-days { display: flex; overflow-x: auto; scrollbar-width: none; gap: 6px; scroll-snap-type: x proximity; }
  .wa-bk-days::-webkit-scrollbar { display: none; }
  .wa-bk-day { flex: 0 0 64px; min-height: 72px; scroll-snap-align: start; }
  .wa-bk-row,
  .wa-bk-item { grid-template-columns: 74px minmax(0, 1fr); padding-inline: 4px; }
  .wa-bk-item { grid-template-columns: minmax(0, 1fr); }
  .wa-bk-item:has(.wa-bk-avatar) { grid-template-columns: 40px minmax(0, 1fr); }
  .wa-bk-row-end { grid-column: 2; justify-content: flex-start; }
  .wa-bk-item-end { grid-column: 1 / -1; justify-content: flex-start; }
  .wa-bk-item:has(.wa-bk-avatar) .wa-bk-item-end { grid-column: 2; }
  .wa-bk-row-main { grid-template-columns: 84px minmax(0, 1fr); }
  .wa-bk-pending-actions { width: 100%; }
  .wa-bk-pending-actions .button { flex: 1; }
  .wa-bk-three { grid-template-columns: 1fr 1fr; }
  .wa-bk-three > :first-child { grid-column: 1 / -1; }
  .wa-bk-checks { grid-template-columns: 1fr; }
  .wa-bk-weekday { grid-template-columns: 1fr; gap: 6px; }
  .wa-bk-range .wa-input { width: 112px; }
  .wa-bk-photo { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .wa-bk-modal-foot { flex-direction: column-reverse; align-items: stretch; }
  .wa-bk-modal-foot > .wa-actions { display: flex; flex-wrap: wrap; }
  .wa-bk-modal-foot > .wa-actions .button { flex: 1 1 140px; white-space: nowrap; }
  .wa-bk-sticky-foot { margin-inline: -16px; margin-bottom: -16px; padding: 12px 16px; }
  .wa-bk-sticky-foot .button { width: 100%; }
  .wa-bk-library { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The app container drops its side padding at 640px; keep a 14px gutter on phones. */
@media (max-width: 640px) {
  .wa-bot-page { padding-inline: 14px; }
}

/* Tablet and below */
@media (max-width: 1100px) {
  .wa-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-train { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .wa-journey-steps { grid-template-columns: 1fr; }
  .wa-home-grid,
  .wa-conv-layout,
  .wa-settings,
  .wa-library { grid-template-columns: 1fr; }
  .wa-preview-panel { position: static; }
  .wa-faq { column-count: 1; }
  .wa-train { grid-template-columns: 1fr; gap: 12px; }
  .wa-train-nav { position: static; padding: 12px; gap: 8px; }
  .wa-train-progress { padding: 0 2px 10px; }
  .wa-train-subnav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .wa-train-subnav::-webkit-scrollbar { display: none; }
  .wa-sub-btn { flex: none; width: auto; padding: 6px 14px 6px 8px; border: 1px solid var(--wa-line); border-radius: 999px; white-space: nowrap; }
  .wa-sub-btn.active { border-color: var(--wa-primary-line); }
  .wa-sub-tag { display: none; }
}
@media (max-width: 720px) {
  .wa-bot-page { gap: 16px; }
  .wa-admin-shell { gap: 16px; }
  .wa-page-title { font-size: 20px; }
  .wa-nav-btn { padding: 0 10px; font-size: 14px; }
  .wa-card,
  .wa-jstep { padding: 16px; }
  .wa-train-panel { padding: 16px; gap: 16px; }
  .wa-field-grid.two-col { grid-template-columns: 1fr; }
  .wa-input,
  .wa-textarea { font-size: 16px; }
  .wa-stats { gap: 10px; }
  .wa-stat { padding: 14px; }
  .wa-stat-value { font-size: 22px; }
  .wa-ops-card { grid-template-columns: auto minmax(0, 1fr); }
  .wa-ops-side { grid-column: 1 / -1; justify-items: stretch; }
  .wa-ops-side .button { width: 100%; }
  .wa-help > summary { padding: 10px 16px; }
  .wa-help-body { padding: 0 16px 12px; }
  .wa-train-footer { padding: 12px; }
  .wa-setup-actions { width: 100%; margin-inline-start: 0; }
  .wa-setup-actions .button { flex: 1; min-height: 44px; }
  .wa-jstep-actions .button,
  .wa-ingest-footer .button { width: 100%; min-height: 44px; }
  .wa-dual-toggle { display: flex; width: 100%; }
  .wa-dual-toggle-btn { flex: 1 1 auto; min-height: 44px; }
  .wa-audit-excl-add-row { flex-wrap: wrap; }
  .wa-audit-excl-add-row .button { width: 100%; min-height: 44px; }
  .wa-admin-shell .button,
  .wa-admin-shell .button.small,
  .wa-link-btn,
  .wa-help-trouble a { min-height: 44px; }
  .wa-modal-overlay { padding: 8px; align-items: end; }
  .wa-modal-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 16px; }
  .wa-message-card { max-width: 92%; }
  .wa-templates-table thead { display: none; }
  .wa-templates-table,
  .wa-templates-table tbody,
  .wa-templates-table tr,
  .wa-templates-table td { display: block; width: 100%; }
  .wa-templates-table tr { padding: 12px 0; border-bottom: 1px solid var(--wa-line); }
  .wa-templates-table tr:last-child { border-bottom: 0; }
  .wa-templates-table td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; text-align: end; }
  .wa-templates-table td[data-label]::before { content: attr(data-label); color: var(--wa-muted); font-size: 13px; text-align: start; }
  .wa-templates-table td:first-child { text-align: start; }
  .wa-tpl-actions { justify-content: flex-start; }
  .wa-templates-table td.wa-tpl-actions-cell { display: block; padding-top: 8px; }
}

/* Bookings page (ui/bookings.html) */
.wa-bk-page-sub { margin: 0; max-width: 72ch; font-size: 15px; line-height: 1.6; color: var(--wa-muted); }
.wa-bk-page-sub a { color: var(--wa-primary-ink); font-weight: 500; text-underline-offset: 3px; white-space: nowrap; }

/* Bookings without the WhatsApp Bot: what it does, then Request access */
.wa-bk-locked { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 32px; padding: 28px; }
.wa-bk-locked-copy { display: grid; justify-items: start; min-width: 0; }
.wa-bk-locked-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--wa-primary-soft); color: var(--wa-primary-ink); }
.wa-bk-locked-mark .wa-ico { width: 20px; height: 20px; }
.wa-bk-locked h3 { margin: 14px 0 6px; font-size: 20px; line-height: 1.35; font-weight: 500; color: var(--wa-ink); }
.wa-bk-locked-copy > p { margin: 0; max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--wa-muted); }
.wa-bk-locked-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.wa-bk-locked-points li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--wa-text); }
.wa-bk-locked-points .wa-ico { width: 18px; height: 18px; flex: none; color: var(--wa-success); }
.wa-bk-locked-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }

.wa-bk-demo { display: grid; padding: 20px; border-radius: 16px; background: var(--wa-soft); min-width: 0; }
.wa-bk-demo-chat,
.wa-bk-demo-cal { background: #fff; border: 1px solid var(--wa-line); min-width: 0; }
.wa-bk-demo-chat { width: 88%; justify-self: start; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 20px rgba(17, 24, 39, 0.06); }
.wa-bk-demo-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--wa-line); font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-bk-demo-bar bdi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-bk-demo-avatar { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--wa-primary); color: #fff; font-size: 13px; font-weight: 500; }
.wa-bk-demo-msgs { display: grid; align-content: start; gap: 8px; min-height: 212px; padding: 12px 12px 30px; background: #fbfaf8; }
.wa-bk-demo-msg { margin: 0; max-width: 86%; padding: 8px 10px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--wa-ink); }
.wa-bk-demo-msg.is-in { justify-self: start; background: #fff; border: 1px solid var(--wa-line); }
.wa-bk-demo-msg.is-out { justify-self: end; background: var(--wa-primary-soft); }
p.wa-bk-demo-msg.is-out { display: flex; align-items: flex-start; gap: 6px; }
.wa-bk-demo-msg .wa-ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--wa-success); }
.wa-bk-demo-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wa-bk-demo-chips span { padding: 3px 9px; border: 1px solid var(--wa-primary-line); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 500; color: var(--wa-primary-ink); white-space: nowrap; transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; }
.wa-bk-demo:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .wa-bk-demo-chips .is-pick { background: var(--wa-primary); border-color: var(--wa-primary); color: #fff; }
.wa-bk-demo-cal { position: relative; z-index: 1; width: 82%; justify-self: end; margin-top: -22px; display: grid; gap: 8px; padding: 12px; border-radius: 14px; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.1); }
.wa-bk-demo-day { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--wa-muted); }
.wa-bk-demo-day .wa-ico { width: 16px; height: 16px; }
.wa-bk-demo-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 10px; background: var(--wa-soft); font-size: 13px; }
.wa-bk-demo-row strong { font-weight: 500; color: var(--wa-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-bk-demo-row > span:not(.wa-bk-status) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wa-text); }
.wa-bk-demo-row.is-new { background: var(--wa-primary-soft); box-shadow: inset 0 0 0 1px var(--wa-primary-line); }
.wa-bk-demo-remind { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--wa-success); }
.wa-bk-demo-remind .wa-ico { width: 14px; height: 14px; }
.wa-bk-demo [data-at] { opacity: 0; transform: translateY(6px); transition: opacity 360ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1); }
.wa-bk-demo .wa-bk-demo-row[data-at] { transform: translateY(-6px) scale(0.98); }
.wa-bk-demo [data-at].is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .wa-bk-demo [data-at],
  .wa-bk-demo-chips span { transition: none; }
}
@media (max-width: 860px) {
  .wa-bk-locked { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; }
}
@media (max-width: 720px) {
  .wa-bk-demo { padding: 14px; }
  .wa-bk-demo-chat { width: 92%; }
  .wa-bk-demo-cal { width: 88%; }
  .wa-bk-locked-actions .button { flex: 1 1 auto; }
}

/* New booking: past customers to pick from */
.wa-bk-cust-hint { margin: -4px 0 0; }
.wa-bk-cust-suggest { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--wa-line); border-radius: 12px; background: #fff; box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06); }
.wa-bk-cust-suggest[hidden] { display: none; }
.wa-bk-cust-label { padding: 2px 8px; font-size: 12px; font-weight: 500; color: var(--wa-muted); }
.wa-bk-cust-list { display: grid; gap: 2px; }
.wa-bk-cust-option { display: grid; gap: 2px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--wa-text); font: inherit; text-align: start; cursor: pointer; }
.wa-bk-cust-option:hover { background: var(--wa-soft); }
.wa-bk-cust-option:focus-visible { outline: 2px solid var(--wa-primary); outline-offset: -2px; }
.wa-bk-cust-option strong { font-size: 14px; font-weight: 500; color: var(--wa-ink); }
.wa-bk-cust-option span { font-size: 13px; color: var(--wa-muted); }

/* Customers tab and the customer file */
.wa-bk-cust-search { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wa-bk-cust-search .wa-input { flex: 1 1 auto; min-width: 0; max-width: 420px; }
.wa-bk-cust-count { font-size: 13px; color: var(--wa-muted); white-space: nowrap; }
.wa-bk-cust-row .wa-bk-item-main strong { display: inline-flex; align-items: center; gap: 6px; }
.wa-bk-cust-note-mark { display: inline-grid; place-items: center; color: var(--wa-primary-ink); }
.wa-bk-cust-note-mark .wa-ico { width: 14px; height: 14px; }
.wa-bk-cust-next { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--wa-primary-soft); color: var(--wa-primary-ink); font-size: 13px; font-weight: 500; white-space: nowrap; }
.wa-bk-cust-next .wa-ico { width: 14px; height: 14px; }
.wa-bk-cust-more { display: flex; justify-content: center; margin-top: 12px; }
.wa-bk-file-link { margin-inline-start: 6px; font-size: 13px; }
.wa-bk-file-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--wa-warning-soft); }
.wa-bk-file-note span { display: block; font-size: 12px; font-weight: 500; color: var(--wa-warning); }
.wa-bk-file-note p { margin: 2px 0 0; font-size: 14px; line-height: 1.55; color: var(--wa-ink); white-space: pre-line; }
.wa-bk-file-phone { margin: -4px 0 0; font-size: 14px; color: var(--wa-muted); }
.wa-bk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.wa-bk-stat { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--wa-line); border-radius: 12px; background: #fff; }
.wa-bk-stat strong { font-size: 20px; line-height: 1.2; font-weight: 500; color: var(--wa-ink); font-variant-numeric: tabular-nums; }
.wa-bk-stat span { font-size: 13px; color: var(--wa-muted); }
.wa-bk-hist { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--wa-line); }
.wa-bk-hist h4 { margin: 0; font-size: 15px; font-weight: 500; color: var(--wa-ink); }
.wa-bk-hist-label { margin: 6px 0 0; font-size: 12px; font-weight: 500; color: var(--wa-muted); }
.wa-bk-hist-list { list-style: none; margin: 0; padding: 0; display: grid; }
.wa-bk-hist-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; min-height: 52px; padding: 6px 4px; border-bottom: 1px solid var(--wa-line); }
.wa-bk-hist-row:last-child { border-bottom: 0; }
@media (max-width: 720px) {
  .wa-bk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wa-bk-hist-row { grid-template-columns: 84px minmax(0, 1fr); }
  .wa-bk-hist-row .wa-bk-row-end { grid-column: 2; justify-content: flex-start; }
  .wa-bk-cust-search { flex-wrap: wrap; }
  .wa-bk-cust-search .wa-input { max-width: none; }
}

/* Meta refusing the paid template messages */
.wa-bk-meta-block { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px 14px; padding: 14px 16px; border: 1px solid #f6dfb0; border-radius: 14px; background: var(--wa-warning-soft); }
.wa-bk-meta-block-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #fff; color: var(--wa-warning); }
.wa-bk-meta-block-icon svg { width: 20px; height: 20px; }
.wa-bk-meta-block-text { min-width: 0; }
.wa-bk-meta-block-text h2 { margin: 0 0 2px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--wa-ink); }
.wa-bk-meta-block-text p { margin: 0; font-size: 14px; line-height: 1.55; color: #5b3a0c; }
.wa-bk-meta-block-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; white-space: nowrap; }
.wa-bk-meta-block-link svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .wa-bk-meta-block { grid-template-columns: auto 1fr; }
  .wa-bk-meta-block-link { grid-column: 1 / -1; justify-content: center; }
}