/* ═══════════════════════════════════════════════════════════════════════════ sm_fullscreen.css — повноекранний режим Смарт-майстерні. ЗАЧЕМ. Власник (16.08.2026), подивившись на бібліотеку стилів у чаті: «я понял, что нам надо полноценный полноэкранный режим удобный, чтобы и макет показывало и т.д., или уменьшенно показывало, потом при нажатии увеличивалось; на телефоне отдельно прописать». Причина болю видно з заміру: стрічка чату — вікно 320 px заввишки, і сітка стилів у ньому 1280 px. Людина або дивиться на макет, або на розмову, бо майстерня — одна колонка 800 px, де прев'ю зверху, а чат далеко внизу. Повний екран ставить їх поруч: ліворуч виріб, праворуч розмова. ⚠️⚠️ ЖОДНОГО transform / filter / backdrop-filter / contain НА .smfs І ЙОГО КОЛОНКАХ. Усередину переїжджають ЖИВІ вузли майстерні, а в них є власні модалки з position: fixed — вікно ракурсів (.sm-shots), тур (.sm-tour-*), міні-гра (.smc-game), міні-застосунки (.smca-*). Будь-яка з цих властивостей на предку робить його блоком-контейнером для fixed, і модалка замість екрана накривала б колонку. З'явиться потреба анімувати — тільки opacity: вона контейнер не створює. ⚠️ ШАР 9990 — НАВМИСНО НИЖЧЕ ЗА ВСІ МОДАЛКИ МАЙСТЕРНІ (9998 підказка, 9999 ракурси й гра, 10000 тур, 10050/100000 застосунки). Повний екран — це підкладка під роботу, а не найвищий шар: інакше він накрив би вікна, які сам же й відкриває. Видалення файлу (разом із sm_fullscreen.js) повертає сторінку в стан «до повного екрана» без слідів: жоден селектор теми тут не перевизначений. ═══════════════════════════════════════════════════════════════════════════ */ /* ══ КНОПКА ВХОДУ «НА ВЕСЬ ЕКРАН» ══════════════════════════════════════════ ЗАЧЕМ. Власник 30.08.2026: «кнопку (на весь екран) зроби помітніше». Вона носила той самий `.sm-dlbtn`, що й «Поділитися» — бліда обводка на білому. Тобто головний вхід у режим, заради якого весь цей файл, виглядав як дрібна службова дія поруч із такою ж дрібною. ⚠️ Спершу спробував тільки теплу заливку з кольоровою обводкою — на кадрі смуги вона й далі читалась як третя однакова пігулка. Тому суцільний корал: у цій смузі він єдиний, «Купити» живе в іншому блоці й іншим кольором (винний), тож вони не сперечаються. ⚠️ Розмір не чіпаємо (пряме прохання «не сильно більше»): padding і шрифт лишаються від `.sm-dlbtn`, змінюється лише колір. */ .sm-fsbtn { white-space: nowrap; background: var(--sm-coral, #EE7070); border-color: var(--sm-coral, #EE7070); color: #fff; box-shadow: 0 3px 12px rgba(238, 112, 112, .34); } .sm-fsbtn:hover { background: var(--sm-coral-dp, #E25B5B); border-color: var(--sm-coral-dp, #E25B5B); color: #fff; } /* Кнопка входу в шапці чату — того ж розміру, що ✕, щоб шапка не «стрибала». */ .smc__fsbtn { margin-left: auto; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; cursor: pointer; border: none; border-radius: 50%; background: transparent; color: var(--sm-muted, #7E5F5C); font-size: 15px; line-height: 1; } /* ⚠️ Той самий колір, що й у кнопки входу в смузі прев'ю: це ОДНА дія, і два входи в неї мають читатись як одна річ, а не як два різні значки. */ .smc__fsbtn { background: #FFF1EF; color: #C33F4E; box-shadow: inset 0 0 0 1px rgba(238, 112, 112, .45); } .smc__fsbtn:hover { background: var(--sm-coral, #EE7070); color: #fff; } /* ⚠️ Коли обидві кнопки в шапці, «на всю» бере margin-left на себе, а ✕ — ні: інакше вони роз'їжджаються по краях і між ними лишається діра. */ .smc__fsbtn + .smc__close { margin-left: 0; } /* ══ «Новий чат» У ПОВНОМУ ЕКРАНІ ══════════════════════════════════════════ ЗАЧЕМ. Власник 30.08.2026: «на весь екран презентуй новий — не сильно більше, його просто не видно». І справді: у вузькій шапці оверлея підпис ховався мобільним правилом, лишався голий значок ⟲ поруч із ✕ — дві однакові сірі кружечки, і жоден не каже, що робить. ⚠️ Беремо КОРОТКИЙ підпис, а не повний: між назвою чату і ✕ вільних 132 px, «Новый разговор» — 146. Заміряно на 390×844. ⚠️ Кнопку не збільшуємо (пряме прохання): та сама висота 34, що й ✕. Помітною її робить не розмір, а підпис і тепла заливка замість прозорої. */ .smfs--v2 .smfs__side .smc__reset-txt { display: none; } .smfs--v2 .smfs__side .smc__reset-short { display: inline; } .smfs--v2 .smfs__side .smc__reset.is-ask .smc__reset-short { display: none; } .smfs--v2 .smfs__side .smc__reset { background: #FBF1EF; border-color: #E3C4BF; color: var(--sm-bordo, #6E1220); } .smfs--v2 .smfs__side .smc__reset.is-ask { background: var(--sm-bordo, #6E1220); border-color: var(--sm-bordo, #6E1220); color: #fff; } /* Сторінка під оверлеєм не гортається: два скролери одночасно — це коли палець рухає не те, що людина бачить. */ body.smfs-lock { overflow: hidden; } /* ── Оверлей ──────────────────────────────────────────────────────────────── */ .smfs { --smfs-bar: 48px; position: fixed; left: 0; top: 0; right: 0; z-index: 9990; /* ⚠️⚠️ ВИСОТА — ЗІ ЗМІННОЇ, А НЕ 100vh. На телефоні 100vh рахується без урахування адресного рядка й клавіатури: поле вводу опинялось під зрізом рівно тоді, коли в нього почали писати. JS кладе в --smfs-h справжню висоту visualViewport і оновлює її, коли клавіатура з'являється. dvh — запасний варіант для браузерів без visualViewport. */ height: var(--smfs-h, 100dvh); display: flex; flex-direction: column; background: radial-gradient(1200px 700px at 82% -240px, rgba(238,112,112,.10), transparent 70%), linear-gradient(180deg, #F7EAE7 0%, #F1DDDA 100%); } .smfs[hidden] { display: none !important; } /* ── Верхня смуга ─────────────────────────────────────────────────────────── */ .smfs__bar { flex: 0 0 auto; height: var(--smfs-bar); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 16px; background: rgba(255,255,255,.82); border-bottom: 1px solid var(--sm-line, #EFDFDC); } .smfs__title { font-weight: 800; font-size: 14px; line-height: 1.2; color: var(--sm-bordo, #6E1220); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .smfs__hint { font-weight: 500; font-size: 12px; line-height: 1.2; color: var(--sm-muted, #7E5F5C); } .smfs__x { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; /* 40 px по висоті — нижня межа для пальця; на миші виглядає нормальною кнопкою. */ min-height: 40px; padding: 0 15px; cursor: pointer; border: 1px solid var(--sm-line, #EFDFDC); border-radius: 999px; background: #fff; color: var(--sm-bordo, #6E1220); font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; box-shadow: var(--sm-shadow-sm, 0 1px 2px rgba(96,0,0,.05)); } .smfs__x:hover { border-color: var(--sm-bordo, #6E1220); } /* ── Дві колонки ──────────────────────────────────────────────────────────── */ .smfs__body { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; } /* Ліворуч — виріб. Гортається ВНУТРІШНІЙ .smfs__scroll, а не сама колонка: під сценою живуть ще й розміри, стрілки, кольори, і на короткому екрані вони мусять бути досяжні. ⚠️ Розділення на колонку і скролер потрібне заради кнопки «більший макет»: absolute усередині скролера рахується від його padding-box і їде разом із вмістом — кнопка втікала б угору, щойно людина погортає налаштування. */ .smfs__stage { position: relative; flex: 1 1 58%; min-width: 0; min-height: 0; display: flex; overflow: hidden; } .smfs__scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 18px; } /* Праворуч — розмова і керування. ⚠️⚠️ СТЕЛЯ 520 px БУЛА ЗАМАЛА (30.08.2026). Замір на 1920×1000: макет забирав 1400 px під один круглий циферблат, а розмова тулилась у 520 — і це при тому, що дивитись у макеті вже нема на що, а читати треба саме розмову. Власник: «в компʼютері на весь — теж незручно чатом користуватись». 42 % / 760 px дають на 1920 колонку 760 (замість 520), на 1440 — 604 (замість 520), на 1280 — 537. Нижня межа піднята з 360 до 380: рядок «Опишіть задумку…» з трьома кнопками в 360 ставав двоповерховим. */ .smfs__side { flex: 0 0 clamp(380px, 42%, 760px); min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px 18px; background: rgba(255,255,255,.55); border-left: 1px solid var(--sm-line, #EFDFDC); } .smfs__scroll::-webkit-scrollbar, .smfs__side::-webkit-scrollbar { width: 8px; } .smfs__scroll::-webkit-scrollbar-thumb, .smfs__side::-webkit-scrollbar-thumb { background: #E2CBC7; border-radius: 99px; } /* Кнопки входу зсередини оверлея не потрібні — вони приїхали сюди разом зі своїми блоками. Ховаємо, а не переставляємо: переставляння зламало б повернення вузлів на місце при закритті. */ .smfs .sm-fsbtn, .smfs .smc__fsbtn { display: none; } /* Картка прев'ю у повному екрані вже не картка серед інших — прибираємо зайву тінь, лишаємо саму сцену. */ .smfs__stage .sm-preview { box-shadow: none; border-color: transparent; background: transparent; } /* ⚠️⚠️ СЦЕНУ ПІДІЙМАЄМО НАД НАЛАШТУВАННЯМИ. У розмітці порядок такий: смуга носіїв → розміри/стрілки/кольори → сцена. У вузькій колонці 800 px це нормально, а в повному екрані чіпи (101 px) відсували макет донизу, і він вилазив за нижній край: замір показав сцену 254…744 при екрані 720. Людина заходила «подивитись на виріб» і бачила налаштування. Порядок міняємо ТІЛЬКИ показом (flex order), розмітку не чіпаємо — інакше довелось би переставляти вузли і повертати їх на закритті. */ .smfs__scroll .sm-preview { display: flex; flex-direction: column; } .smfs__scroll .sm-preview__bar { order: 1; } .smfs__scroll #sm-stage { order: 2; } .smfs__scroll #sm-setup { order: 4; margin-top: 14px; } .smfs__scroll #sm-shots { order: 5; } /* fixed-вікно, порядок не важить */ /* Сцена росте за колонкою, але не вище за екран: інакше на 1920×1080 годинник виїжджав під зріз і колонку доводилось гортати заради самої картинки. */ .smfs__stage .sm-stage { max-height: calc(var(--smfs-h, 100dvh) - 200px); } /* ── Чат у правій колонці ───────────────────────────────────────────────── Панель розтягується на всю вільну висоту, гортається ТІЛЬКИ стрічка реплік: шапка з маскотом і поле вводу лишаються на місці. Саме цього бракувало — у 320-піксельному віконці сітка стилів (1280 px) читалась крізь щілину. */ /* ⚠️⚠️ РОЗМОВІ — БІЛЬШУ ЧАСТИНУ КОЛОНКИ, І ЦЕ ЧИСЛОМ, А НЕ «ЯК ВИЙДЕ». Перша версія давала чату flex:1 з мінімумом 260 px і сподівалась, що вільне місце дістанеться йому. Не дісталось: історія генерацій розгортається на 377 px і з'їдала колонку — стрічка реплік лишилась 120 px, тобто РІВНО те віконце, через яке весь повний екран і затівався. Тепер під розмову закріплено 55 % висоти екрана, а решта блоків просто відсуває колонку в прокрутку. */ .smfs__side > #sm-chat-mount { /* ⚠️⚠️ СТИСКАТИСЬ — ДОЗВОЛЕНО (1 1, а не 1 0). З flex-shrink: 0 панель не могла стати нижчою за свій вміст, і варто було відкрити бібліотеку стилів (сітка 2651 px), як стрічка реплік роздувалась на 1335 px при екрані 900: гортати доводилось ВСЮ колонку, а шапка з полем вводу їхали геть. Тепер стрічка лишається власним скролером, а нижньою межею тримає min-height. */ flex: 1 1 auto; display: flex; min-height: calc(var(--smfs-h, 100dvh) * .55); /* ⚠️⚠️ min-width: 0 ОБОВʼЯЗКОВИЙ. Елемент flex за замовчуванням не вужчає за свій min-content, а в чаті є широкі неподільні рядки (кнопки застосунків, підказка під полем). На телефоні панель через це ставала 394 px у колонці 367 — розмова вилазила за правий край екрана. Спіймано заміром на 375 px. */ min-width: 0; } .smfs__side .smc { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; margin-top: 0; } .smfs__side .smc__panel { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; } .smfs__side .smc__log { flex: 1 1 auto; max-height: none; min-height: 120px; } /* ⚠️⚠️ ТЯГНЕТЬСЯ І СТИСКАЄТЬСЯ ТІЛЬКИ СТРІЧКА РЕПЛІК. Решта поверхів панелі — шапка, ряд застосунків, поле вводу, кнопка, підказка — мають свою висоту, і віддавати її під розмову не можна. Спіймано на знімку крупним планом: ряд застосунків стиснувся з ~50 px до 17, і кнопка «Намалювати» лишилась розрізаною навпіл просто під обрізаною плиткою стилю — саме це читалось як «кнопка лежить на картинці». Причина тонка: у .smc__apps стоїть overflow-x: auto (три кнопки на 375 px не влазять у рядок), а flex-елемент із НЕ visible overflow втрачає автоматичний мінімальний розмір — тобто дозволяє стиснути себе хоч до нуля. У шапки overflow звичайний, тому вона й не постраждала. */ .smfs__side .smc__panel > *:not(.smc__log) { flex: 0 0 auto; } /* Плитки стилів у широкій колонці — трохи більші: тут для них є місце. ⚠️ Тільки на десктопі: на телефоні стрічка реплік ~145 px, і більша плитка з підписом не лишала б від розмови нічого. Сітка сама перерахує кількість стовпців — жодних фіксованих ширин. */ @media (min-width: 900px) { .smfs__side .smc__styles-row { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } } /* Решта блоків (ціна, кнопки, ліміти) не тягнуться — лише чат. */ .smfs__side > *:not(#sm-chat-mount) { flex: 0 0 auto; } /* Історія живе в лівій колонці, під налаштуваннями (див. goesLeft у js). Своя прокрутка — щоб довгий список не відсував сцену, коли колонку гортають. */ .smfs__scroll .sm-history { margin-top: 14px; } .smfs__scroll .sm-history__grid { max-height: 260px; overflow-y: auto; } /* ── «Розгорнути макет»: сцена на весь екран ─────────────────────────────── Власник: «или уменьшенно показывало, потом при нажатии увеличивалось». Один клас — і виріб займає все, розмова тимчасово ховається. Працює і на миші (роздивитись дизайн), і на телефоні (де це основний спосіб). */ .smfs__grow { position: absolute; right: 18px; bottom: 16px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; cursor: pointer; border: 1px solid var(--sm-line, #EFDFDC); border-radius: 999px; background: rgba(255,255,255,.94); color: var(--sm-bordo, #6E1220); font-family: inherit; font-weight: 700; font-size: 12.5px; line-height: 1; box-shadow: 0 3px 12px rgba(96,0,0,.16); } .smfs__grow:hover { background: #fff; } .smfs--zoom .smfs__side { display: none; } .smfs--zoom .smfs__stage { flex: 1 1 100%; } /* ═══ ТЕЛЕФОН ══════════════════════════════════════════════════════════════ ⚠️⚠️ ТУТ ІНША ЗАДАЧА, А НЕ «ТЕ САМЕ, ТІЛЬКИ ВУЖЧЕ». Дві колонки поруч на 375 px не поміщаються — жодна з них не буде придатною. Тому макет стає СМУГОЮ зверху (видно, що саме зараз на виробі), а вся решта висоти йде розмові. Побачити виріб як слід — тап по смузі. ⚠️ У згорнутій смузі показуємо ТІЛЬКИ сцену: носії, розміри й стрілки в смужці 30 % екрана нечитабельні, і людина тицяла б у них наосліп. Вони повертаються, щойно макет розгорнуто. .sm-shots не ховаємо — це вікно ракурсів, воно fixed і живе поверх усього. */ @media (max-width: 899px) { .smfs__body { flex-direction: column; } /* ⚠️ 24 %, а не 30: замір на 375×812 показав, що зі смугою 30 % поле вводу чату опинялось нижче за край екрана — доводилось гортати колонку, щоб написати. Макет за 24 % усе одно добре видно, а розмова лишається цілою. */ .smfs__stage { flex: 0 0 auto; height: 24dvh; min-height: 140px; } .smfs__scroll { padding: 0; overflow: hidden; } .smfs__side { flex: 1 1 auto; min-height: 0; border-left: none; border-top: 1px solid var(--sm-line, #EFDFDC); padding: 10px 10px 12px; } /* На телефоні розмова забирає ВСЕ, що лишилось, і має право стиснутись: 55 % екрана як мінімум (десктопне правило) виштовхували б поле вводу за нижній край. */ .smfs__side > #sm-chat-mount { flex: 1 1 auto; min-height: 200px; } /* ── Що ми віддаємо стрічці реплік на телефоні ──────────────────────────── Замір на 375×812: під самі репліки лишалось 120 px — менше, ніж займає шапка з маскотом. Тому в ПОВНОЕКРАННОМУ режимі НА ТЕЛЕФОНІ (і тільки там) підбираємо все, що не несе змісту прямо зараз. На звичайній сторінці й на десктопі нічого з цього не змінюється. */ /* Пояснення до режимів людина вже прочитала на сторінці. ⚠️ Селектор мусить бути НЕ СЛАБШИЙ за той, що ці рядки показує: #sm-app.sm--m-chat .sm-modes__note--chat — це id + два класи. Коротке `.smfs .sm-modes__note` програвало за вагою, і підказка лишалась на екрані (спіймано на знімку 390 px). */ #sm-app.sm--m-chat .smfs .sm-modes__note--chat, #sm-app.sm--m-gen .smfs .sm-modes__note--gen { display: none; } /* Маскот лишається, але 76 px тут — це третина видимої розмови. 56 px усе ще обличчя, а не значок (власник свого часу забракував саме 40). */ .smfs__side .smc__ava { width: 56px; height: 56px; } /* «Enter — надіслати» на телефоні неправда: там немає Enter, там кнопка. */ .smfs__side .smc__hint { display: none; } .smfs__side .smc__log { padding: 10px; } /* Згорнута смуга: лише сцена, без картки й відступів. ⚠️ height:100% на сцені НЕ спрацює: .sm-preview має висоту auto, і відсоток від невизначеної висоти браузер трактує як auto — сцена бралась за вмістом і виходила 192 px у смузі 244. Тому картка тягнеться на всю висоту, а сцена стає flex-елементом, що доїдає залишок. */ /* ⚠️⚠️ БЕЗ `:not(.smfs--zoom)` — І ЦЕ ГОЛОВНА ПРАВКА КНОПКИ «КРУПНІШЕ». Ці три правила — єдине, що взагалі дає сцені висоту на телефоні: тягнуть картку на всю смугу і роблять саму сцену флекс-елементом, який доїдає залишок. Поки вони стояли з `:not(.smfs--zoom)`, натиск «Крупніше» їх ВИМИКАВ — і сцена падала на свій вміст. Заміряно 27.08.2026 на 390 px: 232 px до натиску, 64 px після. Тобто кнопка «крупніше» зменшувала макет у 3,6 раза — рівно навпаки до підпису. Тепер правила спільні для обох станів, а різницю робить висота контейнера: у смузі вона обмежена, у розгорнутому — весь екран. */ .smfs .smfs__stage .sm-preview { padding: 0; height: 100%; } .smfs .smfs__stage .sm-preview > *:not(#sm-stage):not(#sm-shots):not(#sm-setup) { display: none; } /* ⚠️ Налаштування виведені з переліку вище НЕ тому, що їх видно: їх ховає наступний рядок. Різниця в тому, ЩО САМЕ ховає — у зумі внизу потрібна панель зі стрілками, а вона живе в #sm-setup. Правило з `:not(#…)` мало б два id і побило б будь-яке зумове правило за вагою; два взаємовиключні стани («не зум» / «зум») вирішують це без гонки специфічності. */ .smfs:not(.smfs--zoom) .smfs__stage .sm-preview > #sm-setup { display: none; } .smfs .smfs__stage .sm-stage { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; height: auto; max-height: none; border-radius: 0; } /* ⚠️ F28 разбора: правило выше отдаёт сцене aspect-ratio:auto, и круглый циферблат в полноэкранном режиме становился 312x165 — овал вдвое меньше обычного вида. Круглым носителям пропорцию возвращаем. Селектор ДЛИННЕЕ живого правила намеренно: иначе он его не перебьёт. */ .smfs .smfs__stage .sm-stage[data-shape="circle"] { aspect-ratio: 1 / 1; flex: 0 0 auto; margin: 0 auto; max-width: 100%; } /* Кнопки под разговором не должны упираться в нижний край экрана. */ .smfs__side { padding-bottom: 56px; } /* Уся смуга — одна велика кнопка «збільшити». */ .smfs:not(.smfs--zoom) .smfs__stage { cursor: zoom-in; } .smfs__grow { right: 10px; bottom: 8px; min-height: 34px; padding: 0 12px; font-size: 12px; } /* Розгорнутий макет: сцена на весь екран, розмова тимчасово прибрана. ⚠️ min-height обовʼязковий. `flex: 1 1 auto` сам по собі росте лише під вміст, а вміст тут — картинка, яка радо стискається; саме тому смуга лишалась смугою. 70dvh — це «майже весь екран, але з місцем під шапку й нижній ряд розмірів», щоб кнопки не поїхали за край. */ .smfs--zoom .smfs__stage { height: auto; flex: 1 1 auto; min-height: 70dvh; } .smfs--zoom .smfs__scroll { overflow-y: auto; padding: 10px 10px 14px; } .smfs--zoom .smfs__stage .sm-stage { max-height: none; } .smfs__bar { padding: 0 8px 0 12px; } .smfs__hint { display: none; } /* на 375 px підказка з'їдає рядок заголовка */ } /* Дуже низький екран (телефон лежачи): смуга макета з'їла б усю розмову. */ @media (max-width: 899px) and (max-height: 480px) { .smfs:not(.smfs--zoom) .smfs__stage { height: 38dvh; } } @media (prefers-reduced-motion: reduce) { .smfs, .smfs * { transition: none !important; animation: none !important; } } /* ══════════════════════════════════════════════════════════════════════════ V2 — ПОВНИЙ ЕКРАН, ЯКИЙ НЕ ГОРТАЄТЬСЯ ⚠️⚠️ ЧОМУ ВІН ГОРТАВСЯ. Не «забагато всього», а два жорстких числа. ① .smfs__stage .sm-stage { max-height: calc(--smfs-h - 200px) } Нерухомого добра в лівій колонці 293 px (смуга носіїв 46 + налаштування 139 + відступи 108), а константа віднімає 200. Різниця 293−200 = 93, плюс відступи скролера — і виходить рівно те переповнення, що заміряно живцем: колонка 842 при видимих 701, тобто 141 px за краєм. За край їхали РОЗМІР і СТРІЛКИ — саме те, без чого кнопка «Купити» відбиває покупку. ② .smfs__side > #sm-chat-mount { min-height: calc(--smfs-h * .55) } = 412 px там, де вільно лишається менше. Звідси 32 px переповнення праворуч. ⚠️ ПРИНЦИП, ЯКИЙ ЗАМІНЮЄ ОБИДВА ЧИСЛА: у кожній колонці рівно ОДИН гнучкий вузол — ліворуч сцена, праворуч стрічка реплік. Решта flex: 0 0 auto. Тоді висоту роздає браузер, а не арифметика, і жодна колонка не гортається на жодному екрані. ⚠️ СЦЕНУ НЕ ЗМЕНШУЄМО. Диск уже впирається у власну стелю (заміряно 513 при CSS-стелі 520) — різати його означає різати саму картинку. Місце береться з іншого: смуга носіїв їде у верхню смугу оверлея (там 1050 px порожнечі), відступи навколо вже прозорої картки прибираються, пояснення до режимів і підказка про Enter в оверлеї не потрібні — людина їх щойно читала на сторінці. ⚠️ ВІДКАТ: зняти клас .smfs--v2 (див. sm_fullscreen.js, прапорець FS_V2 або адреса ?fsv=0). Жодне правило нижче не діє поза цим класом, тож звичайна сторінка і старий повний екран лишаються недоторканими. ══════════════════════════════════════════════════════════════════════════ */ /* ── Ліва колонка: гортання немає, гнучка тільки сцена ────────────────────── */ .smfs--v2 .smfs__scroll { overflow: hidden; padding: 8px 10px; display: flex; } .smfs--v2 .smfs__scroll .sm-preview { flex: 1 1 auto; min-height: 0; width: 100%; padding: 0; border: 0; gap: 8px; } /* Знімаємо саме ту константу, через яку все й починалось. */ .smfs--v2 .smfs__stage .sm-stage { max-height: none; } /* ⚠️ aspect-ratio 4/3 у сцени сильніший за flex: при ширині 884 він просить 663 px і не дає їй просто забрати вільну висоту. У повному екрані форму диктує ВІКНО, а не пропорція картки, тому тут її знімаємо. */ .smfs--v2 .smfs__scroll #sm-stage { flex: 1 1 auto; min-height: 260px; aspect-ratio: auto; } /* Стеля диска піднята тільки в оверлеї й тільки на широкому екрані: на сторінці й на телефоні лишається рідна min(520px, 100%). */ @media (min-width: 900px) { .smfs--v2 .smfs__stage .sm-stage[data-shape="circle"] .sm-flat__frame { height: min(560px, 100%); } } .smfs--v2 .smfs__scroll .sm-preview__bar, .smfs--v2 .smfs__scroll #sm-setup { flex: 0 0 auto; } /* Відбивка перед налаштуваннями була margin 14 + лінія + padding 14 = 29 px. */ .smfs--v2 .smfs__scroll #sm-setup { margin: 0; padding-top: 8px; } /* Смуга носіїв переїхала у верхню смугу оверлея — тут її вже немає. */ .smfs--v2 .smfs__bar .sm-preview__bar { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 0; padding: 0; border: 0; min-width: 0; } .smfs--v2 .smfs__bar .sm-preview__bar .sm-carrier { padding: 6px 12px; min-height: 32px; } .smfs--v2 .smfs__bar .sm-preview__bar .sm-carrier__ico { width: 18px; height: 18px; } /* «Поділитися» і «Крупніше макет» у смузі зайві: перша є в самій сцені, друга вмикала режим, у якому не існувало кнопки «Купити». */ .smfs--v2 .smfs__bar .sm-preview__bar #sm-share { display: none; } .smfs--v2 .smfs__grow { display: none; } /* ── Права колонка: гортається тільки стрічка реплік ──────────────────────── */ .smfs--v2 .smfs__side { overflow: hidden; padding: 8px 10px 10px; gap: 6px; } .smfs--v2 .smfs__side > #sm-chat-mount { min-height: 0; flex: 1 1 auto; } .smfs--v2 .smfs__side .smc__log { min-height: 80px; } /* Пояснення до режимів і підказка про Enter: на телефоні їх уже ховали з поміткою «людина щойно прочитала це на сторінці». Те саме вірно і тут. */ .smfs--v2 .smfs__side .sm-modes__note, .smfs--v2 .smfs__side .smc__hint, .smfs--v2 .smfs__side .sm-trust__links { display: none; } /* ⚠️ Рядок вище ЦЮ підказку не ховав: показує її `#sm-app.sm--m-chat .sm-modes__note--chat` — id плюс два класи, і короткий селектор програвав за вагою. Спіймано живим заміром у Chrome: 19 px підказки лишались на екрані. Та сама пастка вже підписана в мобільному блоці нижче — тут її повторили. */ #sm-app.sm--m-chat .smfs--v2 .sm-modes__note--chat, #sm-app.sm--m-gen .smfs--v2 .sm-modes__note--gen { display: none; } /* ── Шапка чату в оверлеї — тонша, ніж на сторінці ──────────────────────── ⚠️ Замір у Chrome на 1745×828 із живою розмовою: у правій колонці 780 px шапка з маскотом займала 99, а сама стрічка реплік — 221. Тобто майже половина розмови йшла на привітання, яке людина вже прочитала. Маскот лишається (він тримає інтонацію), зникає лише підпис «відповідає за кілька секунд» і зайве повітря: 99 → 57. */ .smfs--v2 .smfs__side .smc__head { padding-top: 8px; padding-bottom: 8px; } .smfs--v2 .smfs__side .smc__ava { width: 56px; height: 56px; } .smfs--v2 .smfs__side .smc__sub { display: none; } /* ⚠️⚠️ ПОПЕРЕДЖЕННЯ ПРО СТРІЛКИ ПІД «КУПИТИ» НЕ ПОВЕРТАТИ. Власник 23.08.2026 про цей самий рядок: «ЦЕ МОЖНА ВЗАГАЛІ НЕ ПИСАТИ», і на звичайній сторінці його прибрали (`smart_maisternya.css`, `.sm-free-note, .sm-hands-need`). Оверлей потім показав його знову — власним правилом `display: block`, — і 30.08 власник прибрав його вдруге вже тут: «вот это можешь убрать… кнопку купить [лишити]». ⚠️ САМА ЗАБОРОНА КУПІВЛІ ЛИШАЄТЬСЯ. Натиск «Купити» без стрілок веде в promptChooseHands(): тост на 5 с, підсвічена група чіпів і прокрутка до неї. Тобто людина дізнається про потрібний вибір у момент дії, а не читає про це постійно. */ /* ── Телефон ────────────────────────────────────────────────────────────── ⚠️⚠️ ТУТ БУЛА НЕ РОЗКЛАДКА, А ЗАКРИТА ПОКУПКА. У згорнутій смузі ховалось усе, крім сцени, тобто вибір стрілок був недосяжний; у збільшеному вигляді ховалась уся права колонка, тобто зникала кнопка «Купити». Вибір і кнопка не бували на одному екрані ніколи. Тепер налаштування лишаються видимими завжди, а режим «збільшити» прибрано разом із кнопкою, що його вмикала. */ @media (max-width: 899px) { /* ⚠️ На телефоні обидві частини мусять УМІТИ стискатись, інакше та, що «0 0 auto», забирає свою висоту повністю, а друга йде в прокрутку — заміряно: права вилазила на 39 px саме через це. */ .smfs--v2 .smfs__stage { flex: 1 1 auto; height: auto; min-height: 0; } .smfs--v2 .smfs__scroll { padding: 6px 8px; } .smfs--v2 .smfs__scroll .sm-preview { gap: 6px; } /* ⚠️ Обидві частини гнучкі, і місце ділить браузер: сцені — скільки лишиться після налаштувань і кнопки, розмові — решта. Жорстке число тут повертало б ту саму хворобу, тільки на телефоні: при 34vh права частина вилазила на 93 px (заміряно). Тому лише нижні межі, і обидві маленькі. */ .smfs--v2 .smfs__scroll #sm-stage { flex: 1 1 auto; min-height: 150px; aspect-ratio: auto; } .smfs--v2 .smfs__scroll #sm-setup { display: block; } .smfs--v2 .smfs__side { flex: 1 1 auto; min-height: 0; } .smfs--v2 .smfs__side .smc__log { min-height: 0; } /* ⚠️ Заміряно на 390: у правій частині ЦІНА+КУПИТИ займають 181 px, і саме вони не давали всьому влізти. Ставимо їх поруч, а не стовпчиком — кнопка від цього не меншає, бо росте вшир. */ .smfs--v2 .smfs__side .sm-actionbar { flex-direction: row; align-items: stretch; gap: 8px; } .smfs--v2 .smfs__side .sm-actionbar > #sm-buy { flex: 1 1 auto; } .smfs--v2 .smfs__side .sm-free-note { font-size: 11px; line-height: 1.3; } /* Телефон і посилання є в підвалі сторінки; в оверлеї на телефоні це 18 px, яких бракує саме кнопці. */ .smfs--v2 .smfs__side #sm-trust { display: none; } /* ⚠️⚠️ ФОРМУ КРУГЛОМУ НОСІЮ ПОВЕРТАЄМО. Правило вище віддає сцені `aspect-ratio: auto` (щоб вона просто доїдала вільну висоту), і циферблат від цього ставав овалом — саме це колись і вважали причиною «V2 не годиться для телефона». Причина була в цьому рядку, а не в V2. Селектор мусить бути СИЛЬНІШИЙ за `.smfs--v2 .smfs__scroll #sm-stage` (там id), тому id тут теж. */ .smfs--v2 .smfs__scroll #sm-stage[data-shape="circle"] { aspect-ratio: 1 / 1; flex: 0 1 auto; margin: 0 auto; max-width: 100%; /* ⚠️ Квадрат на всю ширину телефона — це 374 px висоти з 844, тобто 44 % екрана під один диск. Стеля лишає розмові більше половини; ширина при цьому їде за пропорцією сама, диск лишається круглим. */ max-height: 42dvh; } /* ⚠️⚠️ ПОРОЖНЯ СЦЕНА НЕ МАЄ ПРАВА НА КВАДРАТ. Замір після ввімкнення V2 на телефоні: заглушка «Розкажіть у чаті, що намалювати» займала 322 px, а стрічці реплік лишалось 113 — тобто рівно та хвороба, від якої лікували, тільки тепер її спричиняв малюнок-заглушка. На звичайній сторінці це вже вирішено (`.sm-studio:has(#sm-empty…)`), але в оверлеї вузли переїхали і .sm-studio більше не їхній предок — тому те саме правило потрібне тут. */ .smfs--v2 .smfs__scroll:has(#sm-empty:not([hidden])) #sm-stage, .smfs--v2 .smfs__scroll:has(#sm-empty:not([hidden])) #sm-stage[data-shape="circle"] { aspect-ratio: auto; flex: 0 1 auto; min-height: 120px; max-height: 24dvh; } /* Нижній край iPhone: під смугою-індикатором ховалась кнопка «Купити». */ .smfs--v2 .smfs__side { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } /* ⚠️⚠️ ПАСТКА, ЯКУ ВІДКРИЛО ВВІМКНЕННЯ V2 НА ТЕЛЕФОНІ. Тап по виробу вмикає режим «макет на весь екран» (bindTapToZoom, sm_fullscreen.js) — і розмова зникає ЦІЛКОМ. У V1 поруч жила підписана кнопка «⤡ Показати розмову», а V2 ховає її як зайву (на миші зум і не потрібен). Вийшло: людина тицяє в годинник, розмова щезає, і жодного видимого способу її повернути. Перевірено живим тапом: `.smfs--zoom` стоїть, `.smfs__side` display:none, кнопка display:none. Повертаємо кнопку САМЕ В ЗУМІ — вхід лишається тапом, вихід стає видимим. */ .smfs--v2.smfs--zoom .smfs__grow { display: inline-flex; } /* ⚠️⚠️ У ЗУМІ СТЕЛЮ ЗНІМАЄМО — І САМЕ ЦЕ ЛАМАЛО КНОПКУ «КРУПНІШЕ». Стеля висоти сцени стоїть заради стрічки реплік: без неї готовий виріб з'їдав розмову. Але в зумі розмови на екрані НЕМАЄ (`.smfs__side` — display:none), берегти нема чого, а стеля лишалась і тримала макет тим самим. Заміряно 27.08.2026 на 390×844 з дизайном: до натиску 232 px, після натиску 279 — приріст 47 px замість цілого екрана. ⚠️ Правило мусить жити ТУТ, у зовнішньому блоці. У вкладеному `@media (min-height: 720px)` воно не вмикається на телефоні: 844 — це висота пристрою, а вікна лишається 693. */ .smfs--v2.smfs--zoom .smfs__scroll #sm-stage { max-height: none; } /* ⚠️⚠️ І ОДРАЗУ ФОРМА, ІНАКШЕ ЗАМІСТЬ МАКЕТА ОВАЛ. Сама лише знята стеля розтягує сцену на всю вільну висоту, а диск усередині тягнеться за нею: заміряно 291×633 — циферблат-яйце на весь екран. Тому висота диктує ширину (`width: auto` + `aspect-ratio`), як у блоці для високих екранів, тільки межа тут не 32dvh, а майже весь екран: у зумі сцені й належить усе, крім верхньої смуги та кнопки повернення. ⚠️ Селектор навмисно сильніший за правило з `min-height: 720px` (зайвий клас `.smfs--zoom`), щоб на високих екранах теж вигравав саме він. ⚠️⚠️ ДВІ МЕЖІ, А НЕ ОДНА. Сама лише `max-height: 82dvh` дала 484×568 — знову яйце, тільки менш помітне: висоту диктувала стеля, а ширину обрізала ширина екрана. Квадрат виходить тільки тоді, коли стеля висоти знає і про ширину: `100vw - 16px` — це ширина за відніманням бічних полів `.smfs__scroll` (6px 8px). */ .smfs--v2.smfs--zoom .smfs__scroll #sm-stage[data-shape="circle"] { max-height: min(82dvh, calc(100vw - 16px)); max-width: min(100%, 82dvh); width: auto; margin: 0 auto; } /* ⚠️⚠️ ЧАШЦІ ПРОПОРЦІЯ ПОТРІБНА ТАК САМО, І ЦЕ НЕ ОЧЕВИДНО: без неї сцена тягнеться на всю вільну висоту (`aspect-ratio: auto` вище), а зображення в ній лишається своєї форми — заміряно 315×689, тобто від чашки видно смугу посередині, краї за кадром. ⚠️ КВАДРАТ, А НЕ РІДНІ 4:3. Заміряно на 390 px трьома прогонами: 3D-камера вписує чашку ПО ВИСОТІ кадру. При 4:3 (374×281) чашка виходила 281 і лишала по 90 px повітря з боків; при 3:4 (374×499) — переростала кадр і різалась. Квадрат 374×374 — саме та висота, за якої ширина чашки дорівнює ширині екрана: найбільша, яка ще ціла. */ .smfs--v2.smfs--zoom .smfs__scroll #sm-stage:not([data-shape="circle"]) { aspect-ratio: 1 / 1; width: auto; margin: auto; max-width: 100%; max-height: min(82dvh, calc(100vw - 16px)); } /* ⚠️ Плоский вигляд («Рисунок») має рамку в ЖОРСТКИХ пікселях (420×202 на ПК, 280×134 на телефоні) — вона б не виросла разом зі сценою, і кнопка «крупніше» для нього не працювала б зовсім. Прив'язуємо до сцени, лишаючи рідну пропорцію друку 2,08:1. */ .smfs--v2.smfs--zoom .smfs__scroll #sm-stage[data-shape="rect"] .sm-flat__frame { width: 100%; height: auto; aspect-ratio: 420 / 202; max-width: 100%; max-height: 100%; } /* Рамка всередині сцени має власне число `min(340px, 80vw)` — прив'язуємо її до висоти сцени, інакше вона лишається маленькою всередині великої. */ .smfs--v2.smfs--zoom .smfs__scroll #sm-stage[data-shape="circle"] .sm-flat__frame { width: auto; height: 100%; aspect-ratio: 1 / 1; max-width: 100%; margin: 0 auto; } /* Квадрат ніколи не займе всю висоту (ширина екрана менша), і без цього рядка під ним лишалось 160 px порожнечі, а сам виріб тулився до верху. ⚠️ Центруємо АВТОПОЛЯМИ самої сцени, а не `justify-content`: інакше нижня панель зі стрілками (нижче) прилипла б до виробу посеред екрана, а вона мусить бути внизу. Автополя з'їдають вільне місце зверху й знизу від сцени, панель лишається останнім рядом. */ .smfs--v2.smfs--zoom .smfs__scroll .sm-preview { justify-content: flex-start; } .smfs--v2.smfs--zoom .smfs__scroll #sm-stage, .smfs--v2.smfs--zoom .smfs__scroll #sm-stage[data-shape="circle"] { margin: auto; } /* ══ НИЖНЯ ПАНЕЛЬ ЗІ СТРІЛКАМИ В ЗУМІ ═════════════════════════════════ ЗАЧЕМ. Власник 30.08.2026: «когда крупно макет — открывать нижнюю панель внизу со стрелками». У зумі ховається вся права колонка і налаштування разом із нею, тобто дивитись на великий циферблат і міряти на нього стрілки було неможливо: щоб обрати, доводилось зменшувати макет — саме те, від чого людина щойно пішла. ⚠️ `display: contents` на #sm-setup, а не «показати панель»: так у ряд стає САМА група стрілок, а всі інші (розмір, циферблат, чашкові) лишаються схованими. Порожньої білої коробки, коли стрілок ще нема (чашка або до генерації), теж не буде — група має власний [hidden], і жодне правило тут його не чіпає. ⚠️ Вузли ЖИВІ (їх переніс оверлей), тому чіп у панелі — той самий, що в налаштуваннях: клік малює стрілки на макеті одразу, без синхронізації. ══════════════════════════════════════════════════════════════════════ */ /* ⚠️ Нижній ряд чіпів опинявся за 6 px від краю екрана (заміряно на 390×844: низ панелі 838 із 844), а там у iPhone смуга-індикатор. Право колонка свій env(safe-area) має давно — тепер має і ця. */ .smfs--v2.smfs--zoom .smfs__scroll { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); } .smfs--v2.smfs--zoom .smfs__scroll #sm-setup { display: contents; } .smfs--v2.smfs--zoom .smfs__scroll #sm-setup > *:not(#sm-grp-family):not(#sm-grp-color) { display: none; } /* ⚠️ Колір стрілок теж сюди: він з'являється рівно після вибору форми (власний [hidden] знімає JS) і міняє саме те, на що людина зараз дивиться. Без нього довелося б виходити із зуму на півдорозі. */ .smfs--v2.smfs--zoom .smfs__scroll #sm-grp-family, .smfs--v2.smfs--zoom .smfs__scroll #sm-grp-color { order: 3; flex: 0 0 auto; margin: 6px 0 0; padding: 8px 10px; background: #fff; border: 1px solid var(--sm-line, #EFDFDC); border-radius: 14px; box-shadow: 0 2px 10px rgba(96, 0, 0, .06); } .smfs--v2.smfs--zoom .smfs__scroll #sm-grp-color { order: 4; } .smfs--v2.smfs--zoom .smfs__scroll #sm-grp-family .sm-setup__label, .smfs--v2.smfs--zoom .smfs__scroll #sm-grp-color .sm-setup__label { display: block; margin-bottom: 6px; text-align: center; font-size: 11px; } .smfs--v2.smfs--zoom .smfs__scroll #sm-clock-color-chips { flex-wrap: wrap; justify-content: center; gap: 6px; } /* ⚠️ Переносимо в два ряди, а не ховаємо в бічну прокрутку: чотири чіпи на 390 px в один ряд не влазять, і «Балерина» просто не існувала б для того, хто не здогадався потягнути вбік. */ .smfs--v2.smfs--zoom .smfs__scroll #sm-clock-family-chips { flex-wrap: wrap; justify-content: center; gap: 6px; } /* Кнопка виходу з зуму — нагору: внизу тепер панель, і кругла пігулка лягала б просто на чіп «Балерина». */ .smfs--v2.smfs--zoom .smfs__grow { top: 10px; bottom: auto; } /* ⚠️⚠️ РОЗМОВІ ПОТРІБНА НИЖНЯ МЕЖА, ІНАКШЕ ЇЇ З'ЇДАЄ ГОТОВИЙ ВИРІБ. Замір 390×844 із дизайном на сцені: круглий циферблат брав 302 px (він квадрат, і на всю ширину телефона це 374), а стрічці реплік лишалось 102 — менше, ніж було до всієї цієї роботи. Порожня сцена такого не робила, тому в перших замірах це не бачилось. ⚠️ Лікуємо ДВОМА межами одразу, бо одна без одної не працює: стеля сцені (32 % висоти) і підлога стрічці (150 px). Сцена вміє стискатись (flex: 1 1 auto вище), тому підлога стрічки просто відбирає в неї зайве, а не ламає розкладку. ⚠️ Тільки на високому екрані. На 375×667 сума поверхів і без того на межі, і підлога стрічки виштовхнула б кнопку «Купити» за нижній край — у колонки `overflow: hidden`, вона б її просто обрізала. */ @media (min-height: 720px) { .smfs--v2 .smfs__scroll #sm-stage { max-height: 32dvh; } /* ⚠️ Стелю в зумі знімає блок вище (див. «У ЗУМІ СТЕЛЮ ЗНІМАЄМО»). Тут його бути НЕ МОЖЕ: цей @media вимагає 720 px висоти, а телефон у повному екрані дає 693 (390×844 мінус смуги браузера) — правило мовчки не вмикалось саме там, де кнопку й тиснуть. */ /* ⚠️⚠️ КРУГ ТРЕБА ЗМЕНШУВАТИ, А НЕ ОБРІЗАТИ. Сама лише стеля висоти лишала ширину 374 при висоті 270 — сцена з `overflow: hidden` різала циферблату верх і низ (заміряно: 374×171, тобто півдиска за кадром). Тому висота диктує ширину: `width: auto` + `aspect-ratio`. */ .smfs--v2 .smfs__scroll #sm-stage[data-shape="circle"] { max-height: 32dvh; max-width: min(100%, 32dvh); width: auto; margin: 0 auto; } /* Рамка всередині сцени має власне число `min(340px, 80vw)` (мобільний блок smart_maisternya.css) — 312 px, більше за нову стелю. Прив'язуємо її до висоти сцени, інакше вона знову вилізе за край і буде обрізана. */ .smfs--v2 .smfs__scroll #sm-stage[data-shape="circle"] .sm-flat__frame { width: auto; height: 100%; aspect-ratio: 1 / 1; max-width: 100%; } .smfs--v2 .smfs__side .smc__log { min-height: 90px; } } /* ── Службові поверхи в оверлеї — тонші за сторінкові ──────────────────── ⚠️ Замір 390×844 із готовим дизайном: макет 263, шапка чату 98, ряд режимів 52, поле вводу 122, ціна 65 — під саму розмову 172. Кожен із цих поверхів на СТОРІНЦІ заслужений (там людина читає й обирає), а в оверлеї вона вже все прочитала і прийшла говорити. ⚠️ Маскот лишається обличчям, а не значком: 44 px — та сама межа, нижче якої власник свого часу забракував 40. Зникає лише підпис «відповідає за кілька секунд»: у розмові, яка вже йде, він нічого не додає. */ .smfs--v2 .smfs__side .smc__head { padding-top: 6px; padding-bottom: 6px; } .smfs--v2 .smfs__side .smc__ava { width: 44px; height: 44px; } /* Перемикач режимів: 44 px тапзони лишаються, зникає тільки повітря. */ .smfs--v2 .smfs__side .sm-modes { margin: 0; } .smfs--v2 .smfs__side .sm-mode { padding-top: 9px; padding-bottom: 9px; } /* ── КОЛИ ЛЮДИНА ПИШЕ (клас ставить sm_fullscreen.js по visualViewport) ─── ⚠️⚠️ Замір на 390×430 (телефон із клавіатурою): від стрічки реплік лишався 21 px — усе інше з'їли поверхи, які в цю секунду не потрібні. Прибираємо їх РІВНО НА ЧАС НАБОРУ, і жоден із них не зникає назавжди: відпустив поле — усе повернулось тим самим кадром. ⚠️ Що саме прибираємо і чому саме це: макет — його щойно було видно, а домалювати він однаково не встигне; шапка чату — маскот 98 px, це половина того, що лишається під розмову; перемикач режимів — людина вже в розмові, вибір зроблено; ціна й «Купити» — під клавіатурою до них однаково не дотягнутись, а повертаються вони тим самим рухом, що й клавіатура ховається. ⚠️ Верхню смугу з «Згорнути» НЕ чіпаємо: це єдиний вихід з оверлея. */ .smfs--kbd .smfs__stage { display: none; } .smfs--kbd .smfs__side .smc__head, .smfs--kbd .smfs__side .sm-modes, .smfs--kbd .smfs__side .sm-actionbar, .smfs--kbd .smfs__side .sm-free-note, /* Разова підказка під полем («тут — вид виробу…») коштує 48 px і читається спокійно, коли людина НЕ пише. Під клавіатурою це чверть розмови. */ .smfs--kbd .smfs__side .smc__brieftip { display: none; } .smfs--kbd .smfs__side { padding-top: 4px; } /* Стрічка тепер єдиний вміст колонки — хай бере все, що є. */ .smfs--kbd .smfs__side .smc__log { min-height: 120px; } } /* ⚠️ «Малювати безкоштовно» у повному екрані — дрібним рядком. Власник: «на повному екрані зайве, тут можна менше». Прибирати не можна: це єдине місце, де сказано, що малювання нічого не коштує (фікс F10). */ .smfs--v2 .smfs__side .sm-free-note { font-size: 11.5px; line-height: 1.35; color: var(--sm-muted, #7E5F5C); margin: 0; } /* ══════════════════════════════════════════════════════════════════════════ ПОВНИЙ ЕКРАН = ВИРІБ + РОЗМОВА. РЕШТА — ПО МІНІМУМУ (30.08.2026) ЗАЧЕМ. Власник, дивлячись на живий екран: «надо прям серьёзно прятать вот это всё максимально, чтобы чат было видно, через него купить можно… не разговор и не макет… пополам». Замір 570×846 із готовим дизайном показав, звідки бралась теснота: під «не розмову і не макет» ішло 309 px із 846 (37 % екрана) — «ЧАС НА ГОДИННИКУ» зі повзунком 99, ціна з кнопкою у два поверхи 122, попередження про стрілки 36, перемикач режимів 52. Виробу лишалось 114 px, стрічці реплік — 150. ⚠️ ПРАВИЛО: в оверлеї на екран мають право ЛИШЕ виріб, розмова і купівля. Усе, що не з цих трьох, або ховається, або тисне до одного рядка. ⚠️ Купівлю НЕ ховаємо ніде й ніколи: сенс режиму — «через чат можна купити». ══════════════════════════════════════════════════════════════════════════ */ /* ── Ховаємо цілком ──────────────────────────────────────────────────────── ⚠️ «ЧАС НА ГОДИННИКУ» — повзунок стрілок у 3D-примірці. Він не впливає ні на замовлення, ні на друк: це гра з превʼю. 99 px у режимі, де кожен піксель відібраний у розмови, — найдорожча прикраса на екрані. ⚠️ Разова підказка під полем і рядок лімітів людина вже бачила на сторінці. */ .smfs--v2 .smfs__side #sm-controls-clock, .smfs--v2 .smfs__side .smc__brieftip, .smfs--v2 .smfs__side .sm-fresh-link { display: none; } /* ⚠️ `#sm-limits` СВІДОМО НЕ ХОВАЄМО (спершу сховали — і це була помилка). Він не «ще один блок»: у ньому живе «залишилось N генерацій», і показується він лише коли залишок ≤ 5 (LIMITS_SHOW_FROM у smart_maisternya.js:3817), тобто рівно тоді, коли людині це треба знати. Решту часу він і так `hidden`. */ /* ── Купівля — один рядок замість двох поверхів ──────────────────────────── ⚠️ `flex-direction: row` тут уже стояв і НЕ працював: кнопка має width:100%, і рядок переносив її вниз — заміряно 122 px замість 56. Лікує саме `flex-wrap: nowrap` плюс зняття ширини з кнопки. */ .smfs--v2 .smfs__side .sm-actionbar { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 8px; } .smfs--v2 .smfs__side .sm-actionbar .sm-price { flex: 0 1 auto; padding: 4px 10px; gap: 6px; } /* Підпис «Ціна виробу» і зведення «30 см · 12 ч» — те саме, що написано в налаштуваннях поруч; у рядку покупки лишається сума. */ .smfs--v2 .smfs__side .sm-actionbar .sm-price__lbl, .smfs--v2 .smfs__side .sm-actionbar .sm-price__note { display: none; } .smfs--v2 .smfs__side .sm-actionbar .sm-generate, .smfs--v2 .smfs__side .sm-actionbar .sm-generate--buy, .smfs--v2 .smfs__side .sm-actionbar .sm-generate--edit { flex: 1 1 auto; width: auto; min-height: 46px; padding: 10px 14px; } /* ── Перемикач режимів — смужка, а не панель ─────────────────────────────── Тапзона лишається 40 px (палець), зникає повітря навколо. */ .smfs--v2 .smfs__side .sm-modes { margin: 0; padding: 0; } .smfs--v2 .smfs__side .sm-mode { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; } /* ── Телефон: виріб і розмова ділять екран навпіл ─────────────────────────── */ @media (max-width: 899px) { /* ⚠️ Раніше сцена була `flex: 1 1 auto` і брала те, що лишиться ПІСЛЯ всіх блоків праворуч, — а лишалось 114 px. Тепер частка задана числом: 42 % висоти оверлея виробу, решта розмові. Рахуємо від --smfs-h (реальна видима висота з visualViewport), а не від 100dvh: інакше з клавіатурою частка рахувалась би від повного екрана. */ .smfs--v2 .smfs__stage { /* ⚠️ `0 1`, а не `0 0`: смуга — БАЖАНА частка, а не закон. Панель чату в стані «дизайн готовий» просить 401 px (шапка, стрічка, «Відмітити», поле, плашка «в роботі», кнопка правки), і при жорсткій частці зайве не гортається, а мовчки зникає під `overflow: hidden` — саме так пропадала спершу кнопка правки, потім поле вводу. Тепер смуга віддає виробу 38 %, але вміє поступитись до 22 %, і низ панелі завжди цілий. */ flex: 0 1 calc(var(--smfs-h, 100dvh) * .42); height: auto; min-height: calc(var(--smfs-h, 100dvh) * .24); } /* ⚠️⚠️ У ЗУМІ ЧАСТКА СКАСОВУЄТЬСЯ — ЦЕ Й БУЛА ПОЛАМАНА КНОПКА «КРУПНІШЕ». Частка 42 % вище — це домовленість між виробом і розмовою. У зумі розмови на екрані немає (`.smfs__side` схований), ділити нема з ким, а частка все одно тримала макет тим самим: заміряно 27.08.2026 на 390×844 — 232 px до натиску, 279 після. Людина тисне «крупніше» і не бачить різниці. ⚠️ Селектор двокласовий НАВМИСНО: `.smfs--zoom .smfs__stage` має ту саму вагу, що й `.smfs--v2 .smfs__stage`, і програвав за порядком. */ .smfs--v2.smfs--zoom .smfs__stage { flex: 1 1 auto; min-height: 0; } /* Підказка «Затисніть і повертайте» лежить ПОВЕРХ сцени і в смузі 42 % закриває сам виріб — на сторінці вона лишається. */ .smfs--v2 .smfs__stage .sm-3d__hint { display: none; } /* ── Поле вводу в один рядок ──────────────────────────────────────────── ⚠️ На сторінці поле навмисно окремим рядком (власник: «куди писати — теж поле незручне», під текст лишалось 179 px із 375). Але там за полем цілий екран, а тут кожні 60 px — це третина видимої розмови. В оверлеї міняємо пріоритет: рядок один, кнопки лишаються 44 px під палець. */ .smfs--v2 .smfs__side .smc__composer { flex-wrap: nowrap; align-items: center; } .smfs--v2 .smfs__side .smc__composer .smc__input { flex: 1 1 auto; width: auto; min-height: 44px; max-height: 88px; } /* Маскот у шапці — ще менший: у смужці над розмовою він і так упізнаваний. */ .smfs--v2 .smfs__side .smc__ava { width: 38px; height: 38px; } .smfs--v2 .smfs__side .smc__head { padding-top: 5px; padding-bottom: 5px; } } /* ── Ще два перекоси, спіймані замірами тієї ж хвилини ─────────────────────── */ @media (max-width: 899px) { /* ⚠️ ПОРОЖНЄ ПОЛЕ ПІД ВИРОБОМ. Смуга виробу тепер має тверду частку (42 %), а в диска лишалась стара стеля 32dvh — квадрат 270 у смузі 355, і різниця читалась як «півекрана рожевого ніщо». Стелю знімаємо: у смузі виріб має займати смугу, а ширину йому й далі диктує висота (інакше — обріз). */ .smfs--v2 .smfs__scroll #sm-stage, .smfs--v2 .smfs__scroll #sm-stage[data-shape="circle"] { max-height: 100%; max-width: min(100%, calc(var(--smfs-h, 100dvh) * .42)); } /* ⚠️⚠️ ПОЛЕ ВВОДУ ВИПАДАЛО ЗА КРАЙ ПАНЕЛІ. У панелі чату, коли дизайн уже є, живуть ще три поверхи: ряд «Відмітити» (54), плашка «в роботі» (70) і кнопка правки з підписом (93). Разом із шапкою і стрічкою це 490 px у панелі 273 — а `.smc__panel` має overflow: hidden, тобто зайве не гортається, а МОВЧКИ ЗНИКАЄ. Зникало саме поле вводу. Тиснемо ці поверхи, а не стрічку: підпис під кнопкою правки в оверлеї зайвий (там сказано, що правка дешевша — це вже прочитано на сторінці). */ .smfs--v2 .smfs__side .smc__apps { padding-top: 4px; padding-bottom: 4px; } .smfs--v2 .smfs__side .smc__steps { padding-top: 4px; padding-bottom: 4px; font-size: 12px; } .smfs--v2 .smfs__side .smc__cta { padding-top: 6px; padding-bottom: 6px; } .smfs--v2 .smfs__side .smc__cta-note { display: none; } } /* ── Виріб МУСИТЬ ЗАПОВНЮВАТИ свою смугу ─────────────────────────────────── ⚠️⚠️ Заміряно: смуга 355 px, а диск у ній 150×150 — решта рожева порожнеча. Винен був `flex: 0 1 auto` у круглого носія (ставили, щоб він не роздувався понад свою пропорцію) — без flex-grow сцена лишалась на власному `min-height: 150px`. Тепер вона росте, а пропорцію тримає aspect-ratio, ширину — стеля від висоти смуги. */ @media (max-width: 899px) { .smfs--v2 .smfs__scroll #sm-stage[data-shape="circle"] { flex: 1 1 auto; min-height: 0; aspect-ratio: 1 / 1; margin: 0 auto; } /* ── Останні поверхи, які ще тиснули розмову ──────────────────────────── Замір: панель чату просила 401 px у колонці, де вільно 443 разом із перемикачем, покупкою і попередженням, — стрічку тримав тільки її мінімум. Тиснемо саме обвʼязку, а не розмову. */ .smfs--v2 .smfs__side .smc__head { padding-top: 3px; padding-bottom: 3px; } .smfs--v2 .smfs__side .smc__steps { padding-top: 3px; padding-bottom: 3px; } .smfs--v2 .smfs__side .smc__steps img, .smfs--v2 .smfs__side .smc__steps .smc__step-img { max-height: 34px; } .smfs--v2 .smfs__side .smc__cta { padding-top: 4px; padding-bottom: 4px; } .smfs--v2 .smfs__side .smc__cta .smc__cta-btn, .smfs--v2 .smfs__side .smc__cta button { min-height: 44px; padding: 10px 14px; } /* Після цього стрічці є куди рости — піднімаємо їй підлогу назад. */ .smfs--v2 .smfs__side .smc__log { min-height: 90px; } } /* ── Останні 33 px, через які зникала кнопка правки ──────────────────────── ⚠️ Замір: панель просила 384 при 351 — і `overflow: hidden` зрізав саме `.smc__cta` («Виправити цей дизайн»). Різниця мала, тому й лікуємо дрібно: по кілька пікселів з кожного службового поверху, не чіпаючи ні розмову, ні тапзони (44 px під палець лишаються скрізь). */ @media (max-width: 899px) { .smfs--v2 .smfs__side .smc__head { padding-top: 2px; padding-bottom: 2px; } .smfs--v2 .smfs__side .smc__apps { padding-top: 2px; padding-bottom: 2px; gap: 6px; } .smfs--v2 .smfs__side .smc__steps { padding-top: 2px; padding-bottom: 2px; } .smfs--v2 .smfs__side .smc__cta { padding-top: 2px; padding-bottom: 2px; } .smfs--v2 .smfs__side .smc__log { min-height: 80px; } } /* Плашка «правку пишете до цього дизайну»: сама картка 48 px, а поверх неї було ще 20 px повітря — у смузі, де стрічка реплік коштує 82, це задорого. */ @media (max-width: 899px) { .smfs--v2 .smfs__side .smc__tgt { padding-top: 4px; padding-bottom: 4px; } .smfs--v2 .smfs__side .smc__log { min-height: 110px; } } /* ── Виріб більший, і місце для нього беремо з обвʼязки, а не з розмови ───── Власник, побачивши 30 %: «макет сильно маленький». Частку повертаємо до 42 %, але щоб розмова не з'їхала назад у щілину, тиснемо те, що поруч із нею: ⚠️ Плашку «правку пишете до цього дизайну» — в один рядок з дрібною мініатюрою (28 замість 40 + повітря): 68 px → ~40. ⚠️ Кнопку «Виправити цей дизайн» НЕ чіпаємо взагалі. Вона не дублює «▶»: «▶» надсилає репліку в розмову (безкоштовно), а ця — ЗАПУСКАЄ малювання (`launch()` у sm_chat.js). Сховати її означало б забрати єдиний спосіб запустити правку. */ @media (max-width: 899px) { .smfs--v2 .smfs__side .smc__tgt { padding: 3px 8px; gap: 8px; } .smfs--v2 .smfs__side .smc__tgt-img { width: 28px; height: 28px; } .smfs--v2 .smfs__side .smc__tgt-txt { font-size: 12px; line-height: 1.25; } .smfs--v2 .smfs__side .smc__apps { padding-top: 0; padding-bottom: 0; } .smfs--v2 .smfs__side .smc__log { min-height: 100px; } } /* ── Власник, 30.08 (два уточнення поспіль) ──────────────────────────────── ① «додай кнопку в макет на весь екран, можна ховати кнопку купити і ціну» ② «Виправити теж прибрати можна, стрілочки вистачить у чаті» ⚠️ Кнопка «⤢ Крупніше макет» тепер видна ЗАВЖДИ (у V2 вона показувалась лише в самому зумі — вхід був тільки тапом, і про нього ніхто не знав). У зумі права колонка ховається цілком разом із ціною й «Купити» — власник це підтвердив: там дивляться на виріб, а не купують. ⚠️⚠️ «Виправити цей дизайн» прибрано ТІЛЬКИ з телефона й ТІЛЬКИ в оверлеї. Це не косметика: кнопка кличе `launch()` — ручний запуск малювання. Її прибрання лишає один шлях — написати правку і натиснути «▶», а рішення запускати бере модель (так чат і працює сьогодні). На сторінці й на десктопі кнопка лишається недоторканою: там місця вистачає, і ручний запуск нікому не заважає. Повернути — прибрати цей блок. */ @media (max-width: 899px) { .smfs--v2 .smfs__grow { display: inline-flex; } .smfs--v2 .smfs__side .smc__cta { display: none; } } /* ── Ціна в оверлеї на телефоні — прибрана (власник, 30.08) ──────────────── ⚠️ Це не економія висоти: ціна стоїть У РЯДКУ з кнопкою, і рядок так само тримає висоту кнопки (62 px). Виграш інший — кнопка «Купити» стає на всю ширину, і в смузі покупки лишається рівно одна дія замість двох плям. ⚠️ Сума нікуди не зникає з магазину: вона є на самій сторінці майстерні (та сама плашка), у кошику й на кроці оформлення. В оверлеї ж людина дивиться на виріб і розмову — там цінник лише один із «не тих» блоків. ⚠️ Тільки телефон і тільки оверлей: на десктопі в колонці 733 px місця вистачає, і ціна поруч із кнопкою нікому не заважає. */ @media (max-width: 899px) { .smfs--v2 .smfs__side .sm-actionbar .sm-price { display: none; } } /* ── Перемикач «Чат | Описати самому» в оверлеї на телефоні ──────────────── Власник: «це не треба постійно перемикати». 52 px у режимі, де кожні 50 — це чверть видимої розмови. ⚠️⚠️ ХОВАЄМО ЛИШЕ В РЕЖИМІ ЧАТУ. Якщо людина відкрила повний екран, стоячи в «Описати самому», перемикач — єдина дорога назад до розмови: сховати його там означало б замкнути людину у формі опису без виходу. Тому умова `#sm-app.sm--m-chat` — id плюс клас, свідомо важча за базові правила. */ @media (max-width: 899px) { #sm-app.sm--m-chat .smfs--v2 .smfs__side .sm-modes { display: none; } } /* ── Підказка в полі вводу не влазила в один рядок ───────────────────────── ⚠️ Спіймано прогоном на СПРАВЖНЬОМУ WebKit (рушій Safari) і підтверджено числом, а не оком: «Опишите задумку…» просить 160 px, а в полі вільно 159 на 390 і 144 на 375 — підказка переносилась на другий рядок і обрізалась по висоті 44. Це не особливість Safari: у Chromium те саме, просто однорядковий рядок вводу (наша ж правка) зробив поле вузьким. ⚠️⚠️ ШРИФТ САМОГО ПОЛЯ ЧІПАТИ НЕ МОЖНА: нижче 16 px iOS зумить сторінку на фокусі (це вже підписано в sm_chat.css). Але ::placeholder — окремий псевдоелемент, його розмір на зум не впливає. Тому меншаємо саме його, а введений текст лишається 16 px. Разом із меншими відступами поля і проміжками рядка: 150 px проти 156-171 вільних — влазить на обох розмірах. */ @media (max-width: 899px) { .smfs--v2 .smfs__side .smc__composer { gap: 6px; } .smfs--v2 .smfs__side .smc__input { padding-left: 10px; padding-right: 10px; } .smfs--v2 .smfs__side .smc__input::placeholder { font-size: 15px; } .smfs--v2 .smfs__side .smc__input::-webkit-input-placeholder { font-size: 15px; } } /* ── Шапка чату на вузькому: назва в один рядок ──────────────────────────── ⚠️ Крупний план на WebKit (375 px): «Чат мастерской» ламався на два рядки, бо поруч стояла кнопка з підписом «Новий чат» (104 px). В оверлеї цей підпис зайвий: сам значок ⟲ уже говорить «почати спочатку», а слово «чат» двічі в одному рядку («Чат мастерской» + «Новый чат») — це шум. Лишаємо значок у тапзоні 44 px і віддаємо звільнене назві. */ @media (max-width: 899px) { .smfs--v2 .smfs__side .smc__reset { width: 44px; min-width: 44px; height: 44px; padding: 0; justify-content: center; } .smfs--v2 .smfs__side .smc__reset .smc__reset-txt, .smfs--v2 .smfs__side .smc__reset .smc__reset-short { display: none; } /* ⚠️ Питання «Точно?» лишається текстом: воно з'являється НА МІСЦІ значка після першого натискання, і без нього кнопка стирала б розмову мовчки. */ .smfs--v2 .smfs__side .smc__reset.is-ask { width: auto; min-width: 0; padding: 0 10px; } .smfs--v2 .smfs__side .smc__title { white-space: nowrap; } } /* ── Телефон, v2 без зуму: сцена — НЕ КВАДРАТ (владелец 04.09, скрін: червоний квадрат на всю ширину, а циферблат усередині вдвічі менший; розмові лишалось 135 px). Круг бере 26 % висоти екрана, підкладка й поля знімаються — на екрані просто виріб, решта віддається розмові. Зум лишається як був (там сцена і має бути великою). */ @media (max-width: 899px) { .smfs--v2:not(.smfs--zoom) .smfs__stage { flex: 0 0 auto; } .smfs--v2:not(.smfs--zoom) .smfs__scroll #sm-stage[data-shape="circle"] { height: 26dvh; max-height: 26dvh; min-height: 150px; width: auto; aspect-ratio: 1 / 1; margin: 0 auto; background: transparent; box-shadow: none; border-radius: 0; } .smfs--v2:not(.smfs--zoom) .smfs__scroll #sm-stage[data-shape="circle"] .sm-stage__flat { padding: 2px; } /* 3D: коралова підкладка контейнера (для сторінки — рішення 23.08) у смузі телефона читалась як червоний квадрат навколо дрібних годин — знімаємо, лишається сам виріб. */ .smfs--v2:not(.smfs--zoom) .smfs__scroll #sm-stage[data-shape="circle"] .sm-stage__3d { background: none; } .smfs--v2:not(.smfs--zoom) .smfs__scroll #sm-stage[data-shape="circle"] .sm-flat__frame { width: auto; height: 100%; aspect-ratio: 1 / 1; max-width: 100%; } }