/* Shared layout constraints: keep wide content inside its own panel. */
:root { --portal-topbar-height: 80px; }
html { -webkit-text-size-adjust: 100%; }
.content, .view, .card, .form-grid > *, .settings-grid > *, .dashboard-grid > *,
.calendar-fields, .calendar-form-grid > *, .integration-title > div,
.hero > div, .section-heading > div, .agent-card, .knowledge-item > div { min-width: 0; }
.view { overflow-wrap: anywhere; }
.content { flex: 1; }
.settings-grid, .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid, .calendar-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ai-credentials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sidebar { z-index: 30; overflow-y: auto; overscroll-behavior: contain; }
.sidebar-backdrop, .sidebar-close, .inbox-back { display: none; }
.sidebar-actions { display: grid; gap: 8px; margin: 12px 4px; }
.sidebar-actions:empty { display: none; }
.sidebar-actions button { text-align: left; margin: 0; box-shadow: none; }
.topbar { gap: 12px; }
.top-actions { gap: 8px; }
.hero, .section-heading, .toolbar, .card-head, .sql-card, .modal-actions { flex-wrap: wrap; }
.toolbar .search { flex: 1 1 240px; width: auto; min-width: 0; }
.toolbar select { min-height: 44px; flex: 0 1 210px; max-width: 100%; }
.settings-form input, .settings-form select, .settings-form textarea,
.form-grid input, .form-grid select, .form-grid textarea { min-width: 0; max-width: 100%; width: 100%; }
.settings-form select { min-height: 44px; }
.settings-form .alert-toggle { flex-direction: row; align-items: flex-start; }
.settings-form input[type="checkbox"], .form-grid input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; }
.form-grid fieldset { min-width: 0; flex-wrap: wrap; gap: 12px; }
.integration-title { flex-wrap: wrap; }
.integration-title > div { flex: 1 1 150px; }
.integration-icon { flex: 0 0 38px; }
.status-pill { max-width: 100%; }
.table-card { max-width: 100%; overscroll-behavior-x: contain; }
.table-card:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #9488ff; outline-offset: 3px; }
dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); max-width: calc(100% - 24px); overflow-y: auto; overscroll-behavior: contain; }
.modal-card.compact { width: 100%; }
.modal-heading { padding-right: 22px; }
.modal-card .form-grid { margin-top: 20px; }
#agentConfigModal, #agentConfigModal .modal-card { max-height: calc(100dvh - 24px); }
.toast { max-width: calc(100% - 32px); overflow-wrap: anywhere; bottom: max(16px, env(safe-area-inset-bottom)); }
.notification-item { grid-template-columns: 30px minmax(0, 1fr) auto; }
.notification-item p { max-width: 100%; }
.agent-status, .activity-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.conversation { grid-template-columns: 36px minmax(0, 1fr) auto; }
.conversation > div { min-width: 0; }
.conversation strong { display: block; overflow-wrap: anywhere; }
.conversation p { width: auto; }
.human-alert-chip, .chat-human-alert { max-width: 100%; }
#inboxView.active { height: calc(100dvh - var(--portal-topbar-height)); }
#inboxView .inbox-layout { grid-template-columns: 288px minmax(0, 1fr); }
#inboxView .conversation-list { display: flex; }
.chat-toolbar { min-width: 0; background: #fff; }
#chatHead > div:not(.avatar) { flex: 1 1 140px; min-width: 0; }
#liveMessages .message { max-width: 82%; font-size: 1rem; line-height: 1.5; }
#chatHead strong, .conversation strong { font-size: 14px; }
.chat-control-button { min-height: 44px; line-height: 1.3; white-space: normal; }
.chat-input input { font-size: 16px; }
.chat-input button { min-width: 44px; min-height: 44px; flex: 0 0 44px; }

/* Tablets: reclaim sidebar space while retaining a two-pane inbox. */
@media (max-width: 1180px) {
  :root { --portal-topbar-height: 64px; }
  .content { width: 100%; margin-left: 0; }
  .sidebar { transform: translateX(-100%); width: min(300px, calc(100vw - 48px)); padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); visibility: hidden; }
  .sidebar.open { transform: translateX(0); visibility: visible; }
  .sidebar .brand { padding-right: 32px; }
  .sidebar-close { display: grid; place-items: center; position: absolute; right: 8px; top: 12px; width: 44px; height: 44px; border: 0; border-radius: 8px; background: #333650; color: #fff; font-size: 26px; }
  .sidebar-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 29; background: #171a32a6; border: 0; }
  body.menu-open { overflow: hidden; }
  .mobile-menu { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; background: #f0eeff; color: #5c4fd3; border: 0; border-radius: 8px; font-size: 22px; }
  .nav-item { min-height: 48px; }
  .topbar { height: 64px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .top-actions { margin-left: auto; }
  .top-actions .help, .top-actions .notification { display: block; width: 44px; height: 44px; }
  .view { padding: 24px max(24px, env(safe-area-inset-right)) 32px max(24px, env(safe-area-inset-left)); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #inboxView.active { height: calc(100dvh - var(--portal-topbar-height)); padding: 16px 20px; }
  #inboxView .inbox-layout { grid-template-columns: 270px minmax(0, 1fr); }
  #inboxView .section-heading { margin-bottom: 14px; }
  #inboxView .section-heading h1 { font-size: 24px; }
  #chatHead { padding: 12px; gap: 8px; }
  #liveMessages { padding: 16px; }
  #inboxView .chat-input { padding: 12px; }
  .settings-form label, .form-grid > label, .calendar-connection-note { font-size: 14px; }
  .settings-form input, .settings-form select, .settings-form textarea,
  .form-grid input, .form-grid select, .form-grid textarea,
  #calendarView .calendar-settings select, #calendarView .calendar-settings input,
  .search input, .toolbar select, .inbox-business-filter { font-size: 16px; }
  input:not([type="checkbox"]), select, .save-button, .new-agent, .cancel,
  .calendar-connect-button, .download-link { min-height: 44px; }
  .close { min-width: 44px; min-height: 44px; top: 4px; right: 4px; }
  .form-note { font-size: 13px !important; }
  .alert-toggle strong { font-size: 14px; }
  .alert-toggle small { font-size: 13px; }
  .inbox-business-filter { width: 100%; max-width: 100%; height: 44px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .settings-grid, .analytics-grid { grid-template-columns: minmax(0, 1fr); }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .usage-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: show the list first, then a full-width chat with an explicit way back. */
@media (max-width: 700px) {
  .crumb { display: none; }
  .topbar { gap: 6px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .top-actions { gap: 4px; }
  .view { padding: 22px max(16px, env(safe-area-inset-right)) 28px max(16px, env(safe-area-inset-left)); }
  .hero, .section-heading { gap: 16px; margin-bottom: 20px; }
  .hero h1, .section-heading h1 { font-size: 25px; letter-spacing: -.6px; }
  .hero p:not(.eyebrow), .section-heading p:not(.eyebrow) { font-size: 14px; line-height: 1.5; }
  .dashboard-grid, .settings-grid, .analytics-grid, .agent-grid, .usage-summary,
  .form-grid, .calendar-form-grid, .ai-credentials-grid { grid-template-columns: minmax(0, 1fr); }
  .card, .agent-card { padding: 16px; }
  .card.table-card { padding: 0; }
  .toolbar { flex-direction: column; }
  .toolbar .search, .toolbar select { flex: none; width: 100%; }
  .metric-grid { gap: 10px; }
  .metric { padding: 14px; min-height: 168px; }
  .metric-icon { position: static; width: 28px; height: 28px; margin-bottom: 10px; }
  .metric > strong { font-size: 24px; }
  .metric > span { margin-bottom: 6px; }
  .metric small { font-size: 12px; }
  .agent-card-footer { gap: 8px; flex-wrap: wrap; }
  .calendar-settings .save-button, .calendar-connect-button { width: 100%; }
  .calendar-working-days { padding: 8px; min-width: 0; }
  .calendar-day-row { gap: 8px; padding: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #calendarView .calendar-day-check { grid-column: 1 / -1; }
  #calendarView .calendar-day-time input { padding: 6px; font-size: 16px; }
  .modal-card { padding: 24px 18px; }
  .modal-actions > button { flex: 1 1 140px; }
  .notification-item { gap: 8px; }
  .notification-item time { grid-column: 2; }
  .knowledge-builder { padding: 12px; }
  .knowledge-item__delete { width: 44px; height: 44px; }
  .toast { right: 16px; left: 16px; }
  #inboxView.active { height: calc(100dvh - var(--portal-topbar-height)); padding: 10px 10px max(10px, env(safe-area-inset-bottom)); }
  #inboxView .section-heading { margin-bottom: 10px; }
  #inboxView .section-heading .eyebrow, #inboxView .section-heading p:not(.eyebrow) { display: none; }
  #inboxView .section-heading h1 { font-size: 22px; margin: 0; }
  #inboxView .inbox-layout { padding: 0; grid-template-columns: minmax(0, 1fr); }
  #inboxView .conversation-list { display: flex; border-right: 0; }
  #inboxView .chat { display: none; }
  #inboxView.mobile-chat-open .conversation-list { display: none; }
  #inboxView.mobile-chat-open .chat { display: grid; }
  #inboxView.mobile-chat-open .section-heading { display: none; }
  #inboxView.mobile-chat-open .inbox-toolbar { display: none; }
  #inboxView.mobile-chat-open { grid-template-rows: minmax(0, 1fr); }
  .inbox-back { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: #5c4fd3; font: 600 14px/1.4 inherit; cursor: pointer; }
  #chatHead { flex-wrap: wrap; }
  .chat-control-button { margin-left: 0; }
  #liveMessages { padding: 12px; }
  #liveMessages .message { max-width: 92%; }
  #inboxView .chat-input { padding: 10px; gap: 8px; }
  .conversation { min-height: 78px; padding: 14px; }
  .conversation p { font-size: 13px; }
}
@media (max-width: 360px) {
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
  #logoutButton { padding: 10px; }
}
@media (max-width: 380px) {
  .calendar-day-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 500px) and (max-width: 1180px) {
  #inboxView .section-heading { display: none; }
  #inboxView.active { grid-template-rows: auto minmax(0, 1fr); padding-top: 6px; padding-bottom: 6px; }
  #inboxView.mobile-chat-open { grid-template-rows: minmax(0, 1fr); }
  #chatHead { padding: 4px 10px; }
  #chatHead p { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}
/* visualViewport also accounts for the phone's software keyboard. */
#inboxView.active { height: calc(var(--portal-viewport-height, 100dvh) - var(--portal-topbar-height)); }