/* Чат. База 1/3: карта — основа, чат — дополнение. Границу двигает
   пользователь, и мы это помним (решение владельца 04.09.2026). */
/* Высота трети растёт на safe-area inset: низ приложения уходит под
   home-indicator (`viewport-fit=cover`), и без этого добавленный контролам
   нижний отступ съедал бы бюджет содержимого (плитки/текст обрезались). Растим
   высоту — карта ужимается на ту же величину, бюджет чата сохраняется, а кнопки
   всё равно чистят системную полосу. Android: inset=0, без изменений. */
.chat{flex:0 0 calc(var(--chat-h) + env(safe-area-inset-bottom));min-height:0;display:flex;flex-direction:column;
  /* Свой слой ВЫШЕ карты: меню комнат раскрывается вверх, поверх неё, а у
     слоёв карты z-index 500 — без этого они закрывали половину меню. */
  position:relative;z-index:var(--z-chat);background:var(--surface-2);border-top:1px solid var(--line-2)}

/* Свёрнутый вид «карта» (тап по ручке 1/3, владелец 18.09.2026): в кадре
   остаются только карта + строка-меню + кнопка «Спросить». Чат — по содержимому
   (flex:auto), плитки «Что важно знать» и лента спрятаны, карта растёт. Класс НЕ
   трогает --chat-h — выход возвращает прежнюю долю. Нижний отступ CTA держит
   env(safe-area) в паддинге `.home .hbody` (мобильные: «держим расстояние»). */
body.chat-min .chat{flex:0 0 auto}
body.chat-min .feed{display:none}
body.chat-min .home{flex:0 0 auto}
body.chat-min .home .hbody > *:not(.askbtn){display:none}
/* Намёк «нажми, чтобы развернуть»: в свёрнутом ручка тонко подпрыгивает и
   красится акцентом — видно, что кнопка «карта» нажимаемая (владелец 18.09.2026). */
body.chat-min .grab{animation:grip-bob 2s ease-in-out infinite}
body.chat-min .grab span{background:var(--accent)}
body.chat-min .grab .hint{color:var(--accent-ink);font-weight:800}
@keyframes grip-bob{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-3px)}}
@media (prefers-reduced-motion: reduce){ body.chat-min .grab{animation:none} }

/* Служебная полоса ОДНА и ровно 44 px: при доле чата в треть экрана две
   полосы по 26 и 44 съедали почти половину чата. Она же — ручка ресайза. */
/* Полоса чата держит СВОЙ тон. Карточка и чат оба были белыми, и граница
   между двумя модулями висела на одной волосяной линии. */
.chat-top{
  flex:0 0 auto;display:flex;align-items:center;gap:4px;height:44px;padding:0 var(--gut);
  background:var(--surface-2);border-bottom:1px solid var(--line);
  cursor:ns-resize;touch-action:none;user-select:none
}
/* Ручка — по центру ЭКРАНА, а не в потоке: она единственный способ изменить
   доли, и центр полосы читается как ручка сам по себе. Площадь касания
   44×44 при видимой полоске 26×4. */
.grab{position:absolute;left:50%;transform:translateX(-50%);
  min-width:44px;height:44px;padding:0 8px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;cursor:ns-resize;white-space:nowrap}
.grab span{display:block;width:26px;height:4px;border-radius:3px;background:var(--line-2)}
.grab .hint{font-style:normal;font-size:9px;line-height:1;color:var(--ink-3);
  font-family:ui-monospace,monospace}

.sel{position:relative;flex:1 1 auto;min-width:0}
.sel select{
  width:100%;min-width:0;height:44px;text-overflow:ellipsis;overflow:hidden;
  appearance:none;font-size:13px;font-weight:600;color:var(--ink);
  background:var(--accent-soft);border:1px solid transparent;border-radius:var(--radius-sm);
  padding:0 22px 0 9px;cursor:pointer
}
.sel::after{content:"▾";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:9px;color:var(--ink-3);pointer-events:none}

