/* ПРОСТОЙ РЕЖИМ — для бабушки (Лираз, 06.10.2026: «Бабуси делаешь —
   представь, что тебе 85 лет, ты ничего не понимаешь… ей нужно две кнопки:
   включить, выключить, написать, фоточку послать»). Телефон — Samsung
   Galaxy S8: Android 9, 360×740 при плотности 4, Chromium 99.

   Всё здесь живёт под html.hl-simple. Класс ставит __hlSimpleBoot в <head>
   ДО первого кадра — только по ссылке ?simple=1 (значок бабушкиного
   приложения стартует с /?big=app&simple=1) и по памяти телефона hl_simple.
   Без класса файл не делает ничего. Надстройка над крупным режимом
   (big-mode.*.css, html.hl-big): буквы ×1.45, Arial в названиях, подписи.
   Логика — assets/js/simple/simple-mode.*.js.

   Принцип: ПЕРЕЧЕНЬ РАЗРЕШЁННОГО, а не список запретного. Из корня
   приложения и из комнаты видно только названное здесь; всё, что завтра
   добавит чужой PR (кнопка, панель, значок), по умолчанию невидимо.
   Одно главное окно на экран: «Мои разговоры» → чат. Из любого места
   один заметный путь назад.

   Офана не трогаем: его выключает собственный выключатель (hl_companion),
   селекторов Офана здесь нет. Круги заморожены: их кнопка скрыта вместе со
   всей строкой ввода (запись кружка из этого режима недоступна), код кругов не
   тронут; уже играющий кружок закрывается большой кнопкой.

   Старые телефоны (Chromium 99): без :has(), без container queries, без
   color-mix(), без inset, без dvh. Цвета — только опоры, контраст текста
   не ниже 7:1 на светлой теме (проверяет стенд tests/devices/simple-mode.mjs).
   Размеры — минимальные величины и перенос слов: бабушкин телефон может
   быть с крупным системным шрифтом, ничего не должно уезжать вбок. */

/* ---------- корень приложения: только разрешённое ---------- */
html.hl-simple .topbar,
html.hl-simple .main,
html.hl-simple .tabbar,
html.hl-simple .desktop-room-empty,
html.hl-simple #favoriteMessages,
html.hl-simple #nowVoice,
html.hl-simple #actSheet,
html.hl-simple #reactSheet,
html.hl-simple #reactTip,
html.hl-simple #musicBar,
html.hl-simple #attachSheet,
html.hl-simple #hlFind,
html.hl-simple #hlSchoolSince,
html.hl-simple #hlMuteSheet,
html.hl-simple #hlMuteAll{display:none !important}

/* ---------- вход: логин, пароль, «глазок», одна кнопка ---------- */
html.hl-simple #themeLogin,
html.hl-simple #langLogin,
html.hl-simple #btnForgot,
html.hl-simple #btnFacade,
html.hl-simple #login .lhint,
html.hl-simple #login .star,
html.hl-simple #login .signature{display:none !important}
html.hl-simple #login .lcard{width:100%;max-width:420px;padding-left:18px;padding-right:18px}
html.hl-simple #login .lcard h1{font-size:calc(20px * var(--fs,1));letter-spacing:.05em;text-indent:0;text-align:center;overflow-wrap:anywhere}
html.hl-simple #login .field input{min-height:64px;font-size:calc(19px * var(--fs,1));text-align:left;border:2px solid var(--ink-dim);color:var(--ink);background:var(--bg0)}
html.hl-simple #login .field input:focus{border-color:var(--violet);outline:3px solid var(--violet);outline-offset:1px}
html.hl-simple #login .field .pw-eye{width:56px;height:56px;right:4px;opacity:1;color:var(--ink)}
html.hl-simple #login .field .pw-eye svg{width:28px;height:28px}
html.hl-simple #login .field input#iPass{padding-right:64px}
html.hl-simple #login .primary{min-height:64px;font-size:calc(20px * var(--fs,1));font-weight:700}
html.hl-simple #login .lerr{font-size:calc(17px * var(--fs,1));line-height:1.35;color:var(--ink);font-weight:700;overflow-wrap:anywhere}
html.hl-simple #login .lerr:not(:empty){margin-top:12px;padding:10px 12px;border-left:8px solid var(--danger-text);background:var(--bg0)}
html.hl-simple #login .lerr a{display:inline-block;min-height:56px;padding-top:14px;color:var(--ink);font-weight:700}

