/* studio.css — холст-IDE отдельной страницы /studio (ADR-114).
   Только «хром холста»: полноэкранное превью-полотно как фон + плавающие
   скрываемые доки (проекты/чат) поверх него + топбар с пресетами устройств.
   ВНУТРЕННИЕ компоненты студии (code-layout/code-row/ai-msg/code-att/…) стилизует
   общий style.css — здесь мы их только перекомпоновываем в плавающие панели. */

/* ---- Каркас страницы ------------------------------------------------------ */
#studio-container { position: fixed; inset: 0; overflow: hidden; }

/* Гейт (нет токена / студия выключена / нужен консент) — по центру, поверх всего. */
#studioBoot,
#codeGate:not([hidden]) {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg-main); z-index: 60; padding: 24px;
}
#studioBoot .code-gate,
#codeGate .code-gate { max-width: 460px; text-align: center; }

/* ---- Превью-полотно (фон, весь экран) — ОРГАНИЧНАЯ GRID-РАСКЛАДКА (ADR-130) ---
   Холст — CSS-grid из трёх дорожек: [left-dock] [content] [right-dock].
     grid-template-columns: var(--col-left) 1fr var(--col-right)
   Пришвартованный (docked) док = реальная колонка (её ширину в --col-left/--col-right
   пишет studio.js applyDock). Content-колонка (1fr) — превью/граф — честно заполняет
   ОСТАТОК: разворот/сворачивание/ресайз docked-дока меняет --col-* → превью ПЕРЕТЕКАЕТ
   (а не масштабирует фикс-картинку). Откреплённый (floating) / свёрнутый в плашку док →
   его колонка 0 → превью на ПОЛНУЮ ширину, серой зоны нет структурно.
   Сами доки остаются position:fixed overlay (drag/resize/snap — задание D целы), grid
   лишь РЕЗЕРВИРУЕТ под docked-док место, чтобы content не заезжал под него. */
#studio-container { --col-left: 0px; --col-right: 0px; --topbar-h: 56px; }
.studio-viewport {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: var(--col-left) minmax(0, 1fr) var(--col-right);
  /* Единственный ряд = РЕАЛЬНАЯ доступная высота (фикс #2, ADR-133). Без этого
     auto-ряд grid растёт до layout-высоты пресет-рамки (transform:scale layout не
     меняет!) — «центрирование» шло в ряду высотой с пресет (1080px), рамка утопала
     низом за экран. minmax(0,1fr) — ряд ровно с вьюпорт, центровка честная. */
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  background:
    radial-gradient(circle at 25% 20%, #1b1c1e 0, var(--bg-main) 60%);
  overflow: hidden;
  /* Плавающий топбар (position:fixed) перекрывал бы верх превью-полотна. Центруемая
     область начинается ПОД баром во ВСЕХ режимах (свободный И пресеты устройств) —
     иначе на пресетах верх рамки (шапка генерируемого сайта) уходил под топбар. */
  padding-top: var(--topbar-h);
  transition: grid-template-columns .18s ease;
}
/* Во время live-перетаскивания/ресайза пришвартованного дока applyDock пишет --col-*
   на каждый pointermove, а сам док (fixed, инлайн) двигается мгновенно. Плавный
   transition колонок дал бы content-превью отставать от дока на ~0.18s (лаг/несинхрон,
   ломает «перетекает в такт»). На время манипуляции гасим transition — колонка идёт
   след-в-след за доком; для дискретных изменений (toggle/сворачивание/ресайз окна)
   transition остаётся. */
.studio-viewport.grid-live { transition: none; }
/* Content-колонка (превью-рамка) — средняя дорожка grid (1fr). В СВОБОДНОМ режиме
   рамка растягивается на всю content-колонку (grid уже вычел доки — без scale, без
   серых полей). В ПРЕСЕТ-режиме («примерка») рамка фикс-размера ЦЕНТРИРУЕТСЯ в
   content-колонке — вокруг остаётся серый «стол» устройства (это ожидаемо). */
/* Задание Q («белые пиксели на уголках»): белый iframe превью проступал точками на
   скруглённых углах рамки — сглаживание обрезки потомков у overflow:hidden не совпадает
   с кривой фона. ВАЖНО (дофикс по ревью): clip-path НА САМОЙ рамке резал бы весь её
   рендер, включая ВНЕШНИЙ box-shadow — в пресет-режиме пропадали тень-«девайс» и белый
   контур. Поэтому clip-path:inset(0 round r) режет сам БЕЛЫЙ iframe (#codeFrame ниже)
   той же кривой, а рамка оставляет себе border-radius+overflow:hidden и живую тень.
   Радиус — через --frame-r (наследуется iframe'ом), чтобы свободный режим (радиус 0)
   не резал углы на весь экран. */
.studio-frame-wrap {
  --frame-r: 10px;
  grid-column: 2;
  position: relative; justify-self: stretch; align-self: stretch;
  background: #fff; border-radius: var(--frame-r); overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  transition: width .18s ease, height .18s ease;
}
/* Свободный режим (десктоп): рамка на всю content-колонку, без тени-«девайса». */
.studio-viewport.fluid .studio-frame-wrap {
  width: 100%; height: 100%;
  --frame-r: 0px; box-shadow: none;
}
/* Пресет-режим: рамка фикс-размера центрируется в content-колонке (не растягивается). */
.studio-viewport:not(.fluid) .studio-frame-wrap {
  justify-self: center; align-self: center;
}
/* Q: белый iframe режется скруглённой кривой, совпадающей с фоном рамки, — точки на
   углах уходят; clip-path здесь (а НЕ на .studio-frame-wrap) не задевает тень рамки. */
#codeFrame {
  display: block; width: 100%; height: 100%; border: 0; background: #fff;
  clip-path: inset(0 round var(--frame-r));
}
.studio-frame-wrap[data-empty="1"] #codeFrame { display: none; }
/* Пустая рамка — тёмный фон в стиле деплоера (поток β), а не белый лист: плейсхолдер
   «Опишите задачу…» / «Создаю страницу…» рисует модуль (codeFillEmptyState), фон и
   анимации — общий .code-empty-state в style.css. background НЕ задаём здесь id-селектором,
   иначе он перебил бы градиент класса. */
