/* =========================================================
   СӘФӘР — дизайн-система v3
   Ориентир: современные мессенджеры (Telegram / VK / MAX / WhatsApp) —
   чистые карточки, мягкие тени, пилюльные кнопки, аккуратная типографика.
   Палитра — из фирменного логотипа и фона (тёплый кремовый + глубокий
   лесной зелёный + пчелиный золотой + терракотовые горы). Пчелиные соты
   фоном — Башкортостан исторически славится бортевым мёдом.
   ========================================================= */

:root{
  --accent:#1B5E3A;         /* глубокий лесной зелёный — как в эмблеме и на гербе */
  --accent-dark:#0F3D26;
  --accent-soft:#E8F0E1;
  --green:#2FA360;          /* статусный зелёный (готово/забронировано) — отдельно от --accent */
  --green-dark:#20824B;
  --amber:#D9A441;          /* пчелиный золотой — из сот на логотипе */
  --amber-dark:#B37F27;
  --terracotta:#C1592E;     /* терракота — из горы на логотипе, для значка "Попутка" */
  --terracotta-dark:#8F3F1F;
  --slate:#4C6B8A;          /* грифельно-синий — для значка "Грузоперевозки", не пересекается с остальными */
  --slate-dark:#324A63;
  --red:#E5473B;
  --red-dark:#C63A2F;

  --bg:#F7F1E1;
  --card:#FFFDF6;
  --text:#2B2620;
  --text-2:#6B6255;
  --text-3:#9C9284;
  --border:#EAE1CB;
  --shadow-1:0 1px 2px rgba(60,45,20,.06), 0 6px 16px rgba(60,45,20,.07);
  --shadow-2:0 10px 30px rgba(60,45,20,.14);

  --r-xl:22px;
  --r-lg:18px;
  --r-md:14px;
  --r-sm:10px;
  --r-pill:999px;

  /* Соты — фирменная форма (герб, фон, теперь и аватарки/иконки/кнопка SOS).
     Именно скруглённый шестигранник (не острые углы) — так он выглядит мягче
     и современнее, ближе к живому мёдовому сотовому рисунку, а не к строгому
     геометрическому многоугольнику. Через mask-image (не clip-path), потому
     что маска нормально масштабируется в процентах на элементах любого
     размера — от 32px аватарок до 64px кнопки SOS — одним и тем же значением. */
  --hex-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M37.48%206.26%20L37.48%206.26%20Q50.00%200.00%2062.52%206.26%20L87.48%2018.74%20Q100.00%2025.00%20100.00%2039.00%20L100.00%2061.00%20Q100.00%2075.00%2087.48%2081.26%20L62.52%2093.74%20Q50.00%20100.00%2037.48%2093.74%20L12.52%2081.26%20Q0.00%2075.00%200.00%2061.00%20L0.00%2039.00%20Q0.00%2025.00%2012.52%2018.74%20Z'%20fill='white'/%3E%3C/svg%3E");

  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);overscroll-behavior-y:none;}
/* overflow-x живёт на body (а не на #app), иначе #app превращается в свой
   собственный контейнер прокрутки и "прилипающая" шапка перестаёт прилипать
   к экрану — это известная особенность CSS (overflow-x:hidden неявно
   переводит overflow-y во 'auto' на том элементе, где он задан). */
body{-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;}
/* Фирменное фото (рассвет над горами Башкортостана + соты) — теперь настоящий
   фон всего приложения (то же самое фото, что на экране входа), а не только
   экрана входа: закреплено к вьюпорту (position:fixed на псевдоэлементе body,
   а не background-attachment на #app — так мы не трогаем уже отлаженную
   "прилипающую" шапку). Раньше здесь была геометрическая заливка
   диагональными градиентами ("под соты") — на деле она читалась как узор
   кубиков, а не как фото, и почти не была видна на телефоне из-за плотного
   кремового оверлея. Теперь оверлей лёгкий — фото видно так же ярко, как на
   экране входа, а не только как еле заметная подложка. */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(247,241,225,.38) 0%, rgba(247,241,225,.3) 35%, rgba(247,241,225,.42) 70%, rgba(247,241,225,.58) 100%),
    url('bg-hero.jpg') center top/cover no-repeat;
}
#app{
  max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1;
  background:transparent;
  box-shadow:0 0 60px rgba(0,0,0,.08);
}

h1,h2,h3{letter-spacing:-0.02em;}
b,strong{font-weight:700;}

/* ---------- Пчелиные соты (фирменный узор фона) ---------- */
.honeycomb{
  background-color:transparent;
  background-image:
    linear-gradient(30deg,   rgba(255,255,255,.09) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.09) 87.5%, rgba(255,255,255,.09)),
    linear-gradient(150deg,  rgba(255,255,255,.09) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.09) 87.5%, rgba(255,255,255,.09)),
    linear-gradient(30deg,   rgba(255,255,255,.09) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.09) 87.5%, rgba(255,255,255,.09)),
    linear-gradient(150deg,  rgba(255,255,255,.09) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.09) 87.5%, rgba(255,255,255,.09)),
    linear-gradient(60deg,   rgba(255,255,255,.06) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,.06) 75%, rgba(255,255,255,.06)),
    linear-gradient(60deg,   rgba(255,255,255,.06) 25%, transparent 25.5%, transparent 75%, rgba(255,255,255,.06) 75%, rgba(255,255,255,.06));
  background-size:44px 76px;
  background-position:0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
}
.honeycomb-light{
  background-image:
    linear-gradient(30deg,  rgba(201,148,60,.09) 12%, transparent 12.5%, transparent 87%, rgba(201,148,60,.09) 87.5%, rgba(201,148,60,.09)),
    linear-gradient(150deg, rgba(201,148,60,.09) 12%, transparent 12.5%, transparent 87%, rgba(201,148,60,.09) 87.5%, rgba(201,148,60,.09)),
    linear-gradient(30deg,  rgba(201,148,60,.09) 12%, transparent 12.5%, transparent 87%, rgba(201,148,60,.09) 87.5%, rgba(201,148,60,.09)),
    linear-gradient(150deg, rgba(201,148,60,.09) 12%, transparent 12.5%, transparent 87%, rgba(201,148,60,.09) 87.5%, rgba(201,148,60,.09)),
    linear-gradient(60deg,  rgba(201,148,60,.06) 25%, transparent 25.5%, transparent 75%, rgba(201,148,60,.06) 75%, rgba(201,148,60,.06)),
    linear-gradient(60deg,  rgba(201,148,60,.06) 25%, transparent 25.5%, transparent 75%, rgba(201,148,60,.06) 75%, rgba(201,148,60,.06));
  background-size:44px 76px;
  background-position:0 0, 0 0, 22px 38px, 22px 38px, 0 0, 22px 38px;
  background-color:var(--bg);
}