/* ---------- «Мои разговоры» ---------- */
html.hl-simple #hlSimple{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;box-sizing:border-box;
  padding:max(18px,env(safe-area-inset-top)) 14px calc(28px + var(--safe-b));
  background:var(--bg0);color:var(--ink);font-family:var(--ui)}
html.hl-simple #app.is-entered #hlSimple{display:block}
html.hl-simple #hlSimple *{box-sizing:border-box}
html.hl-simple #hlSimple .hls-title{margin:0 0 14px;padding:0 4px;font-family:Arial,Helvetica,sans-serif;font-size:calc(26px * var(--fs,1));
  line-height:1.15;font-weight:700;color:var(--ink);overflow-wrap:anywhere}

/* Переключатель уведомлений: одна большая кнопка, состояние — словами и значком. */
html.hl-simple #hlSimple .hls-notif{display:flex;align-items:center;gap:14px;width:100%;min-height:76px;margin:0 0 18px;padding:12px 16px;
  border-radius:20px;border:3px solid var(--ink);text-align:left;font-family:Arial,Helvetica,sans-serif;cursor:pointer}
html.hl-simple #hlSimple .hls-notif[hidden]{display:none}
html.hl-simple #hlSimple .hls-notif[aria-checked="true"]{background:var(--gold-fill);color:var(--on-gold)}
html.hl-simple #hlSimple .hls-notif[aria-checked="false"]{background:var(--bg1);color:var(--ink)}
html.hl-simple #hlSimple .hls-notif[disabled]{opacity:.7}
html.hl-simple #hlSimple .hls-notif .hls-ic{flex:0 0 auto;width:40px;height:40px}
html.hl-simple #hlSimple .hls-notif svg{display:block;width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.hl-simple #hlSimple .hls-notif .hls-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
html.hl-simple #hlSimple .hls-notif b{display:block;font-size:calc(17px * var(--fs,1));line-height:1.2;font-weight:700;overflow-wrap:anywhere}
html.hl-simple #hlSimple .hls-notif b.hls-state{font-size:calc(24px * var(--fs,1));line-height:1.1}
html.hl-simple #hlSimple .hls-notif small{font-size:calc(14px * var(--fs,1));line-height:1.25;overflow-wrap:anywhere}

html.hl-simple #hlSimple .hls-list{display:flex;flex-direction:column;gap:12px}
html.hl-simple #hlSimple .hls-card{display:flex;align-items:center;gap:14px;width:100%;min-height:92px;padding:12px 14px;
  border-radius:22px;border:3px solid var(--violet);background:var(--plum);color:var(--ink);text-align:left;cursor:pointer;
  font-family:Arial,Helvetica,sans-serif}
html.hl-simple #hlSimple .hls-card:active{background:var(--bg1)}
html.hl-simple #hlSimple .hls-face{flex:0 0 auto;width:64px;height:64px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:var(--ink-dim);color:var(--bg0);font-size:26px;font-weight:700;line-height:1}
html.hl-simple #hlSimple .hls-card.hls-hall .hls-face{border-radius:18px}
html.hl-simple #hlSimple .hls-face img{display:block;width:100%;height:100%;object-fit:cover}
html.hl-simple #hlSimple .hls-mid{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
html.hl-simple #hlSimple .hls-name{font-size:calc(21px * var(--fs,1));line-height:1.2;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
html.hl-simple #hlSimple .hls-sub{font-size:calc(14px * var(--fs,1));line-height:1.25;color:var(--ink-dim);overflow-wrap:anywhere}
html.hl-simple #hlSimple .hls-badge{flex:0 0 auto;min-width:48px;height:48px;padding:0 8px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  background:var(--gold-fill);color:var(--on-gold);font-size:calc(21px * var(--fs,1));font-weight:700;line-height:1}
html.hl-simple #hlSimple .hls-chev{flex:0 0 auto;width:20px;font-size:34px;line-height:1;color:var(--ink);text-align:center}