.studio-frame-wrap[data-empty="1"] { background: var(--bg-main); }
#codePreviewNote {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  padding: 32px; text-align: center; color: var(--text-secondary);
  font: 15px/1.5 'Google Sans', sans-serif;
}
.studio-frame-wrap[data-empty="1"] #codePreviewNote { display: flex; }
/* Подпись «375×812 @ 62 %» под рамкой (наглядность масштаба). */
.studio-frame-label {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  font: 12px/1 'Roboto Mono', monospace; color: var(--text-secondary); white-space: nowrap;
}
.studio-viewport.fluid .studio-frame-label { display: none; }

/* Этап D (ADR-133): граф архитектуры — ПОЛНОЦЕННЫЙ наполнитель content-колонки,
   grid-ячейка наравне с превью-рамкой (та же дорожка 1fr), а не absolute-overlay,
   вручную сдвинутый на left/right (прежняя модель в style.css убрана). Переключатель
   «Страница ↔ Архитектура» меняет, ЧТО лежит в 1fr (display превью/графа), — раскладку
   доков не трогает; docked-доки резервируют свои колонки одинаково для обоих. inset:auto
   гасит base-`inset:0` (в LK-хосте .code-preview граф остаётся absolute-оверлеем). */
.studio-viewport .studio-arch {
  position: relative; inset: auto;
  grid-column: 2; grid-row: 1;
  min-width: 0; min-height: 0;
}

/* ---- Топбар (плавающая шапка) ---------------------------------------------
   Баг GG: топбар — СТРОГО одна строка фиксированной высоты --topbar-h. Раньше был
   flex-wrap:wrap без высоты: когда кнопки не помещались, шапка переносилась в два
   ряда и РОСЛА, а холст/доки позиционируются от фиксированной --topbar-h — контент
   оказывался ПОД шапкой. Теперь высота жёсткая, а помещаемость обеспечивают
   media-ступени ниже: подписи .tb-lbl второстепенных кнопок прячутся по приоритету
   (кнопки остаются иконками с title); на совсем узком экране (крайний случай) —
   горизонтальный скролл самой шапки, но высота НЕ меняется. */
.studio-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  height: var(--topbar-h); box-sizing: border-box; padding: 0 14px;
  background: rgba(20, 21, 23, .72); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
