/* ------------------------------------------------------------------ *
 *  core/ui/mobile.css — мобільний режим UI (R3, ПЛАН_Апка_Раунди.md).
 *
 *  ⚠️ Усе тут скопіровано під селектор `html.ph-mobile-mode` (клас ставить
 *  core/ui/mobile-nav.js за умовою isNative()||viewport<768 — §3а ТЗ).
 *  Жодного правила БЕЗ цього префікса: інакше воно протече на десктопний
 *  веб і зламає вимогу раунду "десктопний вигляд — піксель-у-піксель як
 *  до раунду". Це ГЛОБАЛЬНИЙ CSS-шар (УІ-ГАЙД §6.1) — жодних правок у
 *  styleBlock() модулів, самі модулі свою розмітку не міняли.
 *
 *  Підключення — index.html, ПІСЛЯ styles.css (щоб токени --bg/--border/…
 *  вже були визначені; той самий каскад, що дозволяє модульним styleBlock()
 *  спиратись на них).
 * ------------------------------------------------------------------ */

:root {
  /* Висота нижньої навігації + відступ від контенту над нею. Один токен —
   * використовується і для padding-bottom контейнерів під навігацією,
   * і для власної висоти .ph-mobile-nav, щоб два числа ніколи не розійшлись. */
  --ph-nav-h: 56px;
  /* R3-fix-nav п.4: висота смужки контексту проекту (над нав-баром). Окремий
   * токен — той самий принцип, що --ph-nav-h: контейнери під навігацією і
   * сама смужка мають узгоджений відступ, одне число, не дублювати. */
  --ph-project-bar-h: 26px;
}

/* ==================== 1. Сайдбар-drawer (R3-fix-nav п.1) ================= *
 * R3 ховав #sidebar БЕЗУМОВНО (display:none!important) — фідбек власника
 * 2026-08-19: повернути як висувну панель. #sidebar лишається тим самим
 * DOM-вузлом, що на десктопі (нічого всередині не переверстовано — умова
 * раунду), тут лише позиціювання: fixed зліва, поверх контенту, ховається/
 * показується через transform (не display), клас-перемикач на html
 * (ph-mobile-sidebar-open) ставить core/ui/mobile-nav.js.
 *
 * display:flex!important лишається (а не звичайний display:flex) з тієї ж
 * причини, що раніше було !important на display:none: .hidden{display:none
 * !important} (styles.css:73) — той самий localStorage-прапорець
 * ph_sidebar_collapsed (десктопний toggleSidebar() і легасі авто-закриття
 * на ≤640px, app.js:248-256/534-538, обидва чужі файли) і надалі може
 * ставити/знімати .hidden на #sidebar. Специфічність html.клас#id + !important
 * б'є голий .hidden{...!important} (id-компонент вищий за клас навіть серед
 * !important-правил) — тобто мобільний вигляд #sidebar повністю ізольований
 * від десктопного прапорця, лише тепер керується transform, а не display. */
html.ph-mobile-mode #sidebar {
  display: flex !important;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 95; /* нижче #modal-overlay(100), вище нижньої нав(90), смужки контексту(90) і бекдропу(94) */
  width: 80vw;
  max-width: 320px;
  transform: translateX(-100%);
  transition: transform .2s ease;
  box-shadow: 4px 0 16px rgba(0, 0, 0, .22);
}
html.ph-mobile-sidebar-open #sidebar { transform: translateX(0); }

/* Бекдроп — окремий елемент, монтує mobile-nav.js (mountSidebarBackdrop);
 * тап по ньому закриває drawer (перехоплюється тим самим window-capture
 * слухачем, що й кнопка-тоглер, mobile-nav.js). */
.ph-mobile-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 94;
  background: rgba(0, 0, 0, .4);
}
html.ph-mobile-mode.ph-mobile-sidebar-open .ph-mobile-sidebar-backdrop { display: block; }

