/* ==========================================================================
   PluginChatBot App — production UI stability layer
   Loaded last and scoped to the authenticated app. This file intentionally
   contains visual-only overrides; it does not change API, auth, billing, data,
   Cloudflare, or database behaviour.
   ========================================================================== */

:root {
  --app-ui-red: #d92f24;
  --app-ui-red-hover: #bd281f;
  --app-ui-red-soft: rgba(217, 47, 36, 0.07);
  --app-ui-black: #111111;
  --app-ui-bg: #f7f6f3;
  --app-ui-surface: #ffffff;
  --app-ui-surface-soft: #faf9f6;
  --app-ui-line: rgba(17, 17, 17, 0.12);
  --app-ui-line-strong: rgba(17, 17, 17, 0.2);
  --app-ui-muted: rgba(17, 17, 17, 0.62);
  --app-ui-dim: rgba(17, 17, 17, 0.46);
  --app-ui-success: #16803c;
  --app-ui-success-soft: rgba(22, 128, 60, 0.08);
  --app-ui-warning: #a85f08;
  --app-ui-warning-soft: rgba(168, 95, 8, 0.09);
  --app-ui-danger: #b42318;
  --app-ui-radius-control: 10px;
  --app-ui-radius-card: 16px;
  --app-ui-shadow-card: 0 12px 32px rgba(17, 17, 17, 0.065);
  --app-ui-shadow-float: 0 24px 70px rgba(17, 17, 17, 0.16);
}

html { color-scheme: light !important; }
body { background: var(--app-ui-bg) !important; color: var(--app-ui-black) !important; }

.app {
  grid-template-columns: 228px minmax(0, 1fr) !important;
  background: var(--app-ui-bg) !important;
}
.app-main, .app-content { background: var(--app-ui-bg) !important; }
.app-content { scrollbar-gutter: stable; }

/* Shared surface hierarchy */
.app .card,
.app .app-settings-panel,
.app .embedded-settings-card,
.app .integration-launch-card,
.app .integration-panel,
.app .integration-template-card,
.app .app-template-card,
.app .app-template-create,
.app .playground-v2-editor,
.app .playground-v2-preview-card,
.app .playground-v2-checklist,
.app .training-card {
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-card) !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-black) !important;
  box-shadow: var(--app-ui-shadow-card) !important;
}
.app .card::before, .app .card::after,
.app .app-settings-panel::before, .app .app-settings-panel::after,
.app .app-template-card::before, .app .app-template-card::after,
.app .integration-launch-card::before, .app .integration-launch-card::after {
  display: none !important;
  content: none !important;
}
/* Keep template cards at their natural height so the "Build another template"
   card does not stretch to match a tall expanded card (which left large empty
   bands inside it). Each card top-aligns to its own content instead. */
.app .app-template-grid {
  align-items: start !important;
}
/* Keep the "Build another template" card content as a tight, vertically-centred
   group instead of spreading the icon/title/description across a tall min-height. */
.app .app-template-create {
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 26px 20px !important;
}
.app .card:hover,
.app .app-settings-panel:hover,
.app .app-template-card:hover,
.app .app-template-create:hover,
.app .integration-launch-card:hover {
  transform: none !important;
  border-color: rgba(217, 47, 36, 0.23) !important;
  background: var(--app-ui-surface) !important;
  box-shadow: 0 14px 38px rgba(17, 17, 17, 0.085) !important;
}