html.hl-simple #hlSimple .hls-note{margin:8px 4px;padding:18px 16px;border-radius:20px;border:3px solid var(--ink-dim);
  font-size:calc(19px * var(--fs,1));line-height:1.35;color:var(--ink);overflow-wrap:anywhere;font-family:Arial,Helvetica,sans-serif}
html.hl-simple #hlSimple .hls-note button,
html.hl-simple #hlSimple .hls-again{display:block;width:100%;min-height:64px;margin-top:14px;padding:12px 16px;border-radius:18px;border:3px solid var(--ink);
  background:var(--gold-fill);color:var(--on-gold);font-size:calc(20px * var(--fs,1));font-weight:700;font-family:Arial,Helvetica,sans-serif;cursor:pointer}

/* ---------- комната: шапка ---------- */
/* Только «Назад» и название. Избранное, лицо собеседника, число людей в
   сети, версия — прячутся: каждое из них — лишний путь, куда можно уйти. */
html.hl-simple #room > *:not(.rhead):not(#msgs):not(#hlsBar):not(#newPill):not(input){display:none !important}
html.hl-simple #room .rhead > *:not(.rback):not(.rtitle){display:none !important}
html.hl-simple #room .rhead{gap:12px;padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px;border-bottom:3px solid var(--violet);background:var(--plum)}
html.hl-simple #room .rback{min-width:64px;height:60px;padding:0 14px 0 8px;border:3px solid var(--ink);background:var(--bg0);color:var(--ink);border-radius:18px;flex:0 0 auto}
html.hl-simple #room .rback::after{font-size:calc(17px * var(--fs,1));color:var(--ink)}
html.hl-simple #room .rtitle{pointer-events:none}
html.hl-simple #room .rtitle b{display:block;font-size:calc(20px * var(--fs,1));line-height:1.2;color:var(--ink);overflow-wrap:anywhere;white-space:normal}
html.hl-simple #room .rtitle-meta{min-height:0}
html.hl-simple #roomSub:not(.typing){display:none !important}
html.hl-simple #roomSub.typing{display:block;font-size:calc(15px * var(--fs,1));color:var(--ink-dim);white-space:normal}

/* ---------- комната: сообщения ---------- */
html.hl-simple #msgs .reacts,
html.hl-simple #msgs .side-act,
html.hl-simple #msgs .vtr-box,
html.hl-simple #msgs .ttl-box,
html.hl-simple #msgs .msg-favorite,
html.hl-simple #msgs .vspeed,
html.hl-simple #msgs .edited{display:none !important}
/* Имя автора читаем: цвет, зависящий от автора, на светлой теме терял контраст. */
html.hl-simple #msgs .msg .who{color:var(--ink) !important;font-weight:700;pointer-events:none}
html.hl-simple #msgs .msg .tm{color:var(--ink-dim)}
html.hl-simple #msgs .msg .bd{color:var(--ink)}
html.hl-simple #msgs .msg{max-width:94%}
html.hl-simple #msgs .msg a.lnk{color:var(--ink);text-decoration:underline;overflow-wrap:anywhere}
html.hl-simple #msgs .quote{pointer-events:none}
html.hl-simple #msgs .quote .q-a,
html.hl-simple #msgs .quote .q-t,
html.hl-simple #msgs .lprev .lp-h{color:var(--ink)}
html.hl-simple #msgs .lprev .lp-u{color:var(--ink-dim)}
html.hl-simple #msgs .daysep span,
html.hl-simple #msgs .hl-unread-div span{color:var(--ink);font-size:calc(14px * var(--fs,1));font-weight:700}
/* Ссылка в тексте — не крошечная строка: нажимаемое поле выше самой строки. */
html.hl-simple #msgs .msg a.lnk{padding-top:18px;padding-bottom:18px}
html.hl-simple #newPill{position:static;align-self:flex-end;margin:0 14px 10px;width:64px;height:64px;min-width:64px;min-height:64px;padding:0;border-radius:32px;
  color:var(--on-gold);background:var(--gold-fill);border:3px solid var(--ink);box-shadow:none}