/* ==================== 2. Safe-area (вирізи/жести) ======================= *
 * env(safe-area-inset-*) повертає 0 без <meta viewport-fit=cover> (iOS) —
 * на Android WebView теж потрібен цей meta для реального відступу під
 * камеру-виріз; додано в index.html цим раундом (§ ЖОРСТКІ ПРАВИЛА:
 * необхідний шов, задокументовано в Прогресі). До появи вирізу физично на
 * пристрої без нього env() просто дає 0 — безпечний дефолт, нічого не
 * ламає. */
html.ph-mobile-mode #topbar {
  height: calc(52px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
html.ph-mobile-mode #screen-login {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Фікс прийому R3 (оркестратор, 2026-08-18): перемикач мов логін-екрана
 * має інлайновий position:fixed top:16px (index.html:27) — падінг екрана
 * на fixed-елемент не діє, з viewport-fit=cover він залазив під
 * статус-бар. Інлайн-стиль перебивається лише !important. */
html.ph-mobile-mode #screen-login .lang-switcher {
  top: calc(16px + env(safe-area-inset-top, 0px)) !important;
}
html.ph-mobile-mode #screen-projects {
  padding-top: calc(32px + env(safe-area-inset-top, 0px));
  padding-left: max(24px, env(safe-area-inset-left, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}

/* ==================== 3. Місце під нижню навігацію ======================= *
 * Контент двох екранів, де нав видима (screen-projects/screen-app), не
 * повинен ховатись під нею. #canvas-scroll власний скрол-контейнер
 * #main — саме туди й додаємо відступ, не в #screen-app (flex-контейнер
 * без власного скролу). */
html.ph-mobile-mode #screen-projects {
  padding-bottom: calc(var(--ph-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
}
html.ph-mobile-mode #canvas-scroll {
  /* + --ph-project-bar-h (R3-fix-nav п.4): #canvas-scroll існує ЛИШЕ
   * всередині #screen-app (index.html), а смужка контексту проекту
   * показується рівно там, де #screen-app видимий у мобільному режимі —
   * тому додаємо її висоту тут безумовно, без окремого класу-перемикача. */
  padding-bottom: calc(var(--ph-nav-h) + var(--ph-project-bar-h) + env(safe-area-inset-bottom, 0px) + 16px);
}
/* Плаваючий таймер кадру (Планування) — інакше на мобільному лежить під
 * нижньою навігацією/смужкою контексту, недоступний для тапу. */
html.ph-mobile-mode .shoot-timer-widget {
  bottom: calc(var(--ph-nav-h) + var(--ph-project-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
}

/* ==================== 4. Тап-цілі ≥44px (ПЛАН §4 R3) ===================== *
 * Тільки інтерактивні елементи хрому — не таблиці/картки цілком (вони
 * мають власну ≤640px-адаптацію по УІ-ГАЙД §5.2, чіпати її тут не треба
 * і не можна — то модульний шар). min-height, а не height: не ламає
 * вміст, що вже вищий (напр. textarea). */
html.ph-mobile-mode button,
html.ph-mobile-mode select,
html.ph-mobile-mode .tree-row,
html.ph-mobile-mode input[type="text"],
html.ph-mobile-mode input[type="email"],
html.ph-mobile-mode input[type="password"] {
  min-height: 44px;
}
html.ph-mobile-mode button.ghost {
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==================== 5. Нижня навігація ================================= */
.ph-mobile-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90; /* під #modal-overlay(100) і .shoot-timer-widget(110) — модалка/таймер лишаються поверх */
  height: calc(var(--ph-nav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}
.ph-mobile-nav.hidden { display: none; }
.ph-mobile-nav-item {
  flex: 1 1 0;
  min-width: 44px;
  min-height: var(--ph-nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  padding: 4px 2px;
}
.ph-mobile-nav-item:hover { background: var(--hover); }
.ph-mobile-nav-item.active { color: var(--accent, #3b82f6); }
.ph-mobile-nav-icon .icon { width: 20px; height: 20px; }
.ph-mobile-nav-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ==================== 5b. Смужка контексту проекту (R3-fix-nav п.4) ====== *
 * Тонка смужка над нижньою навігацією з назвою відкритого проекту; текст
 * бере syncProjectContextBar() (mobile-nav.js) з #sb-project-name (сайдбар,
 * app.js:1387 підтримує його актуальним незалежно від видимості сайдбару) —
 * жодного дублювання джерела даних. Показ/приховання — лише на #screen-app
 * (проект відкритий), той самий екран-фільтр, що нав-бар. */
.ph-mobile-project-bar {
  position: fixed;
  left: 0; right: 0;
  bottom: calc(var(--ph-nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 90; /* той самий шар, що нав-бар — не перекриваються (сусідні смуги) */
  height: var(--ph-project-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.ph-mobile-project-bar span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.ph-mobile-project-bar.hidden { display: none; }

/* ==================== 6. Плашка "Відкрити на десктопі" =================== *
 * Інформативна, НЕ блокуюча: модуль під нею рендериться як завжди (раунд
 * забороняє чіпати модулі/переверстовувати екрани — банер лише
 * повідомляє, редагування лишається доступним, просто незручним на
 * телефоні, як і задокументовано в ТЗ §4.1 п.2). */
.ph-mobile-desktop-banner {
  /* Вставляється (mobile-nav.js) ПЕРШОЮ дитиною #canvas-scroll — сиблінг
   * #canvas, не всередині нього, тому без прив'язки до padding канвасу. */
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 16px;
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  text-align: center;
}
.ph-mobile-desktop-banner.hidden { display: none; }

/* ==================== 7. Дрібні верстальні виправлення =================== *
 * Без горизонтального скролу сторінки цілком (окремі широкі таблиці
 * скроляться в СВОЄМУ контейнері за наявним патерном УІ-ГАЙД §5.2). */
html.ph-mobile-mode body { overflow-x: hidden; }
html.ph-mobile-mode #canvas { padding-left: 12px; padding-right: 12px; }

/* ==================== 8. Месенджер: композер і сусідні тулбари =========== *
 * (R3-fix-nav п.5, скріншот власника) Бага: textarea композера "Написати
 * повідомлення…" стиснулась у вертикальну колонку шириною в одну літеру.
 * Причина — класична flexbox-пастка: modules/messenger/index.js задає
 * `.msngr-composer textarea.msngr-composer-input{flex:1}` (flex-basis:0%,
 * тобто "гумовий" елемент рядка), а сусідні кнопки-іконки — `.ghost`
 * (`.msngr-composer .ghost{flex:0 0 auto}`, свій негнучкий розмір). §4 цього
 * ж файлу підняв тап-ціль ghost-кнопок до ≥44px — на вузькому екрані трьох
 * таких кнопок (вкладення/мікрофон/відправка, кожна тепер 44×44) вистачає,
 * щоб забрати левову частку рядка; textarea — ЄДИНИЙ елемент, що стискається
 * (flex-shrink:1 за замовчуванням, без свого min-width), тож увесь дефіцит
 * падає саме на неї. R3-fix-nav лишав це ОДНИМ рядком (текст+кнопки поруч).
 *
 * R3-fix-chat-ui2 п.1 — ОНОВЛЕННЯ ВІД ВЛАСНИКА (2026-08-19, під час цього
 * раунду, коригує початковий текст п.1): "Всі іконки дій постав ПІД
 * текстовою зоною, не поруч" — композер став ДВОРЯДНИМ:
 *   Рядок 1: textarea, ВСЯ ширина екрана (з паддінгами), росте вгору.
 *   Рядок 2: усі кнопки дій одним рядком під полем, компактні (22-24px
 *            іконка), відправка притиснута праворуч.
 *
 * Реалізація — ЧИСТИЙ CSS, 0 рядків JS (жодного JS-хелпера не знадобилось,
 * ЖОРСТКІ ПРАВИЛА раунду: mobile-nav.js лише "якщо без JS фізично не
 * обійтись"): `.msngr-composer` лишається flex-контейнером модуля, тут
 * лише додано `flex-wrap:wrap`; textarea отримує `flex-basis:100%` і
 * НАЙМЕНШИЙ `order` — алгоритм wrap у браузера обробляє flex-items у
 * порядку `order` (не порядку DOM), тому 100%-ширинний елемент ЗАВЖДИ
 * займає рядок цілком і примусово переносить УСІ інші items (з вищим
 * order) на наступний рядок — незалежно від того, що в розмітці модуля
 * частина кнопок (скріпка/лінк/емоджі) стоїть ДО textarea, а частина
 * (мікрофон/відправка/шеврон) ПІСЛЯ. Кнопки знайдено за
 * `[data-on-click="…"]` — той самий атрибут, що dataAttrs()/actions.js
 * і так друкують у розмітку для делегованого диспетчера; це ЧИТАННЯ
 * наявного атрибута, не новий гак — DOM месенджера не змінено.
 *
 * ⚠️ Специфічність (той самий факт, що вище): інлайн-`<style>` месенджера
 * вставляється ПІЗНІШЕ за цей `<link>` — тому textarea-селектор повторює
 * повний ланцюг контейнера (`.msngr-composer textarea.msngr-composer-input`)
 * ПЛЮС html.ph-mobile-mode, вища специфічність перемагає незалежно від
 * порядку вставки. */
html.ph-mobile-mode .msngr-composer {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 8px 10px;
  min-width: 0;
}
html.ph-mobile-mode .msngr-composer textarea.msngr-composer-input {
  order: -1;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  min-height: 40px;
}
/* Рядок 2 — усі кнопки дій. Точковий виняток із загальних §4 44×44
 * (той самий прийом, що §9.1 нижче для кебаба/реакції повідомлення):
 * власник явно попросив "компактні 22-24px" — 44px тут ламає "рядок дій
 * під полем" на купу окремих квадратів. 34×34 тап-ціль з 22px іконкою
 * всередині — компроміс дотик/охайність, той самий клас рішення, що
 * §9.1/§9.7. */
html.ph-mobile-mode .msngr-composer > .ghost {
  order: 1;
  flex: 0 0 auto;
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
}
html.ph-mobile-mode .msngr-composer .icon {
  width: 22px;
  height: 22px;
}
/* Порядок зліва направо в рядку 2 (не порядок DOM — власник просив
 * "розумний розподіл, відправка праворуч"): емоджі → скріпка → лінк →
 * мікрофон, далі margin-left:auto на кнопці відправки виштовхує саме її
 * (і шеврон розкладу-відправки після неї) до правого краю, лишаючи лівий
 * кластер зліва — той самий Telegram-розподіл, лише у 2 рядки замість 1. */
html.ph-mobile-mode .msngr-composer > [data-on-click="messenger.toggleEmoji"] { order: 1; }
html.ph-mobile-mode .msngr-composer > [data-on-click="messenger.attachClick"] { order: 2; }
html.ph-mobile-mode .msngr-composer > [data-on-click="messenger.toggleCrosslinkPicker"] { order: 3; }
html.ph-mobile-mode .msngr-composer > .msngr-voice-mic-btn { order: 4; }
html.ph-mobile-mode .msngr-composer > [data-on-click="messenger.composerSendClick"] { order: 5; margin-left: auto; }
html.ph-mobile-mode .msngr-composer > .msngr-send-menu-btn { order: 6; }

/* Сусідні тулбари (текст раунду: "той самий клас проблем") — перевірено:
 * - .msngr-attach-controls (рядок вкладень): жодного flex:1-"гумового"
 *   елемента серед дітей (лейбл "Надіслати як файл" + лічильник + кошик —
 *   усі auto-розміру), тому колапс в 1 літеру структурно неможливий; на
 *   дуже вузьких екранах сума ширин + 44px кнопка кошика все ж може не
 *   влізти в один рядок — flex-wrap:wrap як безпечний запобіжник (рядок
 *   переноситься, а не обрізається/налазить).
 * - .msngr-reaction-quick-row / .msngr-picker-tab (панель реакцій, вкладки
 *   Emoji/GIF): лише кнопки фіксованої ширини (emoji, вкладки), жодного
 *   flex:1-текстового поля — той самий клас бага там структурно
 *   неможливий; §4 (button{min-height:44px}) робить їх лише вищими, без
 *   впливу на ширину рядка. */
html.ph-mobile-mode .msngr-attach-controls {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* ==================== 9. Месенджер: телеграмна розмітка стрічки ========== *
 * (R3-fix-chat-ui, фідбек власника 2026-08-19: "Розмітку зробити в стилі
 * телеграма: видно свої та чужі по кольорам і положенню, вся технічна
 * інформація так само як в телеграмі".)
 *
 * "СВОЄ/ЧУЖЕ" БЕЗ JS-ТЕГЕРА. modules/messenger/index.js (лише прочитано)
 * НЕ маркує `.msngr-msg` класом/атрибутом "моє"/"чуже" напряму (жодного
 * data-author/data-own у розмітці — перевірено пошуком по всьому файлу),
 * АЛЕ рядок містить НАДІЙНИЙ непрямий маркер: `renderStatusTick()`
 * (index.js) рендерить `<span class="msngr-msg-status">` (⏳/✓/✓✓) РІВНО
 * тоді, коли `row.author_id === myId` (та сама умова, що `isOwnMessage()`
 * усередині модуля), і НІКОЛИ інакше — елемент просто відсутній у
 * розмітці чужих повідомлень. Тобто присутність `.msngr-msg-status` У
 * РЯДКУ — вже готовий, завжди точний маркер "моє", яким модуль й так
 * промаркував кожен рядок (побічний ефект чужої задачі M8, не наш код).
 * Аналогічно `.msngr-system` (тіло повідомлення) — присутнє ЛИШЕ для
 * `row.kind==='system'`. Обидва читаються через `:has()` (той самий
 * прийом, що вже є прецедентом у styles.css:1084
 * `.sb-prop-table-check:has(input:checked)` — не новий патерн для цього
 * репо). Тому легкий класс-тегер у mobile-nav.js НЕ знадобився (ЖОРСТКІ
 * ПРАВИЛА раунду: "ТІЛЬКИ якщо без JS-хелпера фізично не обійтись" — тут
 * фізично обійшлось; mobile-nav.js цим раундом НЕ чіпався, i18n-ключі
 * теж не знадобились — жодного нового статичного тексту).
 *
 * Крайовий випадок (враховано в §9.5): системне повідомлення, де АКТОР —
 * я сам (напр. "Ви додали Івана"), теж матиме `.msngr-msg-status`
 * (renderStatusTick викликається незалежно від row.kind) — тобто рядок
 * матиме ОБИДВА маркери одночасно. §9.5 навмисно йде ПІСЛЯ §9.3 у файлі —
 * за рівної специфічності `:has()`-селекторів виграє порядок джерела,
 * системний вигляд коректно перебиває "своє" оформлення.
 *
 * МЕХАНІКА РОЗКЛАДКИ. `.msngr-msg-meta` (контейнер author/time/ред./
 * тихе/галочки/дії) стоїть ОДНИМ рядком ПЕРЕД quote/body в розмітці
 * модуля, а Telegram-вигляд вимагає ім'я ЗВЕРХУ бульбашки і час+статус
 * ВНИЗУ — дітей одного чужого flex-контейнера треба розвести у різні
 * візуальні місця, не чіпаючи DOM. `display:contents` на `.msngr-msg-meta`
 * (лише box-модель, DOM не змінюється) "розчиняє" контейнер: його діти
 * стають прямими flex-елементами `.msngr-msg`, і кожен позиціюється
 * незалежно через `order`/`flex-basis` — ім'я+дії в один рядок зверху
 * (order:1), quote/текст/екстра/реакції — кожен своїм рядком (order:2-5,
 * flex-basis:100% примусово переносить рядок), час+ред.+тихе+статус —
 * спільний рядок знизу (order:6, margin-left:auto на часі притискає
 * групу праворуч). */

html.ph-mobile-mode .msngr-msg-meta { display: contents; }

/* Спільний каркас (own/other/system нижче лише додають/перебивають
 * кольори й видимість поверх цього шару). Паддінг/радіус/відступ —
 * підігнано R3-fix-chat-ui2 п.3 (фідбек власника: "8-10px гориз/6-8px
 * верт паддінг, радіус ~16px, ~8px між різними авторами"; попереднє
 * значення margin-top:6px було на межі діапазону, підняте до 8px). */
html.ph-mobile-mode .msngr-msg {
  display: flex;
  flex-flow: row wrap;
  align-items: flex-end;
  column-gap: 6px;
  row-gap: 2px;
  width: fit-content;
  max-width: 80%;
  padding: 7px 10px;
  margin-top: 8px;
  border-radius: 16px;
  position: relative;
}
html.ph-mobile-mode .msngr-msg-author,
html.ph-mobile-mode .msngr-msg-actions { order: 1; }
html.ph-mobile-mode .msngr-quote      { order: 2; flex: 1 0 100%; margin-bottom: 0; }
html.ph-mobile-mode .msngr-msg-body   { order: 3; flex: 1 0 100%; }
html.ph-mobile-mode .msngr-bot-extras { order: 4; flex: 1 0 100%; }
html.ph-mobile-mode .msngr-reactions  { order: 5; flex: 1 0 100%; margin-top: 0; }
html.ph-mobile-mode .msngr-msg-time,
html.ph-mobile-mode .msngr-edited-tag,
html.ph-mobile-mode .msngr-silent-tag,
html.ph-mobile-mode .msngr-msg-status { order: 6; flex: 0 0 auto; }
html.ph-mobile-mode .msngr-msg-time   { margin-left: auto; }

/* ---- 9.1 Дії (кебаб/реакція) — компактніше за загальний ≥44px хром ------ *
 * §4 цього файла (button.ghost{min-width:44px}) розрахований на тулбари/
 * форми — у бульбашці поруч з 11px-часом/13px-ім'ям квадрат 44×44 ламає
 * пропорції "телеграмного" рядка. Звужуємо ЛИШЕ ці дві кнопки (той самий
 * принцип точкового винятку через довший ланцюг селектора, що §8
 * композера цього ж файлу) — тап-ціль 32px: менше за загальні 44px, але
 * суттєво більше вихідних 20px модуля; свідомий компроміс візуал/дотик
 * саме для цих двох іконок рядка повідомлення, задокументовано в
 * Прогресі. */
html.ph-mobile-mode .msngr-msg-menu-btn,
html.ph-mobile-mode .msngr-msg-reaction-btn {
  min-width: 32px;
  min-height: 32px;
  width: 32px;
  height: 32px;
}

/* ---- 9.2 Чужі — нейтральна бульбашка, ліворуч ---------------------------- */
html.ph-mobile-mode .msngr-msg:not(:has(.msngr-msg-status)):not(:has(.msngr-system)) {
  align-self: flex-start;
  background: var(--hover);
  color: var(--text);
  border-radius: 16px 16px 16px 5px; /* кут "хвоста" — ліворуч знизу, менший за решту (п.3) */
}
/* Ім'я автора — лише в чужих (вимога №3 тексту раунду). Колір —
 * var(--accent), ТОЙ САМИЙ, яким модуль УЖЕ фарбує "ярлик автора" в
 * reply-цитаті (.msngr-quote-author, index.js:5725) — жодного НОВОГО
 * мапінгу "роль→колір" не вигадано: модуль такого мапінгу не має
 * взагалі (перевірено — .msngr-msg-author і .c-avatar/role-* класи
 * ніде не перетинаються, index.js:5819-5822 навіть явно документує
 * "БЕЗ прив'язки до project-role-класів" для аватара учасника чату).
 * Питання зафіксовано в ПИТАННЯ_АУДИТОРУ_Апка.md. */
html.ph-mobile-mode .msngr-msg:not(:has(.msngr-msg-status)):not(:has(.msngr-system)) .msngr-msg-author {
  color: var(--accent, #3b82f6);
}

/* ---- 9.3 Свої — акцентна бульбашка, праворуч ----------------------------- *
 * Суцільний var(--accent)+білий текст (не напівпрозорий мікс) — гарантована
 * читабельність в обох темах без залежності від --text/--bg токенів (той
 * самий принцип контрасту, що вже в порталі: `.ps-tab.active` у
 * styles.css:301 — суцільний accent-фон + білий текст). */
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) {
  align-self: flex-end;
  background: var(--accent, #3b82f6);
  color: #fff;
  border-radius: 16px 16px 5px 16px; /* кут "хвоста" — праворуч знизу, менший за решту (п.3) */
}
/* Своє повідомлення — без підпису автора (вимога №3: "лише в чужих"),
 * як у Telegram. */
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-msg-author {
  display: none;
}
/* Технічні елементи всередині акцентної бульбашки — власний
 * var(--text-secondary)/var(--accent) модуля втрачає контраст на
 * суцільному accent-фоні (accent-на-accent для прочитаних галочок);
 * перебиваємо на напівпрозорий білий (Telegram-конвенція: приглушений
 * білий час на кольоровій бульбашці, яскравий білий — прочитано). */
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-msg-time,
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-edited-tag,
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-silent-tag,
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-msg-status {
  color: rgba(255, 255, 255, .8);
}
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-msg-status-read {
  color: #fff;
}
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-deleted {
  color: rgba(255, 255, 255, .75);
}
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-msg-text a {
  color: #fff;
}
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-msg-text code {
  color: var(--text);
}
/* Reply-цитата всередині своєї бульбашки — той самий елемент (геометрію
 * задає order:2/flex-basis:100% у "спільному каркасі" вище), лише
 * прозорий білий тон замість var(--hover) модуля, щоб не виглядати як
 * "чужий сірий блок" на кольоровому фоні. */
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-quote {
  background: rgba(255, 255, 255, .16);
  border-left-color: #fff;
}
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-quote-author {
  color: #fff;
}
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) .msngr-quote-snippet {
  color: rgba(255, 255, 255, .8);
}

/* ---- 9.4 Компактний ритм сусідніх повідомлень одного "боку" ------------- *
 * Текст раунду §2: "менший відступ, якщо це досяжно чистим CSS через
 * сусідні селектори однакових класів". Точної прив'язки до КОНКРЕТНОГО
 * автора розмітка не дає (жодного data-author у DOM — той самий факт,
 * що маркер §9 вище), тому групуємо за "боком" (свій/чужий підряд) —
 * найближче технічно досяжне наближення без зміни DOM модуля.
 * R3-fix-chat-ui2 п.3: власник уточнив діапазон "~2-3px" (було 1px). */
html.ph-mobile-mode .msngr-msg:has(.msngr-msg-status) + .msngr-msg:has(.msngr-msg-status),
html.ph-mobile-mode .msngr-msg:not(:has(.msngr-msg-status)):not(:has(.msngr-system))
  + .msngr-msg:not(:has(.msngr-msg-status)):not(:has(.msngr-system)) {
  margin-top: 2px;
}

/* ---- 9.5 Системні — центрована сіра капсула, без бульбашки --------------- *
 * Навмисно ПІСЛЯ §9.3 (own) у файлі — джерело-порядок вирішує крайовий
 * випадок "системна подія, де актор — я сам" (коментар на початку §9) на
 * користь системного вигляду. */
html.ph-mobile-mode .msngr-msg:has(.msngr-system) {
  display: flex;
  justify-content: center;
  align-self: center;
  width: 100%;
  max-width: 100%;
  background: none;
  color: inherit;
  padding: 2px 0;
  margin-top: 6px;
  border-radius: 0;
}
html.ph-mobile-mode .msngr-msg:has(.msngr-system) .msngr-msg-meta,
html.ph-mobile-mode .msngr-msg:has(.msngr-system) .msngr-msg-actions {
  display: none;
}
html.ph-mobile-mode .msngr-msg:has(.msngr-system) .msngr-msg-body {
  flex: 0 0 auto;
}
html.ph-mobile-mode .msngr-msg:has(.msngr-system) .msngr-system {
  display: inline-block;
  background: var(--hover);
  color: var(--text-secondary);
  font-style: normal;
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 12px;
}

/* ---- 9.6 Дії — приховані за замовчуванням, довгий тап відкриває --------- *
 * R3-fix-chat-ui2 п.2, фідбек власника 2026-08-19: "Прибрати постійні білі
 * пігулки дій (емоджі-реакція + ⋮) з кожної бульбашки — головна
 * неохайність... дії відкриваються ДОВГИМ ТАПОМ по бульбашці". Раніше
 * (R3-fix-chat-ui) `.msngr-msg-actions` була завжди `display:flex` (лише
 * звужена §9.1) — на скріншоті власника це і є "постійні білі пігулки".
 *
 * Тут — ЛИШЕ перемикач видимості одним класом (`ph-msg-actions-open`),
 * DOM/кнопки месенджера не змінені: та сама пара .msngr-msg-menu-btn/
 * .msngr-msg-reaction-btn лишається в розмітці, просто в display:none,
 * поки конкретний рядок не позначений "розкрито". Клас ставить
 * mobile-nav.js (довгий тап ~450мс без руху пальця, немає готового
 * механізму в месенджері — перевірено при читанні файла, § ЖОРСТКІ
 * ПРАВИЛА раунду) — рядок 2 нижче ("Довгий тап..." mobile-nav.js).
 * Функціональність ЗБЕРЕЖЕНА повністю: після довгого тапу користувач
 * тапає РЕАЛЬНУ (не синтетичну) кнопку в розкритій пігулці — і кебаб, і
 * реакція лишаються окремо доступними (на відміну від варіанту
 * "клікнути одну з них програмно", який назавжди ховав би другу дію для
 * повідомлень без кебаба, напр. чужих непідвладних modер./deleted). */
html.ph-mobile-mode .msngr-msg-actions { display: none; }
html.ph-mobile-mode .msngr-msg.ph-msg-actions-open .msngr-msg-actions { display: flex; }
/* Нативне виділення тексту/спливаюче "Копіювати" на довгому тапі
 * змагалося б із нашим меню (та сама причина, що Telegram: довгий тап —
 * дії, не виділення тексту). Не чіпає клікабельність посилань/чіпів
 * усередині (user-select не впливає на click/pointer-events). */
html.ph-mobile-mode .msngr-msg {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---- 9.7 Реакція-капсула — компактна пігулка, не квадратна плитка ------- *
 * R3-fix-chat-ui2 п.4, фідбек власника: "компактніша (як у Telegram:
 * маленька... не квадратна плитка)". Причина "плитки" — той самий §4-факт,
 * що вже пояснено для §8/§9.1: `.msngr-reaction-chip` (index.js) теж
 * `<button>` (клік = reactionChipClick), і глобальне §4
 * `button{min-height:44px}` розтягувало компактну пігулку модуля
 * (padding:2px 8px, border-radius:12px — уже пігулка, НЕ плитка, у
 * базовому CSS модуля) саме по висоті до 44px квадрата. Точковий
 * виняток повертає компактну висоту; ширина лишається auto (не
 * min-width) — це і відрізняє пігулку від плитки. */
html.ph-mobile-mode .msngr-reaction-chip {
  min-height: 22px;
  min-width: 0;
  height: auto;
  padding: 2px 8px;
}
html.ph-mobile-mode .msngr-reactions {
  gap: 4px;
}

/* ==================== 10. Месенджер: верхній тулбар чату ================= *
 * R3-fix-chat-ui2 п.3, скріншот власника: верхній ряд чату розтягнутий.
 * `.msngr-window-header` (index.js) містить до 6 ghost-кнопок (назад/
 * налаштування кімнати/mute/відкладені/медіа/пошук) поруч із назвою
 * кімнати (flex:1) — той самий §4-факт (button.ghost{min-width:44px}), що
 * вже пояснено для композера/дій/реакції: 6×44px поруч із заголовком на
 * 375px екрані і є "розтягнутий ряд" зі скріншота. Той самий точковий
 * виняток (44px → компактний розмір, іконка 16px → 22-24px за текстом
 * раунду), застосований до ПРЯМИХ дітей заголовка (не чіпає кнопки
 * композера/дій повідомлення — вони прямі діти ІНШИХ контейнерів). */
html.ph-mobile-mode .msngr-window-header {
  gap: 4px;
  padding: 8px 10px;
}
html.ph-mobile-mode .msngr-window-header > .ghost {
  min-width: 34px;
  min-height: 34px;
  width: 34px;
  height: 34px;
}
html.ph-mobile-mode .msngr-window-header .icon {
  width: 22px;
  height: 22px;
}