/* ---------- Единая «прилипающая» шапка: топ-бар + плашка района ---------- */
.app-header{
  position:sticky;top:0;z-index:40;
  background:rgba(247,241,225,.97);
  padding-bottom:12px;
  box-shadow:0 8px 16px -6px rgba(60,45,20,.14);
}

/* ---------- Топ-бар ---------- */
.topbar{
  background:linear-gradient(135deg,var(--accent) 0%,var(--accent) 45%,var(--accent-dark) 100%);
  color:#fff;padding:16px 16px 22px;display:flex;align-items:center;justify-content:space-between;
  position:relative;
  overflow:hidden;
  border-radius:0 0 26px 26px;
  box-shadow:0 14px 28px -10px rgba(15,61,38,.45);
}
/* Мягкий световой блик сверху-слева — придаёт шапке глубину и "стеклянность",
   как на эскизе (лёгкий отблеск рассвета поверх зелёного). */
.topbar::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 8% -20%, rgba(255,255,255,.22) 0%, transparent 55%),
             radial-gradient(80% 60% at 100% 120%, rgba(217,164,65,.18) 0%, transparent 60%);
}
/* Настоящая сотовая сетка (шестигранники-контуры), как на присланном эскизе
   шапки — раньше здесь была имитация через диагональные градиенты, которая
   на деле читалась как узор кубиков, а не сот. */
.topbar::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2042%2024.249'%3E%3Cg%20fill='none'%20stroke='white'%20stroke-opacity='0.4'%20stroke-width='1.1'%3E%3Cpolygon%20points='14,0%207,12.124%20-7,12.124%20-14,0%20-7,-12.124%207,-12.124'/%3E%3Cpolygon%20points='35,12.124%2028,24.249%2014,24.249%207,12.124%2014,0%2028,0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:52px 30px;
  opacity:.85;
}
.topbar > *{position:relative;z-index:1;}
.topbar .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;}
.brand .logo{
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.96);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:16px;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.brand .logo img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px);object-fit:contain;}
.lang-switch{display:flex;background:rgba(255,255,255,.16);border-radius:var(--r-pill);padding:3px;gap:2px;backdrop-filter:blur(4px);}
.lang-switch button{
  border:none;background:transparent;color:rgba(255,255,255,.85);padding:6px 12px;border-radius:var(--r-pill);font-size:12px;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.lang-switch button.active{background:#fff;color:var(--accent-dark);}

.district-pill{
  margin:-8px 16px 0 16px;background:var(--card);border-radius:var(--r-lg);padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-1);
  font-size:14px;
}
.district-pill b{color:var(--text);font-weight:700;}
.district-pill span.change{color:var(--accent);font-weight:700;font-size:13px;cursor:pointer;padding:4px 6px;border-radius:8px;transition:background .15s;}
.district-pill span.change:active{background:var(--accent-soft);}

/* ---------- Экран/секции ---------- */
.screen{flex:1;padding:14px 16px 96px 16px;display:none;animation:fadeIn .22s ease;}
.screen.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

.section-title{font-size:15px;font-weight:800;margin:18px 0 10px;color:var(--text);}

/* ---------- Онбординг ---------- */
/* Фон — фирменное фото (рассвет над горами Башкортостана + пчелиные соты),
   затемнено тёплым зелёным градиентом сверху вниз для читаемости текста
   в любой части экрана (фото само по себе от светлого неба к тёмным горам). */
.onboard{
  display:flex;flex-direction:column;min-height:100vh;justify-content:center;align-items:center;padding:28px;text-align:center;
  background:
    linear-gradient(180deg, rgba(18,46,29,.32) 0%, rgba(14,36,23,.5) 45%, rgba(10,26,17,.78) 100%),
    url('bg-hero.jpg') center/cover no-repeat;
  color:#fff;position:relative;overflow:hidden;
}
.onboard > *{position:relative;z-index:1;}
.onboard .logo-big{
  width:112px;height:112px;margin-bottom:22px;position:relative;
}
/* Запасной вариант (буква "С") — виден, только если logo.png не загрузился
   (onerror убирает <img> из DOM, и тогда фон-кружок с буквой становится виден). */
#brand-logo-big-fallback{
  width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.98);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;
  position:absolute;inset:0;box-shadow:0 14px 34px rgba(0,0,0,.22);
}
#brand-logo-big-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.onboard h1{margin:0 0 6px;font-size:30px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.25);}
.onboard p.slogan{margin:0 0 30px;opacity:.95;font-size:15px;text-shadow:0 1px 8px rgba(0,0,0,.25);}
.onboard .lang-options{display:flex;gap:10px;width:100%;max-width:320px;}
.onboard .lang-options button{
  flex:1;padding:15px 8px;border-radius:var(--r-md);border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.10);
  color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s ease;backdrop-filter:blur(6px);
}
.onboard .lang-options button.selected{background:#fff;color:var(--accent-dark);border-color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.18);}

/* ---------- Уведомление Азана (полноэкранное, поверх всего приложения) ---------- */
.azan-overlay{
  position:fixed;inset:0;z-index:500;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:28px;text-align:center;cursor:pointer;
  background:
    linear-gradient(180deg, rgba(18,46,29,.4) 0%, rgba(14,36,23,.6) 45%, rgba(10,26,17,.85) 100%),
    url('bg-hero.jpg') center/cover no-repeat;
  color:#fff;
  animation:overlayIn .25s ease;
}
.azan-overlay.active{display:flex;}
.azan-overlay-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
.azan-overlay .logo-big.azan-logo{width:88px;height:88px;margin-bottom:18px;opacity:.92;position:relative;}
.azan-logo-fallback{
  width:100%;height:100%;border-radius:50%;background:rgba(255,255,255,.98);color:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;
  position:absolute;inset:0;box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.azan-logo-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.35));
}
.azan-pulse-icon{font-size:52px;margin-bottom:10px;animation:azanPulse 1.6s ease-in-out infinite;}
@keyframes azanPulse{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.12);opacity:1;}}
.azan-prayer-name{font-size:26px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.3);margin-bottom:6px;}
.azan-label{font-size:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.9;margin-bottom:26px;}
.azan-hint{font-size:13.5px;opacity:.75;margin-top:38px;white-space:nowrap;}
.onboard .cta{
  margin-top:30px;background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#3A2400;border:none;
  padding:15px 38px;border-radius:var(--r-pill);font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 10px 24px rgba(217,138,15,.4);transition:transform .12s ease;
}
.onboard .cta:active{transform:scale(.96);}