html.hl-simple #newPill::before{width:32px;height:32px}
html.hl-simple #newPill.hascount{width:auto;padding:0 20px 0 14px}
html.hl-simple #newPill.hascount #newCount{font-size:calc(20px * var(--fs,1))}
html.hl-simple #msgs .vplay{width:56px;height:56px;min-width:56px}
/* «Не удалось загрузить · Повторить» под сообщением: слова и кнопка читаются и нажимаются. */
html.hl-simple #msgs .vmsg{flex-wrap:wrap;min-width:0;max-width:100%}
html.hl-simple #msgs .vmsg .mfail{flex:1 1 100%}
html.hl-simple #msgs .mfail{min-width:0;color:var(--ink);font-size:calc(15px * var(--fs,1));gap:8px 12px}
html.hl-simple #msgs .mfail-retry{min-height:56px;padding:0 20px;border:3px solid var(--ink);border-radius:16px;background:var(--bg0);color:var(--ink);
  font-size:calc(17px * var(--fs,1));font-weight:700;cursor:pointer}
html.hl-simple #msgs .vbar,
html.hl-simple #msgs .cseek{pointer-events:none}
html.hl-simple[data-hls-state="write"] #newPill,
html.hl-simple[data-hls-state="rec"] #newPill{display:none !important}

/* ---------- комната: три кнопки внизу ---------- */
html.hl-simple #hlsBar{flex:0 0 auto;position:relative;z-index:3;box-sizing:border-box;width:100%;
  padding:10px 6px calc(10px + var(--safe-b));background:var(--plum);border-top:3px solid var(--violet);font-family:Arial,Helvetica,sans-serif}
html.hl-simple #hlsBar *{box-sizing:border-box}
html.hl-simple #hlsBar .hls-act{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
html.hl-simple #hlsBar[data-state="write"] .hls-act,
html.hl-simple #hlsBar[data-state="rec"] .hls-act{display:none}
html.hl-simple #hlsBar .hls-big{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:84px;
  padding:8px 0;border-radius:20px;border:3px solid var(--ink);background:var(--bg0);color:var(--ink);cursor:pointer;
  font-size:16px;font-weight:700;line-height:1.15;text-align:center;overflow-wrap:anywhere}
html.hl-simple #hlsBar .hls-big.hls-main{background:var(--gold-fill);color:var(--on-gold)}
html.hl-simple #hlsBar .hls-big:active{background:var(--bg1)}
html.hl-simple #hlsBar .hls-big.hls-main:active{background:var(--gold2)}
html.hl-simple #hlsBar .hls-big svg{display:block;width:34px;height:34px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.hl-simple #hlsBar .hls-big[disabled]{opacity:.6}

/* Микрофон не дался: одна кнопка «Понятно», отправлять нечего. */
html.hl-simple #hlsBar[data-rec="failed"] .hls-rec .hls-yes{display:none}
html.hl-simple #hlsBar[data-rec="failed"] .hls-rec .hls-two{grid-template-columns:minmax(0,1fr)}

/* Написать: большое поле и две кнопки. */
html.hl-simple #hlsBar .hls-write,
html.hl-simple #hlsBar .hls-rec{display:none}
html.hl-simple #hlsBar[data-state="write"] .hls-write{display:block}
html.hl-simple #hlsBar[data-state="rec"] .hls-rec{display:block}
html.hl-simple #hlsBar .hls-write textarea{display:block;width:100%;min-height:112px;max-height:40vh;margin:0 0 10px;padding:12px 14px;resize:none;
  border-radius:18px;border:3px solid var(--ink);background:var(--bg0);color:var(--ink);-webkit-text-fill-color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;font-size:calc(20px * var(--fs,1));line-height:1.3;outline:none}