/* Язык чтения — одна кнопка, а не три. Три ступени стояли в полосе всегда и
   забирали 88 px ради выбора, который делают один раз (решение владельца
   04.09.2026, разворот прежнего «языки обязаны быть видны всегда»). */
.langbtn{flex:0 0 auto;margin-left:auto;min-width:44px;height:44px;padding:0 8px;
  border-radius:var(--radius-sm);font-family:ui-monospace,monospace;font-size:12px;
  font-weight:700;color:var(--ink-2)}
.langbtn[aria-expanded="true"]{background:var(--accent-soft);color:var(--ink)}
.gnote{margin:0;padding:8px 14px 4px;font-size:12px;color:var(--ink-3);line-height:1.35}
.lrow{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 12px;
  border-radius:var(--radius-sm);text-align:left;color:var(--ink);font-size:15px}
.lrow.on{background:var(--accent-soft);font-weight:700}
.lrow .lcode{margin-left:auto;font-family:ui-monospace,monospace;font-size:11.5px;
  color:var(--ink-3);text-transform:uppercase}

.gear{flex:0 0 auto;width:44px;height:44px;font-size:15px;color:var(--ink-3);
  display:grid;place-items:center}
.gear[aria-expanded="true"]{color:var(--ink)}

/* Вид ленты — настройка, а не действие: под одной кнопкой, а не в полосе. */
.sheet{
  position:absolute;top:48px;right:var(--gut);z-index:7;min-width:196px;padding:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lift)
}
.srow{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 6px 0 10px;min-height:44px;font-size:13px;color:var(--ink-2)}
.srow button{min-width:44px;height:44px;padding:0 10px;border-radius:var(--radius-sm);
  font-size:12px;font-weight:700;color:var(--ink-2);font-family:ui-monospace,monospace}
.srow button.on{background:var(--accent-soft);color:var(--ink)}
.fbtns{display:flex;gap:8px}

.feed{flex:1 1 auto;min-height:0;overflow-y:auto;padding:1px var(--gut) 2px;
  display:flex;flex-direction:column;gap:0}
/* Плотная лента: в половине экрана 10–12 реплик вместо трёх.
   Служебной строки под репликой НЕТ: подписи уходят в хвост той же строки, а
   действия появляются по тапу. Постоянная вторая строка стоила бы трети
   высоты каждой реплики ни на что. */
.row{padding:5px 0 6px;border-top:1px solid var(--line);font-size:var(--msg-size);line-height:1.42}
.row:first-child{border-top:0}
.row .t{font-size:.76em;color:var(--ink-3);margin-right:6px}
.row .nick{font-weight:700;color:var(--c)}
.row .nick::after{content:":";color:var(--ink-3);font-weight:500;margin-right:5px}
/* Ответ читается как «Аня → Виктор:» — двоеточие после ПАРЫ, а не после ника */
.row.reply .nick::after{content:"";margin:0}
.row .to{color:var(--ink-3);font-weight:600;margin-left:4px}
.row .to::after{content:":";font-weight:500;margin-right:5px}
.row .txt{color:var(--ink);white-space:pre-wrap;word-break:break-word}
.row.pending{opacity:.55}
.row.open{background:var(--sunk)}
/* Хвост строки: перевод, место, судьба отправки — тихо и в той же строке */
.row .tail{margin-left:7px;white-space:nowrap}
.row .q{position:relative;font-size:10.5px;color:var(--ink-3);font-weight:600;margin-right:8px}
/* Площадь касания больше видимого размера. Для подписей внутри фразы
   (WCAG 2.5.8, исключение «inline») тянем сколько можно, не воруя нажатия
   у соседних реплик: половина межстрочного расстояния вверх и вниз. */
.row .tail .q::after{content:"";position:absolute;inset:-9px -6px}
.row .q.err{color:var(--danger)}
.row .pend{font-size:10.5px;color:var(--ink-3);font-style:italic;margin-right:8px}
.row .acts{display:flex;gap:8px;margin-top:2px}
.row .acts .q{color:var(--accent-ink);min-height:44px;display:inline-flex;align-items:center;
  padding:0 10px;margin:0;border-radius:var(--radius-sm);background:var(--sunk)}
