* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: sans-serif;
  background: var(--bg);
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-weight: bold;
}

.admin-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.admin-header button {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
}

.push-toggle-btn.active {
  color: var(--success);
}

.admin-main {
  max-width: 1000px;
  margin: 24px auto;
  padding: 0 20px;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  border: none;
  background: none;
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-content.hidden { display: none; }

.back-to-menu-btn {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  margin-bottom: 12px;
  display: block;
}

.chats-hint {
  color: var(--ink-muted);
  font-size: 13px;
  margin-top: -8px;
}

.admin-chat-frame {
  height: 600px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px var(--shadow-color);
}

/* operator-dashboard/dashboard.css sets .dashboard { height: 100vh } for its own full-page
   layout — override to fill this smaller embedded frame instead. Must be a real
   fixed value, not height:100% — this element's own containing block (#chats-tab)
   has no explicit height, so a percentage here resolves to "auto" per the CSS
   spec, letting the frame grow unbounded with the conversation instead of
   staying a fixed box with its own internal scroll (the actual reported bug:
   controls below a long chat history ended up pushed off-page instead of the
   chat area scrolling internally). Keep this in sync with .admin-chat-frame's
   own height above. */
.admin-chat-frame.dashboard {
  height: 600px;
}

.table-scroll {
  overflow-x: auto;
}

.operators-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px var(--shadow-color);
}

.operators-table th,
.operators-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--surface-alt);
  font-size: 14px;
}

.operators-table th {
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-muted);
}

.status-active { color: var(--success); font-weight: 600; }
.status-inactive { color: var(--danger); font-weight: 600; }

.operators-table button {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  margin-right: 8px;
}

.operators-table button.delete-btn {
  color: var(--danger);
}

.create-operator-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.create-operator-form input,
.create-operator-form select {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 14px;
}

.create-operator-form button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
}

.expand-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-muted);
}

.widget-key-code {
  background: var(--surface-alt);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.org-detail-row td {
  background: var(--bg);
  padding: 14px 20px;
  overflow-x: auto;
}

.org-detail-row.hidden { display: none; }

.nested-operators-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 10px;
}

.nested-operators-table th,
.nested-operators-table td {
  padding: 6px 10px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.nested-operators-table th {
  color: var(--ink-muted);
  font-weight: 600;
}

.nested-operators-table button {
  border: none;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  margin-right: 6px;
}

.add-operator-form {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.add-operator-form input {
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 13px;
}

.add-operator-form button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-size: 13px;
}

.org-detail-section {
  margin-top: 16px;
}

.org-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.org-accordion-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
}

.org-accordion-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
}

.org-accordion-toggle:hover {
  background: var(--surface-alt);
}

.org-accordion-arrow {
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}

.org-accordion-toggle.open .org-accordion-arrow {
  transform: rotate(180deg);
}

.org-accordion-panel {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--border);
}

.org-accordion-panel.hidden {
  display: none;
}

.org-detail-row h4 {
  margin: 0 0 8px 0;
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.org-profile-form,
.org-timing-form,
.org-site-settings-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
}

.org-profile-form textarea,
.org-profile-form input[type="text"],
.org-timing-form textarea,
.org-timing-form input[type="text"],
.org-site-settings-form textarea,
.org-site-settings-form input[type="text"] {
  padding: 8px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
}

.org-profile-form textarea,
.org-timing-form textarea,
.org-site-settings-form textarea {
  resize: vertical;
  min-height: 56px;
}

.autoresponse-label {
  display: block;
  font-size: 12px;
  color: var(--ink-muted);
}

.product-card-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.product-card-search-wrap,
.product-card-block {
  position: relative;
}

.product-card-search {
  width: 100%;
  max-width: 420px;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 13px;
  margin-top: 6px;
}

.product-card-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 4px 12px var(--shadow-color);
  max-height: 220px;
  overflow-y: auto;
  z-index: 5;
}

.product-card-results.hidden { display: none; }

