/* 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:#6a3fe0; --k-transport-txt:#128a5a; --k-machinery-txt:#a86e00;
  --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:#b39dff; --k-transport-txt:#7fe6b8; --k-machinery-txt:#ffd07a;
    --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:#b39dff; --k-transport-txt:#7fe6b8; --k-machinery-txt:#ffd07a;
  --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;}

*{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);}

/* ---- 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(--panel);border:1px solid var(--line);color:var(--txt);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px var(--shadow);padding:0;}
.fab svg{width:24px;height:24px;}
.fab:active{background:var(--accent);color:#fff;}
.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);}

/* ---- Kind filter chips (inside the search dropdown) ---- */
.chips-inline{display:flex;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);}
.chip{border:1px solid var(--line);background:var(--field);color:var(--txt);
  border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;}
.chip.k-cargo{border-color:#7C4DFF;}
.chip.k-transport{border-color:#3ecf8e;}
.chip.k-machinery{border-color:#ffb020;}
.chip.off{opacity:.4;border-color:var(--line);}

/* ---- 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-kind.k-cargo{color:var(--k-cargo-txt);border-color:#7C4DFF;}
.sug-kind.k-transport{color:var(--k-transport-txt);border-color:#3ecf8e;}
.sug-kind.k-machinery{color:var(--k-machinery-txt);border-color:#ffb020;}
.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-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-kind.k-cargo{color:var(--k-cargo-txt);border-color:#7C4DFF;}
.sheet-kind.k-transport{color:var(--k-transport-txt);border-color:#3ecf8e;}
.sheet-kind.k-machinery{color:var(--k-machinery-txt);border-color:#ffb020;}
.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;}
.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;}

/* ---- 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;}
.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-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-title{flex:1;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:12px 12px;display:flex;flex-direction:column;
  gap:6px;background-color:var(--chat-bg);
  background-image:var(--doodle);}
.bubble{max-width:82%;background:var(--bubble);border-radius:12px 12px 12px 4px;
  padding:7px 10px 5px;font-size:15px;line-height:1.35;align-self:flex-start;
  word-break:break-word;box-shadow:0 1px 2px var(--shadow);}
.bubble.mine{background:var(--bubble-mine);border-radius:12px 12px 4px 12px;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;}
.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:8px 8px
  calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--panel);}
.conv-bar .ico-btn.attach{color:var(--muted);padding:9px 6px;}
.conv-bar textarea{flex:1;background:var(--field);border:1px solid var(--line);color:var(--txt);
  border-radius:20px;padding:10px 14px;font-size:15px;resize:none;max-height:110px;}
.conv-send{background:var(--accent);border:none;border-radius:50%;width:44px;height:44px;
  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:baseline;gap:10px;}
.notif-title{font-weight:600;font-size:14px;flex:1;min-width:0;}
.notif-time{font-size:12px;flex-shrink:0;}
.notif-body{margin-top:4px;font-size:14px;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;}
.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);}
.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;}
#scanVideo{width:100%;min-height:120px;max-height:340px;border-radius:12px;
  background:#000;margin:12px 0;object-fit:cover;}

/* ---- 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 .mr-badge.muted-badge{background:var(--line);color:var(--muted);}
.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;}
.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);}
}

/* ==== 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);}
  .fab:hover{border-color:var(--accent);}
}

/* ==== Desktop / large screens ====
 * 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. */
@media (min-width:900px){
  :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;}
}