/* Sidebar */
.app .sb {
  position: relative !important;
  width: 228px !important;
  min-width: 228px !important;
  height: 100dvh !important;
  padding: 18px 14px 14px !important;
  background: #0b0b0b !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
.app .sb-logo {
  min-height: 48px !important;
  gap: 10px !important;
  padding: 4px 8px 12px !important;
  margin: 0 0 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}
.app .sb-logo img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  filter: none !important;
  box-shadow: none !important;
}
.app .sb-logo span {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
}
.app .sb-section {
  padding: 15px 10px 7px !important;
  color: rgba(255, 255, 255, 0.42) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.13em !important;
}
.app .sb-item {
  min-height: 40px !important;
  padding: 9px 10px !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: rgba(255, 255, 255, 0.66) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transform: none !important;
  box-shadow: none !important;
}
.app .sb-item svg { color: rgba(255, 255, 255, 0.54) !important; transform: none !important; }
.app .sb-item:hover {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  color: #ffffff !important;
}
.app .sb-item:hover svg { color: #ffffff !important; }
.app .sb-item.active {
  border-color: rgba(217, 47, 36, 0.52) !important;
  background: rgba(217, 47, 36, 0.17) !important;
  color: #ffffff !important;
  box-shadow: inset 3px 0 0 var(--app-ui-red) !important;
}
.app .sb-item.active svg { color: #ff756c !important; }
.app .sb-item .badge {
  min-width: 22px !important;
  padding: 2px 6px !important;
  border: 0 !important;
  background: var(--app-ui-red) !important;
  color: #ffffff !important;
}
.app .sb-footer { gap: 9px !important; padding-top: 12px !important; }
.app .sb-plan-card {
  padding: 11px !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}
.app .sb-plan-icon { background: rgba(217, 47, 36, 0.16) !important; color: #ff8178 !important; }
.app .sb-plan-action { min-height: 34px !important; border-color: var(--app-ui-red) !important; background: var(--app-ui-red) !important; }
.app .sb-plan-action:hover { background: var(--app-ui-red-hover) !important; }
.app .sb-status {
  padding: 12px 9px 3px !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.62) !important;
}

/* Topbar */
.app .tb {
  min-height: 68px !important;
  height: 68px !important;
  padding: 0 24px !important;
  gap: 14px !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 5px 18px rgba(17, 17, 17, 0.035) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  /* backdrop-filter makes the toolbar its own stacking context; raise it so its
     open dropdowns (workspace/profile/notifications) paint above page content. */
  position: relative !important;
  z-index: 50 !important;
}
.app .tb-workspace, .app .tb-search, .app .tb-icon, .app .tb-avatar, .app .tb-actions > .btn {
  min-height: 40px !important;
  height: 40px !important;
  border-radius: var(--app-ui-radius-control) !important;
}
.app .tb-workspace {
  min-width: 156px !important;
  border: 1px solid var(--app-ui-line) !important;
  background: #ffffff !important;
  color: var(--app-ui-black) !important;
  box-shadow: none !important;
}
/* Workspace switcher: hug the name + chevron together instead of pushing them
   to opposite edges of a fixed 170-190px pill (which left a large gap for short
   names like "test"). */
.app .app-workspace-button, .app .tb-workspace {
  min-width: 0 !important;
  width: auto !important;
  max-width: 220px !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 12px !important;
}
.app .app-workspace-button > span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app .app-workspace-button > svg, .app .app-workspace-button .icon { flex: 0 0 auto !important; }
.app .tb-search {
  max-width: 470px !important;
  padding: 0 13px !important;
  border: 1px solid var(--app-ui-line) !important;
  background: #ffffff !important;
  color: var(--app-ui-dim) !important;
  box-shadow: none !important;
}
.app .tb-search input { color: var(--app-ui-black) !important; }
.app .tb-search input::placeholder { color: var(--app-ui-dim) !important; }
.app .tb-icon {
  width: 40px !important;
  border: 1px solid var(--app-ui-line) !important;
  background: #ffffff !important;
  color: rgba(17, 17, 17, 0.64) !important;
  box-shadow: none !important;
}
.app .tb-icon:hover {
  border-color: rgba(217, 47, 36, 0.28) !important;
  background: var(--app-ui-red-soft) !important;
  color: var(--app-ui-red) !important;
}
.app .tb-avatar { width: 40px !important; background: var(--app-ui-red) !important; color: #ffffff !important; box-shadow: none !important; }
.app .app-workspace-dropdown, .app .app-profile-dropdown, .app .app-notification-dropdown {
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: var(--app-ui-black) !important;
  box-shadow: var(--app-ui-shadow-float) !important;
}

/* Page shell and headers */
.app .view {
  width: min(100%, 1440px) !important;
  max-width: 1440px !important;
  min-height: 100% !important;
  margin: 0 auto !important;
  padding: 28px 30px 44px !important;
  color: var(--app-ui-black) !important;
}
.app .view-head {
  min-height: 58px !important;
  align-items: flex-end !important;
  gap: 20px !important;
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
}
.app .view-head h1 {
  color: var(--app-ui-black) !important;
  font-size: clamp(24px, 2.3vw, 30px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
}
.app .view-head .sub { margin-top: 5px !important; color: var(--app-ui-muted) !important; font-size: 13px !important; }
.app .view-head-actions, .app .view-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 9px !important;
}

/* Buttons */
.app .btn {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 14px !important;
  gap: 7px !important;
  border: 1px solid transparent !important;
  border-radius: var(--app-ui-radius-control) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.app .btn-sm { min-height: 34px !important; height: 34px !important; padding: 0 11px !important; font-size: 11.5px !important; }
.app .btn-primary { border-color: var(--app-ui-red) !important; background: var(--app-ui-red) !important; color: #ffffff !important; }
.app .btn-primary:hover:not(:disabled) { border-color: var(--app-ui-red-hover) !important; background: var(--app-ui-red-hover) !important; }
.app .btn-secondary { border-color: var(--app-ui-line-strong) !important; background: #ffffff !important; color: var(--app-ui-black) !important; }
.app .btn-secondary:hover:not(:disabled) {
  border-color: rgba(217, 47, 36, 0.34) !important;
  background: var(--app-ui-red-soft) !important;
  color: var(--app-ui-red-hover) !important;
}
/* Tour dialogs are dark: on hover the faint-red bg let the dark dialog show
   through, leaving dark-red text unreadable. Use a solid red fill + white text. */
.app .app-tour-actions .btn-secondary:hover:not(:disabled),
.app .app-page-tour-actions .btn-secondary:hover:not(:disabled) {
  background: #D92F24 !important;
  border-color: #D92F24 !important;
  color: #FFFFFF !important;
}
.app .btn.danger, .app .app-danger-button {
  border-color: rgba(180, 35, 24, 0.24) !important;
  background: #ffffff !important;
  color: var(--app-ui-danger) !important;
}
.app .btn:disabled, .app button:disabled { opacity: 0.48 !important; box-shadow: none !important; }

/* Form controls */
.app .embedded-input, .app .field input, .app .field select, .app .field textarea,
.app .users-form-card input, .app .users-form-card select,
.app .users-modal input, .app .users-modal select,
.app .live-inbox-filters input, .app .live-inbox-filters select,
.app .live-detail-section select {
  min-height: 42px !important;
  border: 1px solid var(--app-ui-line-strong) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background-color: #ffffff !important;
  color: var(--app-ui-black) !important;
  box-shadow: none !important;
}
/* Conversations filter controls: soften the heavy pure-black text to a calm
   gray (keeps the red accent). The selected option reads red = "gray and red". */
.app .live-inbox-filters input,
.app .live-inbox-filters select,
.app .live-inbox-filters option {
  color: #565f6e !important;
}
.app .live-inbox-filters option:checked,
.app .live-inbox-filters option:hover {
  color: #D92F24 !important;
}
/* Custom filter dropdown (replaces native select so the selected-row highlight
   is a calm red tint instead of the browser's heavy dark-gray band). */
.app .inbox-select { position: relative !important; }
.app .inbox-select-trigger {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 9px 12px !important;
  border: 1px solid var(--app-ui-line-strong) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: #ffffff !important;
  color: #565f6e !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.app .inbox-select-trigger > span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app .inbox-select-caret { flex: 0 0 auto !important; color: #9aa1ac !important; transition: transform .16s ease !important; }
.app .inbox-select-trigger.is-open { border-color: rgba(217, 47, 36, 0.58) !important; }
.app .inbox-select-trigger.is-open .inbox-select-caret { transform: rotate(180deg) !important; color: #D92F24 !important; }
.app .inbox-select-trigger:hover { border-color: rgba(217, 47, 36, 0.4) !important; }
.app .inbox-select-menu {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 5px !important;
  background: #ffffff !important;
  border: 1px solid var(--app-ui-line-strong) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.14) !important;
}
.app .inbox-select-option {
  width: 100% !important;
  text-align: left !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #565f6e !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.app .inbox-select-option:hover { background: rgba(217, 47, 36, 0.08) !important; color: #D92F24 !important; }
.app .inbox-select-option.is-selected { background: rgba(217, 47, 36, 0.10) !important; color: #D92F24 !important; font-weight: 600 !important; }

/* App-wide native <select> arrow: the browser default caret was heavy and
   misaligned. Replace it with one small, gray, vertically-centred chevron so
   every dropdown on every page matches the custom inbox dropdown. */
.app select:not([multiple]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%239aa1ac'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px 14px !important;
  padding-right: 36px !important;
}
.app select::-ms-expand { display: none !important; }

/* Business inbox: All-chats/Human-support toggle, AI badge, visitor stats */
.app .live-inbox-modes { display: flex; gap: 6px; padding: 0 14px 10px; }
.app .live-inbox-modes button {
  flex: 1; padding: 7px 10px; border: 1px solid rgba(17,17,17,.13); border-radius: 9px;
  background: #ffffff; color: #565f6e; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.app .live-inbox-modes button.is-active { background: rgba(217,47,36,.10); color: #D92F24; border-color: rgba(217,47,36,.34); }
.app .live-inbox-ai-badge {
  display: inline-block; margin-left: 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .04em;
  color: #D92F24; background: rgba(217,47,36,.10); border-radius: 5px; padding: 1px 5px; vertical-align: middle;
}
.app .live-detail-stats { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.app .live-detail-stats > div { display: flex; flex-direction: column; }
.app .live-detail-stats b { font-size: 14px; font-weight: 700; color: #111111; }
.app .live-detail-stats span { font-size: 11px; color: rgba(17,17,17,.55); }
.app textarea.embedded-input, .app .field textarea { min-height: 102px !important; padding-top: 11px !important; }
.app .embedded-input::placeholder, .app .field input::placeholder, .app .field textarea::placeholder { color: var(--app-ui-dim) !important; }
.app .embedded-input:focus, .app .field input:focus, .app .field select:focus, .app .field textarea:focus,
.app .users-form-card input:focus, .app .users-form-card select:focus, .app .users-modal input:focus, .app .users-modal select:focus {
  border-color: rgba(217, 47, 36, 0.58) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(217, 47, 36, 0.11) !important;
}
.app .field > span, .app .embedded-form-row > span, .app .embedded-toggle-row strong,
.app .playground-v2-field > span, .app .playground-v2-toggle > span { color: var(--app-ui-black) !important; font-weight: 700 !important; }
.app .field small, .app .embedded-form-row small, .app .embedded-toggle-row span, .app .playground-v2-field small { color: var(--app-ui-muted) !important; }
.app .embedded-toggle { border: 1px solid rgba(17, 17, 17, 0.16) !important; background: #d9d9d9 !important; box-shadow: none !important; }
.app .embedded-toggle.is-on { border-color: var(--app-ui-red) !important; background: var(--app-ui-red) !important; }

/* Badges and statuses */
.app .pill, .app .role-pill {
  min-height: 26px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}
.app .pill.success, .app .pill.ok {
  border-color: rgba(22, 128, 60, 0.22) !important;
  background: var(--app-ui-success-soft) !important;
  color: var(--app-ui-success) !important;
}
.app .pill.warn { border-color: rgba(168, 95, 8, 0.22) !important; background: var(--app-ui-warning-soft) !important; color: var(--app-ui-warning) !important; }
.app .pill.dim { border-color: var(--app-ui-line) !important; background: var(--app-ui-surface-soft) !important; color: var(--app-ui-muted) !important; }

/* Tables */
.app .app-table-scroll {
  max-width: 100% !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 13px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
.app .app-table-scroll table { width: 100% !important; border-spacing: 0 !important; }
.app .app-table-scroll table thead tr, .app .view .app-table-scroll table thead tr {
  background: var(--app-ui-surface-soft) !important;
  border-bottom-color: var(--app-ui-line) !important;
}
.app .app-table-scroll table thead th, .app .view .app-table-scroll table thead th, .app .users-table th {
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
  background: var(--app-ui-surface-soft) !important;
  color: rgba(17, 17, 17, 0.62) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
}
.app .app-table-scroll table tbody td, .app .users-table td {
  padding: 13px 12px !important;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
  color: var(--app-ui-black) !important;
  vertical-align: middle !important;
}
.app .app-table-scroll table tbody tr:hover, .app .users-table tbody tr:hover { background: rgba(217, 47, 36, 0.025) !important; }

/* Dashboard */
.app .dashboard-view .view-head { margin-bottom: 20px !important; }
.app .dashboard-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 18px !important; }
.app .dashboard-kpi-card {
  min-height: 132px !important;
  padding: 19px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.app .dashboard-kpi-card .kpi-label { margin: 0 0 7px !important; color: var(--app-ui-muted) !important; font-size: 11.5px !important; font-weight: 700 !important; }
.app .dashboard-kpi-card .kpi-value { margin: 0 0 7px !important; color: var(--app-ui-black) !important; font-size: clamp(25px, 2.1vw, 31px) !important; }
.app .dashboard-kpi-card .kpi-delta { color: var(--app-ui-muted) !important; font-size: 11px !important; font-weight: 700 !important; }
.app .dashboard-kpi-card .kpi-delta.up { color: var(--app-ui-red) !important; }
.app .dashboard-grid { display: grid !important; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 0.95fr) !important; gap: 16px !important; }
.app .dashboard-grid > .card { min-height: 320px !important; padding: 20px !important; }
.app .dashboard-card-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 18px !important; }
.app .dashboard-card-head h2 { margin: 0 !important; color: var(--app-ui-black) !important; font-size: 14px !important; font-weight: 800 !important; }
.app .dashboard-card-head span { color: var(--app-ui-dim) !important; font-size: 11px !important; }
.app .dashboard-chart {
  height: 220px !important;
  display: flex !important;
  align-items: flex-end !important;
  gap: 12px !important;
  padding: 18px 8px 0 !important;
  border-top: 1px solid rgba(17, 17, 17, 0.07) !important;
  background-image: linear-gradient(to top, rgba(17, 17, 17, 0.045) 1px, transparent 1px) !important;
  background-size: 100% 25% !important;
}
.app .dashboard-chart-column { height: 100% !important; min-width: 0 !important; flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: center !important; gap: 8px !important; }
.app .dashboard-chart-bar {
  width: min(100%, 42px) !important;
  min-height: 8px !important;
  border-radius: 8px 8px 3px 3px !important;
  background: linear-gradient(180deg, #ef5c52, var(--app-ui-red)) !important;
  box-shadow: 0 8px 18px rgba(217, 47, 36, 0.13) !important;
}
.app .dashboard-chart-column > span { color: var(--app-ui-dim) !important; font-size: 10.5px !important; font-weight: 700 !important; }
.app .dashboard-question-list { border-top: 1px solid rgba(17, 17, 17, 0.07) !important; }
.app .dashboard-question-row { min-height: 44px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 12px !important; padding: 10px 0 !important; border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important; }
.app .dashboard-question-row > span { min-width: 0 !important; overflow: hidden !important; color: var(--app-ui-black) !important; font-size: 12.5px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app .dashboard-question-row > strong { color: var(--app-ui-muted) !important; font-family: var(--pc-font-mono) !important; font-size: 11px !important; }

/* Users */
.app .users-layout { grid-template-columns: minmax(340px, 0.86fr) minmax(0, 1.64fr) !important; align-items: start !important; gap: 20px !important; }
.app .users-form-card, .app .users-table-card { min-width: 0 !important; padding: 20px !important; overflow: hidden !important; }
.app .users-card-head { margin-bottom: 17px !important; padding-bottom: 14px !important; border-bottom: 1px solid var(--app-ui-line) !important; }
.app .users-card-head h2 { color: var(--app-ui-black) !important; font-size: 18px !important; }
.app .users-card-head p { color: var(--app-ui-muted) !important; }
.app .workspace-picker {
  margin-top: 16px !important;
  padding: 14px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 12px !important;
  background: var(--app-ui-surface-soft) !important;
}
.app .workspace-picker-head { align-items: center !important; gap: 10px !important; }
.app .workspace-picker-head > div { color: var(--app-ui-black) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; }
.app .workspace-picker-head > span { color: var(--app-ui-dim) !important; font-size: 10px !important; font-weight: 800 !important; }
.app .workspace-picker > p { margin: 4px 0 10px !important; color: var(--app-ui-muted) !important; font-size: 11px !important; }
.app .workspace-option-list { max-height: 260px !important; overflow-y: auto !important; border: 1px solid var(--app-ui-line) !important; border-radius: 10px !important; background: #ffffff !important; }
.app .workspace-option { min-height: 58px !important; padding: 10px 11px !important; gap: 10px !important; border: 0 !important; border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; }
.app .workspace-option:last-child { border-bottom: 0 !important; }
.app .workspace-option:hover { background: rgba(217, 47, 36, 0.035) !important; }
.app .workspace-option input { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; }
.app .workspace-option-title { color: var(--app-ui-black) !important; font-size: 12px !important; font-weight: 750 !important; }
.app .workspace-option-meta { color: var(--app-ui-muted) !important; font-size: 10.5px !important; }
.app .workspace-option-meta small { padding: 2px 6px !important; border-radius: 999px !important; background: #eeeeec !important; color: rgba(17, 17, 17, 0.66) !important; }
.app .users-actions-row { margin-top: 14px !important; }
.app .users-table-wrap { overflow-x: auto !important; }
.app .users-table { min-width: 680px !important; table-layout: auto !important; }
.app .users-table th:nth-child(1) { width: 23%; }
.app .users-table th:nth-child(2) { width: 12%; }
.app .users-table th:nth-child(3) { width: 31%; }
.app .users-table th:nth-child(4) { width: 12%; }
.app .users-table th:nth-child(5) { width: 22%; }
.app .users-name { color: var(--app-ui-black) !important; font-weight: 750 !important; }
.app .users-email { color: var(--app-ui-muted) !important; }
.app .role-pill.owner { border-color: var(--app-ui-black) !important; background: var(--app-ui-black) !important; color: #ffffff !important; }
.app .role-pill.admin { border-color: rgba(217, 47, 36, 0.2) !important; background: var(--app-ui-red-soft) !important; color: var(--app-ui-red-hover) !important; }
.app .role-pill.user { border-color: var(--app-ui-line) !important; background: var(--app-ui-surface-soft) !important; color: var(--app-ui-muted) !important; }
.app .workspace-summary { gap: 6px !important; }
.app .workspace-chip { padding: 6px 8px !important; border: 1px solid var(--app-ui-line) !important; border-radius: 9px !important; background: var(--app-ui-surface-soft) !important; color: var(--app-ui-black) !important; }
.app .workspace-chip small { color: var(--app-ui-muted) !important; }
.app .users-row-actions { justify-content: flex-end !important; gap: 7px !important; }
.app .users-modal-backdrop { background: rgba(17, 17, 17, 0.48) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; }
.app .users-modal { border: 1px solid var(--app-ui-line) !important; border-radius: 18px !important; background: #ffffff !important; color: var(--app-ui-black) !important; box-shadow: var(--app-ui-shadow-float) !important; }

/* Playground */
.app .playground-v2-shell {
  grid-template-columns: minmax(300px, 0.86fr) minmax(420px, 1.22fr) minmax(250px, 0.66fr) !important;
  align-items: stretch !important;
  gap: 18px !important;
}

.app .playground-v2-editor,
.app .playground-v2-preview-card,
.app .playground-v2-checklist {
  min-width: 0 !important;
  padding: 16px !important;
  overflow: hidden !important;
}

.app .playground-v2-editor {
  display: flex !important;
  flex-direction: column !important;
  min-height: 640px !important;
  max-height: calc(100dvh - 170px) !important;
}

/* Keep the template selector stacked. The shared builder row must not squeeze it. */
.app .embedded-form-row.playground-v2-picker {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
  margin: 10px 0 12px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}
.app .embedded-form-row.playground-v2-picker > * {
  grid-column: 1 !important;
  min-width: 0 !important;
}
.app .embedded-form-row.playground-v2-picker .embedded-input {
  width: 100% !important;
}

.app .playground-v2-editor-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-top: 14px !important;
  padding: 0 4px 4px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: transparent !important;
  scrollbar-gutter: stable !important;
}

.app .playground-v2-panel-head,
.app .playground-v2-preview-head {
  min-height: 48px !important;
  padding-bottom: 13px !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
}
.app .playground-v2-panel-head h2,
.app .playground-v2-preview-head h2 {
  color: var(--app-ui-black) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}
.app .playground-v2-panel-head span:not(.icon-chip),
.app .playground-v2-preview-head .eyebrow {
  color: var(--app-ui-muted) !important;
}

.app .playground-v2-editor-section {
  margin-top: 12px !important;
  margin-bottom: 14px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}
.app .playground-v2-editor-section-head {
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
  background: var(--app-ui-surface-soft) !important;
}
.app .playground-v2-editor-section-body {
  padding: 12px !important;
}
.app .playground-v2-field,
.app .playground-v2-toggle {
  gap: 7px !important;
  margin-bottom: 12px !important;
}
.app .playground-v2-color-row input[type="color"] {
  width: 44px !important;
  height: 42px !important;
  padding: 4px !important;
  border: 1px solid var(--app-ui-line-strong) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
}

.app .playground-v2-preview-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 640px !important;
  max-height: calc(100dvh - 170px) !important;
  padding-bottom: 16px !important;
}
.app .playground-v2-preview-head {
  flex: 0 0 auto !important;
}
.app .playground-v2-preview-note {
  flex: 0 0 auto !important;
  margin: 12px 0 !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 10px !important;
  background: var(--app-ui-surface-soft) !important;
  color: var(--app-ui-muted) !important;
}
.app .playground-v2-widget-stage {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    var(--app-ui-surface-soft) !important;
  background-size: 24px 24px !important;
  overscroll-behavior: contain !important;
}
.app .playground-v2-widget-stage.is-empty {
  min-height: 520px !important;
}
.app .playground-v2-preview-actions,
.app .playground-v2-editor-actions {
  flex: 0 0 auto !important;
  gap: 8px !important;
}

.app .playground-v2-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  max-height: calc(100dvh - 170px) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}
.app .playground-v2-summary-grid {
  gap: 8px !important;
}
.app .playground-v2-summary-grid > div {
  min-width: 0 !important;
  padding: 10px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 10px !important;
  background: var(--app-ui-surface-soft) !important;
  box-shadow: none !important;
}
.app .playground-v2-summary-grid strong {
  overflow: hidden !important;
  color: var(--app-ui-black) !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.app .playground-v2-tool-state {
  min-height: 36px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: var(--app-ui-muted) !important;
  box-shadow: none !important;
}
.app .playground-v2-tool-state.is-active {
  border-color: rgba(22, 128, 60, 0.2) !important;
  background: var(--app-ui-success-soft) !important;
  color: var(--app-ui-success) !important;
}
.app .playground-v2-tool-state.is-active span,
.app .playground-v2-tool-state.is-active svg {
  color: var(--app-ui-success) !important;
}
.app .playground-v2-help-box {
  padding: 12px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 10px !important;
  background: var(--app-ui-surface-soft) !important;
  box-shadow: none !important;
}
.app .playground-v2-help-box strong {
  color: var(--app-ui-black) !important;
}
.app .playground-v2-help-box span {
  color: var(--app-ui-muted) !important;
}

/* AI Builder */
.app .ai-builder-section-stack { gap: 16px !important; }
.app .ai-builder-main-section { border: 1px solid var(--app-ui-line) !important; border-radius: var(--app-ui-radius-card) !important; background: #ffffff !important; box-shadow: var(--app-ui-shadow-card) !important; }
.app .ai-builder-main-summary, .app .app-settings-panel-summary { min-height: 66px !important; padding: 14px 17px !important; background: #ffffff !important; }
.app .ai-builder-main-summary:hover, .app .app-settings-panel-summary:hover { background: var(--app-ui-surface-soft) !important; }
.app .app-settings-panel-title, .app .app-settings-panel-summary h2, .app .app-settings-panel-summary h3 { color: var(--app-ui-black) !important; }
.app .app-settings-panel-toggle { border: 1px solid var(--app-ui-line) !important; background: #ffffff !important; color: var(--app-ui-red) !important; }
.app .ai-builder-main-body { gap: 18px !important; padding: 18px !important; border-top: 1px solid var(--app-ui-line) !important; background: var(--app-ui-surface-soft) !important; }
.app .app-settings-panel { box-shadow: none !important; }
.app .app-settings-panel-body { padding: 0 18px 18px !important; border-top: 1px solid var(--app-ui-line) !important; background: #ffffff !important; }
.app .widget-editor-grid.app-builder-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important; gap: 18px !important; }
.app .app-builder-preview { top: 88px !important; min-height: 600px !important; border: 1px solid var(--app-ui-line) !important; border-radius: 16px !important; background: #102416 !important; box-shadow: var(--app-ui-shadow-card) !important; }
.app .app-builder-preview::after { border-color: rgba(255, 255, 255, 0.16) !important; background: rgba(0, 0, 0, 0.58) !important; color: #ffffff !important; }
.app .embedded-form-row { grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1fr) !important; column-gap: 20px !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(17, 17, 17, 0.075) !important; }
.app .embedded-form-row:last-child { border-bottom: 0 !important; }
.app .embedded-color-row { display: grid !important; grid-template-columns: 46px minmax(0, 1fr) !important; align-items: center !important; gap: 9px !important; }
.app .embedded-color-row input[type="color"] { width: 46px !important; height: 42px !important; padding: 4px !important; border: 1px solid var(--app-ui-line-strong) !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: none !important; }
.app .customize-settings-grid { gap: 16px !important; }
.app .embedded-radio-grid label, .app .live-settings-options label { border: 1px solid var(--app-ui-line) !important; border-radius: 10px !important; background: var(--app-ui-surface-soft) !important; color: var(--app-ui-black) !important; }
.app .domain-list { border: 1px solid var(--app-ui-line) !important; border-radius: 10px !important; background: #ffffff !important; }
.app .domain-item { border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important; }

/* Knowledge Base */
.app .training-view.is-embedded { width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.app .training-embedded-toolbar { min-height: 0 !important; justify-content: flex-end !important; margin: 0 0 16px !important; padding: 0 0 14px !important; }
.app .training-layout { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.85fr) !important; align-items: start !important; gap: 18px !important; }
.app .training-primary, .app .training-secondary { min-width: 0 !important; gap: 16px !important; }
.app .training-card { padding: 18px !important; overflow: hidden !important; }
.app .training-card-heading, .app .training-files-head { gap: 11px !important; margin-bottom: 15px !important; padding-bottom: 13px !important; border-bottom: 1px solid var(--app-ui-line) !important; }
.app .training-card-heading h2, .app .training-files-head h2 { color: var(--app-ui-black) !important; font-size: 15px !important; font-weight: 800 !important; }
.app .training-card-heading p, .app .training-files-head p { color: var(--app-ui-muted) !important; }
.app .training-dropzone { min-height: 180px !important; border: 1px dashed rgba(17, 17, 17, 0.22) !important; border-radius: 13px !important; background: var(--app-ui-surface-soft) !important; color: var(--app-ui-black) !important; }
.app .training-dropzone:hover, .app .training-dropzone.is-dragging { border-color: rgba(217, 47, 36, 0.42) !important; background: var(--app-ui-red-soft) !important; }
.app .training-dropzone-icon, .app .training-file-icon, .app .icon-chip { border-color: rgba(217, 47, 36, 0.2) !important; background: var(--app-ui-red-soft) !important; color: var(--app-ui-red) !important; box-shadow: none !important; }
.app .training-files-tools { align-items: center !important; gap: 8px !important; }
.app .training-files-tools .embedded-input { min-width: 170px !important; }
.app .training-file-list { border: 1px solid var(--app-ui-line) !important; border-radius: 11px !important; overflow: hidden !important; }
.app .training-file-row { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: 11px !important; padding: 12px !important; border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important; background: #ffffff !important; }
.app .training-file-row:last-child { border-bottom: 0 !important; }
.app .training-file-copy > strong { color: var(--app-ui-black) !important; }
.app .training-file-copy > div { color: var(--app-ui-muted) !important; }
.app .training-toggle-row { min-height: 72px !important; padding: 14px 0 !important; border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important; }
.app .training-toggle-row strong { color: var(--app-ui-black) !important; }
.app .training-toggle-row p { color: var(--app-ui-muted) !important; }
.app .training-create-library { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 8px !important; }
.app .training-guidance, .app .training-technical-details { border: 1px solid var(--app-ui-line) !important; border-radius: 12px !important; background: var(--app-ui-surface-soft) !important; color: var(--app-ui-black) !important; box-shadow: none !important; }
.app .training-guidance p, .app .training-technical-details code { color: var(--app-ui-muted) !important; }

/* Other app pages */
.app .integration-launch-card h2, .app .integration-launch-card h3,
.app .app-template-card h2, .app .app-template-card h3,
.app .live-inbox-title strong, .app .live-thread-header strong { color: var(--app-ui-black) !important; }
.app .integration-launch-card p, .app .integration-launch-card small, .app .app-template-card p, .app .app-template-card small { color: var(--app-ui-muted) !important; }
.app .analytics-page .analytics-card, .app .analytics-page .analytics-panel { border-color: var(--app-ui-line) !important; box-shadow: var(--app-ui-shadow-card) !important; }

/* Responsive behaviour */
@media (max-width: 1320px) {
  .app .playground-v2-shell {
    grid-template-columns: minmax(300px, 0.92fr) minmax(420px, 1.18fr) !important;
  }
  .app .playground-v2-checklist {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 0.65fr) minmax(260px, 0.9fr) minmax(260px, 1fr) !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .app .playground-v2-checklist .playground-v2-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .app .playground-v2-shell {
    grid-template-columns: 1fr !important;
  }
  .app .playground-v2-editor,
  .app .playground-v2-preview-card,
  .app .playground-v2-checklist {
    max-height: none !important;
    min-height: 0 !important;
  }
  .app .playground-v2-editor-scroll {
    overflow-y: visible !important;
    scrollbar-gutter: auto !important;
  }
  .app .playground-v2-widget-stage {
    flex: 0 0 auto !important;
    height: 660px !important;
  }
  .app .playground-v2-checklist {
    grid-column: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }
}
@media (max-width: 1100px) {
  .app .dashboard-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app .users-layout, .app .training-layout, .app .widget-editor-grid.app-builder-grid { grid-template-columns: 1fr !important; }
  .app .app-builder-preview { position: relative !important; top: auto !important; }
}
@media (max-width: 900px) {
  .app { grid-template-columns: 82px minmax(0, 1fr) !important; }
  .app .sb { width: 82px !important; min-width: 82px !important; padding-inline: 10px !important; }
  .app .sb-logo { justify-content: center !important; }
  .app .sb-logo span, .app .sb-section, .app .sb-plan-card, .app .sb-status span:last-child { display: none !important; }
  .app .sb-item { justify-content: center !important; padding-inline: 8px !important; font-size: 0 !important; }
  .app .sb-item svg { width: 18px !important; height: 18px !important; }
  .app .sb-item .badge { position: absolute !important; top: 3px !important; right: 2px !important; font-size: 9px !important; }
  .app .dashboard-grid, .app .playground-v2-shell { grid-template-columns: 1fr !important; }
  .app .playground-v2-checklist { grid-column: auto !important; }
}
@media (max-width: 760px) {
  /* Mobile scroll: let the whole document scroll naturally (the desktop shell
     pins html/body/.app to 100dvh with overflow:hidden, which clips every page
     on mobile). The sidebar becomes a sticky top bar and scrolls with the page. */
  html, body, #root {
    height: auto !important;
    min-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .app {
    display: block !important;
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  /* Block layout on mobile: the shell's flex column collapses .app-content
     (flex:1 1 0%) to near-zero when the parent is content-height, so its
     content overflowed onto the topbar. Stack everything in normal flow. */
  .app-main {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .app-content,
  .app-content.is-conversations-view {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .app .sb {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 58px !important;
    padding: 8px 10px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  .app .sb-logo { flex: 0 0 auto !important; margin: 0 4px 0 0 !important; padding: 4px !important; border: 0 !important; }
  .app .sb > div:not(.sb-footer) { display: flex !important; flex: 0 0 auto !important; }
  .app .sb-footer { display: none !important; }
  .app .sb-item { width: auto !important; min-width: 42px !important; flex: 0 0 auto !important; }
  /* backdrop-filter removed so open dropdowns aren't trapped behind content. */
  .app .tb { height: auto !important; min-height: 0 !important; padding: 12px 14px !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 9px !important; position: relative !important; z-index: 60 !important; overflow: visible !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .app .app-workspace-menu, .app .app-profile-menu, .app .app-notification-menu { position: relative !important; z-index: 1000 !important; }
  .app .app-workspace-dropdown, .app .app-profile-dropdown, .app .app-notification-dropdown { z-index: 1000 !important; }
  .app .tb-search { grid-column: 1 / -1 !important; grid-row: 2 !important; width: 100% !important; max-width: none !important; }
  .app .tb-actions { width: auto !important; display: flex !important; grid-template-columns: none !important; }
  .app .tb-actions > .btn { width: auto !important; }
  .app .tb-actions .app-tour-trigger, .app .tb-actions .app-notification-menu { display: none !important; }
  .app .view { padding: 22px 14px 36px !important; }
  .app .view-head { align-items: stretch !important; flex-direction: column !important; }
  .app .view-head-actions, .app .view-actions { width: 100% !important; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app .view-head-actions .btn, .app .view-actions .btn { width: 100% !important; }
  .app .dashboard-kpi-grid, .app .dashboard-grid { grid-template-columns: 1fr !important; }
  .app .playground-v2-checklist .playground-v2-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .app .embedded-form-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  .app .embedded-form-row > .embedded-input, .app .embedded-form-row > .embedded-color-row,
  .app .embedded-form-row > .embedded-radio-grid, .app .embedded-form-row > .embedded-range-row,
  .app .embedded-form-row > .domain-list, .app .embedded-form-row > .domain-add-row,
  .app .embedded-form-row > div:not(:first-child), .app .embedded-form-row > small { grid-column: 1 !important; }
  .app .training-files-head, .app .training-files-tools { align-items: stretch !important; flex-direction: column !important; }
  .app .training-files-tools .embedded-input { width: 100% !important; }
}
@media (max-width: 620px) {
  .app .playground-v2-editor-actions,
  .app .playground-v2-preview-actions,
  .app .playground-v2-summary-grid,
  .app .playground-v2-checklist .playground-v2-summary-grid {
    grid-template-columns: 1fr !important;
  }
  .app .playground-v2-widget-stage {
    height: 620px !important;
  }
}

@media (max-width: 520px) {
  .app .view-head-actions, .app .view-actions, .app .playground-v2-summary-grid, .app .playground-v2-checklist .playground-v2-summary-grid { grid-template-columns: 1fr !important; }
  .app .dashboard-chart { gap: 7px !important; padding-inline: 0 !important; }
  .app .training-create-library, .app .domain-add-row { grid-template-columns: 1fr !important; }
}
/* ---- Leads: responsive table (desktop) + stacked cards (mobile) ---- */
.leads-card-view { display: none; }
.lead-card { padding: 16px !important; }
.lead-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.lead-card-avatar {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #D92F24, #7a1a14); color: #fff;
  font-weight: 700; font-size: 15px;
}
.lead-card-title { min-width: 0; flex: 1; }
.lead-card-name { font-size: 15px; font-weight: 600; color: #111111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-card-bot { font-size: 12px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-card-rows { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid #ECECEC; padding-top: 12px; }
.lead-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.lead-card-row > span { flex: 0 0 auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #98A2B3; }
.lead-card-row > b { min-width: 0; font-size: 13px; font-weight: 500; color: #1D2939; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 760px) {
  .leads-table-view { display: none !important; }
  .leads-card-view { display: grid !important; gap: 12px; }
}

/* ---- Conversations: single-pane mobile layout (list <-> thread) ---- */
.live-thread-back { display: none; }

@media (max-width: 760px) {
  /* Let the conversations page flow with the document like every other page. */
  .app-content.is-conversations-view { height: auto !important; min-height: 0 !important; overflow: visible !important; flex: none !important; }
  .live-inbox-shell {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  /* Default: show only the inbox list. */
  .live-inbox-list {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
  }
  .live-inbox-items { height: auto !important; max-height: none !important; overflow: visible !important; }
  .live-inbox-thread, .live-inbox-details { display: none !important; }

  /* When a conversation is open: full-screen chat (like WhatsApp/Messenger).
     The thread fills the viewport; the header is pinned at top, messages scroll
     internally (so it opens at the newest message), and the reply stays at the
     bottom. */
  .live-inbox-shell.is-thread-open .live-inbox-list { display: none !important; }
  .live-inbox-shell.is-thread-open .live-inbox-thread {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    border-right: 0 !important;
    background: #ffffff !important;
  }
  .live-inbox-shell.is-thread-open .live-thread-header { flex: 0 0 auto !important; }
  .live-inbox-shell.is-thread-open .live-thread-messages {
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
  .live-inbox-shell.is-thread-open .live-thread-reply,
  .live-inbox-shell.is-thread-open .live-inbox-thread > form,
  .live-inbox-shell.is-thread-open .live-inbox-thread > .live-thread-reply { flex: 0 0 auto !important; }

  /* Back-to-inbox button in the thread header. */
  .live-thread-header { align-items: center !important; gap: 10px !important; }
  .live-thread-back {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    flex: 0 0 auto; width: 36px; height: 36px;
    border: 1px solid var(--app-ui-line, rgba(17,17,17,.12)); border-radius: 10px;
    background: #ffffff; color: #111111; font-size: 20px; line-height: 1; cursor: pointer;
  }
  .live-thread-back:hover { background: #f5f5f5; }
  .live-thread-actions { flex-wrap: wrap !important; }
}

/* ---- Conversations thread header actions: inline on desktop, kebab menu on mobile ---- */
.live-thread-actions-wrap { display: flex; align-items: center; }
.live-thread-menu-btn { display: none; }

@media (max-width: 760px) {
  .live-inbox-shell.is-thread-open .live-thread-header { display: flex !important; align-items: center !important; gap: 10px !important; }
  .live-inbox-shell.is-thread-open .live-thread-header > div:not(.live-thread-actions-wrap) { flex: 1 1 auto !important; min-width: 0 !important; }
  .live-thread-actions-wrap { position: relative; flex: 0 0 auto; margin-left: auto; }
  .live-thread-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid var(--app-ui-line, rgba(17,17,17,.12)); border-radius: 10px;
    background: #ffffff; color: #111111; font-size: 22px; line-height: 1; cursor: pointer;
  }
  .live-thread-menu-btn:hover { background: #f5f5f5; }
  .live-inbox-shell.is-thread-open .live-thread-actions {
    display: none !important;
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    flex-direction: column; align-items: stretch; gap: 6px;
    min-width: 168px; padding: 8px; margin: 0;
    background: #ffffff; border: 1px solid var(--app-ui-line, rgba(17,17,17,.12));
    border-radius: 12px; box-shadow: 0 18px 50px rgba(17,17,17,.18);
  }
  .live-inbox-shell.is-thread-open .live-thread-actions.is-open { display: flex !important; }
  .live-inbox-shell.is-thread-open .live-thread-actions button {
    width: 100% !important; text-align: left !important; padding: 10px 12px !important; border-radius: 8px !important;
  }
}

/* Playground: fit the widget preview to the viewport on mobile instead of a
   fixed 620px, so the whole preview widget is visible without extra scrolling. */
@media (max-width: 760px) {
  .app .playground-v2-widget-stage {
    height: min(620px, calc(100dvh - 190px)) !important;
    min-height: 470px !important;
  }
  .app .playground-v2-preview-head,
  .app .playground-v2-editor-section-head,
  .app .playground-v2-panel-head { flex-wrap: wrap !important; gap: 8px !important; }
  .app .playground-v2-preview-actions,
  .app .playground-v2-editor-actions { width: 100% !important; }
}

/* Playground editor: on mobile the panel keeps overflow:hidden and the inner
   editor-scroll keeps overflow-y:auto, which traps/clips scrolling. Force the
   whole editor to flow with the page so the Template fields scroll normally. */
@media (max-width: 760px) {
  .app .playground-v2-editor,
  .app .playground-v2-preview-card,
  .app .playground-v2-checklist {
    overflow: visible !important;
    max-height: none !important;
    min-height: 0 !important;
  }
  .app .playground-v2-editor-scroll {
    overflow: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    overscroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ */
/* Integration modals polish (applies to every integration modal).     */
/* ------------------------------------------------------------------ */
/* Header icon: white glyph on solid brand red, matching the launch     */
/* cards — was a dark/red glyph on a faint tint and read poorly.        */
.app .integration-modal-icon {
  background: #D92F24 !important;
  color: #ffffff !important;
  border-color: #D92F24 !important;
}
.app .integration-modal-icon svg { color: #ffffff !important; }

/* A touch more breathing room on settings / integration form rows and  */
/* the modal body so the field list doesn't feel cramped.               */
.app .embedded-form-row { padding: 18px 0 !important; }
.app .integration-modal-scroll { padding: 24px !important; }
.app .embedded-settings-card { padding: 20px !important; }

/* ------------------------------------------------------------------ */
/* Workspace modal — replaces the native window.prompt / confirm for   */
/* create / rename / delete workspace with an in-app dialog.           */
/* ------------------------------------------------------------------ */
.pc-ws-modal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(8, 9, 12, 0.6);
  backdrop-filter: blur(3px);
  animation: pcWsFade 0.14s ease-out;
}
.pc-ws-modal {
  width: 100%; max-width: 440px;
  background: var(--pc-bg-card, #16181d);
  color: var(--pc-text, #f3f4f6);
  border: 1px solid var(--pc-border, #2a2d34);
  border-radius: var(--pc-radius-lg, 16px);
  box-shadow: var(--pc-shadow-elev, 0 24px 70px -20px rgba(0, 0, 0, 0.6));
  padding: 24px 24px 20px;
  font-family: var(--pc-font-sans, inherit);
  animation: pcWsPop 0.16s ease-out;
}
.pc-ws-modal-title { margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.pc-ws-modal-text { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--pc-text-muted, #9aa0aa); }
.pc-ws-modal-text strong { color: var(--pc-text, #f3f4f6); }
.pc-ws-modal-field { margin-bottom: 4px; }
.pc-ws-modal-label { display: block; margin: 0 0 7px; font-size: 12.5px; font-weight: 600; color: var(--pc-text-muted, #9aa0aa); }
.pc-ws-modal-input {
  width: 100%; padding: 11px 13px; font-size: 14px;
  color: var(--pc-text, #f3f4f6);
  background: var(--pc-bg, #0f1114);
  border: 1px solid var(--pc-border-strong, #3a3e46);
  border-radius: 10px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pc-ws-modal-input:focus {
  border-color: var(--pc-accent, #e5372e);
  box-shadow: 0 0 0 3px rgba(229, 55, 46, 0.22);
}
.pc-ws-modal-error { margin-top: 12px; font-size: 13px; color: var(--pc-danger, #f26d6d); }
.pc-ws-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.pc-ws-btn {
  padding: 9px 18px; border-radius: var(--pc-radius-pill, 999px);
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: filter 0.15s, background 0.15s;
}
.pc-ws-btn.ghost { background: transparent; border-color: var(--pc-border-strong, #3a3e46); color: var(--pc-text, #f3f4f6); }
.pc-ws-btn.ghost:hover { background: rgba(255, 255, 255, 0.05); }
.pc-ws-btn.primary { background: var(--pc-accent, #e5372e); color: #fff; }
.pc-ws-btn.danger { background: var(--pc-danger, #dc2626); color: #fff; }
.pc-ws-btn.primary:hover, .pc-ws-btn.danger:hover { filter: brightness(1.08); }
.pc-ws-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
@keyframes pcWsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcWsPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }


/* Playground preview on a short screen (laptops).
   The widget asks for a 520px floor while the preview card caps itself at
   calc(100dvh - 170px) and the stage clips whatever does not fit. On a laptop
   the viewport is roughly 700 to 800px tall, so the bottom of the widget, the
   message box and the Export and End chat row, was cut off and unreachable.
   It looks right on a desktop only because the viewport there is tall enough,
   and on a phone because the width rules below 980px already release the cap.

   Every existing breakpoint here is width based, so none of them catch this.
   Rather than pick a new fixed height, the floor is dropped so the widget
   takes exactly the height the stage has. The column is already a flex stack
   whose message list is the only flexible row, so the header, starters,
   support bar, message box and tools all stay visible and the list absorbs
   the difference. The note above the stage is tightened at the same time so
   the list keeps as much of that height as possible. */
@media (min-width: 981px) and (max-height: 940px) {
  .app .playground-test-widget {
    min-height: 0 !important;
  }
  .app .playground-v2-preview-note {
    margin: 8px 0 !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
}

/* Conversations list: text left over from the dark theme.
   styles.css still paints these for a dark panel, and the app is light, so
   they end up almost invisible. The error line is the worst of them: pale pink
   text (#fecaca) on a translucent dark red that becomes pale pink over white,
   which is about 1.3:1 and unreadable. The empty and placeholder lines are a
   bluish grey meant for a dark background, about 2.6:1 on white. Both are
   repainted here in the light palette and clear 5:1. */
.app .live-inbox-error {
  border-color: rgba(180, 35, 24, 0.24) !important;
  background: rgba(180, 35, 24, 0.06) !important;
  color: var(--app-ui-danger) !important;
}
.app .live-inbox-empty,
.app .live-inbox-placeholder {
  color: var(--app-ui-muted) !important;
}

/* Adding a domain only changes what is on screen; it reaches the server when
   the template is saved. This says so, and offers the save from the same spot,
   so the list cannot look saved when it is not. Warning colours, not danger:
   nothing has gone wrong, the change is just not stored yet. */
.app .domain-unsaved {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 10px !important;
  padding: 11px 13px !important;
  border: 1px solid rgba(168, 95, 8, 0.24) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-warning-soft) !important;
  color: var(--app-ui-warning) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}
.app .domain-unsaved > span { flex: 1 1 240px !important; min-width: 0 !important; }
.app .domain-unsaved strong { color: var(--app-ui-warning) !important; font-weight: 700 !important; }

/* =====================================================================
   Conversations inbox redesign
   Four zones: channel rail / conversation list / thread / customer panel.
   Everything here is scoped to .app and marked !important because this file
   is the last stylesheet loaded and has to win over styles.css (which still
   carries the old dark-theme inbox) and app-ui-refresh.css.
   ===================================================================== */

.app .live-inbox-shell {
  display: grid !important;
  grid-template-columns: 68px 336px minmax(380px, 1fr) 320px !important;
  grid-template-rows: minmax(0, 1fr) !important;
  height: 100% !important;
  min-height: 620px !important;
  background: var(--app-ui-bg) !important;
  color: var(--app-ui-black) !important;
  border-top: 1px solid var(--app-ui-line) !important;
}
.app .live-inbox-list,
.app .live-inbox-thread,
.app .live-inbox-details {
  min-width: 0 !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-black) !important;
}

/* ---- Channel rail ---- */
.app .inbox-rail {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 14px 0 !important;
  background: var(--app-ui-surface-soft) !important;
  border-right: 1px solid var(--app-ui-line) !important;
  overflow: auto !important;
}
.app .inbox-rail-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 46px !important;
  height: 46px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  color: var(--app-ui-muted) !important;
  cursor: pointer !important;
  transition: background .16s ease, color .16s ease !important;
}
.app .inbox-rail-item:hover { background: rgba(17, 17, 17, .055) !important; color: var(--app-ui-black) !important; }
.app .inbox-rail-item.is-active { background: var(--app-ui-red-soft) !important; color: var(--app-ui-red) !important; }
.app .inbox-rail-item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: -14px !important;
  top: 11px !important;
  bottom: 11px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: var(--app-ui-red) !important;
}
.app .inbox-rail-icon { display: inline-flex !important; align-items: center !important; }
/* The label is a tooltip on the vertical rail and becomes real text once the
   rail turns horizontal on narrow screens. */
.app .inbox-rail-label {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}
.app .inbox-rail-count {
  position: absolute !important;
  top: 3px !important;
  right: 1px !important;
  min-width: 17px !important;
  padding: 0 4px !important;
  border-radius: 999px !important;
  background: var(--app-ui-red) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 17px !important;
  text-align: center !important;
}
.app .inbox-channel-mark { display: block !important; object-fit: contain !important; border-radius: 3px !important; }

/* ---- List column ---- */
.app .live-inbox-list {
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid var(--app-ui-line) !important;
}
.app .live-inbox-title {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 18px 16px 10px !important;
  border-bottom: 0 !important;
}
.app .live-inbox-title h2 { margin: 0 0 2px !important; font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
.app .live-inbox-title p { margin: 0 !important; font-size: 12px !important; color: var(--app-ui-dim) !important; }
.app .live-inbox-title .icon-button {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important; width: 32px !important; height: 32px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-muted) !important;
  cursor: pointer !important;
}
.app .live-inbox-title .icon-button:hover { color: var(--app-ui-red) !important; border-color: rgba(217, 47, 36, .4) !important; }

.app .inbox-search {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 16px 12px !important;
  padding: 0 10px !important;
  height: 40px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface-soft) !important;
  color: var(--app-ui-dim) !important;
}
.app .inbox-search:focus-within { border-color: rgba(217, 47, 36, .55) !important; background: var(--app-ui-surface) !important; }
.app .inbox-search input {
  flex: 1 1 auto !important; min-width: 0 !important;
  border: 0 !important; background: transparent !important; outline: none !important;
  padding: 0 !important; font-size: 13px !important; color: var(--app-ui-black) !important;
}
.app .inbox-search input::placeholder { color: var(--app-ui-dim) !important; }
.app .inbox-search-clear {
  flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important;
  width: 20px !important; height: 20px !important; justify-content: center !important;
  padding: 0 !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(17, 17, 17, .07) !important; color: var(--app-ui-muted) !important; cursor: pointer !important;
}

.app .inbox-tabs {
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  padding: 0 16px 12px !important;
}
.app .inbox-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  padding: 6px 11px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: 999px !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background .16s ease, color .16s ease, border-color .16s ease !important;
}
.app .inbox-tab:hover { border-color: var(--app-ui-line-strong) !important; color: var(--app-ui-black) !important; }
.app .inbox-tab.is-active {
  background: var(--app-ui-black) !important;
  border-color: var(--app-ui-black) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.app .inbox-tab-count {
  min-width: 17px !important; padding: 0 5px !important;
  border-radius: 999px !important;
  background: rgba(17, 17, 17, .08) !important;
  color: var(--app-ui-muted) !important;
  font-size: 10px !important; font-weight: 700 !important; line-height: 16px !important; text-align: center !important;
}
.app .inbox-tab.is-active .inbox-tab-count { background: rgba(255, 255, 255, .22) !important; color: #ffffff !important; }

.app .live-inbox-filters { flex: 0 0 auto !important; display: grid !important; gap: 8px !important; padding: 0 16px 12px !important; }

/* ---- List rows ---- */
/* One gutter down the whole column: the row content (avatar, name) lines up
   with the heading, the search box and the tabs at 16px, while the row
   highlight bleeds 10px wider on each side. The scrollbar is kept thin so a
   full list does not make the rows visibly narrower than the search box. */
.app .live-inbox-items {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 0 6px 12px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(17, 17, 17, .18) transparent !important;
}
.app .live-inbox-items::-webkit-scrollbar { width: 6px !important; }
.app .live-inbox-items::-webkit-scrollbar-track { background: transparent !important; }
.app .live-inbox-items::-webkit-scrollbar-thumb { background: rgba(17, 17, 17, .18) !important; border-radius: 999px !important; }
.app .live-inbox-item {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: start !important;
  width: 100% !important;
  padding: 11px 10px !important;
  margin: 0 0 2px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background .14s ease !important;
}
.app .live-inbox-item:hover { background: rgba(17, 17, 17, .04) !important; }
.app .live-inbox-item.is-active { background: var(--app-ui-red-soft) !important; box-shadow: none !important; }
.app .live-inbox-item.is-active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; top: 12px !important; bottom: 12px !important;
  width: 3px !important; border-radius: 999px !important;
  background: var(--app-ui-red) !important;
}
.app .live-inbox-avatar {
  position: relative !important;
  width: 40px !important; height: 40px !important;
  border-radius: 13px !important;
  display: grid !important; place-items: center !important;
  background: var(--app-ui-black) !important;
  color: #ffffff !important;
  font-size: 15px !important; font-weight: 700 !important;
  overflow: visible !important;
}
.app .live-inbox-item.is-active .live-inbox-avatar { background: var(--app-ui-red) !important; }
.app .live-inbox-avatar-channel {
  position: absolute !important;
  right: -3px !important; bottom: -3px !important;
  display: grid !important; place-items: center !important;
  width: 18px !important; height: 18px !important;
  border-radius: 999px !important;
  background: var(--app-ui-surface) !important;
  border: 1px solid var(--app-ui-line) !important;
  color: var(--app-ui-muted) !important;
}
.app .live-inbox-item-copy { min-width: 0 !important; }
.app .live-inbox-item-copy strong {
  display: flex !important; align-items: baseline !important; justify-content: space-between !important;
  gap: 8px !important; margin: 0 0 3px !important;
  font-size: 13px !important; font-weight: 600 !important; color: var(--app-ui-black) !important;
}
.app .live-inbox-item-name { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app .live-inbox-item-copy strong time { flex: 0 0 auto !important; font-size: 11px !important; font-weight: 500 !important; color: var(--app-ui-dim) !important; }
.app .live-inbox-item-copy small {
  display: block !important; margin: 0 0 6px !important;
  font-size: 12px !important; line-height: 1.4 !important; color: var(--app-ui-muted) !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.app .live-inbox-item-copy em {
  display: flex !important; align-items: center !important; gap: 5px !important;
  font-style: normal !important; white-space: normal !important; overflow: visible !important;
}
.app .live-inbox-item.is-unread .live-inbox-item-copy strong { font-weight: 700 !important; }
.app .live-inbox-item.is-unread .live-inbox-item-copy small { color: var(--app-ui-black) !important; }
.app .live-inbox-item-unread {
  margin-left: auto !important;
  min-width: 18px !important; padding: 0 5px !important;
  border-radius: 999px !important;
  background: var(--app-ui-red) !important; color: #ffffff !important;
  font-size: 10px !important; font-weight: 700 !important; line-height: 18px !important; text-align: center !important;
}

/* Status chips, shared by the list and the customer panel. */
.app .inbox-chip {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(17, 17, 17, .06) !important;
  color: var(--app-ui-muted) !important;
  font-size: 11px !important; font-weight: 500 !important; line-height: 1.5 !important;
  white-space: nowrap !important;
}
.app .inbox-chip.is-ai { background: var(--app-ui-red-soft) !important; color: var(--app-ui-red) !important; }
.app .inbox-chip.is-needs_human { background: var(--app-ui-warning-soft) !important; color: var(--app-ui-warning) !important; }
.app .inbox-chip.is-assigned { background: var(--app-ui-success-soft) !important; color: var(--app-ui-success) !important; }
.app .inbox-chip.is-escalated { background: var(--app-ui-warning-soft) !important; color: var(--app-ui-warning) !important; font-weight: 600 !important; }

/* ---- Empty states ---- */
.app .inbox-empty {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  gap: 6px !important; padding: 46px 24px !important; text-align: center !important;
}
.app .inbox-empty.is-placeholder { margin: auto !important; }
.app .inbox-empty-icon {
  display: grid !important; place-items: center !important;
  width: 44px !important; height: 44px !important; margin-bottom: 4px !important;
  border-radius: 14px !important;
  background: var(--app-ui-red-soft) !important; color: var(--app-ui-red) !important;
}
.app .inbox-empty strong { font-size: 14px !important; font-weight: 600 !important; color: var(--app-ui-black) !important; }
.app .inbox-empty p { margin: 0 !important; max-width: 260px !important; font-size: 12px !important; line-height: 1.5 !important; color: var(--app-ui-muted) !important; }

/* ---- Thread ---- */
.app .live-inbox-thread {
  display: flex !important; flex-direction: column !important;
  border-right: 1px solid var(--app-ui-line) !important;
  background: var(--app-ui-surface-soft) !important;
}
.app .live-thread-header {
  display: flex !important; align-items: center !important; gap: 11px !important;
  flex: 0 0 auto !important;
  padding: 12px 16px !important;
  background: var(--app-ui-surface) !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
}
.app .live-thread-header > div:not(.live-thread-tools):not(.live-thread-actions-wrap):not(.live-thread-actions-bar) { flex: 1 1 auto !important; min-width: 0 !important; }
.app .live-thread-header strong { display: block !important; margin: 0 0 1px !important; font-size: 14px !important; font-weight: 600 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app .live-thread-header > div > span { display: block !important; margin: 0 !important; font-size: 12px !important; color: var(--app-ui-dim) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app .live-thread-avatar {
  position: relative !important; flex: 0 0 auto !important;
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important; display: grid !important; place-items: center !important;
  background: var(--app-ui-red) !important; color: #ffffff !important;
  font-size: 15px !important; font-weight: 700 !important;
}
.app .live-thread-tools { display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; margin-left: auto !important; }
/* The kebab and its menu only exist below 1100px, where the inline action bar
   no longer fits. styles.css shows .live-thread-actions by default, so it has
   to be switched off here or both sets of buttons render at once. */
.app .live-thread-actions-wrap { display: none !important; }
.app .live-thread-actions { display: none !important; }
.app .live-thread-actions-bar { display: flex !important; align-items: center !important; gap: 6px !important; }
.app .live-thread-actions-bar button {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  height: 34px !important; padding: 0 11px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-muted) !important;
  font-size: 12px !important; font-weight: 500 !important; cursor: pointer !important;
  transition: color .16s ease, border-color .16s ease, background .16s ease !important;
}
.app .live-thread-actions-bar button:hover { color: var(--app-ui-black) !important; border-color: var(--app-ui-line-strong) !important; }
.app .live-thread-actions-bar button.is-danger { width: 34px !important; padding: 0 !important; justify-content: center !important; }
.app .live-thread-actions-bar button.is-danger:hover { color: var(--app-ui-danger) !important; border-color: rgba(180, 35, 24, .4) !important; background: rgba(180, 35, 24, .06) !important; }
.app .live-thread-actions-bar button:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.app .live-thread-details-btn,
.app .live-thread-menu-btn,
.app .live-thread-back {
  display: none !important;
  align-items: center !important; justify-content: center !important;
  flex: 0 0 auto !important; width: 34px !important; height: 34px !important; padding: 0 !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-muted) !important; cursor: pointer !important;
}
.app .live-thread-details-btn:hover,
.app .live-thread-menu-btn:hover,
.app .live-thread-back:hover { color: var(--app-ui-black) !important; border-color: var(--app-ui-line-strong) !important; }

.app .live-thread-messages { flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; padding: 20px 22px !important; background: var(--app-ui-surface-soft) !important; }
.app .live-thread-message { display: flex !important; width: 100% !important; margin: 0 0 12px !important; background: transparent !important; }
.app .live-thread-message.is-visitor { justify-content: flex-start !important; }
.app .live-thread-message.is-agent { justify-content: flex-end !important; }
.app .live-thread-bubble {
  display: inline-flex !important; flex-direction: column !important;
  width: fit-content !important; max-width: 74% !important;
  padding: 10px 13px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
}
.app .live-thread-message.is-visitor .live-thread-bubble {
  align-items: flex-start !important;
  border: 1px solid var(--app-ui-line) !important;
  border-bottom-left-radius: 5px !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-black) !important;
}
.app .live-thread-message.is-agent .live-thread-bubble {
  align-items: flex-end !important;
  border: 1px solid var(--app-ui-red) !important;
  border-bottom-right-radius: 5px !important;
  background: var(--app-ui-red) !important;
  color: #ffffff !important;
}
.app .live-thread-bubble span { display: block !important; white-space: pre-wrap !important; font-size: 13px !important; line-height: 1.5 !important; }
.app .live-thread-bubble time { display: block !important; margin-top: 5px !important; font-size: 10px !important; opacity: .66 !important; }

.app .live-thread-typing { display: flex !important; align-items: center !important; gap: 8px !important; padding: 2px 4px 8px !important; font-size: 12px !important; color: var(--app-ui-dim) !important; }

/* ---- Composer ---- */
.app .live-thread-reply {
  flex: 0 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 9px !important;
  padding: 12px 16px !important;
  background: var(--app-ui-surface) !important;
  border-top: 1px solid var(--app-ui-line) !important;
}
.app .live-thread-reply.is-template { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 9px !important; }
.app .live-thread-reply.is-notice {
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 9px !important;
  font-size: 12px !important; line-height: 1.55 !important; color: var(--app-ui-muted) !important;
}
.app .live-thread-reply.is-notice > svg { flex: 0 0 auto !important; color: var(--app-ui-dim) !important; }
.app .live-thread-window-banner {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 9px 11px !important;
  border: 1px solid rgba(168, 95, 8, .22) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-warning-soft) !important;
  color: var(--app-ui-warning) !important;
  font-size: 12px !important; line-height: 1.5 !important;
}
.app .live-thread-window-banner > svg { flex: 0 0 auto !important; }
.app .live-thread-template-preview { font-size: 12px !important; line-height: 1.5 !important; color: var(--app-ui-muted) !important; }
.app .live-thread-reply input,
.app .live-thread-reply select,
.app .live-thread-reply textarea {
  width: 100% !important; box-sizing: border-box !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface-soft) !important;
  color: var(--app-ui-black) !important;
  padding: 11px 13px !important; font-size: 13px !important; outline: none !important;
}
.app .live-thread-reply input:focus,
.app .live-thread-reply textarea:focus { border-color: rgba(217, 47, 36, .55) !important; background: var(--app-ui-surface) !important; }
.app .live-thread-reply button[type="submit"] {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important;
  border: 0 !important; border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-red) !important; color: #ffffff !important;
  padding: 0 18px !important; min-height: 42px !important;
  font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important;
}
.app .live-thread-reply button[type="submit"]:hover { background: var(--app-ui-red-hover) !important; }
.app .live-thread-reply button[type="submit"]:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* ---- Customer panel ---- */
.app .live-inbox-details {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  overflow-y: auto !important;
  border-left: 1px solid var(--app-ui-line) !important;
}
.app .live-detail-close-row { display: none !important; }
.app .live-detail-identity {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  padding: 24px 18px 18px !important; text-align: center !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
}
.app .live-detail-avatar {
  position: relative !important;
  width: 56px !important; height: 56px !important;
  border-radius: 18px !important; display: grid !important; place-items: center !important;
  background: var(--app-ui-red) !important; color: #ffffff !important;
  font-size: 21px !important; font-weight: 700 !important;
}
.app .live-detail-identity h3 { display: flex !important; align-items: center !important; gap: 7px !important; margin: 12px 0 2px !important; font-size: 16px !important; font-weight: 700 !important; }
.app .live-detail-identity p { margin: 0 !important; font-size: 12px !important; color: var(--app-ui-dim) !important; }
.app .live-detail-contact { display: flex !important; flex-direction: column !important; gap: 6px !important; width: 100% !important; margin-top: 14px !important; }
.app .live-detail-contact a,
.app .live-detail-contact > span {
  display: flex !important; align-items: center !important; gap: 8px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface-soft) !important;
  color: var(--app-ui-black) !important;
  font-size: 12px !important; text-decoration: none !important; text-align: left !important;
}
.app .live-detail-contact a > span,
.app .live-detail-contact > span > span { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.app .live-detail-contact a:hover { border-color: rgba(217, 47, 36, .4) !important; color: var(--app-ui-red) !important; }
.app .live-detail-contact > span.is-missing { color: var(--app-ui-dim) !important; background: transparent !important; border-style: dashed !important; }

.app .live-detail-section { padding: 16px 18px !important; margin: 0 !important; border-bottom: 1px solid var(--app-ui-line) !important; }
.app .live-detail-section:last-child { border-bottom: 0 !important; }
.app .live-detail-label {
  display: flex !important; align-items: center !important; gap: 5px !important;
  margin: 0 0 8px !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: .09em !important;
  text-transform: uppercase !important; color: var(--app-ui-dim) !important;
}
.app .live-detail-section p { margin: 0 !important; font-size: 12px !important; line-height: 1.55 !important; color: var(--app-ui-muted) !important; }
.app .live-detail-sub { margin-top: 6px !important; font-size: 11px !important; color: var(--app-ui-dim) !important; }
.app .live-detail-section.is-escalated { background: var(--app-ui-warning-soft) !important; }
.app .live-detail-section.is-escalated .live-detail-label { color: var(--app-ui-warning) !important; }
.app .live-detail-section.is-escalated p { color: var(--app-ui-warning) !important; }
.app .live-detail-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; }
.app .live-detail-heading .live-detail-label { margin: 0 !important; }
/* Regenerate is a quiet action beside the label, not a competing button. */
.app .live-detail-heading button {
  display: inline-flex !important; align-items: center !important; gap: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--app-ui-red) !important;
  font-size: 11px !important; font-weight: 600 !important; cursor: pointer !important;
}
.app .live-detail-heading button:hover { text-decoration: underline !important; }
.app .live-detail-heading button:disabled { opacity: .5 !important; cursor: not-allowed !important; }
.app .live-summary {
  margin-top: 10px !important; padding: 11px 12px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface-soft) !important;
  color: var(--app-ui-muted) !important;
  font-size: 12px !important; line-height: 1.6 !important; white-space: pre-wrap !important;
}
.app .live-detail-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 0 !important; }
.app .live-detail-stats > div { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.app .live-detail-stats b { font-size: 15px !important; font-weight: 700 !important; color: var(--app-ui-black) !important; }
.app .live-detail-stats span { font-size: 11px !important; color: var(--app-ui-dim) !important; }
.app .live-detail-rows { display: flex !important; flex-direction: column !important; gap: 9px !important; }
.app .live-detail-rows > div { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.app .live-detail-rows > div > span { font-size: 11px !important; color: var(--app-ui-dim) !important; }
.app .live-detail-rows > div > b { font-size: 12px !important; font-weight: 600 !important; color: var(--app-ui-black) !important; }
.app .live-detail-rows > div > a { font-size: 12px !important; color: var(--app-ui-red) !important; text-decoration: none !important; }
.app .live-detail-rows > div > a:hover { text-decoration: underline !important; }
.app .live-detail-break { overflow-wrap: anywhere !important; }
.app .live-status {
  display: inline-flex !important; align-items: center !important;
  margin: 0 !important; padding: 5px 11px !important;
  border-radius: 999px !important;
  background: rgba(17, 17, 17, .06) !important; color: var(--app-ui-muted) !important;
  font-size: 12px !important; font-weight: 500 !important;
}
.app .live-status.is-needs_human { background: var(--app-ui-warning-soft) !important; color: var(--app-ui-warning) !important; }
.app .live-status.is-assigned { background: var(--app-ui-success-soft) !important; color: var(--app-ui-success) !important; }
.app .live-status.is-closed { background: rgba(17, 17, 17, .06) !important; color: var(--app-ui-dim) !important; }
.app .live-inbox-error {
  margin: 0 16px 10px !important; padding: 9px 11px !important;
  border: 1px solid rgba(180, 35, 24, .3) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: rgba(180, 35, 24, .06) !important; color: var(--app-ui-danger) !important;
  font-size: 12px !important;
}
.app .inbox-details-backdrop { display: none !important; }

/* ---- 1180px: the customer panel becomes a slide-over, so it stays reachable
   on tablets instead of being hidden outright ---- */
@media (max-width: 1180px) {
  .app .live-inbox-shell { grid-template-columns: 68px 320px minmax(0, 1fr) !important; }
  .app .live-inbox-details {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important;
    z-index: 80 !important;
    width: min(380px, 92vw) !important;
    display: flex !important;
    transform: translateX(102%) !important;
    box-shadow: var(--app-ui-shadow-float) !important;
    transition: transform .22s ease !important;
  }
  .app .live-inbox-shell.is-details-open .live-inbox-details { transform: translateX(0) !important; }
  .app .inbox-details-backdrop {
    display: block !important;
    position: fixed !important; inset: 0 !important; z-index: 79 !important;
    background: rgba(17, 17, 17, .38) !important;
    opacity: 0 !important; pointer-events: none !important;
    transition: opacity .22s ease !important;
  }
  .app .live-inbox-shell.is-details-open .inbox-details-backdrop { opacity: 1 !important; pointer-events: auto !important; }
  .app .live-detail-close-row {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex: 0 0 auto !important; gap: 10px !important; padding: 14px 18px !important;
    border-bottom: 1px solid var(--app-ui-line) !important;
  }
  .app .live-detail-title { font-size: 14px !important; font-weight: 700 !important; }
  .app .live-detail-close {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 32px !important; height: 32px !important; padding: 0 !important;
    border: 1px solid var(--app-ui-line) !important; border-radius: var(--app-ui-radius-control) !important;
    background: var(--app-ui-surface) !important; color: var(--app-ui-muted) !important; cursor: pointer !important;
  }
  .app .live-thread-details-btn { display: inline-flex !important; }
}

/* ---- 1100px: thread actions collapse into the kebab menu ---- */
@media (max-width: 1100px) {
  .app .live-thread-actions-bar { display: none !important; }
  .app .live-thread-menu-btn { display: inline-flex !important; }
  .app .live-thread-actions-wrap { display: flex !important; align-items: center !important; position: relative !important; }
  .app .live-thread-actions {
    display: none !important;
    position: absolute !important; top: calc(100% + 8px) !important; right: 0 !important; z-index: 70 !important;
    flex-direction: column !important; align-items: stretch !important; gap: 4px !important;
    min-width: 172px !important; padding: 7px !important; margin: 0 !important;
    background: var(--app-ui-surface) !important;
    border: 1px solid var(--app-ui-line) !important;
    border-radius: 12px !important;
    box-shadow: var(--app-ui-shadow-float) !important;
  }
  .app .live-thread-actions.is-open { display: flex !important; }
  .app .live-thread-actions button {
    width: 100% !important; text-align: left !important;
    padding: 9px 11px !important; border: 0 !important; border-radius: 8px !important;
    background: transparent !important; color: var(--app-ui-black) !important;
    font-size: 13px !important; cursor: pointer !important;
  }
  .app .live-thread-actions button:hover { background: rgba(17, 17, 17, .05) !important; }
  .app .live-thread-actions button.is-danger { color: var(--app-ui-danger) !important; }
}

/* ---- 1024px: the channel rail turns into a horizontal strip with labels ---- */
@media (max-width: 1024px) {
  .app .live-inbox-shell {
    grid-template-columns: 300px minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  .app .inbox-rail {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    flex-direction: row !important; align-items: center !important;
    gap: 6px !important; padding: 10px 14px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--app-ui-line) !important;
    overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important;
  }
  .app .inbox-rail::-webkit-scrollbar { display: none !important; }
  .app .inbox-rail-item { width: auto !important; height: 36px !important; gap: 7px !important; padding: 0 12px !important; border-radius: 999px !important; }
  .app .inbox-rail-item.is-active::before { display: none !important; }
  .app .inbox-rail-label {
    position: static !important; width: auto !important; height: auto !important;
    margin: 0 !important; overflow: visible !important; clip: auto !important;
    font-size: 12px !important; font-weight: 500 !important;
  }
  .app .inbox-rail-count { position: static !important; margin-left: 2px !important; }
  .app .live-inbox-list { grid-column: 1 !important; grid-row: 2 !important; }
  .app .live-inbox-thread { grid-column: 2 !important; grid-row: 2 !important; }
}

/* ---- 760px: single pane. The existing list <-> thread swap earlier in this
   file still owns the layout; only the new rail and slide-over need placing. ---- */
@media (max-width: 760px) {
  .app .live-inbox-shell { display: block !important; }
  .app .live-inbox-shell.is-thread-open .inbox-rail { display: none !important; }
  /* The list-only default. These need the .app prefix: the plain-class rules
     earlier in this file are less specific than the .app rules above, so
     without it the thread would stay on screen under the list. */
  .app .live-inbox-list { display: flex !important; width: 100% !important; border-right: 0 !important; }
  .app .live-inbox-thread { display: none !important; }
  .app .live-inbox-items { height: auto !important; max-height: none !important; overflow: visible !important; }
  /* Conversation open: full-screen thread, list hidden. */
  .app .live-inbox-shell.is-thread-open .live-inbox-list { display: none !important; }
  .app .live-inbox-shell.is-thread-open .live-inbox-thread {
    position: fixed !important; inset: 0 !important; z-index: 60 !important;
    display: flex !important; flex-direction: column !important;
    width: 100% !important; height: 100dvh !important; min-height: 0 !important;
    border-right: 0 !important;
  }
  .app .live-inbox-shell.is-thread-open .live-thread-messages { flex: 1 1 auto !important; overflow-y: auto !important; }
  .app .live-thread-back { display: inline-flex !important; }
  /* The customer panel stays a slide-over and sits above the full-screen thread. */
  .app .live-inbox-details { display: flex !important; z-index: 90 !important; }
  .app .inbox-details-backdrop { z-index: 89 !important; }
}

/* The load-more button kept its dark-theme styling from styles.css. */
.app .live-inbox-load-more {
  width: calc(100% - 20px) !important;
  margin: 10px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
.app .live-inbox-load-more:hover { color: var(--app-ui-red) !important; border-color: rgba(217, 47, 36, .4) !important; }
.app .live-inbox-load-more:disabled { opacity: .55 !important; cursor: not-allowed !important; }
.app .live-thread-typing-dots i { background: var(--app-ui-dim) !important; }

/* ---- Customer panel: contact rows, escalation, history, context ---- */

.app .live-detail-contact-row,
.app .live-detail-contact-edit {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 9px 11px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface-soft) !important;
  color: var(--app-ui-black) !important;
  font-size: 12px !important;
  text-decoration: none !important;
  text-align: left !important;
}
.app .live-detail-contact-row > svg,
.app .live-detail-contact-edit > svg { flex: 0 0 auto !important; color: var(--app-ui-dim) !important; }
.app .live-detail-contact-row > span {
  flex: 1 1 auto !important; min-width: 0 !important;
  overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
}
.app a.live-detail-contact-row:hover { border-color: rgba(217, 47, 36, .4) !important; color: var(--app-ui-red) !important; }
.app .live-detail-contact-row.is-missing {
  background: transparent !important;
  border-style: dashed !important;
  color: var(--app-ui-dim) !important;
}
/* The Add action sits at the end of the row, quiet until it is wanted. */
.app .live-detail-contact-row.is-missing > button {
  flex: 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--app-ui-red) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}
.app .live-detail-contact-row.is-missing > button:hover { text-decoration: underline !important; }

.app .live-detail-contact-edit { flex-wrap: wrap !important; background: var(--app-ui-surface) !important; border-color: rgba(217, 47, 36, .45) !important; }
.app .live-detail-contact-edit input {
  flex: 1 1 120px !important; min-width: 0 !important;
  border: 0 !important; background: transparent !important; outline: none !important;
  padding: 0 !important; font-size: 12px !important; color: var(--app-ui-black) !important;
}
.app .live-detail-contact-edit button {
  flex: 0 0 auto !important;
  padding: 4px 9px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: var(--app-ui-red) !important;
  color: #ffffff !important;
  font-size: 11px !important; font-weight: 600 !important; cursor: pointer !important;
}
.app .live-detail-contact-edit button.is-quiet { background: transparent !important; color: var(--app-ui-muted) !important; }
.app .live-detail-contact-edit button:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* Escalation: a short reason, not a sentence, with the time under it. */
.app .live-detail-dot {
  width: 6px !important; height: 6px !important; flex: 0 0 auto !important;
  border-radius: 999px !important; background: var(--app-ui-warning) !important;
}
.app .live-detail-reason {
  display: block !important;
  font-size: 13px !important; font-weight: 600 !important;
  color: var(--app-ui-black) !important;
}
.app .live-detail-section.is-escalated .live-detail-reason { color: var(--app-ui-warning) !important; }
.app .live-detail-section.is-escalated .live-detail-sub { color: var(--app-ui-warning) !important; opacity: .82 !important; }

/* Status pill and the reason a reply is or is not possible, side by side. */
.app .live-detail-status-row {
  display: flex !important; align-items: flex-start !important;
  gap: 12px !important; flex-wrap: wrap !important;
}
.app .live-detail-status-row > p {
  flex: 1 1 130px !important; min-width: 0 !important;
  margin: 0 !important; font-size: 11px !important; line-height: 1.45 !important;
  color: var(--app-ui-muted) !important;
}

/* The assigned agent shown as a chip, in the trigger and in the menu. */
.app .inbox-select-avatar {
  flex: 0 0 auto !important;
  display: inline-grid !important; place-items: center !important;
  width: 22px !important; height: 22px !important; margin-right: 8px !important;
  border-radius: 7px !important;
  background: var(--app-ui-red) !important; color: #ffffff !important;
  font-size: 9px !important; font-weight: 700 !important; font-style: normal !important;
  letter-spacing: .02em !important;
}
.app .inbox-select-option { display: flex !important; align-items: center !important; }

/* History reads as a sentence: one big number and what it means. */
.app .live-detail-history {
  display: flex !important; align-items: baseline !important; gap: 8px !important;
  margin: 0 !important;
}
.app .live-detail-history > b {
  font-size: 26px !important; font-weight: 700 !important; line-height: 1 !important;
  color: var(--app-ui-black) !important;
}
.app .live-detail-history > span { font-size: 12px !important; color: var(--app-ui-muted) !important; }

/* Context rows: label on the left, value on the right. */
.app .live-detail-rows > div {
  flex-direction: row !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 14px !important;
}
.app .live-detail-rows > div > span { flex: 0 0 auto !important; }
.app .live-detail-rows > div > b,
.app .live-detail-rows > div > a {
  min-width: 0 !important; text-align: right !important;
  overflow-wrap: anywhere !important;
}
.app .live-detail-rows > div > b.is-yes {
  display: inline-flex !important; align-items: center !important; gap: 4px !important;
  color: var(--app-ui-success) !important;
}

/* An explanatory block, not a data field: quieter than a section with values. */
.app .live-detail-section.is-note { background: var(--app-ui-surface-soft) !important; }
.app .live-detail-section.is-note .live-detail-label { color: var(--app-ui-red) !important; }
.app .live-detail-section.is-note p { font-size: 12px !important; line-height: 1.55 !important; }

/* Refresh control with the time of the last read beside it. */
.app .live-inbox-refresh { display: flex !important; align-items: center !important; gap: 8px !important; flex: 0 0 auto !important; }
.app .live-inbox-refresh > span { font-size: 11px !important; color: var(--app-ui-dim) !important; white-space: nowrap !important; }

/* =====================================================================
   Playground: the widget test comes first and gets the room, the editor
   and the checklist share one panel beside it as tabs. Layout only, the
   controls in both panes are untouched.
   ===================================================================== */

.app .playground-v2-shell {
  grid-template-columns: minmax(520px, 1.5fr) minmax(330px, 0.82fr) !important;
  align-items: stretch !important;
  gap: 18px !important;
}

/* The widget is the point of this page, so it gets a real height rather than
   whatever is left over after the editor. */
.app .playground-v2-preview-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: min(840px, calc(100dvh - 150px)) !important;
}

.app .playground-v2-widget-stage { min-height: 540px !important; }

/* ---- The side panel ---- */

.app .playground-v2-side {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  min-height: min(840px, calc(100dvh - 150px)) !important;
  max-height: calc(100dvh - 150px) !important;
}

.app .playground-v2-tabs {
  display: flex !important;
  flex: 0 0 auto !important;
  gap: 22px !important;
  padding: 0 18px !important;
  border-bottom: 1px solid var(--app-ui-line) !important;
}

.app .playground-v2-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 15px 0 13px !important;
  margin-bottom: -1px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--app-ui-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color .16s ease, border-color .16s ease !important;
}

.app .playground-v2-tab:hover { color: var(--app-ui-black) !important; }

.app .playground-v2-tab.is-active {
  color: var(--app-ui-red) !important;
  border-bottom-color: var(--app-ui-red) !important;
  font-weight: 600 !important;
}

.app .playground-v2-tabpanel {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding: 16px 18px 18px !important;
  scrollbar-width: thin !important;
}

/* Both panes now sit inside the panel rather than being cards of their own,
   so their own sizing and scrolling is released to the panel. */
.app .playground-v2-side .playground-v2-editor,
.app .playground-v2-side .playground-v2-checklist {
  display: block !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.app .playground-v2-side .playground-v2-editor-scroll {
  overflow: visible !important;
  max-height: none !important;
  padding-right: 0 !important;
  scrollbar-gutter: auto !important;
}

/* The tab already names the pane, so the heading inside it would say the same
   thing twice. The line underneath it is the useful half and is kept. */
.app .playground-v2-tabpanel .playground-v2-panel-head {
  margin-bottom: 14px !important;
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}

.app .playground-v2-tabpanel .playground-v2-panel-head .icon-chip,
.app .playground-v2-tabpanel .playground-v2-panel-head h2 { display: none !important; }

.app .playground-v2-tabpanel .playground-v2-panel-head span {
  font-size: 12px !important;
  color: var(--app-ui-dim) !important;
}

/* ---- Narrow: the widget keeps the first row, the panel drops below it ---- */

@media (max-width: 1180px) {
  .app .playground-v2-shell { grid-template-columns: 1fr !important; }

  .app .playground-v2-preview-card { min-height: 0 !important; }
  .app .playground-v2-widget-stage { flex: 0 0 auto !important; height: 620px !important; }

  .app .playground-v2-side {
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .app .playground-v2-tabpanel { overflow: visible !important; }
}

/* ---- Playground: desktop / mobile preview and the guide tab ---- */

.app .playground-v2-preview-tools {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
}

.app .playground-v2-devices {
  display: inline-flex !important;
  padding: 3px !important;
  gap: 2px !important;
  border: 1px solid var(--app-ui-line) !important;
  border-radius: var(--app-ui-radius-control) !important;
  background: var(--app-ui-surface-soft) !important;
}

.app .playground-v2-device {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 26px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--app-ui-dim) !important;
  cursor: pointer !important;
  transition: background .16s ease, color .16s ease !important;
}

.app .playground-v2-device:hover { color: var(--app-ui-black) !important; }

.app .playground-v2-device.is-active {
  background: var(--app-ui-surface) !important;
  color: var(--app-ui-red) !important;
  box-shadow: 0 1px 2px rgba(17, 17, 17, .12) !important;
}

/* Desktop fills the stage. Mobile is a phone-width column, centred, so the
   template can be checked at the width most visitors will see it. */
.app .playground-v2-preview-card.is-device-desktop .playground-test-widget {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.app .playground-v2-preview-card.is-device-mobile .playground-v2-widget-stage {
  display: flex !important;
  justify-content: center !important;
  padding: 18px 0 !important;
}

.app .playground-v2-preview-card.is-device-mobile .playground-test-widget {
  width: 390px !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  box-shadow: var(--app-ui-shadow-float) !important;
}

/* ---- Guide ---- */

.app .playground-v2-guide-lead {
  margin: 0 0 16px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--app-ui-muted) !important;
}

.app .playground-v2-guide-steps {
  counter-reset: pc-step !important;
  list-style: none !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.app .playground-v2-guide-steps > li {
  position: relative !important;
  counter-increment: pc-step !important;
  padding-left: 32px !important;
  margin: 0 !important;
}

.app .playground-v2-guide-steps > li::before {
  content: counter(pc-step) !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: var(--app-ui-red-soft) !important;
  color: var(--app-ui-red) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.app .playground-v2-guide-steps > li > b {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--app-ui-black) !important;
  margin-bottom: 2px !important;
}

.app .playground-v2-guide-steps > li > span {
  display: block !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--app-ui-muted) !important;
}

.app .playground-v2-guide .playground-v2-help-box + .playground-v2-help-box {
  margin-top: 10px !important;
}

@media (max-width: 620px) {
  .app .playground-v2-preview-card.is-device-mobile .playground-test-widget {
    width: 100% !important;
  }
}

/* The desktop and mobile marks are supplied as flat black artwork, so they are
   painted through a mask rather than placed as images. That way they follow the
   button colour and go red when the view is selected, like every other control. */
.app .playground-v2-device-glyph {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  background-color: currentColor !important;
  -webkit-mask-image: var(--pc-device-glyph) !important;
  mask-image: var(--pc-device-glyph) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
}

/* The checklist used to be a grid child and got its spacing from the grid gap.
   Inside the tab panel its blocks sat flush against each other, so the summary,
   the tool list, How to test and Saved domains ran together. One column gap
   spaces all of them, including between the two help boxes. */
.app .playground-v2-side .playground-v2-checklist {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.app .playground-v2-side .playground-v2-checklist .playground-v2-panel-head {
  margin-bottom: 0 !important;
}

/* Playground preview, light theme. The message area carried an accent glow
   behind the top of the thread and a drop shadow under every bubble, which
   together read as blur rather than depth. Flattened to what the reference
   does: a plain surface, and bubbles that are a fill plus a hairline border. */
.app .playground-test-widget.is-light-theme .playground-test-body {
  background: var(--playground-widget-bg, #ffffff) !important;
}

.app .playground-test-widget.is-light-theme .playground-test-message > div {
  border: 1px solid rgba(17, 17, 17, .12) !important;
  box-shadow: none !important;
}

.app .playground-test-widget.is-light-theme .playground-test-message.is-user > div {
  border-color: var(--playground-widget-accent, #D92F24) !important;
  box-shadow: none !important;
}

/* Message avatars, as in the reference: the speaker beside the bubble rather
   than only a label above it. The row becomes two columns, the mark in one and
   everything that was already there in the other, so the existing bubble and
   meta rules keep working untouched. */
.app .playground-test-message {
  grid-template-columns: auto minmax(0, 1fr) !important;
  column-gap: 9px !important;
  align-items: start !important;
}

.app .playground-test-message > * { grid-column: 2 !important; }

/* The mark lines up with the top of the bubble, not with the role label above
   it, which is what made it look one line too high on both sides. Row 2 is the
   bubble: row 1 is the label, which every message renders. */
.app .playground-test-message > .playground-test-avatar-chip {
  grid-column: 1 !important;
  grid-row: 2 !important;
  align-self: start !important;
}

/* The person is on the right, so their mark sits after the bubble. */
.app .playground-test-message.is-user { grid-template-columns: minmax(0, 1fr) auto !important; }
.app .playground-test-message.is-user > * { grid-column: 1 !important; }
.app .playground-test-message.is-user > .playground-test-avatar-chip { grid-column: 2 !important; }

.app .playground-test-avatar-chip {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 auto !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: var(--playground-widget-accent, #D92F24) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
  line-height: 1 !important;
}

.app .playground-test-avatar-chip > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* The person is not the brand, so their mark is neutral. */
.app .playground-test-avatar-chip.is-user {
  background: rgba(17, 17, 17, .08) !important;
  color: rgba(17, 17, 17, .66) !important;
}

.app .playground-test-widget:not(.is-light-theme) .playground-test-avatar-chip.is-user {
  background: rgba(255, 255, 255, .14) !important;
  color: rgba(255, 255, 255, .82) !important;
}

/* Bubbles size to their text instead of stretching the full row, which is what
   makes a short line look like an empty box next to its avatar. */
.app .playground-test-message > div {
  width: fit-content !important;
  max-width: 100% !important;
}