.picker-list{list-style:none;margin:0;padding:0;}
.picker-list li{
  background:rgba(255,255,255,.13);margin-bottom:9px;padding:14px 16px;border-radius:var(--r-md);text-align:left;cursor:pointer;font-size:15px;
  transition:background .12s ease,transform .12s ease;border:1px solid rgba(255,255,255,.08);
}
.picker-list li:active{background:rgba(255,255,255,.3);transform:scale(.985);}
.search-box{width:100%;max-width:340px;padding:13px 16px;border-radius:var(--r-md);border:none;margin-bottom:14px;font-size:15px;box-shadow:var(--shadow-1);}
.onboard-panel{width:100%;max-width:340px;max-height:58vh;overflow-y:auto;text-align:left;}

/* ---------- Фильтры ---------- */
.filters{display:flex;gap:8px;margin-bottom:10px;}
.filters select, .filters input{
  flex:1;padding:11px 12px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--card);font-size:13.5px;color:var(--text);
  box-shadow:var(--shadow-1);appearance:none;
}
.filters .place-input-wrap{flex:1;position:relative;}
.filters .place-input-wrap input{width:100%;box-sizing:border-box;}

/* ---------- Поиск села/деревни/города ("откуда"/"куда") ----------
   Раньше это были select-списки только из райцентров — теперь текстовое поле
   с живыми подсказками по всем сёлам, деревням и городам республики (см.
   attachPlaceAutocomplete в app.js). */
.place-input-wrap{position:relative;}
.place-suggest-list{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);
  box-shadow:var(--shadow-2);max-height:240px;overflow-y:auto;z-index:60;
}
.place-suggest-list.open{display:block;}
.place-suggest-item{padding:10px 14px;display:flex;flex-direction:column;gap:1px;cursor:pointer;border-bottom:1px solid var(--border);}
.place-suggest-item:last-child{border-bottom:none;}
.place-suggest-item:active{background:rgba(107,98,85,.14);}
.place-suggest-name{font-size:14px;font-weight:700;color:var(--text);}
.place-suggest-sub{font-size:11.5px;color:var(--text-3);}

