/* КРУПНЫЙ РЕЖИМ — для пожилых (Лираз, 05.10.2026: «собрать под этот
   телефон HOLYLAND… всё адаптировано под бабушку, с крупными буквами и
   значками»). Телефон — Samsung Galaxy S8, Android 9, экран 360×740.

   Всё здесь живёт под html.hl-big. Класс ставит __hlBigBoot в <head> ДО
   первого кадра, а включает и выключает __hlBig в конце index.html.
   Без класса этот файл не делает ничего.

   Буквы растит НЕ этот файл, а общий множитель --fs (__hlFont, «Размер
   шрифта» в кабинете): крупный режим ставит его на 1.45. Здесь — только
   то, чего множитель не умеет: размеры кнопок и значков, подписи под
   значками, контраст и тишина вокруг.

   Офана не трогаем вовсе: ни одного селектора .hlc-* / .ofan2-*. Его
   размер от размера букв приложения не зависит — правило Лираз.

   Старые телефоны (Chromium 99): без :has(), без container queries, без
   color-mix(), без inset. Цвета — только опоры. Сторож
   scripts/check-big-mode.mjs. */

/* ---------- контраст ---------- */
/* Приглушённое становится просто вторым голосом, а не шёпотом: служебные
   строки (время, «в сети», подсказка в поле) читаются без прищура. */
html.hl-big{--ink-faint:var(--ink-dim);--hint:var(--ink-dim)}
html.hl-big:not([data-theme="light"]){--line:rgba(var(--gold-rgb),.36)}
html.hl-big[data-theme="light"]{--line:rgba(var(--teal-rgb),.5)}

/* ---------- тишина: редкое прячем ---------- */
/* Только то, без чего чат работает: смена темы и поиск в шапке, номер
   выпуска, имя рядом с кружком лица, избранное. Всё возвращается, как
   только крупный режим выключен в кабинете. */
html.hl-big #themeApp,
html.hl-big #hlFindTop,
html.hl-big #langTop,
html.hl-big #verBadge,
html.hl-big .topbar .me .nm,
html.hl-big #favoriteMessagesBtn,
html.hl-big .hl-context-version,
html.hl-big .msg-favorite{display:none !important}

/* ---------- шрифт названий: Arial ---------- */
/* Лираз, 05.10.2026: «сделай бабусе Arial в названиях». Узорные шрифты
   заголовков (Marcellus, Forum, Frank Ruhl Libre) в крупном режиме
   уступают простому Arial: названия чертогов, имена авторов, шапка
   комнаты, подписи панели, заголовки разделов, буквы на значках залов.
   Опоры --disp не трогаем: их наследует и Офан, а он не должен меняться.
   Текст сообщений и так в Arial (--ui). */
html.hl-big .disp,
html.hl-big .he,
html.hl-big .brand,
html.hl-big .lcard h1,
html.hl-big .fcard h2,
html.hl-big .vhead h2,
html.hl-big .sec,
html.hl-big .hall .ha,
html.hl-big .hall .ht b,
html.hl-big .rtitle b,
html.hl-big .msg .who,
html.hl-big .tab > span,
html.hl-big .rs-h,
html.hl-big .favorite-head h2,
html.hl-big .cab-hero h3,
html.hl-big .tile .t-v,
html.hl-big .card h4,
html.hl-big .soon h3,
html.hl-big .track b,
html.hl-big .dmhead h2,
html.hl-big #mkSheet .mk-h b,
html.hl-big #plSheet h3,
html.hl-big .rempty .om,
html.hl-big .soon .om{font-family:Arial,Helvetica,sans-serif}

/* ---------- шапка ---------- */
/* Надпись HOLYLAND держит свои 18 (правило с !important в index.html), а
   место ей освобождают спрятанные выше кнопки: на 1.45 при них она
   упиралась в соседей и резалась («HOLYLANI»). */
html.hl-big .topbar{gap:14px}
html.hl-big .topbar #hlDmTop{width:52px;height:52px}
html.hl-big .topbar #hlDmTop svg{width:28px;height:28px}
html.hl-big .topbar .me .av{width:52px;height:52px;font-size:22px}

/* ---------- вход ---------- */
/* На 1.45 карточка входа выше экрана S8 (853 при 740, а с адресной
   строкой и клавиатурой места ещё меньше). Посередине она уходила за
   верх без прокрутки, и поле могло спрятаться под клавиатурой. Поля
   auto держат её посередине, пока влезает, и отдают лишнее вниз, в
   прокрутку, когда не влезает. То же у сброса пароля и заявки. */
html.hl-big #login{overflow-y:auto;-webkit-overflow-scrolling:touch}
html.hl-big #login .lcard,
html.hl-big #reset .fcard,
html.hl-big #facade .fcard{margin-top:auto;margin-bottom:auto}
html.hl-big #login .field input{min-height:58px;font-size:calc(17px * var(--fs,1))}
html.hl-big #login .primary,
html.hl-big #reset .fsend{min-height:58px}
html.hl-big #btnForgot{min-height:48px;font-size:calc(15px * var(--fs,1))}

/* ---------- список чертогов ---------- */
html.hl-big .hall{min-height:76px;padding:14px 16px;gap:16px}
html.hl-big .hall .ha{width:56px;height:56px;border-radius:16px;font-size:24px}
html.hl-big .hall .chev{font-size:28px}

/* ---------- голосовое ---------- */
html.hl-big .vmsg{gap:12px;min-width:220px}
html.hl-big .vplay{width:56px;height:56px}
html.hl-big .vplay .tr-ic{width:26px;height:26px}
html.hl-big .vbar{height:6px}
html.hl-big #nowVoice .nv-play{width:48px;height:48px}
html.hl-big #nowVoice .nv-play .tr-ic{width:22px;height:22px}
html.hl-big #nowVoice .nv-close{min-width:48px;min-height:48px}

