/* Theme follows the system setting: light by default, dark palette under
 * prefers-color-scheme. Every themable color lives in a variable here —
 * никаких hard-coded цветов ниже по файлу. */
:root{
  color-scheme:light;
  --bg:#f4f5f9; --panel:#ffffff; --line:#e3e7ef; --txt:#1b1f2a;
  --muted:#6b7385; --accent:#7C4DFF; --good:#1d9e6b; --bad:#e05252;
  --field:#f1f3f8;          /* inputs, chips, inset cards */
  --deep:#e8ebf2;           /* map placeholder, log panel */
  --ava-bg:#e8eaf3;
  --chat-bg:#edeff5;
  --bubble:#ffffff; --bubble-mine:#e5dcff;
  --press:rgba(0,0,0,.06);
  --shadow:rgba(25,30,50,.18);
  --pill-bg:rgba(255,255,255,.94);
  --star:#d99a00; --log-txt:#4a5268; --err-txt:#b03030;
  --good-contrast:#ffffff;
  --toast-bg:#ece5ff; --toast-txt:#5230c4;
  --wave-blend:multiply;      /* screen-blend is invisible on white */
  --k-cargo-txt:#3d6fe8; --k-transport-txt:#7847e6; --k-machinery-txt:#d96010;
  --pin-cargo:#5b8cff; --pin-transport:#9d6bff; --pin-machinery:#ff8a3d;
  --pin-ready:#22db6e; --pin-later:#f0a00a;
  --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='rgba(0,0,0,0.045)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 22l14-7 14 7v14l-14 7-14-7z'/%3E%3Cpath d='M14 22l14 7 14-7'/%3E%3Crect x='95' y='40' width='30' height='19' rx='2'/%3E%3Cpath d='M125 46h8l6 6v7h-14z'/%3E%3Ccircle cx='104' cy='63' r='3'/%3E%3Ccircle cx='131' cy='63' r='3'/%3E%3Cpath d='M45 92c-8 0-14 6-14 14 0 10 14 22 14 22s14-12 14-22c0-8-6-14-14-14z'/%3E%3Ccircle cx='45' cy='106' r='4'/%3E%3Cpath d='M96 116h40' stroke-dasharray='6 7'/%3E%3Cpath d='M120 128l10-6 10 6v10l-10 6-10-6z'/%3E%3C/g%3E%3C/svg%3E");
  --nav-h:56px;
}
/* System dark applies unless the user forced light in the profile;
 * :root[data-theme="dark"] (further below) forces dark regardless of system. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0c0e13; --panel:#161a22; --line:#252b38; --txt:#eef1f7;
    --muted:#8b93a7; --accent:#7C4DFF; --good:#3ecf8e; --bad:#ff6b6b;
    --field:#0f1218;
    --deep:#0a0c10;
    --ava-bg:#242b3d;
    --chat-bg:#0b0d12;
    --bubble:#1b202b; --bubble-mine:#3a2f6b;
    --press:rgba(255,255,255,.06);
    --shadow:rgba(0,0,0,.45);
    --pill-bg:rgba(22,26,34,.92);
    --star:#ffcf6a; --log-txt:#cbd3e6; --err-txt:#ffb4b4;
    --good-contrast:#06281a;
    --toast-bg:#241d3d; --toast-txt:#e3d9ff;
    --wave-blend:screen;
    --k-cargo-txt:#8fb0ff; --k-transport-txt:#b59aff; --k-machinery-txt:#ffb076;
  --pin-cargo:#5b8cff; --pin-transport:#9d6bff; --pin-machinery:#ff8a3d;
  --pin-ready:#22db6e; --pin-later:#f0a00a;
    --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.035)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 22l14-7 14 7v14l-14 7-14-7z'/%3E%3Cpath d='M14 22l14 7 14-7'/%3E%3Crect x='95' y='40' width='30' height='19' rx='2'/%3E%3Cpath d='M125 46h8l6 6v7h-14z'/%3E%3Ccircle cx='104' cy='63' r='3'/%3E%3Ccircle cx='131' cy='63' r='3'/%3E%3Cpath d='M45 92c-8 0-14 6-14 14 0 10 14 22 14 22s14-12 14-22c0-8-6-14-14-14z'/%3E%3Ccircle cx='45' cy='106' r='4'/%3E%3Cpath d='M96 116h40' stroke-dasharray='6 7'/%3E%3Cpath d='M120 128l10-6 10 6v10l-10 6-10-6z'/%3E%3C/g%3E%3C/svg%3E");
  }
}
/* Forced dark from the profile theme control (localStorage ryta_theme).
 * Must mirror the media-query dark palette above — keep the two in sync. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0c0e13; --panel:#161a22; --line:#252b38; --txt:#eef1f7;
  --muted:#8b93a7; --accent:#7C4DFF; --good:#3ecf8e; --bad:#ff6b6b;
  --field:#0f1218;
  --deep:#0a0c10;
  --ava-bg:#242b3d;
  --chat-bg:#0b0d12;
  --bubble:#1b202b; --bubble-mine:#3a2f6b;
  --press:rgba(255,255,255,.06);
  --shadow:rgba(0,0,0,.45);
  --pill-bg:rgba(22,26,34,.92);
  --star:#ffcf6a; --log-txt:#cbd3e6; --err-txt:#ffb4b4;
  --good-contrast:#06281a;
  --toast-bg:#241d3d; --toast-txt:#e3d9ff;
  --wave-blend:screen;
  --k-cargo-txt:#8fb0ff; --k-transport-txt:#b59aff; --k-machinery-txt:#ffb076;
  --pin-cargo:#5b8cff; --pin-transport:#9d6bff; --pin-machinery:#ff8a3d;
  --pin-ready:#22db6e; --pin-later:#f0a00a;
  --doodle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.035)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 22l14-7 14 7v14l-14 7-14-7z'/%3E%3Cpath d='M14 22l14 7 14-7'/%3E%3Crect x='95' y='40' width='30' height='19' rx='2'/%3E%3Cpath d='M125 46h8l6 6v7h-14z'/%3E%3Ccircle cx='104' cy='63' r='3'/%3E%3Ccircle cx='131' cy='63' r='3'/%3E%3Cpath d='M45 92c-8 0-14 6-14 14 0 10 14 22 14 22s14-12 14-22c0-8-6-14-14-14z'/%3E%3Ccircle cx='45' cy='106' r='4'/%3E%3Cpath d='M96 116h40' stroke-dasharray='6 7'/%3E%3Cpath d='M120 128l10-6 10 6v10l-10 6-10-6z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Theme picker (profile) ---- */
.theme-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 2px;border-bottom:1px solid var(--line);font-size:15px;}
.seg{display:flex;background:var(--field);border:1px solid var(--line);
  border-radius:10px;padding:3px;gap:2px;}
.seg-btn{background:none;border:none;color:var(--muted);font-size:12.5px;
  font-weight:600;padding:6px 10px;border-radius:8px;}
.seg-btn.active{background:var(--accent);color:#fff;}

/* ---- App theme switcher (admin only, settings hub) ---- */
.theme-sel{background:var(--field);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:7px 9px;font-size:13px;max-width:55%;}
.theme-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;
  width:100%;min-height:18px;font-size:11.5px;}
.theme-apply{background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:6px 11px;font-size:12px;font-weight:600;}
.theme-apply[disabled]{opacity:.5;}

/* ---- Build info card (admin only) ---- */
.build-card{font-size:12px;}
.build-row{display:flex;justify-content:space-between;gap:12px;padding:5px 0;
  border-bottom:1px solid var(--line);}
.build-row:last-child{border-bottom:none;}
.build-row span{color:var(--muted);flex:none;}
.build-row b{font-weight:600;text-align:right;word-break:break-all;
  font-family:Consolas,Menlo,monospace;font-size:11.5px;}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* App-like feel in mobile browsers: no text auto-inflation, no
 * pull-to-refresh rubber-banding. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{overscroll-behavior:none;}

/* ---- Screens + bottom navigation ---- */
.screen{display:none;position:fixed;inset:0 0 var(--nav-h) 0;overflow-y:auto;}
.screen.active{display:block;}
#screen-map{overflow:hidden;}
.bottomnav{position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);display:flex;
  background:var(--panel);border-top:1px solid var(--line);z-index:50;
  padding-bottom:env(safe-area-inset-bottom);}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;background:none;border:none;color:var(--muted);font-size:10.5px;font-weight:600;
  letter-spacing:.2px;border-radius:0;padding:7px 0 5px;
  transition:color .18s ease;}