/* ---------- Карточки поездок ---------- */
.ride-card{
  background:var(--card);border-radius:20px;padding:16px;margin-bottom:12px;box-shadow:var(--shadow-1),0 1px 0 rgba(255,255,255,.6) inset;
  border:1px solid var(--border);border-left:4px solid var(--border);transition:transform .12s ease,box-shadow .12s ease;
}
/* Цветная полоса слева — сразу видно тип поездки, даже не читая бейдж */
.ride-card.taxi{border-left-color:var(--accent);}
.ride-card.poputka{border-left-color:var(--terracotta);}
.ride-card.bus{border-left-color:var(--amber);}
.ride-card.cargo{border-left-color:var(--slate);}
.ride-card:active{transform:scale(.99);}
.ride-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;gap:8px;}
.route-line{font-weight:800;font-size:16.5px;letter-spacing:-0.01em;display:flex;align-items:center;gap:6px;}
.route-pin{width:16px;height:16px;flex-shrink:0;color:var(--accent);}
.badge{font-size:11px;font-weight:800;padding:5px 11px;border-radius:var(--r-pill);color:#fff;white-space:nowrap;letter-spacing:.01em;box-shadow:0 3px 8px rgba(0,0,0,.12);}
.badge.taxi{background:linear-gradient(135deg,var(--accent),var(--accent-dark));}
.badge.poputka{background:linear-gradient(135deg,var(--terracotta),var(--terracotta-dark));}
.badge.bus{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#3A2400;}
.badge.cargo{background:linear-gradient(135deg,var(--slate),var(--slate-dark));}
.ride-meta{font-size:13.5px;color:var(--text-2);margin:3px 0;}
.cargo-desc-line{background:#EEF2F6;border-radius:var(--r-sm);padding:7px 10px;margin-top:6px;color:var(--text);}
.progress-wrap{background:#EFE6D2;border-radius:var(--r-pill);height:8px;margin:10px 0 5px;overflow:hidden;}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--green),var(--green-dark));border-radius:var(--r-pill);transition:width .3s ease;}
.ride-actions{display:flex;gap:8px;margin-top:12px;}
.price-note{font-size:12px;color:var(--text-3);font-style:italic;margin-top:8px;}

/* ---------- Кнопки ---------- */
.btn{border:none;border-radius:var(--r-md);padding:12px 16px;font-size:14.5px;font-weight:700;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,opacity .12s ease;}
.btn:active{transform:scale(.96);}
.btn:disabled{opacity:.45;pointer-events:none;}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;flex:1;box-shadow:0 6px 16px rgba(15,61,38,.28);}
.btn-secondary{background:#F0E9D8;color:var(--text);flex:1;}
.btn-secondary:active{background:#E4DBC2;}
.btn-amber{background:linear-gradient(135deg,var(--amber),var(--amber-dark));color:#3A2400;}

/* ---------- Нижняя навигация ---------- */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--border);display:flex;z-index:30;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 18px rgba(60,45,20,.06);
}
.bottom-nav button{
  flex:1;background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 2px;color:var(--text-3);font-size:11px;font-weight:600;cursor:pointer;transition:color .15s ease;
}
.bottom-nav button .icon{
  font-size:17px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  -webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  border:2px solid rgba(27,94,58,.32);background:transparent;
  transition:background .15s ease,transform .15s ease,border-color .15s ease,filter .15s ease;
}
.bottom-nav button .icon svg{width:18px;height:18px;flex-shrink:0;}
.bottom-nav button.active{color:var(--accent-dark);}
.bottom-nav button.active .icon{
  background:linear-gradient(135deg,var(--amber),var(--amber-dark));border-color:transparent;color:#fff;
  transform:translateY(-1px);filter:drop-shadow(0 4px 10px rgba(179,127,39,.45));
}

/* ---------- Формы ---------- */
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--text-2);text-transform:uppercase;letter-spacing:.03em;}
.form-group input, .form-group select, .form-group textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-md);border:1.5px solid var(--border);font-size:15px;background:var(--card);
  color:var(--text);transition:border-color .15s ease;font-family:inherit;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{outline:none;border-color:var(--accent);}
.type-toggle{display:flex;gap:8px;margin-bottom:18px;background:var(--card);padding:5px;border-radius:var(--r-md);box-shadow:var(--shadow-1);}
.type-toggle button{flex:1;padding:11px 6px;border-radius:11px;border:none;background:transparent;color:var(--text-2);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s ease;}
.type-toggle button.active{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 4px 12px rgba(15,61,38,.3);}

/* ---------- Чат ---------- */
.chat-header{display:flex;align-items:center;gap:10px;padding:4px 0 14px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.chat-header b{font-size:16px;}
.chat-messages{display:flex;flex-direction:column;gap:9px;min-height:200px;}
/* Каждое сообщение — строка [пузырь + маленькая "⋮"], "⋮" всегда с той
   стороны, что ближе к центру экрана (у своих сообщений — слева от
   пузыря, у чужих — справа), как в обычных мессенджерах. */
.msg-line{display:flex;align-items:center;gap:2px;max-width:84%;}
.msg-line.me{align-self:flex-end;flex-direction:row-reverse;}
.msg-line.them{align-self:flex-start;}
.msg-stack{display:flex;flex-direction:column;gap:3px;min-width:0;}
.msg-line.me .msg-stack{align-items:flex-end;}
.msg-line.them .msg-stack{align-items:flex-start;}
.msg-dots{
  flex-shrink:0;font-size:19px;line-height:1;opacity:1;padding:7px 7px;cursor:pointer;color:var(--text-2);
  background:rgba(107,98,85,.12);border-radius:50%;width:30px;height:30px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
}
.msg-dots:active{background:rgba(107,98,85,.25);color:var(--text);}
.msg{max-width:100%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.4;}
.msg.them{background:#F0E9D8;color:var(--text);border-bottom-left-radius:5px;}
.msg.me{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-bottom-right-radius:5px;}
.msg-phone{padding:0;background:transparent;}
.msg-phone a{display:flex;align-items:center;gap:7px;padding:10px 16px;border-radius:var(--r-pill);background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-weight:800;font-size:14.5px;text-decoration:none;box-shadow:0 4px 12px rgba(15,61,38,.25);}
.msg-forwarded-label{font-size:11px;opacity:.65;padding:0 3px;font-style:italic;}
.msg-reply-quote{
  display:block;border-left:3px solid currentColor;opacity:.9;padding:3px 8px;margin-bottom:5px;border-radius:5px;
  background:rgba(0,0,0,.12);font-size:12px;line-height:1.3;
}
.msg.me .msg-reply-quote{background:rgba(255,255,255,.18);}
.msg-reply-quote b{display:block;font-size:11.5px;}
.msg-reply-quote-standalone{color:var(--text-2);background:rgba(0,0,0,.06);max-width:220px;}
.chat-input{display:flex;gap:8px;position:sticky;bottom:0;background:#fff;padding-top:10px;}
.chat-input input{flex:1;padding:12px 16px;border-radius:var(--r-pill);border:1.5px solid var(--border);font-size:14.5px;}
.chat-input input:focus{outline:none;border-color:var(--accent);}
.chat-input button{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border:none;border-radius:var(--r-pill);width:44px;height:44px;font-weight:700;cursor:pointer;flex-shrink:0;box-shadow:0 4px 12px rgba(15,61,38,.3);}
.chat-input button:active{transform:scale(.92);}

/* Полоска "Ответ на..." над полем ввода */
.chat-reply-bar{display:none;align-items:center;gap:8px;background:var(--bg);border-radius:12px;padding:8px 10px;margin-bottom:8px;}
.chat-reply-bar.active{display:flex;}
.chat-reply-bar-line{width:3px;align-self:stretch;border-radius:2px;background:var(--accent);flex-shrink:0;}
.chat-reply-bar-text{flex:1;min-width:0;display:flex;flex-direction:column;}
.chat-reply-bar-text b{font-size:12.5px;color:var(--accent-dark);}
.chat-reply-bar-text span{font-size:12.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-reply-bar-cancel{flex-shrink:0;cursor:pointer;color:var(--text-3);padding:4px;font-size:15px;}

/* Меню сообщения (ответить/переслать/удалить) — нижний лист */
.msg-actions-sheet{padding-top:8px;}
.chat-action-item{display:flex;align-items:center;gap:10px;padding:14px 8px;font-size:15px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--border);}
.chat-action-item:last-child{border-bottom:none;}
.chat-action-item:active{background:var(--bg);}
.chat-action-danger{color:#e5473b;}
.chat-action-cancel{color:var(--text-2);justify-content:center;}

/* Список чатов для пересылки */
.forward-picker-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 8px;border-bottom:1px solid var(--border);cursor:pointer;}
.forward-picker-item:last-child{border-bottom:none;}
.forward-picker-item:active{background:var(--bg);}
.forward-picker-go{color:var(--accent);font-size:16px;flex-shrink:0;}

/* ---------- Район / SOS ---------- */
/* Экран "Мой район/Республика" — поле ввода закреплено внизу, над нижней
   навигацией, как в мессенджерах (Telegram/MAX/WhatsApp), а не сверху ленты. */
#screen-district{padding-bottom:calc(var(--nav-h, 64px) + 94px);}
.board-post{background:var(--card);border-radius:var(--r-md);padding:13px 15px;margin-bottom:10px;border:1px solid var(--border);border-left:4px solid var(--terracotta);box-shadow:var(--shadow-1);}
.board-post .post-head{display:flex;align-items:center;gap:9px;margin-bottom:1px;}
.board-post .time{font-size:11px;color:var(--text-3);margin-left:auto;flex-shrink:0;white-space:nowrap;}
.board-post .post-meta{min-width:0;}
.board-post .author{font-weight:800;font-size:13px;color:var(--accent-dark);}
.board-post .from{font-size:11.5px;color:var(--text-3);font-weight:600;margin-left:4px;}
.board-post .text{font-size:14px;margin-top:6px;line-height:1.4;}

.board-input{
  /* Раньше здесь была фиксированная высота "64px", в расчёте на то, что
     подписи нижнего меню всегда в одну строку. На башкирском ("Минең
     районым" и т.п.) подпись иногда переносится на две строки и сама панель
     навigации становится выше — из-за этого поле ввода начинало наезжать на
     неё. Реальную высоту меню теперь измеряем в JS (см. syncNavHeight())
     и кладём в --nav-h, так что отступ всегда правильный, сколько бы строк
     ни занимала подпись. */
  position:fixed;left:50%;transform:translateX(-50%);bottom:var(--nav-h, 64px);
  width:100%;max-width:480px;display:flex;gap:8px;align-items:center;box-sizing:border-box;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--border);
  box-shadow:0 -4px 14px rgba(60,45,20,.08);z-index:32;
}
.board-input input{flex:1;padding:12px 16px;border-radius:var(--r-pill);border:1.5px solid var(--border);font-size:14.5px;background:var(--bg);min-width:0;}
.board-input input:focus{outline:none;border-color:var(--accent);}
.board-attach-btn,.board-send-btn{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;padding:0;border:none;
  display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:transform .12s ease;
}
.board-attach-btn{background:#F0E9D8;color:var(--text-2);}
.board-send-btn{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;box-shadow:0 4px 12px rgba(15,61,38,.3);}
.board-attach-btn:active,.board-send-btn:active{transform:scale(.92);}

/* ---------- Аватар-сота (в постах, сторисах, профиле) ---------- */
/* Форма сот — фирменный узнаваемый элемент (герб, фон), теперь и у аватарок:
   вместо обычного круглого кружка — шестигранник. */
.avatar-hex{
  -webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;font-weight:800;
}
.avatar-hex img{width:100%;height:100%;object-fit:cover;}
/* Лёгкая тень-подъём — только у отдельно стоящей аватарки в посте (не у той,
   что уже внутри сотового кольца сторис — там своя тень у кольца, две подряд
   выглядели бы грязно). */
.board-post .avatar-hex{width:32px;height:32px;font-size:14px;filter:drop-shadow(0 2px 4px rgba(43,38,32,.22));}

/* ---------- Сторисы ---------- */
.stories-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:2px;-webkit-overflow-scrolling:touch;}
.story-item{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0;width:64px;cursor:pointer;}
.story-ring{
  width:60px;height:60px;-webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;padding:3px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--amber),var(--terracotta));
  filter:drop-shadow(0 4px 8px rgba(43,38,32,.22));
}
.story-ring.viewed{background:var(--border);}
.story-ring.add-ring{background:none;}
.story-ring-inner{width:100%;height:100%;-webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:var(--card);padding:2px;display:flex;align-items:center;justify-content:center;}
.story-item .avatar-hex{width:100%;height:100%;font-size:20px;}
.story-add-btn{
  width:100%;height:100%;-webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:#F0E9D8;border:1.5px dashed var(--border);
  display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-2);
}
.story-item .story-label{font-size:11px;color:var(--text-2);max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}