.document-attach-result-item {
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}

.document-attach-result-item:hover { background: var(--surface-alt); }

.document-attach-result-empty {
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink-faint);
}

.product-card-detail {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.product-card-detail.hidden { display: none; }

.product-card-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.product-card-detail-name {
  font-size: 13px;
  word-break: break-all;
}

.product-card-detail-close-btn {
  border: none;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
}

.document-attach-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--info-ink);
  background: var(--info-wash);
  padding: 1px 6px;
  border-radius: 4px;
}

.org-profile-form button,
.org-timing-form button,
.org-site-settings-form button {
  align-self: flex-start;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-size: 13px;
}

@media (max-width: 768px) {
  .admin-header {
    padding: 12px 16px;
  }

  .admin-main {
    margin: 16px auto;
    padding: 0 12px;
  }

  .org-profile-form,
  .org-timing-form,
  .org-site-settings-form {
    max-width: none;
  }

  /* The fixed 600px chat frame was sized for desktop — on phones, let it fill
     the remaining viewport instead (roughly: header + tabs + heading/hint).
     Selector must match .admin-chat-frame.dashboard's specificity above (two
     classes) or the desktop 600px rule silently wins here too. */
  .admin-chat-frame.dashboard {
    height: calc(100vh - 210px);
  }

  .operators-table th,
  .operators-table td {
    padding: 8px 10px;
  }

  /* Once a specific chat is open, the "Все чаты" heading/hint and the "Назад
     в меню" link are redundant with the chat's own "← Диалоги" back button —
     hide them to reclaim vertical space for the conversation (an open chat
     already has much less to work with than the operator dashboard, since it
     sits under the admin header + tabs too). Falls back harmlessly to the
     unhidden layout in browsers without :has() support. */
  #chats-tab:has(.dashboard.mobile-chat-open) h1,
  #chats-tab:has(.dashboard.mobile-chat-open) .chats-hint,
  #chats-tab:has(.dashboard.mobile-chat-open) .back-to-menu-btn {
    display: none;
  }

  #chats-tab:has(.dashboard.mobile-chat-open) .admin-chat-frame {
    height: calc(100vh - 90px);
  }

  /* Mobile text is ~20% larger than desktop across the board — small
     touch-screen text was hard to read, this mirrors every base font-size
     declaration above at 1.2x rather than a blanket html{font-size} scale
     (most selectors here use fixed px, which wouldn't inherit a root bump).*/
  .admin-header button { font-size: 15.6px; }
  .tab-btn { font-size: 16.8px; }
  .back-to-menu-btn { font-size: 15.6px; }
  .chats-hint { font-size: 15.6px; }
  .operators-table th,
.operators-table td { font-size: 16.8px; }
  .operators-table th { font-size: 15.6px; }
  .operators-table button { font-size: 15.6px; }
  .create-operator-form input,
.create-operator-form select { font-size: 16.8px; }
  .expand-btn { font-size: 14.4px; }
  .widget-key-code { font-size: 14.4px; }
  .nested-operators-table th,
.nested-operators-table td { font-size: 15.6px; }
  .nested-operators-table button { font-size: 14.4px; }
  .add-operator-form input { font-size: 15.6px; }
  .add-operator-form button { font-size: 15.6px; }
  .org-accordion-toggle { font-size: 15.6px; }
  .org-detail-row h4 { font-size: 14.4px; }
  .org-profile-form textarea,
  .org-profile-form input[type="text"],
  .org-timing-form textarea,
  .org-timing-form input[type="text"],
  .org-site-settings-form textarea,
  .org-site-settings-form input[type="text"] { font-size: 15.6px; }
  .autoresponse-label { font-size: 14.4px; }
  .org-profile-form button,
  .org-timing-form button,
  .org-site-settings-form button { font-size: 15.6px; }
  .site-crawl-status { font-size: 14.4px; }
  .site-crawl-btn { font-size: 15.6px; }
  .edited-replies-filters select { font-size: 15.6px; }
  .edited-reply-meta { font-size: 14.4px; }
  .edited-reply-block { font-size: 16.8px; }
  .edited-reply-label { font-size: 13.2px; }
}