/* Кнопки топбара не сжимаются в кашу (текст nowrap) и не растягивают ряд по высоте. */
.studio-topbar > * { flex: 0 0 auto; }
.studio-topbar .studio-spacer { flex: 1 1 auto; }
.studio-topbar .brand-mini {
  display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--accent);
  white-space: nowrap;
}
.studio-topbar .brand-mini .material-symbols-outlined { font-size: 22px; }
.studio-usage { color: var(--text-secondary); font-size: 12.5px; white-space: nowrap; }
.studio-spacer { flex: 1 1 auto; min-width: 8px; }
.studio-topbar .btn { white-space: nowrap; }
/* «В ЛК» (F): выразительная кнопка в ЛЕВОМ углу сразу за лого — акцентная рамка/фон,
   заметнее нейтральной secondary, но в палитре темы. flex-shrink:0 — не сдавливается,
   и переключатель пресетов устройств за ней не уезжает (топбар с flex-wrap). */
.studio-back-lk {
  flex: 0 0 auto; color: var(--accent);
  background: rgba(168, 199, 250, .12); border: 1px solid var(--accent);
}
.studio-back-lk:hover { background: rgba(168, 199, 250, .2); }
.studio-back-lk .material-symbols-outlined { color: var(--accent); }

/* Кнопка-пресет размера («примерка» устройства). Живёт full-width в меню «Размер». */
.studio-dev-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 6px 9px; font: 500 12.5px 'Google Sans', sans-serif; cursor: pointer;
}
.studio-dev-btn .material-symbols-outlined { font-size: 17px; }
.studio-dev-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.studio-dev-btn.active { background: var(--bg-active); color: var(--accent); border-color: var(--accent); }
.studio-dev-custom {
  width: 62px; background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 7px; font-size: 12.5px;
}
.studio-dev-custom::-webkit-outer-spin-button,
.studio-dev-custom::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* «Ещё…» — дропдаун прочих пресетов (планшет/1280/своя рамка/поворот), ADR-130.
   На главной панели остаются только «Свободно» + «Телефон»; остальное живёт здесь. */
.studio-dev-more { position: relative; }
.studio-dev-more > summary {
  list-style: none; cursor: pointer;
}
.studio-dev-more > summary::-webkit-details-marker { display: none; }
.studio-dev-more-caret { font-size: 16px !important; margin-left: -2px; transition: transform .15s ease; }
.studio-dev-more[open] > summary { background: var(--bg-active); color: var(--accent); border-color: var(--accent); }
.studio-dev-more[open] .studio-dev-more-caret { transform: rotate(180deg); }
.studio-dev-more-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 45;
  display: flex; flex-direction: column; gap: 6px; min-width: 210px; padding: 8px;
  background: rgba(26, 27, 30, .96); backdrop-filter: blur(16px);
  background-clip: padding-box; /* Q: без светлых точек на углах над белым превью */
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
.studio-dev-more-menu .studio-dev-btn { justify-content: flex-start; width: 100%; }
.studio-dev-more-custom {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border);
}
.studio-dev-more-lbl { color: var(--text-secondary); font-size: 12px; width: 100%; }
.studio-dev-more-x { color: var(--text-secondary); }

/* «Ещё» топбара (declutter, дофикс к ADR-130): общий дропдаун, куда переехали
   «В новой вкладке», «Обновить превью», «Проверить и починить» и пресеты устройств.
   Каркас .studio-dev-more/.studio-dev-more-menu переиспользован целиком (в т.ч.
   fixed-позиционирование в .tb-scroll/≤800px по var(--tb-menu-x) из studio.js);
   ниже — только внутренняя раскладка пунктов. */
#studioTopMore .studio-dev-more-menu { min-width: 232px; }
/* Подписи внутри меню ВСЕГДА видимы: media-лесенка топбара прячет .tb-lbl/.code-afx-label
   ради тесноты в САМОМ баре — в выпадашке места хватает, иконка без текста нечитаема. */
#studioTopMore .studio-dev-more-menu .tb-lbl,
#studioTopMore .studio-dev-more-menu .code-afx-label { display: inline !important; }
/* Пункты-кнопки — столбцом во всю ширину (как .studio-dev-btn в меню устройств). */
#studioTopMore .studio-dev-more-menu > .btn { width: 100%; justify-content: flex-start; }

/* Тогглы доков в топбаре: активны, когда док открыт. */
.studio-dock-toggle.active { background: var(--bg-active); color: var(--accent); border-color: var(--accent); }