.nav-btn .nav-ico{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .18s ease,filter .18s ease;}
.nav-btn.active{color:var(--accent);}

/* ---- Nav variant: collapsible (тема с data-nav="collapsible") ----
 * Обычная тема этот блок не трогает: ручка скрыта, меню ведёт себя как было.
 * В свёрнутом виде меню превращается в кружок справа, а --nav-h обнуляется,
 * чтобы экран (в первую очередь карта) занял освободившееся место. */
.nav-toggle{display:none;flex:0 0 auto;width:44px;}
.nav-chev{font-size:26px;line-height:1;font-weight:700;transition:transform .22s ease;}

/* Только для узких экранов: с 768px нижнее меню превращается в боковую панель
 * (см. блок @media (min-width:768px) ниже), и «свернуть вниз-вправо» там
 * бессмысленно — свои правила там переопределили бы ширину панели. */
@media (max-width:767.9px){
  :root[data-nav="collapsible"] .nav-toggle{display:flex;color:var(--muted);}
  :root[data-nav="collapsible"] .bottomnav{
    transition:width .22s ease,height .22s ease,border-radius .22s ease,
               right .22s ease,bottom .22s ease;}
  /* Развёрнутое меню: шеврон развёрнут в «‹‹» — «убрать меню». */
  :root[data-nav="collapsible"] .nav-chev{transform:rotate(180deg);}

  :root[data-nav="collapsible"].nav-collapsed{--nav-h:0px;}
  /* Свёрнутое меню остаётся на месте — в левом нижнем углу, где начиналась
   * панель. Квадрат (ширина = высоте) с одной кнопкой разворота: меню не
   * «уезжает» через весь экран, поэтому его не приходится искать глазами. */
  :root[data-nav="collapsible"].nav-collapsed .bottomnav{
    left:0;right:auto;bottom:env(safe-area-inset-bottom);
    width:56px;height:56px;overflow:hidden;
    /* Скруглён только верхний правый угол — два других прижаты к краям экрана. */
    border-radius:0 12px 0 0;
    border:1px solid var(--line);border-left:none;border-bottom:none;
    box-shadow:0 -2px 10px var(--shadow);
    padding-bottom:0;}
  :root[data-nav="collapsible"].nav-collapsed .nav-btn:not(.nav-toggle){display:none;}
  :root[data-nav="collapsible"].nav-collapsed .nav-toggle{
    width:100%;height:100%;color:var(--accent);}
  /* Свёрнутое: «»» — нажать, чтобы вернуть меню. */
  :root[data-nav="collapsible"].nav-collapsed .nav-chev{transform:rotate(0deg);}
}

/* ---- Map screen ---- */
#map{position:absolute;inset:0;background:var(--deep);}
.map-topbar{position:absolute;top:10px;left:10px;right:10px;z-index:10;}
.searchbox{display:flex;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 4px 16px var(--shadow);}
.searchbox input{flex:1;background:none;border:none;outline:none;color:var(--txt);
  font-size:15px;padding:12px 14px;}
.searchbox input::placeholder{color:var(--muted);}
.icon-btn{background:none;border:none;color:var(--muted);font-size:15px;padding:0 14px;}
.search-results{margin-top:6px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;box-shadow:0 8px 24px var(--shadow);}
.search-item{padding:12px 14px;font-size:14px;border-bottom:1px solid var(--line);cursor:pointer;}
.search-item:last-child{border-bottom:none;}
.search-item:active{background:rgba(124,77,255,.15);}
.fab{position:absolute;right:14px;bottom:18px;z-index:10;width:48px;height:48px;
  border-radius:50%;background:var(--accent);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(124,77,255,.4);padding:0;}
.fab svg{width:24px;height:24px;}
.fab:active{filter:brightness(1.15);}
.map-status{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:10;
  background:var(--pill-bg);border:1px solid var(--line);color:var(--txt);
  padding:8px 16px;border-radius:999px;font-size:13px;white-space:nowrap;}
.loc-dot{width:16px;height:16px;border-radius:50%;background:#4285f4;
  border:3px solid #fff;box-shadow:0 0 0 6px rgba(66,133,244,.25);}
.maplibregl-ctrl-bottom-right{bottom:calc(env(safe-area-inset-bottom) + 6px);}

/* ---- Индикатор загрузки тайлов (порт эффекта с демо geo.ryta.online) ----
 * Тонкая бегущая полоса поверх карты, пока подгружаются тайлы после
 * панорамирования и зума. Ничего не перекрывает и не ловит нажатия. */
#tilebar{position:absolute;top:0;left:0;right:0;height:3px;z-index:25;
  pointer-events:none;overflow:hidden;opacity:0;transition:opacity .25s;}
#tilebar.on{opacity:1;}
#tilebar::before{content:"";position:absolute;top:0;height:100%;width:35%;
  left:-35%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:tileSlide 1.1s ease-in-out infinite;}
@keyframes tileSlide{0%{left:-35%;}100%{left:100%;}}
@media (prefers-reduced-motion:reduce){
  #tilebar::before{animation-duration:2.2s;}
}

/* ---- Плашки-подписи над картой (тема с pins="banner") ----
 * Отдельный DOM-слой: растровые значки MapLibre при наложении только
 * прячутся, а нам надо их раздвигать и дотягивать поводок до точки. */
/* Позицию задаёт MapLibre (маркер), поэтому ни position, ни transform тут не
 * трогаем — иначе перебьём его расчёт и плашка «уедет» от точки. */
/* Один в один бейдж готовности из карточки (.ready-badge): пилюля с обводкой
 * currentColor, точкой слева, теми же цветами и той же анимацией свечения.
 * Отличие одно и вынужденное — непрозрачная подложка: в карточке бейдж лежит
 * на панели, а на карте под ним тайлы, и без неё текст не читается. */
.mban{display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid currentColor;background:var(--panel);
  white-space:nowrap;cursor:pointer;}
.mban::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;flex:none;}
/* Отрыв от карты. Тень даём через filter, а не box-shadow: box-shadow у
 * «готов сейчас» занят анимацией свечения, и вторая тень её бы перебила. */
.mban{filter:drop-shadow(0 1px 3px var(--shadow));}
/* На тёмной карте подложка плашки (--panel) почти совпадает по светлоте с
 * фоном самой карты — пилюля растворяется, остаётся только цветная обводка.
 * Поэтому в тёмной теме подложку чуть поднимаем. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mban{
    background:color-mix(in srgb, var(--panel) 84%, #ffffff);}
}
:root[data-theme="dark"] .mban{
  background:color-mix(in srgb, var(--panel) 84%, #ffffff);}
.mban.ready{color:var(--good);animation:readyGlow 2.2s ease-in-out infinite;}
.mban.later{color:var(--star);box-shadow:0 0 7px -1px currentColor;}
.mban:active{filter:brightness(1.12);}
/* Общий план: плашка схлопывается в точку — подписи всё равно слились бы.
 * Зона нажатия расширяется через ::after (::before занят точкой бейджа). */
.mban.mini{width:14px;height:14px;padding:0;gap:0;border-radius:50%;
  font-size:0;background:currentColor;border:2px solid var(--panel);}
.mban.mini::before{display:none;}
.mban.mini::after{content:"";position:absolute;inset:-10px;border-radius:50%;}
/* Поводок — внутри плашки: висит от её низа вниз, до самой координаты.
 * Высоту ставит JS при пересчёте раскладки, цвет наследуется от плашки. */
.mban-stem{position:absolute;left:16px;top:100%;width:2px;margin-left:-1px;
  pointer-events:none;border-radius:1px;background:currentColor;}
.mban.ready .mban-stem{box-shadow:0 0 6px currentColor;}
/* Точка ровно на координате — видно, к чему относится плашка. */
.mban-stem::after{content:"";position:absolute;left:50%;bottom:-3px;
  width:7px;height:7px;border-radius:50%;transform:translateX(-50%);
  background:currentColor;}
