:root {
  color-scheme: light;
  --bg: #f4f7fb;
  --panel: #ffffff;
  --ink: #182033;
  --muted: #68738a;
  --line: #e4e9f2;
  --accent: #465ee8;
  --accent-dark: #3448c8;
  --ok: #16845b;
  --ok-bg: #e8f7f1;
  --pending: #997019;
  --pending-bg: #fff5dc;
  --off: #68738a;
  --off-bg: #edf0f5;
  --danger: #b63d4b;
  --danger-bg: #fff0f1;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.45; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
select {
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #ccd4e2;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
}
textarea { border: 1px solid #ccd4e2; border-radius: 10px; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 258px minmax(0, 1fr); align-items: start; }
.sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; padding: 20px 16px 16px; overflow: hidden; background: #172039; color: #f8faff; display: flex; flex-direction: column; }
.brand { display: block; flex: 0 0 auto; text-decoration: none; padding: 0 8px 17px; }
.branding-component { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 8px; }
.branding-name-badge { display: inline-flex; width: max-content; max-width: 100%; padding: 10px 16px; border-radius: 11px; background: var(--accent); color: #fff; font-size: 18px; font-weight: 800; line-height: 1.1; white-space: nowrap; box-shadow: 0 10px 25px rgba(70, 94, 232, .25); }
.branding-logo { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.branding-tagline { display: block; max-width: 100%; color: var(--muted); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.branding-component--sidebar .branding-logo { max-width: 190px; max-height: 64px; }
.branding-component--sidebar .branding-tagline { max-width: 200px; color: #aeb9d1; }
.branding-component--login .branding-logo { max-width: 260px; max-height: 90px; }
.branding-component--login .branding-tagline { max-width: 310px; }
.branding-component--preview .branding-logo { max-width: 260px; max-height: 100px; }
.nav { display: grid; gap: 3px; }
.sidebar-nav { flex: 1 1 auto; min-height: 0; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.24) transparent; padding: 2px 4px 10px; }
.nav a { min-height: 40px; display: flex; align-items: center; padding: 9px 12px; border-radius: 9px; color: #bac4d9; text-decoration: none; font-size: 14px; font-weight: 600; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.active { background: var(--accent); color: #fff; }
.sidebar-footer { flex: 0 0 auto; margin-top: 0; padding: 13px 8px 0; border-top: 1px solid rgba(255,255,255,.1); background: #172039; }
.user-label { display: block; margin-bottom: 10px; color: #b9c4da; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.user-label strong { color: #fff; }
.logout-button { width: 100%; padding: 10px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: transparent; color: #fff; cursor: pointer; }
.logout-button:hover { background: rgba(255,255,255,.08); }

.content { min-width: 0; padding: 36px clamp(24px, 4vw, 58px) 48px; }
.content-container { width: 100%; max-width: 1500px; min-width: 0; margin: 0 auto; }
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 22px; }
.page-header h1 { margin: 2px 0 5px; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; letter-spacing: -.035em; }
.eyebrow { margin: 0; color: var(--accent); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.muted { color: var(--muted); }
.page-header .muted { margin: 0; }
.status-grid { display: grid; grid-template-columns: repeat(3, minmax(210px, 1fr)); gap: 14px; }
.status-card { min-height: 116px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 8px 28px rgba(37, 50, 78, .05); display: flex; align-items: flex-start; gap: 14px; }
.status-card > div:last-child { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.status-card h2 { margin: 2px 0 11px; font-size: 16px; line-height: 1.25; }
.status-icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; font-weight: 900; }
.status-icon.ok { color: var(--ok); background: var(--ok-bg); }
.status-icon.pending { color: var(--pending); background: var(--pending-bg); }
.status-icon.off { color: var(--off); background: var(--off-bg); }
.status-icon.info { color: var(--accent); background: #e9edff; }
.status-pill { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 750; }
.status-pill.ok { color: var(--ok); background: var(--ok-bg); }
.status-pill.pending { color: var(--pending); background: var(--pending-bg); }
.status-pill.off { color: var(--off); background: var(--off-bg); }
.status-pill.info { color: var(--accent-dark); background: #e9edff; }
.info-panel { margin-top: 16px; padding: 20px 22px; border: 1px solid #dfe5ff; border-radius: 16px; background: #f7f8ff; }
.info-panel h2 { margin: 0 0 8px; font-size: 18px; }
.info-panel p { margin: 0; color: var(--muted); line-height: 1.6; }

.empty-state { min-height: 230px; padding: 34px 24px; border: 1px dashed #cfd6e5; border-radius: 18px; background: rgba(255,255,255,.62); text-align: center; display: grid; place-content: center; justify-items: center; }
.empty-state h1, .empty-state h2 { max-width: 480px; margin: 18px 0 8px; }
.empty-state h1 { font-size: clamp(26px, 4vw, 34px); }
.empty-state p { margin: 0 0 24px; color: var(--muted); }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: #e9edff; color: var(--accent); font-weight: 900; letter-spacing: .12em; }
.secondary-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 15px; border: 1px solid #d7deea; border-radius: 10px; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; cursor: pointer; }
.secondary-button:hover { border-color: #bac5d8; background: #f9faff; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 15% 15%, #e5eaff, transparent 38%), var(--bg); }
.login-card { width: min(100%, 430px); padding: 38px; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: 0 24px 70px rgba(40, 53, 87, .13); }
.login-brand { margin-bottom: 26px; }
.login-card h1 { margin: 6px 0 8px; font-size: 32px; letter-spacing: -.03em; }
.login-card > .muted { margin: 0 0 26px; line-height: 1.5; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 8px; font-size: 13px; font-weight: 700; }
.login-form input { width: 100%; padding: 12px 13px; border: 1px solid #ccd4e2; border-radius: 10px; color: var(--ink); outline: none; }
.login-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(70,94,232,.13); }
.login-form button { margin-top: 14px; padding: 13px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 750; cursor: pointer; }
.login-form button:hover { background: var(--accent-dark); }
.closed-pilot-notice { margin: -8px 0 18px; padding: 12px 14px; border: 1px solid #dfe4ff; border-radius: 11px; background: #f6f8ff; color: #3d4964; font-size: 13px; line-height: 1.55; }
.login-legal-links { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.login-legal-links a { color: var(--muted); font-size: 12px; }
.alert { margin-bottom: 18px; padding: 12px 14px; border-radius: 10px; background: var(--danger-bg); color: var(--danger); font-size: 14px; }
.color-field { display: grid; grid-template-columns: 64px minmax(0, 220px); gap: 10px; }
.color-field input[type="color"] { min-height: 46px; padding: 4px; cursor: pointer; }
.branding-current-logo { max-width: 760px; margin-bottom: 18px; }
.branding-preview { display: block; width: auto; height: auto; max-width: min(100%, 320px); max-height: 120px; object-fit: contain; object-position: left center; margin-bottom: 16px; }
.business-hours-list { display: grid; gap: 10px; }
.business-hours-row { display: grid; grid-template-columns: minmax(170px, 1fr) 150px 150px; gap: 14px; align-items: end; padding: 13px 0; border-top: 1px solid var(--line); }
.business-hours-row > label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.business-hours-row input[type="time"] { padding: 10px 11px; border: 1px solid #ccd4e2; border-radius: 9px; }
.business-hours-row .business-day { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.organizations-table { min-width: 760px; }

.assistant-header { align-items: center; }
.assistant-header-actions { display: grid; justify-items: end; gap: 10px; }
.assistant-state { display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 999px; font-size: 13px; font-weight: 750; }
.assistant-state.enabled { color: var(--ok); background: var(--ok-bg); }
.assistant-state.disabled { color: var(--off); background: var(--off-bg); }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.notice { max-width: 100%; margin: 0 0 22px; padding: 15px 17px; border-radius: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.notice.success { color: var(--ok); background: var(--ok-bg); border: 1px solid #c9ecdf; }
.notice.error { color: var(--danger); background: var(--danger-bg); border: 1px solid #f2d5d9; }
.notice ul { margin: 7px 0 0; padding-left: 20px; }
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.settings-main { display: grid; gap: 18px; min-width: 0; }
.form-section, .side-card, .instruction-preview { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); box-shadow: 0 12px 36px rgba(37, 50, 78, .045); }
.form-section { padding: 22px; }
.emphasis-section { border-color: #cfd6ff; box-shadow: 0 12px 36px rgba(70, 94, 232, .07); }
.section-heading { display: flex; gap: 13px; margin-bottom: 19px; }
.section-number { flex: 0 0 auto; width: 38px; height: 31px; display: grid; place-items: center; border-radius: 9px; background: #edf0ff; color: var(--accent); font-size: 11px; font-weight: 850; letter-spacing: .08em; }
.section-heading h2, .side-card h2 { margin: 1px 0 5px; font-size: 18px; }
.section-heading p, .side-card > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.field-grid.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 7px; margin-top: 14px; }
.section-heading + .field, .section-heading + .field-grid .field { margin-top: 0; }
.field label { font-size: 13px; font-weight: 750; }
.field label span { color: var(--danger); }
.field input, .field textarea { width: 100%; padding: 10px 12px; border: 1px solid #ccd4e2; border-radius: 10px; background: #fff; color: var(--ink); outline: none; resize: vertical; line-height: 1.5; }
.field select { width: 100%; }
.field textarea { min-height: 96px; }
.field textarea.large-textarea { min-height: 230px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(70,94,232,.12); }
.field small { color: var(--muted); font-size: 12px; line-height: 1.45; }
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.profile-form h2 { margin: 27px 0 5px; font-size: 18px; }
.profile-form > .muted { margin: 0 0 3px; line-height: 1.5; }
.settings-side { position: sticky; top: 24px; display: grid; gap: 14px; }
.side-card { padding: 21px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 14px; }
.toggle-row small { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.switch { position: relative; flex: 0 0 auto; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { display: block; width: 46px; height: 26px; padding: 3px; border-radius: 999px; background: #c8cfdb; transition: background .18s ease; }
.switch-track::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(28, 37, 57, .25); transition: transform .18s ease; }
.switch input:checked + .switch-track { background: var(--ok); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid rgba(70,94,232,.24); outline-offset: 2px; }
.preview-card { background: #f7f8ff; border-color: #dfe4ff; }
.preview-button, .save-button { min-height: 42px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 750; cursor: pointer; }
.preview-button, .settings-side > .save-button { width: 100%; }
.preview-button { margin-top: 16px; border: 1px solid #cfd6ff; background: #fff; color: var(--accent-dark); }
.preview-button:hover { background: #eef1ff; }
.save-button { width: auto; border: 0; background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(70,94,232,.18); }
.save-button:hover { background: var(--accent-dark); }
.version-list { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.version-list li { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }
.version-list time { color: var(--muted); white-space: nowrap; }
.empty-history { margin: 13px 0 0; color: var(--muted); font-size: 12px; }
.instruction-preview { display: none; margin-top: 22px; padding: 27px; scroll-margin-top: 20px; }
.instruction-preview.visible { display: block; }
.preview-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.preview-heading h2 { margin: 5px 0 0; }
.preview-heading > span { color: var(--ok); font-size: 12px; font-weight: 700; }
.instruction-preview pre { margin: 0; padding: 22px; border-radius: 12px; background: #172039; color: #eef2ff; white-space: pre-wrap; overflow-wrap: anywhere; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.behavior-toggle { margin-top: 10px; padding: 13px 0; border-top: 1px solid var(--line); }
.collection-fields-section { margin-top: 24px; }
.form-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--primary-color, #465ee8);
  border-radius: 8px;
  background: #f5f7ff;
  color: #48506a;
  font-size: 14px;
  line-height: 1.5;
}
.collection-field-editor { display: grid; grid-template-columns: minmax(150px,1fr) minmax(200px,1.6fr) 130px 100px auto auto auto; gap: 12px; align-items: end; padding: 17px; border: 1px solid var(--line); border-radius: 14px 14px 0 0; background: #fafbfe; }
.collection-field-editor + .collection-field-editor { margin-top: 10px; }
.collection-field-editor .field { margin-top: 0; }
.collection-field-create { margin-bottom: 18px; border-color: #cfd6ff; border-radius: 14px; background: #f7f8ff; }
.collection-field-delete { display: flex; justify-content: flex-end; gap: 12px; padding: 0 17px 17px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 14px 14px; background: #fafbfe; }
.collection-field-delete + .collection-field-form { margin-top: 10px; }
.compact-check { display: flex; align-items: center; gap: 7px; padding-bottom: 12px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.conversation-state-panel { margin-bottom: 22px; padding: 22px; border: 1px solid #dfe4ff; border-radius: 17px; background: #f7f8ff; }
.conversation-state-panel .section-heading { margin-bottom: 16px; }
.conversation-state-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.conversation-state-grid > div { padding: 12px; border-radius: 11px; background: #fff; }
.conversation-state-grid span, .conversation-state-grid strong { display: block; }
.conversation-state-grid span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.conversation-state-grid strong { font-size: 13px; }
.collection-state-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.collection-state-item { display: flex; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; font-size: 12px; }
.collection-state-item.received { color: var(--ok); background: var(--ok-bg); }
.collection-state-item.missing { color: var(--off); background: var(--off-bg); }

.dialogs-header { align-items: center; }
.primary-action { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 750; text-decoration: none; cursor: pointer; box-shadow: 0 8px 20px rgba(70,94,232,.18); }
.primary-action:hover { background: var(--accent-dark); }
.dialog-filters { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 3px; }
.dialog-filters label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.dialog-filters a { padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
.dialog-filters a.active { border-color: var(--accent); background: #eef1ff; color: var(--accent-dark); }
.dialogs-table-wrap, .table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 8px 28px rgba(37,50,78,.045); }
.dialogs-table { width: 100%; min-width: 1080px; border-collapse: collapse; }
.dialogs-table th { padding: 12px 14px; background: #f8f9fc; color: var(--muted); text-align: left; font-size: 11px; line-height: 1.3; text-transform: uppercase; letter-spacing: .045em; white-space: nowrap; }
.dialogs-table td { padding: 13px 14px; border-top: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.dialogs-table tbody tr:hover { background: #fafbff; }
.dialogs-table time, .no-data { color: var(--muted); white-space: nowrap; }
.table-status { display: inline-block; padding: 5px 8px; border-radius: 999px; background: var(--off-bg); color: var(--off); font-size: 11px; font-weight: 750; white-space: nowrap; }
.table-status.status-active, .table-status.status-phone_received { background: var(--ok-bg); color: var(--ok); }
.table-status.status-new, .table-status.status-collecting_info, .table-status.status-phone_requested { background: #eaf1ff; color: #365ba8; }
.table-status.status-closed, .table-status.status-paused { background: var(--off-bg); color: var(--off); }
.table-status.status-error { background: var(--danger-bg); color: var(--danger); }
.message-count { display: inline-grid; min-width: 28px; height: 28px; place-items: center; border-radius: 8px; background: #eef1f7; font-weight: 800; }
.table-link { color: var(--accent-dark); font-weight: 750; white-space: nowrap; }
.dialogs-empty { min-height: 220px; display: grid; place-content: center; justify-items: center; padding: 32px 24px; border: 1px dashed #cfd6e5; border-radius: 16px; background: rgba(255,255,255,.62); text-align: center; }
.dialogs-empty h2 { margin: 17px 0 7px; }
.dialogs-empty p { margin: 0; color: var(--muted); }

.dialog-page-header { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 22px; }
.dialog-page-header h1 { margin: 4px 0 0; font-size: clamp(30px,4vw,43px); letter-spacing: -.035em; }
.back-link { display: inline-block; margin-bottom: 21px; color: var(--muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: var(--accent); }
.dialog-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.action-button { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 11px; border: 1px solid #d7deea; border-radius: 9px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 750; text-decoration: none; cursor: pointer; }
.action-button:hover { background: #f5f7fb; }
.success-action { border-color: #bfe3d6; color: var(--ok); }
.warning-action { border-color: #eadba9; color: var(--pending); }
.danger-action { border-color: #efd4d7; background: #fffafa; color: var(--danger); }
.dialog-facts { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; overflow: hidden; }
.dialog-facts > div { padding: 15px 17px; border-right: 1px solid var(--line); }
.dialog-facts > div:last-child { border-right: 0; }
.dialog-facts span, .dialog-facts strong { display: block; }
.dialog-facts span { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.dialog-facts strong { font-size: 13px; }
.contact-card { display: flex; align-items: center; gap: 13px; margin: -7px 0 22px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.contact-card.received { border-color: #bee6d7; background: var(--ok-bg); }
.contact-card.waiting { background: #f8f9fc; }
.contact-card-icon { flex: 0 0 auto; width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--ok); font-weight: 900; }
.contact-card span, .contact-card strong, .contact-card small { display: block; }
.contact-card span { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.contact-card strong { font-size: 16px; }
.contact-card small { margin-top: 4px; color: var(--ok); font-size: 11px; }
.phone-badge { display: inline-block; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.phone-badge.received { color: var(--ok); background: var(--ok-bg); }
.phone-badge.waiting { color: var(--off); background: var(--off-bg); }
.notice.warning { color: var(--pending); background: var(--pending-bg); border: 1px solid #f0dfaf; }
.chat-panel { border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: 0 18px 48px rgba(37,50,78,.07); overflow: hidden; }
.chat-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 19px; border-bottom: 1px solid var(--line); background: #fafbfe; font-size: 13px; }
.chat-toolbar > div { display: flex; align-items: center; gap: 8px; }
.chat-toolbar > span { color: var(--muted); font-size: 11px; }
.chat-online-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.message-stream { height: min(58vh, 620px); min-height: 390px; padding: 26px; overflow-y: auto; background: linear-gradient(180deg,#f6f8fc 0%,#fbfcfe 100%); }
.message-row { display: flex; margin: 0 0 16px; }
.message-row.sender-client { justify-content: flex-end; }
.message-row.sender-assistant, .message-row.sender-system, .message-row.sender-manager { justify-content: flex-start; }
.message-bubble { width: fit-content; max-width: min(72%, 690px); padding: 13px 15px 10px; border-radius: 15px 15px 15px 4px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(35,46,71,.055); }
.sender-client .message-bubble { border-color: var(--accent); border-radius: 15px 15px 4px 15px; background: var(--accent); color: #fff; }
.sender-system .message-bubble { background: var(--pending-bg); border-color: #eddda9; }
.sender-manager .message-bubble { background: #eff9f5; border-color: #c9eadd; }
.message-author { margin-bottom: 5px; color: var(--accent); font-size: 11px; font-weight: 850; }
.sender-client .message-author { color: #dfe4ff; }
.message-bubble > p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.message-bubble > time { display: block; margin-top: 7px; color: var(--muted); text-align: right; font-size: 10px; }
.sender-client .message-bubble > time { color: #dfe4ff; }
.message-technical { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.message-technical summary { color: var(--accent-dark); font-weight: 750; cursor: pointer; }
.message-technical dl { display: grid; gap: 6px; margin: 10px 0 0; }
.message-technical dl > div { display: flex; justify-content: space-between; gap: 15px; }
.message-technical dt, .message-technical dd { margin: 0; }
.message-technical dd { color: var(--ink); font-weight: 650; }
.chat-empty { min-height: 330px; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; }
.chat-empty-mark { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; background: #e9edff; color: var(--accent); font-weight: 900; }
.chat-empty h2 { margin: 17px 0 7px; }
.chat-empty p { max-width: 500px; margin: 0; color: var(--muted); line-height: 1.55; }
.message-composer { padding: 18px 20px 20px; border-top: 1px solid var(--line); background: #fff; }
.message-composer > label { display: block; margin-bottom: 9px; font-size: 12px; font-weight: 800; }
.composer-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: stretch; }
.composer-row textarea { min-height: 76px; padding: 12px 13px; border: 1px solid #ccd4e2; border-radius: 11px; color: var(--ink); resize: vertical; outline: none; line-height: 1.5; }
.composer-row textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(70,94,232,.12); }
.composer-row button { min-width: 112px; padding: 12px 18px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; font-weight: 800; cursor: pointer; }
.composer-row button:hover { background: var(--accent-dark); }
.message-composer > small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; }
.chat-closed { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; border-top: 1px solid var(--line); background: var(--off-bg); color: var(--off); font-size: 13px; }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 20px; }
  .nav { grid-template-columns: repeat(2, 1fr); }
  .sidebar-footer { margin-top: 20px; }
  .content { padding: 32px 20px; }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-side { position: static; }
  .assistant-header-actions { justify-items: start; }
  .collection-field-editor { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .conversation-state-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dialog-facts { grid-template-columns: repeat(2,1fr); }
  .dialog-facts > div { border-bottom: 1px solid var(--line); }
  .message-bubble { max-width: 84%; }
}

@media (max-width: 560px) {
  .nav { grid-template-columns: 1fr; }
  .status-grid { grid-template-columns: 1fr; }
  .login-card { padding: 28px 22px; }
  .assistant-header, .preview-heading { align-items: flex-start; flex-direction: column; }
  .collection-field-editor, .conversation-state-grid, .collection-state-list { grid-template-columns: 1fr; }
  .field-grid.two-columns { grid-template-columns: 1fr; }
  .form-section { padding: 21px 17px; }
  .dialogs-header, .dialog-page-header { align-items: flex-start; flex-direction: column; }
  .dialog-actions { justify-content: flex-start; }
  .dialog-facts { grid-template-columns: 1fr; }
  .dialog-facts > div { border-right: 0; }
  .message-stream { padding: 17px 12px; }
  .message-bubble { max-width: 92%; }
  .composer-row { grid-template-columns: 1fr; }
  .chat-closed { align-items: flex-start; flex-direction: column; }
  .business-hours-row { grid-template-columns: 1fr 1fr; }
  .business-hours-row .business-day { grid-column: 1 / -1; }
}

.integrations-header { align-items: center; gap: 20px; }
.filter-panel, .inline-form { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.filter-panel { margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.filter-panel label, .inline-form label, .test-message-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700; }
.filter-panel select { min-width: 180px; }
.compact-section { margin-bottom: 16px; }
.inline-form input, .test-message-form input, .test-message-form textarea { padding: 11px 12px; border: 1px solid #ccd4e2; border-radius: 10px; }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.integration-card { padding: 23px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 12px 36px rgba(37,50,78,.045); }
.integration-card > form:not(.test-message-form) { margin: 12px 0 0; }
.card-title { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.card-title h2 { margin: 7px 0 3px; font-size: 19px; }.card-title p { margin: 0; color: var(--muted); font-size: 13px; }
.type-badge { color: var(--accent); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.metric-list { display: grid; margin: 20px 0; }.metric-list div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 12px; }.metric-list dt { color: var(--muted); }.metric-list dd { margin: 0; text-align: right; font-weight: 650; }
.test-message-form { display: grid; gap: 12px; margin-top: 19px; padding-top: 18px; border-top: 1px solid var(--line); }.test-message-form h3 { margin: 0; font-size: 15px; }.test-message-form textarea { min-height: 76px; resize: vertical; }
.table-status.status-working, .table-status.status-connected, .table-status.status-processed, .table-status.status-sent { color: var(--ok); background: var(--ok-bg); }
.table-status.status-error, .table-status.status-failed { color: var(--danger); background: var(--danger-bg); }
.table-status.status-retry, .table-status.status-processing, .table-status.status-received { color: var(--pending); background: var(--pending-bg); }
.events-table { min-width: 1050px; }.events-table code { font-size: 11px; }
@media (max-width: 900px) { .integration-grid { grid-template-columns: 1fr; } }
.queue-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; }.queue-card { padding:18px; border:1px solid var(--line); border-radius:14px; background:#fafbfe; }.queue-card h3 { margin:0 0 12px; font-size:15px; }
@media (max-width:900px) { .queue-grid { grid-template-columns:1fr; } }

/* Единая UI-система рабочих страниц */
.page-header > :first-child { min-width: 0; }
.page-header > :last-child:not(:first-child) { flex: 0 0 auto; }
.page-header p { max-width: 760px; }
.field-grid > .save-button { align-self: end; justify-self: start; min-width: 180px; }
.form-section > h2:first-child { margin: 0 0 16px; font-size: 18px; }
.form-section input[type="file"] {
  width: 100%;
  min-height: 44px;
  padding: 5px;
  border: 1px solid #ccd4e2;
  border-radius: 10px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.form-section input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 11px;
  padding: 6px 11px;
  border: 0;
  border-radius: 7px;
  background: #eef1ff;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.form-section input[type="file"]:hover::file-selector-button { background: #e3e8ff; }
.settings-layout.platform-settings-layout { grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); }
.branding-current-logo { max-width: 100%; padding: 20px 22px; }
.profile-form-section { width: min(100%, 900px); }
.organization-create-section { width: min(100%, 780px); }
.organization-create-section .inline-form input { width: min(420px, 65vw); }
.user-create-section { margin-bottom: 18px; }
.user-create-section form { max-width: 900px; }

.assistant-grid { display: grid; grid-template-columns: repeat(3, minmax(230px, 1fr)); gap: 14px; }
.assistant-card { min-height: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.assistant-card-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.assistant-card h2 { margin: 0 0 7px; font-size: 18px; }
.assistant-card .muted { margin: 0; }
.assistant-card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.assistant-card-actions form { margin: 0; }
.assistant-card-empty { grid-column: 1 / -1; }

.new-dialog-form { display: grid; grid-template-columns: minmax(220px, 300px) auto; align-items: end; gap: 10px; }
.new-dialog-form label { display: grid; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 700; }
.new-dialog-form select { width: 100%; min-width: 220px; }

.ai-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ai-settings-grid .form-section { height: 100%; }
.ai-settings-grid .toggle-row { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

.notification-toggle-grid .toggle-row { min-height: 72px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfe; }

.users-table { min-width: 1250px; }
.users-table .table-control { width: 100%; min-width: 150px; min-height: 36px; padding: 7px 9px; border-radius: 8px; font-size: 12px; }
.users-table .email-control { min-width: 220px; }
.users-table .role-control { min-width: 200px; }
.users-table .organization-control { min-width: 170px; }
.user-actions { min-width: 250px; display: grid; gap: 7px; align-items: start; }
.user-actions form { display: flex; gap: 7px; flex-wrap: wrap; margin: 0; }
.user-password-details { border: 1px solid var(--line); border-radius: 9px; background: #fafbfe; }
.user-password-details summary { padding: 8px 10px; color: var(--accent-dark); font-size: 12px; font-weight: 750; cursor: pointer; }
.user-password-details form { padding: 0 9px 9px; }
.user-password-details input { min-width: 180px; min-height: 36px !important; padding: 7px 9px !important; font-size: 12px; }

.pagination { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pagination-info { color: var(--muted); font-size: 13px; }
.pagination-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.pagination-actions a, .pagination-actions span { min-width: 36px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); text-decoration: none; font-size: 12px; font-weight: 700; }
.pagination-actions .current { border-color: var(--accent); background: #eef1ff; color: var(--accent-dark); }
.pagination-actions .disabled { color: #a3acbd; background: #f7f8fb; }
.audit-page-size { margin: 0; padding: 10px 12px; }
.audit-page-size select { min-width: 90px; }
.audit-table { min-width: 760px; }
.audit-total { margin: 12px 2px 0; }

@media (max-width: 1240px) {
  .assistant-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
  .settings-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .settings-layout.platform-settings-layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .content { padding-inline: 30px; }
}

@media (max-width: 1080px) {
  .ai-settings-grid { grid-template-columns: 1fr; }
  .new-dialog-form { grid-template-columns: 1fr; }
  .new-dialog-form .primary-action { width: 100%; }
}

@media (max-width: 900px) {
  .sidebar { overflow: visible; }
  .sidebar-nav { overflow: visible; padding-inline: 0; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .page-header > :last-child:not(:first-child) { width: 100%; }
  .page-header > a:last-child { width: auto; }
  .assistant-grid { grid-template-columns: 1fr; }
  .settings-layout.platform-settings-layout { grid-template-columns: 1fr; }
  .pagination { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 620px) {
  .content { padding-inline: 18px; }
  .field-grid.two-columns, .notification-toggle-grid { grid-template-columns: 1fr; }
  .organization-create-section .inline-form input { width: 100%; }
  .inline-form > label { width: 100%; }
  .inline-form input, .inline-form select { width: 100%; }
}

@media (max-height: 780px) and (min-width: 901px) {
  .sidebar { padding-top: 14px; padding-bottom: 12px; }
  .brand { padding-bottom: 10px; }
  .branding-name-badge { padding: 8px 13px; font-size: 16px; }
  .branding-component { gap: 5px; }
  .nav a { min-height: 35px; padding-block: 7px; font-size: 13px; }
  .sidebar-footer { padding-top: 9px; }
  .user-label { margin-bottom: 7px; }
  .logout-button { padding-block: 8px; }
  .content { padding-top: 28px; }
  .page-header { margin-bottom: 18px; }
}

/* Мобильная адаптация: один набор шаблонов для desktop, tablet и mobile */
.mobile-header, .mobile-nav-overlay { display: none; }
.cell-ellipsis { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Пользователи: все семь колонок помещаются на desktop, scroll остаётся fallback. */
.users-table { width: 100%; min-width: 0; table-layout: fixed; }
.users-table .user-col-name { width: 14%; }
.users-table .user-col-email { width: 18%; }
.users-table .user-col-role { width: 18%; }
.users-table .user-col-organization { width: 16%; }
.users-table .user-col-status { width: 10%; }
.users-table .user-col-login { width: 11%; }
.users-table .user-col-actions { width: 13%; }
.users-table th, .users-table td { padding-inline: 8px; }
.users-table th { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.users-table .table-control { min-width: 0; width: 100%; padding-inline: 7px; text-overflow: ellipsis; }
.users-table .email-control, .users-table .role-control, .users-table .organization-control { min-width: 0; }
.users-table td:nth-child(5), .users-table td:nth-child(6) { font-size: 12px; }
.user-actions { min-width: 0; width: 100%; gap: 6px; }
.user-actions > form, .user-actions > form > button, .user-password-details { width: 100%; }
.user-actions button { min-width: 0; min-height: 36px; padding: 7px 8px; white-space: normal; line-height: 1.2; }
.user-password-details summary { min-height: 36px; display: flex; align-items: center; }
.user-password-details form { display: grid; grid-template-columns: 1fr; }
.user-password-details input { width: 100%; min-width: 0; }

@media (max-width: 1024px) {
  .app-shell { display: block; min-height: 100vh; min-height: 100dvh; }
  .mobile-header {
    position: sticky; top: 0; z-index: 60; height: 64px; display: flex; align-items: center;
    justify-content: space-between; gap: 16px; padding: 9px 18px; background: #172039;
    color: #fff; box-shadow: 0 4px 18px rgba(18,27,49,.16);
  }
  .mobile-brand { min-width: 0; color: inherit; text-decoration: none; }
  .mobile-brand .branding-component { min-width: 0; display: flex; align-items: center; gap: 10px; }
  .mobile-brand .branding-logo { width: auto; max-width: 150px; height: 40px; max-height: 40px; object-fit: contain; }
  .mobile-brand .branding-name-badge { max-width: 170px; padding: 8px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
  .mobile-brand .branding-tagline { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu-button {
    width: 46px; height: 46px; flex: 0 0 46px; display: grid; align-content: center; justify-items: center;
    gap: 5px; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 11px;
    background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  }
  .mobile-menu-button span { width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
  .mobile-menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .mobile-menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-menu-button:focus-visible { outline: 3px solid rgba(255,255,255,.45); outline-offset: 2px; }
  .mobile-nav-overlay {
    position: fixed; inset: 0; z-index: 70; width: 100%; height: 100%; border: 0;
    background: rgba(10,16,31,.55); opacity: 0; pointer-events: none; transition: opacity .18s ease;
  }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 80; width: min(86vw, 330px); height: 100vh; height: 100dvh;
    padding: 18px 14px 14px; overflow: hidden; transform: translateX(-105%); transition: transform .2s ease;
    box-shadow: 18px 0 45px rgba(9,16,33,.22);
  }
  .sidebar-nav { overflow-y: auto; padding: 2px 3px 10px; }
  .sidebar-footer { margin-top: 0; }
  .mobile-nav-open { overflow: hidden; }
  .mobile-nav-open .sidebar { transform: translateX(0); }
  .mobile-nav-open .mobile-nav-overlay { display: block; opacity: 1; pointer-events: auto; }
  .content { width: 100%; min-width: 0; padding: 28px 24px 42px; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .page-header > :last-child:not(:first-child), .page-header > form:last-child { width: 100%; }
  .page-header > a:last-child { width: auto; }
  .page-header h1 { font-size: clamp(30px, 5vw, 38px); }
  .status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .assistant-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid.two-columns, .ai-settings-grid, .settings-layout, .settings-layout.platform-settings-layout { grid-template-columns: 1fr; }
  .settings-side { position: static; }
  .filter-panel { align-items: stretch; }
  .filter-panel label { flex: 1 1 210px; }
  .filter-panel select { width: 100%; min-width: 0; }
  .new-dialog-form { grid-template-columns: minmax(0, 1fr); }
  .new-dialog-form select { min-width: 0; }
  .new-dialog-form .primary-action { width: 100%; }
  .queue-grid, .integration-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .mobile-header { padding-inline: 14px; }
  .mobile-brand .branding-tagline { display: none; }
  .content { padding: 22px 14px 34px; }
  .page-header { margin-bottom: 17px; }
  .page-header h1 { font-size: clamp(27px, 8vw, 34px); line-height: 1.08; overflow-wrap: anywhere; }
  .eyebrow { font-size: 10px; }
  .form-section, .side-card, .integration-card { padding: 18px 15px; border-radius: 14px; }
  .field-grid, .field-grid.two-columns, .notification-toggle-grid, .conversation-state-grid,
  .collection-field-editor, .collection-state-list, .dialog-facts { grid-template-columns: 1fr; }
  .field input, .field select, .field textarea, .inline-form input, .inline-form select,
  .filter-panel input, .filter-panel select, .test-message-form input, .test-message-form textarea { width: 100%; min-width: 0; }
  .inline-form, .filter-panel { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .inline-form > label, .filter-panel > label { width: 100%; }
  .field-grid > .save-button, .save-button, .primary-action, .secondary-button { min-height: 44px; }
  .field-grid > .save-button, .form-section > form > .primary-action, .settings-side > .save-button,
  .profile-form-section .save-button, .organization-create-section .primary-action { width: 100%; justify-self: stretch; }
  .form-actions { display: grid; grid-template-columns: 1fr; margin-top: 18px; }
  .form-actions > button, .form-actions > a { width: 100%; }
  .assistant-grid, .status-grid { grid-template-columns: 1fr; }
  .status-card { min-height: 0; }
  .assistant-card-actions { display: grid; grid-template-columns: 1fr; }
  .assistant-card-actions > a, .assistant-card-actions > form, .assistant-card-actions button { width: 100%; }
  .dialog-filters { max-width: 100%; overflow-x: visible; flex-wrap: wrap; padding-bottom: 4px; }
  form.dialog-filters { display: grid; overflow: visible; grid-template-columns: 1fr; }
  .dialog-filters a { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
  .dialog-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .dialog-actions > a, .dialog-actions > form, .dialog-actions button { width: 100%; }
  .composer-row { grid-template-columns: 1fr; }
  .composer-row button { min-height: 46px; }
  .message-bubble { max-width: 94%; }
  .color-field { grid-template-columns: 58px minmax(0, 1fr); }
  .form-section input[type="file"] { min-width: 0; font-size: 12px; }
  .form-section input[type="file"]::file-selector-button { max-width: 52%; margin-right: 7px; overflow: hidden; text-overflow: ellipsis; }
  .pagination { align-items: stretch; }
  .pagination-actions { width: 100%; }
  .pagination-actions a, .pagination-actions span { min-width: 44px; min-height: 44px; }

  /* Для ключевых административных списков строки становятся карточками. */
  .users-table, .dialogs-table:not(.events-table), .organizations-table, .audit-table { min-width: 0; display: block; }
  .users-table colgroup, .users-table thead,
  .dialogs-table:not(.events-table) thead, .organizations-table thead, .audit-table thead { display: none; }
  .users-table tbody, .dialogs-table:not(.events-table) tbody, .organizations-table tbody, .audit-table tbody { display: grid; gap: 12px; padding: 12px; }
  .users-table tr, .dialogs-table:not(.events-table) tr, .organizations-table tr, .audit-table tr {
    min-width: 0; display: grid; gap: 0; padding: 6px 12px; border: 1px solid var(--line);
    border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(37,50,78,.04);
  }
  .users-table td, .dialogs-table:not(.events-table) td, .organizations-table td, .audit-table td {
    min-width: 0; width: 100%; display: grid; grid-template-columns: minmax(105px, 36%) minmax(0, 1fr);
    align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px;
  }
  .users-table td:first-child, .dialogs-table:not(.events-table) td:first-child,
  .organizations-table td:first-child, .audit-table td:first-child { border-top: 0; }
  .users-table td::before, .dialogs-table:not(.events-table) td::before,
  .organizations-table td::before, .audit-table td::before {
    content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 800;
    letter-spacing: .035em; text-transform: uppercase;
  }
  .users-table td[colspan], .dialogs-table:not(.events-table) td[colspan],
  .organizations-table td[colspan], .audit-table td[colspan] { display: block; text-align: center; }
  .users-table td[colspan]::before, .dialogs-table:not(.events-table) td[colspan]::before,
  .organizations-table td[colspan]::before, .audit-table td[colspan]::before { display: none; }
  .users-table .table-control { min-height: 44px; font-size: 14px; }
  .users-table td:last-child { grid-template-columns: 1fr; align-items: stretch; }
  .users-table td:last-child::before { margin-bottom: 3px; }
  .user-actions button, .user-password-details summary { min-height: 44px; }
  .dialog-open-link { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--accent); color: #fff; }
  .dialogs-table-wrap, .table-wrapper { overflow-x: hidden; border-radius: 14px; }
  .events-table { min-width: 950px; }
  .events-table + * { max-width: 100%; }
}

@media (max-width: 430px) {
  .content { padding-inline: 12px; }
  .mobile-header { height: 60px; padding-inline: 12px; }
  .mobile-menu-button { width: 44px; height: 44px; flex-basis: 44px; }
  .mobile-brand .branding-name-badge { max-width: 210px; }
  .page-header h1 { font-size: clamp(26px, 8.8vw, 32px); }
  .status-card, .assistant-card { padding: 16px; }
  .users-table tbody, .dialogs-table:not(.events-table) tbody, .organizations-table tbody, .audit-table tbody { padding: 9px; }
  .users-table td, .dialogs-table:not(.events-table) td, .organizations-table td, .audit-table td {
    grid-template-columns: 1fr; gap: 5px;
  }
  .notification-toggle-grid .toggle-row { min-height: 64px; }
}

@media (max-height: 500px) and (max-width: 1024px) {
  .mobile-header { position: relative; }
  .sidebar { width: min(72vw, 330px); }
}

/* Единое подтверждение потенциально опасных действий. */
.confirmation-modal[hidden] { display: none; }
.confirmation-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.confirmation-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(10,16,31,.62); cursor: default; }
.confirmation-modal-card { position: relative; width: min(100%, 460px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 26px; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 24px 70px rgba(9,16,33,.28); outline: none; }
.confirmation-modal-card h2 { margin: 0 0 10px; font-size: 23px; }
.confirmation-modal-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.confirmation-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.confirmation-modal-actions button { min-height: 42px; }
.confirmation-modal-open { overflow: hidden; }

/* Legal v1 */
.app-legal-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.app-legal-footer a { color: var(--accent-dark); }
.legal-public-page { min-width: 320px; min-height: 100vh; background: var(--bg); }
.legal-public-header, .legal-public-footer { width: min(100% - 32px, 1080px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.legal-public-header { padding: 20px 0; }
.legal-public-brand { color: var(--accent-dark); font-size: 20px; font-weight: 850; text-decoration: none; }
.legal-public-main { width: min(100% - 32px, 900px); min-width: 0; margin: 28px auto 48px; }
.legal-public-footer { padding: 20px 0 30px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.legal-index-intro, .legal-document, .legal-owner-summary { padding: clamp(22px, 5vw, 44px); border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: 0 14px 42px rgba(37,50,78,.06); }
.legal-index-intro h1, .legal-document h1 { margin: 4px 0 12px; font-size: clamp(28px, 5vw, 42px); line-height: 1.08; overflow-wrap: anywhere; }
.legal-index-intro > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.legal-draft-warning { margin: 20px 0 0; padding: 14px 16px; border: 1px solid #f0ddb1; border-radius: 12px; background: var(--pending-bg); color: #795817; line-height: 1.55; }
.legal-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.legal-card { min-width: 0; display: grid; gap: 7px; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: #fff; text-decoration: none; box-shadow: 0 8px 25px rgba(37,50,78,.04); }
.legal-card:hover { border-color: #cbd3ff; }
.legal-card strong { overflow-wrap: anywhere; }
.legal-card span { color: var(--muted); font-size: 12px; }
.legal-document-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.legal-version { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #edf0ff; color: var(--accent-dark); font-size: 12px; font-weight: 750; }
.legal-effective { color: var(--muted); font-size: 13px; }
.legal-content { max-width: 100%; margin: 24px 0; color: #30394d; font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.legal-owner-summary { margin-top: 18px; }
.legal-owner-list { display: grid; gap: 0; margin: 16px 0 0; }
.legal-owner-list > div { min-width: 0; display: grid; grid-template-columns: minmax(150px, 35%) minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.legal-owner-list dt { color: var(--muted); }
.legal-owner-list dd { margin: 0; overflow-wrap: anywhere; }
.legal-contact { margin: 22px 0; overflow-wrap: anywhere; }
.legal-registration { margin-top: 28px; }
.legal-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.legal-table th, .legal-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--muted); font-size: 12px; }
.legal-preview-admin { margin-top: 18px; }
.legal-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 15px; cursor: pointer; line-height: 1.5; }
.legal-check input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); }
.legal-acceptance-list { display: grid; gap: 18px; }
.legal-acceptance-text { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 12px; }
.legal-acceptance-text summary { padding: 14px 16px; color: var(--accent-dark); font-weight: 750; cursor: pointer; }
.legal-acceptance-text .legal-content { max-height: 420px; overflow-y: auto; margin: 0; padding: 4px 16px 18px; }
.legal-accept-check { margin: 0 0 16px; padding: 14px; border: 1px solid #dfe4ff; border-radius: 11px; background: #f7f8ff; }
@media (max-width: 520px) {
  .confirmation-modal { align-items: end; padding: 12px; }
  .confirmation-modal-card { padding: 22px 18px; border-radius: 17px; }
  .confirmation-modal-actions { display: grid; grid-template-columns: 1fr; }
  .confirmation-modal-actions button { width: 100%; min-height: 46px; }
  .legal-card-grid { grid-template-columns: 1fr; }
  .legal-public-header, .legal-public-footer, .legal-public-main { width: min(100% - 24px, 900px); }
  .legal-public-main { margin-top: 16px; }
  .legal-document-heading { display: grid; }
  .legal-version { width: max-content; }
  .legal-owner-list > div { grid-template-columns: 1fr; gap: 4px; }
}