html.hl-simple #hlsBar .hls-write textarea:focus{border-color:var(--violet);outline:3px solid var(--violet);outline-offset:1px}
html.hl-simple #hlsBar .hls-write textarea::placeholder{color:var(--ink-dim);opacity:1}
html.hl-simple #hlsBar .hls-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px}
html.hl-simple #hlsBar .hls-two button{min-width:0;min-height:68px;padding:8px 6px;border-radius:20px;border:3px solid var(--ink);
  font-size:21px;font-weight:700;line-height:1.15;text-align:center;overflow-wrap:anywhere;cursor:pointer;font-family:Arial,Helvetica,sans-serif}
html.hl-simple #hlsBar .hls-two .hls-no{background:var(--bg0);color:var(--ink)}
html.hl-simple #hlsBar .hls-two .hls-yes{background:var(--gold-fill);color:var(--on-gold)}
html.hl-simple #hlsBar .hls-two .hls-yes[disabled]{opacity:.55}

/* Голос: «идёт запись», время, подсказка и две кнопки. */
html.hl-simple #hlsBar .hls-recinfo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:6px;
  margin:0 0 10px;padding:12px 14px;border-radius:18px;border:3px solid var(--ink);background:var(--bg0)}
html.hl-simple #hlsBar .hls-dot{width:20px;height:20px;border-radius:50%;background:var(--danger-text)}
html.hl-simple #hlsBar[data-rec="live"] .hls-dot{animation:hlsPulse 1.1s ease-in-out infinite}
html.hl-simple #hlsBar .hls-recmsg{min-width:0;font-size:calc(17px * var(--fs,1));line-height:1.2;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
html.hl-simple #hlsBar .hls-time{font-size:calc(22px * var(--fs,1));font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
html.hl-simple #hlsBar .hls-recsub{grid-column:1 / -1;font-size:calc(14px * var(--fs,1));line-height:1.25;color:var(--ink-dim);overflow-wrap:anywhere}
@keyframes hlsPulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){html.hl-simple #hlsBar[data-rec="live"] .hls-dot{animation:none}}

/* ---------- окно «Фото»: снимок, «Отправить», «Отмена» ---------- */
/* Сверху вниз: снимок, золотая «Отправить», «Отмена». Подписи и ленты
   нескольких снимков нет — снимок один, без редактора. */
html.hl-simple #photoCompose{background:var(--plum)}
html.hl-simple #photoCompose #pcStrip,
html.hl-simple #photoCompose .pc-bar textarea{display:none !important}
html.hl-simple #photoCompose .pc-prev{order:1;padding:max(14px,env(safe-area-inset-top)) 14px 12px}
html.hl-simple #photoCompose .pc-prev img{max-width:100%;max-height:100%}
html.hl-simple #photoCompose .pc-bar{order:2;display:block;padding:8px 14px 10px;background:transparent;border:0}
html.hl-simple #photoCompose #pcSend,
html.hl-simple #photoCompose #pcCancel{position:static;display:flex;align-items:center;justify-content:center;width:100%;height:auto;min-height:72px;margin:0;padding:10px 16px;
  border-radius:20px;border:3px solid var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:0;line-height:0;cursor:pointer;box-shadow:none}
html.hl-simple #photoCompose #pcSend::after,
html.hl-simple #photoCompose #pcCancel::after{font-size:22px;font-weight:700;line-height:1.2}
html.hl-simple #photoCompose #pcSend{background:var(--gold-fill);color:var(--on-gold)}
html.hl-simple #photoCompose #pcSend::after{content:"Отправить"}
html.hl-simple #photoCompose #pcCancel{order:3;width:auto;margin:0 14px calc(14px + var(--safe-b));background:var(--bg0);color:var(--ink)}
html.hl-simple #photoCompose #pcCancel::after{content:"Отмена"}