@media (prefers-reduced-motion:reduce){
  .mban.ready{animation:none;box-shadow:0 0 8px -1px currentColor;}
}

/* ---- Kind filter chips (inside the search dropdown) ---- */
.chips-inline{display:flex;gap:6px;padding:7px 8px;}
.chip{border:1px solid var(--line);background:var(--field);color:var(--txt);
  border-radius:999px;padding:5px 10px;font-size:11.5px;font-weight:600;}
.chip.off{opacity:.4;border-color:var(--line);}

/* ---- Variant: строка поиска «капсула» (тема, data-search="pill") ---- */
:root[data-search="pill"] .searchbox{
  border:none;border-radius:999px;box-shadow:0 6px 20px var(--shadow);}
:root[data-search="pill"] .searchbox input{padding:13px 6px 13px 18px;}
:root[data-search="pill"] .search-results{border-radius:18px;border:none;}

/* ---- Variant: строка поиска «прижата к верху» (тема, data-search="flush") ----
 * Плавающая панель с отступами съедает полосу карты сверху. Здесь строка
 * прижата к левому верхнему углу без скруглений: на телефоне во всю ширину,
 * на десктопе сохраняет свою ширину (440px задаёт блок @media ниже). */
:root[data-search="flush"] .map-topbar{top:0;left:0;right:0;}
@media (min-width:768px){
  :root[data-search="flush"] .map-topbar{right:auto;}
}
/* Режим «от имени пользователя» опускает панель под свою плашку — правило
 * выше специфичнее исходного, поэтому смещение повторяем явно. */
:root[data-search="flush"] body.acting .map-topbar{top:var(--acting-h,38px);}
:root[data-search="flush"] .searchbox{
  border-radius:0;border-top:none;border-left:none;border-right:none;
  box-shadow:0 2px 10px var(--shadow);}
:root[data-search="flush"] .search-results{
  margin-top:0;border-radius:0;border-left:none;border-right:none;border-top:none;}

/* ---- Variant: панель категорий скрыта (тема, data-chips="hidden") ----
 * Фильтр по видам не показывается; listings.js при этом включает все виды,
 * иначе выключенный ранее вид остался бы отфильтрованным без способа вернуть. */
:root[data-chips="hidden"] .chips-inline{display:none;}

/* ---- Variant: панель категорий «сегменты» (тема, data-chips="segmented") ----
 * Три вида делят ширину поровну — панель читается как переключатель, а не как
 * набор отдельных кнопок. Цвет вида остаётся: заливка вместо обводки. */
:root[data-chips="segmented"] .chips-inline{
  gap:3px;margin:7px 8px;padding:3px;background:var(--field);
  border:1px solid var(--line);border-radius:11px;}
:root[data-chips="segmented"] .chip{
  flex:1;border:none;border-radius:9px;padding:9px 4px;text-align:center;
  font-size:12px;background:transparent;}
:root[data-chips="segmented"] .chip[data-kind]{
  background:color-mix(in srgb, var(--k, transparent) 18%, transparent);}
:root[data-chips="segmented"] .chip.off{
  background:transparent;opacity:.45;}


/* ---- Единая палитра видов: карта, фильтр, карточка, разделы профиля ----
   Любой элемент с классом k-cargo / k-transport / k-machinery получает
   --k (цвет вида, как у пина на карте) и --k-txt (читаемый текст). */
.k-cargo{--k:var(--pin-cargo);--k-txt:var(--k-cargo-txt);}
.k-transport{--k:var(--pin-transport);--k-txt:var(--k-transport-txt);}
.k-machinery{--k:var(--pin-machinery);--k-txt:var(--k-machinery-txt);}

/* Один стиль «пилюли вида» на все поверхности */
.chip[data-kind],.sug-kind,.sheet-kind{
  border:1px solid var(--k,var(--line));color:var(--k-txt,var(--txt));
  background:color-mix(in srgb, var(--k, transparent) 12%, transparent);
  border-radius:999px;font-weight:700;}

/* ---- Search suggestions ---- */
.search-item{display:flex;align-items:center;gap:10px;}
.sug-kind{flex-shrink:0;font-size:10px;font-weight:700;border:1px solid var(--line);
  border-radius:999px;padding:2px 8px;}
.sug-body{flex:1;min-width:0;}
.sug-body small{display:block;color:var(--muted);font-size:12px;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-empty{padding:12px 14px;font-size:13px;color:var(--muted);}

/* ---- Listings: add FAB + location picking ---- */
/* .fab-add position/style consolidated with .fab above */
.pick-hint[hidden]{display:none;}
.pick-done{background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:7px 16px;font-size:13px;font-weight:700;}
.pick-done[hidden]{display:none;}
.pick-hint{position:absolute;left:50%;top:70px;transform:translateX(-50%);z-index:11;
  display:flex;align-items:center;gap:4px;background:var(--panel);
  border:1px solid var(--accent);border-radius:999px;padding:8px 6px 8px 16px;
  font-size:13px;box-shadow:0 6px 20px var(--shadow);white-space:nowrap;}
.pick-row{display:flex;gap:8px;margin-top:6px;align-items:stretch;}
.pick-row input{flex:1;min-width:0;}         /* allow the input to shrink */
.pick-row button{flex-shrink:0;white-space:nowrap;}
.pick-row-stack{flex-direction:column;}      /* input full width, button below */
/* Actions gated on phone verification look disabled until confirmed. */
body.unverified .add-card,
body.unverified .mine-row{opacity:.45;filter:grayscale(1);}
/* Chats are readable pre-verification; only DMs look locked in the nav. */
body.unverified .nav-btn[data-screen="dm"]{opacity:.45;}

/* Unverified: locked DM rows + composer replacement + list notice. */
.chat-row.locked{opacity:.5;}
.conv-verify{width:100%;background:rgba(124,77,255,.12);border:none;
  border-top:1px solid var(--line);color:var(--accent);font-weight:600;
  font-size:14px;padding:13px;border-radius:0;}
.dm-verify-note{margin:12px 16px;padding:14px 16px;background:var(--field);
  border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:1.5;}
.dm-verify-note button{margin-top:10px;display:block;}

/* ---- Listing detail bottom sheet ---- */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:20;background:var(--panel);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:14px 18px
  calc(18px + env(safe-area-inset-bottom));transform:translateY(110%);
  transition:transform .25s ease;box-shadow:0 -8px 30px var(--shadow);}
.sheet.open{transform:translateY(0);}
.sheet-grip{width:42px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 10px;}
.sheet-close{position:absolute;right:12px;top:12px;background:none;border:none;
  color:var(--muted);font-size:16px;padding:6px;}
.sheet-kind{display:inline-block;font-size:11px;font-weight:700;border-radius:999px;
  padding:3px 10px;border:1px solid var(--line);}
.sheet-kind svg,.sug-kind svg{vertical-align:-2px;}
.sheet h3{margin:10px 0 4px;font-size:18px;}
.sheet-price{font-size:16px;font-weight:700;color:var(--accent);margin-bottom:6px;}
.sheet-comments{font-size:14px;color:var(--txt);margin:10px 0;}
.call-btn{width:100%;margin-top:12px;background:var(--good);color:var(--good-contrast);font-weight:700;
  border:none;border-radius:12px;padding:14px;font-size:16px;}

/* ---- Create form ---- */
.form-overlay{position:absolute;inset:0;z-index:30;background:rgba(0,0,0,.55);
  display:none;overflow-y:auto;padding:20px 14px calc(20px + env(safe-area-inset-bottom));}
.form-overlay.open{display:block;}
.form-card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:18px;max-width:520px;margin:0 auto;}
.form-card h3{margin:0 0 14px;}
.form-card label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px;}
/* display:block above would beat the hidden attribute (Выгрузка showed up in
   транспорт/спецтехника forms) — restore it explicitly. */
.form-card label[hidden]{display:none;}
.pick-row input.geo-ok{border-color:var(--good);}
.pick-row input.geo-bad{border-color:var(--bad);}
.form-card input,.form-card select,.form-card textarea{width:100%;margin-top:6px;
  background:var(--field);border:1px solid var(--line);color:var(--txt);border-radius:10px;
  padding:11px;font-size:15px;}
.form-error{background:rgba(255,107,107,.12);border:1px solid var(--bad);color:var(--err-txt);
  padding:9px 12px;border-radius:9px;font-size:13px;margin-bottom:10px;}
