/* ========================================================================== AiAssistent — каркас большого экрана. Зачем отдельный файл: app.css выстрадан под телефон, и трогать его правила ради ноутбука опасно. Здесь только надстройка. Подключается ПОСЛЕ app.css, поэтому переопределяет его — но исключительно внутри медиазапросов от 820px. Ниже 820px этот файл не даёт ни одного правила, влияющего на раскладку: телефон обязан остаться таким же до пикселя. Три режима (атрибут data-layout на ставит shell.js): phone (<820) — как было: таббар снизу, свайпы, шторки tablet (820–1023) — левая колонка иконками, правая панель шторкой поверх desk (>=1024) — три колонки: навигация | работа | подробности Правило разделения: всё, что выводится ИЗ ШИРИНЫ, решают только медиазапросы — тогда раскладка верна ещё до того, как отработает JS (и если он не отработает вообще). Атрибуты на несут лишь то, чего в ширине нет: data-rail="wide|mini" (владелец свернул колонку) и data-inspector="1" (панель открыта). data-layout остаётся для JS и других модулей, а в стилях служит страховкой :root:not([data-layout="phone"]) — она согласована с медиазапросом, поэтому даже устаревший на кадр атрибут ничего не ломает. Цвета, радиусы и типографика — только переменные из app.css, своих не заводим: иначе светлая тема разъедется. ========================================================================== */ :root{ --rail-w:260px; /* развёрнутая левая колонка */ --rail-mini:60px; /* свёрнутая: только иконки */ --insp-w:0px; /* панель подробностей закрыта — колонки просто нет */ --insp-open:360px; /* Высота шапки — не для каркаса (сетка считает её сама), а на случай, если panels.css понадобится прижать что-то к её нижней границе. */ --topbar-h:calc(54px + var(--sat)); } /* Каркасных элементов на телефоне нет вообще — ни размера, ни нажатий. Показываем их адресно в медиазапросах ниже. */ #rail,#inspector{display:none} /* ═════════════════ большой экран: сетка ═════════════════ */ @media (min-width:820px){ :root:not([data-layout="phone"]) #app{ /* Высоту по-прежнему диктует --app-h из initViewport — её не трогаем, иначе на планшете с клавиатурой уедет композер. Меняем только раскладку внутри: было flex-колонкой, стало сеткой. Правая колонка шириной 0, пока панель закрыта: так её появление не требует перестройки шаблона, только смены одной переменной. */ display:grid; grid-template-columns:var(--rail-w) minmax(0,1fr) var(--insp-w); grid-template-rows:auto auto minmax(0,1fr); grid-template-areas: "rail topbar topbar" "rail banner banner" "rail screens inspector"; /* Анимировать grid-template-columns тут нельзя: когда ширина приходит из переменной, Chrome оставляет дорожку на прежнем значении и колонка просто не раскрывается (проверено). Поэтому колонка появляется мгновенно, а въезжает сама панель — ниже, keyframes inspIn. */ } :root:not([data-layout="phone"]) #rail{grid-area:rail; display:flex} :root:not([data-layout="phone"]) .topbar{grid-area:topbar} :root:not([data-layout="phone"]) #offlineBanner{grid-area:banner} :root:not([data-layout="phone"]) #screens{grid-area:screens; min-height:0} /* На ноутбуке панель не въезжает: появление третьей колонки само по себе заметное движение, а поверх работы ничего не проезжает. Анимация нужна там, где панель накрывает содержимое — на планшете (ниже). */ :root:not([data-layout="phone"]) #inspector{grid-area:inspector; display:flex} /* Таббар снизу и левая колонка — взаимоисключающие способы навигации: два одновременно путают, какой из них главный. */ :root:not([data-layout="phone"]) #tabbar{display:none} /* Имя приложения на большом экране живёт в колонке слева, в шапке оно было бы вторым таким же. Точку состояния оставляем: chat.js крутит ей классы, и она нужна глазу — рядом с кнопкой состояния. */ :root:not([data-layout="phone"]) .brand{flex:1; justify-content:flex-start; padding-left:6px} :root:not([data-layout="phone"]) .brand span:not(.dot){display:none} /* Тосты всплывают над рабочей областью, а не над колонками: таббара внизу больше нет, и держать для него запас в 84px незачем. */ :root:not([data-layout="phone"]) .toasts{ left:var(--rail-w); right:var(--insp-w); bottom:calc(20px + var(--sab)); } } /* ═════════════════ левая колонка ═════════════════ */ #rail{ flex-direction:column; min-height:0; overflow:hidden; background:var(--surface); border-right:1px solid var(--line); padding-top:var(--sat); padding-bottom:var(--sab); } /* Марка выровнена по высоте шапки — иначе две горизонтальные линии (граница колонки и граница шапки) не сходятся, и это сразу видно. */ #railBrand{ flex:0 0 auto; display:flex; align-items:center; gap:9px; height:54px; padding:0 7px 0 14px; border-bottom:1px solid var(--line); } .rb-ico{flex:0 0 auto; color:var(--accent); font-size:19px; line-height:1} .rb-name{ flex:1 1 auto; min-width:0; font-weight:650; font-size:15px; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #railToggle{ flex:0 0 auto; width:34px; height:34px; border-radius:10px; color:var(--muted); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; } /* Проекты — единственная растущая часть колонки: их может быть много, а навигация и подвал должны оставаться на месте. */ #railProjects{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:8px} #railProjects:empty{flex:0 0 auto; padding:0} #railNav{flex:0 0 auto; display:flex; flex-direction:column; gap:2px; padding:8px} .rnav{ display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:0 11px; border-radius:11px; color:var(--muted); font-size:14px; text-align:left; transition:background .14s ease, color .14s ease; } .rnav .ri{flex:0 0 22px; font-size:17px; line-height:1; text-align:center} .rnav .rl{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} /* Где ты находишься — должно читаться без наведения и без сравнения */ .rnav.active{background:var(--accent-soft); color:var(--accent); font-weight:600} /* Подвал всегда прижат к низу: даже когда проектов нет и колонка почти пустая */ #railFoot{ flex:0 0 auto; margin-top:auto; padding:8px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:7px; } #railAdd{ display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:0 11px; border-radius:11px; border:1px dashed var(--line2); color:var(--muted); font-size:14px; text-align:left; transition:background .14s ease, color .14s ease, border-color .14s ease; } #railAdd .ri{flex:0 0 22px; font-size:16px; line-height:1; text-align:center} #railAdd .rl{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} #railStatus{padding:0 4px; font-size:12px; line-height:1.4; color:var(--faint)} /* Пустая строка состояния не должна оставлять дырку в подвале */ #railStatus:empty{display:none} /* ─────────── свёрнутая колонка: только иконки ─────────── Подписи убираем целиком, а не «сужаем»: слово, обрезанное посередине, читается как поломка. Ноутбук: колонка сворачивается по кнопке или Ctrl+B — это выбор владельца, поэтому здесь (и только здесь) стилями правит data-rail. Кнопку оставляем и в узком виде: иначе о Ctrl+B знает лишь тот, кто читал код. */ @media (min-width:1024px){ :root[data-rail="mini"]{--rail-w:var(--rail-mini)} :root[data-rail="mini"] #railBrand{justify-content:center; padding:0} :root[data-rail="mini"] .rnav, :root[data-rail="mini"] #railAdd{justify-content:center; padding:0} :root[data-rail="mini"] .rnav .ri, :root[data-rail="mini"] #railAdd .ri{flex:0 0 auto} :root[data-rail="mini"] .rnav .rl, :root[data-rail="mini"] #railAdd .rl, :root[data-rail="mini"] #railStatus, :root[data-rail="mini"] .rb-ico, :root[data-rail="mini"] .rb-name{display:none} :root[data-rail="mini"] #railProjects{padding:8px 6px} } /* Планшет: 1024px на три колонки не делится, подписям места нет в принципе — колонка узкая всегда, и кнопка сворачивания там лишняя (сворачивать некуда). */ @media (min-width:820px) and (max-width:1023px){ :root{--rail-w:var(--rail-mini)} #railBrand{justify-content:center; padding:0} .rnav,#railAdd{justify-content:center; padding:0} .rnav .ri,#railAdd .ri{flex:0 0 auto} .rnav .rl,#railAdd .rl,#railStatus,.rb-name,#railToggle{display:none} #railProjects{padding:8px 6px} } /* ═════════════════ панель подробностей ═════════════════ */ #inspector{ flex-direction:column; min-width:0; min-height:0; /* Пока панель закрыта, её колонка нулевой ширины: без обрезки содержимое вылезало бы поверх рабочей области. */ overflow:hidden; background:var(--surface); border-left:1px solid var(--line); } .insp-head{ flex:0 0 auto; display:flex; align-items:center; gap:8px; min-height:46px; padding:0 6px 0 14px; border-bottom:1px solid var(--line); } #inspectorTitle{ flex:1 1 auto; min-width:0; font-size:14px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #inspectorClose{ flex:0 0 auto; width:38px; height:38px; border-radius:10px; color:var(--muted); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; } #inspectorBody{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:14px 14px calc(18px + var(--sab)); } /* Один и тот же построитель содержимого должен одинаково выглядеть и в нижней шторке (телефон), и в этой панели — иначе каждый вызов openInspector пришлось бы верстать дважды. Поэтому повторяем оформление полей из .sheet. */ #inspectorBody h3{margin:2px 0 12px; font-size:16px; font-weight:650} #inspectorBody label{display:block; font-size:12.5px; color:var(--muted); margin:0 0 6px} #inspectorBody .field{margin-bottom:14px} #inspectorBody input[type=text],#inspectorBody textarea{ width:100%; border-radius:12px; border:1px solid var(--line); background:var(--surface2); color:var(--text); padding:11px 13px; font-size:15px; outline:none; resize:vertical; } #inspectorBody input[type=text]{height:46px} #inspectorBody textarea{min-height:120px; line-height:1.45} #inspectorBody input:focus,#inspectorBody textarea:focus{border-color:var(--accent)} #inspectorBody .row{display:flex; gap:9px; margin-top:6px} #inspectorBody .row button{ flex:1; min-height:44px; border-radius:12px; font-size:14.5px; background:var(--surface2); border:1px solid var(--line); } #inspectorBody .row button.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:650} #inspectorBody .row button.danger{background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 40%,transparent); color:var(--danger)} /* Ноутбук: панель раздвигает работу, а не накрывает её — на широком экране видеть оба контекста разом важнее, чем сэкономить 360px. Ширину гейтит медиазапрос, а data-inspector — это настоящее состояние (открыта/закрыта), которое из ширины не выводится. */ @media (min-width:1024px){ :root[data-inspector="1"]{--insp-w:var(--insp-open)} } /* Планшет: раздвигать нечего — меньше 1024px на три колонки не делится, поэтому панель приезжает шторкой поверх работы. Тонкость: у абсолютно позиционированного ребёнка сетки контейнер — его же грид-область, то есть третья колонка нулевой ширины в строке экранов. Поэтому top/bottom:0 сами ставят шторку ровно под шапку, а right:0 — по правому краю; но ширину нельзя задавать процентами: от нулевой области процент даст ноль. */ @media (min-width:820px) and (max-width:1023px){ :root:not([data-layout="phone"]) #inspector{ position:absolute; top:0; right:0; bottom:0; width:min(380px,60vw); z-index:30; box-shadow:var(--shadow); animation:inspIn .2s cubic-bezier(.2,.8,.3,1); } :root:not([data-layout="phone"]) #inspector.closing{animation:inspOut .18s ease-in forwards} } @keyframes inspIn{from{transform:translateX(101%)}to{transform:none}} @keyframes inspOut{from{transform:none}to{transform:translateX(101%)}} /* ═════════════════ экран «Обзор» ═════════════════ */ /* Каркас отвечает только за область с прокруткой; оформление карточек — panels.css, он подключён после этого файла и спокойно перебивает любую строку ниже. */ #screen-dash{flex-direction:column} #dashBody{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:14px 12px 22px; } /* Ширину содержимого намеренно не задаём: это дело panels.css (.dash), он подключён следующим и должен решать сам. */ @media (min-width:820px){ #dashBody{padding-left:24px; padding-right:24px} } /* ═════════════════ мышь и клавиатура ═════════════════ */ /* :hover только там, где есть настоящая мышь: на тач-планшете подсветка «залипает» после нажатия и врёт о том, где сейчас курсор. */ @media (min-width:820px) and (hover:hover){ .rnav:hover{background:var(--surface2); color:var(--text)} .rnav.active:hover{background:var(--accent-soft); color:var(--accent)} #railAdd:hover{background:var(--surface2); color:var(--text); border-color:color-mix(in srgb,var(--accent) 55%,transparent)} #railToggle:hover,#inspectorClose:hover{background:var(--surface2); color:var(--text)} .topbtn:hover{background:var(--surface2)} } /* Работа с клавиатуры без мыши должна быть видна: обводка обязательна. :focus-visible, а не :focus — иначе рамка вспыхивает при обычном клике. */ #rail :focus-visible, #inspector :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:11px} @media (prefers-reduced-motion:reduce){ #inspector,#inspector.closing{animation:none !important} .rnav,#railAdd{transition:none} }