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

[hidden] {
  display: none !important;
}

:root {
  --bg: #FAF8F5;
  --card: #ffffff;
  --border: #EBE6DE;
  --text: #2D2645;
  --text-secondary: #6B6478;
  --text-muted: #8B82A0;
  --accent: #9D8ED8;
  --accent-hover: #8B7BC6;
  --danger: #dc2626;
  --success: #16a34a;
  --warning: #d97706;
  --radius: 10px;
}

html.dark {
  color-scheme: dark;
  --bg: #111111;
  --card: #1A1A1A;
  --border: #2A2A2A;
  --text: #E8E8E8;
  --text-secondary: #B0B0B0;
  --text-muted: #808080;
  --accent: #9D8ED8;
  --accent-hover: #B0A3E0;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
}

/* Login */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 40px 32px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  text-align: center;
}

.login-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--accent);
}

.login-card h1 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.login-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.login-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login-card input {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text);
  background: var(--card);
  outline: none;
  transition: border-color 0.2s;
}

.login-card input:focus {
  border-color: var(--accent);
}

.login-card button[type="submit"] {
  padding: 10px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

.login-card button[type="submit"]:hover {
  background: var(--accent-hover);
}

.login-card button[type="submit"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-text {
  color: var(--danger);
  font-size: 13px;
  text-align: left;
}

/* Top bar */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.top-bar h1 {
  font-size: 18px;
  font-weight: 700;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-toggle {
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.btn-logout {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-logout:hover {
  background: var(--bg);
  color: var(--text);
}

/* Tab bar */
.tab-bar {
  display: flex;
  justify-content: center;
  gap: 0;
  padding: 0 24px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
}

.tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Content */
.content {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.stat-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
}

/* Section headers */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-header h2 {
  font-size: 16px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* Novie status multi-select checkboxes (replaces the old single-select dropdown) */
.novie-status-filters {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.novie-status-filters label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.novie-status-filters input[type="checkbox"] {
  cursor: pointer;
  margin: 0;
}

/* Tables */
.table-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th {
  text-align: left;
  padding: 12px 16px;
  background: var(--bg);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

tr:last-child td {
  border-bottom: none;
}

tr:hover td {
  background: var(--bg);
}

/* Buttons */
.btn-secondary {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

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

/* Purple "Have Novie join" button: same size/shape as .btn-secondary. */
.btn-novie {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-novie:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

/* Inline call-button states (replace the old popups). */
.btn-secondary.is-connecting {
  background: #fef3c7; border-color: #fcd34d; color: #92400e; cursor: default;
}
/* Stays green for the whole call and carries a running timer. tabular-nums keeps
   the button from twitching wider as the digits change. The disabled overrides
   are for the live-call button, which is green but not clickable. */
.btn-secondary.is-connected {
  background: #dcfce7; border-color: #86efac; color: #166534; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.btn-secondary.is-connected:hover { background: #dcfce7; }
.btn-secondary.is-connected[disabled] {
  opacity: 1; cursor: default; background: #dcfce7; color: #166534;
}
.btn-secondary.is-failed {
  background: #fee2e2; border-color: #fca5a5; color: #991b1b;
}

.btn-danger {
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  background: var(--danger);
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-danger:hover {
  background: #b91c1c;
}

.btn-approve {
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: #dcfce7;
  color: var(--success);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-approve:hover {
  background: #bbf7d0;
}

.btn-deny {
  padding: 5px 12px;
  border-radius: 6px;
  border: none;
  background: #fee2e2;
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-deny:hover {
  background: #fecaca;
}

/* Select */
select {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text);
  background: var(--card);
  cursor: pointer;
}

/* Identity review cards */
.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.review-field-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}

.review-field-value {
  font-size: 14px;
  font-weight: 500;
}

.review-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.review-buttons {
  display: flex;
  gap: 8px;
}

/* Status badges */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
}

.badge-running { background: #dbeafe; color: #1d4ed8; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-failed { background: #fee2e2; color: #991b1b; }
.badge-cancelled { background: #f3f4f6; color: #6b7280; }
.badge-sleeping { background: #fef3c7; color: #92400e; }
.badge-pending { background: #fef3c7; color: #92400e; }
.badge-approved { background: #dcfce7; color: #166534; }
.badge-denied { background: #fee2e2; color: #991b1b; }
.badge-no_site { background: #fee2e2; color: #991b1b; }
.badge-not_a_fit { background: #f3f4f6; color: #6b7280; }

html.dark .badge-running { background: #1e3a5f; color: #93c5fd; }
html.dark .badge-completed { background: #14532d; color: #86efac; }
html.dark .badge-failed { background: #450a0a; color: #fca5a5; }
html.dark .badge-cancelled { background: #2a2a2a; color: #9ca3af; }
html.dark .badge-sleeping { background: #451a03; color: #fcd34d; }
html.dark .badge-pending { background: #451a03; color: #fcd34d; }
html.dark .badge-approved { background: #14532d; color: #86efac; }
html.dark .badge-denied { background: #450a0a; color: #fca5a5; }
html.dark .badge-no_site { background: #450a0a; color: #fca5a5; }
html.dark .badge-not_a_fit { background: #2a2a2a; color: #9ca3af; }
html.dark .btn-approve { background: #14532d; color: #86efac; }
html.dark .btn-approve:hover { background: #166534; }
html.dark .btn-deny { background: #450a0a; color: #fca5a5; }
html.dark .btn-deny:hover { background: #991b1b; }
html.dark .btn-danger { background: #b91c1c; }
html.dark .btn-danger:hover { background: #991b1b; }
html.dark .modal-backdrop { background: rgba(0, 0, 0, 0.6); }

/* Empty state */
.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  font-size: 14px;
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.modal-card {
  position: relative;
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.modal-card h3 {
  font-size: 16px;
  margin-bottom: 12px;
}

.modal-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  resize: none;
  margin-bottom: 16px;
  font-family: inherit;
  outline: none;
}

.modal-card textarea:focus {
  border-color: var(--accent);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Loading spinner */
.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Chat Inbox */
.chat-inbox-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: calc(100vh - 220px);
  min-height: 400px;
  overflow: hidden;
}

.chat-session-list {
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

.chat-session-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.chat-session-item:hover {
  background: var(--bg);
}

.chat-session-item.active {
  background: var(--bg);
  border-left: 3px solid var(--accent);
}

.chat-session-item .chat-session-preview {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4px;
}

.chat-session-item .chat-session-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.chat-session-item .chat-session-source {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

/* Only ever the shared-front-desk warning. The number and the city both moved
   to the conversation header, so most rows do not draw this line at all. */
.chat-session-item .chat-session-sub {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-session-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
}

.chat-session-status.active { background: var(--success); }
.chat-session-status.ended { background: var(--text-muted); }

.chat-conversation {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-conv-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-muted);
  font-size: 14px;
}

.chat-conv-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg);
}

.chat-conv-header strong {
  color: var(--text);
  font-size: 14px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-msg {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-msg.visitor {
  align-self: flex-start;
  background: var(--bg);
  color: var(--text);
  border-bottom-left-radius: 4px;
}

.chat-msg.ai {
  align-self: flex-end;
  background: var(--accent);
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-msg.system {
  align-self: center;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-style: italic;
  padding: 4px 0;
}

.chat-msg.practitioner {
  align-self: flex-end;
  background: #9D8ED8;
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-msg-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

.chat-msg.ai .chat-msg-time,
.chat-msg.practitioner .chat-msg-time {
  color: rgba(255, 255, 255, 0.7);
}

/* Sales texts (reuses the chat inbox two-pane layout) */
.cs-unread {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 6px;
}

.cs-optout {
  color: var(--danger);
  font-weight: 500;
}

/* Two groups: who this is on the left, the one action on the right. */
.conv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.conv-id {
  flex: 1 1 auto;
  min-width: 0;
}

.conv-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.conv-title strong {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One quiet line under the name holding everything you might glance at before
   the phone rings: the number, the city, the demo page. All the same weight and
   the same muted colour on purpose, because none of them is the thing you came
   here to do. */
.conv-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.conv-dot {
  color: var(--text-muted);
  opacity: 0.5;
}

.conv-phone {
  font-variant-numeric: tabular-nums;
}

/* What time it is where the prospect is. Muted like the rest of the line until
   the hour is one nobody wants to be called at, and then it is the one warm
   thing in the header, so it registers before it is read. */
.conv-time {
  font-variant-numeric: tabular-nums;
}

.conv-time-odd {
  color: var(--warning);
  font-weight: 600;
}

.conv-demo {
  color: var(--accent);
  text-decoration: none;
}

.conv-demo:hover {
  text-decoration: underline;
}

/* Dials the thread through the operator's own phone, and it is the only filled
   control in this header because dialling is the whole reason the header is
   read. It keeps .btn-secondary so it still picks up the shared
   connecting/connected/failed states, which are two-class rules and so override
   this fill on their own. */
.conv-call {
  padding: 8px 20px;
  min-height: 38px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  flex: none;
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

.conv-call:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: white;
}

/* Renaming is housekeeping, so it is a text link tucked beside the name rather
   than a bordered button competing with Call. Still labelled rather than a bare
   pencil, so it reads without a tooltip. */
.conv-rename {
  border: none;
  background: none;
  padding: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.conv-rename:hover,
.conv-rename:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.conv-rename-form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}

.conv-rename-input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}

.conv-rename-input:focus {
  outline: none;
  border-color: var(--accent);
}

.conv-rename-btn {
  min-height: 36px;
  flex: none;
}

.conv-rename-hint {
  color: var(--text-muted);
  font-size: 12px;
  flex: 1 1 100%;
}

.conv-blocked {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  color: var(--danger);
  font-size: 13px;
}

.chat-conv-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
}

.msg {
  margin: 8px 0;
  max-width: 78%;
}

.msg-inbound { margin-right: auto; }
.msg-outbound { margin-left: auto; text-align: right; }

.msg-body {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  word-wrap: break-word;
}

.msg-outbound .msg-body {
  background: var(--accent);
  color: #fff;
}

.msg-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* The composer stacks: a row of one-click messages, then the textarea and Send.
   Only the Texts tab uses this class. */
.chat-composer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* "Send demo link" is the whole reason this row exists, so it carries the
   accent. Both keep a 32px tap target; this console gets used one-handed. */
.composer-action,
.composer-action-quiet {
  border-radius: 6px;
  padding: 4px 12px;
  min-height: 32px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: all 0.2s;
}

.composer-action {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}

.composer-action:hover {
  filter: brightness(1.08);
}

/* Quieter on purpose. The opt-in prompt is the fallback for a prospect who
   texted without ever opening the demo page, so it is rarely the right click. */
.composer-action-quiet {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-secondary);
}

.composer-action-quiet:hover {
  background: var(--bg);
  color: var(--text);
  border-color: var(--accent);
}

.chat-composer textarea {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  resize: none;
}

.badge-active { background: #dcfce7; color: #166534; }
.badge-ended { background: #f3f4f6; color: #6b7280; }
.badge-support { background: #fef3c7; color: #92400e; }
.badge-inquiry { background: #dbeafe; color: #1d4ed8; }
.badge-free { background: #f3f4f6; color: #6b7280; }
.badge-preferred { background: #ede9fe; color: #5b21b6; }
.badge-platform { background: #fce7f3; color: #9d174d; }

.notes-cell {
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.6;
}

html.dark .badge-active { background: #14532d; color: #86efac; }
html.dark .badge-ended { background: #2a2a2a; color: #9ca3af; }
html.dark .badge-support { background: #451a03; color: #fcd34d; }
html.dark .badge-inquiry { background: #1e3a5f; color: #93c5fd; }
html.dark .badge-free { background: #2a2a2a; color: #9ca3af; }
html.dark .badge-preferred { background: #2e1065; color: #c4b5fd; }
html.dark .badge-platform { background: #831843; color: #f9a8d4; }

/* Health grid */
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}

.health-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.health-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}

.health-card.healthy .health-dot { background: #84cc16; box-shadow: 0 0 6px 2px #84cc16, 0 0 12px 4px rgba(132, 204, 22, 0.35); }
.health-card.degraded .health-dot { background: var(--warning); box-shadow: 0 0 6px 2px var(--warning), 0 0 12px 4px rgba(217, 119, 6, 0.3); }
.health-card.down .health-dot { background: var(--danger); box-shadow: 0 0 6px 2px var(--danger), 0 0 12px 4px rgba(220, 38, 38, 0.3); }
.health-card.loading .health-dot { background: var(--text-muted); animation: pulse 1.5s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.health-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.health-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: auto;
}

/* GSC chart */
.gsc-chart-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 32px;
}

.gsc-chart-wrap canvas {
  min-height: 360px;
}

/* Interval buttons */
.interval-bar {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.interval-btn {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--card);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
}

.interval-btn:last-child {
  border-right: none;
}

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

.interval-btn.active {
  background: var(--accent);
  color: white;
}

.section-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Stat delta (trend indicator) */
.stat-delta {
  font-size: 12px;
  margin-top: 4px;
}

.stat-delta.up { color: var(--success); }
.stat-delta.down { color: var(--danger); }
.stat-delta.neutral { color: var(--text-muted); }
.stat-delta.up-bad { color: var(--danger); }
.stat-delta.down-good { color: var(--success); }

/* Responsive */
@media (max-width: 600px) {
  .content { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px; }
  .stat-value { font-size: 22px; }
  .tab { padding: 10px 14px; font-size: 13px; }
  .top-bar { padding: 12px 16px; }
  .review-grid { grid-template-columns: 1fr; }
  .chat-inbox-layout { grid-template-columns: 1fr; height: auto; }
  .chat-session-list { max-height: 300px; border-right: none; border-bottom: 1px solid var(--border); }
  .msg { max-width: 90%; }
  .health-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Novie detail page ---- */
.novie-list-table tbody tr.novie-row { cursor: pointer; }
.novie-list-table tbody tr.novie-row:hover { background: var(--bg); }

.novie-detail-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.novie-nav { display: flex; gap: 8px; align-items: center; }
.novie-nav button[disabled] { opacity: 0.45; cursor: not-allowed; }
.novie-nav-pos { color: var(--text-muted); font-size: 13px; margin-left: 4px; }
#novie-call-actions { display: flex; gap: 8px; }

.novie-detail-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.novie-detail-head h2 { margin: 0; }
.novie-sub { color: var(--text-muted); font-size: 13px; margin: 4px 0 0; }
.novie-status-edit { font-size: 13px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 4px; }

.novie-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.novie-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.novie-card h3 { margin: 0 0 12px; font-size: 15px; }

.novie-field { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.novie-field input, .novie-textarea { width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; box-sizing: border-box; }
.novie-notes-card { display: flex; flex-direction: column; }
.novie-notes-card .novie-textarea { flex: 1; resize: none; }
.novie-help { color: var(--text-muted); font-size: 12px; margin: 0 0 8px; line-height: 1.4; }
.novie-row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.novie-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-right: 16px; }

.novie-hours-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.novie-day-label { width: 38px; font-size: 13px; color: var(--text-secondary); }
.novie-hours-row input[type="time"] { padding: 5px; border: 1px solid var(--border); border-radius: 6px; }
.novie-hours-row input[type="time"]:disabled { color: var(--text-muted); background: var(--bg); }

.novie-svc-head, .novie-svc-row { display: grid; grid-template-columns: 2fr 0.8fr 1fr 1fr 28px; gap: 8px; align-items: center; }
.novie-svc-head { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.novie-svc-row { margin-bottom: 6px; }
.novie-svc-row input, .novie-faq-row input { padding: 7px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }
.novie-faq-row { display: grid; grid-template-columns: 1fr 1fr 28px; gap: 8px; margin-bottom: 6px; align-items: center; }
#nd-add-service, #nd-add-faq { margin-top: 8px; }

.novie-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.novie-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 13px; }
.novie-chip-add { display: flex; gap: 8px; }
.novie-chip-add input { flex: 1; padding: 7px; border: 1px solid var(--border); border-radius: 6px; font: inherit; }

.novie-x { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 2px; }
.novie-x:hover { color: var(--danger); }

.novie-autosave-pill {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 50;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-muted);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: color 0.2s;
}
.novie-autosave-pill.is-saved { color: var(--success); }

@media (max-width: 720px) {
  .novie-detail-grid { grid-template-columns: 1fr; }
}

.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font: inherit; cursor: pointer; }
.btn-primary:hover { background: var(--accent-hover); }

a.btn-secondary { text-decoration: none; display: inline-flex; align-items: center; }