.row .orig{margin-top:5px;padding:6px 8px;border-left:2px solid var(--line-2);
  background:var(--sunk);border-radius:0 6px 6px 0;font-size:calc(var(--msg-size) - 1px);color:var(--ink-2)}
.row .orig b{display:block;font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:2px}

/* Пузыри — переключатель, а не норма */
.feed.bubbles{gap:8px;padding:8px var(--gut) 4px}
.feed.bubbles .row{border:0;padding:0;display:flex;gap:8px}
.feed.bubbles .row .bub{background:var(--surface);border:1px solid var(--line);
  border-radius:4px 12px 12px 12px;padding:7px 10px 8px;max-width:88%}
.feed.bubbles .row.me{flex-direction:row-reverse}
.feed.bubbles .row.me .bub{background:var(--accent-soft);border-color:transparent;
  border-radius:12px 4px 12px 12px}
.feed.bubbles .row .t{display:block;margin:0 0 2px}

.sys{align-self:center;font-size:9.5px;line-height:1.15;color:var(--ink-3);margin-top:2px}
.empty{margin:auto;text-align:center;color:var(--ink-3);font-size:12.5px;padding:12px;max-width:32ch}

.composer{flex:0 0 auto;display:flex;gap:8px;padding:6px var(--gut) calc(8px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--surface)}
/* Кнопка комнаты. Она же — адресат реплики: человек видит, куда пишет,
   до отправки, и меняет одним тапом (tg_bridge.md 4). */
/* Адресат — состояние, как и город: контур вместо заливки. Заливка остаётся
   за полем ввода (это поле) и за отправкой (это действие). */
.composer .to{
  position:relative;flex:0 0 auto;display:inline-flex;align-items:center;
  gap:4px;height:44px;padding:0 8px;border-radius:var(--radius-sm);
  border:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--ink-2)
}
.composer .to .n{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer .to .cv{font-size:9px;color:var(--ink-3)}
.composer .to[aria-expanded="true"]{background:var(--accent-soft);border-color:transparent}
/* «Куда пишем?» — приглашение, а не состояние: акцентом, чтобы читалось как
   следующий шаг, а не как надпись про то, чего нельзя. */
.composer .to.ask{background:var(--accent-soft);border-color:transparent;color:var(--accent-ink)}
.composer .to.ask .n{max-width:none}
/* Точка = в других комнатах что-то новое. Без неё пришлось бы открывать меню,
   чтобы узнать, стоит ли его открывать. */
.composer .to.has-new::after{content:"";position:absolute;top:3px;right:3px;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* Меню комнат: вверх, поверх ленты — снизу клавиатура. Якорь — весь низ
   чата, а не поле ввода: строка контекста то появляется, то нет. */
.dock{flex:0 0 auto;position:relative}
.rooms{
  position:absolute;left:var(--gut);right:var(--gut);bottom:100%;margin-bottom:6px;
  z-index:6;max-height:min(62vh,420px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lift);padding:4px
}
.rooms .room{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 10px;
  border-radius:var(--radius-sm);font-size:13.5px;color:var(--ink);text-align:left
}
.rooms .room .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rooms .room .u{flex:0 0 auto;min-width:18px;padding:1px 5px;border-radius:9px;
  background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;
  text-align:center;font-family:ui-monospace,monospace}
.rooms .room[aria-current="true"]{background:var(--accent-soft);font-weight:700}
/* Комната, в которую нельзя написать, говорит это в списке — иначе выбор из
   неё выглядит как поломка. */
.rooms .room .ro{flex:0 0 auto;font-size:10.5px;color:var(--ink-3);
  font-family:ui-monospace,monospace}

/* Контекст реплики: ответ или вопрос о месте. Нет контекста — нет строки. */
.context{display:flex;align-items:center;gap:6px;padding:4px 9px;
  background:var(--accent-soft);border-top:1px solid var(--line);font-size:11px}
.context .ct{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink-2);font-weight:600}
.context button{color:var(--ink-3);font-size:12px;padding:0 2px}
.composer input{flex:1 1 0;min-width:0;height:44px;color:var(--ink);background:var(--sunk);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 10px;font-size:13px}
.composer input::placeholder{color:var(--ink-3)}
.composer input:disabled{background:var(--surface-2);color:var(--ink-3)}
.composer .send{flex:0 0 auto;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--accent);
  color:var(--on-accent);display:grid;place-items:center;font-size:16px}