/* Kind-specific form controls (ported from RYTA 2.0) */
.dims-row{display:flex;gap:8px;}
.dims-row input{min-width:0;}
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px 10px;margin:-4px 0 12px;}
.pay-grid{grid-template-columns:1fr 1fr 1fr;}
.form-card .chk{display:flex;align-items:center;gap:8px;font-size:14px;
  color:var(--txt);margin:0;padding:5px 0;}
.form-card .chk input{width:auto;margin:0;flex-shrink:0;}
.form-card .switch-row{font-weight:600;margin-bottom:8px;}
/* Brand autocomplete (custom, replaces datalist) */
.brand-suggest{position:absolute;left:0;right:0;top:100%;z-index:40;
  max-height:262px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  margin-top:4px;box-shadow:0 8px 24px var(--shadow);
  max-height:210px;overflow-y:auto;}
.brand-suggest[hidden]{display:none;}
.bs-item{padding:10px 12px;font-size:14px;color:var(--txt);cursor:pointer;}
.bs-item:hover,.bs-item:active{background:var(--press);}
/* Sheet spec lines */
.sheet-specs{margin:6px 0 2px;}
.spec-line{font-size:13.5px;color:var(--txt);margin-top:3px;}

/* ---- Chats: nav badges ---- */
.nav-btn{position:relative;}
.nav-badge{position:absolute;top:2px;left:calc(50% + 6px);background:var(--bad);
  color:#fff;font-size:10px;font-weight:700;border-radius:999px;padding:1px 5px;min-width:16px;}
.msg-btn{width:100%;margin-top:10px;background:var(--accent);color:#fff;font-weight:700;
  border:none;border-radius:12px;padding:14px;font-size:16px;}

/* ---- Chat list live-update animations ----
 * Rows are keyed and recycled (chats.js renderList): position changes glide
 * via FLIP transforms set inline; these cover new rows and fresh messages. */
.chat-row.row-in{animation:rowIn .4s ease;}
@keyframes rowIn{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:none;}
}
.chat-row.row-fresh{animation:rowFresh 1.4s ease;}
@keyframes rowFresh{
  0%{background:rgba(124,77,255,.20);}
  100%{background:transparent;}
}

/* ---- Chat lists ---- */
.chat-list{padding:6px 0;}

/* Поиск по сообщениям (вкладка «Сообщения») */
.dm-searchbar{display:flex;align-items:center;gap:6px;margin:8px 12px 4px;
  background:var(--field);border:1px solid var(--line);border-radius:12px;}
.dm-searchbar input{flex:1;background:none;border:none;outline:none;color:var(--txt);
  font-size:15px;padding:11px 14px;}
.dm-searchbar input::placeholder{color:var(--muted);}
.dm-searchbar .icon-btn{padding:0 12px;}
.dm-prev b,.chat-prev b{color:var(--txt);font-weight:700;background:rgba(124,77,255,.18);
  border-radius:3px;padding:0 1px;}
.dm-you{color:var(--muted);}
#contactsBtn{color:var(--accent);}
.contacts-head{padding:14px 16px 6px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;color:var(--muted);}
.contacts-open{font-size:12.5px;font-weight:700;color:var(--accent);}
.contacts-invite{font-size:12.5px;font-weight:700;color:var(--good);
  border:1px solid var(--good);border-radius:8px;padding:5px 12px;}
.contacts-actions{display:flex;gap:10px;margin-top:12px;}
.contacts-allow{background:var(--accent);color:#fff;border:none;border-radius:8px;
  padding:10px 16px;font-size:14px;font-weight:600;}
.contacts-ghost{background:var(--field);color:var(--txt);border:1px solid var(--line);
  border-radius:8px;padding:10px 16px;font-size:14px;font-weight:600;}
/* Подсветка сообщения, к которому перешли из поиска. */
.bubble.hl{animation:msgHl 2.2s ease;}
@keyframes msgHl{
  0%,55%{box-shadow:0 0 0 2px var(--accent), 0 0 14px var(--accent);}
  100%{box-shadow:0 0 0 0 transparent;}
}
@media (prefers-reduced-motion:reduce){
  .bubble.hl{animation:none;box-shadow:0 0 0 2px var(--accent);}
}
.chat-row{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--line);cursor:pointer;}
.chat-row:active{background:rgba(124,77,255,.08);}
.chat-ava{flex-shrink:0;width:44px;height:44px;border-radius:50%;background:var(--ava-bg);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;
  color:var(--accent);}
