.chat-page,
.assistant-page,
.whatsapp-connect-page {
  --communication-ink: #172338;
  --communication-muted: #526076;
  --communication-line: #e2e8f0;
  --communication-soft: #f4f6fa;
  color: var(--communication-ink);
}

.chat-workspace {
  grid-template-columns: minmax(235px, .95fr) minmax(0, 2fr);
  gap: 16px;
  align-items: stretch;
}

.chat-inbox, .chat-detail { min-width: 0; }
.chat-page-actions { display: flex; gap: 8px; }
.inbox-heading, .chat-contact { display: flex; align-items: center; gap: 10px; padding: 16px; }
.inbox-heading { justify-content: space-between; padding-bottom: 4px; }
.inbox-heading span, .chat-contact p { color: var(--communication-muted); font-size: .78rem; }
.inbox-search { padding-inline: 16px; }
.chat-inbox .inbox-search-input { border-color: #cbd5e1; }
.chat-inbox .inbox-filters { margin: 10px 16px; gap: 4px; border: 0; padding: 3px; border-radius: 10px; background: var(--communication-soft); }
.chat-inbox .inbox-filter { border-radius: 7px; min-height: 38px; padding: 4px 5px; font-size: .75rem; white-space: nowrap; }
.chat-inbox .inbox-filter[aria-pressed=true] { border: 1px solid var(--communication-line); background: white; }
.chat-inbox .inbox-filter-count { min-width: 14px; font-variant-numeric: tabular-nums; }
.inbox-results { border-top: 1px solid var(--communication-line); }
.chat-inbox .thread-list { overflow-y: auto; max-height: clamp(19rem, 56vh, 33rem); padding: 6px; }
.chat-inbox .thread-item { border: 1px solid transparent; padding: 9px 8px; border-radius: 9px; }
.chat-inbox .thread-item[aria-current=true] { border-color: #f2d1c5; background: #fff2ec; }
.chat-inbox .thread-item:not([aria-current=true]):hover { background: var(--communication-soft); }
.thread-summary strong { flex: 1 1 7ch; font-size: .9rem; }
.thread-owner { color: #355171; font-size: .72rem; font-weight: 650; padding: 2px 6px; border-radius: 5px; background: #eaf1fb; }
.thread-owner[data-thread-owner=human] { color: #7a460c; background: #fff2d8; }
.chat-inbox .thread-preview { color: var(--communication-muted); }
.chat-inbox .inbox-empty { display: grid; justify-items: start; gap: 8px; padding: 21px 16px; font-size: .86rem; }
.inbox-empty p { color: var(--communication-muted); }
.chat-detail { display: flex; flex-direction: column; }
.chat-contact { border-bottom: 1px solid var(--communication-line); }
.chat-contact > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.chat-contact p { margin-top: 3px; }
.chat-contact .pill { flex: none; }
.chat-detail .inbox-handoff-note { padding: 10px 16px; background: #fffbef; color: #764d14; }
.chat-detail .messages {
  flex: 1;
  min-height: clamp(17rem, 49vh, 30rem);
  max-height: 60vh;
  padding: clamp(12px, 2.2vw, 24px);
  background: var(--communication-soft);
  border-end-start-radius: inherit;
  border-end-end-radius: inherit;
}
.chat-detail .message { border-color: var(--communication-line); width: fit-content; max-width: min(86%, 38rem); }
.chat-detail .message.agent { background: #e9f5ec; border-color: #ccded2; }
.chat-detail .message.staff { background: #fff1dc; border-color: #ecdcc0; }
.chat-detail .message small { color: var(--communication-muted); }
.chat-detail-empty { display: grid; place-items: center; padding: 24px; min-height: 330px; text-align: center; }
.chat-detail-empty p { color: var(--communication-muted); margin-top: 5px; }

.assistant-page { max-width: none; }
.assistant-page .assistant-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; }
.assistant-page .assistant-settings, .assistant-page .assistant-side { gap: 14px; }
.assistant-page .assistant-card { padding: clamp(14px, 2vw, 21px); gap: 13px; }
.assistant-page .assistant-details.assistant-card { padding: 0; }
.assistant-page .assistant-whatsapp-connection {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-inline-start: 3px solid #087443;
  margin-bottom: 16px;
}
.assistant-whatsapp-connection > .error { grid-column: 1 / -1; }
.assistant-page .assistant-connection-actions { justify-content: flex-start; }
.assistant-page .assistant-status { color: var(--communication-muted); }
.assistant-whatsapp-connection [data-wa-confirm] form > p { color: var(--communication-muted); line-height: 1.5; }
.assistant-identity-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.assistant-avatar-fields small { color: var(--communication-muted); }
.assistant-page .assistant-enabled { min-height: 30px; }
.assistant-toggle-row { background: var(--communication-soft); padding: 10px 12px; border-radius: 9px; }
.assistant-toggle-row p { margin-inline-start: 26px; }
.assistant-page .assistant-actions {
  display: flex;
  position: sticky;
  bottom: 8px;
  z-index: 2;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: white;
  border: 1px solid var(--communication-line);
  border-radius: 12px;
}
.assistant-save-feedback { min-width: 0; flex: 1 1 auto; }
.assistant-save-feedback > :empty { display: none; }
.assistant-actions #assistant-save { margin-inline-start: auto; }
.assistant-test-heading .subtle { margin-top: 3px; }
.assistant-page .assistant-test-result { min-height: 115px; align-content: start; padding: 12px; background: var(--communication-soft); border-radius: 10px; }
.assistant-test-empty { align-self: start; }
.assistant-page #assistant-test-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.assistant-test form button { white-space: normal; }
.assistant-page .assistant-faq-entry { border-color: var(--communication-line); }
.assistant-page .assistant-faq-entry legend { color: var(--communication-muted); padding-inline: 4px; font-size: .8rem; }
.assistant-page .assistant-faq-remove { color: #9c3030; }
.assistant-page .whatsapp-automation-panel form { display: grid; justify-items: start; gap: 8px; }
.whatsapp-automation-panel form > .assistant-toggle-row { width: 100%; }
.whatsapp-automation-panel [data-automation-status]:empty { display: none; }
.whatsapp-automation-panel details > summary { cursor: pointer; min-height: 44px; align-content: center; font-weight: 650; }
.automation-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.automation-counts > div { padding: 7px; background: var(--communication-soft); border-radius: 8px; }
.automation-counts dt { color: var(--communication-muted); font-size: .76rem; }
.automation-counts dd { margin: 3px 0 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.whatsapp-connect-page .assistant-card { border-top: 3px solid #087443; }

@media (max-width: 1120px) {
  .assistant-identity-fields { grid-template-columns: minmax(0, 1fr); }
  .assistant-page #assistant-test-form { grid-template-columns: minmax(0, 1fr); }
  .assistant-test form button { justify-self: start; }
}

@media (max-width: 800px) {
  .chat-workspace, .assistant-page .assistant-grid, .assistant-page .assistant-whatsapp-connection { grid-template-columns: minmax(0, 1fr); }
  .chat-workspace:not(.chat-showing-detail) .chat-detail, .chat-workspace.chat-showing-detail .chat-inbox { display: none; }
  .chat-page:has(.chat-showing-detail) > .chat-page-heading { display: none; }
  .chat-back.secondary { display: inline-flex; min-height: 44px; margin: 11px 13px 0; }
  .chat-inbox .inbox-filter { min-height: 44px; }
  .chat-inbox .thread-list { max-height: none; }
  .chat-contact { padding: 10px 13px; }
  .chat-back { align-self: flex-start; }
  .chat-detail .messages { min-height: clamp(17rem, 51dvh, 33rem); max-height: 58dvh; }
  .assistant-page .assistant-actions { position: static; }
  .assistant-page .assistant-side { grid-row: 2; }
}

@media (max-width: 410px) {
  .chat-contact { flex-wrap: wrap; }
  .assistant-page #assistant-test-form button { justify-self: stretch; }
}