.composer .send[disabled]{opacity:.5}

/* ---- Выбор города: свой экран вместо нативного списка ---- */
/* Город — по содержанию, а не во всю ширину. Растянутый контрол говорит
   «здесь главное»; город меняют раз в поездку, и растяжка была неправдой.
   Потолок в 40% — чтобы длинное название («Ho Chi Minh City») не наехало
   на ручку в центре. */
/* Город — СОСТОЯНИЕ, а не действие. Заливка говорит «нажми меня» и ставила
   его в один ряд с кнопками. Нажимаемость несут флаг, кегль и каретка. */
.citybtn{
  flex:0 1 auto;min-width:0;max-width:40%;height:44px;display:flex;align-items:center;gap:6px;
  padding:0 8px 0 0;border-radius:var(--radius-sm);
  font-size:14px;font-weight:700;color:var(--ink)
}
.citybtn[aria-expanded="true"]{background:var(--accent-soft);padding-left:8px}
.citybtn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:left}
.citybtn i{font-style:normal;font-size:9px;color:var(--ink-3)}

.modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;flex-direction:column;
  justify-content:flex-end}
.backdrop{position:absolute;inset:0;background:var(--scrim)}
.gsheet{
  position:relative;display:flex;flex-direction:column;max-height:82%;
  background:var(--surface);border-radius:var(--radius) var(--radius) 0 0;
  box-shadow:var(--shadow-lift);overflow:hidden
}
.ghead{display:flex;align-items:center;gap:4px;padding:0 4px;
  border-bottom:1px solid var(--line)}