.chat-ava.support{background:rgba(62,207,142,.15);color:var(--good);}
.chat-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.chat-mid{flex:1;min-width:0;}
.chat-title{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-prev{color:var(--muted);font-size:13px;margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.chat-right{flex-shrink:0;text-align:right;}
.chat-time{color:var(--muted);font-size:12px;}
.chat-badge{display:inline-block;margin-top:4px;background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;border-radius:999px;padding:2px 7px;min-width:20px;text-align:center;}
.mute-ico{display:inline-flex;vertical-align:-2px;color:var(--muted);opacity:.85;}
.mute-ico svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

/* ---- Conversation overlay ---- */
.conv{position:fixed;inset:0;z-index:60;background:var(--bg);display:none;
  flex-direction:column;}
.conv.open{display:flex;}
.conv-head{display:flex;align-items:center;gap:6px;padding:10px 8px;
  border-bottom:1px solid var(--line);background:var(--panel);}
.conv-who{flex:1;min-width:0;display:flex;align-items:center;gap:6px;
  border-radius:10px;padding:2px 4px;margin-left:-2px;}
.conv-who.tappable{cursor:pointer;}
.conv-who.tappable:active{background:var(--press);}
.conv-title{flex:1;min-width:0;font-weight:700;font-size:15px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;margin-left:2px;}

/* modern icon buttons (stroke SVG, currentColor) */
.ico-btn{background:none;border:none;color:var(--txt);padding:8px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;}
.ico-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.ico-btn:active{background:var(--press);}
.conv-head .ico-btn{color:var(--muted);}

.conv-older{margin:8px auto;background:transparent;border:1px solid var(--line);
  color:var(--muted);border-radius:999px;padding:6px 14px;font-size:12px;z-index:1;}

/* WhatsApp-style patterned message area (faint logistics doodles) */
.conv-msgs{flex:1;overflow-y:auto;padding:8px 8px;display:flex;flex-direction:column;
  gap:4px;background-color:var(--chat-bg);
  background-image:var(--doodle);}
/* Плоские, широкие сообщения: меньше скруглений и полей — больше текста
 * помещается в строку и меньше пустого места по краям. */
.bubble{max-width:92%;background:var(--bubble);border-radius:8px;
  padding:6px 10px 4px;font-size:15px;line-height:1.35;align-self:flex-start;
  word-break:break-word;box-shadow:0 1px 1px var(--shadow);}
.bubble.mine{background:var(--bubble-mine);align-self:flex-end;}
.b-who{font-size:12px;font-weight:700;color:var(--accent);margin-bottom:2px;}
.b-time{display:flex;align-items:center;justify-content:flex-end;gap:4px;
  font-size:10px;color:var(--muted);margin-top:2px;}
.b-tick{font-size:11px;letter-spacing:-3px;padding-right:2px;color:var(--muted);}
.b-tick.read{color:#4aa3ff;}
/* Оптимистичная отправка: пузырь появляется сразу, пока идёт доставка. */
.bubble.pending{opacity:.6;}
.bubble.failed{opacity:1;box-shadow:inset 0 0 0 1px var(--bad);}
.b-state{font-size:11px;color:var(--muted);}
.b-state.bad{color:var(--bad);}
.b-retry{background:none;border:none;padding:0 0 0 8px;font-size:11px;
  font-weight:700;color:var(--bad);text-decoration:underline;}
.b-img{max-width:100%;border-radius:9px;display:block;margin-bottom:4px;}

.conv-attach[hidden]{display:none;}
.conv-attach{display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-top:1px solid var(--line);background:var(--panel);}
.conv-attach img{height:52px;width:52px;object-fit:cover;border-radius:8px;flex-shrink:0;}
.conv-attach-label{flex:1;font-size:13px;color:var(--muted);}

/* Композитор как строка поиска на карте: плоские квадратные контролы,
 * минимум полей — ввод занимает почти всю ширину, кругляш-«пузырь» убран. */
.conv-bar{display:flex;align-items:flex-end;gap:6px;padding:6px 8px
  calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel);}
.conv-bar .ico-btn.attach{color:var(--muted);padding:0 6px;height:40px;
  display:flex;align-items:center;}
.conv-bar textarea{flex:1;background:var(--field);border:1px solid var(--line);color:var(--txt);
  border-radius:8px;padding:8px 12px;font-size:15px;line-height:22px;resize:none;
  min-height:40px;max-height:110px;box-sizing:border-box;}
.conv-send{background:var(--accent);border:none;border-radius:8px;width:44px;height:40px;
  flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.conv-send svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transform:translateX(-1px);}
.conv-send:active{filter:brightness(1.15);}

/* ---- Profile ---- */
.prof-head{display:flex;align-items:center;gap:16px;padding:8px 2px 16px;}
.prof-ava{width:64px;height:64px;border-radius:50%;background:var(--panel);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  overflow:hidden;flex-shrink:0;cursor:pointer;}
.prof-ava img{width:100%;height:100%;object-fit:cover;}
.prof-ava svg{width:30px;height:30px;fill:none;stroke:var(--muted);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.prof-name{font-size:20px;font-weight:800;}
.prof-phone{font-size:14px;margin-top:2px;}
.prof-phone .ok-tick{color:var(--good);font-weight:700;}
.prof-rating{font-size:13px;color:var(--star);margin-top:4px;cursor:pointer;}
.prof-rating.muted{color:var(--muted);}
.prof-rating #reviewsLink{color:var(--accent);cursor:pointer;}

/* ---- Notifications inbox (push history) ---- */
/* Карточка уведомления: заголовок и дата — строго одной строкой, текст ниже. */
.notif-item{padding:12px 16px;border-bottom:1px solid var(--line);}
.notif-head{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;}
.notif-title{font-weight:700;font-size:14.5px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.notif-time{font-size:11.5px;flex:0 0 auto;white-space:nowrap;}
.notif-body{margin-top:5px;font-size:13.5px;line-height:1.4;color:var(--txt);
  word-break:break-word;}
.notif-clear{background:none;border:none;color:var(--muted);font-size:13px;
  font-weight:600;padding:8px 10px;}

/* ---- Quick-add nav buttons (desktop web only) ----
 * On phone-width screens they'd wreck the 4-tab bar (7 cramped items), so
 * they only exist on the desktop rail; mobile web matches the app exactly. */
.nav-add{display:none;}
/* Авторское display:flex у .nav-btn перебивает браузерное [hidden] — без
   этого правила скрытые кнопки меню («+ Транспорт», «Сменить») видны всем. */
.nav-btn[hidden],.nav-add[hidden]{display:none;}
.nav-add .nav-ico-slot{display:flex;}
.nav-add .nav-ico-slot svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.nav-add{color:var(--accent);}

/* ---- Modal flavor of doc-overlay: centered popup over a scrim ---- */
.doc-overlay.modal{background:rgba(0,0,0,.55);flex-direction:row;
  align-items:center;justify-content:center;padding:20px;}
.modal-card{background:var(--panel);border:1px solid var(--line);
  border-radius:18px;max-width:420px;width:100%;max-height:92vh;overflow-y:auto;
  padding:16px 20px 20px;box-shadow:0 20px 60px var(--shadow);}
.modal-head{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;}
.modal-title{font-weight:700;font-size:16px;}

/* ---- QR login (web) + scanner (app) ---- */
.or-sep{display:flex;align-items:center;gap:10px;color:var(--muted);
  font-size:13px;margin:14px 0 12px;}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line);}
.notif-perm{margin:10px 12px;padding:10px 14px;border:1px solid var(--bad);
  border-radius:10px;color:var(--bad);font-size:13px;cursor:pointer;
  background:rgba(224,82,82,.08);}
.notif-perm[hidden]{display:none;}

.conv-ava{width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--field) center/cover no-repeat;}
.conv-ava[hidden]{display:none;}

/* Rating stars + owner profile badge/popup + review form */
.stars{color:var(--star);letter-spacing:1px;}
.sheet-actions{display:flex;gap:10px;}
.sheet-actions .call-btn,.sheet-actions .msg-btn{flex:1;width:auto;min-width:0;}

/* ---- Жизненный цикл объявления (только владельцу) ----
 * [hidden] отдельными правилами: авторский display перебивает правило UA,
 * и без этого блок остаётся видимым чужим людям. */
.sheet-cycle{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 2px;}
.sheet-cycle[hidden]{display:none;}
.cycle-btn{flex:1;min-width:150px;background:var(--field);color:var(--txt);
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  font-size:14px;font-weight:600;cursor:pointer;}
.cycle-btn[hidden]{display:none;}
.cycle-btn:active{transform:scale(.98);}
.cycle-btn:disabled{opacity:.55;cursor:default;}
.cycle-btn.ready{border-color:var(--good);color:var(--good);}
.cycle-btn.ready.on{background:var(--good);color:var(--good-contrast);
  border-color:var(--good);}
.cycle-hint{flex-basis:100%;font-size:11.5px;color:var(--muted);}
.cycle-hint:empty{display:none;}

.owner-badge{cursor:pointer;display:flex;align-items:center;gap:12px;background:var(--field);
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  margin:10px 0 6px;cursor:pointer;}
.owner-badge .owner-ava{width:46px;height:46px;font-size:17px;}
.ob-info{flex:1;min-width:0;}
.ob-name{font-weight:700;font-size:14.5px;color:var(--txt);}
.ob-line{font-size:12.5px;margin-top:1px;color:var(--txt);}
.ob-chev{color:var(--muted);font-size:22px;}
.owner-link{color:var(--accent);cursor:pointer;font-weight:600;}
.owner-head{display:flex;gap:12px;align-items:center;margin:6px 0 12px;text-align:left;}
.owner-ava{width:54px;height:54px;border-radius:50%;flex-shrink:0;
  background:var(--field) center/cover no-repeat;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-size:20px;color:var(--muted);}
.owner-name{font-weight:700;font-size:16px;}
.owner-reviews{max-height:280px;overflow-y:auto;margin-top:12px;text-align:left;}
.review-stars-pick{font-size:36px;color:var(--star);text-align:center;
  letter-spacing:10px;margin:8px 0 12px;cursor:pointer;user-select:none;}
#reviewText{width:100%;}
#notifList{text-align:left;}
#notifList .notif-item{text-align:left;}

.loc-btn{flex:0 0 42px;width:42px;padding:8px !important;display:flex;
  align-items:center;justify-content:center;}
.loc-btn svg{width:20px;height:20px;}
.loc-btn.busy{opacity:.5;pointer-events:none;}

.date-row{display:flex;align-items:center;gap:8px;flex:1;}
.date-row input:first-child{flex:1;min-width:0;}
.date-btn{background:var(--field);border:1px solid var(--line);border-radius:8px;
  padding:8px 12px;font-size:16px;line-height:1;flex-shrink:0;}
.date-row:has(input[disabled]) .date-btn{opacity:.45;pointer-events:none;}
.date-native{position:absolute;width:1px;height:1px;opacity:0;border:0;padding:0;
  pointer-events:none;}

.ready-from-row{display:flex;align-items:center;gap:12px;margin:6px 0;}
.ready-from-row .chk{margin:0;flex-shrink:0;}
.ready-from-row input[disabled]{opacity:.45;}

#avaCropCanvas{background:#11141a;border-radius:10px;cursor:grab;touch-action:none;
  display:block;margin:0 auto;max-width:100%;}
#avaCropZoom{width:100%;margin:12px 0 10px;padding:0;}

.qr-box{display:flex;justify-content:center;margin:14px 0;}
.qr-box img{width:240px;height:240px;background:#fff;padding:12px;
  border-radius:12px;image-rendering:pixelated;}
.qr-code-text{font-size:24px;font-weight:800;letter-spacing:3px;
  font-family:Consolas,Menlo,monospace;margin:6px 0 14px;}
.scan-view{position:relative;margin:12px 0;border-radius:12px;overflow:hidden;}
#scanVideo{display:block;width:100%;min-height:120px;max-height:340px;
  background:#000;object-fit:cover;}