/* ---------- Полноэкранный просмотр истории ---------- */
.story-overlay{align-items:stretch;justify-content:stretch;background:#000;}
.story-viewer{position:relative;width:100%;max-width:480px;margin:0 auto;height:100%;background:#111;overflow:hidden;}
.story-progress{position:absolute;top:10px;left:10px;right:10px;height:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.3);z-index:2;overflow:hidden;}
.story-progress-bar{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0);animation-name:storyProgress;animation-timing-function:linear;animation-fill-mode:forwards;}
@keyframes storyProgress{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.story-header{position:absolute;top:22px;left:14px;right:14px;display:flex;align-items:center;gap:9px;z-index:2;color:#fff;}
.story-header-text{flex:1;min-width:0;display:flex;align-items:center;gap:9px;overflow:hidden;}
.story-header-text b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.story-header-text span{font-size:12px;opacity:.8;white-space:nowrap;}
.story-avatar{width:30px;height:30px;-webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;overflow:hidden;flex-shrink:0;background:linear-gradient(135deg,var(--amber),var(--terracotta));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:13px;}
.story-avatar img{width:100%;height:100%;object-fit:cover;}
.story-close{font-size:18px;cursor:pointer;padding:4px;flex-shrink:0;}
.story-menu-wrap{position:relative;flex-shrink:0;}
.story-menu-btn{font-size:20px;cursor:pointer;padding:4px 8px;line-height:1;display:block;}
.story-menu-dropdown{
  display:none;position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border-radius:12px;
  box-shadow:0 10px 28px rgba(0,0,0,.4);overflow:hidden;min-width:150px;z-index:5;
}
.story-menu-dropdown.active{display:block;}
.story-menu-item{padding:12px 15px;font-size:13.5px;color:#e5473b;font-weight:600;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.story-menu-item:active{background:#f5f0e8;}
.story-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
.story-media img,.story-media video{max-width:100%;max-height:100%;object-fit:contain;}
.story-media.text-story{
  background:linear-gradient(160deg,var(--accent),var(--accent-dark));color:#fff;padding:40px;text-align:center;
  font-size:22px;font-weight:700;line-height:1.4;
}
.story-tap-zone{position:absolute;top:0;bottom:0;width:35%;z-index:1;}
.story-tap-prev{left:0;}
.story-tap-next{right:0;}

/* ---------- Полноэкранный просмотр фото профиля ---------- */
.avatar-view-overlay{background:rgba(0,0,0,.92);}
.modal-overlay.avatar-view-overlay{align-items:center;}
.avatar-view-overlay #avatar-view-img{max-width:92vw;max-height:88vh;object-fit:contain;border-radius:12px;}
.avatar-view-close{position:absolute;top:22px;right:18px;color:#fff;font-size:20px;z-index:2;}

/* ---------- Мой профиль: аватар / ФИО / статус ---------- */
.my-profile-card{padding-bottom:14px;}
.my-avatar-row{display:flex;align-items:center;gap:14px;}
.my-avatar{
  position:relative;width:64px;height:64px;-webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;flex-shrink:0;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-dark));display:flex;align-items:center;justify-content:center;overflow:hidden;
  filter:drop-shadow(0 4px 10px rgba(43,38,32,.28));
}
.my-avatar-fallback{font-size:28px;}
#my-avatar-img{width:100%;height:100%;object-fit:cover;}
.my-avatar-edit{
  position:absolute;right:-2px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--amber);
  display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid var(--card);
}
.my-avatar-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.my-avatar-fields input{
  width:100%;box-sizing:border-box;padding:9px 12px;border-radius:var(--r-sm);border:1.5px solid var(--border);
  font-size:13.5px;background:var(--bg);
}
.my-avatar-fields input:focus{outline:none;border-color:var(--accent);}
.my-avatar-change-link{font-size:12.5px;color:var(--accent-dark);font-weight:700;cursor:pointer;width:fit-content;}
.my-avatar-change-link:active{opacity:.7;}

/* ---------- Редактор фото профиля (кадр/зум/фильтры) ---------- */
.avatar-editor-frame{
  width:240px;height:240px;margin:14px auto 8px;position:relative;overflow:hidden;
  -webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:#1a1a1a;touch-action:none;cursor:grab;
  filter:drop-shadow(0 10px 22px rgba(43,38,32,.3));
}
.avatar-editor-frame:active{cursor:grabbing;}
.avatar-editor-frame img{
  position:absolute;top:0;left:0;transform-origin:top left;user-select:none;-webkit-user-drag:none;
  max-width:none;max-height:none;
}
.avatar-editor-zoom-row{display:flex;align-items:center;gap:10px;margin-top:6px;}
.avatar-editor-zoom-row input[type="range"]{flex:1;accent-color:var(--accent);}
.avatar-editor-filters{display:flex;gap:8px;overflow-x:auto;margin-top:14px;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.avatar-editor-filters .chip{flex-shrink:0;}

/* ---------- Раздел "Ещё": пункты меню (Поддержка / О приложении) ---------- */
.menu-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:transform .12s ease;}
.menu-row:active{transform:scale(.98);}
.menu-row .chevron{color:var(--text-3);font-size:18px;}

/* ---------- Поддержка ---------- */
.support-contacts{margin-top:4px;}

/* ---------- О приложении ---------- */
.about-text p{font-size:14px;line-height:1.55;color:var(--text-2);margin:0 0 12px;}
.about-text p:last-child{margin-bottom:0;}

.sos-fab{
  position:fixed;right:16px;bottom:calc(var(--nav-h, 64px) + 26px);max-width:480px;
  width:64px;height:64px;-webkit-mask-image:var(--hex-mask);mask-image:var(--hex-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;background:radial-gradient(circle at 35% 30%,#F16B5F,var(--red));color:#fff;border:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-weight:800;font-size:10.5px;letter-spacing:.03em;z-index:35;cursor:pointer;
  /* box-shadow не повторяет форму clip-path, поэтому свечение — через
     drop-shadow (он идёт по силуэту шестигранника, а не по прямоугольнику) */
  filter:drop-shadow(0 8px 16px rgba(229,71,59,.5));
  animation:sosPulse 2.6s ease-in-out infinite;
  transition:bottom .15s ease;
}
.sos-fab-icon{width:22px;height:22px;flex-shrink:0;}
.sos-fab-label{line-height:1;}
/* На экране "Мой район" внизу есть ещё поле ввода сообщения — поднимаем SOS
   выше, чтобы она не перекрывала кнопку отправки сообщения. */
.sos-fab.sos-raised{bottom:calc(var(--nav-h, 64px) + 76px);}
.sos-fab:active{transform:scale(.92);}
@keyframes sosPulse{
  0%,100%{filter:drop-shadow(0 8px 16px rgba(229,71,59,.5));}
  50%{filter:drop-shadow(0 8px 16px rgba(229,71,59,.5)) drop-shadow(0 0 12px rgba(229,71,59,.6));}
}
.modal-overlay{
  position:fixed;inset:0;background:rgba(30,22,12,.52);backdrop-filter:blur(2px);z-index:50;display:none;align-items:flex-end;justify-content:center;
}
.modal-overlay.active{display:flex;animation:overlayIn .2s ease;}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
.modal-sheet{
  background:#fff;width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:14px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:85vh;overflow-y:auto;box-shadow:var(--shadow-2);animation:sheetUp .25s cubic-bezier(.2,.8,.3,1);position:relative;
  overscroll-behavior-y:contain;
}
.modal-sheet::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:var(--r-pill);background:var(--border);}
@keyframes sheetUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.modal-sheet h2{margin:14px 0 6px;font-size:19px;color:var(--red);font-weight:800;}
.modal-sheet p.desc{color:var(--text-2);font-size:13px;margin-top:0;line-height:1.4;}
.sos-option{
  display:flex;align-items:center;gap:12px;padding:15px;border-radius:var(--r-md);border:1.5px solid var(--border);margin-bottom:10px;cursor:pointer;background:#fff;
  transition:transform .12s ease,border-color .12s ease;
  color:inherit;text-decoration:none;
}
.sos-option:active{transform:scale(.98);}
.sos-option .emoji{font-size:22px;flex-shrink:0;}
.sos-option .label{font-weight:700;font-size:14px;color:var(--text);}
.sos-status{font-size:13px;padding:9px 12px;border-radius:var(--r-sm);background:#FDF3E7;color:#8A5A10;margin-top:6px;line-height:1.4;}
.sos-status.ok{background:#E8F5EE;color:var(--green-dark);}
.sos-status.fail{background:#FBE9E7;color:var(--red-dark);}

.install-hint{
  background:linear-gradient(135deg,#FFF8E6,#FEF0D3);border:1px solid #F2D98B;color:#7A5B00;font-size:12.5px;
  padding:12px 14px;border-radius:var(--r-md);margin-bottom:14px;line-height:1.4;
  display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;
}
.install-btn{
  flex-shrink:0;border:none;border-radius:var(--r-pill);padding:9px 15px;font-size:12.5px;font-weight:800;
  cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;white-space:nowrap;
  box-shadow:0 4px 12px rgba(15,61,38,.28);transition:transform .12s ease;
}
.install-btn:active{transform:scale(.94);}

.driver-card{background:var(--card);border-radius:var(--r-md);padding:15px;margin-bottom:12px;border:1px solid var(--border);box-shadow:var(--shadow-1);}
.empty-state{text-align:center;color:var(--text-3);padding:36px 14px;font-size:14px;}
h2.page-h{font-size:21px;margin:6px 0 16px;font-weight:800;}
.note{font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.4;}

/* ---------- Индикатор заполненности (статус-точка) ---------- */
.fill-row{display:flex;align-items:center;gap:7px;margin:6px 0;}
.fill-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(0,0,0,.04);}
.rating-line{font-size:12.5px;color:var(--amber-dark);font-weight:700;margin:2px 0;}
.rating-line .stars{letter-spacing:1px;}
.booked-state{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;margin-top:12px;
  background:var(--green);color:#fff;border-radius:var(--r-md);font-weight:700;font-size:14px;cursor:pointer;
  box-shadow:0 6px 16px rgba(47,163,96,.3);transition:transform .12s ease;
}
.booked-state:active{transform:scale(.97);}
.queued-state{
  display:flex;align-items:center;justify-content:center;width:100%;padding:12px;margin-top:12px;
  background:var(--accent-soft);color:var(--accent-dark);border-radius:var(--r-md);font-weight:700;font-size:13.5px;text-align:center;
}

/* ---------- Чат: правильная прокрутка + вложения ---------- */
.chat-sheet{height:82vh;display:flex;flex-direction:column;padding-bottom:calc(14px + env(safe-area-inset-bottom));}
.chat-sheet .chat-header{flex:0 0 auto;}
.chat-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 2px 6px;overscroll-behavior-y:contain;}
.chat-sheet .price-note{flex:0 0 auto;}
.chat-attach-row{display:flex;gap:8px;padding:8px 0 2px;flex:0 0 auto;}
.chat-attach-btn{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--border);background:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .12s ease,border-color .12s ease;flex-shrink:0;
}
.chat-attach-btn:active{transform:scale(.9);}
.chat-attach-btn.recording{background:var(--red);border-color:var(--red);animation:sosPulse 1.4s ease-in-out infinite;}
.chat-sheet .chat-input{flex:0 0 auto;position:static;}
.msg img,.msg video{max-width:100%;border-radius:12px;display:block;}
.msg audio{max-width:220px;}

/* ---------- Вложения в общей ленте ---------- */
.board-attach-btn{flex:0 0 auto;width:44px;height:44px;padding:0;font-size:16px;}
.board-post img{max-width:100%;border-radius:12px;margin-top:8px;display:block;}
.board-post-delete{margin-top:8px;padding:7px 12px;font-size:12px;}

/* ---------- Тумблер (switch) ---------- */
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;font-weight:700;font-size:14.5px;}
.switch{position:relative;width:46px;height:27px;flex-shrink:0;}
.switch input{opacity:0;width:0;height:0;position:absolute;}
.switch-track{position:absolute;inset:0;background:#DDD2B6;border-radius:var(--r-pill);transition:background .18s ease;}
.switch-track::before{content:"";position:absolute;width:21px;height:21px;left:3px;top:3px;background:#fff;border-radius:50%;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:transform .18s ease;}
.switch input:checked + .switch-track{background:var(--green);}
.switch input:checked + .switch-track::before{transform:translateX(19px);}
.muslim-card{background:linear-gradient(135deg,#F6F2E2,#EEF1E1);}

/* ---------- Молитвенный виджет ---------- */
.prayer-banner{
  background:linear-gradient(120deg,var(--green),var(--green-dark));color:#fff;border-radius:var(--r-md);
  padding:12px 14px;margin-bottom:12px;font-size:13.5px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-1);
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.prayer-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:14px;}
.prayer-row:last-child{border-bottom:none;}
.prayer-row .pname{font-weight:700;}
.prayer-row .ptime{color:var(--text-2);font-variant-numeric:tabular-nums;}
.prayer-row.next{color:var(--accent-dark);}
.prayer-next-box{background:var(--accent-soft);border-radius:var(--r-md);padding:12px 14px;margin-bottom:10px;text-align:center;}
.prayer-next-box .big{font-size:22px;font-weight:800;color:var(--accent-dark);font-variant-numeric:tabular-nums;}
.prayer-calendar-row{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--text-2);padding:2px 2px 0;}
.prayer-special-note{margin-top:8px;background:linear-gradient(135deg,#FFF8E6,#FEF0D3);border:1px solid #F2D98B;color:#7A5B00;font-size:12.5px;padding:9px 12px;border-radius:var(--r-sm);line-height:1.4;}

/* ---------- Звёзды рейтинга ---------- */
.star-picker{display:flex;gap:6px;justify-content:center;margin:8px 0;}
.star-picker .star{font-size:34px;color:#DDD2B6;cursor:pointer;transition:transform .1s ease;}
.star-picker .star.filled{color:var(--amber);}
.star-picker .star:active{transform:scale(1.2);}

/* ---------- Категории мест (чипы) ---------- */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;-ms-overflow-style:none;scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex-shrink:0;padding:9px 15px;border-radius:var(--r-pill);background:var(--card);border:1.5px solid var(--border);
  font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s ease;
}
.chip.active{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff;border-color:transparent;}
.poi-card{display:flex;align-items:flex-start;gap:12px;}
.poi-card .poi-icon{
  width:40px;height:40px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
  font-size:19px;flex-shrink:0;
}
.poi-card .poi-name{font-weight:700;font-size:14.5px;}
.poi-card .poi-place{font-size:12.5px;color:var(--text-2);margin-top:2px;}

/* ---------- История поездок ---------- */
.history-card{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.history-card .btn{flex:0 0 auto;padding:8px 12px;font-size:12.5px;}
.my-posted-card{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.my-posted-delete{flex:0 0 auto;padding:8px 12px;font-size:12.5px;white-space:nowrap;}

/* ---------- Карта мест ---------- */
.map-wrap{
  position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1);height:56vh;min-height:340px;
  /* Leaflet рисует свои внутренние слои (тайлы, маркеры, попапы) с z-index вплоть до 700.
     Без isolation:isolate у .map-wrap нет своего стекингового контекста, и эти слои
     "пробивают" наверх поверх модалок (z-index:50) — например, поверх окна "История района".
     isolation:isolate запирает все внутренние z-index карты внутри этого блока. */
  isolation:isolate;
}
#places-map{width:100%;height:100%;background:#E7DEC6;}
.map-fallback{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:100%;
  color:var(--text-2);font-size:13.5px;text-align:center;padding:24px;
}
.locate-btn{
  /* Специально сверху, а не снизу справа — там, внизу справа, всегда "плавает"
     кнопка SOS (она общая для всех экранов), и кнопки перекрывали друг друга. */
  position:absolute;right:12px;top:12px;width:46px;height:46px;border-radius:50%;border:none;
  background:#fff;box-shadow:var(--shadow-2);font-size:19px;cursor:pointer;z-index:400;
  display:flex;align-items:center;justify-content:center;
}
.locate-btn:active{transform:scale(.92);}
.poi-pin{
  width:32px;height:32px;border-radius:50% 50% 50% 0;background:var(--accent);transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.3);border:2px solid #fff;
}
.poi-pin span{transform:rotate(45deg);font-size:15px;}
.me-pin{
  width:20px;height:20px;border-radius:50%;background:#2AA6DE;border:3px solid #fff;box-shadow:0 0 0 5px rgba(42,166,222,.35),0 2px 6px rgba(0,0,0,.3);
}

/* ---------- Зимний режим: ЧС-комплект + конвой ---------- */
.winter-card{background:linear-gradient(135deg,#F2F8FC,#EAF3FA);}
.link-reset{color:var(--accent-dark);text-decoration:underline;cursor:pointer;font-weight:700;white-space:nowrap;}

.checkbox-row{display:flex;align-items:flex-start;gap:9px;font-size:14px;font-weight:600;cursor:pointer;line-height:1.35;padding:2px 0;}
.checkbox-row input[type="checkbox"]{width:19px;height:19px;flex-shrink:0;margin-top:1px;accent-color:var(--accent);}

.winter-route-row{margin-top:4px;}

.emergency-kit-card{
  background:linear-gradient(135deg,#F5FAFF,#EFF6FB);border:1.5px solid #CFE3F2;border-radius:var(--r-md);
  padding:14px 15px;margin:6px 0 16px;
}
.emergency-kit-card .kit-title{font-weight:800;font-size:14.5px;margin-bottom:2px;color:var(--accent-dark);}
.kit-item-row{border-top:1px solid rgba(20,60,90,.08);padding:10px 0;}
.kit-item-row:first-of-type{border-top:none;padding-top:8px;}
.kit-photo-row{display:flex;align-items:center;gap:8px;margin:8px 0 0 28px;}
.kit-photo-btn{
  border:1.5px solid var(--border);background:#fff;border-radius:var(--r-pill);padding:6px 12px;font-size:12px;font-weight:700;
  color:var(--text-2);cursor:pointer;flex-shrink:0;
}
.kit-photo-btn:active{transform:scale(.95);}
.kit-photo-thumb{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);}

.winter-block{margin:8px 0;}
.winter-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px;}
.badge.winter-badge{background:linear-gradient(135deg,#3E7FB0,#274F72);}
.kit-badge{font-size:11px;font-weight:800;padding:5px 11px;border-radius:var(--r-pill);white-space:nowrap;}
.kit-badge.kit-ok{background:#E8F5EE;color:var(--green-dark);}
.kit-badge.kit-warn{background:#FDF3E7;color:#8A5A10;}
.convoy-row{display:flex;align-items:center;gap:7px;margin:6px 0;}
.convoy-mates{font-size:12px;color:var(--text-3);margin-top:4px;line-height:1.4;}

.convoy-suggest-card{
  background:linear-gradient(135deg,#EAF6FF,#DCEEFB);border:1.5px solid #B9DCF0;border-radius:var(--r-md);
  padding:13px 15px;margin:2px 0 16px;
}
.convoy-suggest-text{font-size:13.5px;font-weight:700;color:var(--accent-dark);line-height:1.4;margin-bottom:10px;}
.convoy-suggest-actions{display:flex;gap:8px;}

/* ---------- "Учим башкирский": словарь / разговорник / алфавит ---------- */
.bashkir-sheet{height:86vh;display:flex;flex-direction:column;padding-bottom:calc(10px + env(safe-area-inset-bottom));}
.bashkir-modal-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;margin:14px 0 10px;}
.bashkir-modal-header h2{color:var(--red);font-size:18px;font-weight:800;margin:0;}
.bashkir-modal-close{font-size:18px;color:var(--text-3);cursor:pointer;padding:4px 8px;flex-shrink:0;}
.bashkir-tabs{display:flex;gap:6px;flex:0 0 auto;background:var(--bg);border-radius:var(--r-pill);padding:4px;margin-bottom:10px;}
.bashkir-tab{
  flex:1;border:none;background:transparent;padding:9px 6px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;
  color:var(--text-2);cursor:pointer;transition:all .15s ease;
}
.bashkir-tab.active{background:var(--card);color:var(--accent-dark);box-shadow:var(--shadow-1);}
.bashkir-panels{flex:1 1 auto;overflow:hidden;position:relative;}
.bashkir-panel{display:none;height:100%;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;overscroll-behavior-y:contain;}
.bashkir-panel.active{display:flex;}
.bashkir-hint{flex:0 0 auto;margin:0 0 10px;}
.bashkir-search{
  flex:0 0 auto;width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--r-md);border:1.5px solid var(--border);
  font-size:14px;background:var(--card);margin-bottom:10px;
}
.bashkir-cat-row{flex:0 0 auto;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;-ms-overflow-style:none;scrollbar-width:none;}
.bashkir-cat-row::-webkit-scrollbar{display:none;}
.bashkir-dict-list{flex:1 1 auto;overflow-y:auto;}
.bashkir-word-card{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--r-md);
  border:1px solid var(--border);background:var(--card);margin-bottom:8px;
}
.bashkir-word-ru{font-size:14px;color:var(--text);font-weight:700;}
.bashkir-word-arrow{color:var(--text-3);font-size:13px;flex-shrink:0;}
.bashkir-word-ba{font-size:14px;color:var(--accent-dark);font-weight:700;text-align:right;}
.bashkir-word-note{font-size:11px;color:var(--text-3);font-weight:400;margin-top:1px;}
.bashkir-dict-count{flex:0 0 auto;font-size:11.5px;color:var(--text-3);margin-bottom:8px;}

.bashkir-phrase-section{margin-bottom:18px;}
.bashkir-phrase-section-title{
  font-size:14px;font-weight:800;color:var(--accent-dark);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border);
}
.bashkir-phrase-card{padding:10px 0;border-bottom:1px solid var(--border);}
.bashkir-phrase-card:last-child{border-bottom:none;}
.bashkir-phrase-ru{font-size:13.5px;color:var(--text);font-weight:600;}
.bashkir-phrase-ba{font-size:13.5px;color:var(--accent-dark);font-weight:700;margin-top:2px;}

.bashkir-alphabet-grid{
  flex:1 1 auto;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-content:start;
}
.bashkir-letter-card{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);
  border:1.5px solid var(--border);background:var(--card);font-size:20px;font-weight:800;color:var(--text);
  cursor:pointer;transition:transform .12s ease;position:relative;
}
.bashkir-letter-card:active{transform:scale(.93);}
.bashkir-letter-card.special{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark);}
.bashkir-letter-card .letter-sound{
  position:absolute;bottom:3px;font-size:9px;font-weight:600;color:var(--text-3);
}
.bashkir-letter-card.special .letter-sound{color:var(--accent-dark);opacity:.8;}
.bashkir-letter-info{
  grid-column:1/-1;background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:var(--r-md);
  padding:12px 14px;margin-top:2px;font-size:13px;color:var(--accent-dark);line-height:1.45;
}
.bashkir-letter-info b{font-size:16px;}
.bashkir-audio-note{flex:0 0 auto;font-size:11.5px;color:var(--text-3);text-align:center;margin:12px 0 0;font-style:italic;}