:root {
  color-scheme: dark;
  --bg: #020617;
  --surface: #0f172a;
  --surface-2: #111c33;
  --surface-3: #17233d;
  --text: #f0f8ff;
  --muted: #7093b5;
  --soft: #bddcf5;
  --border: #1d436b;
  --accent: #22c55e;
  --accent-2: #14b8a6;
  --warning: #f59e0b;
  --danger: #ef4444;
  --focus: #86efac;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  font-family:
    "Fira Sans",
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.14), transparent 34rem),
    radial-gradient(circle at 88% 12%, rgba(20, 184, 166, 0.1), transparent 30rem),
    var(--bg);
  color: var(--text);
}

button,
textarea,
select,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled,
textarea:disabled,
select:disabled,
input:disabled {
  cursor: not-allowed;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100;
  transform: translateY(-160%);
  border-radius: 999px;
  background: var(--accent);
  color: #03130a;
  padding: 0.75rem 1rem;
  font-weight: 700;
}

.skip-link:focus {
  transform: translateY(0);
}

.shell {
  display: grid;
  grid-template-columns: 19rem minmax(0, 1fr);
  min-height: 100dvh;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-right: 1px solid rgba(148, 163, 184, 0.2);
  background: rgba(2, 6, 23, 0.78);
  padding: 1.5rem;
  backdrop-filter: blur(18px);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.brand-mark {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(20, 184, 166, 0.09));
  box-shadow: 0 0 32px rgba(34, 197, 94, 0.18);
}

svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.brand-mark svg {
  width: 1.6rem;
  height: 1.6rem;
  color: var(--accent);
}

.eyebrow {
  margin: 0 0 0.25rem;
  color: var(--accent);
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

h2 {
  margin-bottom: 0;
  font-size: clamp(1.7rem, 2vw, 2.45rem);
  letter-spacing: -0.04em;
}

h3 {
  margin-bottom: 0;
  font-size: 1.1rem;
}

.nav-list {
  display: grid;
  gap: 0.5rem;
}

.nav-item {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--soft);
  padding: 0.75rem 1rem;
  text-decoration: none;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.nav-item:hover,
.nav-item.active {
  border-color: rgba(34, 197, 94, 0.36);
  background: rgba(34, 197, 94, 0.1);
  color: var(--text);
}

.sidebar-card {
  margin-top: auto;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: var(--radius-md);
  background: rgba(15, 23, 42, 0.78);
  padding: 1rem;
}

.sidebar-card strong,
.sidebar-card span {
  display: block;
}

.sidebar-card span {
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.main {
  min-width: 0;
  padding: 1.5rem;
}

.topbar,
.panel-header,
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar {
  margin-bottom: 1.5rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.button {
  min-height: 2.75rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  padding: 0.72rem 1.05rem;
  font-weight: 800;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.button:hover:not(:disabled) {
  transform: translateY(-1px);
}

.button.primary {
  border-color: rgba(34, 197, 94, 0.65);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #02130a;
}

.button.secondary {
  background: rgba(15, 23, 42, 0.85);
  color: var(--text);
}

.button:disabled {
  opacity: 0.45;
}

.status-pill,
.count-badge {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: var(--soft);
  padding: 0.4rem 0.75rem;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
}

.status-pill.is-online {
  border-color: rgba(34, 197, 94, 0.55);
  color: #bbf7d0;
}

.status-pill.is-error {
  border-color: rgba(239, 68, 68, 0.6);
  color: #fecaca;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-card,
.panel {
  border: 1px solid rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.88), rgba(15, 23, 42, 0.62)),
    rgba(15, 23, 42, 0.72);
  box-shadow: var(--shadow);
}

.metric-card {
  border-radius: var(--radius-md);
  padding: 1rem;
}

.metric-label {
  display: block;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.metric-card strong {
  display: block;
  margin: 0.25rem 0;
  color: var(--text);
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 2rem;
  letter-spacing: -0.04em;
}

.metric-card small {
  color: var(--muted);
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(18rem, 0.78fr) minmax(0, 1.5fr);
  gap: 1rem;
  align-items: stretch;
}

.panel {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.panel-header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  padding: 1.1rem;
}

.conversation-list {
  max-height: 42rem;
  overflow: auto;
  padding: 0.6rem;
}

.conversation-row {
  width: 100%;
  display: grid;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  padding: 0.95rem;
  text-align: left;
}

.conversation-row:hover,
.conversation-row.is-selected {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.08);
}

.row-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.chat-id {
  color: var(--text);
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.86rem;
}

.row-time,
.row-preview,
.message-time,
.form-footer p,
.definition-list dt {
  color: var(--muted);
  font-size: 0.86rem;
}

.row-preview {
  margin: 0;
  line-height: 1.45;
}

.detail-panel {
  min-height: 40rem;
  display: grid;
  grid-template-rows: auto auto minmax(24rem, 1fr) auto;
}

.message-list {
  min-height: 0;
  overflow: auto;
  padding: 1rem;
  scroll-behavior: smooth;
}

.message-bubble {
  max-width: 48rem;
  margin-bottom: 0.85rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1.1rem 1.1rem 1.1rem 0.35rem;
  background: rgba(2, 6, 23, 0.52);
  padding: 0.9rem;
}

.message-bubble p {
  margin-bottom: 0.45rem;
  white-space: pre-wrap;
  line-height: 1.5;
}

.empty-state {
  display: grid;
  min-height: 22rem;
  place-items: center;
  align-content: center;
  color: var(--muted);
  padding: 2rem;
  text-align: center;
}

.empty-state svg {
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  color: var(--accent);
}

.empty-state h4 {
  margin-bottom: 0.35rem;
  color: var(--text);
}

.empty-state p {
  max-width: 32rem;
  line-height: 1.55;
}

.reply-form {
  display: grid;
  gap: 0.7rem;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  padding: 1rem;
}

.reply-form label {
  color: var(--soft);
  font-weight: 800;
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 7rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: var(--radius-md);
  background: rgba(2, 6, 23, 0.68);
  color: var(--text);
  padding: 0.9rem 1rem;
  line-height: 1.55;
}

select,
input {
  width: 100%;
  min-height: 2.75rem;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 0.85rem;
  background: rgba(2, 6, 23, 0.68);
  color: var(--text);
  padding: 0.65rem 0.75rem;
}

select option {
  background: var(--surface-2);
  color: var(--text);
}

textarea::placeholder {
  color: #64748b;
}

.lower-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.ops-panel {
  padding: 1.2rem;
}

.definition-list {
  display: grid;
  gap: 0.9rem;
  margin: 1rem 0 0;
}

.definition-list div {
  display: grid;
  gap: 0.2rem;
}

.definition-list dd,
.definition-list dt {
  margin: 0;
}

.definition-list dd {
  color: var(--soft);
  overflow-wrap: anywhere;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.88rem;
}

.check-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  color: var(--soft);
  line-height: 1.5;
}

.toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  max-width: min(30rem, calc(100vw - 2rem));
  transform: translateY(150%);
  border: 1px solid rgba(34, 197, 94, 0.45);
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.96);
  box-shadow: var(--shadow);
  color: var(--text);
  padding: 0.9rem 1rem;
  transition: transform 220ms ease;
}

.toast.is-visible {
  transform: translateY(0);
}

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

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  }

  .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sidebar-card {
    margin-top: 0;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workspace-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .main,
  .sidebar {
    padding: 1rem;
  }

  .topbar,
  .topbar-actions,
  .form-footer,
  .panel-header {
    align-items: stretch;
    flex-direction: column;
  }

  .nav-list,
  .metrics-grid,
  .lower-grid {
    grid-template-columns: 1fr;
  }

  .button,
  .status-pill {
    justify-content: center;
    width: 100%;
  }
}

.photo-card {
  display: block;
  width: min(24rem, 100%);
  overflow: hidden;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
}

.photo-card img {
  display: block;
  width: 100%;
  max-height: 28rem;
  object-fit: contain;
}

.message-caption {
  margin-top: 0.65rem;
}

.extra-attachments {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.attachment-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  width: min(30rem, 100%);
  padding: 0.85rem;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.72);
  color: var(--text);
  text-decoration: none;
}

.attachment-card strong {
  color: var(--text);
}

.attachment-card span {
  color: var(--muted);
  font-size: 0.9rem;
}

.audio-card audio {
  width: 100%;
}

.video-card video {
  width: 100%;
  max-height: 28rem;
  border-radius: 0.75rem;
  background: #020617;
}

.document-card:hover {
  border-color: rgba(34, 197, 94, 0.52);
  background: rgba(20, 83, 45, 0.18);
}

.button.compact {
  min-height: 2.25rem;
  padding: 0.48rem 0.8rem;
  font-size: 0.82rem;
}

.detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.row-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.row-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
}

.test-badge,
.hide-chat {
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 0.18rem 0.45rem;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem;
  line-height: 1;
}

.test-badge {
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.12);
}

.hide-chat {
  color: var(--muted);
  background: rgba(15, 23, 42, 0.7);
}

.hide-chat:hover,
.hide-chat:focus-visible {
  color: var(--text);
  border-color: rgba(34, 197, 94, 0.45);
}

.conversation-row.is-closed {
  opacity: 0.66;
}

.conversation-row.is-closed .chat-id::after {
  content: "closed";
  margin-left: 0.5rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  color: var(--muted);
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
}

.compact-empty {
  min-height: 16rem;
}

.message-bubble.is-long {
  max-width: min(62rem, 100%);
}

.message-content {
  position: relative;
  overflow-wrap: anywhere;
}

.message-content.is-collapsed {
  max-height: 14rem;
  overflow: hidden;
}

.message-content.is-collapsed::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 5rem;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.95));
}

.text-link {
  min-height: 2.25rem;
  border: 0;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: #bbf7d0;
  padding: 0.45rem 0.75rem;
  font-weight: 800;
}

.text-link:hover {
  background: rgba(34, 197, 94, 0.18);
}



.form-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}


.conversation-row.has-unread {
  border-color: rgba(34, 197, 94, 0.58);
  background: rgba(34, 197, 94, 0.12);
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.16);
}

.unread-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.25rem;
  margin-left: 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: #02130a;
  padding: 0.12rem 0.45rem;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 900;
  vertical-align: middle;
}

.message-bubble.is-outbound {
  margin-left: auto;
  border-color: rgba(34, 197, 94, 0.34);
  border-radius: 1.1rem 1.1rem 0.35rem 1.1rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(20, 184, 166, 0.1));
}

.message-bubble.is-outbound .message-time {
  color: #bbf7d0;
}

.lead-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.lead-stage-chip,
.lead-action-chip,
.lead-call-chip {
  display: inline-flex;
  min-height: 1.55rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
}

.lead-stage-chip {
  border-color: rgba(34, 197, 94, 0.32);
  background: rgba(34, 197, 94, 0.09);
  color: #bbf7d0;
}

.lead-action-chip {
  border-color: rgba(245, 158, 11, 0.32);
  background: rgba(245, 158, 11, 0.09);
  color: #fde68a;
}

.lead-call-chip {
  border-color: rgba(56, 189, 248, 0.32);
  background: rgba(56, 189, 248, 0.09);
  color: #bae6fd;
}

.lead-workspace {
  display: grid;
  gap: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(2, 6, 23, 0.32);
  padding: 1rem;
}

.lead-workspace[hidden] {
  display: none;
}

.lead-workspace-heading,
.workflow-card-heading,
.lead-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.lead-workspace-heading h4,
.workflow-card-heading h5,
.workflow-card-heading p {
  margin: 0;
}

.lead-due-badge {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 999px;
  color: var(--soft);
  padding: 0.35rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 800;
}

.lead-due-badge.is-due {
  border-color: rgba(245, 158, 11, 0.52);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}

.lead-due-badge.is-overdue {
  border-color: rgba(239, 68, 68, 0.58);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

.pipeline-rail {
  display: grid;
  grid-template-columns: repeat(9, minmax(5.7rem, 1fr));
  gap: 0.45rem;
  margin: 0;
  overflow-x: auto;
  padding: 0.15rem 0 0.45rem;
  list-style: none;
  scrollbar-width: thin;
}

.pipeline-stage {
  position: relative;
  min-width: 5.7rem;
}

.pipeline-stage button {
  width: 100%;
  min-height: 3.35rem;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 0.85rem;
  background: rgba(15, 23, 42, 0.82);
  color: var(--muted);
  padding: 0.55rem 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}

.pipeline-stage.is-complete button {
  border-color: rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
}

.pipeline-stage.is-current button {
  border-color: rgba(34, 197, 94, 0.78);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(20, 184, 166, 0.14));
  box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.16), 0 0 24px rgba(34, 197, 94, 0.1);
  color: var(--text);
}

.pipeline-stage.is-terminal button {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(127, 29, 29, 0.2);
  color: #fecaca;
}

.pipeline-step-number {
  display: block;
  margin-bottom: 0.25rem;
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.62rem;
  opacity: 0.8;
}

.lead-control-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.workflow-card {
  display: grid;
  align-content: start;
  gap: 0.55rem;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 1rem;
  background: rgba(15, 23, 42, 0.72);
  padding: 0.85rem;
}

.workflow-card-heading {
  justify-content: flex-start;
  margin-bottom: 0.2rem;
}

.workflow-card-heading p {
  color: var(--muted);
  font-size: 0.76rem;
}

.workflow-card-icon {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 2.4rem;
  place-items: center;
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 0.75rem;
  background: rgba(34, 197, 94, 0.1);
  color: var(--accent);
}

.workflow-card label {
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 800;
}

.workflow-card textarea {
  min-height: 4.5rem;
  border-radius: 0.85rem;
}

.workflow-card .button {
  align-self: end;
  margin-top: 0.2rem;
}

.field-stack {
  display: grid;
  gap: 0.55rem;
}

.field-stack[hidden] {
  display: none;
}

.lead-history {
  border-top: 1px solid rgba(148, 163, 184, 0.14);
  padding-top: 0.75rem;
}

.lead-history summary {
  min-height: 2.75rem;
  justify-content: flex-start;
  color: var(--soft);
  font-weight: 800;
  cursor: pointer;
}

.lead-history-list {
  display: grid;
  gap: 0;
  margin: 0.65rem 0 0;
  padding: 0;
  list-style: none;
}

.lead-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 0.8rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  min-height: 3.2rem;
  color: var(--soft);
  padding: 0.4rem 0;
}

.lead-history-dot {
  width: 0.65rem;
  height: 0.65rem;
  margin-top: 0.3rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-2);
}

.lead-history-copy strong,
.lead-history-copy span {
  display: block;
}

.lead-history-copy span,
.lead-history-time {
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.4;
}

@media (max-width: 1400px) {
  .lead-control-grid {
    grid-template-columns: 1fr 1fr;
  }

  .workflow-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 780px) {
  .lead-workspace-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .lead-control-grid {
    grid-template-columns: 1fr;
  }

  .workflow-card:last-child {
    grid-column: auto;
  }

  .lead-history-item {
    grid-template-columns: 0.8rem minmax(0, 1fr);
  }

  .lead-history-time {
    grid-column: 2;
  }
}

/* Revenue command center — premium operational layer */
:root {
  --bg: #060913; --surface: #0c1220; --surface-2: #111a2c; --surface-3: #172238;
  --text: #f4f7fb; --muted: #557da1; --soft: #b5d5ef; --border: #173c64;
  --accent: #4ee6b1; --accent-2: #50a8ff; --focus: #8fc7ff;
  --shadow: 0 18px 60px rgba(0,0,0,.28); --radius-lg: 22px; --radius-md: 16px;
}
body { background: radial-gradient(circle at 76% -10%, rgba(80,168,255,.11), transparent 35rem), radial-gradient(circle at 28% 0%, rgba(78,230,177,.07), transparent 30rem), var(--bg); }
.shell { grid-template-columns: 16.5rem minmax(0,1fr); }
.sidebar { padding: 1.4rem 1.1rem; gap: 2rem; border-right-color: rgba(130,144,167,.13); background: rgba(5,8,18,.92); }
.brand-lockup { padding: .3rem .6rem; }.brand-mark{border-radius:14px;box-shadow:none}.brand-lockup h1{font-size:1.3rem;letter-spacing:-.03em}.brand-lockup .eyebrow{font-size:.65rem}
.nav-list{gap:.3rem}.nav-item{position:relative;min-height:3.25rem;border-radius:12px;padding:.75rem .85rem;font-weight:650}.nav-item span:nth-child(2){flex:1}.nav-item:hover,.nav-item.active{border-color:rgba(78,230,177,.2);background:linear-gradient(90deg,rgba(78,230,177,.13),rgba(80,168,255,.06));}.nav-item.active:before{content:"";position:absolute;left:-1.1rem;width:3px;height:1.75rem;border-radius:0 3px 3px 0;background:var(--accent)}
.nav-count{display:grid;min-width:1.55rem;height:1.55rem;place-items:center;border-radius:999px;background:rgba(130,144,167,.12);font-size:.7rem}.sidebar-card{padding:.85rem;background:rgba(17,26,44,.68);border-radius:16px}.operator-row{display:flex;align-items:center;gap:.7rem}.operator-avatar{display:grid;width:2.35rem;height:2.35rem;place-items:center;border-radius:10px;background:linear-gradient(135deg,#286e6a,#244873);font-size:.72rem;font-weight:800}.operator-row small{display:block;color:var(--muted);margin-top:.15rem}.supervision-line{display:flex;align-items:center;gap:.5rem;margin-top:.8rem;padding-top:.7rem;border-top:1px solid rgba(130,144,167,.12);color:var(--soft);font-size:.75rem}.live-dot{width:.48rem;height:.48rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(78,230,177,.1)}
.main{padding:2rem clamp(1.2rem,2.5vw,2.6rem) 3rem}.topbar{margin-bottom:1.75rem}.page-subtitle{max-width:46rem;margin:.5rem 0 0;color:var(--muted);line-height:1.5}.topbar h2{font-size:clamp(1.85rem,2.5vw,2.8rem)}
.panel,.metric-card{border-color:rgba(130,144,167,.16);background:linear-gradient(145deg,rgba(17,26,44,.91),rgba(11,17,30,.9));box-shadow:0 1px 0 rgba(255,255,255,.025),var(--shadow)}
.metrics-grid{gap:.85rem;margin-bottom:1rem}.metric-card{position:relative;min-height:10rem;padding:1.15rem;overflow:hidden}.metric-card:after{content:"";position:absolute;right:-2rem;bottom:-3rem;width:8rem;height:8rem;border-radius:50%;background:radial-gradient(circle,rgba(80,168,255,.09),transparent 68%)}.metric-icon{position:absolute;top:1rem;right:1rem;display:grid;width:2.2rem;height:2.2rem;place-items:center;border-radius:10px;font-family:ui-monospace,monospace;font-size:.65rem;font-weight:800}.tone-blue{background:rgba(80,168,255,.12);color:#91c7ff}.tone-violet{background:rgba(167,139,250,.12);color:#c4b5fd}.tone-amber{background:rgba(245,158,11,.12);color:#fcd34d}.tone-green{background:rgba(78,230,177,.12);color:#85f1cc}.metric-card strong{font-size:2.2rem;letter-spacing:-.06em}.metric-label{font-weight:700}
.workspace-grid{grid-template-columns:minmax(18.5rem,24rem) minmax(38rem,1fr);gap:.85rem}.inbox-panel,.detail-panel{border-radius:20px}.panel-header{min-height:5.2rem;padding:1.05rem 1.25rem}.conversation-row{margin:.55rem .7rem;border-radius:14px;border:1px solid transparent;background:transparent;padding:1rem;text-align:left}.conversation-row:hover{background:rgba(80,168,255,.055);border-color:rgba(80,168,255,.14)}.conversation-row.is-selected{background:linear-gradient(135deg,rgba(78,230,177,.11),rgba(80,168,255,.08));border-color:rgba(78,230,177,.32);box-shadow:inset 3px 0 0 var(--accent)}.chat-id{font-size:.9rem}.row-preview{line-height:1.5}.lead-stage-chip,.lead-action-chip,.lead-call-chip{border-radius:7px;font-size:.66rem;padding:.26rem .45rem}
.lead-workspace{padding:1.15rem;background:linear-gradient(180deg,rgba(5,9,19,.28),rgba(10,16,28,.65));gap:1rem}.pipeline-rail{grid-template-columns:repeat(9,minmax(6.3rem,1fr));gap:.35rem}.pipeline-stage button{border-radius:10px;background:rgba(15,23,39,.86)}.lead-control-grid{gap:.65rem}.workflow-card{border-radius:14px;padding:.9rem;background:rgba(13,21,36,.86)}.workflow-card-icon{width:2.25rem;height:2.25rem;flex-basis:2.25rem;border-radius:9px;font:700 .67rem ui-monospace,monospace}
input,select,textarea{width:100%;min-height:2.8rem;border:1px solid rgba(130,144,167,.23);border-radius:10px;background:#080d19;color:var(--text);padding:.65rem .75rem}textarea{resize:vertical}.workflow-card label,.profile-grid label{display:grid;gap:.38rem;color:var(--soft);font-size:.74rem;font-weight:700}.button{border-radius:10px;font-weight:750;transition:transform .15s ease,border-color .15s ease,background .15s ease}.button:hover:not(:disabled){transform:translateY(-1px)}.button.primary{background:linear-gradient(135deg,#4ee6b1,#42cfa5);border-color:#4ee6b1;color:#04130e}.button.secondary{background:rgba(20,31,51,.88)}
.intelligence-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(18rem,.65fr);gap:.75rem}.profile-card,.ai-workflow-card{border:1px solid rgba(130,144,167,.17);border-radius:16px;background:rgba(13,21,36,.86);padding:1rem}.section-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1rem}.section-card-heading h4{margin:0;font-size:1rem}.soft-badge{padding:.3rem .55rem;border-radius:7px;background:rgba(80,168,255,.09);color:#91c7ff;font-size:.66rem;font-weight:800}.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:.8rem}.span-2{grid-column:1/-1}
.ai-workflow-card{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(25,25,61,.85),rgba(11,22,39,.9))}.ai-workflow-card:before{content:"";position:absolute;right:-4rem;top:-5rem;width:12rem;height:12rem;border-radius:50%;background:radial-gradient(circle,rgba(135,109,255,.17),transparent 68%)}.ai-spark{display:grid;width:2.3rem;height:2.3rem;place-items:center;border-radius:10px;background:linear-gradient(135deg,#7c65e9,#4c87e8);font:800 .68rem ui-monospace,monospace}.ai-intro{color:var(--soft);font-size:.84rem;line-height:1.55}.ai-empty{display:grid;gap:.35rem;margin:1rem 0;padding:1rem;border:1px dashed rgba(167,139,250,.27);border-radius:12px;background:rgba(167,139,250,.045)}.ai-empty span,.ai-reason{color:var(--muted);font-size:.76rem;line-height:1.5}.confidence-row{display:flex;justify-content:space-between;color:#c4b5fd}.signal-list{display:flex;flex-wrap:wrap;gap:.35rem}.signal-list span{padding:.28rem .48rem;border-radius:7px;background:rgba(167,139,250,.11);color:#ddd6fe;font-size:.68rem}.ai-recommendation{display:grid;gap:.3rem;margin:.8rem 0;padding:.75rem;border-left:2px solid #a78bfa;background:rgba(167,139,250,.06)}.ai-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.ai-button{border-color:#806ded;background:linear-gradient(135deg,#6f5bd3,#376fc5);color:white}
.message-list{background:rgba(4,8,16,.45)}.message-bubble{border-radius:14px}.reply-form{background:rgba(10,16,28,.96);backdrop-filter:blur(16px)}
.view-section[hidden]{display:none}.view-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1rem;padding:1.15rem 1.3rem}.view-toolbar p{margin:.35rem 0 0;color:var(--muted)}.toolbar-controls{display:flex;gap:.6rem}.toolbar-controls input{width:18rem}.toolbar-controls select{width:12rem}
.pipeline-board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(18rem,21rem);gap:.8rem;overflow-x:auto;padding-bottom:1rem;scrollbar-width:thin}.pipeline-column{min-height:34rem;border:1px solid rgba(130,144,167,.14);border-radius:16px;background:rgba(9,14,25,.62)}.pipeline-column>header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem;border-bottom:1px solid rgba(130,144,167,.12)}.pipeline-column>header div{display:flex;align-items:center;gap:.55rem}.pipeline-column>header>span{display:grid;min-width:1.7rem;height:1.7rem;place-items:center;border-radius:8px;background:rgba(130,144,167,.1);font-size:.72rem}.stage-dot{width:.52rem;height:.52rem;border-radius:50%;background:#5ca7f5}.stage-interested,.stage-qualified{background:#a78bfa}.stage-offer_sent,.stage-payment_pending,.stage-payment_verification{background:#f59e0b}.stage-won{background:#4ee6b1}.stage-lost{background:#ef6464}.pipeline-stack{display:grid;align-content:start;gap:.55rem;padding:.65rem}.pipeline-card{display:grid;gap:.65rem;width:100%;border:1px solid rgba(130,144,167,.14);border-radius:12px;background:linear-gradient(145deg,rgba(19,29,48,.96),rgba(13,21,36,.96));color:var(--text);padding:.85rem;text-align:left}.pipeline-card:hover{border-color:rgba(80,168,255,.4);transform:translateY(-1px)}.pipeline-card-top{display:flex;align-items:center;justify-content:space-between}.attention-dot{width:.55rem;height:.55rem;border-radius:50%;background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.1)}.pipeline-preview{min-height:2.4em;overflow:hidden;color:var(--soft);font-size:.78rem;line-height:1.45}.pipeline-tags{display:flex;flex-wrap:wrap;gap:.3rem}.pipeline-tags i{padding:.22rem .38rem;border-radius:6px;background:rgba(80,168,255,.08);color:#9bcaff;font-size:.64rem;font-style:normal}.pipeline-next{padding-top:.55rem;border-top:1px solid rgba(130,144,167,.1);color:var(--muted);font-size:.68rem}.column-empty{padding:2rem .7rem;text-align:center;color:var(--muted);font-size:.78rem}
.task-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:.9rem}.task-metric{display:flex;align-items:center;justify-content:space-between;min-height:6rem;border:1px solid rgba(130,144,167,.14);border-radius:14px;background:rgba(13,21,36,.82);padding:1rem}.task-metric span{color:var(--soft)}.task-metric strong{font-size:1.8rem}.today-layout{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:.9rem}.task-panel{overflow:hidden}.task-list{display:grid}.task-row{display:grid;grid-template-columns:.7rem minmax(0,1fr) auto auto;align-items:center;gap:.9rem;min-height:5rem;border:0;border-top:1px solid rgba(130,144,167,.1);background:transparent;color:var(--text);padding:.75rem 1.2rem;text-align:left}.task-row:hover{background:rgba(80,168,255,.045)}.task-priority{width:.55rem;height:.55rem;border-radius:50%;background:#50a8ff}.task-priority.is-overdue{background:#ef6464}.task-main{display:grid;gap:.25rem}.task-main small{color:var(--muted)}.task-due{color:var(--soft);font-size:.76rem}.task-due.is-overdue{color:#fca5a5}.task-open{padding:.4rem .65rem;border:1px solid rgba(80,168,255,.2);border-radius:8px;color:#9bcaff;font-size:.7rem;font-weight:800}.focus-panel{height:max-content;padding:1.2rem}.focus-panel>p:not(.eyebrow){color:var(--muted);line-height:1.55}.focus-rule{display:flex;gap:.75rem;margin-top:.8rem;padding:.8rem;border-radius:12px;background:rgba(80,168,255,.045)}.focus-rule>span{font:800 .68rem ui-monospace,monospace;color:#91c7ff}.focus-rule small{display:block;color:var(--muted);margin-top:.2rem}.system-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}.system-grid .panel{padding:1.3rem}
@media(max-width:1200px){.shell{grid-template-columns:5.5rem minmax(0,1fr)}.sidebar{padding:1.25rem .65rem}.brand-lockup>div:last-child,.nav-item>span:not(.nav-count),.sidebar-card{display:none}.brand-lockup{justify-content:center}.nav-item{justify-content:center}.nav-item.active:before{left:-.65rem}.workspace-grid{grid-template-columns:19rem minmax(34rem,1fr)}.intelligence-grid{grid-template-columns:1fr}.today-layout{grid-template-columns:1fr}.focus-panel{display:none}}
@media(max-width:850px){.shell{display:block}.sidebar{position:sticky;z-index:20;width:100%;height:auto;flex-direction:row;align-items:center;padding:.55rem .8rem;border-right:0;border-bottom:1px solid rgba(130,144,167,.14)}.brand-lockup{display:none}.nav-list{display:flex;width:100%;justify-content:space-around}.nav-item{flex:1;min-height:2.8rem;padding:.5rem}.nav-item.active:before{left:25%;bottom:-.55rem;width:50%;height:2px}.main{padding:1.1rem .75rem 2rem}.topbar{align-items:flex-start}.page-subtitle{display:none}.workspace-grid{grid-template-columns:1fr}.inbox-panel{max-height:23rem}.metrics-grid,.task-metrics{grid-template-columns:repeat(2,1fr)}.toolbar-controls{width:100%}.view-toolbar{align-items:stretch;flex-direction:column}.toolbar-controls input,.toolbar-controls select{width:100%}.profile-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.system-grid{grid-template-columns:1fr}}
@media(max-width:560px){.nav-item svg{width:1.35rem;height:1.35rem}.nav-count{position:absolute;right:10%;top:.2rem}.topbar-actions .button{display:none}.metrics-grid{grid-template-columns:1fr 1fr}.metric-card{min-height:8rem}.workspace-grid{display:block}.detail-panel{margin-top:.75rem}.lead-control-grid{grid-template-columns:1fr}.pipeline-rail{grid-template-columns:repeat(9,7rem)}.intelligence-grid{grid-template-columns:1fr}.form-footer{align-items:stretch;flex-direction:column}.form-actions{display:grid;grid-template-columns:1fr 1fr}.task-metrics{grid-template-columns:1fr 1fr}.task-row{grid-template-columns:.6rem minmax(0,1fr) auto}.task-open{display:none}}

/* =====================================================================
   ABOP Light Studio
   A calm, configurable operations workspace inspired by the supplied
   references. This final layer intentionally replaces the legacy dark skin.
   ===================================================================== */

:root,
html[data-accent="blue"] {
  color-scheme: light;
  --bg: #eef3fb;
  --surface: #ffffff;
  --surface-2: #f3faff;
  --surface-3: #eef3f8;
  --text: #101828;
  --muted: #42688a;
  --soft: #1d4269;
  --border: #cde5fb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-line: #bfdbfe;
  --accent-ink: #1e40af;
  --accent-rgb: 37, 99, 235;
  --warning: #d97706;
  --danger: #dc2626;
  --success: #059669;
  --focus: #3b82f6;
  --shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 12px 32px rgba(15, 23, 42, .06);
  --shadow-float: 0 18px 50px rgba(15, 23, 42, .11);
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

html[data-accent="indigo"] {
  --accent: #6554e8; --accent-hover: #5142c7; --accent-soft: #f2f0ff;
  --accent-line: #d8d1ff; --accent-ink: #4338a4; --accent-rgb: 101, 84, 232; --focus: #7667ed;
}
html[data-accent="emerald"] {
  --accent: #078a67; --accent-hover: #047455; --accent-soft: #ecfdf7;
  --accent-line: #a7f3d6; --accent-ink: #065f49; --accent-rgb: 7, 138, 103; --focus: #10b981;
}
html[data-accent="orange"] {
  --accent: #ea6a19; --accent-hover: #c9540f; --accent-soft: #fff5eb;
  --accent-line: #fed7aa; --accent-ink: #9a3412; --accent-rgb: 234, 106, 25; --focus: #f97316;
}

html { background: var(--bg); }
body {
  min-height: 100dvh;
  padding: 14px;
  background:
    radial-gradient(circle at 50% -15%, rgba(var(--accent-rgb), .10), transparent 34rem),
    linear-gradient(135deg, #ebf6ff 0%, #edf7ff 48%, #eaf5ff 100%);
  color: var(--text);
}
.shell {
  grid-template-columns: 15.5rem minmax(0, 1fr);
  min-height: calc(100dvh - 28px);
  max-width: 1800px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(208, 216, 229, .9);
  border-radius: 22px;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}
.sidebar {
  position: sticky;
  top: 0;
  height: calc(100dvh - 28px);
  gap: 1.35rem;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: none;
}
.brand-lockup { min-height: 3.6rem; padding: 0 .5rem; gap: .75rem; }
.brand-mark {
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid var(--accent-line);
  border-radius: .82rem;
  background: var(--accent-soft);
  box-shadow: none;
}
.brand-mark svg { color: var(--accent); }
.brand-lockup h1 { color: var(--text); font-size: 1.08rem; letter-spacing: -.02em; }
.eyebrow {
  color: var(--accent);
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .105em;
}
.nav-list { gap: .3rem; }
.nav-item {
  min-height: 2.8rem;
  padding: .65rem .72rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  color: #254b70;
  font-size: .9rem;
  font-weight: 550;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.nav-item:hover { border-color: var(--border); background: #f0f8ff; color: var(--text); }
.nav-item.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: none;
}
.nav-item svg { width: 1.08rem; height: 1.08rem; }
.nav-count {
  min-width: 1.4rem;
  height: 1.4rem;
  border: 0;
  background: #e7f3ff;
  color: #254b70;
  font-size: .68rem;
}
.nav-item.active .nav-count { background: var(--accent); color: #fff; }
.sidebar-card {
  margin-top: auto;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background: #f7fcff;
  box-shadow: none;
}
.operator-avatar { background: var(--accent-soft); color: var(--accent-ink); }
.operator-row strong { color: var(--text); }
.operator-row small, .supervision-line { color: var(--muted); }
.live-dot { background: var(--success); box-shadow: 0 0 0 3px rgba(5,150,105,.12); }

.main { min-width: 0; background: #edf7ff; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  align-items: center;
  min-height: 6.8rem;
  padding: 1.15rem 1.45rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}
.topbar h2 { color: var(--text); font-size: clamp(1.45rem, 2vw, 1.9rem); font-weight: 700; letter-spacing: -.035em; }
.page-subtitle { max-width: 48rem; margin-top: .32rem; color: var(--muted); font-size: .88rem; }
.topbar-actions { gap: .55rem; }
.button {
  min-height: 2.7rem;
  border-radius: .72rem;
  font-size: .84rem;
  font-weight: 650;
  box-shadow: none;
  transition: transform .15s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
.button:active:not(:disabled) { transform: scale(.98); }
.button.primary, .ai-button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}
.button.primary:hover, .ai-button:hover { border-color: var(--accent-hover); background: var(--accent-hover); }
.button.secondary, .ghost-button {
  border-color: #c9e0f7;
  background: #fff;
  color: #1d4269;
}
.button.secondary:hover, .ghost-button:hover { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
.ghost-button { display: inline-flex; align-items: center; gap: .45rem; }
.ghost-button svg { width: 1rem; height: 1rem; }
.status-pill {
  min-height: 2rem;
  border-color: #c9e0f7;
  background: #fff;
  color: #254b70;
  font-family: Inter, "Segoe UI", sans-serif;
  font-size: .72rem;
  letter-spacing: .02em;
}
.status-pill.is-online { border-color: #a7e7d4; background: #ecfdf7; color: #067158; }
.status-pill.is-loading { border-color: #c9e0f7; color: #42688a; }
.status-pill.is-error { border-color: #fecaca; background: #fff1f2; color: #b42318; }

.view-section { padding: 1.2rem 1.35rem 1.6rem; }
.metrics-grid { gap: .85rem; margin-bottom: .95rem; }
.metric-card {
  min-height: 8.5rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.metric-card::after { display: none; }
.metric-icon {
  width: 2rem; height: 2rem; border: 0; border-radius: .58rem;
  background: var(--accent-soft); color: var(--accent-ink); font-size: .67rem;
}
.metric-label { color: var(--muted); font-size: .72rem; }
.metric-card strong { color: var(--text); font-size: 1.65rem; letter-spacing: -.04em; }
.metric-card small { color: #6183a6; font-size: .7rem; }

.panel,
.workflow-card,
.profile-card,
.ai-workflow-card,
.pipeline-column,
.task-metric-card,
.pipeline-lead-card,
.task-row {
  border-color: var(--border);
  background: #fff;
  box-shadow: none;
}
.panel { border-radius: var(--radius-lg); }
.workspace-grid { gap: 1rem; grid-template-columns: minmax(18rem, .78fr) minmax(35rem, 2.1fr); }
.inbox-panel { background: #fff; }
.panel-header {
  min-height: 4.8rem;
  padding: .95rem 1rem;
  border-bottom-color: var(--border);
  background: transparent;
}
.panel-header h3, .view-toolbar h3, .focus-panel h3, .ops-panel h3 { color: var(--text); font-size: 1.08rem; letter-spacing: -.02em; }
.count-badge { border-color: var(--border); background: #f0f8ff; color: #254b70; }
.conversation-list { padding: .55rem; gap: .32rem; }
.conversation-row {
  padding: .88rem;
  border: 1px solid transparent;
  border-radius: .8rem;
  background: transparent;
  color: var(--text);
}
.conversation-row:hover { border-color: var(--border); background: #f0f8ff; transform: none; }
.conversation-row.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}
.chat-id, .row-time, .row-preview, .row-footer { color: inherit; }
.row-time, .row-footer { color: var(--muted); }
.row-preview { color: #254b70; }
.unread-badge { background: var(--accent); color: #fff; }
.lead-stage-chip, .lead-action-chip, .lead-call-chip, .test-badge {
  border-color: #c9e2fa; background: #fff; color: #254b70;
}
.hide-chat { color: var(--muted); }
.hide-chat:hover { color: var(--danger); }

.detail-panel { min-height: calc(100dvh - 10.5rem); }
.detail-header { background: #fff; }
.lead-workspace {
  padding: 1rem;
  border-bottom-color: var(--border);
  background: #f7fcff;
}
.lead-workspace h4, .workflow-card h5, .section-card-heading h4 { color: var(--text); }
.lead-due-badge, .soft-badge { border-color: var(--border); background: #fff; color: #254b70; }
.pipeline-rail {
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: #fff;
  overflow: hidden;
}
.pipeline-step { color: #6183a6; }
.pipeline-step::after { background: #d7eafa; }
.pipeline-step.is-complete, .pipeline-step.is-current { color: var(--accent-ink); }
.pipeline-step.is-complete .pipeline-step-marker { background: var(--accent); border-color: var(--accent); color: #fff; }
.pipeline-step.is-current { background: var(--accent-soft); }
.pipeline-step.is-current .pipeline-step-marker { border-color: var(--accent); background: #fff; color: var(--accent); }
.pipeline-step-marker { border-color: #c3dff6; background: #fff; color: #42688a; }

.lead-control-grid, .intelligence-grid { gap: .75rem; }
.workflow-card, .profile-card, .ai-workflow-card { border-radius: .85rem; }
.workflow-card-heading { border-bottom-color: var(--border); }
.workflow-card-icon, .ai-spark { border: 0; background: var(--accent-soft); color: var(--accent-ink); }
.workflow-card p, .ai-intro, .appearance-copy { color: var(--muted); }
label { color: #1d4269; font-size: .76rem; font-weight: 600; }
input, select, textarea {
  min-height: 2.75rem;
  border: 1px solid #c8e1f7;
  border-radius: .62rem;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.02);
}
input::placeholder, textarea::placeholder { color: #6183a6; }
input:hover, select:hover, textarea:hover { border-color: #a5c9eb; }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
  outline: none;
}
.ai-workflow-card {
  background: linear-gradient(145deg, var(--accent-soft), #fff 68%);
  border-color: var(--accent-line);
}
.ai-empty, .ai-result, .ai-recommendation { border-color: var(--border); background: rgba(255,255,255,.85); }
.signal-chip { background: #fff; border-color: var(--accent-line); color: var(--accent-ink); }
.confidence-row strong { color: var(--accent-ink); }
.lead-history { border-color: var(--border); background: #fff; }
.lead-history summary { color: #1d4269; }
.lead-history-list::before { background: #cfe6fa; }
.lead-history-item::before { border-color: #fff; background: var(--accent); }
.lead-history-item strong { color: var(--text); }
.lead-history-item span, .lead-history-item small { color: var(--muted); }

.message-list { gap: .7rem; padding: 1.15rem; background: #f0f8ff; }
.message-card {
  max-width: min(77%, 48rem);
  border-color: var(--border);
  border-radius: 1rem;
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.03);
}
.message-card.outbound { border-color: var(--accent-line); background: var(--accent-soft); }
.message-time { color: var(--muted); }
.attachment-card, .media-card { border-color: var(--border); background: #f0f8ff; color: var(--text); }
.reply-form {
  border-top-color: var(--border);
  background: #fff;
}
.reply-form > label { color: var(--text); font-size: .86rem; }
.reply-form textarea { background: #fff; }
.form-footer p { color: var(--muted); }

.view-toolbar { padding: 1.05rem; }
.view-toolbar p, .focus-panel p { color: var(--muted); }
.toolbar-controls input, .toolbar-controls select { background: #fff; }
.pipeline-board { gap: .75rem; }
.pipeline-column { border-radius: .9rem; background: #edf7ff; }
.pipeline-column-header { border-bottom-color: #cfe5fa; background: rgba(255,255,255,.58); }
.pipeline-column-header strong { color: var(--text); }
.pipeline-lead-card { border-radius: .72rem; background: #fff; }
.pipeline-lead-card:hover { border-color: var(--accent-line); box-shadow: 0 6px 18px rgba(15,23,42,.06); }
.pipeline-lead-card h4 { color: var(--text); }
.pipeline-lead-card p, .pipeline-lead-card small { color: var(--muted); }
.pipeline-card-badge { background: var(--accent-soft); color: var(--accent-ink); }
.pipeline-value { color: var(--text); }

.task-metrics { gap: .75rem; }
.task-metric-card { border-radius: .85rem; }
.task-metric-card strong { color: var(--text); }
.task-metric-card span { color: var(--muted); }
.today-layout { gap: 1rem; }
.task-row { border-radius: .8rem; }
.task-row:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.task-row h4 { color: var(--text); }
.task-row p, .task-row time { color: var(--muted); }
.task-priority { background: #fff7ed; color: #b45309; }
.focus-panel { background: #fff; }
.focus-rule { border-top-color: var(--border); }
.focus-rule > span { background: var(--accent-soft); color: var(--accent-ink); }
.focus-rule strong { color: var(--text); }
.focus-rule small { color: var(--muted); }

.system-grid { align-items: start; gap: 1rem; }
.ops-panel { padding: 1.15rem; }
.definition-list > div { border-color: var(--border); background: #f0f8ff; }
.definition-list dt { color: var(--muted); }
.definition-list dd { color: var(--text); }
.health-detail { display: block; margin-top: .25rem; color: var(--muted); font: 400 .8rem/1.45 Inter, "Segoe UI", sans-serif; }
.check-list li { color: #1d4269; }
.check-list li::before { background: #ecfdf7; color: #067158; }

.appearance-panel { grid-column: 1 / -1; }
.appearance-copy { max-width: 48rem; margin-bottom: 1.2rem; }
.account-copy { max-width: 48rem; margin: 0 0 1.1rem; color: var(--muted); line-height: 1.55; }
.appearance-group { margin: 0 0 1.1rem; padding: 0; border: 0; }
.appearance-group legend { margin-bottom: .6rem; color: #1d4269; font-size: .78rem; font-weight: 650; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, minmax(7rem, 1fr)); gap: .65rem; max-width: 38rem; }
.swatch-option {
  display: flex; align-items: center; gap: .55rem; min-height: 2.8rem; padding: .55rem .7rem;
  border: 1px solid var(--border); border-radius: .68rem; background: #fff; color: #1d4269; font: inherit;
}
.swatch-option:hover { background: #f0f8ff; }
.swatch-option[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.1); }
.swatch-option span { width: 1.1rem; height: 1.1rem; border-radius: 50%; }
.swatch-option.is-blue span { background: #2563eb; }
.swatch-option.is-indigo span { background: #6554e8; }
.swatch-option.is-emerald span { background: #078a67; }
.swatch-option.is-orange span { background: #ea6a19; }
.segmented-control { display: inline-flex; padding: .25rem; border: 1px solid var(--border); border-radius: .7rem; background: #f1f9ff; }
.segmented-control button { min-height: 2.35rem; padding: .45rem .9rem; border: 0; border-radius: .5rem; background: transparent; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; }
.segmented-control button[aria-pressed="true"] { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(15,23,42,.1); }

.empty-state { color: var(--muted); }
.empty-state h4 { color: var(--text); }
.empty-state svg { color: var(--accent); }
.toast {
  border-color: #c9e0f7;
  background: #101828;
  color: #fff;
  box-shadow: var(--shadow-float);
}
.text-link { color: var(--accent-ink); }

html[data-density="compact"] .view-section { padding: .9rem 1rem 1.15rem; }
html[data-density="compact"] .topbar { min-height: 5.7rem; padding: .85rem 1.1rem; }
html[data-density="compact"] .metric-card { min-height: 7.3rem; padding: .8rem; }
html[data-density="compact"] .panel-header { min-height: 4.2rem; padding: .75rem .85rem; }
html[data-density="compact"] .conversation-row { padding: .65rem .75rem; }
html[data-density="compact"] .message-list { padding: .85rem; gap: .5rem; }
html[data-density="compact"] .lead-workspace { padding: .75rem; }
html[data-density="compact"] .workflow-card,
html[data-density="compact"] .profile-card,
html[data-density="compact"] .ai-workflow-card,
html[data-density="compact"] .ops-panel { padding: .8rem; }

@media (max-width: 1120px) {
  body { padding: 0; }
  .shell { min-height: 100dvh; border: 0; border-radius: 0; }
  .sidebar { height: 100dvh; }
  .workspace-grid { grid-template-columns: minmax(17rem,.72fr) minmax(30rem,1.65fr); }
  .topbar { top: 0; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 5rem minmax(0,1fr); }
  .sidebar { padding: 1rem .7rem; }
  .brand-lockup { justify-content: center; padding: 0; }
  .brand-lockup > div:last-child, .nav-item > span:not(.nav-count), .sidebar-card { display: none; }
  .nav-item { justify-content: center; padding: .7rem; }
  .nav-count { position: absolute; transform: translate(12px,-12px); }
  .workspace-grid { grid-template-columns: 1fr; }
  .inbox-panel { max-height: 24rem; }
  .detail-panel { min-height: 42rem; }
  .intelligence-grid, .lead-control-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { background: #edf7ff; }
  .shell { display: block; }
  .sidebar {
    position: sticky; top: 0; z-index: 50; width: 100%; height: auto; flex-direction: row;
    align-items: center; padding: .55rem .7rem; border-right: 0; border-bottom: 1px solid var(--border);
  }
  .brand-lockup { min-height: auto; }
  .brand-mark { width: 2.35rem; height: 2.35rem; }
  .nav-list { flex: 1; flex-direction: row; justify-content: flex-end; }
  .nav-item { min-width: 2.65rem; min-height: 2.65rem; }
  .main { overflow: visible; }
  .topbar { position: static; align-items: flex-start; min-height: auto; padding: .9rem; }
  .topbar-actions { flex-wrap: wrap; justify-content: flex-end; }
  .ghost-button span { display: none; }
  .page-subtitle { display: none; }
  .view-section { padding: .75rem; }
  .metrics-grid { grid-template-columns: repeat(2,1fr); }
  .metric-card { min-height: 7rem; }
  .workspace-grid, .today-layout, .system-grid { display: grid; grid-template-columns: 1fr; }
  .detail-panel { min-height: 35rem; }
  .swatch-grid { grid-template-columns: repeat(2,1fr); }
  .toolbar-controls { width: 100%; grid-template-columns: 1fr; }
}

.auth-dialog {
  width: min(28rem, calc(100vw - 2rem));
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .2);
  padding: 0;
}
.auth-dialog::backdrop { background: rgba(15, 23, 42, .38); backdrop-filter: blur(4px); }
.auth-dialog form { display: grid; gap: 1rem; padding: 1.5rem; }
.auth-dialog h2, .auth-dialog p { margin: 0; }
.auth-dialog p:not(.eyebrow) { color: var(--muted); line-height: 1.55; }
.auth-dialog label { display: grid; gap: .45rem; font-weight: 700; }
.auth-dialog input { min-height: 2.8rem; border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; font: inherit; }
.auth-error { color: #b42318 !important; font-size: .88rem; }
.dialog-actions { display: flex; justify-content: flex-end; }
.status-pill.is-warning { background: #fff7ed; color: #b54708; border-color: #fed7aa; }
@media (max-width: 430px) {
  .topbar { gap: .65rem; }
  .topbar h2 { font-size: 1.28rem; }
  .topbar .eyebrow { display: none; }
  .button { min-height: 2.75rem; padding-inline: .75rem; }
  .metrics-grid { gap: .55rem; }
  .metric-card { padding: .75rem; }
  .metric-card strong { font-size: 1.4rem; }
  .form-footer { align-items: stretch; }
  .form-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .message-card { max-width: 92%; }
}

/* Light Studio precision fixes */
.conversation-list { overflow-x: hidden; }
.conversation-row { width: auto; min-width: 0; margin: 0; }
.conversation-row > * { min-width: 0; }
.row-top, .row-footer { min-width: 0; }
.row-preview { overflow-wrap: anywhere; word-break: break-word; }
.chat-id { min-width: 0; overflow-wrap: anywhere; }
.pipeline-stage button {
  border-color: var(--border);
  background: #fff;
  color: #42688a;
  box-shadow: none;
}
.pipeline-stage button:hover { border-color: var(--accent-line); background: #f0f8ff; color: var(--text); }
.pipeline-stage.is-complete button {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.pipeline-stage.is-current button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .10);
}
.pipeline-stage.is-terminal button {
  border-color: #fecaca;
  background: #fff1f2;
  color: #b42318;
}
.pipeline-step-number { font-family: Inter, "Segoe UI", sans-serif; }

.pipeline-card {
  border-color: var(--border);
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.pipeline-card:hover {
  border-color: var(--accent-line);
  background: #fff;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}
.pipeline-preview { color: #254b70; }
.pipeline-tags i { background: var(--accent-soft); color: var(--accent-ink); }
.pipeline-next { border-top-color: var(--border); color: var(--muted); }
.pipeline-column > header { border-bottom-color: #cfe5fa; }
.pipeline-column > header > span { background: #fff; color: #254b70; }

.task-metric {
  border-color: var(--border);
  background: #fff;
  color: var(--text);
  box-shadow: none;
}
.task-metric span { color: var(--muted); }
.task-metric strong { color: var(--text); }
.task-due { color: #254b70; }
.task-due.is-overdue { color: #b42318; }
.task-open { border-color: var(--accent-line); color: var(--accent-ink); background: var(--accent-soft); }
.focus-rule { background: #f0f8ff; }

/* =====================================================================
   CRM organization pass — queue / conversation / context architecture
   ===================================================================== */
.sidebar-head { display:flex; align-items:center; justify-content:space-between; gap:.55rem; }
.sidebar-toggle, .icon-button {
  display:grid; place-items:center; width:2.6rem; height:2.6rem; flex:0 0 auto;
  border:1px solid var(--border); border-radius:.68rem; background:#fff; color:#42688a;
}
.sidebar-toggle:hover, .icon-button:hover { border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent-ink); }
.sidebar-toggle svg { width:1.05rem; height:1.05rem; }
.nav-section-label {
  margin:1rem .72rem .2rem; color:#6183a6; font-size:.62rem; font-weight:750;
  letter-spacing:.12em; text-transform:uppercase;
}
.nav-subitem { min-height:2.45rem; padding-block:.48rem; font-size:.82rem; }
.nav-subitem svg { width:.98rem; height:.98rem; }
.nav-item.is-filter-active { background:#eef8ff; color:#133758; }
.nav-item.is-filter-active::before {
  content:""; position:absolute; left:.18rem; width:3px; height:1.25rem; border-radius:99px; background:var(--accent);
}
.nav-item { position:relative; }

html[data-sidebar="collapsed"] .shell { grid-template-columns:5rem minmax(0,1fr); }
html[data-sidebar="collapsed"] .sidebar { padding-inline:.65rem; }
html[data-sidebar="collapsed"] .sidebar-head { justify-content:center; flex-direction:column; }
html[data-sidebar="collapsed"] .brand-copy,
html[data-sidebar="collapsed"] .nav-section-label,
html[data-sidebar="collapsed"] .nav-item > span:not(.nav-count),
html[data-sidebar="collapsed"] .sidebar-card { display:none; }
html[data-sidebar="collapsed"] .nav-item { justify-content:center; padding-inline:.55rem; }
html[data-sidebar="collapsed"] .nav-count { position:absolute; top:.18rem; right:.18rem; }
html[data-sidebar="collapsed"] .sidebar-toggle svg { transform:rotate(180deg); }
html[data-text-scale="large"] { font-size:106.25%; }

.inbox-toolbar { display:grid; gap:.65rem; padding:.75rem; border-bottom:1px solid var(--border); background:#f7fcff; }
.inbox-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:.2rem; padding:.2rem; border:1px solid var(--border); border-radius:.65rem; background:#eff8ff; }
.inbox-tabs button {
  min-height:2.15rem; border:0; border-radius:.48rem; background:transparent; color:#42688a;
  font:inherit; font-size:.72rem; font-weight:650;
}
.inbox-tabs button[aria-selected="true"] { background:#fff; color:var(--text); box-shadow:0 1px 4px rgba(15,23,42,.09); }
.search-control { position:relative; display:block; }
.search-control svg { position:absolute; left:.72rem; top:50%; width:.95rem; height:.95rem; transform:translateY(-50%); color:#6183a6; pointer-events:none; }
.search-control input { width:100%; min-height:2.45rem; padding-left:2.2rem; font-size:.78rem; }
.source-control select { width:100%; min-height:2.35rem; font-size:.76rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.channel-badge { display:inline-flex; align-items:center; margin-right:.4rem; padding:.16rem .34rem; border:1px solid #b9dcff; border-radius:.36rem; background:#eff7ff; color:#1769aa; font-size:.62rem; font-weight:700; }
.conversation-origin { display:flex; align-items:center; min-width:0; }
.conversation-row .row-preview {
  display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  min-height:2.7em;
}

.workspace-grid { grid-template-columns:minmax(18rem,20rem) minmax(0,1fr); align-items:start; }
.inbox-panel, .detail-panel { height:calc(100dvh - 9.9rem); min-height:42rem; }
.conversation-list { max-height:none; min-height:0; overflow-y:auto; }
.detail-panel {
  display:grid;
  grid-template-columns:minmax(20rem,1fr) minmax(17.5rem,20rem);
  grid-template-rows:auto minmax(24rem,1fr) auto;
}
.detail-header { grid-column:1/-1; grid-row:1; }
.message-list { grid-column:1; grid-row:2; min-height:0; background:#f0f8ff; }
.reply-form { grid-column:1; grid-row:3; }
.lead-workspace {
  grid-column:2; grid-row:2/4; min-width:0; min-height:0; overflow-y:auto;
  padding:0; border-left:1px solid var(--border); border-bottom:0; background:#fff;
}
.context-panel-header { display:grid; gap:.55rem; padding:.9rem .9rem .7rem; border-bottom:1px solid var(--border); }
.context-panel-header h4 { margin:0; color:var(--text); font-size:1rem; }
.context-panel-header .lead-due-badge { width:max-content; max-width:100%; }
.context-tabs {
  position:sticky; top:0; z-index:2; display:grid; grid-template-columns:repeat(5,1fr);
  padding:.35rem; border-bottom:1px solid var(--border); background:rgba(255,255,255,.96);
}
.context-tabs button {
  min-height:2.25rem; padding:.35rem .25rem; border:0; border-radius:.48rem; background:transparent;
  color:#42688a; font:inherit; font-size:.67rem; font-weight:650;
}
.context-tabs button[aria-selected="true"] { background:var(--accent-soft); color:var(--accent-ink); }
.context-pane { display:none; padding:.85rem; }
.lead-workspace[data-context-tab="summary"] [data-context-pane="summary"],
.lead-workspace[data-context-tab="workflow"] [data-context-pane="workflow"],
.lead-workspace[data-context-tab="customer"] [data-context-pane="customer"],
.lead-workspace[data-context-tab="ai"] [data-context-pane="ai"],
.lead-workspace[data-context-tab="pilot"] [data-context-pane="pilot"] { display:block; }
.context-section-heading { display:grid; gap:.12rem; margin-bottom:.65rem; }
.context-section-heading span { color:var(--accent); font-size:.65rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.context-section-heading strong { font-size:.92rem; }
.context-pane .pipeline-rail {
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; padding:.4rem; margin-bottom:.8rem; overflow:visible;
}
.context-pane .pipeline-stage { min-width:0; }
.context-pane .pipeline-stage button { min-height:3rem; padding:.42rem .25rem; font-size:.62rem; }
.context-pane .pipeline-step-number { font-size:.55rem; }
.context-pane .lead-control-grid { grid-template-columns:1fr; }
.context-pane .workflow-card, .context-pane .profile-card, .context-pane .ai-workflow-card { padding:.78rem; }
.context-pane .profile-grid { grid-template-columns:1fr; }
.context-pane .span-2 { grid-column:auto; }
.context-pane .section-card-heading { margin-bottom:.75rem; }
.context-pane .lead-history { margin:0; }
.context-pane .lead-history summary { padding:.68rem .72rem; }
.context-pane .lead-history-list { max-height:none; }
.context-pane .lead-history-item { grid-template-columns:.6rem minmax(0,1fr); }
.context-pane .lead-history-time { grid-column:2; }
.context-pane .ai-actions { grid-template-columns:1fr; }
.context-pane .button { width:100%; }
.detail-header .detail-actions { margin-left:auto; }

.customer-identity-panel {
  display:grid;
  gap:.85rem;
  margin-bottom:.85rem;
  padding:.9rem;
  border:1px solid var(--border);
  border-radius:.85rem;
  background:#fff;
}
.identity-summary-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem;
}
.identity-summary-grid > div {
  min-width:0;
  padding:.65rem;
  border:1px solid #d5e8fa;
  border-radius:.65rem;
  background:#f7fcff;
}
.identity-summary-grid span,
.identity-channel-row small,
.identity-conversation-row small,
.merge-candidate-card small,
.merge-evidence-card small {
  display:block;
  color:#507499;
  font-size:.68rem;
  line-height:1.45;
}
.identity-summary-grid strong {
  display:block;
  margin-top:.15rem;
  color:var(--text);
  font-size:.82rem;
  overflow-wrap:anywhere;
}
.identity-sections {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}
.identity-sections h5,
.merge-candidates h5 {
  margin:0 0 .45rem;
  color:#1d4269;
  font-size:.72rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.identity-channel-row,
.identity-conversation-row,
.merge-candidate-card {
  display:flex;
  align-items:center;
  gap:.6rem;
  min-width:0;
  min-height:3rem;
  padding:.55rem .62rem;
  border:1px solid #d5e8fa;
  border-radius:.68rem;
  background:#fff;
}
.identity-channel-row + .identity-channel-row,
.identity-conversation-row + .identity-conversation-row,
.merge-candidate-card + .merge-candidate-card { margin-top:.45rem; }
.identity-channel-row > div,
.identity-conversation-row > div,
.merge-candidate-card > div {
  min-width:0;
  flex:1;
}
.identity-channel-row strong,
.identity-conversation-row strong,
.merge-candidate-card strong {
  display:block;
  color:var(--text);
  font-size:.78rem;
  overflow-wrap:anywhere;
}
.identity-conversation-row.is-current {
  border-color:var(--accent-line);
  background:var(--accent-soft);
}
.identity-empty {
  margin:0;
  padding:.65rem;
  border:1px dashed #c8e1f7;
  border-radius:.65rem;
  color:#507499;
  font-size:.76rem;
  line-height:1.5;
}
.merge-candidate-card .button {
  width:auto;
  min-width:max-content;
}
.merge-candidate-evidence {
  min-height:3rem;
  padding:.75rem;
  border:1px solid #d5e8fa;
  border-radius:.75rem;
  background:#f7fcff;
}
.merge-candidate-evidence p {
  color:#507499;
  font-size:.82rem;
  line-height:1.5;
}
.merge-evidence-card {
  display:grid;
  gap:.25rem;
}
.merge-evidence-card strong { color:var(--text); }
.merge-evidence-card span { color:#1d568c; font-size:.82rem; font-weight:700; }
.merge-identity-strip {
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin-top:.25rem;
}
.merge-identity-strip span {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  max-width:100%;
  padding:.25rem .42rem;
  border:1px solid #c8e1f7;
  border-radius:999px;
  background:#fff;
  color:#254b70;
  font-size:.68rem;
}
.merge-identity-strip .platform-icon {
  width:1rem;
  height:1rem;
  flex-basis:1rem;
  border-radius:.28rem;
}
.merge-identity-strip .platform-icon svg {
  width:.72rem;
  height:.72rem;
}

@media(max-width:850px) {
  .identity-summary-grid,
  .identity-sections {
    grid-template-columns:1fr;
  }
  .merge-candidate-card {
    align-items:flex-start;
    flex-direction:column;
  }
  .merge-candidate-card .button {
    width:100%;
  }
}

.appearance-group + .appearance-group { padding-top:.9rem; border-top:1px solid var(--border); }
#resetAppearance { margin-top:.25rem; }

@media (max-width:1200px) and (min-width:901px) {
  html:not([data-sidebar="expanded"]) .shell { grid-template-columns:5rem minmax(0,1fr); }
  .shell { grid-template-columns:14rem minmax(0,1fr); }
  .sidebar { padding-inline:.75rem; }
  .workspace-grid { grid-template-columns:18rem minmax(0,1fr); }
  .detail-panel { grid-template-columns:minmax(18rem,1fr) 17rem; }
  .nav-item > span:not(.nav-count) { display:inline; }
  .brand-lockup > div:last-child { display:block; }
  .sidebar-card { display:block; }
}
@media (max-width:1000px) {
  .workspace-grid { grid-template-columns:18rem minmax(0,1fr); }
  .detail-panel { display:grid; grid-template-columns:1fr; }
  .detail-header, .message-list, .reply-form, .lead-workspace { grid-column:1; }
  .detail-header { grid-row:1; }
  .message-list { grid-row:2; }
  .reply-form { grid-row:3; }
  .lead-workspace { grid-row:4; max-height:34rem; border-top:1px solid var(--border); border-left:0; }
  .context-pane .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .context-pane .span-2 { grid-column:1/-1; }
}
@media (max-width:680px) {
  .sidebar-head { display:none; }
  .nav-section-label, .nav-subitem { display:none; }
  .inbox-panel, .detail-panel { height:auto; min-height:0; }
  .conversation-list { max-height:24rem; }
  .workspace-grid { display:block; }
  .detail-panel { margin-top:.75rem; }
  .message-list { min-height:30rem; max-height:55dvh; }
}

.message-bubble {
  max-width:min(82%,48rem);
  border:1px solid var(--border);
  border-radius:1rem;
  background:#fff;
  color:var(--text);
  box-shadow:0 1px 2px rgba(16,24,40,.035);
}
.message-bubble.is-outbound {
  margin-left:auto;
  border-color:var(--accent-line);
  background:var(--accent-soft);
  color:var(--text);
}
.message-bubble .message-time,
.message-bubble.is-outbound .message-time { color:#42688a; }
.message-content { color:var(--text); }
.message-content.is-collapsed::after { background:linear-gradient(transparent,#fff); }
.message-bubble.is-outbound .message-content.is-collapsed::after { background:linear-gradient(transparent,var(--accent-soft)); }
.history-pagination,
.history-beginning {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 0 0 .85rem;
  color: var(--muted);
  font-size: .72rem;
}
.history-pagination {
  position: sticky;
  top: .15rem;
  z-index: 3;
  pointer-events: none;
}
.history-load-button,
.history-loading {
  min-height: 2.25rem;
  padding: .5rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: #254b70;
  box-shadow: 0 3px 12px rgba(15,23,42,.08);
  font: inherit;
  font-weight: 650;
  pointer-events: auto;
}
.history-load-button:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.history-load-button:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), .18);
  outline-offset: 2px;
}
.history-beginning::before,
.history-beginning::after {
  content: "";
  align-self: center;
  width: min(5rem, 18%);
  height: 1px;
  margin: 0 .65rem;
  background: var(--border);
}
@media (max-width:1350px) {
  .detail-header > #detailMode { display:none; }
  .detail-header .detail-actions .button { padding-inline:.7rem; }
}

/* =====================================================================
   Layout stabilization — cards always participate in document flow
   ===================================================================== */
.shell,
.main,
.view-section,
.workspace-grid,
.inbox-panel,
.detail-panel,
.message-list,
.reply-form,
.lead-workspace,
.context-pane,
.metric-card,
.workflow-card,
.profile-card,
.ai-workflow-card,
.pipeline-column,
.pipeline-card,
.task-row,
.ops-panel {
  min-width: 0;
}

.sidebar {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

.nav-list,
.sidebar-card {
  flex: 0 0 auto;
}

.metrics-grid {
  grid-template-columns: repeat(4, minmax(10rem, 1fr));
}

.metric-card,
.workflow-card,
.profile-card,
.ai-workflow-card,
.pipeline-card,
.task-row,
.ops-panel,
.context-panel-header,
.message-bubble {
  overflow-wrap: anywhere;
}

.workspace-grid {
  align-items: start;
}

.inbox-panel,
.detail-panel {
  height: auto;
  min-height: clamp(42rem, calc(100dvh - 10rem), 60rem);
}

.inbox-panel {
  display: flex;
  flex-direction: column;
}

.conversation-list {
  flex: 1 1 auto;
  min-height: 20rem;
  max-height: 54rem;
}

.detail-panel {
  grid-template-columns: minmax(24rem, 1fr) minmax(18rem, 20rem);
  grid-template-rows: auto minmax(30rem, auto) auto;
  align-content: start;
}

.detail-header,
.message-list,
.reply-form,
.lead-workspace {
  position: relative;
  min-width: 0;
}

.message-list {
  min-height: 30rem;
  max-height: 58rem;
}

.reply-form {
  align-self: stretch;
}

.lead-workspace {
  max-height: 58rem;
}

.context-pane > *,
.lead-control-grid > *,
.profile-grid > *,
.intelligence-grid > * {
  min-width: 0;
  max-width: 100%;
}

.pipeline-board {
  isolation: isolate;
}

.pipeline-column,
.pipeline-stack,
.pipeline-card {
  position: relative;
}

@media (max-width: 1400px) {
  .metrics-grid {
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
  }

  html[data-sidebar="expanded"] .detail-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(30rem, auto) auto auto;
  }

  html[data-sidebar="expanded"] .detail-header,
  html[data-sidebar="expanded"] .message-list,
  html[data-sidebar="expanded"] .reply-form,
  html[data-sidebar="expanded"] .lead-workspace {
    grid-column: 1;
  }

  html[data-sidebar="expanded"] .detail-header { grid-row: 1; }
  html[data-sidebar="expanded"] .message-list { grid-row: 2; }
  html[data-sidebar="expanded"] .reply-form { grid-row: 3; }
  html[data-sidebar="expanded"] .lead-workspace {
    grid-row: 4;
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  html[data-sidebar="expanded"] .context-pane .profile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  html[data-sidebar="expanded"] .context-pane .span-2 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1100px) {
  .detail-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(28rem, auto) auto auto;
  }

  .detail-header,
  .message-list,
  .reply-form,
  .lead-workspace {
    grid-column: 1;
  }

  .detail-header { grid-row: 1; }
  .message-list { grid-row: 2; }
  .reply-form { grid-row: 3; }
  .lead-workspace {
    grid-row: 4;
    max-height: none;
    overflow: visible;
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .today-layout,
  .system-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .focus-panel {
    display: block;
  }
}

@media (max-width: 900px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .inbox-panel,
  .detail-panel {
    min-height: 0;
  }

  .inbox-panel {
    max-height: none;
  }

  .conversation-list {
    min-height: 15rem;
    max-height: 28rem;
  }

  .message-list {
    min-height: 28rem;
    max-height: 65dvh;
  }
}

@media (max-width: 680px) {
  .metrics-grid,
  .task-metrics {
    grid-template-columns: minmax(0, 1fr);
  }

  .context-pane .profile-grid,
  html[data-sidebar="expanded"] .context-pane .profile-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .context-pane .span-2,
  html[data-sidebar="expanded"] .context-pane .span-2 {
    grid-column: auto;
  }

  .panel-header,
  .form-footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}


/* Focused inbox and separate customer workspace (2026-09-23) */
body:has(#viewInbox:not([hidden])) {
  overflow: hidden;
}

body:has(#viewInbox:not([hidden])) .main {
  display: flex;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

body:has(#viewInbox:not([hidden])) .topbar {
  flex: 0 0 auto;
  margin: 0;
}

#viewInbox {
  flex: 1 1 auto;
  min-height: 0;
  padding: 1rem 1.25rem 1.25rem;
}

#viewInbox .metrics-grid {
  display: none;
}

#viewInbox .workspace-grid {
  height: 100%;
  min-height: 0;
  grid-template-columns: minmax(19rem, 22rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

#viewInbox .inbox-panel,
#viewInbox .detail-panel {
  height: 100%;
  min-height: 0;
  max-height: none;
}

#viewInbox .inbox-panel {
  display: flex;
  flex-direction: column;
}

#viewInbox .conversation-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  overscroll-behavior: contain;
}

#viewInbox .conversation-row {
  margin: 0;
  padding: .85rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
}

#viewInbox .conversation-row:hover {
  border-color: var(--border);
  background: #f0f8ff;
}

#viewInbox .conversation-row.is-selected {
  border-color: var(--border);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

#viewInbox .inbox-toolbar {
  padding: .75rem;
  border-bottom: 1px solid var(--border);
  background: #f7fcff;
}

#viewInbox .detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  overflow: hidden;
}

#viewInbox .detail-header,
#viewInbox .message-list,
#viewInbox .reply-form {
  grid-column: 1;
  min-width: 0;
}

#viewInbox .detail-header { grid-row: 1; }

#viewInbox .message-list {
  grid-row: 2;
  display: flex;
  min-height: 0;
  max-height: none;
  flex-direction: column;
  gap: .65rem;
  overflow-y: auto;
  padding: 1.15rem clamp(1rem, 3vw, 3rem);
  background: #f0f8ff;
  overscroll-behavior: contain;
}

#viewInbox .message-bubble {
  width: fit-content;
  max-width: min(72%, 48rem);
  margin: 0;
  padding: .72rem .9rem;
  border: 1px solid #d1e7fb;
  border-radius: 1rem 1rem 1rem .3rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

#viewInbox .message-bubble.is-outbound {
  margin-left: auto;
  border-color: var(--accent-line);
  border-radius: 1rem 1rem .3rem 1rem;
  background: var(--accent-soft);
}

#viewInbox .message-bubble.is-long {
  max-width: min(82%, 56rem);
}

#viewInbox .message-bubble p {
  margin: 0 0 .28rem;
  color: var(--text);
  font-size: .94rem;
  line-height: 1.55;
}

#viewInbox .message-bubble p:dir(rtl) {
  direction: rtl;
  text-align: right;
}

#viewInbox .message-time {
  display: block;
  font-size: .68rem;
  line-height: 1.3;
}

#viewInbox .reply-form {
  grid-row: 3;
  gap: .55rem;
  padding: .75rem 1rem .9rem;
  background: #fff;
}

#viewInbox .reply-form textarea {
  min-height: 4rem;
  max-height: 10rem;
  resize: vertical;
}

#viewInbox .detail-actions {
  flex-wrap: wrap;
}

.customer-workspace {
  display: grid;
  grid-template-columns: minmax(18rem, 21rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.customer-directory-panel {
  position: sticky;
  top: 8rem;
  max-height: calc(100dvh - 9.5rem);
  display: flex;
  flex-direction: column;
}

.customer-directory-header p:last-child {
  max-width: 16rem;
  margin: .28rem 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
}

.customer-directory {
  min-height: 14rem;
  overflow-y: auto;
}

.customer-directory-row {
  width: 100%;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .72rem;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: #fff;
  color: var(--text);
  padding: .85rem 1rem;
  text-align: left;
}

.customer-directory-row:hover,
.customer-directory-row.is-selected {
  background: var(--accent-soft);
}

.customer-directory-row.is-selected {
  box-shadow: inset 3px 0 0 var(--accent);
}

.customer-avatar {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-items: center;
  border-radius: .72rem;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-weight: 750;
}

.customer-directory-copy {
  min-width: 0;
  display: grid;
  gap: .18rem;
}

.customer-directory-copy strong,
.customer-directory-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-directory-copy small {
  color: var(--muted);
  font-size: .72rem;
}

.customer-detail-shell {
  min-width: 0;
  min-height: 38rem;
}

.customer-detail-shell .customer-empty[hidden] {
  display: none;
}

.customer-detail-shell .lead-workspace {
  position: static;
  width: 100%;
  max-height: none;
  display: block;
  overflow: visible;
  border: 0;
  background: #fff;
  padding: 0;
}

.customer-detail-shell .lead-workspace[hidden] {
  display: none;
}

.customer-detail-shell .context-panel-header {
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.customer-detail-shell .context-tabs {
  position: sticky;
  top: 6.8rem;
  z-index: 5;
  padding: .65rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}

.customer-detail-shell .context-pane {
  padding: 1.15rem 1.25rem 1.4rem;
}

.customer-detail-shell .pipeline-rail {
  grid-template-columns: repeat(3, minmax(7rem, 1fr));
  gap: .45rem;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.customer-detail-shell .pipeline-stage button {
  min-height: 4.6rem;
  border: 1px solid var(--border);
  background: #fff;
}

.customer-detail-shell .pipeline-stage.is-current button {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .10);
}

@media (max-width: 1050px) {
  body:has(#viewInbox:not([hidden])) { overflow: auto; }
  body:has(#viewInbox:not([hidden])) .main { height: auto; min-height: 100dvh; overflow: visible; }
  #viewInbox { min-height: 0; }
  #viewInbox .workspace-grid { height: auto; grid-template-columns: minmax(0, 1fr); }
  #viewInbox .inbox-panel { max-height: 26rem; }
  #viewInbox .conversation-list { min-height: 13rem; }
  #viewInbox .detail-panel { min-height: 70dvh; height: 70dvh; }
  .customer-workspace { grid-template-columns: minmax(0, 1fr); }
  .customer-directory-panel { position: static; max-height: 24rem; }
  .customer-detail-shell .pipeline-rail { grid-template-columns: repeat(3, minmax(7rem, 1fr)); }
}

@media (max-width: 680px) {
  #viewInbox { padding: .65rem; }
  #viewInbox .message-list { padding: .85rem; }
  #viewInbox .message-bubble,
  #viewInbox .message-bubble.is-long { max-width: 90%; }
  #viewInbox .detail-header { align-items: flex-start; }
  #viewInbox .detail-actions { width: 100%; }
  #viewInbox .detail-actions .button { flex: 1; }
  .customer-detail-shell .pipeline-rail { grid-template-columns: minmax(0, 1fr); }
  .customer-detail-shell .context-tabs { top: 0; overflow-x: auto; justify-content: flex-start; }
  .customer-detail-shell .context-pane { padding: .85rem; }
}


#viewInbox .reply-form textarea {
  height: 4.25rem;
  min-height: 4.25rem;
  max-height: 4.25rem;
  resize: none;
}

#viewInbox .message-list > .empty-state {
  width: 100%;
  min-height: 100%;
  flex: 1 1 auto;
}


/* Customer operations: knowledge, analytics, grounding, and identity */
.context-header-actions,
.draft-evidence > div,
.knowledge-row,
.knowledge-row-actions,
.analytics-bar-row > div {
  display: flex;
  align-items: center;
  gap: .65rem;
}

.context-header-actions { flex-wrap: wrap; justify-content: flex-end; }

/* AIBO's suggested reply: what it is based on and what to do, in plain words (no model names or scores) */
.draft-evidence {
  --draft-soft: #f5f3ff; --draft-line: #ddd6fe; --draft-ink: #6d28d9;
  display: grid; gap: .5rem; padding: .75rem .85rem;
  border: 1px solid var(--draft-line); border-radius: .9rem; background: var(--draft-soft);
  color: #334155; font-size: .82rem;
}
.draft-evidence[hidden] { display: none; }
.draft-evidence[data-level="sure"] { --draft-soft: #ecfdf5; --draft-line: #a7f3d0; --draft-ink: #047857; }
.draft-evidence[data-level="check"] { --draft-soft: #fffbeb; --draft-line: #fde68a; --draft-ink: #b45309; }
.draft-evidence[data-level="standard"] { --draft-soft: #eff6ff; --draft-line: #bfdbfe; --draft-ink: #1d4ed8; }
.draft-evidence > div { justify-content: space-between; }
.draft-evidence-header { flex-wrap: nowrap; }
.draft-evidence-icon {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: .7rem;
  background: #fff; color: var(--draft-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.draft-evidence-icon .journey-icon { width: 1.15rem; height: 1.15rem; }
.draft-evidence-copy { display: grid; flex: 1; gap: .25rem; min-width: 0; }
.draft-evidence-copy strong { color: #0f172a; font-size: .9rem; font-weight: 750; }
.draft-level {
  display: inline-flex; align-items: center; gap: .3rem; justify-self: start; padding: .15rem .6rem .15rem .45rem;
  border: 1px solid var(--draft-line); border-radius: 999px; background: #fff; color: var(--draft-ink); font-size: .74rem; font-weight: 750;
}
.draft-level .journey-icon { width: .85rem; height: .85rem; }
.draft-advice { margin: 0; line-height: 1.5; }
.draft-evidence .danger-quiet { width: auto; min-height: 2.25rem; padding-inline: .8rem; flex: none; }
.draft-evidence-more { flex-wrap: wrap; }
.draft-evidence-more:not(:has(> :not([hidden]))) { display: none; }
.draft-evidence summary {
  display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--draft-ink); font-weight: 700; cursor: pointer;
}
.draft-evidence summary::after {
  content: ""; width: .42rem; height: .42rem; margin-left: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.1rem) rotate(45deg); transition: transform .15s ease;
}
.draft-evidence details[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
@media (prefers-reduced-motion: reduce) { .draft-evidence summary::after { transition: none; } }
.draft-evidence summary:focus-visible, .draft-teach:focus-visible { outline: 3px solid var(--draft-ink); outline-offset: 2px; border-radius: .4rem; }
.draft-evidence ul { display: grid; gap: .4rem; margin: .2rem 0 .3rem; padding: 0; list-style: none; }
.draft-evidence li { display: flex; align-items: flex-start; gap: .5rem; }
.draft-evidence li .journey-icon { width: .95rem; height: .95rem; margin-top: .15rem; flex: none; color: #047857; }
.draft-evidence li span { display: grid; gap: .1rem; }
.draft-evidence li strong { color: #0f172a; font-weight: 650; }
.draft-evidence li small { color: #64748b; }
.draft-teach {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 .9rem; border: 1px solid var(--draft-line);
  border-radius: 999px; background: #fff; color: var(--draft-ink); font: inherit; font-weight: 700; cursor: pointer;
}
.draft-teach:hover { border-color: var(--draft-ink); }
.draft-teach[hidden] { display: none; }
@media (max-width: 1024px) { .draft-evidence .danger-quiet, .draft-evidence summary, .draft-teach { min-height: 44px; } }

.analytics-scope-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.analytics-scope-bar > div { display: grid; gap: .15rem; }
.analytics-scope-bar strong { color: var(--text); font-size: .9rem; }
.analytics-scope-bar span { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.analytics-scope-bar label { display: flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 650; white-space: nowrap; }
.analytics-scope-bar select { min-height: 2.75rem; border: 1px solid var(--border); border-radius: .7rem; background: #f4faff; color: var(--text); padding: .45rem .7rem; font: inherit; }
.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(9rem, 1fr));
  gap: .85rem;
  margin-bottom: 1rem;
}
.analytics-metric {
  min-width: 0;
  display: grid;
  gap: .28rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 1rem;
}
.analytics-metric span,
.analytics-metric small { color: var(--muted); font-size: .72rem; }
.analytics-metric strong { color: var(--text); font-size: 1.55rem; letter-spacing: -.04em; }
.analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pilot-check { padding: 1.1rem; margin-bottom: 1rem; }
.pilot-scope { margin: .55rem 0 0; color: var(--muted); line-height: 1.5; }
.pilot-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.pilot-metrics > div { display: grid; gap: .2rem; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: .8rem; background: #f4faff; }
.pilot-metrics strong { color: var(--text); font-size: 1.35rem; }
.pilot-metrics span { color: var(--muted); font-size: .8rem; }
.pilot-issues { margin-top: 1rem; border-top: 1px solid var(--border); }
.pilot-issues-heading { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 0; color: var(--text); }
.pilot-issues-heading span { color: var(--muted); font-size: .82rem; }
.pilot-issue-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.25rem; padding: .65rem .75rem; border: 1px solid var(--border); border-radius: .65rem; background: #fff; color: var(--text); text-align: left; cursor: pointer; margin-bottom: .45rem; }
.pilot-issue-row:hover, .pilot-issue-row:focus-visible { background: #eef7ff; border-color: var(--accent); }
.pilot-issue-name { display: grid; gap: .1rem; min-width: 10rem; }
.pilot-issue-name small { color: var(--muted); }
.pilot-issue-flags { display: flex; flex-wrap: wrap; gap: .35rem; }
.pilot-issue-flags span { padding: .24rem .48rem; border-radius: 999px; border: 1px solid #b8d9ff; background: #f0f8ff; color: #174a81; font-size: .72rem; font-weight: 650; }
.pilot-issue-open { color: var(--accent); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.pilot-clear { color: var(--muted); margin: .9rem 0 0; }
.analytics-card { padding: 1.1rem; }
.analytics-wide { grid-column: 1 / -1; }
.analytics-bars { display: grid; gap: .85rem; margin-top: 1rem; }
.analytics-bar-row { display: grid; gap: .35rem; }
.analytics-bar-row > div { justify-content: space-between; }
.analytics-bar-row strong { color: #1d4269; font-size: .8rem; text-transform: capitalize; }
.analytics-bar-row span { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.analytics-bar-row i { height: .55rem; overflow: hidden; border-radius: 999px; background: #eaf5ff; }
.analytics-bar-row b { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.analytics-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; margin-top: 1rem; }
.analytics-summary > div { display: grid; gap: .2rem; border: 1px solid var(--border); border-radius: .8rem; padding: .9rem; }
.analytics-summary strong { color: var(--text); font-size: 1.35rem; }
.analytics-summary span { color: var(--muted); font-size: .74rem; }

.knowledge-layout { display: grid; grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.knowledge-editor { padding: 1rem; position: sticky; top: 8rem; }
.knowledge-form { display: grid; gap: .8rem; margin-top: 1rem; }
.field-hint { margin: -.4rem 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.knowledge-form textarea { min-height: 16rem; resize: vertical; }
.knowledge-list { display: grid; }
.knowledge-row { min-width: 0; justify-content: space-between; border-bottom: 1px solid var(--border); padding: .9rem 1rem; }
.knowledge-row:last-child { border-bottom: 0; }
.knowledge-row-main { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .2rem .6rem; }
.knowledge-row-main strong { min-width: 0; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.knowledge-row-main small { grid-column: 2; color: var(--muted); }
.knowledge-kind,
.knowledge-status { display: inline-flex; width: fit-content; border-radius: 999px; padding: .26rem .5rem; font-size: .66rem; font-weight: 700; text-transform: capitalize; }
.knowledge-kind { grid-row: 1 / 3; background: #eaf5ff; color: #254b70; }
.knowledge-status { background: #edf7ff; color: #254b70; }
.knowledge-status.is-approved,
.knowledge-status.is-active { background: #ecfdf3; color: #067647; }
.knowledge-status.is-draft,
.knowledge-status.is-pending { background: #fff8e6; color: #9a6700; }
.knowledge-status.is-retired { background: #fff1f2; color: #b42318; }
.merge-dialog { width: min(32rem, calc(100vw - 2rem)); }

@media (max-width: 1250px) {
  .analytics-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .pilot-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pilot-issue-row { flex-wrap: wrap; }
  .knowledge-layout,
  .analytics-grid { grid-template-columns: minmax(0,1fr); }
  .knowledge-editor { position: static; }
  .analytics-wide { grid-column: auto; }
}
@media (max-width: 680px) {
  .analytics-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .knowledge-row { align-items: flex-start; flex-direction: column; }
  .knowledge-row-actions { width: 100%; justify-content: space-between; }
  .context-header-actions { width: 100%; justify-content: flex-start; }
}

/* Inbox reading surface: keep the conversation, rather than chrome, in view. */
body:has(#viewInbox:not([hidden])) .topbar { min-height: 4.5rem; padding: .65rem 1.15rem; }
body:has(#viewInbox:not([hidden])) .topbar .eyebrow,
body:has(#viewInbox:not([hidden])) .page-subtitle { display: none; }
body:has(#viewInbox:not([hidden])) .topbar h2 { font-size: 1.25rem; letter-spacing: -.02em; }
#viewInbox { padding: .65rem; }
#viewInbox .workspace-grid { grid-template-columns: minmax(18rem, 20rem) minmax(0, 1fr); gap: .65rem; }
#viewInbox[data-focus="true"] .workspace-grid { grid-template-columns: minmax(0, 1fr); }
#viewInbox[data-focus="true"] .inbox-panel { display: none; }
#viewInbox .inbox-panel,
#viewInbox .detail-panel { border-radius: .9rem; }
#viewInbox .panel-header { min-height: 4.1rem; padding: .7rem 1rem; }
#viewInbox .inbox-heading h3,
#viewInbox .detail-header h3 { font-size: 1.05rem; line-height: 1.3; }
#viewInbox .inbox-heading .eyebrow,
#viewInbox .detail-header .eyebrow { font-size: .66rem; letter-spacing: .08em; }
#viewInbox .inbox-toolbar { gap: .45rem; padding: .6rem; }
#viewInbox .inbox-tabs button,
#viewInbox .search-control input,
#viewInbox .source-control select { min-height: 2.55rem; font-size: .84rem; }
#viewInbox .conversation-row { gap: .18rem; padding: .58rem .75rem; }
#viewInbox .conversation-row .row-top { align-items: baseline; gap: .4rem; }
#viewInbox .conversation-row .row-preview { min-height: 0; -webkit-line-clamp: 1; font-size: .87rem; line-height: 1.3; }
#viewInbox .conversation-row .chat-id { min-width: 0; overflow: hidden; font-family: inherit; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
#viewInbox .conversation-row .row-time { flex: 0 0 auto; font-size: .72rem; white-space: nowrap; }
#viewInbox .conversation-row .row-bottom { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; min-width: 0; }
#viewInbox .conversation-row .row-count { color: #42688a; font-size: .72rem; white-space: nowrap; }
#viewInbox .conversation-row .row-status { color: #254b70; font-size: .72rem; font-weight: 650; }
#viewInbox .conversation-row .lead-row-meta { gap: .25rem; }
#viewInbox .conversation-row .row-footer { display: flex; align-items: center; justify-content: space-between; gap: .35rem; }
#viewInbox .conversation-row .hide-chat { display: inline-flex; align-items: center; min-height: 1.9rem; margin-left: auto; padding: .25rem .5rem; border: 1px solid #c9e0f7; border-radius: .45rem; background: #fff; color: #1d4269; font-size: .73rem; }
#viewInbox .conversation-row .hide-chat:hover { color: #b42318; }
#viewInbox .conversation-row .lead-stage-chip,
#viewInbox .conversation-row .channel-badge { font-size: .68rem; }
#viewInbox .conversation-row .channel-badge { margin-right: 0; }
#viewInbox .detail-panel { position: relative; }
#viewInbox .detail-header { display: flex; align-items: center; gap: .75rem; }
#viewInbox .thread-heading { min-width: 0; margin-right: auto; }
#viewInbox .detail-header h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#viewInbox .detail-header .status-pill { display: none; }
#viewInbox .detail-actions { margin-left: 0; gap: .4rem; }
#viewInbox .detail-actions .button { min-height: 2.5rem; padding: .5rem .8rem; font-size: .78rem; }
#viewInbox .conversation-view-controls { display: inline-flex; align-items: center; gap: .25rem; flex: 0 0 auto; }
#viewInbox #backToInbox { display: none; }
#viewInbox .thread-control { min-height: 2.5rem; padding: .5rem .7rem; border: 1px solid #c9e0f7; border-radius: .6rem; background: #fff; color: #1d4269; font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; }
#viewInbox .thread-control[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); }
#viewInbox .thread-control:focus-visible,
#viewInbox .jump-to-latest:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
#viewInbox .message-list { gap: .3rem; padding: 1rem clamp(.9rem, 3vw, 2.5rem); background: #f3faff; scroll-behavior: auto; }
@media (min-width: 1450px) {
  #viewInbox .message-list { padding-inline: max(1.5rem, calc((100% - 64rem) / 2)); }
}
#viewInbox[data-focus="true"] .message-list { padding-inline: max(1rem, calc((100% - 56rem) / 2)); }
#viewInbox .message-day { align-self: center; margin: .2rem 0 .55rem; padding: .25rem .65rem; border-radius: 999px; background: #e6f3ff; color: #254b70; font-size: .72rem; font-weight: 650; }
#viewInbox .message-bubble,
#viewInbox .message-bubble.is-long { max-width: min(82%, 52rem); padding: .7rem 1rem; border-color: #d4e9fb; box-shadow: 0 1px 3px rgba(16,24,40,.04); }
#viewInbox .message-bubble.is-text { padding: .4rem .72rem; }
#viewInbox .message-bubble.is-media { width: min(19rem, 82%); padding: .45rem .55rem; }
#viewInbox .message-bubble.is-audio { width: min(15.5rem, 82%); padding: .35rem .5rem .25rem; }
#viewInbox .message-bubble.is-audio .audio-card { gap: .2rem; padding: 0; border: 0; border-radius: 0; background: transparent; }
#viewInbox .message-bubble.is-audio .message-time { margin-top: .06rem; }
#viewInbox .compact-audio-player { display:flex; align-items:center; gap:.25rem; min-width:0; height:2.1rem; }
#viewInbox .compact-audio-player audio { display:none !important; }
#viewInbox .compact-audio-player .audio-toggle { display:grid; place-items:center; flex:none; width:2rem; height:2rem; padding:0; border:0; border-radius:50%; background:#fff; color:#164a85; cursor:pointer; }
#viewInbox .compact-audio-player .audio-toggle svg { width:1.05rem; height:1.05rem; }
#viewInbox .compact-audio-player .audio-toggle:focus-visible,
#viewInbox .compact-audio-player .audio-seek:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
#viewInbox .compact-audio-player span { flex:none; font-size:.7rem; font-variant-numeric:tabular-nums; color:#315878; }
#viewInbox .compact-audio-player .audio-seek { flex:1 1 auto; min-width:2.5rem; height:1.5rem; margin:0; accent-color:#2563eb; cursor:pointer; }
#viewInbox .message-bubble.is-media .media-card,
#viewInbox .message-bubble.is-media .attachment-card { width: 100%; box-shadow: none; }
#viewInbox .message-bubble.is-media .photo-card img { max-height: 17rem; object-fit: contain; }
#viewInbox .message-bubble.is-media .video-card video { max-height: 17rem; }
#viewInbox .message-bubble.is-continuation { margin-top: -.1rem; }
#viewInbox .message-bubble { border-color:#b8e8d7; background:#effcf6; }
#viewInbox .message-bubble.is-outbound { border-color: #b9d0ff; background: #eaf1ff; }
#viewInbox .message-sender { display: block; margin-bottom: .12rem; color: #31528b; font-size: .72rem; font-weight: 750; }
#viewInbox .message-bubble.is-outbound .message-sender { color: #1746a2; }
#viewInbox .message-bubble p { margin-bottom: .15rem; font-size: 1.05rem; line-height: 1.45; }
#viewInbox[data-large-text="true"] .message-bubble p { font-size: 1.18rem; line-height: 1.65; }
#viewInbox .message-time { color: #42688a; font-size: .72rem; line-height: 1.2; text-align: right; }
#viewInbox .history-pagination { position: static; margin: .2rem 0 .7rem; }
#viewInbox .history-load-button { min-height: 2.5rem; color: #1d4269; }
#viewInbox .jump-to-latest { position: absolute; z-index: 4; right: 1.5rem; bottom: 9.7rem; min-height: 2.5rem; padding: .5rem .85rem; border: 1px solid #bddcf5; border-radius: 999px; background: #fff; color: #1d4ed8; box-shadow: 0 4px 16px rgba(15,23,42,.12); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
#viewInbox .jump-to-latest[hidden] { display: none; }
#viewInbox .reply-form { gap: .45rem; padding: .6rem .85rem .75rem; }
#viewInbox .reply-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
#viewInbox .reply-heading label { margin: 0; font-size: .85rem; }
#viewInbox .reply-heading span { color: #42688a; font-size: .72rem; }
#viewInbox .reply-form textarea { height: 3.7rem; min-height: 3.7rem; max-height: 8rem; padding: .7rem .85rem; resize: vertical; font-size: .92rem; line-height: 1.5; }
#viewInbox .form-footer { gap: .5rem; }
#viewInbox .form-footer p { display: none; }
#viewInbox .reply-form[data-closed="true"] .form-footer p { display: block; font-size: .78rem; }
#viewInbox .form-actions .button { min-height: 2.45rem; padding: .48rem .8rem; font-size: .8rem; }
@media (max-width: 1050px) {
  #viewInbox .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  #viewInbox[data-chat-selected="false"] .detail-panel,
  #viewInbox:not([data-chat-selected]) .detail-panel { display: none; }
  #viewInbox[data-chat-selected="true"] .inbox-panel { display: none; }
  #viewInbox .inbox-panel,
  #viewInbox .detail-panel { min-height: calc(100dvh - 5.5rem); height: calc(100dvh - 5.5rem); max-height: none; }
  #viewInbox #backToInbox { display: inline-flex; align-items: center; }
}
@media (max-width: 680px) {
  #viewInbox .conversation-row .hide-chat { min-height: 2.5rem; }
  #viewInbox .detail-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: .4rem; }
  #viewInbox .thread-heading { grid-column: 1; }
  #viewInbox .conversation-view-controls { grid-column: 2; }
  #viewInbox #focusConversation { display: none; }
  #viewInbox .detail-actions { grid-column: 1 / -1; display: flex; width: 100%; flex-wrap: nowrap; justify-content: flex-end; }
  #viewInbox .detail-actions .button { width: auto; flex: 0 0 auto; }
  #viewInbox .message-bubble,
  #viewInbox .message-bubble.is-long { max-width: 94%; }
  #viewInbox .reply-heading span { display: none; }
  #viewInbox .form-actions { width: 100%; }
}

/* Task-based navigation, with persistent expandable groups. */
.nav-list { gap: .55rem; }
.nav-group { display: grid; min-width: 0; gap: .15rem; }
.nav-group-toggle {
  display: flex; width: 100%; min-height: 2rem; align-items: center; justify-content: space-between;
  border: 0; border-radius: .5rem; background: transparent; color: #42688a;
  padding: .4rem .65rem; font: inherit; font-size: .65rem; font-weight: 750;
  letter-spacing: .095em; text-align: left; text-transform: uppercase; cursor: pointer;
}
.nav-group-toggle:hover { background: #ebf6ff; color: #1d4269; }
.nav-group-toggle:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nav-group-toggle svg { width: .85rem; height: .85rem; flex: 0 0 auto; transition: transform .18s ease; }
.nav-group.is-collapsed .nav-group-toggle svg { transform: rotate(-90deg); }
.nav-group:has(.nav-item.active) .nav-group-toggle { color: var(--accent-ink); }
.nav-group-items { display: grid; gap: .1rem; min-width: 0; }
.nav-group.is-collapsed .nav-group-items { display: none; }
.nav-group-items .nav-subitem { min-height: 2.25rem; margin-left: .7rem; padding-left: .7rem; border-left: 1px solid #cfe4fa; border-radius: .45rem; }
.nav-group-items .nav-subitem.is-filter-active { border-left-color: var(--accent); }
/* Data > Extractor: a non-clickable label with FB/IG indented beneath it. Unlike plain sub-items these
   stay reachable (as icons) when the sidebar is icon-only or on a phone. */
.nav-subhead { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 .1rem; padding: .1rem .55rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #64748b; }
.nav-subhead .nav-icon { display: inline-flex; flex: 0 0 auto; }
.nav-subhead svg { width: 1rem; height: 1rem; color: #1d4269; }
.nav-group-items .nav-grouped { margin-left: .7rem; padding-left: .7rem; border-left: 1px solid #cfe4fa; border-radius: .45rem; }
.nav-group-items .nav-grouped.active { border-left-color: var(--accent); }
html[data-sidebar="collapsed"] .nav-subhead { display: none; }
html[data-sidebar="collapsed"] .nav-group-items .nav-grouped { margin-left: 0; padding-left: .55rem; border-left: 0; }
@media (max-width: 1200px) {
  .nav-subhead { display: none; }
  .nav-group-items .nav-grouped { margin-left: 0; padding-left: .55rem; border-left: 0; }
}
html[data-sidebar="collapsed"] .nav-group-toggle { display: none; }
html[data-sidebar="collapsed"] .nav-group-items,
html[data-sidebar="collapsed"] .nav-group.is-collapsed .nav-group-items { display: grid; }
html[data-sidebar="collapsed"] .nav-group-items .nav-subitem { display: none; }
@media (max-width: 680px) {
  .nav-list { min-width: 0; overflow-x: auto; justify-content: flex-start; scrollbar-width: thin; }
  .nav-group { display: block; flex: 0 0 auto; }
  .nav-group-toggle { display: none; }
  .nav-group-items,
  .nav-group.is-collapsed .nav-group-items { display: flex; gap: .2rem; }
  .nav-group-items .nav-subitem { display: none; }
  .nav-group-items .nav-item { flex: 0 0 auto; }
}

/* Keep workspace controls in the navigation rail so the inbox uses the full height. */
.sidebar-utilities {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .4rem .35rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: #f0f8ff;
}
.sidebar-utilities .button {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  min-height: 2.4rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border-radius: .55rem;
}
.sidebar-utilities .button svg { width: 1rem; height: 1rem; }
.sidebar-utilities .status-pill { min-width: 3.5rem; justify-content: center; padding: .45rem .5rem; font-size: .72rem; }
.sidebar-utilities .button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body:has(#viewInbox:not([hidden])) .topbar { display: none; }
body:has(#viewInbox:not([hidden])) .main { height: calc(100dvh - 28px); }
#viewInbox { padding: .5rem; }
#viewInbox .workspace-grid { gap: .5rem; }
html[data-sidebar="collapsed"] .sidebar-utilities {
  flex-direction: column;
  padding: .35rem .2rem;
}
html[data-sidebar="collapsed"] .sidebar-utilities .status-pill {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  min-width: 0;
  place-items: center;
  padding: 0;
  overflow: hidden;
  font-size: 0;
}
html[data-sidebar="collapsed"] .sidebar-utilities .status-pill::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: currentColor;
}
@media (max-width: 1120px) {
  body:has(#viewInbox:not([hidden])) .main { height: 100dvh; }
}
@media (min-width: 681px) and (max-width: 1050px) {
  body:has(#viewInbox:not([hidden])) { overflow: hidden; }
  body:has(#viewInbox:not([hidden])) .main { overflow: hidden; }
  #viewInbox .inbox-panel,
  #viewInbox .detail-panel { height: 100%; min-height: 0; }
}
@media (max-width: 680px) {
  .sidebar-utilities { order: 2; flex-direction: row; flex-wrap: nowrap; width: auto; padding: .15rem; gap: .15rem; border: 0; background: transparent; }
  .sidebar-utilities .button { display: grid; width: 2.25rem; height: 2.25rem; min-height: 2.25rem; }
  .sidebar-utilities .status-pill { display: grid; width: 2.25rem; height: 2.25rem; min-width: 0; place-items: center; padding: 0; overflow: hidden; font-size: 0; }
  .sidebar-utilities .status-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
  .nav-list { order: 1; flex: 1 1 auto; width: auto; min-width: 0; }
  #viewInbox { padding: .4rem; }
  #viewInbox .inbox-panel,
  #viewInbox .detail-panel { min-height: calc(100dvh - 5.6rem); height: calc(100dvh - 5.6rem); }
}

/* Compact account identity at the foot of the navigation rail. */
.sidebar-card {
  min-height: 0;
  margin-top: auto;
  padding: .65rem .35rem .15rem;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sidebar-card .operator-row { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) .55rem; gap: .55rem; align-items: center; }
.sidebar-card .operator-avatar {
  display: grid; width: 2.1rem; height: 2.1rem; margin: 0; place-items: center;
  border-radius: .6rem; font-size: .72rem; line-height: 1;
}
.sidebar-card .operator-copy { display: grid; min-width: 0; gap: .05rem; }
.sidebar-card .operator-copy strong { overflow: hidden; font-size: .83rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-card .operator-copy small { overflow: hidden; margin: 0; color: #42688a; font-size: .69rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-card .operator-presence { display: grid; width: .55rem; height: .55rem; margin: 0; place-items: center; }
.sidebar-card .operator-presence .live-dot { display: block; width: .48rem; height: .48rem; margin: 0; }

/* The application scrolls; the desktop navigation stays in the viewport. */
@media (min-width: 681px) {
  .shell { overflow: clip; }
  .sidebar { align-self: start; top: 14px; }
}
@media (min-width: 681px) and (max-width: 1120px) {
  .sidebar { top: 0; height: 100dvh; }
}
.nav-group-label {
  margin: 0;
  padding: .4rem .65rem;
  color: #42688a;
  font-size: .65rem;
  font-weight: 750;
  letter-spacing: .095em;
  text-transform: uppercase;
}
html[data-sidebar="collapsed"] .nav-group-label { display: none; }
@media (max-width: 680px) { .nav-group-label { display: none; } }

/* Every stage is visible in the overview; the detailed board remains scrollable. */
#viewPipeline:not([hidden]) { display: grid; gap: .85rem; }
.pipeline-daily { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.pipeline-daily-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .15rem .6rem;
  min-width: 0; min-height: 5.2rem; padding: .8rem 1rem; border: 1px solid var(--border);
  border-radius: .85rem; background: #fff; color: var(--text); text-align: left; cursor: pointer;
}
.pipeline-daily-card:hover { border-color: var(--accent-line); background: #fbfdff; }
.pipeline-daily-card.is-active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.pipeline-daily-card span { font-size: .8rem; font-weight: 700; }
.pipeline-daily-card strong { grid-column: 2; grid-row: 1 / 3; font-size: 1.5rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pipeline-daily-card small { color: #42688a; font-size: .72rem; line-height: 1.35; }
.pipeline-daily-card:focus-visible,
.pipeline-overview-step:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.pipeline-overview-shell { padding: .9rem 1rem 1rem; }
.pipeline-overview-heading { display: flex; align-items: end; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; }
.pipeline-overview-heading .eyebrow { margin-bottom: .1rem; }
.pipeline-overview-heading h4 { margin: 0; font-size: 1rem; }
.pipeline-overview-heading > span { color: #42688a; font-size: .72rem; }
.pipeline-overview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; }
.pipeline-overview-step {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: .15rem .4rem;
  min-width: 0; min-height: 3.8rem; padding: .55rem .65rem; border: 1px solid #d4e8fa;
  border-radius: .6rem; background: #f0f8ff; color: var(--text); text-align: left; cursor: pointer;
}
.pipeline-overview-step:hover { border-color: var(--accent); background: var(--accent-soft); }
.pipeline-overview-step.is-exit { background: #fff9f8; }
.pipeline-step-number { grid-column: 1; color: #42688a; font-size: .62rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.pipeline-overview-step strong { grid-column: 1; overflow: hidden; font-size: .76rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.pipeline-step-count { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 1.55rem; padding: .25rem .35rem; border-radius: .4rem; background: #e1f0ff; color: #1d4269; font-size: .72rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.pipeline-board-heading { display: flex; justify-content: space-between; gap: .6rem; padding: 0 .15rem; color: #42688a; font-size: .72rem; }
.pipeline-board-heading strong { color: var(--text); }
.pipeline-column { min-height: 28rem; scroll-margin-inline: .5rem; }
.pipeline-tags .is-today { background: var(--accent-soft); color: var(--accent-ink); }
@media (max-width: 900px) {
  .pipeline-overview { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  #viewPipeline .view-toolbar .toolbar-controls { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  #viewPipeline .view-toolbar .toolbar-controls > * { min-width: 0; width: 100%; }
  .pipeline-daily { grid-template-columns: minmax(0, 1fr); }
  .pipeline-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline-overview-heading { align-items: start; flex-direction: column; }
  .pipeline-board-heading { flex-direction: column; }
}

/* Desktop app frame: navigation stays put while only the active workspace scrolls. */
@media (min-width: 681px) {
  html, body { height: 100%; overflow: hidden; }
  .shell { height: calc(100dvh - 28px); min-height: 0; overflow: hidden; }
  .sidebar { position: relative; top: auto; align-self: stretch; height: 100%; min-height: 0; overscroll-behavior: contain; }
  .main { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  body:has(#viewInbox:not([hidden])) .main { height: 100%; }
}
@media (min-width: 681px) and (max-width: 1120px) {
  .shell { height: 100dvh; }
}

/* Clear blue-and-white workspace palette and a visible navigation hierarchy. */
:root,
html[data-accent="blue"] {
  --bg: #eaf6ff;
  --surface-2: #f5fbff;
  --surface-3: #e8f5ff;
  --text: #102b49;
  --muted: #42688a;
  --soft: #1d4269;
  --border: #cde5fb;
  --shadow: 0 1px 2px rgba(22, 95, 165, .05), 0 12px 32px rgba(22, 95, 165, .08);
  --shadow-float: 0 18px 50px rgba(22, 95, 165, .12);
}
body { background: linear-gradient(135deg, #e8f5ff 0%, #f6fcff 55%, #eaf9f6 100%); }
.shell { border-color: #c5e1f8; background: #f5fbff; }
.sidebar { background: #fff; border-right-color: #cde5fb; }
.main { background: #f3faff; }
.topbar { background: rgba(255, 255, 255, .97); border-bottom-color: #cde5fb; }
.sidebar-utilities { background: #eef8ff; border-color: #cde5fb; }
.focus-rule, .pipeline-column, .pipeline-overview-step { background: #f0f9ff; }
.nav-count, .pipeline-step-count { background: #e1f0ff; color: #1c4d78; }
.sidebar-card { border-top-color: #cde5fb; }
.sidebar, .main, .conversation-list, .message-list, .pipeline-board { scrollbar-color: #91c3ec #eaf6ff; }

.nav-list { gap: .7rem; }
.nav-group { gap: .25rem; }
.nav-group-toggle, .nav-group-label {
  display: flex; align-items: center; min-height: 2.45rem; padding: .55rem .75rem;
  border: 1px solid #c7e2f9; border-radius: .7rem;
  background: #eaf6ff; color: #1e5688; font-size: .69rem;
  font-weight: 750; letter-spacing: .075em;
}
.nav-group-toggle { justify-content: space-between; }
.nav-group-toggle:hover { background: #dcf0ff; border-color: #acd5f7; color: #174a78; }
.nav-group:has(.nav-item.active) .nav-group-toggle { background: #dfefff; border-color: #a9d0fb; color: var(--accent-ink); }
.nav-group-items { gap: .1rem; }
.nav-group-items .nav-item {
  min-height: 2.65rem; margin-left: .65rem; padding: .55rem .7rem;
  border: 0; border-left: 2px solid #cee5f9; border-radius: 0 .58rem .58rem 0;
  background: transparent; color: #254b70;
}
.nav-group-items .nav-item:hover { border-left-color: #8cc2f5; background: #eff8ff; color: #174a78; }
.nav-group-items .nav-item.active {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  color: var(--accent-ink); font-weight: 700; box-shadow: none;
}
.nav-group-items .nav-subitem {
  min-height: 2.25rem; margin-left: 1.45rem; padding-left: .65rem;
  border-left: 1px dashed #9bc8ed; border-radius: 0 .4rem .4rem 0;
  font-size: .82rem;
}
.nav-group-items .nav-subitem.is-filter-active { border-left: 2px solid var(--accent); background: #eff8ff; }
html[data-sidebar="collapsed"] .nav-group-items .nav-item { margin-left: 0; padding-inline: .55rem; border-left: 0; border-radius: .65rem; }
html[data-sidebar="collapsed"] .nav-group-label { display: none; }
@media (max-width: 680px) {
  .analytics-scope-bar { align-items: stretch; flex-direction: column; }
  .analytics-scope-bar label { justify-content: space-between; }
  .nav-group-toggle, .nav-group-label { display: none; }
  .nav-group-items .nav-item { margin-left: 0; border-left: 0; border-radius: .65rem; }
  .nav-group-items .nav-item.active { border-left: 0; box-shadow: inset 0 -3px 0 var(--accent); }
}

/* Lead explorer: table-first CRM with clear hierarchy and compact records. */
#viewCustomers { padding: 1.1rem; }
body:has(#viewCustomers:not([hidden])) .topbar { display: none; }
.crm-dashboard { display: grid; gap: 1rem; min-width: 0; }
.crm-dashboard > * { min-width: 0; }
.crm-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.crm-summary-card { display: grid; gap: .18rem; min-width: 0; padding: .9rem 1rem; border: 1px solid #c9e2fb; border-radius: .85rem; background: #fff; }
.crm-summary-card span { color: #315c82; font-size: .73rem; font-weight: 700; }
.crm-summary-card strong { color: #102b49; font-size: 1.65rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
.crm-summary-card small { color: #42688a; font-size: .69rem; line-height: 1.35; }
.crm-explorer, .crm-results, .customer-detail-shell { overflow: hidden; border-radius: .9rem; background: #fff; }
.crm-explorer-heading, .crm-results-heading, .crm-detail-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; }
.crm-explorer-heading { border-bottom: 1px solid #d9eafb; }
.crm-explorer-heading h3, .crm-results-heading h3 { margin: .1rem 0; font-size: 1.12rem; }
.crm-explorer-heading p:last-child { margin: .2rem 0 0; color: #42688a; font-size: .76rem; }
.crm-filter-bar { display: grid; grid-template-columns: minmax(13rem, 2fr) repeat(3, minmax(9rem, 1fr)); gap: .65rem; padding: .9rem 1.1rem .45rem; }
.crm-filter-bar label, .crm-saved-bar label, .crm-results-heading label, .crm-rule-heading label { display: grid; gap: .28rem; min-width: 0; color: #315c82; font-size: .7rem; font-weight: 700; }
.crm-filter-bar input, .crm-filter-bar select, .crm-saved-bar input, .crm-saved-bar select, .crm-results-heading select, .crm-rule select, .crm-rule input, .crm-rule-heading select, .crm-custom-field-row input { width: 100%; min-width: 0; height: 2.45rem; padding: .45rem .65rem; border: 1px solid #bddbf7; border-radius: .55rem; background: #fff; color: #102b49; font: inherit; font-size: .78rem; }
.crm-filter-bar input:focus, .crm-filter-bar select:focus, .crm-saved-bar input:focus, .crm-saved-bar select:focus, .crm-rule input:focus, .crm-rule select:focus { outline: 2px solid #81b8ff; outline-offset: 1px; }
.crm-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: .35rem 1.1rem .9rem; }
.crm-active-count { margin-left: auto; color: #315c82; font-size: .73rem; font-weight: 650; }
.crm-advanced-panel { padding: .9rem 1.1rem; border-top: 1px solid #d9eafb; background: #f5fbff; }
.crm-advanced-panel[hidden], .customer-detail-shell[hidden], .crm-empty[hidden] { display: none; }
.crm-rule-heading { display: flex; align-items: end; justify-content: space-between; gap: .8rem; margin-bottom: .65rem; }
.crm-rule-heading > div { display: grid; gap: .2rem; }
.crm-rule-heading strong { font-size: .8rem; }
.crm-rule-heading span, .crm-rule-empty { color: #42688a; font-size: .72rem; }
.crm-rule-heading label { min-width: 8rem; }
.crm-rule-list { display: grid; gap: .5rem; margin-bottom: .65rem; }
.crm-rule { display: grid; grid-template-columns: minmax(10rem, 1.5fr) minmax(8rem, 1fr) minmax(10rem, 1.5fr) auto; align-items: center; gap: .5rem; }
.crm-rule > button, .crm-custom-field-row > button { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid #bddbf7; border-radius: .55rem; background: #fff; color: #a73238; cursor: pointer; }
.crm-no-value { color: #42688a; font-size: .7rem; }
.crm-saved-bar { display: grid; grid-template-columns: minmax(10rem, 1.3fr) minmax(10rem, 1.3fr) auto auto auto; align-items: end; gap: .5rem; padding: .7rem 1.1rem .9rem; border-top: 1px solid #d9eafb; }
.crm-saved-bar small { align-self: center; color: #42688a; font-size: .67rem; }
.crm-results-heading { border-bottom: 1px solid #d9eafb; }
.crm-results-heading > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; }
.crm-results-heading .eyebrow { flex-basis: 100%; margin: 0; }
#crmResultCount { color: #42688a; font-size: .73rem; }
.crm-results-heading label { min-width: 11rem; }
.crm-table-wrap { width: 100%; overflow-x: auto; }
.crm-table { width: 100%; min-width: 65rem; border-collapse: collapse; table-layout: fixed; }
.crm-table th { padding: .65rem .75rem; border-bottom: 1px solid #cde5fb; background: #eff8ff; color: #315c82; font-size: .68rem; font-weight: 750; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.crm-table td { padding: .66rem .75rem; border-bottom: 1px solid #e1effc; color: #234768; font-size: .75rem; vertical-align: middle; }
.crm-table tbody tr:hover, .crm-table tbody tr.is-selected { background: #f2f9ff; }
.crm-table [hidden] { display: none !important; }
.crm-result-controls { display: flex; align-items: end; gap: .65rem; flex-wrap: wrap; }
.crm-columns-menu { position: relative; z-index: 4; }
.crm-columns-menu > summary { display: flex; align-items: center; min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid #bddbf7; border-radius: .55rem; color: #164a79; background: #fff; font-weight: 700; cursor: pointer; list-style: none; }
.crm-columns-menu > summary:hover { background: #f2f9ff; }
.crm-columns-options { position: absolute; top: calc(100% + .35rem); right: 0; display: grid; gap: .15rem; min-width: 12rem; padding: .5rem; border: 1px solid #bddbf7; border-radius: .6rem; background: #fff; box-shadow: 0 .6rem 1.4rem #153f631c; }
.crm-columns-options label { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; color: #153e67; font-size: .75rem; cursor: pointer; }
.crm-columns-options input { width: 1rem; height: 1rem; accent-color: #245de2; }
.crm-table th:nth-child(1) { width: 18%; }.crm-table th:nth-child(2) { width: 12%; }.crm-table th:nth-child(3) { width: 11%; }.crm-table th:nth-child(4) { width: 10%; }.crm-table th:nth-child(5) { width: 18%; }.crm-table th:nth-child(6) { width: 15%; }.crm-table th:nth-child(7) { width: 16%; }
.crm-lead-link { display: flex; align-items: center; gap: .55rem; width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; color: #102b49; text-align: left; cursor: pointer; }
.crm-lead-link .customer-avatar { flex: 0 0 2rem; width: 2rem; height: 2rem; font-size: .75rem; }
.crm-lead-link > span:last-child { display: grid; min-width: 0; gap: .1rem; }
.crm-lead-link strong, .crm-lead-link small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-lead-link strong { font-size: .78rem; }.crm-lead-link small { color: #42688a; font-size: .67rem; }
.crm-stage-badge, .crm-status-badge { display: inline-flex; align-items: center; max-width: 100%; padding: .28rem .48rem; border: 1px solid var(--stage-line, #bbd8f5); border-radius: .4rem; background: var(--stage-bg, #eff8ff); color: var(--stage-ink, #1b5688); font-size: .69rem; font-weight: 750; line-height: 1.2; white-space: normal; }
.crm-status-badge[data-status="open"] { --stage-bg: #e6f9f0; --stage-line: #9ddfc3; --stage-ink: #096642; }
.crm-status-badge[data-status="closed"] { --stage-bg: #edf1ff; --stage-line: #bac9f5; --stage-ink: #34469b; }
.crm-outcome, .crm-activity { display: block; margin-top: .2rem; color: #42688a; font-size: .66rem; line-height: 1.35; }
.crm-outcome[data-outcome] { color: var(--outcome-ink); font-weight: 700; }
.crm-outcome[data-outcome="not_interested"] { --outcome-ink: #9d4a30; }
.crm-outcome[data-outcome="lost_interest"] { --outcome-ink: #995b18; }
.crm-outcome[data-outcome="no_answer"] { --outcome-ink: #556b9e; }
.crm-outcome[data-outcome="unqualified"] { --outcome-ink: #8b4678; }
.crm-outcome[data-outcome="invalid_contact"] { --outcome-ink: #a63842; }
.crm-outcome[data-outcome="duplicate"] { --outcome-ink: #4758a0; }
.crm-outcome[data-outcome="other"] { --outcome-ink: #526b82; }
.crm-score { color: #153e67; font-size: .82rem; font-variant-numeric: tabular-nums; }.crm-score small { color: #42688a; font-size: .64rem; }
.crm-next { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.crm-next.is-due { color: #a34213; font-weight: 700; }
.crm-row-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
.crm-row-action { padding: .32rem .4rem; border: 1px solid #bddbf7; border-radius: .4rem; background: #fff; color: #1d568c; font: inherit; font-size: .66rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.crm-row-action:hover { border-color: #6caef6; background: #eaf6ff; }
.crm-empty { padding: 2rem; color: #315c82; text-align: center; }
.crm-pagination { display: flex; justify-content: space-between; align-items: center; gap: .7rem; padding: .7rem 1rem; color: #315c82; font-size: .7rem; }
.crm-pagination > div { display: flex; gap: .4rem; }
.crm-detail-bar { padding: .7rem 1.1rem; border-bottom: 1px solid #d9eafb; background: #f5fbff; font-size: .82rem; }
.crm-custom-field-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: .5rem; margin: .5rem 0; }
.crm-custom-field-row label { display: grid; gap: .25rem; min-width: 0; }
.customer-detail-shell .profile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem .9rem; }
.customer-detail-shell .profile-grid .span-2 { grid-column: 1 / -1; }
.customer-detail-shell .lead-control-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Each stage has its own light tint, border and readable ink across all views. */
[data-stage="new_lead"] { --stage-bg: #eaf4ff; --stage-line: #a8cffb; --stage-ink: #13569c; }
[data-stage="contacted"] { --stage-bg: #e4faff; --stage-line: #90daec; --stage-ink: #0b657b; }
[data-stage="engaged"] { --stage-bg: #e5faf4; --stage-line: #91dfc9; --stage-ink: #0a6c53; }
[data-stage="interested"] { --stage-bg: #f1edff; --stage-line: #c4b3f7; --stage-ink: #6345a2; }
[data-stage="qualified"] { --stage-bg: #eaeaff; --stage-line: #aeb7fa; --stage-ink: #3c4ba1; }
[data-stage="offer_sent"] { --stage-bg: #fff7df; --stage-line: #edcf75; --stage-ink: #805a05; }
[data-stage="payment_pending"] { --stage-bg: #fff0e2; --stage-line: #efbd8e; --stage-ink: #975013; }
[data-stage="payment_verification"] { --stage-bg: #fff0f7; --stage-line: #ebaed1; --stage-ink: #9b3469; }
[data-stage="won"] { --stage-bg: #e5f8e7; --stage-line: #93d7a3; --stage-ink: #166f32; }
[data-stage="lost"] { --stage-bg: #fff0ed; --stage-line: #edb1a6; --stage-ink: #a33f33; }
.lead-stage-chip[data-stage], .crm-stage-badge[data-stage] { border-color: var(--stage-line); background: var(--stage-bg); color: var(--stage-ink); }
#viewInbox .conversation-row[data-stage] { border-left: 3px solid var(--stage-ink); }
.pipeline-overview-step[data-stage] { border-color: var(--stage-line); background: var(--stage-bg); color: var(--stage-ink); }
.pipeline-overview-step[data-stage] .pipeline-step-number { color: var(--stage-ink); }
.pipeline-overview-step[data-stage] .pipeline-step-count { background: #fff; color: var(--stage-ink); }
.pipeline-column[data-stage] { border-color: var(--stage-line); background: var(--stage-bg); }
.pipeline-column[data-stage] > header { border-bottom-color: var(--stage-line); color: var(--stage-ink); }
.pipeline-column[data-stage] .pipeline-card { border-color: var(--stage-line); background: #fff; }
.pipeline-stage[data-stage].is-complete button { border-color: var(--stage-line); background: var(--stage-bg); color: var(--stage-ink); }
.customer-detail-shell .pipeline-stage[data-stage] button { border-color: var(--stage-line); background: var(--stage-bg); color: var(--stage-ink); }
.pipeline-stage[data-stage].is-current button, .customer-detail-shell .pipeline-stage[data-stage].is-current button { border-color: var(--stage-ink); background: var(--stage-ink); color: #fff; }
.pipeline-stage[data-stage].is-current .pipeline-step-number { color: #fff; opacity: .85; }
.stage-new_lead { background: #2384e7; }.stage-contacted { background: #0c9db9; }.stage-engaged { background: #13a37d; }.stage-interested { background: #8762d5; }.stage-qualified { background: #5863ca; }.stage-offer_sent { background: #bd8d1a; }.stage-payment_pending { background: #db7925; }.stage-payment_verification { background: #c75590; }.stage-won { background: #29a34f; }.stage-lost { background: #d65b4c; }
.pipeline-board { grid-auto-columns: 16.25rem; }
.pipeline-column { min-height: 24rem; }
.pipeline-column > header { padding: .7rem .75rem; }
.pipeline-stack { padding: .5rem; gap: .45rem; }
.pipeline-card { gap: .4rem; padding: .65rem .7rem; }
.pipeline-card-top strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.pipeline-preview { display: -webkit-box; min-height: 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: .71rem; line-height: 1.35; }
.pipeline-next { padding-top: .4rem; font-size: .65rem; }

@media (max-width: 1200px) {
  .customer-detail-shell .profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-detail-shell .lead-control-grid { grid-template-columns: minmax(0, 1fr); }
  .crm-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-saved-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) auto auto; }
  .crm-saved-bar small { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .crm-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-rule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .crm-rule > :nth-child(3) { grid-column: 1 / 3; grid-row: 2; }
  .crm-rule > button { grid-column: 3; grid-row: 1 / 3; }
}
@media (max-width: 560px) {
  .customer-detail-shell .profile-grid { grid-template-columns: minmax(0, 1fr); }
  .customer-detail-shell .profile-grid .span-2 { grid-column: auto; }
  #viewCustomers { padding: .65rem; }
  .crm-summary, .crm-filter-bar { grid-template-columns: minmax(0, 1fr); }
  .crm-saved-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-saved-bar label { grid-column: 1 / -1; }
  .crm-rule-heading { align-items: start; flex-direction: column; }
  .crm-results-heading { align-items: start; flex-direction: column; }
  .crm-custom-field-row { grid-template-columns: minmax(0, 1fr) auto; }
  .crm-custom-field-row label { grid-column: 1; }.crm-custom-field-row button { grid-column: 2; grid-row: 1 / 3; }
}
.test-classification { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; margin: .4rem 0 .9rem; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: .75rem; background: #f4faff; color: var(--text); cursor: pointer; }
.test-classification input { width: 1.2rem; min-width: 1.2rem; min-height: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--accent); }
.test-classification span { display: grid; gap: .1rem; }
.test-classification strong { font-size: .88rem; }
.test-classification small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.pilot-review-card { display:grid; gap:.85rem; max-width:44rem; padding:1rem; border:1px solid var(--border); border-radius:.8rem; background:#fff; }
.pilot-review-card p { margin:0; color:var(--muted); line-height:1.5; }
.pilot-review-list { display:grid; gap:.45rem; }
.pilot-review-list label { display:flex; align-items:center; gap:.75rem; min-height:3.15rem; padding:.65rem .75rem; border:1px solid var(--border); border-radius:.65rem; background:#f4faff; line-height:1.4; cursor:pointer; }
.pilot-review-list input { flex:none; width:1.15rem; height:1.15rem; accent-color:var(--accent); }
.pilot-review-notes { display:grid; gap:.35rem; font-weight:650; }
.pilot-review-notes textarea { width:100%; }
.pilot-review-card > small { color:var(--muted); line-height:1.4; }
.reply-error[hidden] { display:none !important; }
.reply-error { margin:0; padding:.45rem .65rem; border:1px solid #f1b6a7; border-radius:.45rem; background:#fff6f3; color:#8a241c; font-size:.79rem; line-height:1.4; }
.composer-attachment { display:flex; align-items:center; gap:.55rem; min-width:0; flex-wrap:wrap; }
.composer-attachment input[type="file"] { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.composer-attachment .attach-button { display:inline-flex; align-items:center; justify-content:center; cursor:pointer; min-height:2.3rem; padding:.35rem .75rem; margin:0; }
.composer-attachment:has(input:disabled) .attach-button { opacity:.48; pointer-events:none; }
.reply-file-preview { display:flex; align-items:center; gap:.45rem; min-width:0; max-width:100%; padding:.25rem .4rem .25rem .65rem; border:1px solid #b9d3ff; border-radius:.55rem; background:#f2f8ff; color:#173b69; }
.reply-file-preview[hidden] { display:none; }
.reply-file-preview strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.78rem; }
.reply-file-preview select { width:auto; min-height:2rem; font-size:.76rem; padding:.2rem .4rem; background:#fff; }
.reply-file-preview button { min-height:2rem; font-size:.76rem; }
#viewInbox .form-actions { justify-content:flex-start; gap:.5rem; }
#viewInbox .form-actions > button,
#viewInbox .form-actions .attach-button { display:inline-flex; align-items:center; justify-content:center; width:2.75rem; min-width:2.75rem; height:2.75rem; padding:0; border-radius:.65rem; flex:0 0 auto; }
#viewInbox .form-actions svg { width:1.2rem; height:1.2rem; display:block; }
#viewInbox .form-actions #sendButton { margin-left:auto; }
#viewInbox .form-actions .is-busy { opacity:.64; cursor:wait; }
#viewInbox .form-actions .composer-attachment { flex:0 0 auto; }
#viewInbox .form-actions .attach-button { border:1px solid #bad2f5; background:#fff; color:#1746a2; }
#viewInbox .form-actions .attach-button:hover { background:#eef6ff; }
#viewInbox .form-actions .attach-button:focus-within,
#viewInbox .form-actions .composer-action:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
#viewInbox .form-actions .composer-action { min-height:2.75rem; background:#fff; border-color:#bad2f5; color:#1746a2; }
#viewInbox .form-actions .composer-action.is-recording { border-color:#dc6154; background:#fff1ee; color:#9e241d; }
.voice-recording-timer { color:#9e241d; font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; }
.voice-recording-timer[hidden] { display:none; }
#viewInbox .reply-file-preview { width:fit-content; }
#viewInbox .reply-file-preview:has(.voice-preview-player) { gap:.7rem; padding:.45rem .6rem; }
#viewInbox .reply-file-preview .voice-preview-player { display:flex; align-items:center; gap:.45rem; }
#viewInbox .reply-file-preview .voice-preview-player audio { display:none; }
#viewInbox .reply-file-preview .voice-preview-player span { font-size:.78rem; color:#315b86; font-variant-numeric:tabular-nums; }
#viewInbox .reply-file-preview .voice-preview-play { min-height:2.25rem; padding:.3rem .7rem; border:1px solid #9fc2fa; border-radius:.45rem; background:#fff; color:#1746a2; font-size:.78rem; font-weight:700; cursor:pointer; }
#viewInbox .reply-file-preview .voice-preview-play:hover { background:#eaf3ff; }
#viewInbox .reply-file-preview .voice-preview-play:focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
@media (max-width:680px) {
  #viewInbox .form-actions { display:flex; flex-wrap:wrap; }
  #viewInbox .reply-file-preview { width:100%; flex-wrap:wrap; }
}
.platform-inventory { margin-bottom: 1rem; padding: 1.3rem; background: #fff; }
.platform-intro { margin: .35rem 0 0; color: #315b86; line-height: 1.5; }
.platform-inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.15rem; }
.platform-inventory-grid h4 { margin: 0 0 .6rem; color: #10345c; font-size: .9rem; }
.platform-rows { display: grid; gap: .55rem; }
.platform-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-width: 0; padding: .85rem 1rem; border: 1px solid #c9dfff; border-radius: .7rem; background: #f6fbff; }
.platform-row-card { align-items: flex-start; border-radius: 1rem; background: linear-gradient(135deg, #ffffff 0%, #eef8ff 100%); box-shadow: 0 12px 28px rgba(30, 105, 190, .08); }
.channel-row-card { border-left: 4px solid #2d6cdf; background: #fff; }
.channel-row-card[data-channel-type="instagram"] { border-left-color: #c13584; }
.channel-row-card[data-channel-type="facebook_messenger"] { border-left-color: #0084ff; }
.channel-row-card[data-channel-type="whatsapp"] { border-left-color: #16a34a; }
.channel-row-card[data-channel-type="telegram"] { border-left-color: #229ed9; }
.platform-row.is-paused { opacity: .72; }
.platform-row > div { display: grid; gap: .2rem; min-width: 0; }
.platform-row strong { color: #12385f; font-size: .88rem; }
.platform-row small { color: #42678b; font-size: .76rem; overflow-wrap: anywhere; }
.platform-row .soft-badge { flex: none; }
@media (max-width: 760px) { .platform-inventory-grid { grid-template-columns: 1fr; } }
.connection-forms { border-top: 1px solid var(--border, #b9d6fb); margin-top: 24px; padding-top: 24px; }
.connection-forms-heading { max-width: 760px; margin-bottom: 20px; }
.connection-forms-heading h4 { margin: 4px 0 8px; font-size: 1.25rem; }
.connection-forms-heading p:last-child { margin: 0; line-height: 1.5; }
.connection-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.connection-form { display: grid; gap: 12px; padding: 20px; border: 1px solid #b9d6fb; border-radius: 16px; background: #fff; min-width: 0; }
.connection-form h5 { margin: 0; font-size: 1.1rem; color: #17365f; }
.connection-form > p { margin: 0; line-height: 1.5; }
.connection-form label { display: grid; gap: 6px; font-weight: 600; color: #17365f; }
.connection-form input, .connection-form select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #a9c9f4; border-radius: 10px; background: white; color: #15263e; font: inherit; }
.connection-form input:focus-visible, .connection-form select:focus-visible { outline: 3px solid #80b5ff; outline-offset: 2px; }
.connection-form .field-help { font-size: .9rem; color: #395c86; }
.connection-form-error { color: #a22020; font-weight: 600; }
.connection-form button[type="submit"] { justify-self: start; min-height: 44px; }
.connection-callback { margin-top: 18px; padding: 16px; border: 1px solid #7dc9a3; border-radius: 12px; background: #f2fff8; color: #123c2c; overflow-wrap: anywhere; }
.connection-callback p { margin: 8px 0 0; }
.credential-rotation { margin-top: 18px; border-top: 1px solid #b9d6fb; padding-top: 14px; }
.credential-rotation summary { cursor: pointer; color: #174d89; font-weight: 700; min-height: 44px; padding: 10px 0; }
.credential-rotation .connection-form-grid { margin-top: 12px; }
.connection-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.meta-discovered-accounts { margin: 16px 0; padding: 18px; border: 1px solid #a9c9f4; border-radius: 16px; background: #fff; }
.meta-discovered-accounts h4 { margin: 0 0 6px; color: #17365f; }
.meta-discovered-accounts p { margin: 0 0 12px; color: #395c86; line-height: 1.5; }
.meta-discovered-list { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; margin: 14px 0; }
.meta-discovered-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid #b9d6fb; border-radius: 10px; cursor: pointer; }
.meta-discovered-row:hover { background: #f2f8ff; }
.meta-discovered-row input { margin: 4px 0 0; accent-color: #2563eb; width: 18px; height: 18px; flex: none; }
.meta-discovered-row span { display: grid; gap: 3px; min-width: 0; }
.meta-discovered-row small { color: #395c86; overflow-wrap: anywhere; }
.meta-discovered-account{display:grid;gap:6px;padding:6px;border:1px solid #badbff;border-radius:14px;background:#f5fbff}
.meta-discovered-account .meta-discovered-row{border:0;background:white}
.meta-discovered-account .meta-discovered-row.is-instagram{margin-left:22px;border-left:4px solid #8c50d7;background:#fbf7ff}
.manual-meta-discovery{margin-top:16px;padding-top:14px;border-top:1px solid #badbff}
.manual-meta-discovery summary{color:#154f99;cursor:pointer;font-weight:650;min-height:44px;display:flex;align-items:center}
.manual-meta-discovery label{margin:12px 0}
.meta-page-id-fallback{margin-top:16px;padding:16px;border:1px solid #badbff;border-radius:12px;background:#fff}
.meta-page-id-fallback h5{margin:0 0 4px}.meta-page-id-fallback p{margin:6px 0 12px}
@media(max-width:560px){.meta-discovered-account .meta-discovered-row.is-instagram{margin-left:8px}}
@media (max-width: 850px) { .connection-form-grid { grid-template-columns: 1fr; } }
.meta-health-panel{margin:24px 0;padding:20px;border:1px solid #b9d8ff;border-radius:18px;background:#f0f8ff}.meta-health-panel h4{margin:0}.meta-health-list{display:grid;gap:10px}.meta-health-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px;background:#fff;border:1px solid #b9d8ff;border-left:4px solid #2475da;border-radius:12px}.meta-health-row[data-health=healthy]{border-left-color:#00876a}.meta-health-row[data-health=reconnect]{border-left-color:#c02b50}.meta-health-row[data-health=expiring]{border-left-color:#b36200}.health-label{display:inline-block;margin-left:12px;padding:3px 10px;border-radius:20px;background:#e4f0ff;color:#164989;font-weight:650;font-size:13px}.meta-health-row[data-health=reconnect] .health-label{background:#ffe7ed;color:#9b1738}.meta-health-row[data-health=healthy] .health-label{background:#defff3;color:#00694f}.meta-health-row p{margin:6px 0}.meta-health-row small{color:#365c85}@media(max-width:650px){.meta-health-row{align-items:flex-start;flex-direction:column}.health-label{margin:6px 0;display:table}}

/* AIBO 2026: compact operating surface, semantic color, and recognizable channel identity. */
:root,
html[data-accent="blue"] {
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-line: #bfdbfe;
  --accent-ink: #1e40af;
  --accent-rgb: 37, 99, 235;
  --bg: #edf6ff;
  --surface-2: #f8fbff;
  --text: #0f2742;
  --muted: #4c6b88;
  --border: #d5e5f5;
  --radius-lg: 14px;
  --radius-md: 12px;
  --radius-sm: 9px;
}

body { padding: 8px; background: linear-gradient(135deg, #edf7ff 0%, #f8fbff 55%, #eefaf8 100%); }
.shell { min-height: calc(100dvh - 16px); border-radius: 16px; }
.sidebar { height: calc(100dvh - 16px); gap: .8rem; padding: .85rem .7rem; }
.brand-lockup { min-height: 3rem; padding: 0 .35rem; }
.brand-mark { width: 2.55rem; height: 2.55rem; overflow: hidden; border-radius: .75rem; background: #fff; }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-copy .eyebrow { margin-bottom: .1rem; font-size: .6rem; }
.brand-copy h1 { font-size: 1.12rem; }
.nav-list { gap: .42rem; }
.nav-group-toggle, .nav-group-label { min-height: 2.15rem; padding: .42rem .62rem; border-radius: .58rem; }
.nav-group-items .nav-item { min-height: 2.35rem; padding: .46rem .62rem; font-size: .84rem; }
.sidebar-card { padding: .65rem; }
.topbar { min-height: 5rem; padding: .8rem 1.1rem; }
.view-section { padding: .85rem 1rem 1.1rem; }
.panel { border-radius: 12px; }
.panel-header { min-height: 4rem; padding: .7rem .85rem; }
.button { min-height: 2.65rem; padding: .55rem .85rem; border-radius: .62rem; font-size: .84rem; box-shadow: none; }
.button.primary, .ai-button { background: #2563eb; border-color: #2563eb; color: #fff; }
.button.primary:hover, .ai-button:hover { background: #1d4ed8; border-color: #1d4ed8; }
.button.secondary { background: #fff; border-color: #c7dcf2; color: #214c74; }
.icon-button, .sidebar-utilities .button { width: 2.65rem; min-width: 2.65rem; padding: 0; }

.platform-icon {
  display: inline-grid;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 1.55rem;
  place-items: center;
  overflow: hidden;
  border-radius: .48rem;
  color: #fff;
  vertical-align: middle;
}
.platform-icon svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.platform-icon.is-facebook_messenger { background: linear-gradient(145deg, #00a8ff, #6253f5); }
.platform-icon.is-instagram { background: linear-gradient(145deg, #7e33cc, #e72f82 58%, #ffa645); }
.platform-icon.is-whatsapp { background: #18a96b; }
.platform-icon.is-telegram { background: #229ed9; }
.platform-icon.is-website { background: linear-gradient(145deg, #0ea5e9, #6366f1); }
.platform-icon.is-website_api { background: linear-gradient(145deg, #0d9488, #0891b2); }

#viewInbox .conversation-row { padding: .5rem .65rem; }
#viewInbox .conversation-row .row-top { display: flex; align-items: center; }
#viewInbox .conversation-row .row-top > .platform-icon { width: 1.7rem; height: 1.7rem; flex-basis: 1.7rem; margin-right: .15rem; }
#viewInbox .conversation-row .channel-badge { display: inline-flex; align-items: center; gap: .28rem; }
#viewInbox .conversation-row .channel-badge .platform-icon { width: 1rem; height: 1rem; flex-basis: 1rem; border-radius: .28rem; }
#viewInbox .conversation-row .channel-badge .platform-icon svg { width: .72rem; height: .72rem; }
#viewInbox #detailMeta { display: flex; align-items: center; gap: .4rem; }
#viewInbox #detailMeta .platform-icon { width: 1.35rem; height: 1.35rem; flex-basis: 1.35rem; }
#viewInbox .message-list { background: #f5faff; }
#viewInbox .message-bubble { border-color: #b8e8d7; background: #effcf6; }
#viewInbox .message-bubble.is-outbound { border-color: #bfd3ff; background: #edf3ff; }

.platform-inventory { margin-bottom: .75rem; padding: .9rem; }
.platform-inventory-grid { gap: .75rem; margin-top: .75rem; }
.platform-rows { gap: .4rem; }
.platform-row, .platform-row-card { gap: .65rem; padding: .62rem .72rem; border-radius: .68rem; background: #fff; box-shadow: none; }
.platform-row-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.platform-row-card > .platform-icon { margin-top: .05rem; }
.platform-row strong { font-size: .82rem; }
.platform-row small { font-size: .69rem; line-height: 1.35; }
.connection-forms { margin-top: 16px; padding-top: 16px; }
.connection-forms-heading { margin-bottom: 12px; }
.connection-forms-heading h4 { font-size: 1.08rem; }
.connection-form-grid { gap: 10px; }
.connection-form { gap: 8px; padding: 12px; border-radius: 10px; }
.connection-form h5 { font-size: .92rem; }
.connection-form > p, .connection-form .field-help { font-size: .76rem; line-height: 1.4; }
.connection-form label { gap: 4px; font-size: .72rem; }
.connection-form input, .connection-form select { min-height: 42px; padding: 7px 10px; border-radius: 8px; font-size: .82rem; }
.connection-callback, .meta-discovered-accounts, .meta-page-id-fallback { padding: 12px; border-radius: 10px; }
.credential-rotation { margin-top: 10px; padding-top: 8px; }
.meta-health-panel { margin: 14px 0; padding: 12px; border-radius: 10px; }
.meta-health-list { gap: 6px; }
.meta-health-row { gap: 10px; padding: 10px; border-radius: 8px; }
.meta-health-row p { margin: 3px 0; font-size: .76rem; }

.auth-dialog { width: min(28rem, calc(100% - 2rem)); border: 0; border-radius: 16px; box-shadow: 0 24px 80px rgba(15,39,66,.22); }
.auth-dialog::backdrop { background: rgba(15,39,66,.55); backdrop-filter: blur(4px); }
.auth-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.auth-brand img { width: 3.25rem; height: 3.25rem; border: 1px solid var(--border); border-radius: .8rem; object-fit: contain; }
.auth-brand .eyebrow, .auth-brand h2 { margin: 0; }
.owner-login { width: min(33rem, calc(100% - 2rem)); }
.owner-login form { gap: 1.05rem; }
.auth-copy { max-width: 28rem; }
.auth-fields { display: grid; gap: .85rem; }
.auth-token-fallback {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fbff;
  padding: .85rem .95rem;
}
.auth-token-fallback summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 800;
  color: var(--primary);
}
.auth-token-fallback p { margin: 0 0 .75rem; font-size: .9rem; }
.auth-token-fallback label { margin-top: .45rem; }

@media (max-width: 1120px) {
  body { padding: 0; }
  .shell { min-height: 100dvh; border-radius: 0; }
  .sidebar { height: 100dvh; }
}
@media (max-width: 760px) {
  .platform-row-card { grid-template-columns: auto minmax(0, 1fr); }
  .platform-row-card > .soft-badge { grid-column: 2; justify-self: start; }
}

/* Connected accounts and settings */
#viewSystem { background: #f4f8fc; }
#viewSystem > .platform-inventory {
  width: min(1180px, 100%);
  margin: 0 auto 1rem;
  padding: 1.1rem;
  border: 1px solid #d8e5f2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(24, 67, 108, .07);
}
.accounts-heading,
.connection-forms-heading,
.subsection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.accounts-heading { margin-bottom: .8rem; }
.accounts-heading h3,
.connection-forms-heading h4,
.subsection-heading h4 { margin: .08rem 0 .2rem; color: #132f52; }
.accounts-heading h3 { font-size: 1.38rem; }
.accounts-heading p,
.connection-forms-heading p,
.subsection-heading p { margin: 0; color: #607997; font-size: .82rem; }
.account-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: .85rem;
}
.account-summary span {
  display: flex;
  align-items: baseline;
  gap: .38rem;
  min-height: 2.7rem;
  padding: .62rem .72rem;
  border: 1px solid #dbe7f4;
  border-radius: 10px;
  background: #f8fbff;
  color: #5a7390;
  font-size: .73rem;
}
.account-summary strong { color: #173b66; font-size: 1rem; }
.account-summary .summary-connected { border-color: #b8ead8; background: #f0fcf7; color: #18755b; }
.account-summary .summary-connected strong { color: #087a5a; }
.business-identity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.business-identity-card {
  overflow: hidden;
  border: 1px solid #d6e4f2;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(24, 67, 108, .045);
}
.business-identity-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-height: 3.65rem;
  padding: .72rem .8rem;
  background: linear-gradient(120deg, #f7fbff, #fff);
  border-bottom: 1px solid #e1ebf5;
}
.identity-avatar {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 10px;
  background: #e8f1ff;
  color: #1d63d8;
  font-size: .78rem;
  font-weight: 800;
}
.business-identity-header h4 { margin: 0 0 .1rem; color: #132f52; font-size: .92rem; }
.business-identity-header p { margin: 0; color: #6a819b; font-size: .7rem; }
.identity-count {
  padding: .28rem .45rem;
  border-radius: 999px;
  background: #edf4fb;
  color: #526f8f;
  font-size: .65rem;
  font-weight: 700;
  white-space: nowrap;
}
.identity-channel-list { padding: .2rem .75rem; }
.identity-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .58rem;
  min-height: 3rem;
  padding: .52rem .05rem;
  border-bottom: 1px solid #edf2f7;
}
.identity-channel:last-child { border-bottom: 0; }
.identity-channel-copy { min-width: 0; }
.identity-channel-copy strong,
.standalone-channel strong { display: block; color: #183957; font-size: .8rem; }
.identity-channel-copy small,
.standalone-channel small { display: block; margin-top: .08rem; overflow: hidden; color: #71859b; font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.identity-channel-actions { display: flex; align-items: center; gap: .32rem; }
.button.danger-quiet {
  min-height: 2rem;
  padding: .34rem .55rem;
  border-color: #f2c9c9;
  background: #fff;
  color: #ad3535;
}
.button.danger-quiet:hover {
  border-color: #e8a8a8;
  background: #fff4f4;
  color: #922727;
}
.connection-state {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  color: #087a5a;
  font-size: .67rem;
  font-weight: 750;
  white-space: nowrap;
}
.connection-state::before {
  width: .42rem;
  height: .42rem;
  border-radius: 50%;
  background: #10a87b;
  content: "";
  box-shadow: 0 0 0 3px #ddf8ef;
}
.identity-channel[data-health="reconnect"] .connection-state,
.identity-channel[data-health="expiring"] .connection-state,
.identity-channel[data-health="paused"] .connection-state,
.identity-channel[data-health="pending"] .connection-state,
.identity-channel[data-health="unavailable"] .connection-state { color: #9a5b0a; }
.identity-channel[data-health="reconnect"] .connection-state::before,
.identity-channel[data-health="expiring"] .connection-state::before,
.identity-channel[data-health="paused"] .connection-state::before,
.identity-channel[data-health="pending"] .connection-state::before,
.identity-channel[data-health="unavailable"] .connection-state::before { background: #e49a1f; box-shadow: 0 0 0 3px #fff1d6; }
.other-channel-section {
  margin-top: .85rem;
  padding-top: .8rem;
  border-top: 1px solid #e3ebf4;
}
.subsection-heading { margin-bottom: .55rem; }
.subsection-heading h4 { font-size: .9rem; }
.standalone-channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.standalone-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .58rem;
  min-height: 3.1rem;
  padding: .55rem .68rem;
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #fafcff;
}
.standalone-channel.needs-public-contact {
  border-color: #f0c36d;
  background: #fffaf0;
}
.standalone-channel-copy { min-width: 0; }
.public-contact-link {
  display: inline-block;
  max-width: 100%;
  margin-top: .1rem;
  overflow: hidden;
  color: #175cd3;
  font-size: .68rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.standalone-channel[data-health="reconnect"] .connection-state,
.standalone-channel[data-health="paused"] .connection-state { color: #9a5b0a; }
.standalone-channel[data-health="reconnect"] .connection-state::before,
.standalone-channel[data-health="paused"] .connection-state::before { background: #e49a1f; box-shadow: 0 0 0 3px #fff1d6; }
.standalone-channel[data-health="off"] { background: #f6f8fb; }
.standalone-channel[data-health="off"] .platform-icon { opacity: .6; }
.standalone-channel[data-health="off"] .connection-state,
.standalone-channel[data-health="pending"] .connection-state { color: #5f7187; }
.standalone-channel[data-health="off"] .connection-state::before,
.standalone-channel[data-health="pending"] .connection-state::before { background: #9aabbf; box-shadow: 0 0 0 3px #e9eef5; }
.standalone-channel[data-health="remote"] .connection-state { color: #175cd3; }
.standalone-channel[data-health="remote"] .connection-state::before { background: #2e7cf6; box-shadow: 0 0 0 3px #e1edff; }
.standalone-channel-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .45rem;
}
.channel-label-form {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .5rem;
  padding-top: .52rem;
  border-top: 1px solid #e5edf6;
}
.channel-label-form label {
  display: grid;
  gap: .22rem;
  min-width: 0;
  color: #4d6682;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.channel-label-form input {
  min-height: 2.35rem;
  width: 100%;
  border: 1px solid #bfd5ee;
  border-radius: 9px;
  background: #fff;
  color: #102a46;
  font: inherit;
  font-size: .76rem;
  font-weight: 650;
  outline: none;
  padding: .42rem .58rem;
}
.channel-label-form input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
.channel-label-help {
  color: #6b829b;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.channel-label-error {
  grid-column: 1 / -1;
  margin: -.15rem 0 0;
  color: #b42318;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
}
.channel-label-form:has(.channel-label-error:not([hidden])) input {
  border-color: #f04438;
  box-shadow: 0 0 0 3px rgba(240, 68, 56, .12);
}
.compliance-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .85rem;
  padding: .7rem .8rem;
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #f8fbff;
}
.compliance-strip strong { display: block; color: #173957; font-size: .78rem; }
.compliance-strip span { display: block; margin-top: .08rem; color: #71869b; font-size: .68rem; }
.compliance-strip nav { display: flex; align-items: center; gap: .35rem; }
.compliance-strip a {
  padding: .36rem .55rem;
  border-radius: 7px;
  color: #1f61bf;
  font-size: .7rem;
  font-weight: 700;
  text-decoration: none;
}
.compliance-strip a:hover { background: #eaf2ff; }
.connection-forms { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #dfe9f3; }
.connection-forms-heading { margin-bottom: .75rem; }
.connection-forms-heading h4 { font-size: 1.02rem; }
.security-note {
  display: inline-flex;
  align-items: center;
  padding: .36rem .58rem;
  border: 1px solid #c5eadc;
  border-radius: 999px;
  background: #effbf7;
  color: #11765a;
  font-size: .68rem;
  font-weight: 750;
  white-space: nowrap;
}
.connection-forms > .connection-form-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}
.connection-form-primary {
  order: -1;
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(220px, 1fr) auto;
  align-items: end;
  gap: .65rem .8rem;
  padding: .85rem;
  border-color: #bcd5f2;
  background: linear-gradient(120deg, #f5faff, #fff);
}
.connection-form-primary .connect-facebook-heading { grid-column: 1 / -1; }
.connection-form-primary > .field-help,
.connection-form-primary > .connection-form-error { grid-column: 1 / -1; }
.connect-facebook-heading { display: flex; align-items: center; gap: .65rem; }
.connect-facebook-heading h5,
.connect-facebook-heading p { margin: 0; }
.connect-facebook-heading p { margin-top: .14rem; color: #657f9b; font-size: .75rem; }
.facebook-mark {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: end center;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  font: 800 1.55rem/1 Arial, sans-serif;
}
.settings-disclosure,
.credential-rotation {
  border: 1px solid #dce7f2;
  border-radius: 10px;
  background: #fff;
}
.settings-disclosure { order: 2; }
.settings-disclosure > summary,
.credential-rotation > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: .62rem .75rem;
  color: #214563;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.settings-disclosure > summary::-webkit-details-marker,
.credential-rotation > summary::-webkit-details-marker { display: none; }
.settings-disclosure > summary::after,
.credential-rotation > summary::after { color: #6d85a0; content: "+"; font-size: 1rem; }
.settings-disclosure[open] > summary::after,
.credential-rotation[open] > summary::after { content: "–"; }
.settings-disclosure > summary small { margin-left: auto; color: #758aa0; font-size: .66rem; font-weight: 500; }
.settings-disclosure .connection-form { margin: 0 .65rem .65rem; border: 0; background: #f8fbfe; }
.advanced-setting-body { padding: 0 .75rem .75rem; }
.connection-forms > .credential-rotation { margin-top: .55rem; padding: 0; }
.connection-forms > .credential-rotation > .connection-form-grid { padding: 0 .65rem .65rem; }
.manual-meta-discovery { grid-column: 1 / -1; margin-top: .1rem; }
.meta-discovered-accounts { margin-top: .7rem; border: 1px solid #cfe0f1; background: #fff; }
.meta-discovered-account { border-radius: 9px; }
.meta-discovered-row small { color: #71869b; }

@media (max-width: 900px) {
  .business-identity-grid,
  .standalone-channel-grid { grid-template-columns: 1fr; }
  .connection-form-primary { grid-template-columns: 1fr; align-items: stretch; }
  .connection-form-primary > * { grid-column: 1; }
}
@media (max-width: 640px) {
  #viewSystem > .platform-inventory { padding: .75rem; border-radius: 12px; }
  .account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .business-identity-header { grid-template-columns: auto minmax(0, 1fr); }
  .identity-count { grid-column: 2; justify-self: start; }
  .identity-channel { grid-template-columns: auto minmax(0, 1fr) auto; }
  .identity-channel-actions { grid-column: 2 / -1; justify-self: start; }
  .channel-label-form { grid-template-columns: 1fr; }
  .channel-label-form .button { width: 100%; min-height: 2.65rem; }
  .compliance-strip { align-items: flex-start; flex-direction: column; }
  .compliance-strip nav { flex-wrap: wrap; }
}

/* Quiet, customer-first inbox */
#viewInbox .workspace-grid { grid-template-columns: minmax(19rem, 21.5rem) minmax(0, 1fr); gap: .75rem; }
#viewInbox .inbox-heading { min-height: 3.65rem; padding: .62rem .8rem; }
#viewInbox .inbox-heading .eyebrow { display: none; }
#viewInbox .inbox-heading h3 { font-size: 1rem; }
#viewInbox .inbox-heading .count-badge {
  min-width: 1.85rem;
  height: 1.85rem;
  padding: 0 .45rem;
  border: 0;
  background: #edf4fb;
  color: #315a80;
  font-size: .72rem;
}
#viewInbox .inbox-toolbar { gap: .45rem; padding: .55rem; background: #fbfdff; }
#viewInbox .inbox-toolbar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .45rem;
  align-items: center;
}
#viewInbox .inbox-profile-refresh {
  min-height: 2.35rem;
  white-space: nowrap;
}
#viewInbox .inbox-tabs { gap: .15rem; padding: .15rem; border-radius: .55rem; }
#viewInbox .inbox-tabs button { min-height: 2.15rem; padding: .35rem; font-size: .75rem; }
#viewInbox .search-control input,
#viewInbox .source-control select { min-height: 2.35rem; height: 2.35rem; font-size: .76rem; }
#viewInbox .conversation-list { background: #fff; }
#viewInbox .conversation-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  min-height: 4.65rem;
  padding: .62rem .72rem;
  border-left: 0;
  background: #fff;
}
#viewInbox .conversation-row:hover { background: #f7fbff; }
#viewInbox .conversation-row.is-selected {
  background: #eef6ff;
  box-shadow: inset 3px 0 0 #2875e6;
}
#viewInbox .conversation-row.is-closed { opacity: .72; }
#viewInbox .conversation-row.is-closed .chat-id::after { display: none; }
#viewInbox .conversation-avatar {
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  place-items: center;
  border-radius: 50%;
  background: #f0f5fa;
}
#viewInbox .conversation-avatar .platform-icon {
  width: 1.8rem;
  height: 1.8rem;
  flex-basis: 1.8rem;
  border-radius: .6rem;
}
#viewInbox .conversation-copy { display: grid; min-width: 0; gap: .1rem; text-align: left; }
#viewInbox .conversation-primary { display: flex; min-width: 0; align-items: center; gap: .5rem; }
#viewInbox .conversation-primary .chat-id {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: #153552;
  font-size: .82rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#viewInbox .conversation-primary .row-time {
  flex: 0 0 auto;
  color: #8191a3;
  font-size: .63rem;
  white-space: nowrap;
}
#viewInbox .conversation-row .row-preview {
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #4e657d;
  font-size: .75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#viewInbox .conversation-account {
  overflow: hidden;
  color: #72869a;
  font-size: .64rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#viewInbox .unread-dot {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: #2875e6;
  box-shadow: 0 0 0 3px #e1edff;
}
#viewInbox .detail-header { min-height: 3.9rem; padding: .62rem .85rem; }
#viewInbox .detail-header .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin-bottom: .1rem;
  color: #627b94;
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
#viewInbox .detail-header h3 { max-width: 36rem; color: #153552; font-size: 1rem; }
#viewInbox #chatTextSize,
#viewInbox #focusConversation { display: none; }
#viewInbox .detail-actions { gap: .35rem; }
#viewInbox .detail-actions .button {
  min-height: 2.2rem;
  padding: .4rem .65rem;
  border-radius: .52rem;
  font-size: .72rem;
}
#viewInbox .reply-heading span { display: none; }

@media (max-width: 1050px) {
  #viewInbox .workspace-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Responsive workspace release 2026-09-27
   Keeps the UI readable at normal browser zoom and when an ultra-wide display
   creates a very large CSS viewport. */
html {
  font-size: clamp(16px, .42vw, 20px);
}

html[data-text-scale="large"] {
  font-size: clamp(17px, .44625vw, 21.25px);
}

body {
  min-width: 320px;
}

.shell {
  width: 100%;
  max-width: none;
  grid-template-columns: clamp(15rem, 14vw, 18rem) minmax(0, 1fr);
}

html[data-sidebar="collapsed"] .shell {
  grid-template-columns: 5rem minmax(0, 1fr);
}

.nav-group-items .nav-item,
.button,
.icon-button,
.thread-control,
.inbox-tabs button,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
select,
textarea {
  min-height: 2.75rem;
}

#viewInbox .workspace-grid {
  grid-template-columns: clamp(20rem, 23vw, 28rem) minmax(0, 1fr);
}

#viewInbox .conversation-row {
  min-height: 4.75rem;
}

#viewInbox .conversation-primary .chat-id {
  font-size: .9rem;
}

#viewInbox .conversation-primary .row-time,
#viewInbox .conversation-account,
#viewInbox .detail-header .eyebrow,
#viewInbox .message-time {
  color: var(--muted);
  font-size: .8125rem;
}

#viewInbox .conversation-row .row-preview {
  font-size: .82rem;
  line-height: 1.35;
}

#viewInbox .detail-header h3 {
  font-size: 1.08rem;
}

#viewInbox .message-bubble p {
  font-size: 1rem;
}

#viewInbox .inbox-tabs button,
#viewInbox .search-control input,
#viewInbox .source-control select,
#viewInbox .thread-control,
#viewInbox .detail-actions .button {
  min-height: 2.75rem;
}

#viewInbox .compact-audio-player .audio-toggle {
  width: 2.75rem;
  height: 2.75rem;
}

#viewInbox .conversation-row .hide-chat {
  min-height: 2.75rem;
}

#viewInbox .conversation-row.is-closed {
  opacity: 1;
  background: #f8fbfe;
}

#viewInbox[data-chat-selected="false"] .reply-form,
#viewInbox[data-detail-loading="true"] .reply-form {
  display: none;
}

.thread-loading .loading-spinner {
  width: 2rem;
  height: 2rem;
  margin-bottom: .8rem;
  border: 3px solid #d9e8f7;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: thread-loading-spin .8s linear infinite;
}

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

#viewInbox #chatTextSize,
#viewInbox #focusConversation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#viewInbox .form-actions #draftButton,
#viewInbox .form-actions #sendButton {
  width: auto;
  padding-inline: .85rem;
  gap: .4rem;
}

#viewInbox .form-actions #draftButton span,
#viewInbox .form-actions #sendButton span {
  display: inline;
}

#viewSystem > .platform-inventory {
  width: 100%;
  max-width: 90rem;
}

@media (min-width: 1450px) {
  #viewInbox .detail-header,
  #viewInbox .reply-form {
    padding-inline: max(1rem, calc((100% - 72rem) / 2));
  }

  #viewInbox .message-list {
    padding-inline: max(1.5rem, calc((100% - 68rem) / 2));
  }
}

@media (max-width: 1120px) {
  html { font-size: 16px; }
  html[data-text-scale="large"] { font-size: 17px; }
  .shell { grid-template-columns: 5rem minmax(0, 1fr); }
  html[data-sidebar="expanded"] .shell { grid-template-columns: 14rem minmax(0, 1fr); }
}

@media (max-width: 900px) {
  html[data-sidebar="expanded"] .shell {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  .shell {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
  }
  .sidebar {
    position: relative;
    top: auto;
    width: auto;
    height: 100%;
    min-height: 0;
    align-items: stretch;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    border-bottom: 0;
    padding: .7rem .55rem;
  }
  .sidebar-head {
    justify-content: center;
  }
  .brand-lockup {
    display: flex;
    justify-content: center;
  }
  .sidebar-toggle,
  .sidebar-card,
  #liveStatus,
  .nav-group-toggle,
  .nav-group-label {
    display: none;
  }
  .sidebar-utilities {
    width: 100%;
    align-items: center;
    flex-direction: column;
  }
  .nav-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: auto;
    min-width: 0;
    justify-content: initial;
    overflow: visible;
  }
  .nav-group,
  .nav-group-items,
  .nav-group.is-collapsed .nav-group-items {
    display: grid;
    width: 100%;
  }
  .nav-group-items .nav-item,
  .nav-group-items .nav-subitem {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    flex: none;
    justify-content: center;
    margin-left: 0;
    padding: .65rem;
    border-left: 0;
    border-radius: .65rem;
  }
  .nav-group-items .nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
  }
}

@media (max-width: 1050px) {
  #viewInbox .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  #viewInbox #focusConversation { display: none; }
  #viewInbox .inbox-panel,
  #viewInbox .detail-panel {
    height: 100%;
    min-height: 0;
  }
}

@media (max-width: 680px) {
  body { padding: 0; }
  .shell {
    width: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }
  .sidebar {
    display: block;
    position: sticky;
    top: 0;
    height: auto;
    min-height: 0;
    padding-top: max(.5rem, env(safe-area-inset-top));
  }
  .sidebar-head,
  .sidebar-utilities,
  .sidebar-card {
    display: none;
  }
  .nav-list {
    display: flex;
    width: 100%;
    overflow-x: auto;
    gap: .25rem;
    scrollbar-width: thin;
  }
  .nav-group-items .nav-item {
    min-width: max-content;
    min-height: 2.75rem;
    gap: .4rem;
    padding: .55rem .7rem;
    font-size: .8125rem;
  }
  .nav-group-items .nav-item > span:not(.nav-count) {
    display: inline;
  }
  .nav-group-items .nav-item svg {
    width: 1.05rem;
    height: 1.05rem;
  }
  .nav-group-items .nav-item,
  .sidebar-utilities .button,
  .sidebar-utilities .status-pill {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
  #viewInbox { padding: .35rem; }
  #viewInbox .inbox-panel,
  #viewInbox .detail-panel {
    min-height: calc(100dvh - 4.75rem);
    height: calc(100dvh - 4.75rem);
    border-radius: .75rem;
  }
  #viewInbox .conversation-row {
    min-height: 4.75rem;
    padding: .7rem;
  }
  #viewInbox .detail-header {
    min-height: 4.25rem;
    padding: .6rem .7rem;
  }
  #viewInbox .message-list {
    padding: .8rem .7rem;
  }
  #viewInbox .message-bubble,
  #viewInbox .message-bubble.is-long {
    max-width: 92%;
  }
  #viewInbox .reply-form {
    padding: .6rem .7rem max(.7rem, env(safe-area-inset-bottom));
  }
  #viewInbox .reply-form textarea {
    min-height: 3.25rem;
    font-size: 1rem;
  }
}

@media (max-width: 430px) {
  #viewInbox { padding: 0; }
  #viewInbox .inbox-panel,
  #viewInbox .detail-panel { border-radius: 0; }
  #viewInbox .conversation-avatar {
    width: 2.15rem;
    height: 2.15rem;
  }
  #viewInbox .conversation-primary .row-time { font-size: .68rem; }
  #viewInbox .detail-actions .button { padding-inline: .55rem; }
}

/* Lead-card sizing release 2026-09-27
   Every lead record fills its own list track. On phones the customer table
   becomes a true card list, so records no longer inherit the desktop table's
   65rem minimum width. */
:is(.conversation-list, .pipeline-stack, .task-list, .pilot-issues) {
  align-items: stretch;
}

:is(.conversation-row, .pipeline-card, .pipeline-more, .task-row, .pilot-issue-row) {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: 0;
  justify-self: stretch;
}

.pipeline-card > *,
.task-row > *,
.pilot-issue-row > * {
  min-width: 0;
}

@media (max-width: 680px) {
  #viewPipeline .pipeline-board {
    grid-auto-columns: 100%;
    scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
  }

  #viewPipeline .pipeline-column {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  #viewCustomers .crm-table-wrap {
    overflow: visible;
    padding: .65rem;
    background: #f5fbff;
  }

  #viewCustomers .crm-table {
    display: block;
    width: 100%;
    min-width: 0;
    border-collapse: separate;
  }

  #viewCustomers .crm-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #viewCustomers .crm-table tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
    width: 100%;
  }

  #viewCustomers .crm-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    padding: .75rem;
    border: 1px solid #c9e2fb;
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 2px 8px rgba(22, 95, 165, .05);
  }

  #viewCustomers .crm-table tbody tr:hover,
  #viewCustomers .crm-table tbody tr.is-selected {
    border-color: #81b8ff;
    background: #f2f9ff;
  }

  #viewCustomers .crm-table td {
    display: grid;
    align-content: start;
    gap: .2rem;
    min-width: 0;
    padding: .42rem .25rem;
    border: 0;
  }

  #viewCustomers .crm-table td[data-crm-column="lead"],
  #viewCustomers .crm-table td[data-crm-column="next_step"],
  #viewCustomers .crm-table td[data-crm-column="actions"] {
    grid-column: 1 / -1;
  }

  #viewCustomers .crm-table td:not([data-crm-column="lead"])::before {
    color: #42688a;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
  }

  #viewCustomers .crm-table td[data-crm-column="stage"]::before { content: "Stage"; }
  #viewCustomers .crm-table td[data-crm-column="status"]::before { content: "Status"; }
  #viewCustomers .crm-table td[data-crm-column="source"]::before { content: "Source"; }
  #viewCustomers .crm-table td[data-crm-column="activity"]::before { content: "Activity"; }
  #viewCustomers .crm-table td[data-crm-column="next_step"]::before { content: "Next step"; }
  #viewCustomers .crm-table td[data-crm-column="actions"]::before { content: "Actions"; }

  #viewCustomers .crm-lead-link {
    min-height: 2.75rem;
  }

  #viewCustomers .crm-lead-link strong,
  #viewCustomers .crm-lead-link small,
  #viewCustomers .crm-next {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  #viewCustomers .crm-row-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  #viewCustomers .crm-row-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.75rem;
    padding-inline: .35rem;
    text-align: center;
  }
}

@media (max-width: 360px) {
  #viewCustomers .crm-table tbody tr {
    grid-template-columns: minmax(0, 1fr);
  }

  #viewCustomers .crm-table td {
    grid-column: 1;
  }
}

/* Today work queue */
.task-scope-tabs {
  display:flex;
  width:max-content;
  max-width:100%;
  gap:.25rem;
  margin:0 0 .75rem;
  padding:.25rem;
  border:1px solid #bfd9f5;
  border-radius:999px;
  background:#eef8ff;
}
.task-scope-tabs button {
  min-height:2.35rem;
  padding:.35rem .85rem;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#285477;
  font:inherit;
  font-size:.82rem;
  font-weight:750;
  cursor:pointer;
}
.task-scope-tabs button[aria-pressed="true"] {
  background:#fff;
  color:#0b2a48;
  box-shadow:0 8px 18px rgba(30, 105, 180, .12);
}
.task-scope-tabs button:focus-visible {
  outline:3px solid rgba(37,99,235,.24);
  outline-offset:2px;
}
.task-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.task-row {
  grid-template-columns: .65rem 2.35rem minmax(0, 1fr) max-content minmax(7rem, max-content) max-content;
  gap: .75rem;
  min-height: 4.5rem;
  padding: .75rem .9rem;
  border: 1px solid transparent;
  border-top-color: var(--border);
}
.task-priority.is-due { background: var(--accent); }
.task-channel {
  display:grid;
  place-items:center;
}
.task-channel .platform-icon {
  width:2rem;
  height:2rem;
  flex-basis:2rem;
}
.task-main {
  min-width:0;
}
.task-main strong,
.task-main small,
.task-main em {
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.task-main em {
  color:#507499;
  font-size:.68rem;
  font-style:normal;
}
.task-kind {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2rem;
  padding:.28rem .55rem;
  border:1px solid #c8e1f7;
  border-radius:999px;
  background:#f7fcff;
  color:#1d568c;
  font-size:.7rem;
  font-weight:750;
  white-space:nowrap;
}
.task-row[data-task-type="inbound"] .task-kind,
.task-row[data-task-type="reply"] .task-kind {
  border-color:#ade5d2;
  background:#effdf8;
  color:#047857;
}
.task-row[data-task-type="draft"] .task-kind {
  border-color:#d5ccff;
  background:#f6f3ff;
  color:#5b3db8;
}
.task-due.is-due {
  color:var(--accent-ink);
  font-weight:750;
}

@media (max-width: 980px) {
  .task-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .task-row {
    grid-template-columns: .65rem 2.35rem minmax(0, 1fr) max-content;
  }
  .task-due {
    grid-column: 3 / 4;
  }
  .task-open {
    grid-column: 4;
    grid-row: 1 / 3;
  }
}

@media (max-width: 620px) {
  .task-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .task-row {
    grid-template-columns: .55rem 2rem minmax(0, 1fr);
  }
  .task-kind,
  .task-due {
    grid-column: 3;
    width:max-content;
    max-width:100%;
  }
  .task-open {
    display:none;
  }
}

/* Real pilot operating plan */
.pilot-check {
  background: linear-gradient(180deg, #fff, #f7fbff);
  border-color: #bcd8ff;
}

.pilot-status {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.pilot-status.is-ready {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.pilot-status.is-review {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.pilot-status.is-building {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.pilot-scope {
  max-width: 72rem;
  color: #24476d;
  line-height: 1.5;
}

.pilot-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}

.pilot-progress-meter {
  grid-column: 1 / -1;
  height: .55rem;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #dbeafe;
}

.pilot-progress-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #059669);
  transition: width .24s ease;
}

.pilot-metrics > .pilot-metric-card {
  min-height: 5.7rem;
  padding: .8rem .9rem;
  border: 1px solid #c7ddff;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .06);
}

.pilot-metric-card strong {
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1;
}

.pilot-metric-card small {
  color: #5d7594;
  font-size: .73rem;
  line-height: 1.35;
}

.pilot-issues {
  display: grid;
  gap: .85rem;
}

.pilot-plan {
  display: grid;
  grid-template-columns: minmax(13rem, .42fr) minmax(0, 1fr);
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.pilot-plan h4 {
  margin: .15rem 0 0;
  color: var(--text);
}

.pilot-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
}

.pilot-plan-actions .button {
  width: max-content;
}

.pilot-plan ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pilot-step {
  display: grid;
  align-content: start;
  gap: .32rem;
  min-height: 7.4rem;
  padding: .7rem;
  border: 1px solid #c7ddff;
  border-radius: .85rem;
  background: #fff;
}

.pilot-step strong {
  color: var(--text);
  font-size: .85rem;
  line-height: 1.25;
}

.pilot-step small {
  color: #5d7594;
  font-size: .74rem;
  line-height: 1.35;
}

.pilot-step-state {
  width: max-content;
  max-width: 100%;
  padding: .2rem .48rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pilot-step.is-complete .pilot-step-state {
  background: #dcfce7;
  color: #047857;
}

.pilot-step.is-blocked .pilot-step-state {
  background: #fee2e2;
  color: #b91c1c;
}

.pilot-step.is-watch .pilot-step-state {
  background: #fffbeb;
  color: #92400e;
}

.pilot-next-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.pilot-next-action {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  min-height: 6.5rem;
  padding: .9rem;
  border: 1px solid #c7ddff;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.pilot-next-action > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .25rem .58rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pilot-next-action strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.25;
}

.pilot-next-action p {
  max-width: 54rem;
  margin: .3rem 0 .65rem;
  color: #4a6684;
  font-size: .8rem;
  line-height: 1.45;
}

.pilot-next-action-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.pilot-next-action-controls .button {
  min-height: 2.75rem;
}

.pilot-next-action.is-attention {
  border-color: #fdba74;
  background: #fffaf4;
}

.pilot-next-action.is-attention > span {
  background: #ffedd5;
  color: #9a3412;
}

.pilot-next-action.is-complete {
  border-color: #a7f3d0;
  background: #f0fdf4;
}

.pilot-next-action.is-complete > span {
  background: #dcfce7;
  color: #047857;
}

.pilot-next-action.is-review > span {
  background: #fef3c7;
  color: #92400e;
}

.pilot-outreach-panel {
  display: grid;
  gap: .75rem;
  padding: .9rem;
  border: 1px solid #c7ddff;
  border-radius: 1rem;
  background: linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.pilot-outreach-panel.has-attention {
  border-color: #fdba74;
  background: #fffaf4;
}

.pilot-outreach-summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: start;
}

.pilot-outreach-summary > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: .25rem .58rem;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pilot-outreach-panel.has-attention .pilot-outreach-summary > span {
  background: #ffedd5;
  color: #9a3412;
}

.pilot-outreach-summary strong {
  display: block;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.25;
}

.pilot-outreach-summary p {
  max-width: 60rem;
  margin: .3rem 0 0;
  color: #4a6684;
  font-size: .8rem;
  line-height: 1.45;
}

.pilot-outreach-summary small {
  display: block;
  margin-top: .35rem;
  color: #9a3412;
  font-size: .74rem;
  font-weight: 800;
}

.pilot-outreach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-end;
}

.pilot-outreach-actions .button {
  min-height: 2.75rem;
}

.pilot-outreach-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
}

.pilot-outreach-metrics > div {
  min-height: 4.8rem;
  padding: .65rem .75rem;
  border: 1px solid #d4e6ff;
  border-radius: .8rem;
  background: #fff;
}

.pilot-outreach-metrics strong {
  display: block;
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1;
}

.pilot-outreach-metrics span,
.pilot-outreach-metrics small {
  display: block;
  margin-top: .25rem;
  color: #5d7594;
  font-size: .72rem;
  line-height: 1.25;
}

.pilot-channel-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}

.pilot-channel-chip {
  display: grid;
  grid-template-columns: 2.4rem auto 1fr;
  align-items: center;
  gap: .55rem;
  min-height: 3.75rem;
  padding: .7rem .8rem;
  border: 1px solid #c7ddff;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .05);
}

.pilot-channel-chip .platform-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.pilot-channel-chip strong {
  color: var(--text);
  font-size: .88rem;
}

.pilot-channel-chip em {
  justify-self: start;
  min-width: 4.35rem;
  padding: .24rem .54rem;
  border-radius: 999px;
  background: #ecfdf5;
  color: #047857;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.pilot-channel-chip small {
  grid-column: 2 / -1;
  color: #5d7594;
  font-size: .74rem;
}

.pilot-channel-chip.is-attention {
  border-color: #fed7aa;
  background: #fffaf4;
}

.pilot-channel-chip.is-attention em {
  background: #fffbeb;
  color: #92400e;
}

.pilot-launch-kit {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.pilot-launch-kit article {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .75rem;
  min-height: 8.75rem;
  padding: .85rem;
  border: 1px solid #c7ddff;
  border-radius: 1rem;
  background: linear-gradient(180deg, #fff, #f7fbff);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .05);
}

.pilot-launch-step {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: .85rem;
  background: #e0f2fe;
  color: #075985;
  font-size: .85rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.pilot-launch-kit strong {
  display: block;
  color: var(--text);
  font-size: .9rem;
  line-height: 1.25;
}

.pilot-launch-kit p {
  margin: .28rem 0 .7rem;
  color: #4a6684;
  font-size: .78rem;
  line-height: 1.45;
}

.pilot-contact-options {
  display: grid;
  gap: .4rem;
  margin: 0 0 .65rem;
}

.pilot-contact-option {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  min-height: 2.4rem;
  padding: .38rem .45rem;
  border: 1px solid #c8defb;
  border-radius: .75rem;
  background: #fff;
}

.pilot-contact-option .platform-icon {
  width: 1.7rem;
  height: 1.7rem;
}

.pilot-contact-option strong {
  font-size: .74rem;
}

.pilot-contact-option small {
  display: block;
  overflow: hidden;
  color: #5a7594;
  font-size: .68rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilot-contact-option a {
  color: #155eef;
  text-decoration: none;
}

.pilot-contact-option a:hover {
  text-decoration: underline;
}

.pilot-contact-option.is-attention {
  border-color: #fed7aa;
  background: #fffaf4;
}

.pilot-launch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.pilot-launch-kit .button {
  min-height: 2.5rem;
}

.pilot-issues-heading {
  align-items: center;
  padding: .15rem 0 0;
}

.pilot-issue-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) minmax(8rem, .8fr) auto;
  align-items: center;
  gap: .75rem;
  min-height: 4rem;
  margin: 0;
  padding: .75rem;
  border-color: #c7ddff;
  border-radius: 1rem;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .05);
}

.pilot-issue-platform {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .9rem;
  background: #eff6ff;
}

.pilot-issue-platform .channel-icon {
  width: 1.45rem;
  height: 1.45rem;
}

.pilot-issue-name {
  min-width: 0;
}

.pilot-issue-name strong,
.pilot-issue-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pilot-issue-flags {
  justify-content: flex-end;
}

.pilot-issue-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2.25rem;
  border-radius: .75rem;
  background: #eff6ff;
}

@media (max-width: 1120px) {
  .pilot-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pilot-plan {
    grid-template-columns: 1fr;
  }

  .pilot-plan ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pilot-launch-kit {
    grid-template-columns: 1fr;
  }

  .pilot-next-actions {
    grid-template-columns: 1fr;
  }

  .pilot-outreach-summary {
    grid-template-columns: 1fr;
  }

  .pilot-outreach-actions {
    justify-content: flex-start;
  }

  .pilot-outreach-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pilot-metrics,
  .pilot-plan ol,
  .pilot-channel-strip,
  .pilot-next-actions {
    grid-template-columns: 1fr;
  }

  .pilot-next-action {
    grid-template-columns: 1fr;
  }

  .pilot-outreach-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pilot-issue-row {
    grid-template-columns: 2.75rem minmax(0, 1fr);
  }

  .pilot-issue-flags,
  .pilot-issue-open {
    grid-column: 2;
    justify-content: flex-start;
  }
}

/* Customer identity inbox polish
   Real names stay primary; account/platform context stays secondary. Rows keep
   one compact, consistent width across the scroll list. */
#viewInbox .conversation-list {
  display: grid;
  grid-auto-rows: min-content;
  align-content: start;
  gap: .28rem;
  padding: .45rem;
  overflow-x: hidden;
}

#viewInbox .conversation-row {
  box-sizing: border-box;
  width: 100%;
  min-height: 4.45rem;
  margin: 0;
  padding: .62rem .7rem;
  grid-template-columns: 2.35rem minmax(0, 1fr) .6rem;
  gap: .58rem;
  border: 1px solid #d4e7fb;
  border-left: 3px solid var(--stage-ink, #8bbdf5);
  border-radius: .75rem;
  background: #fff;
}

#viewInbox .conversation-row:hover {
  border-color: #afd3f6;
  border-left-color: var(--stage-ink, #2875e6);
  background: #f7fbff;
}

#viewInbox .conversation-row.is-selected {
  border-color: #93c5fd;
  border-left-color: var(--stage-ink, #2875e6);
  background: #eef6ff;
  box-shadow: none;
}

#viewInbox .conversation-avatar {
  width: 2.2rem;
  height: 2.2rem;
}

#viewInbox .conversation-avatar .platform-icon {
  width: 1.72rem;
  height: 1.72rem;
  border-radius: .56rem;
}

#viewInbox .conversation-copy {
  overflow: hidden;
}

#viewInbox .conversation-primary {
  gap: .45rem;
}

#viewInbox .conversation-primary .chat-id {
  color: #102f4d;
  font-size: .88rem;
  letter-spacing: -.01em;
}

#viewInbox .conversation-primary .row-time {
  color: #6f8398;
  font-size: .72rem;
}

#viewInbox .conversation-row .row-preview {
  color: #315878;
  font-size: .8rem;
}

#viewInbox .conversation-account {
  color: #58718a;
  font-size: .72rem;
}

#viewInbox .unread-dot {
  align-self: center;
}

@media (max-width: 430px) {
  #viewInbox .conversation-list {
    padding: .35rem;
  }

  #viewInbox .conversation-row {
    min-height: 4.65rem;
    padding: .68rem .6rem;
    grid-template-columns: 2.15rem minmax(0, 1fr) .55rem;
  }
}

/* AIBO inbox refinement
   Keeps customer identity readable, cards equal-width, and the thread usable
   from phone width through large desktop review screens. */
#viewInbox .workspace-grid {
  grid-template-columns: clamp(19.5rem, 28vw, 24rem) minmax(0, 1fr);
  max-width: min(100%, 96rem);
  margin-inline: auto;
}

#viewInbox .conversation-list {
  grid-template-columns: minmax(0, 1fr);
}

#viewInbox .conversation-row {
  display: grid;
  align-items: center;
  inline-size: 100%;
  min-inline-size: 0;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#viewInbox .conversation-row:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .32);
  outline-offset: 2px;
}

#viewInbox .conversation-row.is-selected {
  box-shadow: inset 3px 0 0 #2563eb, 0 8px 22px rgba(37, 99, 235, .08);
}

#viewInbox .conversation-primary {
  min-width: 0;
}

#viewInbox .conversation-primary .chat-id,
#viewInbox .conversation-account,
#viewInbox .conversation-row .row-preview {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#viewInbox .conversation-primary .chat-id {
  max-width: 100%;
  white-space: nowrap;
}

#viewInbox .conversation-row.is-unnamed .conversation-primary .chat-id {
  color: #24496b;
  font-weight: 700;
}

#viewInbox .conversation-account {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: .12rem .42rem;
  border: 1px solid #d7e8fa;
  border-radius: 999px;
  background: #f8fbff;
  color: #315878;
  white-space: nowrap;
}

#viewInbox .detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}

#viewInbox .thread-heading {
  min-width: 0;
}

#viewInbox .detail-header h3 {
  max-width: 100%;
}

@media (max-width: 1100px) {
  #viewInbox .workspace-grid {
    grid-template-columns: minmax(17.5rem, 21rem) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  #viewInbox .workspace-grid {
    max-width: 100%;
  }

  #viewInbox .conversation-row {
    min-height: 4.85rem;
    grid-template-columns: 2.35rem minmax(0, 1fr) .65rem;
  }

  #viewInbox .conversation-primary {
    align-items: flex-start;
    flex-direction: column;
    gap: .12rem;
  }

  #viewInbox .conversation-primary .row-time {
    font-size: .68rem;
  }
}

/* Meta account discovery picker */
.meta-discovered-accounts {
  margin: 18px 0;
  padding: 0;
  border: 1px solid #b9d8ff;
  border-radius: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
  box-shadow: 0 18px 40px rgba(31, 85, 153, .08);
  overflow: hidden;
}
.meta-discovered-accounts p { margin: 0; }
.meta-discovery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid #d6e8ff;
  background: #fff;
}
.meta-discovery-head h4 { margin: 2px 0 6px; color: #102946; font-size: 1.18rem; letter-spacing: -.02em; }
.meta-discovery-head p { max-width: 58rem; color: #456789; line-height: 1.5; }
.meta-discovery-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: min(360px, 100%);
}
.meta-discovery-summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #c8dcf5;
  border-radius: 999px;
  background: #f4f9ff;
  color: #315780;
  font-weight: 700;
  white-space: nowrap;
}
.meta-discovery-summary strong { color: #175cd3; font-size: 1rem; }
.meta-discovery-list {
  display: grid;
  gap: 14px;
  max-height: min(52vh, 560px);
  overflow-y: auto;
  padding: 18px;
  margin: 0;
  scrollbar-color: #8fc5fb #eef7ff;
}
.meta-discovery-card {
  border: 1px solid #c9def7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 67, 125, .06);
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.meta-discovery-card:hover {
  border-color: #8cbcff;
  box-shadow: 0 16px 34px rgba(37, 99, 235, .11);
  transform: translateY(-1px);
}
.meta-discovery-card:has(input:checked) {
  border-color: #2563eb;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}
.meta-discovery-page,
.meta-discovery-channel {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 16px 18px;
  cursor: pointer;
}
.meta-discovery-page input,
.meta-discovery-channel input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #2563eb;
  flex: none;
}
.meta-discovery-page input:focus-visible,
.meta-discovery-channel input:focus-visible { outline: 3px solid #80b5ff; outline-offset: 3px; }
.meta-page-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: linear-gradient(145deg, #eaf3ff, #dcecff);
  color: #175cd3;
  font-weight: 900;
  letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, .08);
}
.meta-page-copy,
.meta-channel-copy { display: grid; gap: 4px; min-width: 0; }
.meta-page-copy strong,
.meta-channel-copy strong { color: #102946; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.meta-page-copy small,
.meta-channel-copy small { color: #597392; font-weight: 650; line-height: 1.35; }
.meta-discovery-note {
  display: inline-flex;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: .78rem;
  font-weight: 800;
}
.meta-status-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 850;
  white-space: nowrap;
}
.meta-status-pill.is-ready { background: #eff6ff; color: #1d4ed8; }
.meta-status-pill.is-connected { background: #dcfce7; color: #047857; }
.meta-status-pill.is-warning { background: #fff7ed; color: #b45309; }
.meta-status-pill.is-reconnect { background: #fff7ed; color: #c2410c; }
.meta-discovery-linked {
  padding: 0 18px 16px 66px;
}
.meta-discovery-channel {
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid #f4b7d9;
  border-left: 5px solid #d9468f;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff7fb 0%, #fff 62%);
}
.meta-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
}
.meta-channel-icon .platform-icon { width: 34px; height: 34px; flex-basis: 34px; margin: 0; border-radius: 11px; }
.meta-channel-icon .platform-icon svg { width: 21px; height: 21px; }
.meta-discovery-actionbar {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid #d6e8ff;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(10px);
}
.meta-discovery-actionbar > span {
  color: #456789;
  font-weight: 750;
}
.meta-discovery-actionbar .connection-form-error { margin: 0; }
.meta-page-id-fallback {
  margin: 0 18px 18px;
  border-color: #d6e8ff;
  border-radius: 16px;
  background: #fff;
}
@media (max-width: 820px) {
  .meta-discovery-head { flex-direction: column; }
  .meta-discovery-summary { justify-content: flex-start; min-width: 0; }
  .meta-discovery-page,
  .meta-discovery-channel { grid-template-columns: auto auto minmax(0, 1fr); }
  .meta-status-pill { grid-column: 2 / -1; justify-self: start; }
  .meta-discovery-linked { padding-left: 18px; }
  .meta-discovery-actionbar { grid-template-columns: 1fr; align-items: stretch; }
  .meta-discovery-actionbar .button { width: 100%; }
}
@media (max-width: 560px) {
  .meta-discovery-list { max-height: none; padding: 12px; }
  .meta-discovery-page,
  .meta-discovery-channel { gap: 10px; padding: 13px; }
  .meta-page-avatar { width: 40px; height: 40px; border-radius: 13px; }
}

/* AIBO account management refinement: active vs disconnected clarity */
.connected-account-section,
.disconnected-account-section,
.other-channel-section {
  margin-top: 1rem;
}
.connected-account-section,
.disconnected-account-section {
  padding: 1rem;
  border: 1px solid #d8e7f7;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(23, 60, 105, .06);
}
.disconnected-account-section {
  border-color: #fed7aa;
  background: linear-gradient(180deg, #fffaf4 0%, #fff 100%);
}
.subsection-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
.subsection-heading h4 {
  margin: 0;
  color: #112a46;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.subsection-heading p {
  max-width: 48rem;
  color: #58738f;
  line-height: 1.45;
}
.business-identity-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1rem;
}
.business-identity-card {
  border-radius: 18px;
  border-color: #cbdff5;
  box-shadow: 0 16px 34px rgba(23, 60, 105, .07);
}
.business-identity-header {
  min-height: 4.5rem;
  padding: 1rem 1.1rem;
}
.identity-avatar {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 15px;
  font-size: .85rem;
}
.business-identity-header h4 { font-size: 1.02rem; }
.business-identity-header p { font-size: .78rem; }
.identity-count { padding: .34rem .65rem; font-size: .72rem; }
.identity-channel-list { padding: .3rem 1rem .75rem; }
.identity-channel {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 3.75rem;
  gap: .8rem;
  padding: .78rem .15rem;
}
.identity-channel-copy strong,
.standalone-channel strong,
.disconnected-channel strong { font-size: .92rem; }
.identity-channel-copy small,
.standalone-channel small,
.disconnected-channel small {
  color: #617a95;
  font-size: .75rem;
  line-height: 1.35;
  white-space: normal;
}
.identity-channel-actions,
.disconnected-channel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: .45rem;
}
.connection-state { font-size: .76rem; }
.disconnected-channel-grid {
  display: grid;
  gap: .7rem;
}
.disconnected-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  min-height: 4.2rem;
  padding: .85rem 1rem;
  border: 1px solid #fed7aa;
  border-left: 5px solid #f59e0b;
  border-radius: 15px;
  background: #fff;
}
.disconnected-channel[data-channel-type="instagram"] { border-left-color: #d9468f; }
.disconnected-channel-copy { min-width: 0; }
.account-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .7rem;
}
.account-summary span {
  min-height: 3rem;
  padding: .75rem .85rem;
  border-radius: 14px;
  font-size: .8rem;
}
.account-summary strong { font-size: 1.15rem; }
.button.danger-quiet,
.button.secondary.compact {
  min-height: 2.35rem;
  border-radius: 10px;
}
@media (max-width: 960px) {
  .business-identity-grid,
  .standalone-channel-grid { grid-template-columns: 1fr; }
  .account-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .identity-channel,
  .disconnected-channel { grid-template-columns: auto minmax(0, 1fr); }
  .identity-channel .connection-state { grid-column: 2; justify-self: start; }
  .identity-channel-actions,
  .disconnected-channel-actions { grid-column: 2; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .connected-account-section,
  .disconnected-account-section { padding: .75rem; }
  .account-summary { grid-template-columns: 1fr; }
  .subsection-heading { display: block; }
}

/* =====================================================================
   AIBO design system: the Knowledge onboarding's look across the whole
   dashboard. One font, a colour for each section, a gradient sidebar rail,
   a gradient hero on each page, soft cards and rounded buttons.
   switchView (app.js) sets data-page on <body>; everything coloured reads
   the section colours from it. The Inbox follows the accent chosen under
   Settings > Appearance.
   ===================================================================== */

:root, html[data-accent] {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --text: #0f172a;
  --muted: #475569;
  --soft: #334155;
  --border: #e2e8f0;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 24px -14px rgba(15, 23, 42, .16);
  --shadow-float: 0 26px 50px -26px rgba(15, 23, 42, .4);
  --font-ui: "Plus Jakarta Sans", Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-family: var(--font-ui);
}

body {
  --ob-ink: #0f172a;
  --ob-text: #1e293b;
  --ob-muted: #475569;
  --ob-subtle: #57677e;
  --ob-line: #e2e8f0;
  --ob-line-strong: #cbd5e1;
  --ob-bg: #f6f8fc;
  --ob-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px -8px rgba(15, 23, 42, .1);
  --ob-shadow-lg: 0 30px 70px -30px rgba(15, 23, 42, .35);
  --ob-font: var(--font-ui);
  --ob-ease: cubic-bezier(.2, .8, .2, 1);
  --sec: var(--accent);
  --sec-strong: var(--accent-hover);
  --sec-deep: var(--accent-ink);
  --sec-soft: var(--accent-soft);
  --sec-line: var(--accent-line);
  --sec-2: color-mix(in srgb, var(--accent) 45%, #22d3ee);
}
body[data-page="customers"] { --sec: #7c3aed; --sec-strong: #6d28d9; --sec-deep: #4c1d95; --sec-soft: #f5f3ff; --sec-line: #ddd6fe; --sec-2: #d946ef; }
body[data-page="pipeline"] { --sec: #ea580c; --sec-strong: #c2410c; --sec-deep: #7c2d12; --sec-soft: #fff7ed; --sec-line: #fed7aa; --sec-2: #f59e0b; }
body[data-page="today"] { --sec: #e11d48; --sec-strong: #be123c; --sec-deep: #881337; --sec-soft: #fff1f2; --sec-line: #fecdd3; --sec-2: #fb923c; }
body[data-page="knowledge"] { --sec: #4f46e5; --sec-strong: #4338ca; --sec-deep: #312e81; --sec-soft: #eef2ff; --sec-line: #c7d2fe; --sec-2: #8b5cf6; }
body[data-page="analytics"] { --sec: #0891b2; --sec-strong: #0e7490; --sec-deep: #164e63; --sec-soft: #ecfeff; --sec-line: #a5f3fc; --sec-2: #2dd4bf; }
body[data-page="system"] { --sec: #059669; --sec-strong: #047857; --sec-deep: #064e3b; --sec-soft: #ecfdf5; --sec-line: #a7f3d0; --sec-2: #14b8a6; }
/* The onboarding's components (.ob-*) read --step; outside a step they take the section's colours. */
body[data-page] {
  --step: var(--sec); --step-strong: var(--sec-strong); --step-deep: var(--sec-deep);
  --step-soft: var(--sec-soft); --step-line: var(--sec-line); --step-glow: var(--sec-2);
}

/* Each page's own icon colour in the sidebar */
.nav-item[data-view="inbox"], .nav-group-current[data-view="inbox"] { --tile: #3b82f6; --tile-deep: #1d4ed8; --tile-glow: #93c5fd; }
.nav-item[data-view="customers"], .nav-group-current[data-view="customers"] { --tile: #8b5cf6; --tile-deep: #6d28d9; --tile-glow: #c4b5fd; }
.nav-item[data-view="pipeline"], .nav-group-current[data-view="pipeline"] { --tile: #f97316; --tile-deep: #c2410c; --tile-glow: #fdba74; }
.nav-item[data-view="today"], .nav-group-current[data-view="today"] { --tile: #f43f5e; --tile-deep: #be123c; --tile-glow: #fda4af; }
.nav-item[data-view="knowledge"], .nav-group-current[data-view="knowledge"] { --tile: #6366f1; --tile-deep: #4338ca; --tile-glow: #a5b4fc; }
.nav-item[data-view="analytics"], .nav-group-current[data-view="analytics"] { --tile: #06b6d4; --tile-deep: #0e7490; --tile-glow: #67e8f9; }
.nav-item[data-view="system"], .nav-item[data-system-target], .nav-group-current[data-view="system"] { --tile: #10b981; --tile-deep: #047857; --tile-glow: #6ee7b7; }

/* ─── Frame ──────────────────────────────────────────────────────── */

html { background: var(--bg); }
body {
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(70rem 36rem at 100% -10%, color-mix(in srgb, var(--sec) 9%, transparent), transparent 70%),
    radial-gradient(50rem 30rem at 0% 110%, color-mix(in srgb, var(--sec-2) 7%, transparent), transparent 70%),
    var(--bg);
}
.shell { gap: 14px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.main { background: transparent; border: 0; box-shadow: none; padding: 0; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.skip-link { border-radius: .75rem; font-family: var(--font-ui); }

/* ─── Sidebar ─────────────────────────────────────────────────────
   A white panel with light-blue lines, as before the redesign. Each page keeps its
   own icon colour; the current page is tinted with it. */

.sidebar {
  --sb-line: #cde5fb;
  --sb-soft: #eef8ff;
  --sb-hover: #f1f7fe;
  --sb-ink: #0f2742;
  --sb-text: #1d4269;
  --sb-muted: #42688a;
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; gap: 1.1rem;
  padding: 1rem .75rem; border: 1px solid var(--sb-line); border-radius: 24px; color: var(--sb-text);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: #fff;
  box-shadow: var(--shadow);
  scrollbar-width: thin; scrollbar-color: #c3d9ef transparent;
}
.sidebar::after { content: none; }
.sidebar :focus-visible { outline-color: var(--focus); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 0; padding: 0 .15rem; border: 0; }
.brand-lockup { display: flex; align-items: center; gap: .7rem; min-width: 0; min-height: 0; padding: 0; }
.brand-mark {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; overflow: hidden; padding: .2rem;
  border: 1px solid var(--sb-line); border-radius: .85rem; background: #fff; box-shadow: 0 6px 14px -10px rgba(15, 39, 66, .35);
}
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-copy { min-width: 0; }
.brand-copy .eyebrow { margin: 0 0 .1rem; color: var(--accent-ink); font-size: .6rem; font-weight: 800; letter-spacing: .14em; }
.brand-copy h1 { margin: 0; color: var(--sb-ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.sidebar .sidebar-toggle {
  display: grid; place-items: center; width: 2.4rem; min-width: 2.4rem; height: 2.4rem; min-height: 2.4rem; padding: 0;
  border: 1px solid var(--sb-line); border-radius: .8rem; background: #fff; color: var(--sb-text);
}
.sidebar .sidebar-toggle:hover { background: var(--sb-hover); color: var(--accent-ink); }
.sidebar .sidebar-toggle svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sidebar-utilities {
  display: flex; flex-direction: row; align-items: center; gap: .35rem; width: auto; margin: 0; padding: .35rem;
  border: 1px solid var(--sb-line); border-radius: 1rem; background: var(--sb-soft);
}
.sidebar-utilities .button, .sidebar-utilities .button.ghost-button, .sidebar-utilities .button.secondary {
  display: grid; place-items: center; flex: none; width: 2.4rem; min-width: 2.4rem; height: 2.4rem; min-height: 2.4rem; padding: 0;
  border: 1px solid var(--sb-line); border-radius: .75rem; background: #fff; color: var(--sb-text); box-shadow: none;
}
.sidebar-utilities .button:hover:not(:disabled),
.sidebar-utilities .button.ghost-button:hover:not(:disabled),
.sidebar-utilities .button.secondary:hover:not(:disabled) { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent-ink); transform: none; }
.sidebar-utilities .button svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-utilities .status-pill {
  flex: 1; justify-content: center; min-width: 0; min-height: 2.2rem; padding: .3rem .6rem;
  border: 1px solid var(--sb-line); background: #fff; color: var(--sb-muted); font-size: .75rem;
}
.sidebar-utilities .status-pill.is-online { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.sidebar-utilities .status-pill.is-warning { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.sidebar-utilities .status-pill.is-error { border-color: #fecaca; background: #fff1f2; color: #b42318; }

.nav-list { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin: 0; padding: 0; }
.nav-group { display: grid; gap: .2rem; min-width: 0; }
.nav-group-toggle, .nav-group-label {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%;
  min-height: 1.9rem; margin: 0; padding: .2rem .6rem; border: 0; border-radius: .6rem; background: transparent;
  color: var(--sb-muted); font: 800 .66rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.nav-group-label { cursor: default; }
.nav-group-toggle:hover { border: 0; background: var(--sb-hover); color: var(--sb-ink); }
.nav-group:has(.nav-item.active) .nav-group-toggle,
.nav-group:has(.nav-item.active) .nav-group-label { border: 0; background: transparent; color: var(--accent-ink); }
.nav-group-toggle svg { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2.2; }
/* A collapsed section shows its counts beside its name, and the page open inside it on a line below */
.nav-group { grid-template-columns: minmax(0, 1fr); }
.nav-group-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: .45rem; }
.nav-group-toggle > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-toggle svg { grid-column: 3; grid-row: 1; }
.nav-group-badge {
  grid-column: 2; grid-row: 1; display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px;
  background: #e11d48; color: #fff; font: 800 .72rem/1 var(--font-ui); letter-spacing: 0; text-transform: none;
}
.nav-group-current {
  grid-column: 1 / -1; grid-row: 2; justify-self: start; display: inline-flex; align-items: center; gap: .4rem; max-width: 100%;
  margin: .35rem 0 .1rem; padding: .25rem .65rem .25rem .5rem; border-radius: 999px;
  background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile-deep); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile) 24%, transparent);
  font: 750 .78rem/1.2 var(--font-ui); font-style: normal; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.nav-group-current::before { content: ""; width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: var(--tile); }
.nav-group-current[hidden], .nav-group:not(.is-collapsed) .nav-group-current,
.nav-group-badge[hidden], .nav-group:not(.is-collapsed) .nav-group-badge { display: none; }
.nav-group:not(.is-collapsed) > .nav-group-items { animation: nav-section-open .2s ease-out; }
@keyframes nav-section-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nav-group-items { display: grid; gap: .15rem; min-width: 0; }
.nav-group-items .nav-item {
  position: relative; display: flex; align-items: center; gap: .7rem; min-width: 0; min-height: 2.95rem;
  margin: 0; padding: .3rem .55rem .3rem .3rem; border: 0; border-radius: .95rem;
  background: transparent; color: var(--sb-text); font: 650 .9rem/1.2 var(--font-ui); text-decoration: none;
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav-group-items .nav-item::before { content: none; }
.nav-group-items .nav-item:hover { border: 0; background: var(--sb-hover); color: var(--sb-ink); }
.nav-icon {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: .8rem;
  background: color-mix(in srgb, var(--tile) 12%, #fff); color: var(--tile-deep);
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.nav-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-group-items .nav-item.active {
  border: 0; background: color-mix(in srgb, var(--tile) 10%, #fff); color: var(--tile-deep); font-weight: 750;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tile) 28%, transparent);
}
.nav-group-items .nav-item.active .nav-icon { background: linear-gradient(135deg, var(--tile), var(--tile-deep)); color: #fff; box-shadow: 0 8px 16px -10px var(--tile); }
.nav-group-items .nav-item > span:not(.nav-count) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-items .nav-subitem { min-height: 2.55rem; margin-left: 1.15rem; padding-left: .3rem; border: 0; font-size: .85rem; }
.nav-group-items .nav-subitem .nav-icon { width: 1.95rem; height: 1.95rem; border-radius: .7rem; }
.nav-group-items .nav-subitem .nav-icon svg { width: 1rem; height: 1rem; }
.nav-group-items .nav-subitem.is-filter-active { border: 0; background: color-mix(in srgb, var(--tile) 10%, #fff); color: var(--tile-deep); }
.nav-count, .nav-group-items .nav-item .nav-count, .nav-group-items .nav-item.active .nav-count {
  position: static; display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.6rem; margin-left: auto; padding: 0 .45rem;
  border: 0; border-radius: 999px; background: #e11d48; color: #fff; font: 800 .7rem/1 var(--font-ui); transform: none;
  box-shadow: 0 6px 12px -8px rgba(225, 29, 72, .7);
}
.nav-count.is-zero, .nav-group-items .nav-item .nav-count.is-zero { display: none; }

.sidebar-card {
  margin-top: auto; padding: .6rem; border: 1px solid var(--sb-line); border-radius: 1rem;
  background: #f8fbff; box-shadow: none;
}
.sidebar-card .operator-row { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) .6rem; gap: .6rem; align-items: center; }
.sidebar-card .operator-avatar {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border: 0; border-radius: .8rem;
  background: linear-gradient(135deg, #10b981, #0f766e); color: #fff; font-size: .78rem; font-weight: 800;
}
.sidebar-card .operator-copy strong { color: var(--sb-ink); font-size: .88rem; font-weight: 750; }
.sidebar-card .operator-copy small { color: var(--sb-muted); font-size: .72rem; }
.sidebar-card .live-dot { background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, .18); }

/* ─── Page hero ──────────────────────────────────────────────────── */

body[data-page] #main > .topbar {
  position: relative; isolation: isolate; overflow: hidden; z-index: 0;
  display: flex; align-items: center; justify-content: flex-start; gap: 1.15rem; text-align: start;
  min-height: 0; margin: 0; padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem) 4.6rem;
  border: 0; border-radius: 24px; color: #fff;
  background:
    radial-gradient(36rem 18rem at 108% -40%, rgba(255, 255, 255, .2), transparent 62%),
    radial-gradient(30rem 18rem at -8% 140%, color-mix(in srgb, var(--sec-2) 65%, transparent), transparent 62%),
    linear-gradient(125deg, var(--sec-deep) 0%, var(--sec-strong) 52%, var(--sec) 100%);
  box-shadow: 0 26px 50px -34px var(--sec);
}
body[data-page="inbox"] #main > .topbar,
body[data-page="knowledge"] #main > .topbar { display: none; }
#main > .topbar::before {
  content: ""; position: absolute; z-index: -1; top: -8rem; right: -5rem; width: 20rem; height: 20rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 3rem rgba(255, 255, 255, .045), 0 0 0 6rem rgba(255, 255, 255, .03);
  pointer-events: none;
}
#main > .topbar::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .13) 1px, transparent 1px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(100deg, transparent 45%, #000); mask-image: linear-gradient(100deg, transparent 45%, #000);
}
.page-icon {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; flex: none; border-radius: 1.1rem;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 24px -14px rgba(0, 0, 0, .5);
}
.page-icon:empty { display: none; }
.page-icon svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#main > .topbar .eyebrow {
  display: inline-flex; width: max-content; margin: 0 0 .5rem; padding: .25rem .7rem; border-radius: 999px;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
}
#main > .topbar h2 { margin: 0; color: #fff; font-size: clamp(1.6rem, 1.15rem + 1.3vw, 2.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.035em; }
#main > .topbar .page-subtitle { display: block; max-width: 46rem; margin: .45rem 0 0; color: rgba(255, 255, 255, .9); font-size: .98rem; line-height: 1.55; }

/* Content rises over the bottom of the hero */
body[data-page]:not([data-page="inbox"]):not([data-page="knowledge"]) .view-section:not([hidden]) {
  position: relative; z-index: 1; margin-top: -3.1rem; padding: 0 clamp(.75rem, 2vw, 1.4rem) 1.75rem;
}
body[data-page="knowledge"] .view-section:not([hidden]) { padding: 0 0 1.75rem; }

/* ─── Cards, headings and type ───────────────────────────────────── */

/* The Knowledge header is a panel too, but keeps its own colour */
:where(.view-section) .panel:not(.journey-hero),
#viewSystem .panel,
.crm-results, .crm-explorer {
  border: 1px solid var(--ob-line); border-radius: 22px; background: #fff; box-shadow: var(--shadow);
}
.view-section h3 { color: var(--ob-ink); font-weight: 800; letter-spacing: -.02em; }
/* A heading with a count keeps the count on its right, at every width */
.panel-header:has(> .count-badge) { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .75rem; }
.panel-header > .count-badge { flex: none; margin-left: auto; }
.view-section h4 { color: var(--ob-ink); font-weight: 750; }
.view-section .eyebrow { color: var(--sec-strong); font-size: .68rem; font-weight: 800; letter-spacing: .11em; }
.view-section p, .view-section small { font-family: var(--font-ui); }

/* ─── Buttons ────────────────────────────────────────────────────── */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 2.65rem; padding: .5rem 1rem; border: 1.5px solid transparent; border-radius: .85rem;
  font: 700 .875rem/1.2 var(--font-ui); letter-spacing: -.005em; cursor: pointer; touch-action: manipulation;
  transition: transform .16s var(--ob-ease), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.button:active:not(:disabled) { transform: scale(.97); }
.button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.button svg { width: 1.05rem; height: 1.05rem; flex: none; }
.button.primary {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--sec-strong) 30%, color-mix(in srgb, var(--sec-strong) 62%, var(--sec-deep)));
  box-shadow: 0 10px 22px -14px var(--sec), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.button.primary:hover:not(:disabled) {
  border-color: transparent; transform: translateY(-1px);
  background: linear-gradient(135deg, var(--sec-strong) 20%, var(--sec-deep));
  box-shadow: 0 16px 28px -16px var(--sec), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.button.secondary { border-color: var(--ob-line-strong); background: #fff; color: var(--ob-text); }
.button.secondary:hover:not(:disabled) { border-color: var(--sec-line); background: var(--sec-soft); color: var(--sec-strong); }
.button.ghost-button { border-color: transparent; background: transparent; color: var(--ob-muted); }
.button.ghost-button:hover:not(:disabled) { background: var(--surface-3); color: var(--ob-ink); }
.button.compact { min-height: 2.35rem; padding: .35rem .8rem; border-radius: .75rem; font-size: .82rem; }
.button.danger-quiet { border-color: #fecaca; background: #fff; color: #b42318; }
.button.danger-quiet:hover:not(:disabled) { border-color: #fca5a5; background: #fff1f2; color: #9f1239; }
.ai-button, .button.ai-button {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed 70%, #a21caf);
  box-shadow: 0 10px 22px -14px #6d28d9;
}
.ai-button:hover:not(:disabled) { border-color: transparent; background: linear-gradient(135deg, #4338ca, #6d28d9 70%, #86198f); }

/* ─── Form fields ────────────────────────────────────────────────── */

input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])), select, textarea {
  border: 1.5px solid var(--ob-line-strong); border-radius: .85rem; background-color: #fff;
  color: var(--ob-ink); font-family: var(--font-ui); box-shadow: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
input:where(:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])):hover, select:hover, textarea:hover { border-color: #94a3b8; }
input:focus, select:focus, textarea:focus {
  border-color: var(--sec); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec) 14%, transparent); outline: none;
}
input::placeholder, textarea::placeholder { color: var(--ob-subtle); }
label { color: var(--ob-text); font-family: var(--font-ui); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--sec); }

/* ─── Pills and badges ───────────────────────────────────────────── */

.status-pill {
  display: inline-flex; align-items: center; gap: .35rem; width: auto; min-height: 1.9rem; padding: .25rem .7rem;
  border: 1px solid var(--ob-line); border-radius: 999px; background: #f8fafc; color: var(--ob-muted);
  font: 750 .75rem/1 var(--font-ui); white-space: nowrap;
}
.status-pill::before { content: ""; width: .45rem; height: .45rem; flex: none; border-radius: 50%; background: currentColor; opacity: .85; }
.status-pill.is-online { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.status-pill.is-warning { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.status-pill.is-error { border-color: #fecaca; background: #fff1f2; color: #b42318; }
.status-pill.is-loading::before { animation: ds-pulse 1.4s ease-in-out infinite; }
@keyframes ds-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.count-badge {
  display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.9rem; padding: 0 .55rem;
  border: 1px solid var(--sec-line); border-radius: 999px; background: var(--sec-soft); color: var(--sec-strong);
  font: 800 .76rem/1 var(--font-ui); font-variant-numeric: tabular-nums;
}
.soft-badge {
  display: inline-flex; align-items: center; padding: .28rem .65rem; border: 1px solid var(--sec-line); border-radius: 999px;
  background: var(--sec-soft); color: var(--sec-strong); font: 800 .7rem/1.1 var(--font-ui);
}

/* ─── Key-number cards ───────────────────────────────────────────── */

.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label icon" "value icon" "note note"; align-items: start; column-gap: .75rem; row-gap: .1rem;
  min-width: 0; min-height: 0; padding: 1rem 1.05rem 1.05rem; border: 1px solid var(--ob-line); border-radius: 20px;
  background: #fff; box-shadow: var(--shadow); color: var(--ob-ink); font-family: var(--font-ui); text-align: start;
}
:is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) > span:not(.stat-icon) {
  grid-area: label; color: var(--ob-muted); font-size: .82rem; font-weight: 700; line-height: 1.3;
}
:is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) > strong {
  grid-area: value; margin: .15rem 0 0; color: var(--ob-ink); font-size: 1.75rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
:is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) > small {
  grid-area: note; margin-top: .35rem; color: var(--ob-subtle); font-size: .78rem; line-height: 1.4;
}
.stat-icon {
  grid-area: icon; display: grid; place-items: center; width: 2.65rem; height: 2.65rem; border-radius: .9rem;
  background: var(--tone-soft, var(--sec-soft)); color: var(--tone, var(--sec-strong));
}
.stat-icon .journey-icon { width: 1.3rem; height: 1.3rem; }
.stat-icon[data-tone="blue"] { --tone: #1d4ed8; --tone-soft: #eff6ff; }
.stat-icon[data-tone="violet"] { --tone: #6d28d9; --tone-soft: #f5f3ff; }
.stat-icon[data-tone="indigo"] { --tone: #4338ca; --tone-soft: #eef2ff; }
.stat-icon[data-tone="orange"] { --tone: #c2410c; --tone-soft: #fff7ed; }
.stat-icon[data-tone="amber"] { --tone: #b45309; --tone-soft: #fffbeb; }
.stat-icon:is([data-tone="rose"], [data-tone="red"]) { --tone: #be123c; --tone-soft: #fff1f2; }
.stat-icon[data-tone="green"] { --tone: #047857; --tone-soft: #ecfdf5; }
.stat-icon[data-tone="teal"] { --tone: #0f766e; --tone-soft: #f0fdfa; }
.pipeline-daily-card { cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s var(--ob-ease); }
.pipeline-daily-card:hover { border-color: var(--sec-line); transform: translateY(-1px); }
.pipeline-daily-card.is-active { border-color: var(--sec); background: linear-gradient(135deg, var(--sec-soft), #fff 80%); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec) 14%, transparent), var(--shadow); }

/* ─── Inbox ──────────────────────────────────────────────────────── */

#viewInbox .inbox-panel, #viewInbox .detail-panel {
  border: 1px solid var(--ob-line); border-radius: 22px; background: #fff; box-shadow: var(--shadow); overflow: hidden;
}
#viewInbox .panel-header { border-bottom: 1px solid var(--ob-line); background: #fff; }
#viewInbox .inbox-heading h3, #viewInbox #inboxTitle { color: var(--ob-ink); font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; }
#viewInbox .inbox-tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .2rem; padding: .25rem;
  border: 0; border-radius: 14px; background: var(--surface-3);
}
#viewInbox .inbox-tabs button {
  min-height: 2.35rem; padding: .3rem .4rem; border: 0; border-radius: 11px; background: transparent;
  color: var(--ob-muted); font: 700 .82rem/1 var(--font-ui); cursor: pointer; transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
#viewInbox .inbox-tabs button:hover { color: var(--ob-ink); }
#viewInbox .inbox-tabs button[aria-pressed="true"] { background: #fff; color: var(--sec-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 10px -6px rgba(15, 23, 42, .25); }
#viewInbox .conversation-list { gap: .3rem; padding: .5rem .55rem; }
#viewInbox .conversation-row, #viewInbox .conversation-row[data-stage] {
  position: relative; margin: 0; padding: .7rem .75rem .7rem 1rem; border: 1px solid transparent; border-radius: 16px;
  background: #fff; box-shadow: none; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#viewInbox .conversation-row[data-stage]::before {
  content: ""; position: absolute; top: .85rem; bottom: .85rem; left: .4rem; width: 3px; border-radius: 3px;
  background: var(--stage-line, var(--ob-line-strong));
}
#viewInbox .conversation-row:hover { border-color: var(--ob-line); background: #f8fafc; }
#viewInbox .conversation-row.is-selected,
#viewInbox .conversation-row[aria-current="true"] {
  border-color: var(--sec-line); background: linear-gradient(135deg, var(--sec-soft), #fff 85%);
  box-shadow: 0 10px 20px -18px var(--sec);
}
#viewInbox .conversation-row .chat-id { color: var(--ob-ink); font-weight: 750; }
#viewInbox .conversation-row .row-preview { color: var(--ob-muted); }
#viewInbox .conversation-account {
  display: inline-flex; width: max-content; max-width: 100%; padding: .12rem .5rem; border: 1px solid var(--ob-line);
  border-radius: 999px; background: #fff; color: var(--ob-muted); font-size: .72rem; font-weight: 650;
}
#viewInbox .unread-dot { background: #f43f5e; box-shadow: 0 0 0 3px rgba(244, 63, 94, .18); }
#viewInbox .detail-header .eyebrow { color: var(--sec-strong); }
#viewInbox .detail-header h3 { color: var(--ob-ink); font-weight: 800; }
#viewInbox .thread-control {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.5rem; padding: .3rem .8rem;
  border: 1.5px solid var(--ob-line-strong); border-radius: .8rem; background: #fff; color: var(--ob-text); font: 700 .82rem/1 var(--font-ui);
}
#viewInbox .thread-control:hover { border-color: var(--sec-line); background: var(--sec-soft); color: var(--sec-strong); }
#viewInbox .thread-control svg, #viewInbox .jump-to-latest svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#viewInbox .message-list {
  background: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .055) 1px, transparent 0) 0 0 / 18px 18px, #f8fafc;
}
#viewInbox .message-day {
  padding: .3rem .75rem; border: 1px solid var(--ob-line); border-radius: 999px; background: #fff;
  color: var(--ob-muted); font-size: .72rem; font-weight: 750; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
#viewInbox .message-bubble {
  border: 1px solid var(--ob-line); border-radius: 18px 18px 18px 6px; background: #fff; color: var(--ob-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
#viewInbox .message-bubble.is-outbound {
  border-color: transparent; border-radius: 18px 18px 6px 18px; color: #fff;
  background: linear-gradient(135deg, var(--sec-strong), color-mix(in srgb, var(--sec-strong) 55%, var(--sec-deep)));
  box-shadow: 0 10px 22px -16px var(--sec);
}
#viewInbox .message-bubble.is-outbound :is(p, a, strong, span) { color: inherit; }
#viewInbox .message-bubble.is-outbound .message-time { color: rgba(255, 255, 255, .82); }
#viewInbox .message-bubble .message-time { color: var(--ob-subtle); }
#viewInbox .jump-to-latest {
  display: inline-flex; align-items: center; gap: .35rem; border: 0; border-radius: 999px;
  background: var(--sec-strong); color: #fff; font: 700 .8rem/1 var(--font-ui); box-shadow: var(--shadow-float);
}
#viewInbox .reply-form { border-top: 1px solid var(--ob-line); background: #fff; }
#viewInbox .reply-form textarea { border-radius: 1rem; font-family: var(--font-ui); }
#viewInbox .reply-heading, #viewInbox .reply-form label { color: var(--ob-ink); font-weight: 750; }
#viewInbox .attach-button {
  display: grid; place-items: center; min-width: 2.65rem; min-height: 2.65rem; border: 1.5px solid var(--ob-line-strong);
  border-radius: .85rem; background: #fff; color: var(--ob-text);
}
#viewInbox .attach-button:hover { border-color: var(--sec-line); background: var(--sec-soft); color: var(--sec-strong); }

/* ─── Customer record ────────────────────────────────────────────── */

.crm-detail-bar { border-bottom: 1px solid var(--sec-line); background: linear-gradient(90deg, var(--sec-soft), #fff 75%); }
.crm-detail-bar strong { color: var(--ob-ink); font-weight: 800; }
.context-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .2rem; padding: .25rem; border: 0; border-radius: 14px; background: var(--surface-3); }
.context-tabs button {
  min-height: 2.35rem; padding: .3rem .4rem; border: 0; border-radius: 11px; background: transparent;
  color: var(--ob-muted); font: 700 .82rem/1 var(--font-ui); cursor: pointer; transition: background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.context-tabs button:hover { color: var(--ob-ink); }
.context-tabs button[aria-selected="true"] { background: #fff; color: var(--sec-strong); box-shadow: 0 1px 2px rgba(15, 23, 42, .08), 0 4px 10px -6px rgba(15, 23, 42, .25); }
.lead-due-badge { display: inline-flex; align-items: center; padding: .3rem .75rem; border: 1px solid var(--ob-line); border-radius: 999px; background: #f8fafc; color: var(--ob-muted); font: 800 .74rem/1.1 var(--font-ui); }
.lead-due-badge.is-due { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.lead-due-badge.is-overdue { border-color: #fecaca; background: #fff1f2; color: #b42318; }

/* ─── Dialogs and the toast ──────────────────────────────────────── */

.auth-dialog {
  border: 0; border-top: 6px solid transparent; border-radius: 24px; padding: 0; color: var(--ob-ink); font-family: var(--font-ui);
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #2563eb, #7c3aed 55%, #db2777) border-box;
  box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .55);
}
.auth-dialog::backdrop { background: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.auth-dialog h2 { color: var(--ob-ink); font-weight: 800; letter-spacing: -.03em; }
.auth-dialog .eyebrow { color: #4338ca; font-weight: 800; letter-spacing: .12em; }
.auth-dialog .auth-copy, .auth-dialog p { color: var(--ob-muted); }
.auth-dialog .auth-brand img { border-radius: 1rem; box-shadow: 0 10px 22px -14px rgba(37, 99, 235, .6); }
.auth-dialog .button.primary { background: linear-gradient(135deg, #1d4ed8, #4338ca 60%, #6d28d9); box-shadow: 0 12px 24px -14px #4338ca; }
.auth-token-fallback { border: 1px solid var(--ob-line); border-radius: 16px; background: #f8fafc; }
.toast {
  border: 0; border-radius: 1rem; background: #0f172a; color: #fff; font: 600 .9rem/1.45 var(--font-ui);
  box-shadow: 0 24px 48px -20px rgba(15, 23, 42, .6);
}

/* ─── Sizes ──────────────────────────────────────────────────────── */

@media (min-width: 681px) {
  body { padding: 12px; }
  .shell { display: grid; grid-template-columns: 17rem minmax(0, 1fr); height: calc(100dvh - 24px); min-height: 0; overflow: hidden; }
  .sidebar { position: relative; top: auto; width: auto; height: 100%; min-height: 0; align-self: stretch; }
  .main { height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; border-radius: 24px; }
  /* The Inbox fills the frame exactly; its two panels scroll on their own. */
  body[data-page="inbox"] #main.main { height: 100%; min-height: 0; overflow: hidden; }
  body[data-page="inbox"] #viewInbox { height: 100%; min-height: 0; padding: 0; }
  body[data-page="inbox"] #viewInbox .workspace-grid { height: 100%; min-height: 0; max-height: none; }
  body[data-page="inbox"] #viewInbox .inbox-panel,
  body[data-page="inbox"] #viewInbox .detail-panel { height: 100%; min-height: 0; max-height: none; }
}

/* A narrow rail of icons: when the owner collapses it on a wide screen, and always below 1200px */
@media (min-width: 1200px) {
  html[data-sidebar="collapsed"] .shell { grid-template-columns: 5.25rem minmax(0, 1fr); }
}
@media (min-width: 681px) and (max-width: 1199px) {
  .shell, html[data-sidebar] .shell { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .sidebar .sidebar-toggle { display: none; }
}
@media (min-width: 1200px) {
  html[data-sidebar="collapsed"] .sidebar { align-items: center; padding-inline: .6rem; }
  html[data-sidebar="collapsed"] .sidebar-head { flex-direction: column; gap: .6rem; }
  html[data-sidebar="collapsed"] .sidebar .brand-lockup .brand-copy,
  html[data-sidebar="collapsed"] .nav-group-toggle,
  html[data-sidebar="collapsed"] .nav-group-label,
  html[data-sidebar="collapsed"] .nav-group-items .nav-item > span:not(.nav-count),
  html[data-sidebar="collapsed"] .sidebar-card .operator-copy,
  html[data-sidebar="collapsed"] .sidebar-card .operator-presence { display: none; }
  html[data-sidebar="collapsed"] .sidebar-utilities { flex-direction: column; padding: .3rem; }
  html[data-sidebar="collapsed"] .sidebar-utilities .status-pill { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; font-size: 0; gap: 0; }
  html[data-sidebar="collapsed"] .nav-list { align-items: center; gap: .55rem; }
  html[data-sidebar="collapsed"] .nav-group, html[data-sidebar="collapsed"] .nav-group-items,
  html[data-sidebar="collapsed"] .nav-group.is-collapsed .nav-group-items { display: grid; justify-items: center; gap: .3rem; }
  html[data-sidebar="collapsed"] .nav-group-items .nav-item { justify-content: center; width: 3.1rem; min-height: 3.1rem; margin: 0; padding: .4rem; }
  html[data-sidebar="collapsed"] .nav-group-items .nav-subitem { display: none; }
  html[data-sidebar="collapsed"] .nav-count { position: absolute; top: .1rem; right: .05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; font-size: .6rem; }
  html[data-sidebar="collapsed"] .sidebar-card { padding: .4rem; }
  html[data-sidebar="collapsed"] .sidebar-card .operator-row { display: grid; grid-template-columns: 2.35rem; justify-content: center; }
}
@media (min-width: 681px) and (max-width: 1199px) {
  .sidebar { align-items: center; padding-inline: .6rem; }
  .sidebar-head { flex-direction: column; gap: .6rem; }
  .sidebar .brand-lockup .brand-copy, .nav-group-toggle, .nav-group-label,
  .nav-group-items .nav-item > span:not(.nav-count),
  .sidebar-card .operator-copy, .sidebar-card .operator-presence { display: none; }
  .sidebar-utilities { flex-direction: column; padding: .3rem; }
  .sidebar-utilities .status-pill, #liveStatus { display: inline-flex; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; font-size: 0; gap: 0; }
  .nav-list { align-items: center; gap: .55rem; overflow: visible; }
  .nav-group, .nav-group-items, .nav-group.is-collapsed .nav-group-items { display: grid; justify-items: center; gap: .3rem; width: auto; }
  .nav-group-items .nav-item, .nav-group-items .nav-subitem {
    justify-content: center; width: 3.1rem; min-width: 0; min-height: 3.1rem; margin: 0; padding: .4rem; border-radius: .95rem;
  }
  .nav-group-items .nav-subitem { display: none; }
  .nav-count { position: absolute; top: .1rem; right: .05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; font-size: .6rem; }
  .sidebar-card { display: block; padding: .4rem; }
  .sidebar-card .operator-row { display: grid; grid-template-columns: 2.35rem; justify-content: center; }
}

/* The Inbox shows one pane at a time below 1050px (list or conversation), so it needs one column. */
@media (max-width: 1050px) {
  #viewInbox .workspace-grid { grid-template-columns: minmax(0, 1fr); max-width: none; }
}

/* Phones: a top bar of sections that scrolls sideways */
@media (max-width: 680px) {
  body { padding: 0; }
  .shell { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  .sidebar {
    position: sticky; top: 0; z-index: 30; display: flex; flex-direction: row; align-items: center; gap: .5rem;
    width: 100%; height: auto; min-height: 0; padding: max(.5rem, env(safe-area-inset-top)) .5rem .5rem;
    border-width: 0 0 1px; border-radius: 0 0 20px 20px; overflow: visible; box-shadow: 0 10px 24px -18px rgba(15, 39, 66, .35);
  }
  .sidebar-head, .sidebar-utilities, .sidebar-card, .nav-group-toggle, .nav-group-label { display: none; }
  .nav-list {
    display: flex; flex: 1; flex-direction: row; align-items: center; gap: .3rem; width: 100%; min-width: 0;
    overflow-x: auto; overflow-y: visible; padding: .15rem 2.5rem .15rem .1rem; scroll-snap-type: x proximity; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent);
  }
  .nav-list::-webkit-scrollbar { display: none; }
  .nav-group, .nav-group-items, .nav-group.is-collapsed .nav-group-items { display: flex; flex: none; gap: .3rem; width: auto; }
  .nav-group-items .nav-subitem { display: none; }
  .nav-group-items .nav-item {
    flex: none; width: auto; min-width: max-content; min-height: 2.75rem; gap: .5rem; padding: .25rem .85rem .25rem .25rem;
    border-radius: .9rem; font-size: .84rem; scroll-snap-align: start;
  }
  .nav-group-items .nav-item > span:not(.nav-count) { display: inline; }
  .nav-icon { width: 2.15rem; height: 2.15rem; border-radius: .75rem; }
  .nav-count { position: absolute; top: -.15rem; right: -.1rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; font-size: .6rem; }
  .main { height: auto; overflow: visible; border-radius: 0; }
  body[data-page] #main > .topbar { flex-direction: row; align-items: flex-start; gap: .85rem; margin: .65rem .65rem 0; padding: 1.15rem 1.15rem 3.9rem; border-radius: 20px; }
  .page-icon { width: 2.85rem; height: 2.85rem; border-radius: .95rem; }
  .page-icon svg { width: 1.4rem; height: 1.4rem; }
  #main > .topbar .page-subtitle { font-size: .9rem; }
  body[data-page]:not([data-page="inbox"]):not([data-page="knowledge"]) .view-section:not([hidden]) { margin-top: -2.6rem; padding: 0 1.1rem 1.5rem; }
  body[data-page="knowledge"] .view-section:not([hidden]) { padding: .65rem .65rem 1.5rem; }
  .customer-detail-shell .pipeline-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .status-pill.is-loading::before { animation: none; }
}

/* ─── Fit and finish: every section at every size ─────────────────
   From a section-by-section audit at 1920 to 360 pixels wide, including short laptop
   screens and large text: nothing squeezed, cut, covered or too small to read or tap. */

/* Sidebar: on short screens it scrolls instead of squeezing its sections together */
.sidebar > .sidebar-head, .sidebar > .sidebar-utilities, .sidebar > .nav-list, .sidebar > .sidebar-card { flex-shrink: 0; }
.brand-copy .eyebrow { margin: 0 0 .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .01em; text-transform: none; color: var(--accent-ink); }
@media (min-width: 1200px) and (max-height: 820px) {
  .sidebar { gap: .75rem; padding-block: .8rem; }
  .nav-list { gap: .65rem; }
  .nav-group-items .nav-item { min-height: 2.6rem; }
  .nav-icon { width: 2.05rem; height: 2.05rem; border-radius: .7rem; }
  .nav-icon svg { width: 1.05rem; height: 1.05rem; }
}
/* Badges sit on the icon corner in the icon rail, instead of pushing the icon aside */
@media (min-width: 681px) and (max-width: 1199px) {
  .sidebar .nav-group-items .nav-item .nav-count {
    position: absolute; top: .05rem; right: .05rem; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; font-size: .72rem; box-shadow: 0 0 0 2px #fff;
  }
}
@media (min-width: 1200px) {
  html[data-sidebar="collapsed"] .sidebar .nav-group-items .nav-item .nav-count {
    position: absolute; top: .05rem; right: .05rem; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; font-size: .72rem; box-shadow: 0 0 0 2px #fff;
  }
}
@media (max-width: 680px) {
  .sidebar .nav-group-items .nav-item .nav-count { position: absolute; top: -.2rem; right: -.15rem; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; font-size: .72rem; }
}
.sidebar-card .operator-avatar { background: linear-gradient(135deg, #047857, #064e3b); }

/* Readable colours: every label meets 4.5:1 on its background */
body { --ob-subtle: #57677e; }
body[data-page] #main > .topbar {
  background:
    radial-gradient(36rem 18rem at 108% -40%, rgba(255, 255, 255, .14), transparent 62%),
    radial-gradient(30rem 18rem at -8% 140%, color-mix(in srgb, var(--sec-2) 55%, transparent), transparent 62%),
    linear-gradient(125deg, var(--sec-deep) 0%, var(--sec-strong) 100%);
}
#main > .topbar .eyebrow { background: rgba(15, 23, 42, .24); }
#main > .topbar .page-subtitle { color: #fff; }
#viewInbox .conversation-row .row-time, #viewInbox .conversation-primary .row-time { color: var(--ob-subtle); }
#viewInbox .message-bubble.is-outbound .message-content,
#viewInbox .message-bubble.is-outbound .message-content :is(p, a, strong, span, em, li, small) { color: #fff; }
#viewInbox .message-bubble.is-outbound .message-content a { text-decoration: underline; }
#viewInbox .message-bubble.is-outbound .message-content.is-collapsed::after { background: linear-gradient(transparent, color-mix(in srgb, var(--sec-strong) 70%, var(--sec-deep))); }
#viewSystem :is(.accounts-heading p, .subsection-heading p, .identity-channel-copy small, .standalone-channel-copy small, .compliance-strip span, summary small, .business-identity-header p, .field-help, .connection-forms-heading p, .connect-facebook-heading p) { color: var(--ob-muted); }
#viewSystem .settings-disclosure > summary small, #viewSystem summary small { font-size: .75rem; }
:is(.identity-summary-grid span, .identity-channel-row small, .identity-conversation-row small, .merge-candidate-card small, .merge-evidence-card small) { color: var(--ob-muted); }
:is(.merge-evidence-card small, .merge-identity-strip span, .merge-candidate-card small) { font-size: .75rem; }
.channel-label-form label > span { font-size: .72rem; }
#viewSystem .channel-label-help { color: var(--ob-muted); }
:is(.pipeline-daily-card, .crm-summary-card, .analytics-metric, .task-metric) > small { color: var(--ob-muted); }

/* Readable sizes: no label under 11px */
.eyebrow, .view-section .eyebrow, .auth-dialog .eyebrow { font-size: .72rem; }
.nav-group-toggle, .nav-group-label { font-size: .7rem; }
.crm-table th { font-size: .72rem; }
.crm-table :is(small, .crm-activity), .crm-lead-link small, .crm-saved-bar small { font-size: .76rem; }
.crm-score small, .test-badge, .pipeline-step-number, .pilot-step-state, .pilot-next-action > span,
.pilot-outreach-summary > span, .security-note, .workflow-card-icon, .focus-rule > span, .context-section-heading > span, .ai-spark { font-size: .7rem; }
.crm-row-action { font-size: .78rem; }
.pipeline-stage button, .context-pane .pipeline-stage button, .customer-detail-shell .pipeline-stage button { font-size: .78rem; }
.context-pane .pipeline-step-number, .customer-detail-shell .pipeline-step-number { font-size: .7rem; }
.pipeline-card .pipeline-next, .task-main em, .public-contact-link, summary small, .identity-channel-row small,
.customer-identity-panel small, .identity-summary-grid span, .pilot-contact-option small, .compliance-strip span, .identity-channel-copy small, .standalone-channel-copy small { font-size: .75rem; }

/* Key numbers: the icon sits in the corner, so the number gets the full card width */
:is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) {
  grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "note"; padding-right: 1.05rem;
}
:is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) > span:not(.stat-icon) { padding-right: 3.1rem; min-height: 2.2rem; display: flex; align-items: flex-start; }
:is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) > strong { font-size: clamp(1.4rem, 1.1rem + .9vw, 1.75rem); overflow-wrap: anywhere; }
.stat-icon { position: absolute; top: .9rem; right: .9rem; }

/* Analytics */
/* Six key numbers in a row only where they fit; the full sidebar leaves too little room below 1420px */
@media (min-width: 1251px) and (max-width: 1419px) {
  html:not([data-sidebar="collapsed"]) .analytics-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.analytics-bar-row i b { background: linear-gradient(90deg, var(--sec-2), var(--sec-strong)); }
.pilot-contact-option small, .pilot-contact-option small a { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.pilot-channel-chip { grid-template-columns: 2.4rem minmax(0, 1fr) auto; grid-template-areas: "icon name status" "icon helper helper"; row-gap: .15rem; }
.pilot-channel-chip > :first-child { grid-area: icon; }
.pilot-channel-chip strong { grid-area: name; min-width: 0; overflow-wrap: anywhere; }
.pilot-channel-chip em { grid-area: status; }
.pilot-channel-chip small { grid-area: helper; }
@media (max-width: 760px) {
  .pilot-plan { grid-template-columns: minmax(0, 1fr); }
  .pilot-plan ol { grid-template-columns: minmax(0, 1fr); }
}
/* Placeholders while each part loads */
:is(#analyticsMetrics, #pilotMetrics, #analyticsStages, #analyticsSources, #analyticsDrafts, #analyticsMovements, #analyticsLostReasons, #analyticsCommitments, #crmSummary, #pipelineDaily, #taskMetrics):empty {
  min-height: 6.5rem; border-radius: 18px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%) 0 0 / 200% 100%;
  animation: ds-shimmer 1.3s ease-in-out infinite;
}
@keyframes ds-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Customers */
.crm-results { overflow: visible; }
.crm-results-heading { position: relative; z-index: 30; }
.crm-columns-options { z-index: 31; }
/* Checkboxes and radios keep their own size; the 44px field minimum is for text fields */
input[type="checkbox"], input[type="radio"] { min-height: 0; }
.crm-columns-options { gap: .1rem; min-width: 13rem; padding: .4rem; border-color: var(--ob-line); border-radius: 14px; box-shadow: var(--shadow-float); }
.crm-columns-options label { min-height: 2.4rem; padding: .3rem .6rem; border-radius: 10px; color: var(--ob-text); font-size: .86rem; font-weight: 600; }
.crm-columns-options label:hover { background: var(--sec-soft); }
.crm-columns-options input { margin: 0; accent-color: var(--sec); }
.crm-lead-link strong { white-space: normal; overflow-wrap: anywhere; }
.crm-table .crm-next { white-space: normal; }
@media (max-width: 680px) {
  .crm-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .crm-filter-bar .crm-search-label, .crm-filter-bar > :first-child { grid-column: 1 / -1; }
}

/* Platforms: each channel's buttons get their own line under its name */
.identity-channel {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "icon copy state" ". actions actions";
  row-gap: .55rem;
}
.identity-channel > :first-child { grid-area: icon; align-self: start; }
.identity-channel-copy { grid-area: copy; }
.identity-channel .connection-state { grid-area: state; align-self: start; }
.identity-channel-actions { grid-area: actions; flex-wrap: wrap; }
.identity-channel-copy small, .standalone-channel small { white-space: normal; text-overflow: clip; }
.identity-channel-copy strong, .standalone-channel-copy strong { overflow-wrap: anywhere; }
@media (max-width: 680px) {
  /* The status moves under the name, so a long handle never runs into it */
  .identity-channel { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon copy" "icon state" "actions actions"; }
  .identity-channel .connection-state { justify-self: start; }
  .identity-channel-actions .button { flex: 1 1 8rem; }
  /* The Columns menu opens in place, at full width, instead of off the screen edge */
  .crm-columns-menu { position: static; }
  .crm-columns-options { position: static; margin-top: .45rem; min-width: 0; width: 100%; box-shadow: none; }
}

/* Today: below 980px each task keeps its type and due time on a second line */
@media (max-width: 980px) {
  .task-row { grid-template-columns: .65rem 2.35rem minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: .45rem; }
  .task-row > .task-priority { grid-column: 1; grid-row: 1 / 3; }
  .task-row > .task-channel { grid-column: 2; grid-row: 1 / 3; align-self: start; }
  .task-row > .task-main { grid-column: 3; grid-row: 1; }
  .task-row > .task-kind { grid-column: 3; grid-row: 2; justify-self: start; }
  .task-row > .task-due { grid-column: 3; grid-row: 2; justify-self: end; align-self: center; }
  .task-row > .task-open { grid-column: 4; grid-row: 1 / 3; align-self: center; }
}
@media (max-width: 620px) {
  .task-row { grid-template-columns: .55rem 2rem minmax(0, 1fr); }
  .task-row > .task-due { grid-row: 3; justify-self: start; }
}

/* Dialogs: the colour strip is a separate layer, so text sits on plain white */
.auth-dialog { border: 0; background: #fff; }
.auth-dialog::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #2563eb, #7c3aed 55%, #db2777); }

/* Fingers: 44px tap targets on tablets and phones */
@media (max-width: 1024px) {
  .button, .button.compact, .thread-control, #viewInbox .thread-control, .inbox-tabs button, #viewInbox .inbox-tabs button, .context-tabs button,
  .task-scope-tabs button, .segmented-control button, .journey-link, .ob-chip-button, .crm-row-action, .crm-columns-menu > summary,
  .crm-lead-link, .compliance-strip a, .public-contact-link, .credential-rotation summary, .settings-disclosure > summary,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select { min-height: 44px !important; }
  .crm-row-action, .journey-link { min-width: 44px; }
  .pilot-contact-option small a { display: inline-flex; align-items: center; min-height: 44px; }
  .sidebar-utilities .button, .sidebar-utilities .button.ghost-button, .sidebar-utilities .button.secondary { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  .public-contact-link, .compliance-strip a { display: inline-flex; align-items: center; }
  .journey-link { min-width: 44px; }
  :is(.crm-filter-bar, .crm-saved-bar, .crm-rule, .crm-rule-heading, .crm-results-heading) :is(input, select) { height: 44px; }
}
/* Phones: key numbers two to a row, so the first screen is not only summary cards */
@media (max-width: 680px) {
  #crmSummary, #pipelineDaily, #taskMetrics, #analyticsMetrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  :is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) { padding: .85rem .85rem .9rem; }
  :is(.crm-summary-card, .analytics-metric, .pipeline-daily-card, .task-metric) > span:not(.stat-icon) { padding-right: 2.6rem; }
  .stat-icon { top: .75rem; right: .75rem; width: 2.2rem; height: 2.2rem; border-radius: .75rem; }
  .stat-icon .journey-icon { width: 1.1rem; height: 1.1rem; }
}
@media (max-width: 680px) {
  #viewInbox .conversation-row .row-time, #viewInbox .conversation-primary .row-time { font-size: .75rem; }
}
/* Phones: 16px form text, so iPhones do not zoom in when a field is tapped */
@media (max-width: 680px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
}

/* ===================================================================
   Business onboarding: a full-screen wizard that teaches the assistant
   about the business, and its summary on the Knowledge page. Each of the
   seven steps has its own colour, chosen with data-step (see app.js).
   =================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Registered so the whole wizard can fade from one step's colour to the next. */
@property --step { syntax: "<color>"; inherits: true; initial-value: #2563eb; }
@property --step-strong { syntax: "<color>"; inherits: true; initial-value: #1d4ed8; }
@property --step-deep { syntax: "<color>"; inherits: true; initial-value: #1e3a8a; }
@property --step-soft { syntax: "<color>"; inherits: true; initial-value: #eff6ff; }
@property --step-line { syntax: "<color>"; inherits: true; initial-value: #bfdbfe; }
@property --step-glow { syntax: "<color>"; inherits: true; initial-value: #60a5fa; }

/* --step-strong carries white text and works as text on white; --step is for fills and borders. */
.onboarding[data-step="business"], .onboarding [data-step="business"], #viewKnowledge [data-step="business"] {
  --step: #2563eb; --step-strong: #1d4ed8; --step-deep: #1e3a8a; --step-soft: #eff6ff; --step-line: #bfdbfe; --step-glow: #60a5fa;
}
.onboarding[data-step="customers"], .onboarding [data-step="customers"], #viewKnowledge [data-step="customers"] {
  --step: #7c3aed; --step-strong: #6d28d9; --step-deep: #4c1d95; --step-soft: #f5f3ff; --step-line: #ddd6fe; --step-glow: #a78bfa;
}
.onboarding[data-step="offer"], .onboarding [data-step="offer"], #viewKnowledge [data-step="offer"] {
  --step: #ea580c; --step-strong: #c2410c; --step-deep: #7c2d12; --step-soft: #fff7ed; --step-line: #fed7aa; --step-glow: #fb923c;
}
.onboarding[data-step="why"], .onboarding [data-step="why"], #viewKnowledge [data-step="why"] {
  --step: #e11d48; --step-strong: #be123c; --step-deep: #881337; --step-soft: #fff1f2; --step-line: #fecdd3; --step-glow: #fb7185;
}
.onboarding[data-step="process"], .onboarding [data-step="process"], #viewKnowledge [data-step="process"] {
  --step: #0d9488; --step-strong: #0f766e; --step-deep: #134e4a; --step-soft: #f0fdfa; --step-line: #99f6e4; --step-glow: #2dd4bf;
}
.onboarding[data-step="faq"], .onboarding [data-step="faq"], #viewKnowledge [data-step="faq"] {
  --step: #4f46e5; --step-strong: #4338ca; --step-deep: #312e81; --step-soft: #eef2ff; --step-line: #c7d2fe; --step-glow: #818cf8;
}
.onboarding[data-step="assistant"], .onboarding [data-step="assistant"], #viewKnowledge [data-step="assistant"],
.onboarding[data-step="done"], .onboarding [data-step="done"] {
  --step: #059669; --step-strong: #047857; --step-deep: #064e3b; --step-soft: #ecfdf5; --step-line: #a7f3d0; --step-glow: #34d399;
}

.onboarding, #viewKnowledge {
  --ob-ink: #0f172a;
  --ob-text: #1e293b;
  --ob-muted: #475569;
  --ob-subtle: #57677e;
  --ob-line: #e2e8f0;
  --ob-line-strong: #cbd5e1;
  --ob-bg: #f6f8fc;
  --ob-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 16px -8px rgba(15, 23, 42, .1);
  --ob-shadow-lg: 0 30px 70px -30px rgba(15, 23, 42, .35);
  --ob-font: "Plus Jakarta Sans", Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ob-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Shared pieces */
.journey-icon {
  width: 1.15rem; height: 1.15rem; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.ob-glyph { display: inline-grid; place-items: center; min-width: 1.6rem; font-size: .82rem; font-weight: 800; letter-spacing: .03em; line-height: 1; font-variant-numeric: tabular-nums; }
.ob-button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: 0 1.15rem; border: 1.5px solid transparent; border-radius: .95rem;
  font: 700 .95rem/1.2 var(--ob-font); letter-spacing: -.005em; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .16s var(--ob-ease), box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ob-button .journey-icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.2; }
.ob-button:active:not(:disabled) { transform: scale(.97); }
.ob-button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ob-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--step-strong) 35%, color-mix(in srgb, var(--step-strong) 65%, var(--step-deep)));
  box-shadow: 0 10px 22px -12px var(--step), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.ob-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 16px 28px -14px var(--step), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ob-secondary { border-color: var(--ob-line-strong); background: #fff; color: var(--ob-text); }
.ob-secondary:hover:not(:disabled) { border-color: var(--step-line); background: var(--step-soft); color: var(--step-strong); }
.ob-light { background: #fff; color: #312e81; box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .6); }
.ob-light:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 18px 32px -16px rgba(15, 23, 42, .65); }
.ob-large { min-height: 3.4rem; padding: 0 1.6rem; border-radius: 1.05rem; font-size: 1.02rem; }
.ob-pill {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.1rem; padding: .3rem .8rem;
  border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap;
}
.ob-pill .journey-icon { width: 1rem; height: 1rem; stroke-width: 2.2; }
.onboarding :focus-visible { outline-color: var(--step); }

/* ─── Knowledge page ─────────────────────────────────────────────── */

#viewKnowledge:not([hidden]) { display: grid; gap: 1rem; align-content: start; }
.journey-hero {
  container: journey-hero / inline-size;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 1.5rem; padding: clamp(1.1rem, 2.4vw, 2rem);
  border: 0; border-radius: 1.5rem; color: #fff; font-family: var(--ob-font);
  background:
    radial-gradient(36rem 20rem at 108% -30%, rgba(255, 255, 255, .16), transparent 62%),
    radial-gradient(30rem 18rem at -8% 125%, rgba(236, 72, 153, .34), transparent 62%),
    linear-gradient(125deg, #1e3a8a 0%, #3730a3 48%, #6d28d9 100%);
  box-shadow: 0 26px 50px -30px rgba(55, 48, 163, .75);
}
.journey-hero[data-status="ready"] {
  background:
    radial-gradient(36rem 20rem at 108% -30%, rgba(255, 255, 255, .14), transparent 62%),
    radial-gradient(30rem 18rem at -8% 125%, rgba(45, 212, 191, .3), transparent 62%),
    linear-gradient(125deg, #064e3b 0%, #047857 55%, #0f766e 100%);
  box-shadow: 0 26px 50px -30px rgba(4, 120, 87, .75);
}
.journey-hero::before {
  content: ""; position: absolute; z-index: -1; top: -7rem; right: -5rem; width: 19rem; height: 19rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 0 0 2.75rem rgba(255, 255, 255, .04), 0 0 0 5.5rem rgba(255, 255, 255, .03);
  pointer-events: none;
}
.journey-hero :focus-visible { outline-color: #fff; }
.journey-hero-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem 1.6rem; }
.journey-ring { position: relative; width: 6.5rem; height: 6.5rem; flex: none; }
.journey-ring svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.journey-ring-track { fill: rgba(255, 255, 255, .08); stroke: rgba(255, 255, 255, .2); stroke-width: 4; }
.journey-ring-value {
  fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, .45)); transition: stroke-dasharray .8s var(--ob-ease);
}
.journey-ring-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; }
.journey-ring-label strong { color: #fff; font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.journey-ring-label small { margin-top: .2rem; color: rgba(255, 255, 255, .88); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.journey-hero-kicker {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; padding: .3rem .75rem;
  border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(255, 255, 255, .1);
  color: #fff; font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.journey-hero-kicker .journey-icon { width: .95rem; height: .95rem; }
.journey-hero-text h3 { margin: 0; color: #fff; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.journey-hero-text > p:last-child { max-width: 44rem; margin: .5rem 0 0; color: rgba(255, 255, 255, .88); font-size: .95rem; line-height: 1.6; text-wrap: pretty; }
.journey-hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; min-width: 14.5rem; }
.journey-hero[data-status="ready"] .ob-light { color: #064e3b; }
.journey-hero .ob-pill { justify-content: center; border: 1px solid rgba(255, 255, 255, .26); background: rgba(15, 23, 42, .18); color: #fff; }
.journey-hero .ob-pill.is-warning .journey-icon { color: #fcd34d; }
.journey-hero .ob-pill.is-ok .journey-icon { color: #6ee7b7; }

.journey-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.journey-steps > li { min-width: 0; }
.journey-step {
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  width: 100%; height: 100%; padding: .85rem .85rem .9rem;
  border: 0; border-radius: 1.05rem; background: rgba(255, 255, 255, .97);
  color: var(--ob-ink); font-family: var(--ob-font); text-align: start; cursor: pointer;
  box-shadow: 0 8px 20px -12px rgba(15, 23, 42, .55);
  transition: transform .18s var(--ob-ease), box-shadow .18s ease;
}
.journey-step:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(15, 23, 42, .6); }
.journey-step:active { transform: scale(.98); }
.journey-step-icon { position: relative; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .8rem; background: var(--step-soft); color: var(--step-strong); }
.journey-step-icon .journey-icon { width: 1.25rem; height: 1.25rem; }
.journey-step.is-done .journey-step-icon { background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; }
.journey-step-done {
  position: absolute; right: -.4rem; bottom: -.4rem; display: grid; place-items: center; width: 1.2rem; height: 1.2rem;
  border: 2px solid #fff; border-radius: 50%; background: #10b981; color: #fff;
}
.journey-step-done .journey-icon { width: .7rem; height: .7rem; stroke-width: 3.4; }
.journey-step-text { display: grid; gap: .1rem; min-width: 0; }
.journey-step-text small { color: var(--ob-subtle); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.journey-step-text strong { color: var(--ob-ink); font-size: .9rem; font-weight: 750; line-height: 1.25; overflow-wrap: break-word; }
.journey-step-bar { align-self: stretch; margin-top: auto; height: 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--step) 15%, #fff); }
.journey-step-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--step-glow), var(--step-strong)); transition: width .6s var(--ob-ease); }

.journey-answers { container: journey-answers / inline-size; display: grid; gap: 1rem; padding: clamp(1rem, 2vw, 1.5rem); border-radius: 1.5rem; font-family: var(--ob-font); }
.journey-answers[hidden] { display: none; }
.journey-answers-head .eyebrow { margin: 0; color: var(--ob-subtle); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.journey-answers-head h3 { margin: .2rem 0 0; color: var(--ob-ink); font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; }
.journey-review-grid { columns: 2 24rem; column-gap: 1rem; }
.journey-review-layer {
  display: grid; margin: 0 0 1rem; overflow: hidden; break-inside: avoid;
  border: 1px solid var(--ob-line); border-radius: 1.15rem; background: #fff; box-shadow: var(--ob-shadow);
}
.journey-review-layer > header {
  display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem;
  border-bottom: 1px solid var(--step-line); background: linear-gradient(90deg, var(--step-soft), #fff 85%);
}
.journey-layer-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: .7rem; background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; box-shadow: 0 6px 14px -8px var(--step); }
.journey-layer-icon .journey-icon { width: 1.1rem; height: 1.1rem; }
.journey-review-layer h4 { flex: 1; margin: 0; color: var(--ob-ink); font-size: .96rem; font-weight: 750; }
.journey-review-count { padding: .2rem .6rem; border: 1px solid var(--step-line); border-radius: 999px; background: #fff; color: var(--step-strong); font-size: .74rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.journey-review-layer dl { margin: 0; }
.journey-review-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label action" "value action";
  align-items: center; gap: .15rem .75rem; padding: .7rem .75rem .7rem 1rem; border-top: 1px solid #f1f5f9;
}
.journey-review-item:first-child { border-top: 0; }
.journey-review-item dt { grid-area: label; color: var(--ob-subtle); font-size: .78rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; }
.journey-review-item dd { grid-area: value; margin: 0; color: var(--ob-text); font-size: .9rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.journey-review-item .journey-link { grid-area: action; }
.journey-review-item.is-empty dd { color: var(--ob-subtle); }
.journey-review-item.is-missing dd { display: flex; align-items: center; gap: .35rem; color: #b45309; font-weight: 650; }
.journey-review-item.is-missing dd .journey-icon { width: 1rem; height: 1rem; }
.journey-link {
  min-height: 2.5rem; padding: .3rem .7rem; border: 0; border-radius: .65rem; background: transparent;
  color: var(--step-strong); font: 700 .84rem/1.2 var(--ob-font); cursor: pointer; transition: background-color .15s ease;
}
.journey-link:hover { background: var(--step-soft); }

/* Publish and test, on the Knowledge page and at the end of the wizard */
.ob-publish {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem 1rem;
  padding: 1rem 1.1rem; border: 1px solid var(--step-line); border-radius: 1.15rem;
  background: linear-gradient(120deg, var(--step-soft), #fff 72%);
}
.ob-publish-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; box-shadow: 0 10px 22px -12px var(--step); }
.ob-publish-icon .journey-icon { width: 1.45rem; height: 1.45rem; }
.ob-publish-text strong { display: block; color: var(--ob-ink); font-size: 1rem; font-weight: 750; }
.ob-publish-text small { display: block; margin-top: .2rem; color: var(--ob-muted); font-size: .86rem; line-height: 1.5; }
.ob-publish.is-current { border-color: #a7f3d0; background: linear-gradient(120deg, #ecfdf5, #fff 72%); }
.ob-publish.is-current .ob-publish-icon { background: linear-gradient(135deg, #10b981, #065f46); box-shadow: 0 10px 22px -12px #059669; }

.ob-test { overflow: hidden; border: 1px solid var(--ob-line); border-radius: 1.25rem; background: #fff; box-shadow: var(--ob-shadow); }
.ob-test-head { display: flex; align-items: center; gap: .8rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--ob-line); background: linear-gradient(120deg, var(--step-soft), #fff 80%); }
.ob-test-avatar { position: relative; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; }
.ob-test-avatar::after { content: ""; position: absolute; right: -.05rem; bottom: -.05rem; width: .75rem; height: .75rem; border: 2px solid #fff; border-radius: 50%; background: #22c55e; }
.ob-test-avatar .journey-icon { width: 1.3rem; height: 1.3rem; }
.ob-test-head strong { display: block; color: var(--ob-ink); font-size: 1rem; font-weight: 750; }
.ob-test-head small { display: block; margin-top: .1rem; color: var(--ob-muted); font-size: .84rem; line-height: 1.45; }
.ob-test-body {
  display: grid; gap: .85rem; padding: 1rem 1.1rem 1.1rem;
  background: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .06) 1px, transparent 0) 0 0 / 16px 16px, #fbfcfe;
}
.ob-test-samples { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.ob-test-samples > span { margin-inline-end: .2rem; color: var(--ob-subtle); font-size: .8rem; font-weight: 700; }
.ob-chip-button {
  min-height: 2.5rem; padding: .35rem .9rem; border: 1px solid var(--step-line); border-radius: 999px; background: #fff;
  color: var(--step-strong); font: 650 .86rem/1.3 var(--ob-font); text-align: start; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.ob-chip-button:hover { border-color: var(--step); background: var(--step-soft); }
.ob-test-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem; padding: .35rem .35rem .35rem 1rem;
  border: 1.5px solid var(--ob-line-strong); border-radius: 1.15rem; background: #fff; transition: border-color .18s ease, box-shadow .18s ease;
}
.ob-test-row:focus-within { border-color: var(--step); box-shadow: 0 0 0 4px color-mix(in srgb, var(--step) 15%, transparent); }
.ob-test-row textarea, .ob-test-row textarea:hover, .ob-test-row textarea:focus {
  min-height: 2.9rem; max-height: 9rem; padding: .7rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  color: var(--ob-ink); font: 500 1rem/1.5 var(--ob-font); resize: none; field-sizing: content;
}
.ob-send { width: 2.9rem; min-width: 2.9rem; padding: 0; border-radius: .9rem; }
.ob-test-off { margin: 0; padding: 1rem 1.1rem; color: var(--ob-muted); font-size: .9rem; }
.journey-test-result { display: grid; gap: .6rem; }
.journey-test-result[hidden] { display: none; }
.journey-test-result.is-error { padding: .7rem .9rem; border: 1px solid #fecaca; border-radius: .9rem; background: #fff1f2; color: #b42318; font-size: .9rem; }
.ob-bubble { max-width: min(34rem, 88%); margin: 0; padding: .7rem .95rem; border-radius: 1.1rem; font-size: .94rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; animation: ob-rise .3s var(--ob-ease) backwards; }
.ob-bubble.is-customer { justify-self: start; border: 1px solid var(--ob-line); border-end-start-radius: .35rem; background: #fff; color: var(--ob-text); }
.ob-bubble.is-assistant {
  justify-self: end; display: grid; gap: .3rem; border-end-end-radius: .35rem;
  background: linear-gradient(135deg, var(--step-strong), var(--step-deep)); color: #fff; box-shadow: 0 12px 24px -16px var(--step);
}
.ob-bubble-label { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .9); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.ob-bubble-label .journey-icon { width: .95rem; height: .95rem; }
.ob-test-note { display: inline-flex; align-items: center; justify-self: end; gap: .35rem; margin: 0; color: var(--ob-subtle); font-size: .78rem; }
.ob-test-note .journey-icon { width: .9rem; height: .9rem; }
.journey-dots { display: inline-flex; justify-self: end; gap: .3rem; padding: .85rem 1rem; border: 1px solid var(--ob-line); border-radius: 1.1rem; border-end-end-radius: .35rem; background: #fff; }
.journey-dots i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--step); animation: journey-dot 1s ease-in-out infinite; }
.journey-dots i:nth-child(2) { animation-delay: .15s; }
.journey-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes journey-dot { 0%, 100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* Documents, below the summary */
.knowledge-files > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .85rem; padding: .95rem 1.25rem; cursor: pointer; list-style: none; }
.knowledge-files > summary::-webkit-details-marker { display: none; }
.knowledge-files > summary .journey-icon { color: var(--muted); transition: transform .2s ease; }
.knowledge-files[open] > summary { border-bottom: 1px solid var(--border); }
.knowledge-files[open] > summary .journey-icon { transform: rotate(180deg); }
.knowledge-files-text strong { display: block; color: var(--text); font-size: .95rem; }
.knowledge-files-text small { display: block; margin-top: .15rem; color: var(--muted); font-size: .8rem; }
.knowledge-files .knowledge-layout { padding: 1rem; }

/* ─── The wizard frame ───────────────────────────────────────────── */

body.onboarding-open { overflow: hidden; }
body.onboarding-open .toast { z-index: 70; top: 5.25rem; right: 50%; bottom: auto; transform: translate(50%, -180%); }
body.onboarding-open .toast.is-visible { transform: translate(50%, 0); }
.onboarding {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-columns: 20rem minmax(0, 1fr);
  background: var(--ob-bg); color: var(--ob-text); font-family: var(--ob-font);
  -webkit-font-smoothing: antialiased;
  transition: --step .5s ease, --step-strong .5s ease, --step-deep .5s ease, --step-soft .5s ease, --step-line .5s ease, --step-glow .5s ease;
  animation: ob-fade .25s ease-out;
}
.onboarding[hidden] { display: none; }
@keyframes ob-fade { from { opacity: 0; } to { opacity: 1; } }

/* The step rail: the current step's colour, every step, and the current step's questions */
.ob-rail {
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.25rem; min-height: 0;
  padding: 1.4rem 1rem 1.2rem; overflow: hidden; color: #fff;
  background: linear-gradient(170deg, var(--step-deep) 0%, color-mix(in srgb, var(--step-strong) 75%, var(--step-deep)) 100%);
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.ob-rail::before {
  content: ""; position: absolute; z-index: -1; top: -7rem; right: -7rem; width: 18rem; height: 18rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--step-glow) 45%, transparent), transparent 70%); pointer-events: none;
}
.ob-rail::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 40%); mask-image: linear-gradient(180deg, #000, transparent 40%);
}
.ob-rail-brand { display: flex; align-items: center; gap: .75rem; padding: 0 .35rem; }
.ob-rail-brand img { width: 2.45rem; height: 2.45rem; flex: none; padding: .25rem; border-radius: .8rem; background: #fff; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .55); }
.ob-rail-brand strong { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.ob-rail-brand small { display: block; margin-top: .1rem; color: rgba(255, 255, 255, .88); font-size: .76rem; font-weight: 600; }
.ob-steps {
  display: grid; align-content: start; gap: .3rem; min-height: 0; margin: 0 -.5rem; padding: .15rem .5rem .5rem; list-style: none;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
.ob-step { position: relative; }
.ob-step:not(:last-child)::before {
  content: ""; position: absolute; inset-inline-start: calc(.55rem + 1.25rem - 1px); top: 3.1rem; bottom: -.45rem;
  width: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2);
}
.ob-step.is-done:not(:last-child)::before { background: rgba(255, 255, 255, .6); }
.ob-step-button {
  position: relative; z-index: 1; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  width: 100%; min-height: 3.6rem; padding: .55rem .7rem .55rem .55rem;
  border: 0; border-radius: 1rem; background: transparent; color: #fff; font-family: var(--ob-font); text-align: start; cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.ob-step-button:hover { background: rgba(255, 255, 255, .1); }
.ob-step-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgba(255, 255, 255, .24); border-radius: .85rem; background: rgba(255, 255, 255, .1); color: #fff; }
.ob-step-icon .journey-icon { width: 1.2rem; height: 1.2rem; }
.ob-step-text { display: grid; gap: .08rem; min-width: 0; }
.ob-step-text small { color: rgba(255, 255, 255, .88); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ob-step-text strong { font-size: .94rem; font-weight: 750; line-height: 1.25; }
.ob-step-count { padding: .15rem .5rem; border-radius: 999px; background: rgba(0, 0, 0, .2); color: #fff; font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-step.is-done .ob-step-icon { border-color: transparent; background: #fff; color: var(--step-strong); }
.ob-step.is-done .ob-step-icon .journey-icon { stroke-width: 2.8; }
.ob-step.is-current .ob-step-button { background: #fff; color: var(--step-deep); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6); }
.ob-step.is-current .ob-step-icon { border-color: transparent; background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; box-shadow: 0 8px 16px -8px var(--step); }
.ob-step.is-current .ob-step-text small { color: var(--step-strong); }
.ob-step.is-current .ob-step-count { background: var(--step-soft); color: var(--step-strong); }
.ob-substeps { display: grid; gap: .1rem; margin: .4rem 0 .5rem; padding: 0; list-style: none; }
.ob-substep button {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 2.4rem; padding: .35rem .6rem;
  padding-inline-start: 3.8rem; border: 0; border-radius: .75rem; background: transparent;
  color: rgba(255, 255, 255, .88); font: 600 .84rem/1.3 var(--ob-font); text-align: start; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ob-substep button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ob-substep-dot {
  position: absolute; inset-inline-start: calc(1.8rem - .5rem); top: 50%; display: grid; place-items: center;
  width: 1rem; height: 1rem; margin-top: -.5rem; border: 2px solid rgba(255, 255, 255, .6); border-radius: 50%;
  background: color-mix(in srgb, var(--step-deep) 55%, var(--step-strong));
}
.ob-substep-dot .journey-icon { width: .62rem; height: .62rem; stroke-width: 3.6; }
.ob-substep.is-done .ob-substep-dot { border-color: #fff; background: #fff; color: var(--step-strong); }
.ob-substep.is-skipped .ob-substep-dot { border-style: dashed; }
.ob-substep.is-current button { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 750; }
.ob-substep.is-current .ob-substep-dot { border-color: #fff; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.ob-rail-ready {
  display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 1.05rem; background: rgba(0, 0, 0, .16);
}
.ob-ring { width: 2.9rem; height: 2.9rem; flex: none; transform: rotate(-90deg); }
.ob-ring-track { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 5; }
.ob-ring-value { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.ob-rail-ready strong { display: block; font-size: .95rem; font-weight: 800; }
.ob-rail-ready small { display: inline-flex; align-items: center; gap: .3rem; margin-top: .1rem; color: rgba(255, 255, 255, .88); font-size: .76rem; font-weight: 600; }
.ob-rail-ready small .journey-icon { width: .85rem; height: .85rem; }

.ob-main {
  position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0;
  background:
    radial-gradient(56rem 28rem at 100% -10%, color-mix(in srgb, var(--step) 11%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at -10% 110%, color-mix(in srgb, var(--step-glow) 10%, transparent), transparent 70%),
    var(--ob-bg);
}
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.6rem; padding: .75rem clamp(1rem, 3vw, 2.5rem); }
.ob-top-step { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ob-top-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border: 1px solid var(--step-line); border-radius: .85rem; background: var(--step-soft); color: var(--step-strong); }
.ob-top-icon .journey-icon { width: 1.25rem; height: 1.25rem; }
.ob-top-text { display: grid; min-width: 0; }
.ob-top-text small { color: var(--ob-subtle); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ob-top-text strong { overflow: hidden; color: var(--ob-ink); font-size: 1.02rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ob-close {
  display: inline-flex; align-items: center; gap: .45rem; flex: none; min-height: 2.75rem; padding: 0 1.05rem;
  border: 1.5px solid var(--ob-line-strong); border-radius: 999px; background: rgba(255, 255, 255, .85);
  color: var(--ob-text); font: 700 .88rem/1 var(--ob-font); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ob-close:hover { border-color: var(--step-line); background: #fff; color: var(--step-strong); }
.ob-close .journey-icon { width: 1.05rem; height: 1.05rem; stroke-width: 2.3; }
.ob-progress { display: none; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; padding: 0 1rem .35rem; }
.ob-segment { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--step) 16%, #e2e8f0); }
.ob-segment > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--step); transition: width .5s var(--ob-ease); }
.ob-segment.is-current { box-shadow: 0 0 0 2px color-mix(in srgb, var(--step) 30%, transparent); }
.ob-body {
  container: ob-body / inline-size;
  position: relative; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(1rem, 3vh, 2.25rem) clamp(1rem, 4vw, 3.5rem) 0; scroll-padding-bottom: 7rem;
}

/* ─── Screens ────────────────────────────────────────────────────── */

.ob-screen { display: grid; gap: 1.25rem; width: min(50rem, 100%); margin: 0 auto; padding-bottom: 2.5rem; animation: ob-enter .32s var(--ob-ease); }
.ob-screen[data-direction="back"] { animation-name: ob-enter-back; }
@keyframes ob-enter { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes ob-enter-back { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes ob-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes ob-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ob-screen h2 { margin: 0; color: var(--ob-ink); font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.35rem); font-weight: 800; line-height: 1.15; letter-spacing: -.035em; text-wrap: balance; }
.ob-screen h2:focus { outline: none; }
.ob-screen h2:focus-visible { outline: 3px solid var(--step); outline-offset: 6px; border-radius: .5rem; }
.ob-lead { max-width: 40rem; margin: 0; color: var(--ob-muted); font-size: 1.06rem; line-height: 1.65; text-wrap: pretty; }
.ob-kicker {
  display: inline-flex; align-items: center; justify-self: start; gap: .45rem; width: max-content; max-width: 100%;
  padding: .35rem .8rem; border: 1px solid var(--step-line); border-radius: 999px; background: var(--step-soft);
  color: var(--step-strong); font-size: .78rem; font-weight: 750; letter-spacing: .02em;
}
.ob-kicker .journey-icon { width: 1rem; height: 1rem; }
.ob-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: .4rem; }

/* Welcome */
.ob-welcome { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 2rem 3.5rem; width: min(72rem, 100%); padding-top: clamp(0rem, 3vh, 2rem); }
.ob-welcome-copy { display: grid; gap: 1.25rem; }
.ob-welcome h2 { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem); line-height: 1.06; letter-spacing: -.045em; }
.ob-gradient-text { background: linear-gradient(95deg, #2563eb 0%, #7c3aed 45%, #db2777 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ob-facts { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.ob-facts li {
  display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .45rem;
  border: 1px solid var(--ob-line); border-radius: 999px; background: #fff; color: var(--ob-text);
  font-size: .9rem; font-weight: 650; box-shadow: var(--ob-shadow);
}
.ob-facts .journey-icon { box-sizing: content-box; width: 1rem; height: 1rem; padding: .4rem; border-radius: 50%; background: var(--step-soft); color: var(--step-strong); }
.ob-welcome-visual { position: relative; display: grid; place-items: center; min-height: 22rem; padding: 1.5rem; }
.ob-welcome-visual::before {
  content: ""; position: absolute; inset: 8% 6%; border-radius: 3rem; opacity: .3; filter: blur(44px);
  background: conic-gradient(from 210deg, #2563eb, #7c3aed, #e11d48, #ea580c, #0d9488, #4f46e5, #2563eb);
}
.ob-mock { position: relative; display: grid; width: min(24rem, 100%); overflow: hidden; border: 1px solid rgba(255, 255, 255, .8); border-radius: 1.6rem; background: #fff; box-shadow: var(--ob-shadow-lg); animation: ob-rise .5s var(--ob-ease) .1s backwards; }
.ob-mock-head { display: flex; align-items: center; gap: .7rem; padding: .95rem 1rem; color: #fff; background: linear-gradient(120deg, #1e3a8a, #4f46e5 60%, #7c3aed); }
.ob-mock-avatar { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: rgba(255, 255, 255, .16); }
.ob-mock-head strong { display: block; font-size: .94rem; font-weight: 750; }
.ob-mock-head small { display: inline-flex; align-items: center; gap: .4rem; color: rgba(255, 255, 255, .9); font-size: .76rem; font-weight: 600; }
.ob-mock-head small i { width: .5rem; height: .5rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, .28); }
.ob-mock-body { display: grid; gap: .65rem; padding: 1.1rem 1rem; background: radial-gradient(circle at 1px 1px, rgba(15, 23, 42, .06) 1px, transparent 0) 0 0 / 16px 16px, #f8fafc; }
.ob-mock-bubble { max-width: 88%; margin: 0; padding: .65rem .85rem; border-radius: 1rem; font-size: .86rem; line-height: 1.5; animation: ob-rise .4s var(--ob-ease) .35s backwards; }
.ob-mock-bubble.is-customer { justify-self: start; border: 1px solid var(--ob-line); border-end-start-radius: .3rem; background: #fff; color: var(--ob-text); }
.ob-mock-bubble.is-assistant { justify-self: end; border-end-end-radius: .3rem; background: linear-gradient(135deg, #4f46e5, #6d28d9); color: #fff; animation-delay: .6s; }
.ob-mock-tags { display: flex; flex-wrap: wrap; gap: .4rem; padding: .8rem 1rem 1rem; border-top: 1px solid var(--ob-line); }
.ob-mock-tags span { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .65rem; border-radius: 999px; background: var(--step-soft); color: var(--step-strong); font-size: .76rem; font-weight: 700; }
.ob-mock-tags .journey-icon { width: .9rem; height: .9rem; }
.ob-benefits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.ob-benefits li { display: flex; align-items: flex-start; gap: .9rem; padding: 1.1rem; border: 1px solid var(--ob-line); border-radius: 1.25rem; background: rgba(255, 255, 255, .9); box-shadow: var(--ob-shadow); }
.ob-benefits li > span { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; flex: none; border-radius: .95rem; background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; box-shadow: 0 10px 20px -12px var(--step); }
.ob-benefits li > span .journey-icon { width: 1.3rem; height: 1.3rem; }
.ob-benefits strong { display: block; color: var(--ob-ink); font-size: 1rem; font-weight: 750; }
.ob-benefits small { display: block; margin-top: .2rem; color: var(--ob-muted); font-size: .88rem; line-height: 1.5; }

/* Step introduction */
.ob-intro { justify-items: center; gap: 1rem; width: min(42rem, 100%); padding-top: clamp(0rem, 4vh, 2.5rem); text-align: center; }
.ob-intro .ob-kicker, .ob-intro .ob-lead { justify-self: center; }
.ob-intro .ob-cta { justify-content: center; }
.ob-intro-art { position: relative; display: grid; place-items: center; width: 9rem; height: 9rem; }
.ob-intro-art::before, .ob-intro-art::after { content: ""; position: absolute; border-radius: 50%; animation: ob-pop .5s var(--ob-ease) backwards; }
.ob-intro-art::before { inset: 0; border: 1.5px solid color-mix(in srgb, var(--step) 20%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--step) 12%, transparent), transparent 70%); animation-delay: .12s; }
.ob-intro-art::after { inset: 1.15rem; border: 1.5px solid color-mix(in srgb, var(--step) 32%, transparent); animation-delay: .06s; }
.ob-intro-icon {
  position: relative; z-index: 1; display: grid; place-items: center; width: 4.75rem; height: 4.75rem; border-radius: 1.5rem;
  background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; box-shadow: 0 18px 36px -14px var(--step);
  animation: ob-pop .45s var(--ob-ease) backwards;
}
.ob-intro-icon .journey-icon { width: 2.3rem; height: 2.3rem; stroke-width: 1.7; }
.ob-intro-list { justify-self: stretch; margin-top: .25rem; padding: 1.05rem 1.15rem 1.15rem; border: 1px solid var(--ob-line); border-radius: 1.25rem; background: #fff; box-shadow: var(--ob-shadow); text-align: start; }
.ob-intro-list > p { display: flex; align-items: center; gap: .45rem; margin: 0 0 .75rem; color: var(--step-strong); font-size: .76rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.ob-intro-list > p .journey-icon { width: 1rem; height: 1rem; }
.ob-intro-list ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .55rem 1rem; margin: 0; padding: 0; list-style: none; }
.ob-intro-list li { display: flex; align-items: center; gap: .6rem; color: var(--ob-text); font-size: .93rem; font-weight: 600; line-height: 1.35; }
.ob-intro-list li > span { display: grid; place-items: center; width: 1.65rem; height: 1.65rem; flex: none; border-radius: 50%; background: var(--step-soft); color: var(--step-strong); font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ob-intro-list li.is-done > span { background: var(--step-strong); color: #fff; }
.ob-intro-list li.is-done > span .journey-icon { width: .85rem; height: .85rem; stroke-width: 3; }

/* Question */
.ob-question { gap: 1.35rem; }
.ob-question-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.ob-question-count { padding: .3rem .8rem; border: 1px solid var(--step-line); border-radius: 999px; background: var(--step-soft); color: var(--step-strong); font-size: .78rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.ob-optional { padding: .3rem .75rem; border-radius: 999px; background: #eef2f6; color: var(--ob-muted); font-size: .76rem; font-weight: 700; }
.ob-question-bar { flex: 1 1 6rem; max-width: 12rem; height: 6px; margin-inline-start: auto; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--step) 15%, #e2e8f0); }
.ob-question-bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--step-glow), var(--step-strong)); }
.journey-note {
  display: flex; align-items: center; justify-self: start; gap: .5rem; margin: 0; padding: .5rem .9rem;
  border: 1px solid var(--step-line); border-radius: 999px; background: var(--step-soft);
  color: var(--step-strong); font-size: .88rem; font-weight: 650; animation: ob-pop .3s var(--ob-ease);
}
.journey-question-block { display: grid; gap: .55rem; }
.journey-help { max-width: 62ch; margin: 0; color: var(--ob-muted); font-size: 1.03rem; line-height: 1.6; }
.journey-select-hint { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--step-strong); font-size: .86rem; font-weight: 700; }
.journey-select-hint .journey-icon { width: 1rem; height: 1rem; stroke-width: 2.6; }
.journey-answer { display: grid; gap: 1rem; transition: opacity .2s ease; }
.journey-card.is-busy .journey-answer { opacity: .55; pointer-events: none; }

/* Answer options: native inputs, styled as cards */
.journey-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); gap: .7rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.journey-options.is-compact { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .55rem; }
.journey-option {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  min-height: 4.4rem; padding: .8rem .9rem .8rem .8rem;
  border: 1.5px solid var(--ob-line); border-radius: 1.15rem; background: #fff; color: var(--ob-text);
  font-size: 1rem; font-weight: 500; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s var(--ob-ease);
  animation: ob-rise .34s var(--ob-ease) backwards;
}
.journey-option:nth-child(2) { animation-delay: 35ms; }
.journey-option:nth-child(3) { animation-delay: 70ms; }
.journey-option:nth-child(4) { animation-delay: 105ms; }
.journey-option:nth-child(5) { animation-delay: 140ms; }
.journey-option:nth-child(6) { animation-delay: 175ms; }
.journey-option:nth-child(n+7) { animation-delay: 210ms; }
.journey-option:hover { border-color: var(--step-line); box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--step) 70%, transparent); transform: translateY(-1px); }
.journey-option:active { transform: scale(.985); }
.journey-option > input[name="journeyChoice"] { position: absolute; top: 0; inset-inline-start: 0; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.journey-option:has(> input:focus-visible) { outline: 3px solid var(--step); outline-offset: 3px; }
.journey-option:has(> input:checked) {
  border-color: var(--step); background: linear-gradient(135deg, var(--step-soft), #fff 85%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--step) 16%, transparent), 0 12px 24px -18px var(--step);
}
.ob-option-icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; flex: none; border-radius: .95rem; background: var(--step-soft); color: var(--step-strong); transition: transform .2s var(--ob-ease), box-shadow .2s ease; }
.ob-option-icon .journey-icon { width: 1.4rem; height: 1.4rem; stroke-width: 1.8; }
.journey-option:hover .ob-option-icon { transform: scale(1.06); }
.journey-option:has(> input:checked) .ob-option-icon { background: linear-gradient(135deg, var(--step), var(--step-deep)); color: #fff; box-shadow: 0 8px 16px -10px var(--step); }
.journey-option-text { display: grid; gap: .25rem; min-width: 0; }
.journey-option-text strong { color: var(--ob-ink); font-size: 1rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.journey-option-text small { color: var(--ob-muted); font-size: .86rem; font-weight: 500; line-height: 1.45; }
.journey-option-text .journey-option-meta { display: inline-flex; align-items: center; gap: .35rem; color: var(--step-strong); font-weight: 650; }
.journey-option-meta .journey-icon { width: .9rem; height: .9rem; stroke-width: 2.2; }
.ob-rec {
  display: inline-flex; align-items: center; justify-self: start; gap: .3rem; margin-top: .1rem; padding: .18rem .55rem .18rem .45rem;
  border: 1px solid #fde68a; border-radius: 999px; background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #92400e; font-size: .72rem; font-weight: 750; white-space: nowrap;
}
.ob-rec .journey-icon { width: .82rem; height: .82rem; fill: #f59e0b; stroke: #d97706; stroke-width: 1.5; }
.ob-option-key {
  display: grid; place-items: center; width: 1.8rem; height: 1.8rem; flex: none;
  border: 1.5px solid var(--ob-line-strong); border-radius: 50%; background: #fff; color: var(--ob-subtle);
  font-size: .76rem; font-weight: 750; font-variant-numeric: tabular-nums;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.journey-options[data-type="checkbox"] .ob-option-key { border-radius: .55rem; }
.ob-option-key .journey-icon { display: none; width: 1rem; height: 1rem; stroke-width: 3; }
.journey-option:has(> input:checked) .ob-option-key { border-color: var(--step-strong); background: var(--step-strong); color: #fff; animation: ob-pop .22s var(--ob-ease); }
.journey-option:has(> input:checked) .ob-option-key > span { display: none; }
.journey-option:has(> input:checked) .ob-option-key .journey-icon { display: block; }
.journey-option-other, .journey-option-money { grid-column: 1 / -1; align-items: start; }
.journey-option-other .ob-option-icon { background: #eef2f6; color: var(--ob-muted); }
.onboarding .journey-other-input {
  width: 100%; min-height: 2.9rem; margin-top: .45rem; padding: .6rem .9rem;
  border: 1.5px dashed var(--ob-line-strong); border-radius: .85rem; background: #fff;
  color: var(--ob-ink); font: 500 1rem/1.4 var(--ob-font); box-shadow: none;
}
.onboarding .journey-other-input:focus { border-style: solid; border-color: var(--step); box-shadow: 0 0 0 3px color-mix(in srgb, var(--step) 15%, transparent); }
.journey-options-money { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.journey-money { display: grid; grid-template-columns: minmax(0, 13rem) 7.5rem; gap: .5rem; margin-top: .55rem; }
.onboarding .journey-money input, .onboarding .journey-money select {
  min-height: 3.1rem; border: 1.5px solid var(--ob-line-strong); border-radius: .85rem; background: #fff; color: var(--ob-ink); box-shadow: none;
}
.onboarding .journey-money input { padding: .55rem .9rem; font: 700 1.2rem/1.2 var(--ob-font); font-variant-numeric: tabular-nums; }
.onboarding .journey-money select { padding: .5rem .7rem; font: 650 .95rem/1.2 var(--ob-font); }
.onboarding .journey-money :is(input, select):focus { border-color: var(--step); box-shadow: 0 0 0 3px color-mix(in srgb, var(--step) 15%, transparent); }
.onboarding :is(input, textarea)::placeholder { color: var(--ob-subtle); }

/* Text answers */
.journey-field { display: grid; gap: .4rem; }
.onboarding .journey-field :is(input, textarea) {
  width: 100%; padding: 1rem 1.15rem; border: 1.5px solid var(--ob-line-strong); border-radius: 1.15rem; background: #fff;
  color: var(--ob-ink); font: 500 1.06rem/1.6 var(--ob-font); box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.onboarding .journey-field input { min-height: 3.6rem; }
.onboarding .journey-field textarea { min-height: 10rem; resize: vertical; }
.onboarding .journey-field :is(input, textarea):hover { border-color: #94a3b8; }
.onboarding .journey-field :is(input, textarea):focus { border-color: var(--step); box-shadow: 0 0 0 4px color-mix(in srgb, var(--step) 15%, transparent); outline: none; }
.journey-field-foot { display: flex; justify-content: space-between; gap: 1rem; }
.journey-counter, .journey-field-hint { margin: 0; color: var(--ob-subtle); font-size: .78rem; font-variant-numeric: tabular-nums; }
.journey-example {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem;
  padding: .95rem 1rem; border: 1.5px dashed #fcd34d; border-radius: 1.15rem; background: linear-gradient(135deg, #fffbeb, #fff 78%);
}
.journey-example.is-final { border-style: solid; border-color: #fde68a; }
.journey-example-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .85rem; background: #fef3c7; color: #b45309; }
.journey-example-icon .journey-icon { width: 1.3rem; height: 1.3rem; }
.journey-example-tag { color: #b45309; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.journey-example p { margin: .3rem 0 0; color: var(--ob-text); font-size: .96rem; line-height: 1.55; }
.journey-example small { display: block; margin-top: .3rem; color: var(--ob-muted); font-size: .8rem; }

/* Suggestions, lists and chips */
.journey-suggestions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.journey-suggestions-label { display: inline-flex; align-items: center; gap: .35rem; margin-inline-end: .2rem; color: #b45309; font-size: .76rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.journey-suggestions-label .journey-icon { width: 1rem; height: 1rem; }
.journey-suggestion {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 2.6rem; padding: .4rem .95rem;
  border: 1.5px dashed var(--step-line); border-radius: 999px; background: #fff; color: var(--step-strong);
  font: 650 .9rem/1.3 var(--ob-font); text-align: start; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}
.journey-suggestion:hover { border-style: solid; border-color: var(--step); background: var(--step-soft); }
.journey-suggestion .journey-icon { width: .95rem; height: .95rem; stroke-width: 2.4; }
.journey-suggestion[hidden] { display: none; }
.journey-list, .journey-custom { display: grid; gap: .8rem; }
.journey-subhead { display: flex; align-items: center; gap: .4rem; margin: .35rem 0 0; color: var(--ob-text); font-size: .92rem; font-weight: 750; }
.journey-subhead .journey-icon { color: var(--step-strong); }
.journey-add {
  display: flex; align-items: center; gap: .5rem; padding: .4rem; padding-inline-start: 1rem;
  border: 1.5px solid var(--ob-line-strong); border-radius: 1.15rem; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.journey-add:focus-within { border-color: var(--step); box-shadow: 0 0 0 4px color-mix(in srgb, var(--step) 15%, transparent); }
.journey-add-icon { display: grid; place-items: center; color: var(--step-strong); }
.onboarding .journey-add input, .onboarding .journey-add input:hover, .onboarding .journey-add input:focus {
  flex: 1; min-width: 0; min-height: 2.9rem; padding: .5rem .25rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none;
  color: var(--ob-ink); font: 500 1.06rem/1.4 var(--ob-font);
}
.journey-add .ob-button { min-height: 2.8rem; }
.journey-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.journey-chips:empty { display: none; }
.journey-chip {
  display: inline-flex; align-items: center; gap: .2rem; min-height: 2.6rem; padding: .25rem .3rem; padding-inline-start: 1rem;
  border: 1.5px solid var(--step-line); border-radius: 999px; background: var(--step-soft); color: var(--step-strong);
  font-size: .93rem; font-weight: 700; animation: ob-pop .22s var(--ob-ease);
}
.journey-chip button { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.journey-chip button:hover { background: color-mix(in srgb, var(--step) 16%, transparent); }
.journey-chip .journey-icon { width: .9rem; height: .9rem; stroke-width: 2.6; }

/* Notes, errors and actions */
.journey-aside { padding: .9rem 1rem; border: 1px solid #a7f3d0; border-radius: 1.15rem; background: linear-gradient(135deg, #ecfdf5, #fff 80%); }
.journey-aside strong { display: flex; align-items: center; gap: .45rem; color: #047857; font-size: .88rem; font-weight: 750; }
.journey-aside ul { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.journey-aside li { padding: .25rem .7rem; border: 1px solid #d1fae5; border-radius: 999px; background: #fff; color: var(--ob-text); font-size: .84rem; font-weight: 600; }
.journey-error { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .75rem .95rem; border: 1px solid #fecaca; border-radius: 1rem; background: #fff1f2; color: #b42318; font-size: .93rem; font-weight: 650; }
.journey-error[hidden] { display: none; }
.journey-why summary { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.4rem; color: var(--ob-muted); font-size: .88rem; font-weight: 650; cursor: pointer; list-style: none; }
.journey-why summary::-webkit-details-marker { display: none; }
.journey-why summary:hover { color: var(--step-strong); }
.journey-why p { max-width: 62ch; margin: .25rem 0 0; padding: .75rem .95rem; border: 1px solid var(--ob-line); border-radius: 1rem; background: #fff; color: var(--ob-text); font-size: .92rem; line-height: 1.6; }
.journey-actions {
  position: sticky; bottom: 1rem; z-index: 3; display: flex; align-items: center; gap: .6rem; margin-top: .4rem; padding: .6rem;
  border: 1px solid rgba(226, 232, 240, .95); border-radius: 1.4rem; background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 40px -22px rgba(15, 23, 42, .4);
}
.journey-actions-spacer { flex: 1; }
.journey-hint { margin: 0; color: var(--ob-subtle); font-size: .78rem; white-space: nowrap; }
.journey-hint kbd {
  display: inline-block; min-width: 1.5rem; padding: .08rem .4rem; border: 1px solid var(--ob-line-strong); border-bottom-width: 2px;
  border-radius: .4rem; background: #fff; color: var(--ob-text); font: 700 .72rem/1.4 var(--ob-font); text-align: center;
}
.journey-skip {
  min-height: 2.9rem; padding: 0 1rem; border: 0; border-radius: .95rem; background: transparent;
  color: var(--ob-muted); font: 700 .92rem/1 var(--ob-font); white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.journey-skip:hover:not(:disabled) { background: #eef2f6; color: var(--ob-ink); }
.journey-continue { min-width: 9.5rem; min-height: 3.1rem; }
.journey-continue .journey-icon { transition: transform .2s var(--ob-ease); }
.journey-continue:hover:not(:disabled) .journey-icon { transform: translateX(3px); }

/* Finish */
.ob-finish { gap: 1.5rem; width: min(54rem, 100%); }
.ob-finish-hero { position: relative; display: grid; justify-items: center; gap: .9rem; padding-top: 1rem; text-align: center; }
.ob-finish-hero .ob-lead { justify-self: center; }
.ob-finish-hero .ob-cta { justify-content: center; }
.ob-finish-badge {
  position: relative; display: grid; place-items: center; width: 5.5rem; height: 5.5rem; margin-bottom: .6rem; border-radius: 50%;
  background: linear-gradient(135deg, #10b981, #065f46); color: #fff;
  box-shadow: 0 0 0 10px rgba(16, 185, 129, .13), 0 0 0 22px rgba(16, 185, 129, .06), 0 20px 40px -16px rgba(4, 120, 87, .65);
  animation: ob-pop .5s var(--ob-ease) backwards;
}
.ob-finish-badge .journey-icon { width: 2.6rem; height: 2.6rem; stroke-width: 2.6; }
.ob-finish-badge.is-partial {
  background: linear-gradient(135deg, #d97706, #92400e);
  box-shadow: 0 0 0 10px rgba(245, 158, 11, .13), 0 0 0 22px rgba(245, 158, 11, .06), 0 20px 40px -16px rgba(180, 83, 9, .6);
}
.ob-confetti { position: absolute; inset: -1rem 0 auto; height: 9rem; pointer-events: none; }
.ob-confetti i {
  position: absolute; top: 50%; left: 50%; width: .55rem; height: .55rem; border-radius: 2px; background: var(--step); opacity: 0;
  animation: ob-burst 1s var(--ob-ease) .15s forwards;
}
.ob-confetti i:nth-child(odd) { border-radius: 50%; }
.ob-confetti i:nth-child(3n) { width: .38rem; height: .9rem; }
.ob-confetti i:nth-child(1) { --x: -10rem; --y: -2rem; --r: 25deg; }
.ob-confetti i:nth-child(2) { --x: -7.5rem; --y: 2.4rem; --r: -40deg; }
.ob-confetti i:nth-child(3) { --x: -12.5rem; --y: .8rem; --r: 60deg; }
.ob-confetti i:nth-child(4) { --x: -5.5rem; --y: -3.4rem; --r: -15deg; }
.ob-confetti i:nth-child(5) { --x: -14.5rem; --y: -2.8rem; --r: 80deg; }
.ob-confetti i:nth-child(6) { --x: -9rem; --y: 4.2rem; --r: 30deg; }
.ob-confetti i:nth-child(7) { --x: -4.5rem; --y: 3.6rem; --r: -70deg; }
.ob-confetti i:nth-child(8) { --x: 10rem; --y: -2.2rem; --r: -25deg; }
.ob-confetti i:nth-child(9) { --x: 7.5rem; --y: 2.6rem; --r: 45deg; }
.ob-confetti i:nth-child(10) { --x: 12.5rem; --y: .6rem; --r: -60deg; }
.ob-confetti i:nth-child(11) { --x: 5.5rem; --y: -3.3rem; --r: 15deg; }
.ob-confetti i:nth-child(12) { --x: 14.5rem; --y: -3rem; --r: -80deg; }
.ob-confetti i:nth-child(13) { --x: 9rem; --y: 4.3rem; --r: -30deg; }
.ob-confetti i:nth-child(14) { --x: 4.5rem; --y: 3.5rem; --r: 70deg; }
@keyframes ob-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  25% { opacity: 1; }
  100% { opacity: .9; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
}
.ob-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; width: 100%; margin: .6rem 0 0; padding: 0; list-style: none; }
.ob-stats li {
  display: grid; gap: .15rem; padding: 1rem .75rem .9rem; border: 1px solid var(--ob-line); border-radius: 1.15rem; background: #fff;
  box-shadow: inset 0 3px 0 var(--step), var(--ob-shadow);
}
.ob-stats strong { color: var(--step-strong); font-size: 1.65rem; font-weight: 800; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.ob-stats span { color: var(--ob-muted); font-size: .84rem; font-weight: 650; }
.ob-finish-panel { display: grid; gap: 1rem; }
.ob-finish-foot { margin: 0; text-align: center; }

/* Loading and errors */
.journey-skeleton { display: grid; gap: 1rem; width: min(50rem, 100%); margin: 1rem auto 0; }
.journey-skeleton span {
  display: block; height: 1rem; border-radius: .6rem;
  background: linear-gradient(90deg, #e9eef5 0%, #f8fafc 50%, #e9eef5 100%); background-size: 200% 100%;
  animation: journey-shimmer 1.3s ease-in-out infinite;
}
.journey-skeleton span:nth-child(1) { width: 30%; }
.journey-skeleton span:nth-child(2) { width: 75%; height: 2.2rem; }
.journey-skeleton span:nth-child(3), .journey-skeleton span:nth-child(4) { height: 4.4rem; border-radius: 1.15rem; }
@keyframes journey-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.journey-failed {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; width: min(50rem, 100%); margin: 1rem auto;
  padding: 1rem 1.1rem; border: 1px solid #fecaca; border-radius: 1.15rem; background: #fff1f2; color: #b42318; font-family: var(--ob-font);
}
.journey-failed .journey-icon { width: 1.4rem; height: 1.4rem; }
.journey-failed strong { color: #7f1d1d; }
.journey-failed p { margin: .2rem 0 0; color: #9f1239; font-size: .88rem; }

/* ─── Sizes ──────────────────────────────────────────────────────── */

/* The Knowledge page summary follows its own width */
@container journey-hero (max-width: 62rem) {
  .journey-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container journey-hero (max-width: 46rem) {
  .journey-hero-main { grid-template-columns: auto minmax(0, 1fr); }
  .journey-hero-actions { grid-column: 1 / -1; flex-flow: row wrap; align-items: center; min-width: 0; }
  .journey-hero-actions .ob-button { flex: 1 1 14rem; }
}
@container journey-hero (max-width: 34rem) {
  .journey-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-steps > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .journey-ring { width: 5rem; height: 5rem; }
  .journey-ring-label strong { font-size: 1.2rem; }
  .journey-ring-label small { font-size: .7rem; }
  /* Two tiles to a row: the icon sits beside the title, smaller, so a long word still fits */
  .journey-step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .55rem .5rem; padding: .7rem; }
  .journey-step-icon { width: 2rem; height: 2rem; border-radius: .7rem; }
  .journey-step-icon .journey-icon { width: 1.1rem; height: 1.1rem; }
  .journey-step-bar { grid-column: 1 / -1; margin-top: 0; }
  .journey-hero-actions .ob-pill { flex: 1 1 100%; }
}

/* Cards that sit in narrow places: the answers panel, or the wizard on a phone */
@container (max-width: 36rem) {
  .ob-publish { grid-template-columns: auto minmax(0, 1fr); }
  .ob-publish .ob-button { grid-column: 1 / -1; width: 100%; }
  .journey-example { grid-template-columns: auto minmax(0, 1fr); }
  .journey-example .ob-button { grid-column: 1 / -1; width: 100%; }
  .journey-failed { grid-template-columns: auto minmax(0, 1fr); }
  .journey-failed .ob-button { grid-column: 1 / -1; }
}

/* The wizard's own width, which depends on the rail */
@container ob-body (max-width: 60rem) {
  .ob-welcome { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .ob-welcome-visual { min-height: 0; padding: 1rem 0; }
}
@container ob-body (max-width: 46rem) {
  .ob-benefits { grid-template-columns: minmax(0, 1fr); }
  .ob-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container ob-body (max-width: 36rem) {
  .ob-welcome-visual { display: none; }
  .ob-intro-art { width: 7rem; height: 7rem; }
  .ob-intro-icon { width: 4rem; height: 4rem; border-radius: 1.25rem; }
  .ob-intro-icon .journey-icon { width: 2rem; height: 2rem; }
  .ob-intro .ob-cta .ob-button { flex: 1; }
  .journey-option { gap: .75rem; min-height: 4rem; padding: .7rem .75rem .7rem .7rem; }
  .ob-option-icon { width: 2.6rem; height: 2.6rem; border-radius: .85rem; }
  .journey-money { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .journey-hint, .journey-actions-spacer { display: none; }
  .journey-back { width: 3.1rem; padding: 0; }
  .journey-back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .journey-continue { flex: 1; min-width: 0; }
  .ob-finish-panel .ob-test-body, .ob-test-head { padding-inline: .9rem; }
}

/* Tablets: the rail keeps only the step icons */
@media (max-width: 1199px) {
  .onboarding { grid-template-columns: 5.25rem minmax(0, 1fr); }
  .ob-rail { justify-items: center; gap: 1.1rem; padding: 1.1rem .6rem; }
  .ob-rail-brand { padding: 0; }
  .ob-rail-brand > div, .ob-step-text, .ob-step-count, .ob-rail-ready > div {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .ob-substeps { display: none; }
  .ob-steps { justify-items: center; gap: .6rem; margin: 0; padding: .15rem .1rem .5rem; }
  .ob-step-button { grid-template-columns: 2.5rem; justify-content: center; width: 3.6rem; min-height: 3.6rem; padding: .55rem; }
  .ob-step:not(:last-child)::before { inset-inline-start: calc(50% - 1px); top: 3.35rem; bottom: -.7rem; }
  .ob-rail-ready { justify-content: center; padding: .45rem; border-radius: 50%; }
}

/* Phones and small tablets: no rail, a coloured progress bar instead */
@media (max-width: 899px) {
  .onboarding { grid-template-columns: minmax(0, 1fr); }
  .ob-rail { display: none; }
  .ob-top { min-height: 4rem; padding: .6rem 1rem; }
  .ob-progress { display: grid; }
  .ob-body { padding: 1.1rem 1rem 0; }
  .ob-close { width: 2.75rem; padding: 0; justify-content: center; }
  .ob-close span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 599px) {
  .ob-screen { gap: 1.1rem; }
  .ob-question { padding-bottom: 0; }
  .journey-actions {
    bottom: 0; margin-inline: -1rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    border-width: 1px 0 0; border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -10px 30px -20px rgba(15, 23, 42, .35);
  }
  .ob-welcome h2 { font-size: 2.05rem; }
  .ob-cta .ob-large { flex: 1; }
  .ob-stats strong { font-size: 1.4rem; }
  .journey-review-grid { columns: 1; }
}
@media (max-height: 560px) and (min-width: 600px) {
  .ob-top { min-height: 3.6rem; }
  .ob-intro-art { width: 6rem; height: 6rem; }
}
@media (hover: none) {
  .journey-hint { display: none; }
  .ob-option-key > span { visibility: hidden; }
  .journey-option:hover, .journey-step:hover { transform: none; }
}
@media (forced-colors: active) {
  .ob-gradient-text { background: none; color: CanvasText; }
  .journey-option:has(> input:checked) { outline: 3px solid Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding { transition: none; }
  .onboarding, .ob-screen, .journey-option, .journey-chip, .journey-note, .ob-intro-icon, .ob-intro-art::before, .ob-intro-art::after,
  .ob-finish-badge, .ob-mock, .ob-mock-bubble, .ob-bubble, .ob-option-key, .journey-dots i, .journey-skeleton span { animation: none; }
  .ob-confetti i { animation: none; opacity: .9; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)); }
}

/* Inbox: "Check for new messages" reads the Pages' inboxes, and only when pressed */
#viewInbox .inbox-check { display: grid; gap: .3rem; }
#viewInbox .inbox-check-button {
  width: 100%; min-height: 2.6rem; border-color: var(--sec-line); background: var(--sec-soft); color: var(--sec-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
#viewInbox .inbox-check-button:hover:not(:disabled) { border-color: var(--sec); background: color-mix(in srgb, var(--sec) 14%, #fff); color: var(--sec-deep); }
#viewInbox .inbox-check-button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#viewInbox .inbox-check-button.is-busy { opacity: 1; cursor: progress; }
#viewInbox .inbox-check-button.is-busy svg { animation: inbox-check-arrow 1.1s ease-in-out infinite; }
@keyframes inbox-check-arrow { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(2px); } }
#viewInbox .inbox-check-status { margin: 0; color: var(--ob-muted); font-size: .75rem; line-height: 1.35; text-align: center; }
#viewInbox .inbox-check-status:empty { display: none; }
#viewInbox .inbox-check-status.is-warning { color: #b45309; }
@media (max-width: 1024px) { #viewInbox .inbox-check-button { min-height: 44px; } }

/* ─── AI auto-replies ─────────────────────────────────────────────────────
   Settings card (topic by channel modes, guards, the log), the Inbox pause line, and the notice on
   a conversation whose reply AIBO is holding to send or has handed to a person. */
.ai-autonomy-panel { grid-column: 1 / -1; display: grid; gap: .85rem; }
.ai-autonomy-panel .section-card-heading { align-items: center; }
.ai-autonomy-panel.is-paused { box-shadow: inset 0 0 0 2px #fde68a, var(--shadow); }
.ai-pause-button { min-height: 2.6rem; }
.ai-pause-button:not(.danger-quiet) { border-color: var(--sec-line); background: var(--sec-soft); color: var(--sec-deep); }
.ai-autonomy-status { margin: 0; color: var(--ob-muted); font-size: .9rem; line-height: 1.5; }
.ai-autonomy-status.is-warning { color: #b45309; font-weight: 650; }
.ai-knowledge, .ai-guard-note { display: flex; align-items: flex-start; gap: .6rem; margin: 0; padding: .75rem .9rem; border-radius: .9rem; font-size: .88rem; line-height: 1.45; }
.ai-knowledge { border: 1px solid #fde68a; background: #fffbeb; color: #78350f; }
.ai-knowledge.is-ready { border-color: #a7f3d0; background: #ecfdf5; color: #065f46; }
.ai-guard-note { border: 1px solid var(--ob-line); background: #f8fafc; color: var(--ob-text); }
:is(.ai-knowledge, .ai-guard-note, .ai-matrix-divider, .ai-inbox-status, .ai-conversation-notice) svg {
  width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ai-matrix-wrap, .ai-log-wrap { overflow-x: auto; border: 1px solid var(--ob-line); border-radius: 1rem; background: #fff; }
.ai-matrix, .ai-log-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
:is(.ai-matrix, .ai-log-table) :is(th, td) { padding: .55rem .7rem; border-bottom: 1px solid var(--ob-line); text-align: left; vertical-align: middle; }
:is(.ai-matrix, .ai-log-table) thead th { background: #f8fbff; color: var(--ob-muted); font-size: .75rem; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.ai-matrix thead th small { display: block; color: #b45309; font-size: .72rem; font-weight: 650; }
.ai-channel { display: inline-flex; align-items: center; gap: .4rem; }
.ai-channel :is(svg, img) { width: 1.1rem; height: 1.1rem; }
.ai-matrix tbody th { min-width: 11rem; color: var(--ob-ink); font-weight: 700; }
.ai-matrix tr.is-person th { color: #9f1239; }
.ai-matrix-divider th { background: #fff1f2; color: #9f1239; font-size: .78rem; font-weight: 750; }
.ai-matrix-divider th svg { display: inline-block; margin: 0 .35rem 0 0; vertical-align: -.2rem; }
.ai-mode { min-width: 8.5rem; min-height: 2.4rem; padding: .3rem .5rem; border: 1px solid var(--ob-line-strong); border-radius: .7rem; background: #fff; color: var(--ob-text); font: inherit; }
.ai-mode:is(.is-auto, .is-auto_hold) { border-color: #34d399; background: #ecfdf5; color: #065f46; font-weight: 700; }
.ai-mode.is-off { background: #f8fafc; color: var(--ob-muted); }
.ai-mode:disabled { opacity: .55; cursor: not-allowed; }
.ai-subhead, .ai-log h4 { margin: .25rem 0 0; color: var(--ob-ink); font-size: .95rem; }
.ai-preferences { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.ai-preferences label { display: grid; gap: .3rem; padding: .7rem .8rem; border: 1px solid var(--ob-line); border-radius: .9rem; background: #fff; color: var(--ob-ink); font-size: .85rem; font-weight: 700; }
.ai-preferences select { min-height: 2.4rem; padding: .3rem .5rem; border: 1px solid var(--ob-line-strong); border-radius: .7rem; font: inherit; font-weight: 600; }
.ai-preferences small { color: var(--ob-muted); font-size: .76rem; font-weight: 500; line-height: 1.4; }
.ai-preferences .ai-disclose { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.ai-preferences .ai-disclose input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; }
.ai-preferences .ai-disclose span { display: grid; gap: .3rem; }
.ai-log { display: grid; gap: .5rem; }
.ai-log-table td small { display: block; margin-top: .15rem; color: var(--ob-muted); font-size: .76rem; }
.ai-log-customer { padding: 0; border: 0; background: none; color: var(--sec-deep); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.ai-log-customer:hover { text-decoration: underline; }
.ai-log-empty { margin: 0; padding: .9rem 1rem; border: 1px dashed var(--ob-line-strong); border-radius: .9rem; color: var(--ob-muted); font-size: .86rem; }
.ai-decision { display: inline-flex; padding: .15rem .55rem; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .75rem; font-weight: 750; white-space: nowrap; }
.ai-decision.is-sent { background: #dcfce7; color: #166534; }
.ai-decision.is-scheduled { background: #dbeafe; color: #1e40af; }
.ai-decision.is-handed_over { background: #fef3c7; color: #92400e; }
.ai-decision.is-failed { background: #fee2e2; color: #991b1b; }
.ai-inbox-status { display: flex; align-items: center; gap: .55rem; padding: .5rem .6rem; border: 1px solid #a7f3d0; border-radius: .8rem; background: #ecfdf5; color: #065f46; font-size: .8rem; line-height: 1.35; }
.ai-inbox-status[hidden] { display: none; }
.ai-inbox-status span { flex: 1; min-width: 0; }
.ai-inbox-status.is-paused { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.ai-inbox-status .button { flex: none; }
.ai-conversation-notice { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; padding: .6rem .75rem; border-radius: .85rem; font-size: .85rem; line-height: 1.4; }
.ai-conversation-notice[hidden] { display: none; }
.ai-conversation-notice span { flex: 1; min-width: 0; }
.ai-conversation-notice.is-scheduled { border: 1px solid #93c5fd; background: #eff6ff; color: #1e3a8a; }
.ai-conversation-notice.is-handover { border: 1px solid #fde68a; background: #fffbeb; color: #78350f; }
.ai-conversation-notice [data-ai-countdown] { font-variant-numeric: tabular-nums; }
@media (max-width: 1024px) {
  .ai-mode, .ai-preferences select, .ai-pause-button, .ai-inbox-status .button, .ai-conversation-notice .button { min-height: 44px; }
}
@media (max-width: 680px) {
  .ai-inbox-status, .ai-conversation-notice, .ai-autonomy-panel .section-card-heading { flex-wrap: wrap; }
  .ai-autonomy-panel .section-card-heading { gap: .6rem; }
}
/* The card fits the screen; on tablets and phones each topic is a small card with its channels side by side */
.ai-autonomy-panel, .ai-autonomy-body { min-width: 0; }
.ai-autonomy-panel { grid-template-columns: minmax(0, 1fr); }
.ai-autonomy-body { display: grid; gap: .85rem; }
@media (max-width: 900px) {
  .ai-matrix-wrap { overflow: visible; }
  .ai-matrix, .ai-matrix tbody { display: block; }
  .ai-matrix thead { display: none; }
  .ai-matrix tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .6rem; padding: .75rem; border-bottom: 1px solid var(--ob-line); }
  .ai-matrix tr :is(th, td) { padding: 0; border: 0; }
  .ai-matrix tbody th { grid-column: 1 / -1; min-width: 0; }
  .ai-matrix td::before { content: attr(data-label); display: block; margin-bottom: .2rem; color: var(--ob-muted); font-size: .72rem; font-weight: 700; }
  .ai-mode { width: 100%; min-width: 0; }
}
@media (max-width: 680px) {
  .ai-pause-button { width: 100%; }
}

/* ─── Website chat (Settings) ───────────────────────────────────────
   AIBO's own chat window and chats connected through the API. A chat's
   own colour arrives as --chat-accent and --chat-ink, set from app.js
   (the dashboard's CSP allows no inline styles). */

.website-chat-section {
  display: grid; gap: 1rem; margin-top: 1rem; padding: 1.1rem;
  border: 1px solid #c7e0f4; border-radius: 20px;
  background: radial-gradient(40rem 14rem at 100% 0%, #eef6ff, transparent 70%), #fff;
  box-shadow: 0 14px 36px rgba(23, 60, 105, .06);
}
.website-chat-heading { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .85rem; }
.website-chat-heading .eyebrow { margin: 0; }
.website-chat-heading h4 { margin: 0; color: var(--ob-ink); font-size: 1.05rem; letter-spacing: -.01em; }
.website-chat-heading p:not(.eyebrow) { margin: .15rem 0 0; color: var(--ob-muted); font-size: .86rem; line-height: 1.45; }
.website-chat-mark {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 15px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; box-shadow: 0 12px 22px -14px #4f46e5;
}
.website-chat-mark .journey-icon { width: 1.45rem; height: 1.45rem; }
.website-chat-add { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.website-chat-add .journey-icon, .website-choice > .button .journey-icon { width: 1rem; height: 1rem; stroke-width: 2.2; }

/* The two ways in, before any website chat exists */
.website-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.website-choice {
  display: grid; grid-template-rows: auto 1fr auto; gap: .9rem; padding: 1rem;
  border: 1px solid var(--ob-line); border-radius: 18px; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--ob-ease);
}
.website-choice:hover { border-color: #93c5fd; box-shadow: 0 18px 36px -24px rgba(37, 99, 235, .45); transform: translateY(-2px); }
.website-choice.is-api:hover { border-color: #5eead4; box-shadow: 0 18px 36px -24px rgba(13, 148, 136, .45); }
.website-choice-art { position: relative; height: 8.5rem; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, #eff6ff, #eef2ff); }
.website-choice.is-api .website-choice-art { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f0fdfa, #ecfeff); }
.art-page {
  position: absolute; inset: .9rem 38% .9rem .9rem; display: grid; align-content: start; gap: .45rem; padding: .7rem;
  border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .3);
}
.art-page i { display: block; height: .45rem; border-radius: 999px; background: #e2e8f0; }
.art-page i:nth-child(1) { width: 70%; background: #cbd5e1; }
.art-page i:nth-child(2) { width: 90%; }
.art-page i:nth-child(3) { width: 55%; }
.art-panel {
  position: absolute; right: 1rem; bottom: 2.7rem; display: grid; gap: .35rem; width: 32%; padding: 1.25rem .55rem .55rem;
  border-radius: 10px; background: linear-gradient(#2563eb, #2563eb) top / 100% .8rem no-repeat, #fff;
  box-shadow: 0 12px 22px -12px rgba(37, 99, 235, .5);
}
.art-panel i { display: block; height: .5rem; border-radius: 999px; background: #dbeafe; }
.art-panel i:last-child { justify-self: end; width: 70%; background: #2563eb; }
.art-launcher {
  position: absolute; right: 1rem; bottom: .7rem; display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border-radius: 50%; background: #2563eb; color: #fff; box-shadow: 0 6px 12px -6px #1d4ed8;
}
.art-launcher .journey-icon { width: .9rem; height: .9rem; }
.art-node {
  display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px;
  background: #fff; color: #0f766e; box-shadow: 0 10px 22px -14px rgba(15, 118, 110, .6);
}
.art-node.is-aibo { background: linear-gradient(135deg, #0d9488, #0891b2); color: #fff; }
.art-node .journey-icon { width: 1.4rem; height: 1.4rem; }
.art-wire { width: 5rem; height: 2px; background: repeating-linear-gradient(90deg, #14b8a6 0 8px, transparent 8px 14px); animation: website-wire 1.2s linear infinite; }
@keyframes website-wire { to { background-position: 14px 0; } }
.website-choice-copy { display: grid; align-content: start; gap: .4rem; }
.website-choice-tag {
  justify-self: start; padding: .2rem .55rem; border-radius: 999px; background: #dbeafe; color: #1d4ed8;
  font: 800 .68rem/1.2 var(--font-ui); letter-spacing: .05em; text-transform: uppercase;
}
.website-choice.is-api .website-choice-tag { background: #ccfbf1; color: #0f766e; }
.website-choice h5 { margin: 0; color: var(--ob-ink); font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; }
.website-choice p { margin: 0; color: var(--ob-muted); font-size: .88rem; line-height: 1.5; }
.website-choice-points { display: grid; gap: .35rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.website-choice-points li { display: flex; align-items: center; gap: .45rem; color: var(--ob-text); font-size: .84rem; font-weight: 600; }
.website-choice-points .journey-icon { width: 1.1rem; height: 1.1rem; padding: .15rem; border-radius: 50%; background: #dcfce7; color: #15803d; stroke-width: 3; }

/* One card per website chat */
/* Two cards side by side only when each has room for its buttons in one row */
.website-chat-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr)); gap: .85rem; }
.website-chat-card {
  --chat-accent: #2563eb; --chat-ink: #fff;
  display: flex; flex-direction: column; gap: .75rem; padding: .95rem;
  border: 1px solid var(--ob-line); border-radius: 16px; background: #fff; box-shadow: var(--ob-shadow);
}
.website-chat-card[data-state="paused"] { background: #f8fafc; }
.website-chat-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .7rem; }
.website-chat-icon {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 13px;
  background: linear-gradient(135deg, #0d9488, #0891b2); color: #fff;
}
.website-chat-icon.is-window { background: var(--chat-accent); color: var(--chat-ink); }
.website-chat-icon svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.website-chat-title { min-width: 0; }
.website-chat-title h5 { margin: 0; color: var(--ob-ink); font-size: .98rem; font-weight: 800; overflow-wrap: anywhere; }
.website-chat-title small { display: block; margin-top: .15rem; color: var(--ob-muted); font-size: .78rem; line-height: 1.4; }
.website-chat-card[data-state="paused"] .connection-state { color: #5f7187; }
.website-chat-card[data-state="paused"] .connection-state::before { background: #9aabbf; box-shadow: 0 0 0 3px #e9eef5; }
.website-chat-card[data-state="error"] .connection-state { color: #9a5b0a; }
.website-chat-card[data-state="error"] .connection-state::before { background: #e49a1f; box-shadow: 0 0 0 3px #fff1d6; }
.website-chat-card[data-state="receiving"] .connection-state { color: #175cd3; }
.website-chat-card[data-state="receiving"] .connection-state::before { background: #2e7cf6; box-shadow: 0 0 0 3px #e1edff; }
.website-chat-note {
  display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .55rem .7rem;
  border: 1px solid #dbeafe; border-radius: 12px; background: #f5f9ff; color: #1e3a8a; font-size: .8rem; line-height: 1.45;
}
.website-chat-note .journey-icon { width: 1rem; height: 1rem; margin-top: .1rem; color: #2563eb; }
.website-chat-sites { display: flex; flex-wrap: wrap; gap: .4rem; }
.website-chat-sites span {
  display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .3rem .6rem; border-radius: 999px;
  background: var(--surface-3); color: var(--ob-text); font-size: .78rem; font-weight: 650; overflow-wrap: anywhere;
}
.website-chat-sites .journey-icon { width: .9rem; height: .9rem; color: var(--ob-muted); }
.website-chat-facts { display: grid; gap: .35rem; margin: 0; }
.website-chat-facts div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .5rem; font-size: .8rem; }
.website-chat-facts dt { color: var(--ob-muted); font-weight: 650; }
.website-chat-facts dd { margin: 0; color: var(--ob-text); font-weight: 600; overflow-wrap: anywhere; }
.website-chat-alert {
  display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .55rem .7rem;
  border: 1px solid #fde68a; border-radius: 12px; background: #fffbeb; color: #78350f; font-size: .8rem; line-height: 1.4;
}
.website-chat-alert .journey-icon { width: 1rem; height: 1rem; margin-top: .05rem; }
.website-chat-actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem;
  margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--ob-line);
}
.website-chat-main, .website-chat-state { display: flex; flex-wrap: wrap; gap: .45rem; }
.website-chat-state { margin-left: auto; }
.website-chat-actions .journey-icon { width: .95rem; height: .95rem; stroke-width: 2.2; }

/* The setup dialog */
.website-dialog {
  width: min(40rem, calc(100vw - 2rem)); max-height: min(92vh, 60rem); padding: 0; overflow: hidden;
  border: 0; border-radius: 24px; background: #fff; color: var(--ob-ink); font-family: var(--font-ui);
  box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .55);
}
.website-dialog:has(.is-wide) { width: min(62rem, calc(100vw - 2rem)); }
.website-dialog[open] { display: flex; flex-direction: column; animation: website-dialog-in .22s var(--ob-ease); }
.website-dialog::backdrop { background: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes website-dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
/* The content scrolls; the buttons sit below it and stay in view */
.website-dialog-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; margin: 0; }
.website-dialog-scroll { display: grid; gap: 1rem; min-height: 0; padding: 1.4rem 1.5rem 1.3rem; overflow-y: auto; overscroll-behavior: contain; }
.website-dialog-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .9rem; }
.website-dialog-head .eyebrow { margin: 0; color: var(--sec-strong); }
.website-dialog-head h2 { margin: .1rem 0 .3rem; color: var(--ob-ink); font-size: 1.3rem; font-weight: 800; letter-spacing: -.025em; }
.website-dialog-head p:not(.eyebrow) { margin: 0; color: var(--ob-muted); font-size: .9rem; line-height: 1.5; }
.website-dialog-icon {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 16px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1); color: #fff; box-shadow: 0 12px 24px -14px #4f46e5;
}
.website-dialog-icon.is-done { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 12px 24px -14px #059669; }
.website-dialog-icon .journey-icon { width: 1.5rem; height: 1.5rem; }
.website-dialog .dialog-actions {
  display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin: 0; padding: .9rem 1.5rem 1.1rem;
  border-top: 1px solid var(--ob-line); background: #fff; box-shadow: 0 -10px 18px -16px rgba(15, 23, 42, .3);
}
.website-dialog .connection-form-error { margin: 0; }

.website-code {
  display: flex; align-items: center; gap: .6rem; min-width: 0; padding: .55rem .55rem .55rem .85rem;
  border: 1px solid #1e293b; border-radius: 14px; background: #0f172a;
}
.website-code code {
  flex: 1; min-width: 0; color: #e2e8f0; font: 500 .82rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere; white-space: pre-wrap;
}
.website-code .website-copy { flex: none; border-color: #334155; background: #1e293b; color: #f8fafc; }
.website-code .website-copy:hover:not(:disabled) { border-color: #475569; background: #334155; color: #fff; }
.website-copy .journey-icon { width: 1rem; height: 1rem; }
.website-copy.is-copied, .website-code .website-copy.is-copied { border-color: #10b981; background: #059669; color: #fff; }
.website-pre {
  max-height: 18rem; margin: 0; padding: .85rem 1rem; overflow: auto; border-radius: 14px; background: #0f172a; color: #e2e8f0;
  font: 500 .8rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre;
}
.website-pre code { color: inherit; font: inherit; }

.website-install-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.website-install-tabs button {
  min-height: 2.5rem; padding: .4rem .85rem; border: 1.5px solid var(--ob-line-strong); border-radius: 999px;
  background: #fff; color: var(--ob-text); font: 700 .82rem/1.2 var(--font-ui); cursor: pointer;
}
.website-install-tabs button:hover { border-color: var(--sec-line); background: var(--sec-soft); color: var(--sec-strong); }
.website-install-tabs button[aria-selected="true"] { border-color: var(--sec-strong); background: var(--sec-strong); color: #fff; }
.website-install-steps { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: website-step; }
.website-install-steps li {
  display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: start; gap: .6rem;
  color: var(--ob-text); font-size: .9rem; line-height: 1.5; counter-increment: website-step;
}
.website-install-steps li::before {
  content: counter(website-step); display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--sec-soft); color: var(--sec-strong); font-size: .8rem; font-weight: 800;
}
.website-dialog .website-dialog-note, .website-dialog .website-secret-warning {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .7rem .85rem;
  border: 1px solid var(--ob-line); border-radius: 14px; background: #f8fafc; color: var(--ob-text); font-size: .84rem; line-height: 1.45;
}
.website-dialog-note .journey-icon, .website-secret-warning .journey-icon { width: 1.1rem; height: 1.1rem; margin-top: .05rem; color: var(--sec-strong); }
.website-dialog .website-secret-warning { border-color: #fde68a; background: #fffbeb; color: #78350f; }
.website-secret-warning .journey-icon { color: #b45309; }
.website-secrets { display: grid; gap: .8rem; padding: 1rem; border: 1px solid #fde68a; border-radius: 16px; background: linear-gradient(180deg, #fffdf5, #fff); }
.website-secrets label { display: grid; gap: .35rem; color: var(--ob-ink); font-size: .85rem; font-weight: 750; }
.website-secrets small { color: var(--ob-muted); font-size: .78rem; font-weight: 500; }

.website-guide-step { display: grid; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--ob-line); }
.website-guide-step h3 { display: flex; align-items: center; gap: .55rem; margin: 0; color: var(--ob-ink); font-size: 1rem; font-weight: 800; }
.website-guide-optional {
  padding: .1rem .5rem; border-radius: 999px; background: #eff6ff; color: #1d4ed8;
  font: 750 .68rem/1.5 var(--font-ui); font-style: normal; letter-spacing: .05em; text-transform: uppercase;
}
.website-guide-step h3 span {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--sec-strong); color: #fff; font-size: .8rem;
}
.website-guide-step p { margin: 0; color: var(--ob-muted); font-size: .88rem; line-height: 1.5; }
.website-guide-step p code, .website-guide-points code {
  padding: .05rem .35rem; border-radius: 6px; background: var(--surface-3); color: var(--ob-ink);
  font: 600 .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere;
}
.website-guide-points { display: grid; gap: .35rem; margin: 0; padding-left: 1.1rem; color: var(--ob-text); font-size: .86rem; line-height: 1.5; }
.website-guide-more { padding: .2rem .8rem .8rem; border: 1px solid var(--ob-line); border-radius: 14px; }
.website-guide-more summary { display: flex; align-items: center; min-height: 2.6rem; color: var(--sec-strong); font-size: .86rem; font-weight: 750; cursor: pointer; }
.website-guide-more .website-copy { margin-top: .6rem; }

/* The chat window form and its live preview */
.website-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); align-items: start; gap: 1.4rem; }
.website-form-fields { display: grid; gap: .95rem; }
.website-field { display: grid; gap: .4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.website-field > span, .website-field > legend, .website-field > label { padding: 0; color: var(--ob-ink); font-size: .86rem; font-weight: 750; }
.website-field-note {
  display: flex; align-items: flex-start; gap: .5rem; margin: .15rem 0 0; padding: .65rem .8rem;
  border: 1px solid #bfdbfe; border-radius: 12px; background: #eff6ff; color: #1e3a8a; font-size: .8rem; line-height: 1.45;
}
.website-field-note .journey-icon { width: 1rem; height: 1rem; margin-top: .1rem; color: #2563eb; }
.website-field-note strong { color: #1e3a8a; }
.website-field em { color: var(--ob-muted); font-style: normal; font-weight: 600; }
.website-field input:not([type="color"]), .website-field textarea { width: 100%; min-height: 2.9rem; padding: .65rem .85rem; font-size: .95rem; }
.website-field textarea { line-height: 1.45; resize: vertical; }
.website-field small { color: var(--ob-muted); font-size: .78rem; line-height: 1.4; }
.website-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.website-swatch {
  width: 2.75rem; height: 2.75rem; padding: 0; border: 3px solid #fff; border-radius: 50%; background: var(--chat-accent);
  box-shadow: 0 0 0 1px var(--ob-line-strong); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.website-swatch:hover { transform: scale(1.06); }
.website-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2.5px var(--chat-accent); }
.website-swatch:focus-visible { outline: 3px solid var(--sec); outline-offset: 2px; }
/* Any colour: the native picker covers the whole pill, invisible, over a colour-wheel dot */
.website-color-custom {
  position: relative; display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 .8rem 0 .4rem;
  border: 1.5px dashed var(--ob-line-strong); border-radius: 999px; color: var(--ob-muted); font-size: .8rem; font-weight: 700; cursor: pointer;
}
.website-color-custom::before {
  content: ""; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444);
}
.website-color-custom:hover { border-color: var(--sec-line); color: var(--sec-strong); }
.website-color-custom:focus-within { outline: 3px solid var(--sec); outline-offset: 2px; }
.website-color-custom input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.website-position { justify-self: start; }
.website-position button { min-height: 2.6rem; cursor: pointer; }
.website-position button[aria-checked="true"] { background: #fff; color: var(--ob-ink); box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.website-toggle {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .7rem; padding: .8rem .9rem;
  border: 1px solid var(--ob-line); border-radius: 14px; background: #f8fafc; cursor: pointer;
}
.website-toggle input { width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; }
.website-toggle strong { display: block; color: var(--ob-ink); font-size: .88rem; }
.website-toggle small { display: block; margin-top: .15rem; color: var(--ob-muted); font-size: .78rem; font-weight: 500; }
/* Languages: which ones the chat speaks, the main one, then a name and greeting for each */
.website-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.website-chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0 1rem 0 .55rem;
  border: 1.5px solid var(--ob-line-strong); border-radius: 999px; background: #fff; color: var(--ob-muted);
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.website-chip small { color: var(--ob-muted); font-size: .74rem; font-weight: 600; }
.website-chip-check {
  display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1.5px solid var(--ob-line-strong); border-radius: 50%;
  color: transparent; transition: background-color .15s ease, border-color .15s ease;
}
.website-chip-check .journey-icon { width: .85rem; height: .85rem; }
.website-chip:hover { border-color: var(--sec-line); color: var(--sec-strong); }
.website-chip[aria-pressed="true"] { border-color: var(--sec); background: var(--sec-soft); color: var(--sec-strong); }
.website-chip[aria-pressed="true"] .website-chip-check { border-color: var(--sec); background: var(--sec); color: #fff; }
.website-chip[aria-disabled="true"] { cursor: default; }
.website-chip:focus-visible { outline: 3px solid var(--sec); outline-offset: 2px; }
.website-main-language { display: grid; gap: .4rem; margin-top: .3rem; padding: .75rem .85rem; border: 1px solid var(--ob-line); border-radius: 14px; background: #f8fafc; }
.website-main-language > span { color: var(--ob-ink); font-size: .82rem; font-weight: 750; }
.website-language-texts { display: grid; gap: .75rem; padding: .85rem; border: 1px solid var(--ob-line); border-radius: 16px; background: #fff; }
.website-language-tabs { justify-self: start; }
.website-language-tabs button { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; cursor: pointer; }
.website-language-tabs button[aria-selected="true"] { background: #fff; color: var(--ob-ink); box-shadow: 0 1px 4px rgba(15, 23, 42, .12); }
.website-language-tabs button:focus-visible { outline: 3px solid var(--sec); outline-offset: 1px; }
.website-language-tabs em {
  padding: .05rem .4rem; border-radius: 999px; background: var(--sec-soft); color: var(--sec-strong);
  font-size: .64rem; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.website-language-panel { display: grid; gap: .95rem; }
.website-main-language[hidden], .website-language-tabs[hidden], .website-language-tabs button[hidden],
.website-main-language button[hidden], .website-language-panel[hidden] { display: none; }

.website-preview-wrap { position: sticky; top: 0; display: grid; gap: .45rem; }
.website-preview-label { margin: 0; color: var(--ob-muted); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.website-preview {
  --chat-accent: #2563eb; --chat-ink: #fff;
  overflow: hidden; border: 1px solid var(--ob-line); border-radius: 16px; background: #fff;
  box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .45);
}
.website-preview-bar { display: flex; align-items: center; gap: .3rem; padding: .5rem .7rem; border-bottom: 1px solid var(--ob-line); background: #f8fafc; }
.website-preview-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #cbd5e1; }
.website-preview-bar em {
  flex: 1; min-width: 0; margin-left: .5rem; padding: .2rem .6rem; border-radius: 999px; background: #fff; color: var(--ob-muted);
  font-size: .7rem; font-style: normal; font-weight: 600; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.website-preview-page { position: relative; display: grid; align-content: start; gap: .55rem; height: 25rem; padding: 1rem; background: linear-gradient(180deg, #fff, #f8fafc); }
.preview-line { width: 60%; height: .6rem; border-radius: 999px; background: #e2e8f0; }
.preview-line.is-wide { width: 80%; height: .9rem; background: #cbd5e1; }
.preview-line.is-short { width: 40%; }
.website-preview-panel {
  position: absolute; right: .8rem; bottom: 4rem; display: grid; width: min(15.5rem, calc(100% - 1.6rem)); overflow: hidden;
  border-radius: 14px; background: #fff; box-shadow: 0 18px 36px -16px rgba(15, 23, 42, .45), 0 0 0 1px rgba(15, 23, 42, .06);
}
.website-preview[data-position="left"] .website-preview-panel { right: auto; left: .8rem; }
.website-preview-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .7rem; background: var(--chat-accent); color: var(--chat-ink); }
.website-preview-head > span { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; flex: none; border-radius: 8px; background: rgba(255, 255, 255, .2); }
.website-preview-head > div { flex: 1; min-width: 0; }
.website-preview-lang {
  flex: none; padding: .2rem .45rem; border-radius: 7px; background: rgba(255, 255, 255, .18);
  font-size: .64rem; font-style: normal; font-weight: 750; white-space: nowrap;
}
.website-preview-head .journey-icon { width: 1rem; height: 1rem; }
.website-preview-head strong { display: block; overflow: hidden; font-size: .8rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.website-preview-head small { display: block; font-size: .64rem; opacity: .9; }
.website-preview-log { display: grid; gap: .4rem; padding: .7rem; background: #f6f8fb; }
.website-preview-bubble {
  justify-self: start; max-width: 85%; margin: 0; padding: .45rem .6rem; border: 1px solid #e2e8f0; border-radius: 12px 12px 12px 4px;
  background: #fff; color: #0f172a; font-size: .74rem; line-height: 1.4; overflow-wrap: anywhere; unicode-bidi: plaintext;
}
.website-preview-card { display: grid; gap: .3rem; padding: .5rem .55rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
.website-preview-card[hidden] { display: none; }
.website-preview-card strong { color: #0f172a; font-size: .7rem; font-weight: 800; }
.website-preview-card span { display: grid; gap: .25rem; }
.website-preview-card i { padding: .3rem .45rem; border: 1px solid #cbd5e1; border-radius: 7px; color: #94a3b8; font-size: .64rem; font-style: normal; }
.website-preview-bubble[hidden] { display: none; }
.website-contact [data-contact-fields][hidden] { display: none; }
.website-preview-bubble.is-visitor { justify-self: end; border-color: transparent; border-radius: 12px 12px 4px 12px; background: var(--chat-accent); color: var(--chat-ink); }
.website-preview-compose { display: flex; align-items: center; gap: .4rem; padding: .5rem .6rem; border-top: 1px solid #e2e8f0; color: #94a3b8; font-size: .72rem; }
.website-preview-compose span { flex: 1; padding: .4rem .55rem; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.website-preview-compose i { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 8px; background: var(--chat-accent); color: var(--chat-ink); }
.website-preview-compose .journey-icon { width: .85rem; height: .85rem; }
.website-preview-launcher {
  position: absolute; right: .8rem; bottom: .8rem; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 50%; background: var(--chat-accent); color: var(--chat-ink); box-shadow: 0 10px 20px -10px rgba(15, 23, 42, .6);
}
.website-preview[data-position="left"] .website-preview-launcher { right: auto; left: .8rem; }
.website-preview-launcher .journey-icon { width: 1.2rem; height: 1.2rem; }

@media (prefers-reduced-motion: reduce) {
  .website-choice:hover, .website-swatch:hover { transform: none; }
  .art-wire, .website-dialog[open] { animation: none; }
}
@media (max-width: 1024px) {
  .website-chat-actions .button, .website-install-tabs button, .website-chat-add .button { min-height: 44px; }
}
@media (max-width: 860px) {
  .website-form-grid { grid-template-columns: minmax(0, 1fr); }
  .website-preview-wrap { position: static; }
  .website-preview-page { height: 21rem; }
}
@media (max-width: 760px) {
  .website-choice-grid { grid-template-columns: minmax(0, 1fr); }
  .website-chat-heading { grid-template-columns: auto minmax(0, 1fr); }
  .website-chat-add { grid-column: 1 / -1; justify-content: stretch; }
  .website-chat-add .button { flex: 1 1 10rem; }
  .website-chat-facts div { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
}
@media (max-width: 560px) {
  .website-dialog, .website-dialog:has(.is-wide) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .website-dialog-scroll { padding: 1.1rem 1rem 1rem; }
  .website-dialog .dialog-actions { padding: .8rem 1rem calc(.9rem + env(safe-area-inset-bottom)); }
  .website-dialog .dialog-actions .button { flex: 1 1 8rem; }
  .website-dialog-head { grid-template-columns: minmax(0, 1fr); }
  .website-dialog-icon { width: 2.6rem; height: 2.6rem; }
  .website-code { flex-wrap: wrap; }
  .website-code .website-copy { width: 100%; }
  .website-chat-actions, .website-chat-main, .website-chat-state { width: 100%; }
  .website-chat-actions .button { flex: 1 1 8rem; }
  .website-chat-section { padding: .9rem; }
}

/* ─── Confirmations ─────────────────────────────────────────────────
   AIBO's own dialog for every "are you sure?" (confirmAction in app.js),
   in place of the browser's. Its tone sets the icon and the main button. */

.confirm-dialog {
  --confirm: var(--sec-strong); --confirm-soft: var(--sec-soft); --confirm-line: var(--sec-line);
  width: min(28rem, calc(100vw - 2rem)); padding: 0; overflow: hidden; border: 0; border-radius: 22px;
  background: #fff; color: var(--ob-ink); font-family: var(--font-ui); box-shadow: 0 40px 80px -30px rgba(15, 23, 42, .55);
}
.confirm-dialog[data-tone="danger"] { --confirm: #dc2626; --confirm-soft: #fef2f2; --confirm-line: #fecaca; }
.confirm-dialog[data-tone="warning"] { --confirm: #d97706; --confirm-soft: #fffbeb; --confirm-line: #fde68a; }
.confirm-dialog[open] { animation: confirm-in .18s var(--ob-ease); }
.confirm-dialog::backdrop { background: rgba(15, 23, 42, .5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes confirm-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.confirm-dialog-body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon copy" ". extra" "actions actions";
  gap: 1.1rem .95rem; margin: 0; padding: 1.4rem 1.4rem 1.2rem;
}
.confirm-dialog-icon {
  grid-area: icon; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 15px;
  border: 1px solid var(--confirm-line); background: var(--confirm-soft); color: var(--confirm);
}
.confirm-dialog-icon .journey-icon { width: 1.4rem; height: 1.4rem; stroke-width: 2; }
.confirm-dialog-copy { grid-area: copy; min-width: 0; padding-top: .1rem; }
.confirm-dialog-copy h2 { margin: 0 0 .35rem; color: var(--ob-ink); font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: anywhere; }
.confirm-dialog-copy p { margin: 0; color: var(--ob-muted); font-size: .92rem; line-height: 1.55; }
.confirm-dialog-actions {
  grid-area: actions; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem;
  margin: 0 -1.4rem -1.2rem; padding: .9rem 1.4rem 1.1rem; border-top: 1px solid var(--ob-line); background: #f8fafc;
}
.confirm-dialog-actions .button { min-width: 7rem; }
/* What the action will do, a reason, and a word to type for what can't be undone */
.confirm-dialog-extra { grid-area: extra; display: grid; gap: .85rem; min-width: 0; }
.confirm-dialog-details {
  display: grid; gap: .3rem; margin: 0; padding: .7rem .9rem .7rem 1.9rem; border: 1px solid var(--confirm-line); border-radius: 12px;
  background: var(--confirm-soft); color: var(--ob-ink); font-size: .88rem; line-height: 1.45;
}
.confirm-dialog-field { display: grid; gap: .35rem; color: var(--ob-ink); font-size: .84rem; font-weight: 650; }
.confirm-dialog-field strong { color: var(--confirm); letter-spacing: .06em; }
.confirm-dialog-field textarea, .confirm-dialog-field input {
  width: 100%; min-height: 2.75rem; padding: .6rem .75rem; border: 1px solid var(--ob-line-strong); border-radius: 10px;
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--ob-ink); background: #fff; resize: vertical;
}
.confirm-dialog-field textarea:focus, .confirm-dialog-field input:focus { outline: 3px solid var(--confirm-line); border-color: var(--confirm); }
.confirm-dialog .button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.confirm-dialog[data-tone="warning"] .button.primary { background: linear-gradient(135deg, #d97706, #b45309); box-shadow: 0 10px 22px -14px #b45309; }
.confirm-dialog[data-tone="warning"] .button.primary:hover:not(:disabled) { background: linear-gradient(135deg, #b45309, #92400e); }
.button.is-danger {
  border-color: transparent; color: #fff; background: linear-gradient(135deg, #dc2626, #b91c1c);
  box-shadow: 0 10px 22px -14px #b91c1c, inset 0 1px 0 rgba(255, 255, 255, .18);
}
.button.is-danger:hover:not(:disabled) { border-color: transparent; background: linear-gradient(135deg, #b91c1c, #991b1b); transform: translateY(-1px); }
.confirm-dialog .button:focus-visible { outline: 3px solid var(--confirm); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .confirm-dialog[open] { animation: none; } }
@media (max-width: 560px) {
  /* On phones it rises from the bottom, with full-width buttons */
  .confirm-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .confirm-dialog-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "icon" "copy" "extra" "actions"; padding: 1.3rem 1.1rem 1rem; }
  .confirm-dialog-actions { flex-direction: column-reverse; margin: 0 -1.1rem -1rem; padding: .9rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
  .confirm-dialog-actions .button { width: 100%; min-height: 48px; }
}

/* ─── TikTok (Settings) ─────────────────────────────────────────────
   TikTok's black, with its cyan and red offset on the note mark. */

.platform-icon.is-tiktok { background: #0f0f10; color: #fff; }
.platform-icon.is-tiktok svg, .tiktok-mark svg, .tiktok-app-mark svg, .button-mark svg, .website-dialog-icon.is-tiktok svg {
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55);
}
.tiktok-section {
  display: grid; gap: 1rem; margin-top: 1rem; padding: 1.1rem;
  border: 1px solid #e5e7eb; border-radius: 20px;
  background: radial-gradient(36rem 14rem at 100% 0%, #fdf2f5, transparent 70%), radial-gradient(30rem 12rem at 0% 0%, #ecfeff, transparent 65%), #fff;
  box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}
.tiktok-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .85rem; }
.tiktok-heading .eyebrow { margin: 0; color: #be123c; }
.tiktok-heading h4 { margin: 0; color: var(--ob-ink); font-size: 1.05rem; letter-spacing: -.01em; }
.tiktok-heading p:not(.eyebrow) { margin: .15rem 0 0; color: var(--ob-muted); font-size: .86rem; line-height: 1.45; }
.tiktok-mark, .tiktok-app-mark {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 15px;
  background: #0f0f10; color: #fff; box-shadow: 0 12px 22px -14px rgba(15, 15, 16, .8);
}
.tiktok-mark svg { width: 1.5rem; height: 1.5rem; }
.tiktok-app-mark { width: 2.5rem; height: 2.5rem; border-radius: 13px; }
.tiktok-app-mark svg { width: 1.25rem; height: 1.25rem; }
.button-mark { display: inline-grid; place-items: center; }
.button-mark svg { width: 1rem; height: 1rem; }
.website-dialog-icon.is-tiktok { background: #0f0f10; box-shadow: 0 12px 24px -14px rgba(15, 15, 16, .8); }
.website-dialog-icon.is-tiktok svg { width: 1.5rem; height: 1.5rem; }

/* Before an app is added: the three steps, side by side */
.tiktok-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.tiktok-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; padding: 1rem;
  border: 1px solid var(--ob-line); border-radius: 18px; background: #fff;
}
.tiktok-step.is-later { background: #f8fafc; }
.tiktok-step-number {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  background: #0f0f10; color: #fff; font-size: .85rem; font-weight: 800;
}
.tiktok-step.is-later .tiktok-step-number { background: #e2e8f0; color: var(--ob-muted); }
.tiktok-step-copy { display: grid; align-content: start; gap: .55rem; min-width: 0; }
.tiktok-step h5 { margin: .2rem 0 0; color: var(--ob-ink); font-size: .98rem; font-weight: 800; }
.tiktok-step p { margin: 0; color: var(--ob-muted); font-size: .85rem; line-height: 1.5; }
.tiktok-step p strong { color: var(--ob-ink); }
.tiktok-step .tiktok-step-label { margin-top: .2rem; color: var(--ob-ink); font-size: .78rem; font-weight: 750; }
.tiktok-step .website-code code { font-size: .74rem; }
.tiktok-step .button { justify-self: start; }
.tiktok-step .button .journey-icon { width: 1rem; height: 1rem; stroke-width: 2.2; }
.tiktok-step-links { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.tiktok-step-links a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.2rem; color: #be123c; font-size: .84rem; font-weight: 700; }
.tiktok-step-links .journey-icon { width: 1rem; height: 1rem; }

/* TikTok's rules, always in view */
.tiktok-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.tiktok-rules li {
  display: flex; align-items: flex-start; gap: .5rem; padding: .7rem .8rem;
  border: 1px solid var(--ob-line); border-radius: 14px; background: rgba(255, 255, 255, .85);
  color: var(--ob-muted); font-size: .8rem; line-height: 1.45;
}
.tiktok-rules li strong { display: block; color: var(--ob-ink); font-size: .84rem; }
.tiktok-rules .journey-icon { width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: #be123c; }

/* After: each app with its accounts */
.tiktok-apps { display: grid; gap: .85rem; }
.tiktok-app {
  display: flex; flex-direction: column; gap: .75rem; padding: .95rem;
  border: 1px solid var(--ob-line); border-radius: 16px; background: #fff; box-shadow: var(--ob-shadow);
}
.tiktok-app > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; }
.tiktok-app-title { min-width: 0; }
.tiktok-app-title h5 { margin: 0; color: var(--ob-ink); font-size: .98rem; font-weight: 800; overflow-wrap: anywhere; }
.tiktok-app-title small { display: block; margin-top: .15rem; color: var(--ob-muted); font-size: .78rem; overflow-wrap: anywhere; }
.tiktok-app[data-webhook="error"] > header .connection-state { color: #9a5b0a; }
.tiktok-app[data-webhook="error"] > header .connection-state::before { background: #e49a1f; box-shadow: 0 0 0 3px #fff1d6; }
.tiktok-app:is([data-webhook="remote"], [data-webhook="pending"]) > header .connection-state { color: #175cd3; }
.tiktok-app:is([data-webhook="remote"], [data-webhook="pending"]) > header .connection-state::before { background: #2e7cf6; box-shadow: 0 0 0 3px #e1edff; }
.tiktok-accounts { display: grid; padding: 0 .2rem; border: 1px solid var(--ob-line); border-radius: 14px; background: #fcfcfd; }
.tiktok-accounts .identity-channel { padding: .6rem .5rem; }
.tiktok-accounts .identity-channel[data-health="expiring"] .connection-state,
.tiktok-accounts .identity-channel[data-health="reconnect"] .connection-state,
.tiktok-accounts .identity-channel[data-health="paused"] .connection-state { color: #9a5b0a; }
.tiktok-accounts .identity-channel[data-health="expiring"] .connection-state::before,
.tiktok-accounts .identity-channel[data-health="reconnect"] .connection-state::before,
.tiktok-accounts .identity-channel[data-health="paused"] .connection-state::before { background: #e49a1f; box-shadow: 0 0 0 3px #fff1d6; }
.tiktok-empty { display: flex; align-items: flex-start; gap: .55rem; margin: 0; padding: .85rem .7rem; color: var(--ob-muted); font-size: .84rem; line-height: 1.45; }
.tiktok-empty strong { color: var(--ob-ink); }
.tiktok-empty .journey-icon { width: 1.1rem; height: 1.1rem; margin-top: .1rem; color: var(--ob-muted); }
.tiktok-app .website-chat-actions .button { gap: .4rem; }

@media (max-width: 1100px) {
  .tiktok-steps { grid-template-columns: minmax(0, 1fr); }
  .tiktok-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .tiktok-app .button, .tiktok-step .button, .tiktok-accounts .button { min-height: 44px; }
}
@media (max-width: 560px) {
  .tiktok-section { padding: .9rem; }
  .tiktok-rules { grid-template-columns: minmax(0, 1fr); }
  .tiktok-app > header { grid-template-columns: auto minmax(0, 1fr); }
  .tiktok-app > header .connection-state { grid-column: 1 / -1; justify-self: start; }
  .tiktok-step { grid-template-columns: minmax(0, 1fr); }
  .tiktok-step .button { justify-self: stretch; }
}

/* Profile photos: AIBO's own copies of Meta profile pictures, over the avatar's usual icon or initial */
.has-photo { position: relative; }
.has-photo > .customer-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; background: #e2e8f0;
}
.avatar-badge {
  position: absolute; right: -.2rem; bottom: -.2rem; display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
}
.avatar-badge .platform-icon,
#viewInbox .conversation-avatar .avatar-badge .platform-icon { width: .95rem; height: .95rem; flex-basis: .95rem; border-radius: .28rem; }
#viewInbox .conversation-avatar.has-photo { background: #e2e8f0; }
#viewInbox .thread-heading.has-avatar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: center; }
#viewInbox .thread-heading.has-avatar > :not(.thread-avatar) { grid-column: 2; }
.thread-avatar { position: relative; grid-row: 1 / span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: #e2e8f0; }
.thread-avatar[hidden] { display: none; }
.identity-avatar.has-photo { overflow: hidden; color: transparent; }
/* A connected account's own picture on Platforms, with the platform on its corner */
.channel-avatar { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; border-radius: 50%; }
.channel-avatar > .platform-icon { width: 2rem; height: 2rem; flex-basis: 2rem; border-radius: .6rem; }
.channel-avatar.has-photo > .platform-icon { width: 100%; height: 100%; border-radius: 50%; }
.channel-avatar.has-photo > .customer-photo { box-shadow: 0 0 0 1px rgba(15, 23, 42, .08); }
.channel-avatar .avatar-badge { right: -.15rem; bottom: -.15rem; width: 1.2rem; height: 1.2rem; }
.channel-avatar .avatar-badge .platform-icon { width: 1rem; height: 1rem; flex-basis: 1rem; border-radius: .3rem; }
.channel-avatar .avatar-badge .platform-icon svg { width: .7rem; height: .7rem; }
.customer-avatar.has-photo { overflow: hidden; }
@media (max-width: 680px) { .thread-avatar { width: 2.35rem; height: 2.35rem; } }

/* Deleting a customer's data: set apart at the end of the customer record */
.customer-erase {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-top: 1rem;
  padding: .85rem 1rem; border: 1px solid #fecaca; border-radius: 14px; background: #fff7f7;
}
.customer-erase > div { flex: 1 1 16rem; min-width: 0; }
.customer-erase h5 { margin: 0 0 .2rem; color: #991b1b; }
.customer-erase p { margin: 0; color: #64748b; font-size: .82rem; line-height: 1.45; }
.customer-erase .button { flex: none; width: auto; }

/* What AIBO remembers: the customer memory card at the top of the Profile tab (0073) */
.memory-card {
  container-type: inline-size;
  display: grid; gap: .8rem; margin-bottom: .85rem; padding: 1rem;
  border: 1px solid #ddd6fe; border-radius: 16px; background: linear-gradient(180deg, #faf8ff 0, #fff 7rem); box-shadow: var(--ob-shadow);
}
.memory-card-head { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.memory-card-icon {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: .85rem;
  background: linear-gradient(135deg, #8b5cf6, #6366f1); color: #fff; box-shadow: 0 8px 18px -10px rgba(99, 102, 241, .8);
}
.memory-card-icon .journey-icon { width: 1.35rem; height: 1.35rem; }
.memory-card-title { flex: 1; min-width: 0; }
.memory-card-title .eyebrow { margin: 0 0 .1rem; color: #6d28d9; }
.memory-card-title h4 { margin: 0; color: #0f172a; font-size: 1.02rem; }
.memory-card .memory-refresh { display: inline-flex; align-items: center; gap: .4rem; width: auto; flex: none; }
.memory-card .button .journey-icon { width: 1rem; height: 1rem; }
.memory-status { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: #475569; font-size: .8rem; line-height: 1.45; }
.memory-status .journey-icon { width: .95rem; height: .95rem; margin-top: .1rem; flex: none; color: #6d28d9; }
.memory-status[data-tone="check"] .journey-icon { color: #047857; }
.memory-status[data-tone="pause"] .journey-icon, .memory-status[data-tone="info"] .journey-icon { color: #b45309; }
.memory-story { padding: .75rem .85rem; border: 1px solid #ede9fe; border-radius: 12px; background: #f5f3ff; }
.memory-story h5, .memory-add-field > span {
  margin: 0 0 .3rem; color: #5b21b6; font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
}
.memory-story p { margin: 0; color: #1e293b; font-size: .86rem; line-height: 1.55; overflow-wrap: anywhere; }
.memory-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
@container (min-width: 46rem) { .memory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.memory-item {
  --memory-ink: #475569; --memory-soft: #f8fafc; --memory-line: #e2e8f0;
  display: grid; gap: .35rem; min-width: 0; padding: .55rem .7rem .6rem .8rem;
  border: 1px solid var(--ob-line); border-left: 3px solid var(--memory-ink); border-radius: 12px; background: #fff;
}
.memory-item[data-kind="goal"] { --memory-ink: #1d4ed8; --memory-soft: #eff6ff; --memory-line: #bfdbfe; }
.memory-item[data-kind="interest"] { --memory-ink: #be185d; --memory-soft: #fdf2f8; --memory-line: #fbcfe8; }
.memory-item[data-kind="purchase"] { --memory-ink: #047857; --memory-soft: #ecfdf5; --memory-line: #a7f3d0; }
.memory-item[data-kind="promise"] { --memory-ink: #c2410c; --memory-soft: #fff7ed; --memory-line: #fed7aa; }
.memory-item[data-kind="concern"] { --memory-ink: #b45309; --memory-soft: #fffbeb; --memory-line: #fde68a; }
.memory-item[data-kind="preference"] { --memory-ink: #0f766e; --memory-soft: #f0fdfa; --memory-line: #99f6e4; }
.memory-item-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-width: 0; }
.memory-kind {
  display: inline-flex; align-items: center; gap: .3rem; min-width: 0; padding: .12rem .55rem .12rem .4rem;
  border: 1px solid var(--memory-line); border-radius: 999px; background: var(--memory-soft); color: var(--memory-ink);
  font-size: .72rem; font-weight: 750; white-space: nowrap;
}
.memory-kind .journey-icon { width: .85rem; height: .85rem; flex: none; }
.memory-body { margin: 0; color: #0f172a; font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.memory-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .8rem; color: #64748b; font-size: .74rem; }
.memory-origin { display: inline-flex; align-items: center; gap: .3rem; }
.memory-origin .journey-icon { width: .8rem; height: .8rem; }
.memory-evidence-toggle {
  display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0; border: 0; background: none;
  color: #6d28d9; font: inherit; font-weight: 700; cursor: pointer;
}
.memory-evidence-toggle::after {
  content: ""; width: .36rem; height: .36rem; margin-left: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.1rem) rotate(45deg); transition: transform .15s ease;
}
.memory-evidence-toggle[aria-expanded="true"]::after { transform: translateY(.1rem) rotate(-135deg); }
.memory-evidence { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.memory-evidence[hidden] { display: none; }
.memory-evidence li { display: grid; gap: .1rem; padding: .45rem .6rem; border-radius: 8px; background: #f8fafc; }
.memory-evidence small { color: #64748b; font-size: .7rem; font-weight: 650; }
.memory-evidence q { color: #334155; font-size: .8rem; line-height: 1.45; overflow-wrap: anywhere; }
.memory-actions { display: inline-flex; flex: none; gap: .15rem; }
.memory-action {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 1.9rem; padding: 0 .55rem;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: #475569;
  font: inherit; font-size: .76rem; font-weight: 650; cursor: pointer;
}
.memory-action .journey-icon { width: .85rem; height: .85rem; }
.memory-action:hover { border-color: var(--ob-line); background: #f8fafc; color: #0f172a; }
.memory-action.is-forget:hover { border-color: #fecaca; background: #fff7f7; color: #b91c1c; }
.memory-action:focus-visible, .memory-evidence-toggle:focus-visible, .memory-more:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.memory-action:disabled { opacity: .45; cursor: not-allowed; }
.memory-more {
  min-height: 2.5rem; padding: 0 1rem; border: 1px dashed #c4b5fd; border-radius: 12px; background: #faf8ff;
  color: #6d28d9; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}
.memory-more:hover { border-style: solid; background: #f5f3ff; }
.memory-empty {
  margin: 0; padding: .8rem .9rem; border: 1px dashed #c4b5fd; border-radius: 12px; background: #faf8ff;
  color: #475569; font-size: .82rem; line-height: 1.5;
}
.memory-edit, .memory-add { display: grid; gap: .55rem; }
.memory-edit label, .memory-add-field { display: grid; gap: .3rem; color: #334155; font-size: .78rem; font-weight: 650; }
.memory-edit textarea, .memory-edit select, .memory-add textarea, .memory-add select {
  width: 100%; min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid var(--ob-line-strong); border-radius: 10px;
  background: #fff; color: #0f172a; font: inherit; font-size: .88rem; font-weight: 500;
}
.memory-edit textarea, .memory-add textarea { resize: vertical; line-height: 1.45; }
.memory-edit textarea:focus, .memory-edit select:focus, .memory-add textarea:focus, .memory-add select:focus {
  outline: 3px solid #ddd6fe; border-color: #8b5cf6;
}
.memory-edit-actions, .memory-add-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.memory-add-row select { flex: 1 1 9rem; width: auto; }
.memory-card .memory-edit-actions .button, .memory-card .memory-add-row .button { display: inline-flex; align-items: center; gap: .35rem; width: auto; flex: none; }
.memory-add { padding-top: .8rem; border-top: 1px solid #ede9fe; }
.memory-foot { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: #64748b; font-size: .74rem; line-height: 1.45; }
.memory-foot .journey-icon { width: .85rem; height: .85rem; margin-top: .1rem; flex: none; color: #6d28d9; }
@media (prefers-reduced-motion: reduce) { .memory-evidence-toggle::after { transition: none; } }
@media (max-width: 1024px) {
  .memory-action, .memory-evidence-toggle, .memory-more, .memory-card .button { min-height: 44px; }
  .memory-action { min-width: 44px; }
  .memory-edit textarea, .memory-edit select, .memory-add textarea, .memory-add select { min-height: 44px; font-size: 1rem; }
}
/* Narrow screens: the two actions show as icons and keep their names for screen readers. */
@media (max-width: 480px) {
  .memory-action { padding: 0; }
  .memory-action span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .memory-action .journey-icon { width: 1.05rem; height: 1.05rem; }
}

/* What AIBO understood from a file: a voice note's transcript, or what a photo shows (0074) */
.message-insight {
  display: grid; gap: .3rem; margin: .45rem 0 0; padding: .5rem .65rem; border: 1px solid #ede9fe; border-radius: 12px;
  background: #f8f6ff; color: #1e293b; font-size: .84rem; line-height: 1.5; text-align: start;
}
.message-insight .journey-icon { width: .9rem; height: .9rem; flex: none; }
.message-insight.is-waiting, .message-insight.is-offer, .message-insight.is-failed, .message-insight.is-skipped {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; padding: .35rem .6rem; color: #475569; font-size: .78rem;
}
.message-insight.is-offer { padding: 0; border: 0; background: none; }
.message-insight.is-waiting .journey-icon { color: #7c3aed; animation: insight-pulse 1.6s ease-in-out infinite; }
.message-insight.is-failed { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.message-insight.is-failed .journey-icon, .message-insight.is-skipped .journey-icon { color: #b45309; }
.insight-label {
  display: inline-flex; align-items: center; gap: .3rem; color: #6d28d9; font-size: .7rem; font-weight: 750;
  letter-spacing: .03em; text-transform: uppercase;
}
.insight-text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.insight-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.insight-more, .insight-action {
  display: inline-flex; align-items: center; gap: .3rem; justify-self: start; min-height: 1.9rem; padding: 0 .6rem;
  border: 1px solid #ddd6fe; border-radius: 999px; background: #fff; color: #6d28d9; font: inherit; font-size: .76rem;
  font-weight: 700; cursor: pointer;
}
.insight-more { padding: 0; border: 0; background: none; min-height: 1.5rem; }
.insight-action:hover { border-color: #8b5cf6; background: #f5f3ff; }
.insight-action:disabled { opacity: .6; cursor: progress; }
.insight-action:focus-visible, .insight-more:focus-visible { outline: 3px solid #c4b5fd; outline-offset: 2px; }
.insight-details { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .3rem .75rem; margin: .15rem 0 0; }
.insight-details > div { min-width: 0; }
.insight-details dt { color: #64748b; font-size: .68rem; font-weight: 700; }
.insight-details dd { margin: 0; color: #0f172a; font-size: .8rem; font-weight: 600; overflow-wrap: anywhere; }
/* Inside the business's own (blue) bubbles */
#viewInbox .message-bubble.is-outbound .message-insight { border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .14); color: #fff; }
#viewInbox .message-bubble.is-outbound .message-insight :is(.insight-label, dt, dd, span, p) { color: #fff; }
#viewInbox .message-bubble.is-outbound .insight-action { border-color: rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .16); color: #fff; }
@keyframes insight-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .message-insight.is-waiting .journey-icon { animation: none; } }
@media (max-width: 1024px) { .insight-action, .insight-more { min-height: 44px; } }
/* A recording or photo with AIBO's reading gets room for the words */
#viewInbox .message-bubble.is-audio:has(.message-insight.is-transcript) { width: min(24rem, 82%); }
#viewInbox .message-bubble.is-media:has(.message-insight.is-description) { width: min(24rem, 82%); }
.insight-details { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }

/* Insights: the week's numbers and themes, and what AIBO should learn (0075). Its own colour is fuchsia. */
body[data-page="insights"] { --sec: #c026d3; --sec-strong: #a21caf; --sec-deep: #701a75; --sec-soft: #fdf4ff; --sec-line: #f5d0fe; --sec-2: #f472b6; }
.nav-item[data-view="insights"], .nav-group-current[data-view="insights"] { --tile: #d946ef; --tile-deep: #a21caf; --tile-glow: #f0abfc; }
.insights-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1rem;
  padding: .85rem 1rem; border: 1px solid var(--sec-line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--ob-shadow);
}
.insights-bar-copy { display: grid; gap: .15rem; min-width: 0; flex: 1 1 18rem; }
.insights-bar-copy strong { color: var(--sec-deep); font-size: .95rem; }
.insights-bar-copy span { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.insights-bar .button { display: inline-flex; align-items: center; gap: .4rem; width: auto; flex: none; }
.insights-bar .button .journey-icon { width: 1rem; height: 1rem; }
.insights-metrics { margin-bottom: 1rem; }
.insights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.insights-card { padding: 1.1rem; min-width: 0; }
.insights-wide { grid-column: 1 / -1; }
.insights-card .section-card-heading { margin-bottom: .8rem; }
.insights-card .section-card-heading h3 { margin: 0; color: var(--text); font-size: 1.02rem; }
.insights-card .eyebrow { color: var(--sec-strong); }
.insights-card .soft-badge { background: var(--sec-soft); color: var(--sec-strong); border: 1px solid var(--sec-line); }
.insights-intro { margin: -.35rem 0 .9rem; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.insights-empty {
  display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1rem; border: 1px dashed var(--sec-line); border-radius: 12px;
  background: var(--sec-soft); color: var(--muted);
}
.insights-empty .journey-icon { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .1rem; color: var(--sec-strong); }
.insights-empty strong { color: var(--text); font-size: .88rem; }
.insights-empty p { margin: .15rem 0 0; font-size: .82rem; line-height: 1.5; }

/* Ranked themes: what customers ask, what holds them back */
.insights-theme-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.insights-theme { display: grid; gap: .35rem; min-width: 0; }
.insights-theme-head { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.insights-rank {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; border-radius: 999px;
  background: var(--sec-soft); color: var(--sec-strong); font-size: .76rem; font-weight: 800;
}
.insights-theme-head strong { flex: 1; min-width: 0; color: var(--text); font-size: .9rem; line-height: 1.35; overflow-wrap: anywhere; }
.insights-count { flex: none; color: var(--sec-deep); font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.insights-meter { display: block; height: .45rem; overflow: hidden; border-radius: 999px; background: var(--sec-soft); }
.insights-meter b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sec-2), var(--sec-strong)); }
.insights-examples summary {
  display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--sec-strong); font-size: .78rem; font-weight: 700; cursor: pointer; list-style: none;
}
.insights-examples summary::-webkit-details-marker { display: none; }
.insights-examples summary::after {
  content: ""; width: .34rem; height: .34rem; margin-left: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.1rem) rotate(45deg); transition: transform .15s ease;
}
.insights-examples[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.insights-examples ul, .insights-asked { display: grid; gap: .4rem; margin: .25rem 0 0; padding: 0; list-style: none; }
.insights-examples li, .insights-asked li { display: grid; gap: .2rem; padding: .5rem .65rem; border-radius: 10px; background: #f8fafc; }
.insights-examples q, .insights-asked q { color: #1e293b; font-size: .84rem; line-height: 1.5; overflow-wrap: anywhere; }
.insights-examples small, .insights-asked small { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; color: #64748b; font-size: .74rem; }
.insights-examples small .platform-icon, .insights-asked small .platform-icon { width: 1.05rem; height: 1.05rem; }
.insights-examples small .journey-icon { width: .85rem; height: .85rem; color: var(--sec-strong); }
.insights-link {
  margin-left: auto; padding: 0 .4rem; border: 0; background: none; color: var(--sec-strong); font: inherit; font-weight: 700; cursor: pointer;
}
.insights-link:hover { text-decoration: underline; }

/* Questions AIBO couldn't answer */
.insights-gaps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: .9rem; }
.insights-gap {
  display: grid; gap: .65rem; align-content: start; min-width: 0; padding: .9rem; border: 1px solid var(--sec-line); border-radius: 14px;
  background: linear-gradient(180deg, var(--sec-soft) 0, #fff 5rem);
}
.insights-gap-head { display: flex; align-items: flex-start; gap: .6rem; }
.insights-gap-icon {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: .7rem;
  background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff;
}
.insights-gap-icon .journey-icon { width: 1.1rem; height: 1.1rem; }
.insights-gap-head strong { display: block; color: var(--text); font-size: .92rem; line-height: 1.4; overflow-wrap: anywhere; }
.insights-gap-head small { color: #64748b; font-size: .75rem; }
.insights-reply { display: grid; gap: .25rem; padding: .55rem .7rem; border-left: 3px solid #10b981; border-radius: 8px; background: #ecfdf5; }
.insights-reply span { display: inline-flex; align-items: center; gap: .3rem; color: #047857; font-size: .72rem; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.insights-reply span .journey-icon { width: .85rem; height: .85rem; }
.insights-reply p { margin: 0; color: #1e293b; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.insights-answer { display: grid; gap: .5rem; }
.insights-answer label { display: grid; gap: .25rem; color: #334155; font-size: .76rem; font-weight: 650; }
.insights-answer input, .insights-answer textarea {
  width: 100%; min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid var(--ob-line-strong); border-radius: 10px;
  background: #fff; color: #0f172a; font: inherit; font-size: .88rem; font-weight: 500;
}
.insights-answer textarea { resize: vertical; line-height: 1.45; }
.insights-answer input:focus, .insights-answer textarea:focus { outline: 3px solid var(--sec-line); border-color: var(--sec); }
.insights-answer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.insights-answer-actions .button, .insights-lesson .button, .insights-lead .button { display: inline-flex; align-items: center; gap: .35rem; width: auto; flex: none; }
.insights-answer-actions .button .journey-icon, .insights-lesson .button .journey-icon { width: 1rem; height: 1rem; }

/* Why leads went cold */
.insights-reasons { display: grid; gap: .55rem; margin-bottom: .9rem; }
.insights-reasons strong { display: inline-flex; align-items: center; gap: .35rem; text-transform: none; }
.insights-reasons strong .journey-icon { width: .9rem; height: .9rem; color: var(--sec-strong); }
.insights-cold { display: grid; gap: .5rem; }
.insights-lead {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "channel copy open" "channel reason open";
  align-items: center; gap: .3rem .65rem; padding: .6rem .7rem; border: 1px solid var(--ob-line); border-radius: 12px; background: #fff;
}
.insights-lead-channel { grid-area: channel; align-self: start; }
.insights-lead-copy { grid-area: copy; min-width: 0; }
.insights-lead-copy strong { display: block; color: var(--text); font-size: .86rem; overflow-wrap: anywhere; }
.insights-lead-copy small { color: #64748b; font-size: .74rem; text-transform: none; }
.insights-lead-copy p { margin: .2rem 0 0; color: #334155; font-size: .8rem; line-height: 1.45; }
.insights-lead .button { grid-area: open; }
.insights-reason {
  grid-area: reason; display: inline-flex; align-items: center; gap: .3rem; justify-self: start; padding: .12rem .55rem .12rem .4rem;
  border: 1px solid var(--sec-line); border-radius: 999px; background: var(--sec-soft); color: var(--sec-strong); font-size: .72rem; font-weight: 750;
}
.insights-reason .journey-icon { width: .82rem; height: .82rem; }
.insights-reason[data-reason="price"], .insights-reason[data-reason="payment"] { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.insights-reason[data-reason="trust"] { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.insights-reason[data-reason="timing"] { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.insights-reason[data-reason="unread"], .insights-reason[data-reason="no_reason"] { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.insights-more {
  min-height: 2.5rem; border: 1px dashed var(--sec-line); border-radius: 12px; background: var(--sec-soft); color: var(--sec-strong);
  font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer;
}

/* By channel */
.insights-channels { display: grid; gap: .35rem; }
.insights-channel-head, .insights-channel-row {
  display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(3.2rem, .6fr)); align-items: center; gap: .5rem;
}
.insights-channel-head { padding: 0 .6rem .2rem; color: #64748b; font-size: .7rem; font-weight: 700; text-align: right; }
.insights-channel-row { padding: .55rem .6rem; border: 1px solid var(--ob-line); border-radius: 10px; background: #fff; }
.insights-channel-row strong { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; color: var(--text); font-size: .84rem; }
.insights-channel-row span { color: var(--text); font-size: .86rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* What the owner changes in AIBO's replies */
.insights-draft-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.insights-draft-stats > div { display: grid; gap: .15rem; padding: .75rem .85rem; border: 1px solid var(--ob-line); border-radius: 12px; background: #fff; }
.insights-draft-stats strong { color: var(--text); font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.insights-draft-stats span { color: var(--muted); font-size: .76rem; }
.insights-edit-summary { margin: .85rem 0 0; color: #334155; font-size: .88rem; line-height: 1.5; }
.insights-lessons { display: grid; gap: .55rem; margin-top: .85rem; }
.insights-lesson {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .75rem .85rem;
  border: 1px solid var(--sec-line); border-left: 3px solid var(--sec); border-radius: 12px; background: #fff;
}
.insights-lesson > div { flex: 1 1 18rem; min-width: 0; }
.insights-lesson strong { color: var(--text); font-size: .9rem; }
.insights-lesson p { margin: .2rem 0; color: #334155; font-size: .84rem; line-height: 1.45; }
.insights-lesson small { color: #64748b; font-size: .74rem; }
.insights-lesson .soft-badge { display: inline-flex; align-items: center; gap: .3rem; background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.insights-lesson .soft-badge .journey-icon { width: .85rem; height: .85rem; }
.insights-edits > .insights-empty { margin-top: .85rem; }

/* Knowledge page: what the owner taught AIBO */
.knowledge-taught-list { display: grid; gap: .55rem; padding: 0 1rem 1rem; }
.knowledge-taught-list h4 { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 0; color: #3730a3; font-size: .82rem; }
.knowledge-taught-list h4 .journey-icon { width: 1rem; height: 1rem; }
.taught-item {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; padding: .7rem .85rem;
  border: 1px solid var(--ob-line); border-radius: 12px; background: #fff;
}
.taught-item > div:first-child { flex: 1 1 18rem; min-width: 0; }
.taught-item strong { color: var(--text); font-size: .88rem; }
.taught-item p { margin: .2rem 0 0; color: #334155; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.taught-item.is-editing { display: grid; }
.taught-item label { display: grid; gap: .25rem; color: #334155; font-size: .76rem; font-weight: 650; }
.taught-item input, .taught-item textarea {
  width: 100%; min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid var(--ob-line-strong); border-radius: 10px; font: inherit; font-size: .88rem;
}
.taught-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.taught-actions .button { width: auto; }
.taught-empty { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) { .insights-examples summary::after { transition: none; } }
@media (max-width: 1024px) {
  .insights-grid { grid-template-columns: minmax(0, 1fr); }
  .insights-examples summary, .insights-link, .insights-more { min-height: 44px; }
  .insights-answer input, .insights-answer textarea, .taught-item input, .taught-item textarea { min-height: 44px; font-size: 1rem; }
}
@media (max-width: 680px) {
  .insights-draft-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights-bar .button { width: 100%; justify-content: center; }
  .insights-lead { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "channel copy" "channel reason" "open open"; }
  .insights-lead .button { width: 100%; justify-content: center; }
  .insights-channel-head { display: none; }
  .insights-channel-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .insights-channel-row strong { grid-column: 1 / -1; }
  .insights-channel-row span { display: grid; gap: .1rem; text-align: left; }
  .insights-channel-row span::before { content: attr(data-label); color: #64748b; font-size: .68rem; font-weight: 600; }
}
.insights-theme-list + .insights-more, .insights-cold .insights-more { width: 100%; margin-top: .75rem; }

/* Reply quality: every reply checked, and the reply tests (0076). Its own colour is amber. */
body[data-page="quality"] { --sec: #d97706; --sec-strong: #b45309; --sec-deep: #78350f; --sec-soft: #fffbeb; --sec-line: #fde68a; --sec-2: #f59e0b; }
.nav-item[data-view="quality"], .nav-group-current[data-view="quality"] { --tile: #f59e0b; --tile-deep: #b45309; --tile-glow: #fcd34d; }

/* The reply card: a reply the safety check stopped, and what the check found */
.draft-evidence[data-level="stopped"] { --draft-soft: #fff1f2; --draft-line: #fecdd3; --draft-ink: #be123c; }
.draft-evidence .draft-problems { margin: 0; }
.draft-evidence .draft-problems[hidden] { display: none; }
.draft-evidence .draft-problems li .journey-icon, .quality-findings li .journey-icon { color: #b45309; }
.draft-evidence .draft-problems li.is-unsafe .journey-icon, .quality-findings li.is-unsafe .journey-icon { color: #be123c; }
.draft-evidence .draft-problems span { min-width: 0; }
.draft-evidence .draft-problems small { line-height: 1.45; overflow-wrap: anywhere; }

/* Replies the check stopped or found wanting */
.quality-bar .button .journey-icon, .quality-test-actions .button .journey-icon { width: 1rem; height: 1rem; }
.quality-list { display: grid; gap: .6rem; }
.quality-reply {
  display: grid; gap: .5rem; min-width: 0; padding: .75rem .85rem; border: 1px solid var(--ob-line); border-left: 3px solid #f59e0b;
  border-radius: 12px; background: #fff;
}
.quality-reply[data-verdict="unsafe"] { border-left-color: #e11d48; }
.quality-reply-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.quality-reply-head > div { flex: 1; min-width: 0; }
.quality-reply-head strong { display: block; color: var(--text); font-size: .88rem; overflow-wrap: anywhere; }
.quality-reply-head small { color: #64748b; font-size: .74rem; }
.quality-reply-head .button { display: inline-flex; width: auto; flex: none; }
.quality-reply-channel { display: inline-flex; flex: none; }
.quality-reply-text {
  margin: 0; padding: .55rem .7rem; border-radius: 10px; background: #f8fafc; color: #1e293b; font-size: .84rem; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.quality-findings { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.quality-findings li { display: flex; align-items: flex-start; gap: .5rem; font-size: .82rem; }
.quality-findings li .journey-icon { width: .95rem; height: .95rem; margin-top: .15rem; flex: none; }
.quality-findings li span { display: grid; gap: .1rem; min-width: 0; }
.quality-findings li strong { color: #0f172a; font-weight: 650; }
.quality-findings li small { color: #64748b; font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; }
.quality-reason { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: #334155; font-size: .82rem; line-height: 1.5; }
.quality-reason .journey-icon { width: .95rem; height: .95rem; margin-top: .15rem; flex: none; color: var(--sec-strong); }

/* The reply tests */
.quality-test-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.quality-test-actions .button { display: inline-flex; align-items: center; gap: .4rem; width: auto; }
.quality-add { margin-bottom: .9rem; padding: .85rem; border: 1px solid var(--sec-line); border-radius: 12px; background: var(--sec-soft); }
.quality-add[hidden] { display: none; }
.quality-tests { display: grid; gap: .5rem; }
.quality-progress { display: flex; align-items: center; gap: .75rem; margin-bottom: .35rem; }
.quality-progress i { display: block; flex: 1; height: .55rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.quality-progress b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #34d399, #059669); }
.quality-progress span { flex: none; color: var(--text); font-size: .84rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.quality-test { min-width: 0; border: 1px solid var(--ob-line); border-radius: 12px; background: #fff; }
.quality-test[data-result="failed"] { border-color: #fecdd3; }
.quality-test summary { display: flex; align-items: center; gap: .65rem; min-height: 3rem; padding: .55rem .75rem; cursor: pointer; list-style: none; }
.quality-test summary::-webkit-details-marker { display: none; }
.quality-test summary::after {
  content: ""; width: .4rem; height: .4rem; flex: none; margin: 0 .2rem 0 .1rem; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8;
  transform: translateY(-.1rem) rotate(45deg); transition: transform .15s ease;
}
.quality-test details[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.quality-test summary:focus-visible { outline: 3px solid var(--sec-line); outline-offset: 2px; border-radius: 12px; }
.quality-test-mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 999px; background: #f1f5f9; color: #64748b; }
.quality-test-mark .journey-icon { width: 1rem; height: 1rem; }
.quality-test[data-result="passed"] .quality-test-mark { background: #ecfdf5; color: #047857; }
.quality-test[data-result="failed"] .quality-test-mark { background: #fff1f2; color: #be123c; }
.quality-test-title { display: grid; flex: 1; gap: .1rem; min-width: 0; }
.quality-test-title strong { color: var(--text); font-size: .88rem; overflow-wrap: anywhere; }
.quality-test-title small { display: block; color: #64748b; font-size: .74rem; line-height: 1.45; }
.quality-test-title small .journey-icon { display: inline-block; width: .8rem; height: .8rem; margin-right: .3rem; vertical-align: -.1em; color: var(--sec-strong); }
.quality-result {
  flex: none; padding: .15rem .6rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; color: #475569;
  font-size: .74rem; font-weight: 750; white-space: nowrap;
}
.quality-test[data-result="passed"] .quality-result { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.quality-test[data-result="failed"] .quality-result { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.quality-test-body { display: grid; gap: .55rem; padding: 0 .75rem .8rem 3.3rem; }
.quality-said { display: grid; gap: .2rem; padding: .55rem .7rem; border-radius: 10px; background: #f8fafc; }
.quality-said span { display: inline-flex; align-items: center; gap: .3rem; color: #475569; font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .03em; }
.quality-said span .journey-icon { width: .85rem; height: .85rem; }
.quality-said p { margin: 0; color: #1e293b; font-size: .85rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.quality-said.is-expected { background: var(--sec-soft); }
.quality-said.is-expected span { color: var(--sec-strong); }
.quality-said.is-aibo { background: #eff6ff; }
.quality-said.is-aibo span { color: #1d4ed8; }
.quality-test-foot { display: flex; justify-content: flex-end; }

@media (prefers-reduced-motion: reduce) { .quality-test summary::after { transition: none; } }
@media (max-width: 1024px) {
  .quality-test summary, .quality-test-foot .memory-action { min-height: 44px; }
  .quality-add textarea { min-height: 44px; font-size: 1rem; }
}
@media (max-width: 680px) {
  .quality-test-body { padding-left: .75rem; }
  .quality-test-foot .memory-action { padding: 0 .75rem; }
  .quality-test-foot .memory-action span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  .quality-test-actions .button { width: 100%; justify-content: center; }
}

/* Follow-ups, procedures and hot leads (0077) */
.hot-chip {
  display: inline-flex; align-items: center; gap: .2rem; flex: none; margin-right: .35rem; padding: .05rem .45rem .05rem .3rem;
  border: 1px solid #fed7aa; border-radius: 999px; background: #fff7ed; color: #c2410c; font-size: .68rem; font-weight: 800;
  line-height: 1.5; vertical-align: middle; white-space: nowrap;
}
.hot-chip .journey-icon { width: .78rem; height: .78rem; }
.task-main strong .hot-chip { margin: 0 0 0 .45rem; }

/* AIBO's follow-up in the conversation: planned, ready, stopped, or a one-line note */
.follow-up-card {
  --fu-soft: #f0fdfa; --fu-line: #99f6e4; --fu-ink: #0f766e;
  display: grid; gap: .5rem; padding: .75rem .85rem; border: 1px solid var(--fu-line); border-radius: .9rem;
  background: var(--fu-soft); color: #334155; font-size: .82rem;
}
.follow-up-card[hidden] { display: none; }
.follow-up-card[data-state="ready"] { --fu-soft: #ecfeff; --fu-line: #67e8f9; --fu-ink: #0e7490; box-shadow: 0 0 0 3px rgba(103, 232, 249, .25); }
.follow-up-card[data-state="stopped"] { --fu-soft: #fff1f2; --fu-line: #fecdd3; --fu-ink: #be123c; }
.follow-up-card:is([data-state="owes"], [data-state="remind"]) { --fu-soft: #fffbeb; --fu-line: #fde68a; --fu-ink: #b45309; }
.follow-up-card:is([data-state="none"], [data-state="sent"]) { --fu-soft: #f8fafc; --fu-line: #e2e8f0; --fu-ink: #475569; padding: .55rem .75rem; }
.follow-up-card[data-state="failed"] { --fu-soft: #fef2f2; --fu-line: #fecaca; --fu-ink: #b91c1c; padding: .55rem .75rem; }
.follow-up-head { display: flex; align-items: flex-start; gap: .6rem; }
.follow-up-icon {
  display: grid; place-items: center; width: 2.2rem; height: 2.2rem; flex: none; border-radius: .7rem;
  background: #fff; color: var(--fu-ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.follow-up-icon .journey-icon { width: 1.1rem; height: 1.1rem; }
.follow-up-head strong { display: block; color: #0f172a; font-size: .9rem; font-weight: 750; }
.follow-up-head small { display: block; margin-top: .1rem; color: #475569; font-size: .8rem; line-height: 1.45; }
.follow-up-body {
  margin: 0; padding: .55rem .7rem; border: 1px solid var(--fu-line); border-radius: .7rem; background: #fff; color: #0f172a;
  font-size: .86rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
}
.follow-up-window, .follow-up-note, .follow-up-line { display: flex; align-items: flex-start; gap: .4rem; margin: 0; line-height: 1.45; }
.follow-up-window { color: var(--fu-ink); font-weight: 650; }
.follow-up-window .journey-icon, .follow-up-note .journey-icon, .follow-up-line .journey-icon {
  width: .95rem; height: .95rem; margin-top: .12rem; flex: none; color: var(--fu-ink);
}
.follow-up-line strong { color: #0f172a; }
.follow-up-findings { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.follow-up-findings li { display: flex; align-items: flex-start; gap: .45rem; }
.follow-up-findings li .journey-icon { width: .95rem; height: .95rem; margin-top: .12rem; flex: none; color: #b45309; }
.follow-up-findings li.is-unsafe .journey-icon { color: #be123c; }
.follow-up-findings li span { display: grid; gap: .1rem; min-width: 0; }
.follow-up-findings li small { color: #64748b; overflow-wrap: anywhere; }
.follow-up-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.follow-up-actions .button { display: inline-flex; align-items: center; gap: .35rem; width: auto; }
.follow-up-actions .button .journey-icon { width: .95rem; height: .95rem; }

/* The procedure a draft follows */
.draft-evidence .draft-procedure { display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .45rem .6rem; border-radius: .6rem; background: #fff; }
.draft-evidence .draft-procedure[hidden] { display: none; }
.draft-evidence .draft-procedure .journey-icon { width: .95rem; height: .95rem; margin-top: .12rem; flex: none; color: #4f46e5; }
.draft-evidence .draft-procedure span { display: grid; gap: .1rem; min-width: 0; }
.draft-evidence .draft-procedure strong { color: #312e81; font-weight: 700; }
.draft-evidence .draft-procedure small { color: #475569; line-height: 1.45; overflow-wrap: anywhere; }

/* Knowledge: the procedures AIBO follows */
.procedure-body { display: grid; gap: .65rem; padding: 0 1rem 1rem; }
.procedure-card { display: grid; gap: .45rem; padding: .8rem .9rem; border: 1px solid var(--ob-line); border-left: 3px solid #6366f1; border-radius: 12px; background: #fff; min-width: 0; }
.procedure-card[data-status="paused"] { border-left-color: #cbd5e1; background: #f8fafc; }
.procedure-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.procedure-head strong { color: var(--text); font-size: .92rem; overflow-wrap: anywhere; }
.procedure-status { flex: none; padding: .1rem .55rem; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: .72rem; font-weight: 800; }
.procedure-card[data-status="paused"] .procedure-status { background: #f1f5f9; color: #64748b; }
.procedure-when { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; color: #334155; font-size: .84rem; line-height: 1.45; }
.procedure-when span { padding: 0 .45rem; border-radius: .4rem; background: #f1f5f9; color: #475569; font-size: .72rem; font-weight: 800; line-height: 1.6; text-transform: uppercase; letter-spacing: .03em; }
.procedure-steps { display: grid; gap: .25rem; margin: 0; padding-left: 1.3rem; color: #1e293b; font-size: .84rem; line-height: 1.5; }
.procedure-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.procedure-chips li {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem .15rem .4rem; border: 1px solid #c7d2fe; border-radius: 999px;
  background: #eef2ff; color: #3730a3; font-size: .75rem; font-weight: 700;
}
.procedure-chips .journey-icon { width: .82rem; height: .82rem; }
.procedure-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
.procedure-foot small { color: #64748b; font-size: .76rem; }
.procedure-add { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; }
.procedure-add .journey-icon { width: 1rem; height: 1rem; }
.procedure-templates { display: grid; gap: .5rem; }
.procedure-templates h4 { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; color: #3730a3; font-size: .82rem; }
.procedure-templates h4 .journey-icon { width: 1rem; height: 1rem; }
.procedure-template {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .7rem .85rem;
  border: 1px dashed #c7d2fe; border-radius: 12px; background: #f5f7ff;
}
.procedure-template > div { flex: 1 1 16rem; min-width: 0; }
.procedure-template strong { color: var(--text); font-size: .88rem; }
.procedure-template p { margin: .15rem 0; color: #334155; font-size: .82rem; line-height: 1.45; }
.procedure-template small { color: #4338ca; font-size: .75rem; line-height: 1.45; }
.procedure-template .button { display: inline-flex; align-items: center; gap: .35rem; width: auto; }
.procedure-template .button .journey-icon { width: .95rem; height: .95rem; }
.procedure-form { display: grid; gap: .6rem; padding: .85rem; border: 1px solid #c7d2fe; border-radius: 12px; background: #f5f7ff; }
.procedure-form label { display: grid; gap: .25rem; color: #334155; font-size: .78rem; font-weight: 650; }
.procedure-form :is(input:not([type="checkbox"]), textarea, select) {
  width: 100%; min-height: 2.5rem; padding: .5rem .65rem; border: 1px solid var(--ob-line-strong); border-radius: 10px;
  background: #fff; color: #0f172a; font: inherit; font-size: .88rem; font-weight: 500;
}
.procedure-form textarea { resize: vertical; line-height: 1.45; }
.procedure-form small { color: #64748b; font-size: .74rem; font-weight: 500; }
.procedure-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .55rem; margin: 0; padding: .7rem;
  border: 1px solid #e0e7ff; border-radius: 10px; background: #fff;
}
.procedure-actions legend { padding: 0 .3rem; color: #3730a3; font-size: .78rem; font-weight: 750; }
.procedure-actions .procedure-wide { grid-column: 1 / -1; }
.procedure-actions .procedure-check { display: flex; align-items: center; gap: .45rem; min-height: 2.5rem; font-weight: 600; }
.procedure-actions .procedure-check input { width: 1.05rem; height: 1.05rem; accent-color: #4f46e5; }
.procedure-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.procedure-form-actions .button { display: inline-flex; align-items: center; gap: .35rem; width: auto; }
.procedure-form-actions .button .journey-icon { width: .95rem; height: .95rem; }

/* AI settings: follow-ups */
.ai-follow-ups { display: grid; gap: .75rem; }
.ai-follow-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .5rem; }
.ai-follow-mode {
  display: grid; gap: .4rem; padding: .55rem .65rem; border: 1px solid var(--ob-line);
  border-radius: .9rem; background: #fff; color: var(--ob-ink); font-size: .84rem; font-weight: 700;
}
.ai-follow-mode .ai-channel { flex-wrap: wrap; white-space: nowrap; }
.ai-follow-mode .ai-channel small { color: var(--ob-muted); font-size: .72rem; font-weight: 600; }
.ai-follow-mode .ai-mode { width: 100%; min-width: 0; }
.ai-hours { display: flex; align-items: center; gap: .4rem; }
.ai-hours select { flex: 1; min-width: 0; }
.ai-hours em { color: var(--ob-muted); font-size: .8rem; font-style: normal; font-weight: 600; }

@media (max-width: 1024px) {
  .follow-up-actions .button, .procedure-form-actions .button, .procedure-template .button { min-height: 44px; }
  .procedure-form :is(input:not([type="checkbox"]), textarea, select) { min-height: 44px; font-size: 1rem; }
}
@media (max-width: 680px) {
  .follow-up-actions .button { flex: 1 1 auto; justify-content: center; }
  .procedure-body { padding: 0 .75rem .85rem; }
}

/* Sign-in security (0078): the code step of signing in, and the owner's account panel */
#authForm[data-step="code"] :is(.auth-copy, .auth-fields, .auth-token-fallback) { display: none; }
.auth-code-step { display: grid; gap: .6rem; }
.auth-code-step[hidden] { display: none; }
.auth-code-step p strong { display: block; margin-bottom: .2rem; color: var(--text); }
.auth-code-step input { font-size: 1.35rem; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.auth-code-step small { color: var(--muted); font-size: .8rem; }

.account-security { display: grid; gap: .9rem; margin-bottom: 1rem; }
.security-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .8rem; padding: .8rem .9rem; border: 1px solid #fde68a;
  border-radius: 12px; background: #fffbeb;
}
.security-status > .journey-icon { width: 1.4rem; height: 1.4rem; flex: none; color: #b45309; }
.security-status > div { flex: 1 1 14rem; min-width: 0; }
.security-status strong { display: block; color: var(--text); font-size: .92rem; }
.security-status small { color: #475569; font-size: .8rem; line-height: 1.45; }
.security-status.is-on { border-color: #a7f3d0; background: #ecfdf5; }
.security-status.is-on > .journey-icon { color: #047857; }
.security-status .button { display: inline-flex; align-items: center; gap: .35rem; width: auto; }
.security-status .button .journey-icon { width: 1rem; height: 1rem; }
.security-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; }
.security-actions .button { width: auto; }
.security-warning { display: flex; align-items: flex-start; gap: .4rem; margin: .5rem 0 0; color: #b45309; font-size: .82rem; }
.security-warning .journey-icon { width: .95rem; height: .95rem; margin-top: .1rem; flex: none; }

.security-setup {
  display: grid; grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr); gap: 1rem; padding: .9rem; border: 1px solid #c7d2fe;
  border-radius: 12px; background: #f5f7ff;
}
.security-qr { align-self: start; padding: .5rem; border-radius: 10px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }
.security-qr svg { display: block; width: 100%; height: auto; stroke: none; }
.security-setup-copy { display: grid; gap: .5rem; min-width: 0; }
.security-setup-copy > strong { color: #312e81; font-size: .9rem; }
.security-setup-copy p { margin: 0; color: #334155; font-size: .84rem; line-height: 1.5; }
.security-setup-copy a { color: #4338ca; font-weight: 700; }
.security-key code {
  display: inline-block; margin-top: .2rem; padding: .25rem .5rem; border-radius: 8px; background: #fff; color: #0f172a;
  font-size: .86rem; letter-spacing: .06em; word-break: break-all;
}
.security-code-form { display: grid; gap: .5rem; }
.security-code-form label { display: grid; gap: .3rem; color: #334155; font-size: .82rem; }
.security-code-form label strong { color: #312e81; font-size: .88rem; }
.security-code-form input {
  max-width: 14rem; min-height: 2.6rem; padding: .45rem .7rem; border: 1px solid var(--ob-line-strong); border-radius: 10px;
  background: #fff; color: #0f172a; font: inherit; font-size: 1.15rem; letter-spacing: .15em; font-variant-numeric: tabular-nums;
}
.security-code-form input:focus { outline: 3px solid #c7d2fe; border-color: #6366f1; }
.security-code-form .security-actions { justify-content: flex-start; }

.security-codes { display: grid; gap: .55rem; padding: .9rem; border: 1px solid #a7f3d0; border-radius: 12px; background: #f0fdf4; }
.security-codes > strong { display: inline-flex; align-items: center; gap: .4rem; color: #065f46; font-size: .92rem; }
.security-codes > strong .journey-icon { width: 1.05rem; height: 1.05rem; }
.security-codes p { margin: 0; color: #334155; font-size: .84rem; line-height: 1.5; }
.security-code-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .4rem; margin: 0; padding: 0; list-style: none; }
.security-code-list code {
  display: block; padding: .4rem .5rem; border: 1px dashed #6ee7b7; border-radius: 8px; background: #fff; color: #0f172a;
  font-size: .95rem; letter-spacing: .08em; text-align: center;
}
.security-codes .security-actions { justify-content: flex-start; }

.security-devices { display: grid; gap: .5rem; }
.security-devices h4, .security-recent summary {
  display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--text); font-size: .88rem; font-weight: 750;
}
.security-devices h4 .journey-icon { width: 1rem; height: 1rem; color: #047857; }
.security-devices ul, .security-recent ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.security-devices li, .security-recent li {
  display: flex; align-items: center; gap: .55rem; padding: .45rem .6rem; border: 1px solid var(--ob-line); border-radius: 10px; background: #fff;
}
.security-devices li > .journey-icon, .security-recent li > .journey-icon { width: 1rem; height: 1rem; flex: none; color: #047857; }
.security-devices li span, .security-recent li span { display: grid; flex: 1; gap: .05rem; min-width: 0; }
.security-devices li strong, .security-recent li strong { color: var(--text); font-size: .84rem; }
.security-devices li small, .security-recent li small { color: #64748b; font-size: .76rem; overflow-wrap: anywhere; }
.security-devices > .button { justify-self: start; width: auto; }
.security-recent summary { min-height: 2.25rem; cursor: pointer; list-style: none; }
.security-recent summary::-webkit-details-marker { display: none; }
.security-recent summary::after {
  content: ""; width: .4rem; height: .4rem; margin-left: .3rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.1rem) rotate(45deg); transition: transform .15s ease;
}
.security-recent[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.security-recent li.is-failed { border-color: #fecaca; background: #fef2f2; }
.security-recent li.is-failed > .journey-icon { color: #b91c1c; }
.security-empty { margin: .3rem 0 0; color: var(--muted); font-size: .82rem; }

@media (prefers-reduced-motion: reduce) { .security-recent summary::after { transition: none; } }
@media (max-width: 1024px) {
  .security-actions .button, .security-devices > .button, .security-status .button, .security-recent summary { min-height: 44px; }
  .security-code-form input { min-height: 44px; }
}
@media (max-width: 680px) {
  .security-setup { grid-template-columns: minmax(0, 1fr); }
  .security-qr { justify-self: center; width: min(14rem, 100%); }
  .security-code-form input { max-width: none; }
}

/* Learning from past conversations (0079). Its own colour is lime: AIBO growing from what the team already knows. */
body[data-page="learn"] { --sec: #65a30d; --sec-strong: #4d7c0f; --sec-deep: #365314; --sec-soft: #f7fee7; --sec-line: #d9f99d; --sec-2: #22c55e; }
.nav-item[data-view="learn"], .nav-group-current[data-view="learn"] { --tile: #84cc16; --tile-deep: #4d7c0f; --tile-glow: #bef264; }

/* The three steps */
.learn-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.learn-step {
  display: flex; align-items: center; gap: .7rem; min-width: 0; min-height: 3.6rem; padding: .7rem .85rem; border: 1px solid var(--ob-line);
  border-radius: var(--radius-md); background: #fff; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  box-shadow: var(--ob-shadow); transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.learn-step:hover { border-color: var(--sec-line); transform: translateY(-1px); }
.learn-step:active { transform: scale(.98); }
.learn-step:focus-visible { outline: 3px solid var(--sec-line); outline-offset: 2px; }
.learn-step[aria-selected="true"] { border-color: var(--sec); background: var(--sec-soft); }
.learn-step-num {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border: 1px solid var(--sec-line); border-radius: 999px;
  background: var(--sec-soft); color: var(--sec-strong); font-weight: 800;
}
.learn-step[aria-selected="true"] .learn-step-num { border-color: transparent; background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff; }
.learn-step-text { display: grid; gap: .1rem; min-width: 0; }
.learn-step-text strong { color: var(--text); font-size: .92rem; }
.learn-step-text small { overflow: hidden; color: var(--muted); font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.learn-panel[hidden], .learn-run[hidden] { display: none; }

/* The run under way */
.learn-run { display: grid; gap: .7rem; margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--sec-line); }
.learn-run-head { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.learn-run-icon {
  position: relative; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: .9rem;
  background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff;
}
.learn-run-icon .journey-icon { width: 1.3rem; height: 1.3rem; }
.learn-run[data-status="running"] .learn-run-icon::after {
  content: ""; position: absolute; inset: -4px; border: 2px solid var(--sec-line); border-radius: 1.1rem; animation: learn-ring 2s ease-out infinite;
}
@keyframes learn-ring { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.22); } }
.learn-run-title { display: grid; flex: 1; gap: .15rem; min-width: 0; }
.learn-run-title strong { color: var(--sec-deep); font-size: .98rem; }
.learn-run-title small { color: var(--muted); font-size: .8rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.learn-run-status {
  flex: none; padding: .2rem .65rem; border: 1px solid var(--sec-line); border-radius: 999px; background: var(--sec-soft); color: var(--sec-strong);
  font-size: .75rem; font-weight: 750;
}
.learn-run-status[data-status="paused"] { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.learn-run-status:is([data-status="stopped"], [data-status="failed"]) { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.learn-progress { height: .65rem; overflow: hidden; border-radius: 999px; background: #ecfccb; }
.learn-progress b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sec-2), var(--sec-strong)); transition: width .4s ease; }
.learn-run-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.learn-run-actions .button, .learn-start .button, .learn-bulk .button, .learn-question-actions .button, .learn-result-foot .button {
  display: inline-flex; align-items: center; gap: .4rem; width: auto;
}
.learn-run-actions .button .journey-icon, .learn-start .button .journey-icon, .learn-bulk .button .journey-icon,
.learn-question-actions .button .journey-icon, .learn-result-foot .button .journey-icon { width: 1rem; height: 1rem; }

/* Notes that sit in a line with their icon */
.learn-run-note, .learn-warning, .learn-privacy, .learn-blocked, .learn-room, .learn-check, .learn-decision, .learn-stopped, .learn-answer.is-waiting {
  display: flex; align-items: flex-start; gap: .45rem; margin: 0; font-size: .82rem; line-height: 1.5;
}
:is(.learn-run-note, .learn-warning, .learn-privacy, .learn-blocked, .learn-room, .learn-check, .learn-decision, .learn-stopped, .learn-answer.is-waiting) .journey-icon {
  width: 1rem; height: 1rem; flex: none; margin-top: .15rem;
}
.learn-run-note { color: #334155; }
.learn-run-note .journey-icon, .learn-privacy .journey-icon, .learn-room .journey-icon, .learn-blocked .journey-icon { color: var(--sec-strong); }
.learn-run[data-status="paused"] .learn-run-note .journey-icon { color: #b45309; }
.learn-warning, .learn-check { padding: .55rem .7rem; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; color: #78350f; }
.learn-warning .journey-icon, .learn-check .journey-icon { color: #b45309; }
.learn-privacy, .learn-blocked, .learn-room { color: #475569; }

/* Step 1: what AIBO does, and how many conversations from each platform */
.learn-kinds, .learn-platforms { min-width: 0; margin: 0 0 1rem; padding: 0; border: 0; }
.learn-kinds legend, .learn-platforms legend { margin-bottom: .55rem; padding: 0; color: var(--text); font-size: .88rem; font-weight: 750; }
.learn-kind-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.learn-kind {
  position: relative; display: flex; align-items: flex-start; gap: .7rem; min-width: 0; padding: .85rem .9rem; border: 1px solid var(--ob-line);
  border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.learn-kind input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.learn-kind:hover { border-color: var(--sec-line); }
.learn-kind:has(input:checked) { border-color: var(--sec); background: var(--sec-soft); }
.learn-kind:has(input:focus-visible) { outline: 3px solid var(--sec-line); outline-offset: 2px; }
.learn-kinds:disabled .learn-kind { cursor: not-allowed; opacity: .6; }
.learn-kind-icon, .learn-estimate-icon {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; flex: none; border-radius: .8rem; background: var(--sec-soft); color: var(--sec-strong);
}
.learn-kind-icon .journey-icon, .learn-estimate-icon .journey-icon { width: 1.25rem; height: 1.25rem; }
.learn-kind:has(input:checked) .learn-kind-icon, .learn-estimate-icon { background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff; }
.learn-kind-copy { display: grid; gap: .2rem; min-width: 0; }
.learn-kind-copy strong { color: var(--text); font-size: .92rem; }
.learn-kind-copy small { color: var(--muted); font-size: .8rem; line-height: 1.45; }
.learn-platform-list { display: grid; gap: .5rem; }
.learn-empty-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin: .6rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.learn-empty-platforms .learn-channel { opacity: .75; }
.learn-platform {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; min-width: 0; padding: .7rem .8rem;
  border: 1px solid var(--ob-line); border-radius: 14px; background: #fff;
}
.learn-platform.is-empty { background: #f8fafc; }
.learn-platform.is-empty .learn-platform-copy strong { color: #64748b; }
.learn-platform-copy { display: grid; gap: .1rem; min-width: 0; }
.learn-platform-copy strong { color: var(--text); font-size: .9rem; }
.learn-platform-copy small { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.learn-platform-choice { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.learn-mode { display: inline-flex; padding: .2rem; border: 1px solid var(--ob-line); border-radius: .75rem; background: #f8fafc; }
.learn-mode label { position: relative; display: flex; }
.learn-mode input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.learn-mode span {
  display: grid; place-items: center; min-width: 4.2rem; min-height: 2.5rem; padding: .3rem .7rem; border-radius: .55rem; color: #475569;
  font-size: .8rem; font-weight: 700; transition: background .15s ease, color .15s ease;
}
.learn-mode input:checked + span { background: #fff; color: var(--sec-deep); box-shadow: 0 1px 4px rgba(15, 23, 42, .14); }
.learn-mode input:focus-visible + span { outline: 3px solid var(--sec-line); outline-offset: 1px; }
.learn-mode input:disabled { cursor: not-allowed; }
.learn-mode input:disabled + span { opacity: .55; }
.learn-count { display: inline-flex; align-items: center; gap: .4rem; }
.learn-count[hidden], .learn-all[hidden] { display: none; }
.learn-count input {
  width: 6.5rem; min-height: 2.6rem; padding: .35rem .6rem; border: 1px solid var(--ob-line-strong); border-radius: .65rem; background: #fff;
  color: var(--text); font: inherit; font-variant-numeric: tabular-nums;
}
.learn-count input:focus-visible { border-color: var(--sec); outline: 3px solid var(--sec-line); }
.learn-count small { color: var(--muted); font-size: .78rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.learn-all {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 2.6rem; padding: 0 .75rem; border-radius: .65rem; background: var(--sec-soft);
  color: var(--sec-strong); font-size: .8rem; font-weight: 750; font-variant-numeric: tabular-nums;
}
.learn-all .journey-icon { width: .9rem; height: .9rem; }
.learn-summary { display: grid; gap: .75rem; padding: .95rem 1rem; border: 1px solid var(--sec-line); border-radius: 14px; background: linear-gradient(180deg, var(--sec-soft), #fff); }
.learn-estimate { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.learn-estimate strong { display: block; color: var(--sec-deep); font-size: 1rem; font-variant-numeric: tabular-nums; }
.learn-estimate small { color: #475569; font-size: .82rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
.learn-budget { display: grid; gap: .4rem; }
.learn-budget-bar { display: flex; height: .6rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.learn-budget-bar b { display: block; height: 100%; }
.learn-budget-bar .is-used { background: #94a3b8; }
.learn-budget-bar .is-room { background: linear-gradient(90deg, var(--sec-2), var(--sec-strong)); }
.learn-budget-bar .is-reserve { background: repeating-linear-gradient(135deg, #fde68a 0 6px, #fbbf24 6px 12px); }
.learn-budget p { margin: 0; color: #475569; font-size: .8rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.learn-budget strong { color: var(--sec-deep); }
.learn-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem .9rem; }
.learn-start .button { min-height: 2.75rem; }
.learn-blocked { flex: 1 1 16rem; }

/* Step 2: the questions customers ask, with the team's usual answer */
.learn-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; }
.learn-filters { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.learn-filter {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .3rem .8rem; border: 1px solid var(--ob-line); border-radius: 999px;
  background: #fff; color: #334155; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.learn-filter span {
  min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: .72rem; text-align: center;
  font-variant-numeric: tabular-nums;
}
.learn-filter[aria-pressed="true"] { border-color: var(--sec); background: var(--sec-soft); color: var(--sec-deep); }
.learn-filter[aria-pressed="true"] span { background: #fff; color: var(--sec-strong); }
.learn-filter:focus-visible { outline: 3px solid var(--sec-line); outline-offset: 2px; }
.learn-topic-filter { display: inline-flex; align-items: center; gap: .45rem; color: #475569; font-size: .8rem; font-weight: 700; }
.learn-topic-filter select {
  min-height: 2.5rem; padding: .3rem .6rem; border: 1px solid var(--ob-line-strong); border-radius: .65rem; background: #fff; color: var(--text);
  font: inherit; font-size: .84rem;
}
.learn-room { margin-bottom: .8rem; }
.learn-bulk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .8rem; padding: .5rem .75rem;
  border: 1px solid var(--sec-line); border-radius: 12px; background: var(--sec-soft);
}
.learn-bulk label { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.5rem; color: var(--sec-deep); font-size: .84rem; font-weight: 700; cursor: pointer; }
.learn-bulk input, .learn-select { width: 1.2rem; height: 1.2rem; flex: none; margin: 0; accent-color: var(--sec-strong); cursor: pointer; }
.learn-select:disabled { cursor: not-allowed; opacity: .45; }
.learn-questions, .learn-results { display: grid; gap: .65rem; }
.learn-question, .learn-result { display: grid; gap: .6rem; min-width: 0; padding: .85rem .95rem; border: 1px solid var(--ob-line); border-radius: 14px; background: #fff; }
.learn-question[data-check="true"] { border-color: #fde68a; }
.learn-question.is-editing { border-color: var(--sec); }
.learn-question-head { display: flex; align-items: flex-start; gap: .65rem; min-width: 0; }
.learn-select { margin-top: .2rem; }
.learn-question-title { display: grid; flex: 1; gap: .2rem; min-width: 0; }
.learn-question-title strong { color: var(--text); font-size: .95rem; line-height: 1.4; overflow-wrap: anywhere; }
.learn-question-title small { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.learn-channels { display: inline-flex; gap: .25rem; }
:is(.learn-channel, .learn-example-channel, .learn-result-who) .platform-icon { width: 1.4rem; height: 1.4rem; border-radius: .45rem; }
:is(.learn-channel, .learn-example-channel, .learn-result-who) .platform-icon svg { width: .8rem; height: .8rem; }
.learn-topic-chip {
  flex: none; padding: .15rem .6rem; border: 1px solid var(--sec-line); border-radius: 999px; background: var(--sec-soft); color: var(--sec-strong);
  font-size: .72rem; font-weight: 750; white-space: nowrap;
}
.learn-answer { margin: 0; padding: .6rem .75rem; border-radius: 10px; background: #f8fafc; color: #1e293b; font-size: .88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.learn-answer.is-waiting { color: #475569; }
.learn-answer.is-waiting .journey-icon { color: var(--sec-strong); }
.learn-examples summary {
  display: inline-flex; align-items: center; min-height: 2.5rem; color: var(--sec-strong); font-size: .82rem; font-weight: 750; cursor: pointer;
}
.learn-examples summary:focus-visible { outline: 3px solid var(--sec-line); outline-offset: 2px; border-radius: 6px; }
.learn-examples ul { display: grid; gap: .45rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.learn-examples li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .6rem; padding: .55rem .65rem; border-radius: 10px; background: var(--sec-soft); }
.learn-examples li p { margin: .1rem 0 0; color: #1e293b; font-size: .84rem; line-height: 1.5; overflow-wrap: anywhere; }
.learn-examples li small { color: #64748b; font-size: .74rem; }
.learn-examples li .button { width: auto; }
.learn-question-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.learn-question-actions .memory-action { margin-left: auto; }
.learn-known {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border: 1px solid #a7f3d0; border-radius: 999px; background: #ecfdf5;
  color: #047857; font-size: .76rem; font-weight: 750;
}
.learn-known .journey-icon { width: .9rem; height: .9rem; }
.learn-known.is-removed { border-color: #e2e8f0; background: #f8fafc; color: #475569; }

/* Step 3: how AIBO would have answered, by topic and reply by reply */
.learn-metrics { margin: .2rem 0 1rem; }
.learn-topics { display: grid; gap: .85rem; margin-bottom: 1.1rem; padding: .9rem 1rem; border: 1px solid var(--ob-line); border-radius: 14px; background: #fff; }
.learn-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; color: #475569; font-size: .76rem; font-weight: 650; }
.learn-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.learn-legend span::before { content: ""; width: .7rem; height: .7rem; border-radius: 3px; background: var(--swatch); }
:is(.learn-legend, .learn-stack) .is-match { --swatch: #16a34a; }
:is(.learn-legend, .learn-stack) .is-partial { --swatch: #f59e0b; }
:is(.learn-legend, .learn-stack) .is-differs { --swatch: #e11d48; }
:is(.learn-legend, .learn-stack) .is-personal { --swatch: #94a3b8; }
.learn-topic-row { display: grid; gap: .35rem; }
.learn-topic-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem; }
.learn-topic-head strong { color: var(--text); font-size: .88rem; }
.learn-ready {
  display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc;
  color: #475569; font-size: .74rem; font-weight: 750;
}
.learn-ready .journey-icon { width: .85rem; height: .85rem; }
.learn-ready[data-ready="ready"] { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.learn-ready[data-ready="close"] { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.learn-ready[data-ready="not_yet"] { border-color: #fecdd3; background: #fff1f2; color: #be123c; }
.learn-ready[data-ready="person"] { border-color: #c7d2fe; background: #eef2ff; color: #4338ca; }
.learn-stack { display: flex; height: .7rem; overflow: hidden; border-radius: 999px; background: #f1f5f9; }
.learn-stack b { display: block; height: 100%; background: var(--swatch); }
.learn-topic-row small { color: #475569; font-size: .78rem; font-variant-numeric: tabular-nums; }
.learn-result[data-outcome="differs"] { border-color: #fecdd3; }
.learn-result[data-outcome="partial"] { border-color: #fde68a; }
.learn-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; min-width: 0; }
.learn-result-head .button { width: auto; margin-left: auto; }
.learn-outcome { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 800; }
.learn-outcome .journey-icon { width: .9rem; height: .9rem; }
.learn-result[data-outcome="match"] .learn-outcome { background: #ecfdf5; color: #047857; }
.learn-result[data-outcome="partial"] .learn-outcome { background: #fffbeb; color: #b45309; }
.learn-result[data-outcome="differs"] .learn-outcome { background: #fff1f2; color: #be123c; }
.learn-result[data-outcome="personal"] .learn-outcome { background: #f1f5f9; color: #475569; }
.learn-result-who { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; color: #64748b; font-size: .78rem; }
.learn-said { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.quality-said.is-team { background: var(--sec-soft); }
.quality-said.is-team span { color: var(--sec-strong); }
.learn-decision { color: #334155; }
.learn-decision .journey-icon { color: #64748b; }
.learn-decision[data-decision="send"] .journey-icon { color: #047857; }
.learn-decision[data-decision="handover"] .journey-icon { color: #4338ca; }
.learn-stopped { color: #be123c; font-weight: 650; }
.learn-check-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: #475569; font-size: .82rem; line-height: 1.5; }
.learn-check-note .journey-icon { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; color: #b45309; }
.learn-stopped .journey-icon { color: #be123c; }
.learn-result-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.learn-teach { width: 100%; padding: .8rem; border: 1px solid var(--sec-line); border-radius: 12px; background: var(--sec-soft); }

@media (prefers-reduced-motion: reduce) {
  .learn-step, .learn-kind, .learn-mode span, .learn-progress b { transition: none; }
  .learn-run[data-status="running"] .learn-run-icon::after { animation: none; opacity: 0; }
}
@media (max-width: 1024px) {
  .learn-said { grid-template-columns: minmax(0, 1fr); }
  .learn-select, .learn-bulk input { width: 1.45rem; height: 1.45rem; }
  .learn-count input, .learn-topic-filter select, .learn-question input, .learn-question textarea, .learn-teach input, .learn-teach textarea { font-size: 1rem; }
  .learn-question-actions .button, .learn-result-foot .button, .learn-run-actions .button, .learn-question-actions .memory-action, .learn-filter { min-height: 44px; }
}
@media (max-width: 760px) {
  .learn-kind-grid { grid-template-columns: minmax(0, 1fr); }
  .learn-platform { grid-template-columns: auto minmax(0, 1fr); }
  .learn-platform-choice { grid-column: 1 / -1; justify-content: flex-start; }
  .learn-mode { flex: 1 1 15rem; }
  .learn-mode label { flex: 1; }
  .learn-mode span { width: 100%; min-width: 0; }
}
@media (max-width: 680px) {
  .learn-steps { gap: .4rem; }
  .learn-step { flex-direction: column; align-items: center; gap: .35rem; padding: .6rem .35rem; text-align: center; }
  .learn-step-text strong { font-size: .84rem; }
  .learn-step-text small { white-space: normal; }
  .learn-run-head { flex-wrap: wrap; }
  .learn-start .button, .learn-run-actions .button { width: 100%; justify-content: center; }
  .learn-bulk .button { width: 100%; justify-content: center; }
  .learn-question-actions .button { flex: 1 1 auto; justify-content: center; }
  .learn-question-actions .memory-action { margin-left: 0; }
  .learn-result-head .button { margin-left: 0; }
  .learn-examples li { grid-template-columns: auto minmax(0, 1fr); }
  .learn-examples li .button { grid-column: 1 / -1; width: 100%; justify-content: center; }
  /* The topic moves under the question, so the question keeps the width. */
  .learn-question-head { flex-wrap: wrap; }
  .learn-question-title { flex-basis: calc(100% - 2.2rem); }
  .learn-question-head .learn-topic-chip { order: 3; }
  .learn-select ~ .learn-topic-chip { margin-left: 2.1rem; }
  /* Dismiss and Hide keep their words on a phone. */
  :is(.learn-question-actions, .learn-run-actions) .memory-action { padding: 0 .75rem; }
  :is(.learn-question-actions, .learn-run-actions) .memory-action span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

/* The monthly AI limit (0080), at the top of AI auto-replies */
.ai-limit { display: grid; gap: .7rem; margin-bottom: 1.1rem; padding: 1rem 1.05rem; border: 1px solid var(--sec-line); border-radius: 14px; background: linear-gradient(180deg, var(--sec-soft), #fff); }
.ai-limit[data-level="warning"] { border-color: #fde68a; background: linear-gradient(180deg, #fffbeb, #fff); }
.ai-limit[data-level="reached"] { border-color: #fecdd3; background: linear-gradient(180deg, #fff1f2, #fff); }
.ai-limit-head { display: flex; align-items: flex-start; gap: .75rem; }
.ai-limit-head h4 { margin: 0; color: var(--text); font-size: 1rem; }
.ai-limit-head p { margin: .2rem 0 0; color: var(--muted); font-size: .82rem; line-height: 1.5; }
.ai-limit-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none; border-radius: .8rem; background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff; }
.ai-limit[data-level="warning"] .ai-limit-icon { background: linear-gradient(135deg, #fbbf24, #b45309); }
.ai-limit[data-level="reached"] .ai-limit-icon { background: linear-gradient(135deg, #fb7185, #be123c); }
.ai-limit-icon .journey-icon { width: 1.25rem; height: 1.25rem; }
.ai-limit-meter { position: relative; }
.ai-limit-meter i { display: block; height: .65rem; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.ai-limit-meter b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sec-2), var(--sec-strong)); transition: width .4s ease; }
.ai-limit[data-level="warning"] .ai-limit-meter b { background: linear-gradient(90deg, #fbbf24, #d97706); }
.ai-limit[data-level="reached"] .ai-limit-meter b { background: linear-gradient(90deg, #fb7185, #e11d48); }
.ai-limit-meter u { position: absolute; top: -.2rem; width: 2px; height: 1.05rem; margin-left: -1px; border-radius: 2px; background: #b45309; text-decoration: none; }
.ai-limit-status, .ai-limit-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0; font-size: .84rem; line-height: 1.5; }
.ai-limit-status { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.ai-limit-note { color: #475569; font-size: .8rem; }
:is(.ai-limit-status, .ai-limit-note) .journey-icon { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; color: var(--sec-strong); }
.ai-limit[data-level="warning"] .ai-limit-status .journey-icon { color: #b45309; }
.ai-limit[data-level="reached"] .ai-limit-status { color: #9f1239; }
.ai-limit[data-level="reached"] .ai-limit-status .journey-icon { color: #be123c; }
.ai-limit-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; }
.ai-limit-form label { display: grid; gap: .25rem; min-width: 9rem; }
.ai-limit-form label > span:first-child { color: #334155; font-size: .8rem; font-weight: 700; }
.ai-limit-form small { color: var(--muted); font-size: .74rem; }
.ai-money { display: inline-flex; align-items: center; border: 1px solid var(--ob-line-strong); border-radius: .65rem; background: #fff; }
.ai-money:focus-within { border-color: var(--sec); outline: 3px solid var(--sec-line); }
.ai-money em { padding: 0 .1rem 0 .65rem; color: #475569; font-style: normal; font-weight: 700; }
.ai-money input { width: 7rem; min-height: 2.6rem; padding: .35rem .6rem .35rem .2rem; border: 0; border-radius: .65rem; background: transparent; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; outline: none; }
.ai-limit-form .button { display: inline-flex; align-items: center; gap: .4rem; width: auto; min-height: 2.6rem; }
.ai-limit-form .button .journey-icon { width: 1rem; height: 1rem; }
@media (prefers-reduced-motion: reduce) { .ai-limit-meter b { transition: none; } }
@media (max-width: 1024px) { .ai-money input { font-size: 1rem; min-height: 44px; } .ai-limit-form .button { min-height: 44px; } }
@media (max-width: 680px) {
  .ai-limit-form label { flex: 1 1 8rem; }
  .ai-money, .ai-money input { width: 100%; }
  .ai-limit-form .button { width: 100%; justify-content: center; }
}

/* The inbox's account filter: coloured while it shows one account, and what to do when that account has nothing here */
#viewInbox .source-control.is-filtered select {
  border-color: var(--sec); background-color: var(--sec-soft); color: var(--sec-deep); font-weight: 700;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sec) 14%, transparent);
}
.inbox-account-empty h4 { overflow-wrap: anywhere; }
.inbox-account-empty .empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .9rem; }

/* Meta's reply window above the message box (0081): open to anyone, only you (Human Agent), or closed */
.reply-window {
  display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .55rem; padding: .55rem .75rem;
  border: 1px solid #bfdbfe; border-radius: .85rem; background: #eff6ff; color: #1e3a8a; font-size: .84rem; line-height: 1.4;
}
.reply-window[hidden] { display: none; }
.reply-window > .journey-icon { flex: none; width: 1.05rem; height: 1.05rem; margin-top: .12rem; }
.reply-window > span { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.reply-window strong { font-variant-numeric: tabular-nums; }
.reply-window small { color: inherit; font-size: .78rem; opacity: .88; }
.reply-window[data-window="person"] { border-color: #fcd34d; background: #fffbeb; color: #78350f; }
.reply-window[data-window="closed"] { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
/* Nothing can be sent while the window is closed: the composer looks it */
.reply-form[data-window-closed="true"] :is(textarea, .attach-button, .form-actions .button) { opacity: .5; }
.reply-form[data-window-closed="true"] .attach-button { pointer-events: none; }
/* In the list: how long is left to answer a waiting customer */
.window-chip {
  display: inline-flex; align-items: center; gap: .2rem; flex: none; margin-right: .35rem; padding: .05rem .45rem .05rem .3rem;
  border: 1px solid #fcd34d; border-radius: 999px; background: #fffbeb; color: #92400e; font-size: .68rem; font-weight: 800;
  font-variant-numeric: tabular-nums; line-height: 1.5; vertical-align: middle; white-space: nowrap;
}
.window-chip[hidden] { display: none; }
.window-chip[data-window="open"] { border-color: #bfdbfe; background: #eff6ff; color: #1d4ed8; }
.window-chip .journey-icon { width: .78rem; height: .78rem; }
/* A reply sent as a person's late reply */
.message-human-agent { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .4rem; border-radius: 999px; background: rgba(255, 255, 255, .2); font-weight: 800; }
.message-human-agent .journey-icon { width: .72rem; height: .72rem; }

/* Inbox search: runs on Search or Enter, and shows that it is working */
#viewInbox .search-control { display: flex; align-items: center; gap: .4rem; }
#viewInbox .search-control input { flex: 1; min-width: 0; }
.search-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; flex: none; min-height: 2.75rem; padding: 0 .95rem;
  border: 0; border-radius: .8rem; background: var(--sec-strong, #1d4ed8); color: #fff; font: 700 .84rem/1 var(--font-ui); cursor: pointer;
}
.search-submit:hover { background: var(--sec-deep, #1e40af); }
.search-submit:focus-visible { outline: 3px solid color-mix(in srgb, var(--sec, #2563eb) 40%, transparent); outline-offset: 2px; }
.search-spinner { display: none; width: .9rem; height: .9rem; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: thread-loading-spin .8s linear infinite; }
.search-submit.is-busy .search-spinner { display: inline-block; }
.source-control.is-loading select { opacity: .65; }
@media (prefers-reduced-motion: reduce) { .search-spinner { animation-duration: 2s; } }
#conversationList.is-refreshing { position: relative; }
#conversationList.is-refreshing > .conversation-row { opacity: .45; transition: opacity .15s ease-out; }
#conversationList.is-refreshing::before {
  content: ""; position: sticky; top: 0; z-index: 2; display: block; height: 3px; margin-bottom: -3px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--sec, #2563eb), transparent) 0 0 / 40% 100% no-repeat; animation: inbox-loading-bar 1s ease-in-out infinite;
}
@keyframes inbox-loading-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { #conversationList.is-refreshing::before { animation: none; background-size: 100% 100%; } }

/* =====================================================================
   Data > Extract (0083): people from a Facebook post or group, collected
   by AIBO's Chrome extension at the pace AIBO sets. Its own colour is
   teal, with a sky gradient.
   ===================================================================== */
body[data-page="extract"] { --sec: #0d9488; --sec-strong: #0f766e; --sec-deep: #134e4a; --sec-soft: #f0fdfa; --sec-line: #99f6e4; --sec-2: #0ea5e9; }
.nav-item[data-view="extract"], .nav-group-current[data-view="extract"] { --tile: #14b8a6; --tile-deep: #0f766e; --tile-glow: #5eead4; }
/* Instagram Extract (0089): an Instagram purple, warming toward pink, so it reads apart from Extract's teal. */
body[data-page="ig"] { --sec: #9333ea; --sec-strong: #7e22ce; --sec-deep: #581c87; --sec-soft: #faf5ff; --sec-line: #e9d5ff; --sec-2: #ec4899; }
.nav-item[data-view="ig"], .nav-group-current[data-view="ig"] { --tile: #a855f7; --tile-deep: #7e22ce; --tile-glow: #d8b4fe; }
/* Verified tick and private/account chips in the Instagram people table. */
.ig-person-name { display: inline-flex; align-items: center; gap: 4px; }
.ig-verified { display: inline-flex; color: #3b82f6; }
.ig-verified svg { width: 15px; height: 15px; }
.ig-chip { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: .68rem; font-weight: 600; background: var(--sec-soft); color: var(--sec-strong); border: 1px solid var(--sec-line); }
.ig-profile-line { display: flex; align-items: center; gap: 7px; margin: 2px 0 0; color: #475569; font-size: .86rem; }
.ig-profile-line svg { width: 16px; height: 16px; flex: none; color: var(--sec-strong); }
.ig-profile-line .ig-chip { margin-left: 2px; }
/* The Data section hides when Extract, Instagram and Match are all off (JS: renderDataNavGroup). */
.nav-group[hidden] { display: none !important; }

.extract-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.extract-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.extract-results, .extract-jobs-card { margin-bottom: 1rem; }
.extract-results[hidden] { display: none; }
:is(#extractMetrics, #extractChrome, #extractJobs):empty {
  min-height: 6.5rem; border-radius: 18px;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%) 0 0 / 200% 100%;
  animation: ds-shimmer 1.3s ease-in-out infinite;
}

/* The new extraction */
.extract-form { display: grid; gap: 1.1rem; }
.extract-field { display: grid; gap: .45rem; }
.extract-field > label { color: var(--text); font-size: .88rem; font-weight: 750; }
.extract-link-row {
  display: flex; align-items: center; gap: .5rem; padding: .3rem .3rem .3rem .8rem;
  border: 1.5px solid var(--ob-line-strong); border-radius: 1rem; background: #fff;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.extract-link-row:hover { border-color: #94a3b8; }
.extract-link-row:focus-within { border-color: var(--sec); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec) 14%, transparent); }
.extract-link-icon { display: grid; place-items: center; flex: none; color: var(--sec-strong); }
.extract-link-icon .journey-icon { width: 1.15rem; height: 1.15rem; }
.extract-link-row input { flex: 1; min-width: 0; min-height: 2.6rem; padding: .4rem .2rem; border: 0 !important; background: transparent; box-shadow: none !important; font-size: .95rem; }
.extract-link-row input:focus { outline: none; }
.extract-paste { flex: none; }
.extract-link-hint { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.extract-link-hint .journey-icon { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }
.extract-link-hint[data-state="ok"] { color: var(--sec-deep); font-weight: 650; }
.extract-link-hint[data-state="ok"] .journey-icon { color: var(--sec-strong); }
.extract-link-hint[data-state="error"] { color: #b42318; font-weight: 650; }
.extract-wants, .extract-paces { min-width: 0; margin: 0; padding: 0; border: 0; }
.extract-wants legend, .extract-paces legend { margin-bottom: .5rem; padding: 0; color: var(--text); font-size: .88rem; font-weight: 750; }
/* Three cards side by side, each icon above its words, so none is left alone on a row; one a row on phones. */
.extract-choice-grid, .extract-pace-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.extract-pace-hint { margin: -.15rem 0 .6rem; color: var(--muted); font-size: .8rem; line-height: 1.45; }
.extract-choice, .extract-pace {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; min-width: 0; padding: .8rem .85rem;
  border: 1px solid var(--ob-line); border-radius: 14px; background: #fff; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, opacity .15s ease;
}
.extract-choice input, .extract-pace input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.extract-choice:hover, .extract-pace:hover { border-color: var(--sec-line); }
.extract-choice:has(input:checked), .extract-pace:has(input:checked) { border-color: var(--sec); background: var(--sec-soft); }
.extract-choice:has(input:focus-visible), .extract-pace:has(input:focus-visible) { outline: 3px solid var(--sec-line); outline-offset: 2px; }
.extract-choice.is-off { background: #f8fafc; cursor: not-allowed; opacity: .55; }
.extract-choice-icon, .extract-pace-icon {
  display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: .75rem; background: var(--sec-soft); color: var(--sec-strong);
}
.extract-choice:has(input:checked) .extract-choice-icon, .extract-pace:has(input:checked) .extract-pace-icon {
  background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff;
}
.extract-choice-icon .journey-icon, .extract-pace-icon .journey-icon { width: 1.15rem; height: 1.15rem; }
.extract-choice-copy, .extract-pace-copy { display: grid; gap: .15rem; min-width: 0; }
.extract-choice-copy strong, .extract-pace-copy strong { color: var(--text); font-size: .9rem; }
.extract-choice-copy strong { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .45rem; }
.extract-choice-copy small, .extract-pace-copy small { color: var(--muted); font-size: .77rem; line-height: 1.4; }
.extract-choice em {
  padding: .05rem .45rem; border-radius: 999px; background: #f1f5f9; color: #475569;
  font-size: .64rem; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.extract-choice:has(input:checked) em { background: #fff; color: var(--sec-strong); }
.extract-pace-copy .extract-pace-stats { margin-top: .15rem; color: var(--sec-deep); font-weight: 650; font-variant-numeric: tabular-nums; }
.extract-pace-stats:empty { display: none; }
.extract-link-row .extract-paste { width: auto; }
.extract-form-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; }
.extract-max { display: grid; grid-template-columns: auto auto; align-items: center; gap: .25rem .5rem; }
.extract-max > span { grid-column: 1 / -1; color: var(--text); font-size: .82rem; font-weight: 750; }
.extract-max input { width: 9rem; min-height: 2.65rem; padding: .35rem .7rem; font-variant-numeric: tabular-nums; }
.extract-max small { color: var(--muted); font-size: .8rem; }
.extract-form-foot .button.primary { min-width: 12rem; }
.extract-start-icon { display: inline-grid; }
.extract-start-icon .journey-icon { width: 1.1rem; height: 1.1rem; }
.extract-form-error { margin: 0; padding: .6rem .75rem; border: 1px solid #fecaca; border-radius: 10px; background: #fff1f2; color: #9f1239; font-size: .84rem; font-weight: 650; }
.extract-form-error[hidden] { display: none; }

/* The bot follows the account panel used by Match, with setup separated from connection status. */
.extract-chrome { min-width: 0; }
.extract-connection-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.extract-connection-copy { flex: 1 1 20rem; min-width: 0; }
.extract-connection-copy .eyebrow { margin: 0 0 .15rem; }
.extract-connection-copy h3 { margin: 0; font-size: 1rem; }
.extract-connection-copy > p:last-child { margin: .2rem 0 0; color: var(--ob-muted); font-size: .82rem; line-height: 1.5; }
.extract-connection-state { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; }
.extract-connection-state svg { width: 1em; height: 1em; }
.extract-connection-state[data-state="on"] { color: color-mix(in srgb, var(--success) 75%, var(--text)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); border-color: color-mix(in srgb, var(--success) 25%, var(--surface)); }
.extract-connection-state[data-state="off"] { color: var(--ob-muted); background: var(--surface-3); border-color: var(--ob-line); }
.extract-browsers { container: extract-connections / inline-size; display: grid; gap: .75rem; margin: 1rem 0; }
.extract-browser { display: grid; gap: .9rem; min-width: 0; padding: 1rem; border: 1px solid var(--ob-line); border-radius: 14px; background: var(--surface); }
.extract-browser-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.extract-browser-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; flex: 1 1 16rem; min-width: 0; }
.extract-browser-title strong { color: var(--text); font-size: .9rem; overflow-wrap: anywhere; }
.extract-browser-details { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding-top: .85rem; border-top: 1px solid var(--ob-line); }
.extract-browser-details > div { min-width: 0; }
.extract-browser-details dt { margin-bottom: .3rem; color: var(--ob-muted); font-size: .75rem; font-weight: 650; }
.extract-browser-details dd { margin: 0; color: var(--text); font-size: .85rem; line-height: 1.5; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.extract-browser-details small { display: block; margin-top: .2rem; color: var(--ob-muted); font-size: .75rem; }
.extract-browser-details .extract-version-warning { color: color-mix(in srgb, var(--warning) 45%, var(--text)); font-weight: 650; }
.extract-chrome :is(.button, .memory-action) { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; min-width: 44px; }
.extract-chrome :is(.button, .memory-action) svg { flex: none; width: 1.05rem; height: 1.05rem; }
.extract-chrome a.button { text-decoration: none; }
.extract-chrome :focus-visible { outline: 3px solid var(--sec); outline-offset: 3px; }
.extract-browser-icon { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: .75rem; background: var(--sec-soft); color: var(--sec-strong); }
.extract-browser-icon .journey-icon { width: 1.15rem; height: 1.15rem; }
.extract-here { padding: .15rem .45rem; border-radius: 999px; background: var(--sec-soft); color: var(--sec-strong); font-size: .7rem; font-weight: 750; white-space: nowrap; }
.extract-disclosure { min-width: 0; border-top: 1px solid var(--ob-line); }
.extract-disclosure > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .7rem 0; color: var(--text); font-size: .85rem; font-weight: 650; cursor: pointer; list-style: none; }
.extract-disclosure > summary::-webkit-details-marker { display: none; }
.extract-disclosure > summary svg { flex: none; width: 1rem; height: 1rem; color: var(--ob-muted); }
.extract-disclosure > summary > span { flex: 1; }
.extract-disclosure[open] > summary > svg:last-child { transform: rotate(180deg); }
.extract-disclosure > summary:hover { color: var(--sec-strong); }
.extract-setup-version { margin: 0 0 .85rem; color: var(--ob-muted); font-size: .8rem; line-height: 1.5; }
.extract-extension-update { margin: 1rem 0; padding: .9rem 1rem 0; border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--surface)); border-radius: 12px; background: color-mix(in srgb, var(--warning) 7%, var(--surface)); }
.extract-update-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding-bottom: .75rem; }
.extract-update-heading > svg { width: 1.25rem; height: 1.25rem; flex: none; color: color-mix(in srgb, var(--warning) 50%, var(--text)); }
.extract-update-heading > div { flex: 1 1 16rem; min-width: 0; }
.extract-update-heading h4 { margin: 0; color: var(--text); font-size: .9rem; }
.extract-update-heading p { margin: .2rem 0 0; color: var(--ob-muted); font-size: .8rem; }
.extract-update-versions, .extract-update-steps { margin: 0 0 .85rem; padding-left: 1.4rem; color: var(--text); font-size: .85rem; line-height: 1.65; overflow-wrap: anywhere; }
.extract-update-versions { color: var(--ob-muted); font-size: .8rem; }
.extract-update-steps li + li { margin-top: .5rem; }
.extract-update-steps .memory-action { margin: .4rem 0; }
.extract-chrome code { padding: .05rem .3rem; border-radius: 5px; background: var(--surface-3); color: var(--text); font-size: .8rem; overflow-wrap: anywhere; }
.extract-chrome .extract-account-tip { margin-top: .5rem; color: var(--ob-muted); }
.extract-warning {
  grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .55rem; padding: .7rem .8rem;
  border: 1px solid #fecaca; border-radius: 12px; background: #fff1f2; color: #9f1239;
}
.extract-warning > .journey-icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .1rem; }
.extract-warning p { margin: 0 0 .35rem; font-size: .84rem; font-weight: 650; line-height: 1.5; }
.extract-warning .extract-warning-tip { color: #7f1d1d; font-size: .8rem; font-weight: 500; }
.extract-warning .button { display: inline-flex; align-items: center; gap: .4rem; }
.extract-warning .button .journey-icon { width: 1rem; height: 1rem; }
.extract-steps { display: grid; gap: .55rem; margin: 0 0 .85rem; padding: 0; list-style: none; }
.extract-steps li { display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .8rem; border: 1px solid var(--ob-line); border-radius: 14px; background: #fff; }
.extract-step-num {
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff; font-size: .82rem; font-weight: 800;
}
.extract-steps li > div { display: grid; justify-items: start; gap: .3rem; min-width: 0; }
.extract-steps strong { color: var(--text); font-size: .9rem; }
.extract-steps small { max-width: 75ch; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.extract-steps .button { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.extract-steps .button .journey-icon { width: 1rem; height: 1rem; }
:is(.extract-steps, .extract-tip) code { padding: .05rem .35rem; border-radius: 6px; background: #f1f5f9; color: #0f172a; font-size: .78rem; }
.extract-tip { display: flex; align-items: flex-start; gap: .45rem; margin: .5rem 0 0; color: #475569; font-size: .8rem; line-height: 1.5; }
.extract-tip .journey-icon { width: 1rem; height: 1rem; flex: none; margin-top: .15rem; color: var(--sec-strong); }
.extract-tip.is-warning { padding: .55rem .7rem; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; color: #78350f; }
.extract-tip.is-warning .journey-icon { color: #b45309; }
.extract-tip a { color: inherit; font-weight: 700; }

/* The extractions */
.extract-jobs { display: grid; gap: .75rem; }
.extract-job {
  --job-tone: var(--sec);
  display: flex; align-items: flex-start; gap: .85rem; min-width: 0; padding: 1rem;
  border: 1px solid var(--ob-line); border-left: 4px solid var(--job-tone); border-radius: 16px; background: #fff;
}
.extract-job[data-tone="amber"] { --job-tone: #f59e0b; }
.extract-job[data-tone="red"] { --job-tone: #ef4444; }
.extract-job[data-tone="green"] { --job-tone: #10b981; }
.extract-job[data-tone="grey"] { --job-tone: #94a3b8; }
.extract-job-icon {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: .85rem;
  background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff;
}
.extract-job-icon .journey-icon { width: 1.25rem; height: 1.25rem; }
.extract-job-main { display: grid; flex: 1; gap: .55rem; min-width: 0; }
.extract-job-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .4rem .75rem; }
.extract-job-title { display: grid; flex: 1 1 14rem; gap: .15rem; min-width: 0; }
.extract-job-title strong { color: var(--text); font-size: .98rem; line-height: 1.35; overflow-wrap: anywhere; }
.extract-job-link { display: inline-flex; align-items: center; gap: .3rem; width: max-content; max-width: 100%; color: var(--sec-strong); font-size: .78rem; font-weight: 700; text-decoration: none; }
.extract-job-link:hover { text-decoration: underline; }
.extract-job-link .journey-icon { width: .85rem; height: .85rem; flex: none; }
.extract-status {
  display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .25rem .65rem; border: 1px solid var(--sec-line); border-radius: 999px;
  background: var(--sec-soft); color: var(--sec-strong); font-size: .76rem; font-weight: 750; white-space: nowrap;
}
.extract-status .journey-icon { width: .9rem; height: .9rem; }
.extract-status[data-tone="amber"] { border-color: #fde68a; background: #fffbeb; color: #b45309; }
.extract-status[data-tone="red"] { border-color: #fecaca; background: #fff1f2; color: #b42318; }
.extract-status[data-tone="green"] { border-color: #a7f3d0; background: #ecfdf5; color: #047857; }
.extract-status[data-tone="grey"] { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.extract-job-detail { margin: 0; color: #475569; font-size: .84rem; line-height: 1.5; }
.extract-job[data-tone="amber"] .extract-job-detail { color: #78350f; font-weight: 600; }
.extract-job[data-tone="red"] .extract-job-detail { color: #9f1239; font-weight: 600; }
.extract-job-lists { display: flex; flex-wrap: wrap; gap: .4rem; }
.extract-list-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--ob-line); border-radius: 999px;
  background: #fff; color: #475569; font-size: .78rem; font-weight: 700;
}
.extract-list-chip .journey-icon { width: .85rem; height: .85rem; }
.extract-list-chip small { color: #64748b; font-size: .72rem; font-weight: 600; }
.extract-list-chip[data-state="now"] { border-color: var(--sec); background: var(--sec-soft); color: var(--sec-deep); }
.extract-list-chip[data-state="done"] { border-color: var(--sec-line); color: var(--sec-strong); }
.extract-list-chip[data-state="skipped"] { border-style: dashed; color: #64748b; }
.extract-list-chip[data-state="stopped"] { border-color: #e2e8f0; background: #f8fafc; color: #475569; }
.extract-list-chip[data-state="unstarted"] { border-style: dashed; color: #64748b; }
.extract-pace-chip {
  display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .6rem; border-radius: 999px;
  background: #f1f5f9; color: #334155; font-size: .78rem; font-weight: 700;
}
.extract-pace-chip .journey-icon { width: .85rem; height: .85rem; }
/* Fast is the pace most likely to make Facebook warn the account. */
.extract-pace-chip[data-pace="fast"] { background: #fffbeb; color: #92400e; }
.extract-job-numbers dd .extract-speed { display: block; margin-top: .1rem; color: var(--sec-strong); font-size: .72rem; font-weight: 700; }
.extract-job-title strong { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.extract-results-meta { margin: .2rem 0 0; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.extract-job-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; }
.extract-job-numbers div { min-width: 0; padding: .5rem .6rem; border-radius: 10px; background: #f8fafc; }
.extract-job-numbers dt { color: #64748b; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.extract-job-numbers dd { margin: .1rem 0 0; color: var(--text); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.extract-job-numbers dd small { color: #64748b; font-size: .74rem; font-weight: 600; }
.extract-progress { height: .5rem; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--sec) 12%, #fff); }
.extract-progress b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sec-2), var(--sec-strong)); transition: width .4s ease; }
.extract-progress:not([role]) b { width: 100%; opacity: .3; }
.extract-progress.is-moving b { width: 35%; opacity: 1; animation: extract-slide 1.6s ease-in-out infinite; }
@keyframes extract-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.extract-job-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.extract-job-actions .button, .extract-toolbar .button, .extract-forget .button { display: inline-flex; align-items: center; gap: .4rem; width: auto; }
:is(.extract-job-actions, .extract-toolbar, .extract-forget) .button .journey-icon { width: 1rem; height: 1rem; }
.extract-forget .button > span[data-icon] { display: inline-grid; }
.extract-job-actions .memory-action { margin-left: auto; }

/* Export: a small menu of files */
.extract-export { position: relative; }
.extract-export > summary { list-style: none; }
.extract-export > summary::-webkit-details-marker { display: none; }
.extract-export-menu {
  position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0; display: grid; gap: .15rem; min-width: 15rem; padding: .35rem;
  border: 1px solid var(--ob-line); border-radius: 14px; background: #fff; box-shadow: var(--shadow-float);
}
.extract-export-menu a { display: grid; gap: .05rem; padding: .5rem .65rem; border-radius: 10px; color: var(--text); text-decoration: none; }
.extract-export-menu a:hover, .extract-export-menu a:focus-visible { background: var(--sec-soft); outline: none; }
.extract-export-menu strong { font-size: .86rem; }
.extract-export-menu small { color: var(--muted); font-size: .76rem; }

/* The people found */
.extract-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.extract-search {
  display: flex; flex: 1 1 20rem; align-items: center; gap: .45rem; min-width: 0; padding: .25rem .25rem .25rem .7rem;
  border: 1.5px solid var(--ob-line-strong); border-radius: .9rem; background: #fff;
}
.extract-search:focus-within { border-color: var(--sec); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sec) 14%, transparent); }
.extract-search > span { display: grid; color: #64748b; }
.extract-search .journey-icon { width: 1.05rem; height: 1.05rem; }
.extract-search input { flex: 1; min-width: 0; min-height: 2.4rem; border: 0 !important; background: transparent; box-shadow: none !important; }
.extract-search input:focus { outline: none; }
.extract-toolbar-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.extract-toolbar-actions .extract-export-menu { right: 0; left: auto; }
.extract-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.extract-table-wrap { overflow-x: auto; border: 1px solid var(--ob-line); border-radius: 14px; }
.extract-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.extract-table th {
  padding: .6rem .75rem; border-bottom: 1px solid var(--ob-line); background: #f8fafc; color: #475569;
  font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap;
}
.extract-table td { padding: .6rem .75rem; border-bottom: 1px solid #eef2f7; color: var(--text); vertical-align: top; }
.extract-table tbody tr:last-child td { border-bottom: 0; }
.extract-table tbody tr:hover { background: #fbfefd; }
.extract-person { display: flex; align-items: center; gap: .6rem; min-width: 11rem; }
.extract-avatar {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; flex: none; border-radius: 999px;
  background: linear-gradient(135deg, var(--sec-2), var(--sec-strong)); color: #fff; font-size: .74rem; font-weight: 800;
}
.extract-person > div { display: grid; min-width: 0; }
.extract-person a { color: var(--text); font-weight: 750; text-decoration: none; overflow-wrap: anywhere; }
.extract-person a:hover { color: var(--sec-strong); text-decoration: underline; }
.extract-person small { color: #64748b; font-size: .76rem; overflow-wrap: anywhere; }
.extract-id-cell { display: inline-flex; align-items: center; gap: .15rem; white-space: nowrap; }
.extract-id { color: #334155; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.extract-copy {
  display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem;
  border: 1px solid transparent; border-radius: .55rem; background: transparent; color: #64748b; cursor: pointer;
}
.extract-copy:hover { border-color: var(--ob-line); background: #f8fafc; color: var(--sec-strong); }
.extract-copy:focus-visible { outline: 3px solid var(--sec-line); outline-offset: 1px; }
.extract-copy .journey-icon { width: .95rem; height: .95rem; }
.extract-emails { display: grid; gap: .2rem; }
.extract-email { color: var(--sec-deep); font-weight: 650; overflow-wrap: anywhere; }
.extract-none { color: #64748b; }
.extract-found-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.extract-found { padding: .1rem .5rem; border-radius: 999px; background: #f1f5f9; color: #334155; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.extract-found[data-found="comment"] { background: #eff6ff; color: #1d4ed8; }
.extract-found[data-found="reaction"] { background: #fff1f2; color: #be123c; }
.extract-found[data-found="member"] { background: var(--sec-soft); color: var(--sec-strong); }
.extract-comment {
  display: -webkit-box; max-width: 22rem; margin: 0; overflow: hidden; color: #334155; font-size: .82rem; line-height: 1.45;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.extract-post-open {
  display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem;
  border: 1px solid transparent; border-radius: .55rem; color: #64748b;
}
.extract-post-open:hover { border-color: var(--ob-line); background: #f8fafc; color: var(--sec-strong); }
.extract-post-open .journey-icon { width: .95rem; height: .95rem; }
.extract-post-author { display: grid; gap: .1rem; }
.extract-post-author small { color: #64748b; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; }
.extract-post-counts { display: flex; flex-wrap: wrap; gap: .5rem; }
.extract-post-count { display: inline-flex; align-items: center; gap: .25rem; color: #475569; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.extract-post-count .journey-icon { width: .9rem; height: .9rem; color: #94a3b8; }
.extract-export-group { margin: .35rem .35rem .1rem; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.extract-row-actions { width: 1%; text-align: right; white-space: nowrap; }
@media (min-width: 761px) {
  .extract-table td[data-label="Emails"] { min-width: 12rem; }
}
/* Disconnect, Remove and Delete keep their words on a phone (elsewhere these buttons show only an icon there). */
@media (max-width: 680px) {
  #viewExtract .memory-action span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}
.extract-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; color: #475569; font-size: .82rem; font-variant-numeric: tabular-nums; }
.extract-pages > div { display: flex; gap: .4rem; }
.extract-table-loading {
  padding: 1.2rem; border-radius: 12px; color: #475569; font-size: .86rem;
  background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 50%, #eef2f7 100%) 0 0 / 200% 100%; animation: ds-shimmer 1.3s ease-in-out infinite;
}

/* Removing someone from every list */
.extract-forget { display: flex; flex-wrap: wrap; gap: .5rem; }
.extract-forget input { flex: 1 1 18rem; min-width: 0; min-height: 2.65rem; padding: .4rem .75rem; }

@media (prefers-reduced-motion: reduce) {
  .extract-choice, .extract-pace, .extract-link-row, .extract-progress b { transition: none; }
  .extract-progress.is-moving b { width: 100%; opacity: .45; animation: none; }
  .extract-table-loading, :is(#extractMetrics, #extractChrome, #extractJobs):empty { animation: none; }
}
@container extract-connections (max-width: 44rem) {
  .extract-browser-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extract-browser-title { flex-basis: 100%; }
  .extract-disconnect { margin-left: auto; }
}
@container extract-connections (max-width: 24rem) {
  .extract-browser-details > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  .extract-copy { width: 44px; height: 44px; }
  .extract-choice, .extract-pace { min-height: 44px; }
  :is(.extract-job-actions, .extract-row-actions, .extract-browser, .extract-steps) .memory-action, .extract-export-menu a, .extract-filters .learn-filter { min-height: 44px; }
  .extract-search input, .extract-forget input, .extract-max input, .extract-link-row input { font-size: 1rem; }
}
@media (max-width: 980px) {
  .extract-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .extract-job-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extract-job-actions .memory-action { margin-left: 0; }
  /* The people become cards, each value under its caption */
  .extract-table-wrap { overflow: visible; border: 0; }
  .extract-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .extract-table, .extract-table tbody, .extract-table tr, .extract-table td { display: block; width: 100%; }
  .extract-table tr { margin-bottom: .6rem; padding: .75rem .8rem; border: 1px solid var(--ob-line); border-radius: 14px; background: #fff; }
  .extract-table td { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .5rem; padding: .3rem 0; border: 0; }
  .extract-table td::before { content: attr(data-label); color: #64748b; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
  .extract-table td[data-label="Person"] { grid-template-columns: minmax(0, 1fr); padding-bottom: .5rem; }
  .extract-table td[data-label="Person"]::before, .extract-row-actions::before { content: none; }
  .extract-table td.extract-row-actions { display: flex; width: auto; padding-top: .45rem; text-align: left; }
  .extract-comment { max-width: none; }
}
@media (max-width: 680px) {
  .extract-form-foot { flex-direction: column; align-items: stretch; }
  .extract-form-foot .button.primary { width: 100%; }
  .extract-max { grid-template-columns: minmax(0, 1fr) auto; }
  .extract-max input { width: 100%; }
  .extract-choice-grid, .extract-pace-grid { grid-template-columns: minmax(0, 1fr); }
  .extract-choice, .extract-pace { flex-direction: row; gap: .65rem; }
  .extract-toolbar-actions { width: 100%; }
  .extract-toolbar-actions > * { flex: 1 1 auto; }
  .extract-toolbar-actions .button, .extract-toolbar-actions summary { width: 100%; justify-content: center; }
  .extract-export-menu { position: static; min-width: 0; margin-top: .4rem; box-shadow: none; }
  .extract-job { gap: .65rem; padding: .85rem; }
  .extract-job-icon { width: 2.2rem; height: 2.2rem; }
  .extract-job-actions .button, .extract-job-actions .extract-export { flex: 1 1 auto; }
  .extract-job-actions .button, .extract-job-actions summary { justify-content: center; }
  .extract-connection-copy { flex-basis: calc(100% - 3.1rem); }
  .extract-connection-heading > .button { margin-left: auto; }
  .extract-update-heading > div { flex-basis: calc(100% - 2.1rem); }
  .extract-update-heading > .button { width: 100%; }
  .extract-forget .button { width: 100%; justify-content: center; }
}

/* =====================================================================
   Data > Match (0085): phone numbers and profiles for Facebook IDs,
   matched through the owner's SenderPro account. Its own colour is
   rose, with a purple gradient. The page borrows the Extract tables,
   cards and buttons; only what is Match's own is styled here.
   ===================================================================== */
body[data-page="match"] { --sec: #db2777; --sec-strong: #be185d; --sec-deep: #831843; --sec-soft: #fdf2f8; --sec-line: #f9a8d4; --sec-2: #9333ea; }
.nav-item[data-view="match"], .nav-group-current[data-view="match"] { --tile: #db2777; --tile-deep: #be185d; --tile-glow: #f9a8d4; }

/* Shared AIBO surfaces, section colours and form controls keep Match part of the workspace. */
#viewMatch:not([hidden]) { display: grid; gap: 1rem; align-content: start; }
#viewMatch > .panel, #viewMatch > .insights-bar { min-width: 0; margin-bottom: 0; }
#viewMatch [hidden] { display: none !important; }
.match-overview { flex-wrap: wrap; gap: 1rem; }
.match-overview .insights-bar-copy { flex: 1 1 20rem; }
.match-metrics { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 0; }
.match-metrics > div { display: grid; gap: .15rem; }
.match-metrics dt { color: var(--ob-muted); font-size: .75rem; font-weight: 650; }
.match-metrics dd { margin: 0; color: var(--sec-deep); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Connected accounts show one compact status row; credentials appear only when needed. */
.match-account-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.match-account-icon, .match-list-icon { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--sec-soft); color: var(--sec-strong); }
.match-account-copy { flex: 1 1 14rem; min-width: 0; }
.match-account-copy h3 { margin: 0; font-size: 1rem; }
.match-account-copy p { margin: .2rem 0 0; color: var(--ob-muted); font-size: .82rem; line-height: 1.5; }
.soft-badge.match-connection-state { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; }
.soft-badge.match-connection-state svg { width: 1em; height: 1em; }
.soft-badge.match-connection-state[data-state="on"] { color: color-mix(in srgb, var(--success) 75%, var(--text)); background: color-mix(in srgb, var(--success) 8%, var(--surface)); border-color: color-mix(in srgb, var(--success) 25%, var(--surface)); }
.soft-badge.match-connection-state[data-state="off"] { color: var(--ob-muted); background: var(--surface-3); border-color: var(--ob-line); }
#viewMatch .match-connection-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ob-line); }
.match-connection-form > p { grid-column: 1 / -1; margin: 0; }
.match-connection-form .extract-link-hint { display: block; max-width: 75ch; line-height: 1.6; }
.match-connection-form > .button { min-height: 3rem; }

/* Compact source choices, with one visible input panel and one primary action. */
#viewMatch .match-source-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.match-source-choices .extract-choice { flex-direction: row; align-items: center; gap: .75rem; padding: .8rem 1rem; }
.match-source-choices .extract-choice-icon { width: 2.25rem; height: 2.25rem; }
.match-source-panels { display: grid; gap: .75rem; }
.match-new .extract-form-foot { justify-content: space-between; }
#matchStartHint { max-width: 60ch; margin: 0; color: var(--ob-muted); }
#matchIds { min-height: 7rem; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.match-list-fields { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(9rem, .65fr) minmax(0, 1.2fr); gap: 1rem; }
.match-required, .match-optional { margin-left: .35rem; color: var(--ob-muted); font-size: .72rem; font-weight: 500; }
.match-source-hint { margin: -.25rem 0 .25rem; }
.match-details-dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; background: var(--surface); color: var(--text); }
.match-details-form { display: grid; gap: 1rem; padding: 1.5rem; }
.match-details-form .section-card-heading { margin: 0; }
.match-details-form h2 { margin: 0; color: var(--text); font-size: 1.2rem; }
.match-details-form .eyebrow { color: var(--sec-strong); }
.match-details-form .memory-action { min-width: 44px; min-height: 44px; }
.match-editor-hint { margin: 0; color: var(--ob-muted); font-size: .85rem; line-height: 1.6; }
.match-editor-actions { display: flex; justify-content: flex-end; gap: .75rem; padding-top: .5rem; }
.match-editor-actions .button { min-height: 44px; }
.match-details-dialog :focus-visible { outline: 3px solid var(--sec); outline-offset: 3px; }

/* Tables use the available panel width, with a fixed place for each kind of information. */
.match-jobs-wrap { container: match-lists / inline-size; }
#matchResults .match-people-wrap { container: match-people / inline-size; overflow: visible; border: 0; border-radius: 0; }
.match-jobs-table, #matchResults .match-people-table {
  width: 100%; min-width: 0; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--ob-line); border-radius: 12px; background: var(--surface); text-align: left; font-size: .85rem;
}
.match-col-created { width: 8.5rem; }
.match-col-source { width: 9rem; }
.match-col-status { width: 9rem; }
.match-col-count { width: 5.25rem; }
.match-col-list-actions { width: 13rem; }
.match-col-person { width: 18%; }
.match-col-id { width: 11.5rem; }
.match-col-phone { width: 11rem; }
.match-col-profile { width: 12rem; }
.match-col-person-actions { width: 4.75rem; }
.match-jobs-table th, #matchResults .match-people-table th {
  padding: .8rem 1rem; border-bottom: 1px solid var(--ob-line); background: var(--surface-3);
  color: var(--ob-muted); font-size: .75rem; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.match-jobs-table th:first-child, #matchResults .match-people-table th:first-child { border-radius: 11px 0 0 0; }
.match-jobs-table th:last-child, #matchResults .match-people-table th:last-child { border-radius: 0 11px 0 0; }
.match-jobs-table td, #matchResults .match-people-table td {
  height: 5rem; padding: .9rem 1rem; border-bottom: 1px solid var(--ob-line); color: var(--text);
  vertical-align: middle; line-height: 1.5; overflow-wrap: anywhere;
}
.match-jobs-table tr:last-child td, #matchResults .match-people-table tr:last-child td { border-bottom: 0; }
.match-jobs-table tbody tr:last-child td:first-child, #matchResults .match-people-table tbody tr:last-child td:first-child { border-radius: 0 0 0 11px; }
.match-jobs-table tbody tr:last-child td:last-child, #matchResults .match-people-table tbody tr:last-child td:last-child { border-radius: 0 0 11px 0; }
.match-jobs-table :is(th, td):nth-child(5), .match-jobs-table :is(th, td):last-child { border-inline-start: 1px solid var(--ob-line); }
.match-job-row, .match-person-row { transition: background-color .18s ease; }
.match-job-row:nth-child(even), .match-person-row:nth-child(even) { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.match-job-row:hover, .match-person-row:hover { background: var(--surface-2); }
.match-job-row.is-selected { background: var(--sec-soft); }
.match-job-row.is-selected > td:first-child { box-shadow: inset 3px 0 var(--sec); }
.match-list-identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.match-list-identity > div { min-width: 0; }
.match-list-identity strong { display: block; color: var(--text); font-weight: 750; line-height: 1.5; }
.match-list-name { display: flex; align-items: center; gap: .5rem; width: 100%; min-height: 44px; padding: .2rem 0; border: 0; background: transparent; color: var(--text); text-align: left; font: inherit; font-weight: 750; cursor: pointer; }
.match-list-name > span { min-width: 0; overflow-wrap: anywhere; }
.match-list-name svg { flex: none; width: .85rem; height: .85rem; color: var(--ob-muted); }
.match-list-name:hover { color: var(--sec-strong); }
.match-list-name:hover > span { text-decoration: underline; text-underline-offset: 3px; }
.match-source-meta { display: grid; gap: .25rem; }
.match-source-meta > span { display: flex; align-items: center; gap: .35rem; font-weight: 650; }
.match-source-meta svg { flex: none; width: .95rem; height: .95rem; color: var(--ob-muted); }
.match-source-meta small { color: var(--ob-muted); font-size: .75rem; overflow-wrap: anywhere; }
.match-list-identity small, .match-created small { display: block; margin-top: .2rem; color: var(--ob-muted); font-size: .75rem; }
.match-created { font-variant-numeric: tabular-nums; }
.match-list-icon { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.match-list-icon svg { width: 1rem; height: 1rem; }
.match-jobs-table .match-number { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.match-jobs-table .match-number-hits { color: var(--sec-strong); }
.match-actions-heading { text-align: right; }
.match-job-actions > div { display: flex; justify-content: flex-end; align-items: center; gap: .5rem; white-space: nowrap; }
#viewMatch .match-open-list { min-height: 44px; padding: .5rem .65rem; gap: .45rem; font-size: .8rem; box-shadow: none; }
#viewMatch .match-open-list svg { width: .95rem; height: .95rem; }
.match-state-note { position: relative; margin-top: .25rem; }
.match-state-note summary, .match-more-phones summary { width: fit-content; min-height: 1.5rem; color: var(--sec-strong); font-size: .75rem; font-weight: 650; cursor: pointer; }
.match-state-note p {
  position: absolute; z-index: 25; top: 100%; left: 0; width: min(19rem, 75vw); margin: .35rem 0 0; padding: .8rem;
  border: 1px solid var(--ob-line); border-radius: 12px; background: var(--surface); color: var(--ob-muted); box-shadow: var(--shadow-float); font-size: .82rem;
}

/* One quiet action menu per row keeps buttons from setting the height of the table. */
.match-row-menu { position: relative; width: fit-content; flex: none; }
.match-row-menu > summary {
  display: grid; place-items: center; width: 44px; min-height: 44px; padding: .4rem; border: 1px solid var(--ob-line);
  border-radius: 9px; background: var(--surface); color: var(--ob-muted); list-style: none; cursor: pointer;
}
.match-row-menu > summary::-webkit-details-marker { display: none; }
.match-row-menu > summary:hover, .match-row-menu[open] > summary { border-color: var(--sec-line); color: var(--sec-strong); background: var(--sec-soft); }
.match-row-menu > summary svg { width: 1.1rem; height: 1.1rem; }
.match-row-menu-panel {
  position: absolute; z-index: 30; top: calc(100% + .4rem); right: 0; display: grid; gap: .2rem; width: 15rem; padding: .4rem;
  border: 1px solid var(--ob-line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-float); text-align: left;
}
.match-row-menu-panel :is(a, button) {
  display: flex; align-items: center; gap: .65rem; min-height: 44px; width: 100%; padding: .6rem .7rem;
  border: 0; border-radius: 8px; background: transparent; color: var(--text); text-decoration: none; text-align: left; font: inherit; font-size: .82rem; cursor: pointer;
}
.match-row-menu-panel :is(a, button):hover { background: var(--surface-2); }
.match-row-menu-panel small { display: block; margin-top: .1rem; color: var(--ob-muted); font-size: .75rem; }
.match-row-menu-panel .match-menu-danger { color: var(--danger); border-top: 1px solid var(--ob-line); border-radius: 0 0 8px 8px; }
.match-row-menu-panel .match-menu-danger:only-child { border-top: 0; border-radius: 8px; }
.match-row-menu-panel .match-menu-danger:hover { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }

/* Identity, ID, phones and email each have a dedicated column and the same reading rhythm. */
#matchResults { scroll-margin-top: 1rem; }
#matchResults .extract-results-meta { color: var(--ob-muted); font-size: .82rem; }
#matchResults .extract-person { align-items: center; gap: .65rem; min-width: 0; }
#matchResults .extract-avatar { width: 2rem; height: 2rem; font-size: .7rem; }
#matchResults .extract-person > div { min-width: 0; overflow-wrap: anywhere; }
#matchResults .extract-person :is(a, span:not(.extract-avatar)) { font-size: .85rem; }
#matchResults .extract-person > div > span { font-weight: 750; }
#matchResults .extract-person small { color: var(--ob-muted); font-size: .75rem; }
.match-contact { display: grid; gap: .15rem; }
.match-contact-line { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.match-contact-line > :first-child { min-width: 0; overflow-wrap: anywhere; }
.match-contact-line .extract-id { color: var(--ob-text); white-space: normal; font-size: .8rem; }
#matchResults .extract-copy { width: 28px; height: 32px; border-color: var(--ob-line); background: var(--surface); border-radius: 7px; }
#matchResults .extract-copy:hover { background: var(--sec-soft); border-color: var(--sec-line); }
.match-email-line { align-items: flex-start; }
.match-email-line > span { padding-top: .25rem; }
.match-more-phones > div { display: grid; gap: .3rem; margin-top: .3rem; }
.match-profile-lines { display: grid; gap: .25rem; color: var(--ob-muted); font-size: .8rem; }
.match-profile-lines > span { display: flex; align-items: flex-start; gap: .35rem; }
.match-profile-lines svg { width: .9rem; height: .9rem; margin-top: .15rem; color: var(--ob-muted); }
.match-row-actions .match-row-menu { margin-left: auto; }
#matchResults .extract-search { flex: 1 1 24rem; min-width: 0; }
#viewMatch .memory-action span { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

/* Privacy controls stay available without competing with the matching workflow. */
.match-privacy > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; list-style: none; cursor: pointer; }
.match-privacy > summary::-webkit-details-marker { display: none; }
.match-privacy > summary > span:first-child { display: grid; gap: .25rem; }
.match-privacy-title { color: var(--text); font-size: .95rem; font-weight: 750; }
.match-privacy > summary > [data-icon] { display: flex; color: var(--ob-muted); transform: rotate(90deg); }
.match-privacy[open] > summary { margin-bottom: 1rem; }
.match-privacy[open] > summary > [data-icon] { transform: rotate(270deg); }
#viewMatch :focus-visible { outline: 3px solid var(--sec); outline-offset: 3px; }
#viewMatch .extract-search input:focus-visible { outline: none; box-shadow: none; }

/* Cards follow the panel width, including when the sidebar is expanded. */
@container match-lists (max-width: 960px) {
  .match-jobs-table { display: block; border: 0; background: transparent; }
  .match-jobs-table colgroup, .match-jobs-table thead { display: none; }
  .match-jobs-table tbody { display: grid; gap: .75rem; }
  .match-jobs-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; padding: 1rem; border: 1px solid var(--ob-line); border-radius: 12px; background: var(--surface); }
  .match-jobs-table tr > td { display: block; height: auto; padding: 0; border: 0 !important; text-align: left; border-radius: 0 !important; }
  .match-jobs-table td::before { content: attr(data-label); display: block; margin-bottom: .3rem; color: var(--ob-muted); font-size: .75rem; font-weight: 600; }
  .match-jobs-table td:first-child, .match-jobs-table .match-job-actions { grid-column: 1 / -1; }
  .match-jobs-table td[data-label="Source"] { grid-column: 1 / -1; padding-bottom: .85rem; border-bottom: 1px solid var(--ob-line) !important; }
  .match-jobs-table td:first-child::before, .match-jobs-table td.match-job-actions::before { display: none; }
  .match-jobs-table td.match-number { text-align: left; }
  .match-job-actions > div { justify-content: flex-end; padding-top: .75rem; border-top: 1px solid var(--ob-line); }
  .match-job-row.is-selected > td:first-child { box-shadow: none; }
  .match-jobs-table tr.is-selected { border-color: var(--sec-line); background: var(--sec-soft); }
  .match-state-note p { left: auto; right: 0; }
  .match-state-note summary { min-height: 44px; line-height: 44px; }
}
@container match-people (max-width: 980px) {
  #matchResults .match-people-table { display: block; border: 0; background: transparent; }
  #matchResults .match-people-table colgroup, #matchResults .match-people-table thead { display: none; }
  #matchResults .match-people-table tbody { display: grid; gap: .75rem; }
  #matchResults .match-people-table tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1rem; width: 100%; padding: 1rem; margin: 0; border: 1px solid var(--ob-line); border-radius: 12px; background: var(--surface); }
  #matchResults .match-people-table td { display: block; width: auto; height: auto; padding: 0; border: 0; border-radius: 0 !important; }
  #matchResults .match-people-table td::before { content: attr(data-label); display: block; margin-bottom: .35rem; color: var(--ob-muted); font-size: .75rem; font-weight: 600; text-transform: none; }
  #matchResults .match-people-table td[data-label="Person"] { grid-column: 1 / -1; padding: 0 3rem .75rem 0; border-bottom: 1px solid var(--ob-line); }
  #matchResults .match-people-table td[data-label="Person"]::before, #matchResults .match-people-table td.match-row-actions::before { display: none; }
  #matchResults .match-people-table .match-row-actions { position: absolute; top: 1rem; right: 1rem; }
  #matchResults .extract-copy { width: 44px; height: 44px; }
  .match-more-phones summary { min-height: 44px; line-height: 44px; }
  .match-row-menu > summary { width: 44px; }
}
@container match-people (max-width: 520px) {
  #matchResults .match-people-table tr { grid-template-columns: minmax(0, 1fr); }
  #matchResults .match-people-table td:not([data-label="Person"]):not(.match-row-actions) { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; gap: .65rem; }
  #matchResults .match-people-table td::before { margin: .5rem 0 0; }
  .match-contact-line .extract-id { white-space: normal; overflow-wrap: anywhere; }
  .match-email-line > span { padding-top: .5rem; }
  .match-profile-lines { padding-top: .5rem; }
}
@media (max-width: 680px) {
  .match-list-fields { grid-template-columns: minmax(0, 1fr); }
  .match-list-fields input, .match-list-fields select, .match-details-form input, .match-details-form select { font-size: 1rem; }
  .match-details-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: calc(100dvh - 1rem); }
  .match-details-form { padding: 1.25rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)); }
  .match-metrics { width: 100%; justify-content: space-between; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--ob-line); }
  .match-account-copy { flex-basis: calc(100% - 3.25rem); }
  #viewMatch .match-connection-form, #viewMatch .match-source-choices { grid-template-columns: minmax(0, 1fr); }
  .match-new .extract-form-foot { gap: .75rem; }
  #matchResults .extract-toolbar-actions { width: auto; }
  #matchResults .extract-search { flex-wrap: wrap; }
  #matchResults .extract-search input { flex-basis: calc(100% - 2rem); }
  #matchResults .extract-search .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .match-job-row, .match-person-row { transition: none; }
  #viewMatch .extract-table-loading { animation: none; }
}