/* Прицел: рамка с уголками + бегущий луч. Показывает, что наводить надо на
 * QR (люди без него снимали клавиатуру). Клики не перехватывает. */
.scan-reticle{position:absolute;inset:0;pointer-events:none;}
.scan-reticle::before{content:"";position:absolute;left:50%;top:50%;
  width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2000px rgba(0,0,0,.28);border-radius:14px;}
.sc-corner{position:absolute;width:26px;height:26px;
  border:3px solid var(--accent);}
.sc-corner.tl{left:16%;top:15%;border-right:none;border-bottom:none;border-radius:10px 0 0 0;}
.sc-corner.tr{right:16%;top:15%;border-left:none;border-bottom:none;border-radius:0 10px 0 0;}
.sc-corner.bl{left:16%;bottom:15%;border-right:none;border-top:none;border-radius:0 0 0 10px;}
.sc-corner.br{right:16%;bottom:15%;border-left:none;border-top:none;border-radius:0 0 10px 0;}
.scan-beam{position:absolute;left:19%;right:19%;height:3px;top:15%;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  box-shadow:0 0 10px var(--accent);
  animation:scanBeam 2.2s cubic-bezier(.5,0,.5,1) infinite;}
@keyframes scanBeam{
  0%{top:15%;}50%{top:83%;}100%{top:15%;}
}
.scan-hint{position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-size:12px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8);
  pointer-events:none;padding:0 12px;}
@media (prefers-reduced-motion:reduce){
  .scan-beam{animation:none;top:49%;}
}

/* ---- Reviews overlay ---- */
.review-item{padding:12px 16px;border-bottom:1px solid var(--line);}
.review-head{display:flex;align-items:center;gap:10px;}
.review-stars{color:var(--star);font-size:14px;letter-spacing:2px;}
.review-author{font-weight:600;font-size:14px;}
.review-date{margin-left:auto;font-size:12px;}
.review-text{margin-top:6px;font-size:14px;color:var(--txt);white-space:pre-wrap;}

/* add-cards (Добавить транспорт/груз/технику) */
.add-cards{display:flex;gap:10px;margin-bottom:14px;}
.add-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;
  background:var(--field);border:1px solid var(--line);border-radius:14px;
  padding:14px 6px;color:var(--txt);font-size:12px;font-weight:600;line-height:1.25;
  text-align:center;}
.add-card:active{border-color:var(--accent);}
.add-card .ac-ico{color:var(--accent);display:flex;}
.add-card .ac-ico svg{width:22px;height:22px;}

/* per-kind rows (Мой транспорт/грузы/спецтехника + Архив) */
.mine-row{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;
  border-bottom:1px solid var(--line);color:var(--txt);padding:13px 2px;font-size:15px;
  text-align:left;border-radius:0;}
.mine-row:last-child{border-bottom:none;}
.mine-row .mr-ico{color:var(--accent);display:flex;flex-shrink:0;}
.mine-row .mr-ico svg{width:20px;height:20px;}
.mine-row .mr-label{flex:1;font-weight:600;}
.mine-row .mr-badge{background:var(--accent);color:#fff;font-size:12px;font-weight:700;
  border-radius:999px;padding:2px 9px;min-width:22px;text-align:center;}
.mine-row .chev{color:var(--muted);font-size:18px;}

/* filtered "my listings" overlay list */
.mine-list{flex:1;overflow-y:auto;padding:6px 0 calc(6px + env(safe-area-inset-bottom));}
.mine-list .mine-item{display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-bottom:1px solid var(--line);}
.mine-list .mi-info{flex:1;min-width:0;cursor:pointer;}
.mine-list .mi-title{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.mine-list .mi-title svg{width:16px;height:16px;vertical-align:-3px;
  color:var(--muted);}
.mine-list .mi-actions{display:flex;gap:6px;flex-shrink:0;}
.mine-list .mi-actions button{padding:7px 11px;font-size:12px;}
.verify-ok{color:var(--good);font-size:15px;margin:4px 0;}
.f-label{display:block;font-size:13px;color:var(--muted);margin-bottom:12px;}
.f-label input,.f-label select{width:100%;margin-top:6px;background:var(--field);
  border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:11px;font-size:15px;}
#verifyCard input{background:var(--field);border:1px solid var(--line);color:var(--txt);
  border-radius:10px;padding:11px;font-size:15px;}
/* profile "Ещё" link rows + consent + doc viewer */
.link-row{display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;border-bottom:1px solid var(--line);color:var(--txt);
  padding:14px 2px;font-size:15px;text-align:left;border-radius:0;}
.link-row:last-child{border-bottom:none;}
.link-row .chev{color:var(--muted);font-size:18px;}
.link-row.danger{color:var(--bad);}
.consent{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);
  margin:10px 0;}
.consent input{margin-top:2px;flex-shrink:0;}
.consent a{color:var(--accent);}
.doc-overlay{position:fixed;inset:0;z-index:70;background:var(--bg);display:flex;
  flex-direction:column;}
.doc-overlay[hidden]{display:none;}
/* Overlays that are OPENED FROM another overlay must stack above it —
 * explicit z-index instead of fragile DOM-order layering. */
#scanOverlay,#qrOverlay,#settingsOverlay,#docOverlay,#paidOverlay,
#actAsOverlay{z-index:75;}
.doc-body{flex:1;overflow-y:auto;padding:16px 18px calc(16px + env(safe-area-inset-bottom));
  margin:0;white-space:pre-wrap;font-size:14px;line-height:1.55;color:var(--txt);
  font-family:-apple-system,Segoe UI,Roboto,sans-serif;}
.inn-status{font-size:13px;margin:-6px 0 12px;}
.inn-status.bad{color:var(--bad);}
.org-card{background:var(--field);border:1px solid var(--accent);border-radius:12px;
  padding:12px 14px;margin:0 0 12px;}
.org-name{font-weight:700;font-size:15px;margin-bottom:4px;}
.org-line{font-size:13px;margin-top:3px;}
.org-badge{display:inline-block;margin-top:8px;font-size:11px;font-weight:700;
  border-radius:999px;padding:2px 10px;}
.org-badge.ok{background:rgba(62,207,142,.15);color:var(--good);}
.org-badge.bad{background:rgba(255,107,107,.15);color:var(--bad);}

/* ---- My listings (profile) ---- */
.mine-item{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;}
.mine-item:last-child{border-bottom:none;}
.mine-item.archived{opacity:.5;}
.mine-item button{flex-shrink:0;padding:7px 12px;font-size:12px;}
body{margin:0;background:var(--bg);color:var(--txt);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5;}
.logo{font-weight:800;letter-spacing:.5px;color:var(--accent);}
.net{font-size:13px;color:var(--good);}
.net.off{color:var(--bad);}
main{padding:18px;max-width:680px;margin:0 auto;}
.hero{text-align:center;padding:22px 0 8px;}
.hero .ver{font-size:40px;font-weight:800;letter-spacing:-1px;}
.hero .sub{color:var(--muted);font-size:13px;margin-top:4px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;}
.tile .k{color:var(--muted);font-size:12px;}
.tile .v{font-size:15px;margin-top:6px;word-break:break-all;font-weight:600;}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px;}
.card-title{font-weight:700;margin-bottom:8px;}
.muted{color:var(--muted);font-size:13px;margin:0 0 12px;}
.row{display:flex;gap:10px;flex-wrap:wrap;}
button{background:var(--accent);color:#fff;border:none;border-radius:10px;
  padding:11px 16px;font-size:14px;font-weight:600;cursor:pointer;}
button.ghost{background:transparent;border:1px solid var(--line);color:var(--txt);}
button:disabled{opacity:.45;cursor:not-allowed;}
.log{background:var(--deep);border:1px solid var(--line);border-radius:10px;padding:10px;
  font-size:12px;color:var(--log-txt);max-height:180px;overflow:auto;white-space:pre-wrap;margin:0;}

