: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; }
.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(3,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; }

.draft-evidence {
  border: 1px solid var(--accent-line);
  border-radius: .72rem;
  background: var(--accent-soft);
  padding: .65rem .8rem;
  color: #1d4269;
  font-size: .76rem;
}
.draft-evidence > div { justify-content: space-between; }
.draft-evidence-header {
  flex-wrap: wrap;
}
.draft-evidence-header > div {
  display: grid;
  gap: .1rem;
  min-width: 12rem;
}
.draft-evidence .danger-quiet {
  min-height: 2.25rem;
  padding-inline: .72rem;
}
.draft-evidence strong { color: var(--accent-ink); }
.draft-evidence details { margin-top: .45rem; }
.draft-evidence summary { cursor: pointer; color: var(--accent-ink); font-weight: 650; }
.draft-evidence ul { display: grid; gap: .35rem; margin: .5rem 0 0; padding: 0; list-style: none; }
.draft-evidence li { display: flex; justify-content: space-between; gap: 1rem; }
.draft-evidence li span { color: var(--muted); text-align: right; }

.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); }
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; }
.meta-review-card { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; padding: 1rem; border: 1px solid #a9d8ff; border-radius: 1rem; background: linear-gradient(135deg, #eef8ff, #ffffff); }
.meta-review-card h4 { margin: .1rem 0 .35rem; color: #10345c; }
.meta-review-card p { margin: 0; color: #315b86; line-height: 1.5; }
.review-url-grid { display: grid; gap: .45rem; min-width: 220px; align-content: center; }
.review-url-grid a { display: inline-flex; justify-content: center; padding: .55rem .8rem; border: 1px solid #9ecbff; border-radius: .7rem; background: #fff; color: #0b57c8; font-weight: 800; text-decoration: none; }
.review-url-grid a:hover { background: #eaf4ff; }
@media (max-width: 760px) { .platform-inventory-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .meta-review-card { flex-direction: column; } .review-url-grid { min-width: 0; } }
.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; }

#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; }
}