.ghead h2{flex:1;margin:0;font-size:15px;font-weight:700;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* «Отмена» и «назад» — слева: конвенция и безопасность, промахнуться в них
   труднее, чем в то, что стоит под большим пальцем. */
.gback,.gclose{width:44px;height:44px;flex:0 0 auto;display:grid;place-items:center;
  font-size:18px;color:var(--ink-2)}
.gback[hidden]+h2{margin-left:44px}
.gsearch{padding:8px;border-bottom:1px solid var(--line)}
.gsearch input{width:100%;height:44px;padding:0 12px;font-size:14px;color:var(--ink);
  background:var(--sunk);border:1px solid var(--line);border-radius:var(--radius-sm)}
.glist{flex:1 1 auto;overflow-y:auto;padding:4px 4px calc(10px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.grow{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 10px;
  border-radius:var(--radius-sm);text-align:left;color:var(--ink)}
.grow:active{background:var(--sunk)}
.grow.on{background:var(--accent-soft)}
.grow .gflag{font-size:18px;flex:0 0 auto}
.grow .gt{flex:1;min-width:0;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.grow .gt i{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis}
.grow .gcount{font-family:ui-monospace,monospace;font-size:11.5px;color:var(--ink-3)}
.grow .gchev{color:var(--ink-3);font-size:17px}
.grow .gnow{font-size:10.5px;font-weight:700;color:var(--accent-ink);text-transform:uppercase;
  letter-spacing:.05em}
.gempty{padding:26px 12px;text-align:center;color:var(--ink-3);font-size:13px}

/* ---- «Личные» как список разговоров ---- */
.dlg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 8px;width:100%;
  min-height:56px;padding:8px 4px;text-align:left;border-bottom:1px solid var(--line)}
.dlg:active{background:var(--sunk)}
.dlg .dt{grid-column:1;font-size:13.5px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg .dl{grid-column:1;font-size:12.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dlg .dl b{color:var(--ink-2);font-weight:700}
.dlg .dm{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;
  align-items:flex-end;justify-content:center;gap:4px}
.dlg .dm i{font-style:normal;font-size:10.5px;color:var(--ink-3)}
.dlg .dm .u{min-width:18px;padding:1px 5px;border-radius:9px;background:var(--accent);
  color:var(--on-accent);font-size:10.5px;font-weight:700;text-align:center;
  font-family:ui-monospace,monospace}
.dlg.new .dt{color:var(--ink)}
/* Вопрос без ответа — не разговор, и разделитель говорит об этом словами. */
.dsep{padding:10px 4px 4px;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.dback{display:inline-flex;align-items:center;min-height:44px;padding:0 8px 0 2px;
  font-size:13px;font-weight:600;color:var(--accent-ink)}
/* Шапка разговора занимает МЕСТО ГОРОДА в служебной полосе и не прокручивается
   с репликами. Два замера, оба 04.09.2026: внутри ленты она уезжала вверх на
   первом же движении пальца — человек терял разом название комнаты и кнопку
   возврата, то есть переставал понимать, где он, ровно когда читал; а
   отдельной полосой (44 + 45) съедала 89 px из 258 — треть чата, и лента в
   разговоре падала со 155 до 110, до трёх реплик при пороге в четыре.
   Город в разговоре не нужен: его меняют раз в поездку. */
/* Шапка разговора живёт в ЛЕВОЙ половине полосы: по центру стоит ручка высоты
   (абсолютная, ±22 px от центра), и длинное название места иначе проходит под
   ней — «DELICIOUS patisseries & coffee» наезжало на «1/3» (17.09.2026).
   Обрезаем до ручки, а не тянемся до языка справа. Полное имя — на карточке. */
.dhead{flex:0 1 auto;min-width:0;max-width:calc(50% - 30px);display:flex;align-items:center;gap:2px}
.dplace{flex:1 1 auto;min-width:0;min-height:44px;padding:0 8px;text-align:left;
  font-size:12.5px;font-weight:600;color:var(--accent-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Клавиатура открыта — приоритет у разговора и поля ввода: карта единственный
   блок, которым во время печати пользоваться нельзя, поэтому уступает она.
   Замер: без этого лента проваливалась со 153 px до 35 — меньше одной реплики,
   человек печатал и не видел, кому отвечает. */
body.kbd{--chat-h:100%}
/* Открыта карточка — оставляем полосу под её шапку: видно, о чём спрашиваешь. */
body.kbd.with-card{--chat-h:calc(100% - 150px)}
/* Полоса чата при письме остаётся: там ручка «1/3» — единственный способ
   вернуть карту, не закрывая клавиатуру (на iOS системной кнопки «назад» для
   этого нет). Верхней шапки, которую здесь пряталось, больше нет вовсе. */

/* Карточка места — ПОЛНОЭКРАННАЯ (решение владельца 17.09.2026, разворот
   прежнего «остаётся одна служебная полоса» от 05.09.2026). Раньше внизу
   держалась полоса чата с ручкой как один из путей назад; владелец: клик по
   карточке = именно полноэкранный вид, без полосы снизу. Пути назад остаются:
   «Закрыть», смахивание карточки вверх и тумблер «Спросить в чате» (он и
   поднимает чат — единственный способ). Прячем `.chat` целиком, `.map` тогда
   занимает 100% высоты, а карточка (`inset:0` внутри `.map`) заполняет экран. */
body.card-solo .chat{display:none}

/* Свайп по карточке двигает ГРАНИЦУ чата (--chat-h) за пальцем: чат растёт
   снизу, карточка ужимается сверху от той же границы — единый образ (владелец
   18.09.2026). Во время жеста transition выключен (высота строго за пальцем);
   на отпускании включаем `.chat-anim` — граница плавно доезжает до места. */
.chat.chat-anim{transition:flex-basis .19s ease}