/* ---- Плавающие доки (проекты / чат) --------------------------------------- */
.studio-dock {
  position: fixed; z-index: 30; top: 64px; bottom: 16px;
  display: flex; flex-direction: column; overflow: hidden;
  background: rgba(26, 27, 30, .82); backdrop-filter: blur(16px);
  /* Q: полупрозрачный фон не подлезает под сглаживание рамки — внешний контур угла
     остаётся НЕПРОЗРАЧНЫМ бордером, и над белым сайтом в превью углы не «белеют». */
  background-clip: padding-box;
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
  transition: transform .22s ease, opacity .18s ease;
}
/* Сторона дока (left/right) — КЛАСС, который переключает JS (ADR-133 #1: пользователь
   меняет доки местами). Класс задаёт только якорь у края и направление collapsed;
   ШИРИНА привязана к самому доку (id), иначе свап сторон менял бы и ширину. */
.studio-dock.left { left: 16px; }
.studio-dock.right { right: 16px; }
#dock-projects { width: 270px; }
/* Ширина чат-дока — из переменной (E): медиа-запросы больших экранов её увеличивают.
   Пользовательский dockPos перебивает инлайн-стилем width (custom-pos) — media не мешает. */
#dock-chat { width: var(--chat-dock-w, 400px); max-width: calc(100vw - 32px); }
.studio-dock-head {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); color: var(--text-primary); font-weight: 500;
  cursor: grab; user-select: none; touch-action: none;
}
.studio-dock-head:active { cursor: grabbing; }
.studio-dock-head .material-symbols-outlined { font-size: 19px; color: var(--accent); }
/* Ручка-grip перетаскивания (D.2): узкая полоска с точками. Гарантирует захват drag
   даже если кнопки заняли края шапки — на ней курсор move (перебивает grab шапки). */
.studio-dock-grip {
  flex: 0 0 auto; width: 12px; align-self: stretch; margin: -4px 0; cursor: move;
  border-radius: 4px; touch-action: none;
  background-image: radial-gradient(var(--text-secondary) 1.1px, transparent 1.2px);
  background-size: 5px 5px; background-position: center; opacity: .5;
}
.studio-dock-grip:hover { opacity: .9; }
/* Первая кнопка справа в шапке отъезжает вправо (add/min/reset — не тянут за собой drag). */
.studio-dock-head .icon-btn { margin-left: auto; cursor: pointer; }
.studio-dock-head .icon-btn + .icon-btn { margin-left: 0; }
/* Кнопка сброса дока видна только когда док смещён/изменён (класс moved). */
.studio-dock-reset { display: none; }
.studio-dock.moved .studio-dock-reset { display: inline-flex; }
/* «Развернуть» видна только у свёрнутой плашки; «Свернуть» — только у развёрнутого дока. */
.studio-dock-expand { display: none; }
.studio-dock.head-only .studio-dock-expand { display: inline-flex; }
.studio-dock.head-only .studio-dock-min,
.studio-dock.head-only .studio-dock-reset { display: none; }
.studio-dock-body { flex: 1 1 auto; overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; min-height: 0; }

/* ---- Ресайз со всех сторон (D.1): 8 ручек (4 грани + 4 угла) ----
   Ручки лежат ВНУТРИ дока (у него overflow:hidden — торчащие наружу зоны обрезались бы).
   Углы крупнее граней; зона захвата 7-8px по краю, ~16px в углах. */