.site-crawl-block {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-crawl-status {
  font-size: 12px;
  color: var(--ink-muted);
}

.site-crawl-btn {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
}

.site-crawl-btn:hover {
  background: var(--bg);
}

.edited-replies-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.edited-replies-filters select {
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
}

.edited-replies-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.edited-reply-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.edited-reply-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-muted);
  margin-bottom: 10px;
}

.edited-reply-date {
  flex-shrink: 0;
}

.edited-reply-block {
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}

.edited-reply-block:last-child {
  margin-bottom: 0;
}

.edited-reply-label {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}

.edited-reply-ai {
  background: var(--warning-wash);
}

.edited-reply-ai .edited-reply-label {
  color: var(--warning-ink);
}

.edited-reply-sent {
  background: var(--success-wash);
}

.edited-reply-sent .edited-reply-label {
  color: var(--success-ink);
}

.edited-reply-text {
  white-space: pre-line;
  color: var(--ink);
}

.anketa-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.anketa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.anketa-card-title {
  font-weight: 600;
  font-size: 15px;
}

.anketa-card-meta {
  font-size: 12px;
  color: var(--ink-muted);
}

.anketa-status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
  white-space: nowrap;
}

.anketa-status-draft { background: var(--warning-wash); color: var(--warning-ink); }
.anketa-status-active { background: var(--success-wash); color: var(--success-ink); }

.anketa-open-btn {
  border: none;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}

.anketa-answers {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 4px 12px;
  font-size: 13px;
  margin-top: 10px;
}

.anketa-answers dt {
  color: var(--ink-muted);
}

.anketa-answers dd {
  margin: 0;
  color: var(--ink);
  white-space: pre-line;
}

/* Role-based visibility: body gets a role-<role> class from dashboard.js
   right after login. Anything tagged .platform-admin-only exists purely to
   manage things across all organizations (create/rename/delete orgs,
   force-delete a conversation, platform-wide leads) and only makes sense
   for the platform admin — never for an org owner or a plain operator, even
   though they land on the same unified dashboard. .staff-only is one notch
   looser: visible to admin and org owner, hidden for a plain operator. */
body.role-owner .platform-admin-only,
body.role-operator .platform-admin-only,
body.role-operator .staff-only,
body.role-operator .org-tab-btn {
  display: none !important;
}

/* THE-BOT-DIALOGS-FUNCTIONAL-FIX-1: the result of archive / restore / delete and the reason an action is
   unavailable are visible text (also on a phone, where there is no hover). */
.dialogs-action-status,
.dialogs-lock-note {
  /* no full flex-basis: the list sidebar is a flex COLUMN (console-workspace), where a 100 % basis means full height;
     width:100% alone puts it on its own line inside the wrapping .visitor-info row */
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 0;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--warning-wash);
  overflow-wrap: anywhere;
}
.dialogs-action-status.is-error { color: var(--danger-ink); background: var(--danger-wash); }
.dialogs-lock-note { color: var(--warning-ink); }
#admin-dialogs-status {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: auto;
  margin: 6px 8px;
  max-height: 6.5em;
  overflow-y: auto;
}
#admin-dialogs-status.hidden { display: none; }
.dialogs-status-text { flex: 1 1 auto; min-width: 0; }
.dialogs-status-close {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
}
.dialogs-action-status.hidden,
.dialogs-lock-note.hidden { display: none; }
.visitor-info-actions button:disabled { opacity: 0.55; cursor: not-allowed; }
.conversation-select-checkbox:disabled { cursor: not-allowed; opacity: 0.4; }
.org-chat-group-monitored-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--warning-wash);
  padding: 2px 8px;
  border-radius: 999px;
  flex-shrink: 0;
}