/* ---- Diagonal "refresh wave" shown when a new bundle is applied ---- */
.update-wave{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:9999;}
.update-wave::before{
  content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;
  background:linear-gradient(135deg,
    transparent 45%,
    rgba(124,77,255,.40) 48.5%,
    rgba(255,255,255,.95) 50%,
    rgba(124,77,255,.40) 51.5%,
    transparent 55%);
  mix-blend-mode:var(--wave-blend);filter:blur(1px);
  transform:translate(42%,42%);
  animation:uaWave 1.9s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes uaWave{
  0%{transform:translate(46%,46%);opacity:0;}
  18%{opacity:1;}
  100%{transform:translate(-74%,-74%);opacity:0;}
}
.update-toast{
  position:fixed;left:50%;top:16px;transform:translateX(-50%) translateY(-12px);
  /* left:50% halves the shrink-to-fit width, so size to content explicitly */
  width:max-content;max-width:calc(100vw - 32px);text-align:center;
  background:var(--toast-bg);border:1px solid var(--accent);color:var(--toast-txt);
  padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;
  z-index:10000;opacity:0;box-shadow:0 6px 24px rgba(124,77,255,.35);
  animation:uaToast 2.4s ease forwards;
}
@keyframes uaToast{
  0%{opacity:0;transform:translateX(-50%) translateY(-12px);}
  15%{opacity:1;transform:translateX(-50%) translateY(0);}
  80%{opacity:1;transform:translateX(-50%) translateY(0);}
  100%{opacity:0;transform:translateX(-50%) translateY(-12px);}
}

/* In-app notification toasts (notify.js): admin broadcasts while the app is
   open. Card-style, stack from the top, tap opens the attached link. */
#notifToasts{
  position:fixed;top:14px;left:16px;right:16px;z-index:10000;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.notif-toast{
  pointer-events:auto;cursor:pointer;width:100%;max-width:440px;
  background:var(--toast-bg);border:1px solid var(--accent);color:var(--toast-txt);
  border-radius:14px;padding:10px 14px;box-shadow:0 6px 24px rgba(124,77,255,.35);
  animation:notifIn .25s ease;
}
.notif-toast b{display:block;font-size:14px;}
.notif-toast span{display:block;font-size:13px;opacity:.85;margin-top:2px;}
@keyframes notifIn{
  0%{opacity:0;transform:translateY(-12px);}
  100%{opacity:1;transform:translateY(0);}
}

/* ==== PWA install banner (browser only, pwa.js) ==== */
.pwa-banner{position:fixed;left:10px;right:10px;z-index:55;  /* above nav (50), under overlays (60+) */
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  display:flex;align-items:center;gap:10px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:10px 4px 10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.18);}
.pwa-banner[hidden]{display:none;}
.pwa-install:disabled{opacity:.6;}
.pwa-ico{width:40px;height:40px;border-radius:10px;flex:0 0 auto;}
.pwa-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;
  font-size:12.5px;color:var(--muted);}
.pwa-txt b{font-size:14px;color:var(--txt);}
.pwa-install{background:var(--accent);color:#fff;border:none;border-radius:999px;
  padding:8px 14px;font-weight:700;font-size:13px;flex:0 0 auto;}
.pwa-share{width:15px;height:15px;vertical-align:-3px;fill:none;
  stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ==== Pointer devices: hover feedback (no-op on touch) ==== */
@media (hover:hover){
  .nav-btn:hover{color:var(--txt);}
  .nav-btn.active:hover{color:var(--accent);}
  .mine-row:hover,.link-row:hover,.chat-row:hover,.search-item:hover,
  .add-card:hover{background:var(--press);}
  .ico-btn:hover{background:var(--press);}
  button:not(.ghost):not(.nav-btn):not(.mine-row):not(.link-row):hover{filter:brightness(1.08);}
  button.ghost:hover{border-color:var(--accent);color:var(--accent);filter:none;}
  .prof-ava:hover{border-color:var(--accent);}
}

/* ==== Small tablets, portrait (600–767px) ====
 * Keep the phone layout (bottom nav) but stop stretching content edge-to-edge:
 * lists and cards cap at a comfortable reading width, the search panel and
 * listing sheet become floating panels like on desktop. */
@media (min-width:600px) and (max-width:767.9px){
  main,.chat-list,.mine-list,#notifList,.doc-body{
    max-width:640px;margin-left:auto;margin-right:auto;}
  .conv-msgs .bubble{max-width:480px;}
  .map-topbar{right:auto;width:440px;}
  .sheet{left:auto;right:16px;bottom:16px;width:440px;border-radius:18px;
    border:1px solid var(--line);}
  .pwa-banner{left:auto;right:16px;width:400px;}
}

/* ==== Tablets (landscape) and desktop ====
 * The same bundle is served publicly (see backend extensions/webclient.py).
 * The bottom nav becomes a left rail; screens, overlays and the conversation
 * shift right of it; the listing sheet docks to the right like a side panel.
 * 768px catches iPads in portrait too — the rail layout suits them better
 * than a stretched phone UI. */
@media (min-width:768px){
  :root{--nav-w:88px;}
  .bottomnav{top:0;bottom:0;right:auto;width:var(--nav-w);height:auto;
    flex-direction:column;justify-content:flex-start;gap:4px;
    padding:16px 0 16px;border-top:none;border-right:1px solid var(--line);}
  .nav-btn{flex:0 0 auto;padding:13px 0 11px;}
  .screen{inset:0 0 0 var(--nav-w);}
  .conv{left:var(--nav-w);}
  .doc-overlay{left:var(--nav-w);}
  .doc-overlay.modal{left:0;}   /* popups center over the whole viewport */
  main{max-width:760px;}
  .doc-body,.mine-list,#notifList{max-width:760px;margin-left:auto;margin-right:auto;}
  .chat-list{max-width:760px;}   /* chats hug the left edge by the nav rail */
  .nav-add:not([hidden]){display:flex;}   /* quick-add lives on the rail */
  .conv-msgs .bubble{max-width:560px;}
  /* Map chrome: search panel to the left, listing sheet docked right. */
  .map-topbar{right:auto;width:440px;}
  .sheet{left:auto;right:16px;bottom:16px;width:440px;border-radius:18px;
    border:1px solid var(--line);}
  .fab{right:24px;bottom:24px;}
  .map-status{bottom:26px;}
}

/* Уведомления: всё прижато к левому краю (десктоп центрировал колонку). */
#notifList,#notifPermBanner{margin-left:0;margin-right:auto;text-align:left;}
.req{color:var(--bad);font-weight:700;}

/* Готовность объявления — маленький светящийся бейдж рядом с типом. */
.ready-badge{display:inline-flex;align-items:center;gap:6px;margin-left:8px;
  padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
  border:1px solid currentColor;vertical-align:middle;}
.ready-badge[hidden]{display:none;}
.ready-badge::before{content:"";width:7px;height:7px;border-radius:50%;
  background:currentColor;}
.ready-badge.now{color:var(--good);
  animation:readyGlow 2.2s ease-in-out infinite;}
.ready-badge.later{color:var(--star);
  box-shadow:0 0 7px -1px currentColor;}
@keyframes readyGlow{
  0%,100%{box-shadow:0 0 4px -1px currentColor;}
  50%{box-shadow:0 0 13px 1px currentColor;}
}
@media (prefers-reduced-motion:reduce){
  .ready-badge.now{animation:none;box-shadow:0 0 8px -1px currentColor;}
}

/* Номер объявления и бейдж готовности в подсказках поиска. */
/* Номер объявления — такой же пилюлей, как тип и готовность. */
.listing-no{display:inline-block;font-size:11px;font-weight:700;
  border-radius:999px;border:1px solid var(--line);color:var(--muted);
  padding:3px 10px;margin-left:6px;vertical-align:middle;letter-spacing:.2px;}
.sug-ready{font-style:normal;font-size:10px;padding:2px 7px;margin-left:2px;}
.sheet-meta{font-size:12px;margin:10px 0 12px;}

/* Груз: «Откуда» и «Куда» отдельными строками с метками. */
.addr-row{display:flex;align-items:flex-start;gap:8px;margin-top:4px;}
.addr-tag{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;padding:2px 7px;border-radius:999px;
  border:1px solid currentColor;margin-top:1px;}
.addr-tag.from{color:var(--k-transport-txt);}
.addr-tag.to{color:var(--k-cargo-txt);}
/* Адрес рядом с меткой — основным цветом: контейнер .muted гасил его. */
.addr-row > span:not(.addr-tag){color:var(--txt);}