/* ---------- облако для письма ---------- */
/* Три кнопки — вложить, голос/кружок, отправить — становятся плитками
   64×64 со значком и подписью под ним. Подпись голосовой кнопки меняется
   вместе с её видом: «Голос» или «Кружок» (класс hi-mic / hi-cam ставят
   __hlIcons и __hlTg, мы его только читаем). Во время записи подписи нет:
   там у кнопки своё кольцо предела, и оно рисуется тем же ::after. */
html.hl-big .composer{gap:8px;padding-left:10px;padding-right:10px}
html.hl-big #attachBtn,
html.hl-big #micBtn,
html.hl-big #mSend{min-width:64px;width:auto;height:64px;padding:0 4px;border-radius:18px;
  flex-direction:column;gap:3px;--isz:30px !important}
html.hl-big[dir=rtl] #mSend{transform:none}
html.hl-big #attachBtn::after,
html.hl-big .composer:not(.recording) #micBtn::after,
html.hl-big #mSend::after{display:block;font-size:13px;font-weight:700;line-height:1.1;white-space:nowrap;letter-spacing:0}
html.hl-big #attachBtn::after{content:var(--hl-big-attach,"Вложить")}
html.hl-big .composer:not(.recording) #micBtn.hi-mic::after{content:var(--hl-big-voice,"Голос")}
html.hl-big .composer:not(.recording) #micBtn.hi-cam::after{content:var(--hl-big-circle,"Кружок")}
html.hl-big .composer:not(.recording) #micBtn.hi-send::after,
html.hl-big #mSend::after{content:var(--hl-big-send,"Отправить")}
/* Во время записи кнопка снова круглая: вокруг неё кольцо предела, и
   квадратная плитка торчала бы из круга углами. */
html.hl-big .composer.recording #micBtn{width:64px;height:64px;padding:0;border-radius:50%;--isz:30px !important}
/* Подсказка в поле — в одну строку и чуть мельче набранного текста.
   Иначе «Написать в чертог…» на 1.45 переносится, и пустое поле стоит
   двухэтажным. Многоточие ставит только WebKit: Chromium у textarea
   text-overflow для подсказки не исполняет, поэтому кегль подобран так,
   чтобы подсказка влезала целиком на 360 пикселях. */
html.hl-big .composer textarea::placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:calc(var(--composer-font-size) * 1.1)}

/* ---------- телефон: шапка комнаты и нижняя панель ---------- */
/* Только телефонная раскладка — те же медиазапросы, что у самой панели.
   На компьютере панель — боковая колонка со своими подписями. */
@media (max-width:1079.98px), (hover:none), (pointer:coarse){
/* Шапка комнаты — тоже только телефон: на компьютере «Назад» спрятан
   (desktop-shell), список залов стоит рядом, и показывать его нельзя. */
/* «Назад» — значок И слово. Слово подставляет __hlBig, по-русски. */
html.hl-big .rhead{gap:10px;padding-left:12px;padding-right:12px}
html.hl-big .rback{width:auto;min-width:56px;height:56px;padding:0 14px 0 8px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:4px}
html.hl-big[dir=rtl] .rback{padding:0 8px 0 14px}
html.hl-big .rback::before{width:28px;height:28px}
html.hl-big .rback::after{content:var(--hl-big-back,"Назад");font-size:17px;font-weight:700;line-height:1;white-space:nowrap}
html.hl-big .rtitle b{font-size:26px}

html.hl-big .tabbar{padding:6px 6px 8px}
html.hl-big .tab{height:68px;border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0}
/* Коробка значка одна на всех — 40, иначе подпись под золотым кружком
   Ленты стоит ниже соседних. Значок и есть .ic.nav-icon, размер рисунка
   задаём его svg. */
html.hl-big .tabbar .tab .ic,
html.hl-big .tabbar .tab.tab-mid .ic{width:40px;height:40px}
html.hl-big .tabbar .tab .ic svg{width:30px;height:30px}
html.hl-big .tabbar .tab.tab-mid .ic svg{width:24px;height:24px}
html.hl-big .tab > span:not(.ic){position:static;width:auto;height:auto;max-width:100%;overflow:hidden;
  clip-path:none;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;line-height:1.1}
/* Панель стала выше на 16 — на столько же выше и запас под ней. */
html.hl-big .view{padding-bottom:calc(112px + var(--safe-b))}
}

/* ---------- переключатель в кабинете ---------- */
/* Стоит под «Размером шрифта» и одет как он. Виден всегда — иначе
   крупный режим нельзя было бы включить. */
#hlBigBox{display:block;width:100%;padding:14px;border-radius:14px;border:1px solid rgba(var(--gold-rgb),.24);
  background:var(--glass);margin:10px 0;box-sizing:border-box}
#hlBigBox .ttl{font-weight:600;font-size:calc(15px * var(--fs,1));line-height:1.2;color:var(--ink);margin-bottom:3px}
#hlBigBox .sub{font-size:calc(12px * var(--fs,1));line-height:1.3;color:var(--ink-dim);margin-bottom:12px}
#hlBigBox button{display:block;width:100%;min-height:52px;padding:10px 12px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(var(--gold-rgb),.35);background:var(--glass2);color:var(--ink);
  font:inherit;font-size:calc(16px * var(--fs,1));font-weight:700;line-height:1.2}
#hlBigBox button[aria-checked="false"]{background:var(--gold-fill);color:var(--on-gold);border-color:transparent}