/* ---------- мелочи: подсказка про уведомления, «микрофон не включился» ---------- */
html.hl-simple #notifAsk{flex-wrap:wrap;gap:12px;padding:16px;border:3px solid var(--ink);border-radius:22px;background:var(--plum);box-shadow:none}
html.hl-simple #notifAsk .na-ic,
html.hl-simple #notifAsk .na-ic svg{width:36px;height:36px;color:var(--ink)}
html.hl-simple #notifAsk .na-t{flex:1 1 60%;font-size:calc(18px * var(--fs,1));line-height:1.3;font-weight:700;color:var(--ink)}
html.hl-simple #notifAsk .na-yes,
html.hl-simple #notifAsk .na-no{flex:1 1 100%;min-height:64px;padding:8px 14px;border:3px solid var(--ink);border-radius:18px;font-size:20px;font-weight:700;line-height:1.15}
html.hl-simple #notifAsk .na-yes{background:var(--gold-fill);color:var(--on-gold)}
html.hl-simple #notifAsk .na-no{background:var(--bg0);color:var(--ink)}
html.hl-simple #hlMicHelp .mh-acts button{min-height:60px;font-size:calc(19px * var(--fs,1));font-weight:700;border:3px solid var(--ink);border-radius:18px}
html.hl-simple #hlMicHelp .mh-p,
html.hl-simple #hlMicHelp .mh-t{font-size:calc(19px * var(--fs,1));line-height:1.3;color:var(--ink)}
html.hl-simple #hlMicHelp .mh-code{display:none}

/* Играющий кружок из чата закрепляется над лентой; закрыть его — большая кнопка
   (сам код кругов не тронут: здесь только размер кнопки закрытия). */
html.hl-simple #circPin .cp-x{width:64px;height:64px}

/* Просмотр снимка (одно окно на всё приложение, photo-viewer.*.js): выход — большая
   кнопка со словом; «Перейти к сообщению» и инструменты не нужны. Смахивание, касание
   по снимку и кнопка телефона закрывают его так же, как у всех. */
html.hl-simple #hlPhotoViewer .pv-close{display:flex;align-items:center;justify-content:center;gap:10px;width:auto;min-width:64px;height:64px;padding:0 22px 0 16px;border-radius:32px}
html.hl-simple #hlPhotoViewer .pv-close svg{width:30px;height:30px}
html.hl-simple #hlPhotoViewer .pv-close::after{content:"Закрыть";font-family:Arial,Helvetica,sans-serif;font-size:20px;font-weight:700;line-height:1}
html.hl-simple #hlPhotoViewer .pv-tools,
html.hl-simple #hlPhotoViewer .pv-goto,
html.hl-simple #hlPhotoViewer .pv-title{display:none !important}

/* Плашка с сообщением («Голосовое отправляется», «Не отправилось») — широкая,
   крупная, над нижними кнопками; высоту кнопок меряет simple-mode.js. */
html.hl-simple .hltoast{left:12px;right:12px;width:auto;max-width:none;transform:none;box-sizing:border-box;text-align:center;
  bottom:calc(var(--hls-bar-h,0px) + 14px + var(--safe-b)) !important;padding:16px 18px;border-radius:18px;border:3px solid var(--ink);
  background:var(--plum);color:var(--ink);font-size:calc(18px * var(--fs,1));line-height:1.3;font-weight:700;overflow-wrap:anywhere;z-index:200;pointer-events:none}
/* Пока открыто окно фото, плашка — вверху: внизу там «Отправить» и «Отмена». */
html.hl-simple[data-hls-photo="1"] .hltoast{top:calc(16px + env(safe-area-inset-top));bottom:auto !important}

/* Ничего, что показывает бабушке чужой язык или чужую тему. */
html.hl-simple .langsw,
html.hl-simple .themebtn,
html.hl-simple #hlLangBox{display:none !important}