/* Профиль: роль мелким текстом, реквизиты юрлица/ИП под именем. */
.prof-role{font-size:12px;margin-top:1px;}
.prof-org{font-size:12.5px;margin-top:3px;color:var(--txt);}
.prof-org[hidden]{display:none;}

/* «Мои объявления» и «Уведомления» — карточками, а не строками списка. */
.card-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin:10px 12px;box-shadow:0 1px 3px var(--shadow);}
.mine-list .card-item{display:flex;align-items:flex-start;gap:12px;}
.card-item.k-cargo{border-left:3px solid #5b8cff;}
.card-item.k-transport{border-left:3px solid #9d6bff;}
.card-item.k-machinery{border-left:3px solid #ff8a3d;}
.mi-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px;}
.mi-head .listing-no{margin-left:0;}
.mi-title{font-weight:700;font-size:15px;line-height:1.25;}
.mi-price{font-size:14px;font-weight:600;color:var(--accent);margin-top:3px;}
.mi-addr{font-size:12.5px;margin-top:3px;}
.mi-meta{font-size:11.5px;margin-top:5px;}
.mi-arch{font-size:10.5px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;}
.mine-list .mi-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;}
/* #notifList тоже .mine-list, а `.mine-list .card-item` — display:flex.
   Без display:block заголовок и текст встают в РЯД, и тексту достаётся
   колонка шириной в пару букв. Селектор той же специфичности, ниже. */
.notif-item.card-item{display:block;border-bottom:none;padding:12px 14px;}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto;}

/* «Мои объявления»: список карточек прижат к левому краю (на десктопе
   колонка центрировалась), заголовок переносится по строкам. */
.mine-list{margin-left:0;margin-right:auto;text-align:left;}
.mine-list .card-item .mi-title{white-space:normal;overflow:visible;
  text-overflow:clip;}

/* Полноэкранные списки (Мои объявления, Уведомления, Настройки…) больше не
   перекрывают нижнее меню: иначе из них нельзя перейти на другой раздел без
   перезагрузки. Модальные попапы по-прежнему накрывают всё. */
.bottomnav{z-index:80;}
.doc-overlay.modal{z-index:90;}
@media (max-width:767.9px){
  #mineOverlay,#notifOverlay,#prefsOverlay,#settingsOverlay,#reviewsOverlay,
  #paidOverlay,#actAsOverlay,.conv{
    bottom:var(--nav-h);}
}
.ready-badge.arch{color:var(--muted);box-shadow:none;}
.mine-list .mi-actions button.warn{color:var(--bad);border-color:var(--bad);}

/* Платные услуги */
/* Карточка платной услуги: вертикальная, во всю ширину. Селектор с той же
   специфичностью, что и `.mine-list .card-item{display:flex}`, иначе строка
   разъезжается в ряд и на телефоне всё сжимается. */
.mine-list .card-item.paid-item{display:block;padding:14px 16px;}
.paid-item .mi-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:2px;}
.paid-item .mi-title{font-size:15.5px;font-weight:700;line-height:1.3;
  white-space:normal;}
.paid-item .paid-desc{font-size:13px;line-height:1.4;margin:6px 0 10px;
  color:var(--muted);}
.paid-price{font-size:20px;font-weight:800;color:var(--accent);line-height:1.2;}
.paid-price span{font-size:13px;font-weight:600;color:var(--muted);}
.paid-until{font-size:12px;color:var(--muted);margin-top:4px;}
.paid-item .msg-btn{width:100%;margin-top:12px;}
.paid-item .msg-btn:disabled{opacity:.5;}

/* Номер объявления и дата/просмотры — строкой над кнопками, слева. */
.sheet-foot{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  margin:10px 0 12px;text-align:left;}
.sheet-foot .listing-no{margin-left:0;}
.sheet-foot .sheet-meta{margin:0;line-height:1.5;}

/* Профиль намеренно одноцветный: значки и счётчики разделов — акцентный
   фиолетовый, как счётчик «Архив объявлений». Цвета видов живут на карте,
   в фильтре и в карточках объявлений. */
/* Карточки «Мои объявления» уже красятся левой полосой — берём тот же --k. */
.card-item.k-cargo,.card-item.k-transport,.card-item.k-machinery{border-left:3px solid var(--k);}

/* Режим работы от имени виртуального пользователя (для админа). */
.actas-bar{position:fixed;left:0;right:0;top:0;z-index:95;display:flex;
  align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--star);color:#1b1f2a;font-size:12.5px;font-weight:700;
  padding:6px 12px;}
.actas-bar[hidden]{display:none;}
.actas-bar button{background:rgba(0,0,0,.18);color:inherit;border:none;
  border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700;}
body.acting .map-topbar{top:var(--acting-h,38px);}
.actas-item{display:flex;align-items:center;gap:12px;}
.actas-item .owner-ava{width:40px;height:40px;font-size:15px;}
.actas-name{font-weight:700;font-size:14.5px;}
.mine-row .mr-badge.muted-badge{background:var(--line);color:var(--muted);}
.actas-search{padding:10px 0 4px;}
.actas-search input{width:100%;background:var(--field);border:1px solid var(--line);
  color:var(--txt);border-radius:10px;padding:10px 12px;font-size:14px;}
/* Список внутри попапа: прокручивается сам, попап остаётся на месте. */
.actas-list{max-height:52vh;overflow-y:auto;margin:4px -4px 0;padding:0 4px;}
.actas-list .card-item{margin:8px 0;cursor:pointer;}
.actas-list .card-item:hover{border-color:var(--accent);}
.actas-list .card-item:active{background:var(--press);}
.modal-head .spacer{flex:1;}
.icon-btn.add{font-size:20px;color:var(--accent);padding:0 8px;line-height:1;}
#virtOverlay .modal-card{max-height:88vh;overflow-y:auto;}

/* Своё подтверждение (UAConfirm) — без системной подписи WebView. */
.ua-confirm .modal-card{max-width:340px;}
.uc-msg{font-size:15px;line-height:1.4;margin:2px 0 16px;color:var(--txt);}
.uc-actions{display:flex;gap:10px;}
.uc-actions button{flex:1;border:none;border-radius:12px;padding:12px 14px;
  font-size:14px;font-weight:700;background:var(--accent);color:#fff;}
.uc-actions button.ghost{background:var(--field);color:var(--txt);
  border:1px solid var(--line);}
.uc-actions button.danger{background:var(--bad);}
.owner-org{font-size:13px;color:var(--txt);margin-top:2px;}
.owner-ok{font-size:12px;color:var(--good);margin-top:2px;font-weight:600;}

/* Реквизиты организации из реестра — как в старом приложении. */
.org-rows{margin-top:10px;}
.org-row{padding:8px 0;border-bottom:1px solid var(--line);}
.org-row:last-child{border-bottom:none;}
.org-k{font-size:11.5px;font-weight:700;color:var(--accent);letter-spacing:.2px;}
.org-v{font-size:14px;color:var(--txt);margin-top:2px;word-break:break-word;}
.f-hint{display:block;font-size:11px;color:var(--muted);margin-top:4px;}
.f-label input[readonly]{opacity:.75;}

/* Поиск фильтрует карту: вместо списка объявлений — счётчик найденного. */
.search-found{padding:0 10px 7px;font-size:12px;font-weight:600;color:var(--accent);}
.search-found.empty{color:var(--muted);font-weight:500;}
.search-found[hidden]{display:none;}
.sub-tag{margin-left:8px;font-size:10.5px;font-weight:700;color:var(--accent);
  border:1px solid var(--accent);border-radius:999px;padding:1px 8px;
  vertical-align:middle;}

/* Групповая панель уведомлений: строка управления под карточками. */
.notif-bar{pointer-events:auto;display:flex;gap:8px;width:100%;max-width:440px;
  justify-content:space-between;}
.notif-bar button{flex:1;background:var(--toast-bg);color:var(--toast-txt);
  border:1px solid var(--accent);border-radius:999px;padding:7px 12px;
  font-size:12px;font-weight:700;}
.notif-bar button.close-all{flex:0 0 auto;background:transparent;
  border-color:var(--line);color:var(--muted);}
#notifToasts{max-height:70vh;overflow-y:auto;}