/* Оболочка «площадка → аккаунт → раздел».
   Телефон (до 900 px): площадки в нижней панели, аккаунт — кнопкой в шапке, разделы — листаемыми чипсами.
   Сайт (от 900 px): площадки слева с аккаунтами под активной, разделы — вкладками, справа «Расписание сегодня».
   Цвета — токены из style.css, поэтому тёмная тема работает так же, как раньше. */

/* атрибут hidden всегда прячет: иначе display:flex у блоков (например, превью вложения) его перебивал */
[hidden] { display: none !important; }

svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.shell .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.shell .dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.shell .dot.off { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.shell .dot.none { display: none; }

/* ---------- левое меню (сайт) ---------- */
.side { display: none; }
.side-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; padding: 4px 10px 10px; }
.side-brand .logo { width: 28px; height: 28px; border-radius: 8px; background: var(--btn); color: var(--btn-text); display: grid; place-items: center; font-size: 14px; }
.side-group { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); padding: 14px 10px 4px; }
.side-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none; }
.side-item:hover { background: var(--bg); }
.side-item.on { background: var(--chip-bg); color: var(--chip-text); font-weight: 600; }
.side-item .t, .side-acc .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .count { font-size: 12px; color: var(--hint); font-weight: 400; font-variant-numeric: tabular-nums; }
.side-acc { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 36px; padding: 6px 10px 6px 36px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.side-acc:hover { background: var(--bg); }
.side-acc.on { color: var(--chip-text); font-weight: 600; background: var(--chip-bg); }
.side-acc.add { color: var(--hint); }
.side-acc svg.i { width: 16px; height: 16px; margin-left: -4px; }
.side-acc .pl { font-size: 11px; color: var(--hint); font-weight: 400; }
.side-spacer { flex: 1; }
.side-me { display: flex; align-items: center; gap: 10px; padding: 10px; margin-top: 8px; border-top: 1px solid var(--border); font-size: 13px; }
.side-me .av { width: 30px; height: 30px; border-radius: 50%; background: var(--chip-bg); color: var(--chip-text); display: grid; place-items: center; font-weight: 700; flex: none; }
.side-me .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-me .who .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-me .who .r { color: var(--hint); font-size: 12px; }
.side-me .out { color: var(--hint); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; }
.side-me .out:hover { background: var(--bg); color: var(--text); }

/* ---------- шапка аккаунта ---------- */
.main { min-width: 0; }
.pane-head { position: sticky; top: 0; z-index: 6; background: var(--card); border-bottom: 1px solid var(--border);
  padding: calc(10px + var(--safe-top)) 14px 0; display: flex; flex-direction: column; gap: 8px; }
.head-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acc-switch { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 40px; padding: 7px 12px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; }
.acc-switch .acc-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-switch .chev { width: 18px; height: 18px; color: var(--hint); }
.acc-switch.static { cursor: default; }
.acc-switch.static .chev { display: none; }
.state-pill { display: none; font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.state-pill.on { background: var(--ok-bg); color: var(--ok); }
.state-pill.off { background: var(--warn-bg); color: var(--warn); }
.head-sub { display: none; color: var(--hint); font-size: 13px; }
.head-actions { display: flex; gap: 8px; }
.head-actions .btn { gap: 6px; min-height: 40px; }
.head-actions .btn svg.i { width: 16px; height: 16px; }
.head-actions .btn.secondary span { display: none; }   /* на телефоне — только значки «пауза/обновить» */
.head-actions .btn.primary span { display: none; }
.head-actions .btn { padding: 8px 10px; }
.pane-head .status { font-size: 13px; }
.pane-head .status[hidden] { display: none; }

/* разделы: чипсы на телефоне */
.sec-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; margin: 0 -14px; padding-left: 14px; padding-right: 14px; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs[hidden] { display: none; }
.sec { flex: none; border: 1px solid var(--border); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 13px;
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.sec.on { background: var(--btn); border-color: var(--btn); color: var(--btn-text); font-weight: 600; }

/* ---------- содержимое ---------- */
.pane-body { display: block; }
.shell #app { max-width: 640px; }
.pane-hint { font-size: 13px; color: var(--hint); margin: 0 2px 10px; line-height: 1.45; }
.soon-box h3 { margin: 0 0 8px; font-size: 16px; }
.soon-box p { margin: 0 0 8px; line-height: 1.5; }
.studio-pane { background: transparent; }
.studio-pane .card:first-child, .studio-pane > .notice:first-child { margin-top: 0; }
.studio select { width: auto; }
.ana-switch { display: flex; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 12px; width: max-content; max-width: 100%; }
.ana-switch[hidden] { display: none; }
.ana-switch button { border: 0; background: none; border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; color: var(--hint); cursor: pointer; min-height: 34px; }
.ana-switch button.on { background: var(--chip-bg); color: var(--chip-text); font-weight: 600; }

.today { display: none; }

/* ---------- нижняя панель (телефон) ---------- */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; background: var(--card); border-top: 1px solid var(--border);
  padding: 4px 4px calc(4px + var(--safe-bottom)); }
.bottom-nav button { flex: 1; min-width: 0; min-height: 52px; border: 0; background: none; color: var(--hint); font: inherit; font-size: 11px; font-weight: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.bottom-nav button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bottom-nav button.on { color: var(--link); font-weight: 700; }

/* ---------- лист выбора аккаунта ---------- */
.sheet-wrap { position: fixed; inset: 0; z-index: 30; background: rgba(15, 23, 42, .4); display: flex; align-items: flex-end; }
.sheet-wrap[hidden] { display: none; }
.sheet { width: 100%; max-height: 80vh; overflow: auto; background: var(--card); border-radius: 18px 18px 0 0; padding: 14px 10px calc(14px + var(--safe-bottom)); }
.sheet-title { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--hint); padding: 4px 10px 8px; }
.sheet .side-acc { padding-left: 12px; min-height: 46px; font-size: 15px; }

/* ---------- сайт ---------- */
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .shell:not([hidden]) { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
  .side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 0; height: 100vh; overflow: auto;
    background: var(--card); border-right: 1px solid var(--border); padding: calc(14px + var(--safe-top)) 10px 10px; }
  .bottom-nav { display: none; }
  .pane-head { padding: 16px 24px 0; gap: 10px; }
  .acc-switch { flex: 0 1 auto; border: 0; background: none; padding: 0; font-size: 20px; min-height: 0; cursor: default; }
  .acc-switch .chev { display: none; }
  .state-pill { display: inline-block; }
  .head-sub { display: inline; }
  .head-actions { margin-left: auto; }
  .head-actions .btn span { display: inline !important; }
  .head-actions .btn { padding: 8px 14px; }
  .sec-tabs { gap: 2px; padding-bottom: 0; margin: 0; padding-left: 0; padding-right: 0; }
  .sec { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 12px; min-height: 42px; color: var(--hint); font-size: 14px; }
  .sec:hover { color: var(--text); }
  .sec.on { background: none; color: var(--link); border-bottom-color: var(--link); }
  .pane-head .status { margin-top: -4px; }
  .pane-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 24px 40px; align-items: start; }
  .pane-body:has(.today:not([hidden])) { grid-template-columns: minmax(0, 1fr) 280px; }
  .shell #app { padding: 0; max-width: 820px; margin: 0; }
  .shell #app:has(.studio-pane:not([hidden])) { max-width: 1120px; }
  .today:not([hidden]) { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 130px;
    background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow-card); }
  .today h3 { margin: 0; font-size: 14px; }
  .today .slots { display: flex; flex-wrap: wrap; gap: 6px; }
  .today .slot { font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
  .today .slot.used { background: var(--chip-bg); color: var(--chip-text); border-color: transparent; font-weight: 600; }
  .today .kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--hint); }
  .today .kv b { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
  .toast { left: auto; right: 24px; bottom: 24px; max-width: 420px; }
  .sheet-wrap { align-items: center; justify-content: center; }
  .sheet { max-width: 420px; border-radius: 16px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .pane-body:has(.today:not([hidden])) { grid-template-columns: minmax(0, 1fr); }
  .today:not([hidden]) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shell * { transition: none !important; } }

/* ---------- раздел «Чат-бот» ---------- */
.side-item .count.new { background: var(--btn); color: var(--btn-text); border-radius: 999px; padding: 1px 7px; font-weight: 700; }
#botPane { display: flex; flex-direction: column; gap: 12px; }
.bot-notice { background: var(--warn-bg); color: var(--warn); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.bot-step { display: flex; flex-direction: column; gap: 10px; }
.bot-step-head { display: flex; align-items: center; gap: 10px; }
.bot-step-head h3 { margin: 0; font-size: 16px; }
.bot-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; font-size: 14px;
  background: var(--chip-bg); color: var(--chip-text); }
.bot-step.done .bot-step-n { background: var(--ok-bg); color: var(--ok); }
.bot-step p { margin: 0; }
.bot-ok { font-size: 14px; line-height: 1.5; }
.bot-ok a { color: var(--link); }
.bot-howto { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.6; }
.bot-howto a { color: var(--link); }
.bot-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.bot-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.bot-stat { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.bot-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.bot-stat span { font-size: 12px; color: var(--hint); }
.bot-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bot-toolbar .pane-hint { margin: 0; flex: 1; min-width: 200px; }
.bot-camp.off { opacity: .6; }
.bot-camp-title { font-weight: 600; font-size: 15px; margin: 4px 0 2px; overflow-wrap: anywhere; }
.bot-camp-stats { font-size: 13px; color: var(--hint); }
.bot-lead-line { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.bot-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); }
.bot-badge.ok { background: var(--ok-bg); color: var(--ok); }
.bot-editor { display: flex; flex-direction: column; gap: 12px; }
.bot-editor h3 { margin: 0; font-size: 16px; }
.bot-editor .section-title { margin: 8px 0 0; }
.bot-field { display: flex; flex-direction: column; gap: 4px; }
.bot-field .field-label { font-size: 13px; font-weight: 600; }
.bot-field .file-hint { margin: 0 2px; }
.bot-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.bot-toggle input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--btn); flex: none; }
.bot-toggle span { display: flex; flex-direction: column; gap: 1px; }
.bot-toggle small { color: var(--hint); font-size: 12px; }
.bot-back { align-self: flex-start; }
.bot-status { width: auto; padding: 6px 10px; font-size: 13px; }
.bot-toolbar .btn, .bot-actions .btn, .bot-step .btn { width: auto; }