.studio-rz { position: absolute; z-index: 3; touch-action: none; }
.studio-rz.rz-n { top: 0; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.studio-rz.rz-s { bottom: 0; left: 10px; right: 10px; height: 7px; cursor: ns-resize; }
.studio-rz.rz-e { right: 0; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.studio-rz.rz-w { left: 0; top: 10px; bottom: 10px; width: 7px; cursor: ew-resize; }
.studio-rz.rz-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.studio-rz.rz-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.studio-rz.rz-se { right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize; }
.studio-rz.rz-sw { left: 0; bottom: 0; width: 14px; height: 14px; cursor: nesw-resize; }
/* Юго-восточный угол несёт видимый «грип-уголок» (наследие прежнего ресайза). */
.studio-rz.rz-se {
  background: linear-gradient(135deg, transparent 50%, var(--border) 50%, var(--border) 62%, transparent 62%, transparent 74%, var(--border) 74%, var(--border) 86%, transparent 86%);
}
/* Свёрнутый док (плашка-шапка): скрываем тело и ручки ресайза, компактная ширина. */
.studio-dock.head-only { width: auto !important; height: auto !important; bottom: auto; }
.studio-dock.head-only .studio-dock-body,
.studio-dock.head-only .studio-rz { display: none; }
.studio-dock.head-only .studio-dock-head { border-bottom: 0; padding-right: 8px; }

/* Aero-snap: полупрозрачный призрак целевой зоны разворота (D.3). */
.studio-snap-ghost {
  position: fixed; z-index: 22; display: none; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 12px;
  background: rgba(168, 199, 250, .12); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0);
  transition: left .08s ease, top .08s ease, width .08s ease, height .08s ease;
}
.studio-snap-ghost.show { display: block; }

/* Док с кастомной позицией (drag/resize): фиксируем left/top/width инлайном из JS,
   снимаем родные left:16/right:16. collapsed уводит его за край через transform,
   позиция в left/top сохраняется для восстановления. */
.studio-dock.custom-pos { right: auto; bottom: auto; }
/* Файл-дерево на холсте: занимает остаток дока проектов (после проектов/чатов). */
#dock-projects .code-file-tree { max-height: none; flex: 1 1 auto; min-height: 60px; }

/* 🔴 Строка «что правим» (04.08.2026) на месте прежнего дропдауна бизнесов. Форма
   намеренно НЕ кнопочная: ни рамки-триггера, ни каретки, ни hover-подсветки — это
   подпись «где я», а не второй вход в список. Внутренности переиспользуют
   .code-proj-cur (двухстрочный заголовок+подпись с обрезкой), чтобы вид совпадал с
   такой же строкой в кабинете и не разъезжался при правках. */
.code-ctx-slot { flex-shrink: 0; margin-bottom: 2px; }
.code-ctx {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 2px 9px; border-bottom: 1px solid var(--border);
}
.code-ctx > .material-symbols-outlined { font-size: 18px; color: var(--text-secondary); flex-shrink: 0; }

/* Скрытое состояние: уезжает за свой край + не ловит клики. */
.studio-dock.left.collapsed { transform: translateX(-120%); opacity: 0; pointer-events: none; }
.studio-dock.right.collapsed { transform: translateX(120%); opacity: 0; pointer-events: none; }

/* «Язычки» возврата у краёв, когда док скрыт. */
.studio-tab {
  position: fixed; z-index: 25; top: 50%; transform: translateY(-50%);
  display: none; align-items: center; gap: 6px; cursor: pointer;
  background: rgba(26, 27, 30, .9); color: var(--text-primary);
  border: 1px solid var(--border); padding: 10px 8px;
  font: 500 12px 'Google Sans', sans-serif;
}
.studio-tab.left { left: 0; border-radius: 0 12px 12px 0; }
.studio-tab.right { right: 0; border-radius: 12px 0 0 12px; }
.studio-tab .material-symbols-outlined { font-size: 19px; color: var(--accent); }
.studio-tab.show { display: flex; }

/* Внутренняя раскладка доков поверх общих code-* стилей: они рассчитаны на grid —
   на холсте мы кладём их части в вертикальный поток дока. */
.studio-dock .code-projects,
.studio-dock .code-chats { display: block; }
.studio-dock-body .code-side-label { margin-top: 6px; }
/* Чат-док: лог тянется, ввод/вложения/таймлайн — снизу (как в code-main). */
#dock-chat .studio-dock-body { padding: 0; }
#dock-chat .code-log { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; }
#dock-chat .code-timeline,
#dock-chat .code-attach { flex: 0 0 auto; }
#dock-chat .code-input { flex: 0 0 auto; }
#dock-chat .code-drop-hint { border-radius: 0 0 14px 14px; }

/* ---- Ступени помещаемости топбара (баг GG + дофикс по ревью 3a3b4f3) --------
   Одна строка фикс-высоты: на каждой ступени прячем подписи .tb-lbl менее частых
   кнопок (иконка + title остаются — функциональность цела). Приоритет видимых
   подписей: примарные действия (Опубликовать/Проверить-починить) держатся дольше
   всех, декор (usage/бренд) сворачивается первым.
   Калибровка — по ШИРОКОМУ случаю: сервис-проект, у которого в топбаре виден
   #codeAutofixBtn «Проверить и починить» (code-studio.js показывает его только
   сервисам; прежние пороги мерились без него и топбар сервисов переполнялся до
   +172px). Замер контента ступеней: ≈2013 / 1749 / 1545 / 1308 / 1140 / 873px;
   каждый порог несёт запас ≈50px на другие метрики шрифта (фолбэк без Google
   Fonts, иные ОС, лёгкий зум). У статики (кнопка скрыта) подписи сворачиваются
   чуть раньше строго необходимого — осознанная цена единого набора порогов.
   Страховка от ЛЮБОЙ недокалибровки — динамический .tb-scroll ниже. */
@media (max-width: 2060px) { .studio-usage { display: none; } }        /* полный контент ≈2013 */
@media (max-width: 1800px) {                                           /* ≈1749 */
  .brand-mini .tb-lbl,
  #studioOpenTab .tb-lbl { display: none; }
}
@media (max-width: 1600px) {                                           /* ≈1545 */
  #studioDevMore > summary .tb-lbl,
  .studio-dock-toggle .tb-lbl { display: none; }
}
@media (max-width: 1360px) {                                           /* ≈1308 */
  .studio-vm-btn .tb-lbl,
  .studio-back-lk .tb-lbl { display: none; }
}
@media (max-width: 1360px) {                                           /* ≈1308 */
  /* «Доступ в CRM» — подпись держится дольше вторичных, но сворачивается РАНЬШЕ
     примарного «Опубликовать»: кнопка видна только проектам с auth, т.е. на этой
     ступени топбар с ней шире калиброванного ≈1308 (иконка + title остаются). */
  #codeAdminAccessBtn .code-adm-label { display: none; }
}
@media (max-width: 1200px) {                                           /* ≈1140 */
  #codeAutofixBtn .code-afx-label,
  #codePublishBtn .code-pub-label { display: none; }
  .studio-topbar { gap: 8px; }
}
@media (max-width: 920px) { .code-seo-hover { display: none; } }       /* ≈873 */

/* Скролл-фолбэк: топбар скроллится ГОРИЗОНТАЛЬНО внутри своей фикс-высоты (холст
   не перекрывается). Включается ДВУМЯ путями:
   • media ≤800px — CSS-гарантия узкого экрана (все подписи уже иконки), живёт без JS;
   • класс .tb-scroll — вешает studio.js, когда контент РЕАЛЬНО шире бара
     (scrollWidth > clientWidth) на ЛЮБОЙ ширине: страховка между ступенями лестницы
     (широкий шрифт-фолбэк, зум, длинный #codeUsage) — кнопки «⇄»/«Чат» больше не
     уходят за правый край невидимо (страничного скролла у fixed-бара нет).
   ВАЖНО (дофикс по ревью): overflow-x:auto + overflow-y:hidden делают бар
   КЛИП-КОНТЕЙНЕРОМ — absolute-дропдауны, выпадающие ниже бара, резались ЦЕЛИКОМ
   (на мобиле меню «Ещё» с пресетами/своей рамкой/поворотом было недоступно вовсе).
   Поэтому в обоих скролл-состояниях:
   • у бара гасится backdrop-filter (он создаёт containing block и для fixed-потомков),
     взамен фон делаем почти непрозрачным — читаемость не хуже;
   • меню «Ещё» становится position:fixed → выходит из клипа и живёт ПОД баром;
     координату X по кнопке-триггеру ставит studio.js (var(--tb-menu-x));
   • SEO-popover (в .tb-scroll при ширинах >920px) тоже fixed — координаты
     var(--tb-pop-x/y) ставит studio.js при наведении (геометрия та же: верх
     popover'а = низ триггера, hover-«мостик» padding-top цел). */
@media (max-width: 800px) {
  .studio-topbar {
    overflow-x: auto; overflow-y: hidden;
    backdrop-filter: none; background: rgba(20, 21, 23, .97);
  }
  .studio-dev-more-menu {
    position: fixed; top: calc(var(--topbar-h) + 6px);
    left: var(--tb-menu-x, 8px); max-width: calc(100vw - 16px);
  }
}
.studio-topbar.tb-scroll {
  overflow-x: auto; overflow-y: hidden;
  backdrop-filter: none; background: rgba(20, 21, 23, .97);
}
.studio-topbar.tb-scroll .studio-dev-more-menu {
  position: fixed; top: calc(var(--topbar-h) + 6px);
  left: var(--tb-menu-x, 8px); max-width: calc(100vw - 16px);
}
.studio-topbar.tb-scroll .code-seo-pop {
  position: fixed; top: var(--tb-pop-y, var(--topbar-h));
  left: var(--tb-pop-x, 50%);
}

/* ---- Узкий экран: доки становятся почти-полноэкранными оверлеями -----------
   Селекторы по id — ширины доков теперь тоже на id (#dock-*), классовое правило
   media их не перебило бы (ADR-133 #1). top:64px — топбар больше НЕ растёт в два
   ряда (баг GG), прежний запас 116px не нужен. */
@media (max-width: 720px) {
  #dock-projects,
  #dock-chat { left: 8px; right: 8px; width: auto; top: 64px; }
}