/* ===========================
   Доступная среда — main.css
   Mobile-first, accessible
   =========================== */

:root {
  --blue:      #1B4F8A;
  --blue-lt:   #E6F1FB;
  --green:     #2E7D32;
  --green-lt:  #EAF3DE;
  --amber:     #E65100;
  --amber-lt:  #FAEEDA;
  --red:       #C62828;
  --red-lt:    #FCEBEB;
  --gray:      #5F5E5A;
  --gray-lt:   #F4F3F1;
  --text:      #1A1A1A;
  --text-sec:  #555550;
  --border:    rgba(0,0,0,0.12);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --font-size-base: 16px;
  --touch-min: 48px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Высококонтрастный режим */
.high-contrast {
  --text:     #000000;
  --text-sec: #333333;
  --border:   rgba(0,0,0,0.5);
  --blue:     #003D99;
  --gray-lt:  #FFFFFF;
}

/* Увеличенный шрифт */
.font-large  { --font-size-base: 18px; }
.font-xlarge { --font-size-base: 22px; }

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--font-size-base);
  color: var(--text);
  background: #F0EDE8;
  overscroll-behavior: none;
}

/* Скрытый текст для screen reader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ===========================
   ЭКРАНЫ
   =========================== */
.screen {
  display: none;
  position: fixed;
  inset: 0;
  background: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(64px + var(--safe-bottom));
  flex-direction: column;
}
.screen.active { display: flex; flex-direction: column; }

/* ===========================
   ЗАГРУЗКА
   =========================== */
#screen-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  padding-bottom: 0;
}
.loading-center { text-align: center; color: #fff; }
.app-logo-big   { font-size: 64px; margin-bottom: 16px; }
.app-title      { font-size: 26px; font-weight: 600; margin: 0 0 8px; }
.app-subtitle   { font-size: 15px; opacity: 0.8; margin: 0 0 32px; }
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  margin: 0 auto;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===========================
   ОНБОРДИНГ
   =========================== */
.onboard-header {
  background: var(--blue);
  padding: 40px 20px 28px;
  text-align: center;
  color: #fff;
}
.header-logo    { font-size: 48px; margin-bottom: 12px; }
.onboard-header h1 { font-size: 22px; font-weight: 600; margin: 0 0 6px; }
.onboard-header p  { font-size: 14px; opacity: 0.85; margin: 0; }

.category-list { padding: 20px 16px; }
.category-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: var(--touch-min);
  padding: 16px 14px;
  margin-bottom: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  font-size: var(--font-size-base);
}
.category-btn:hover  { border-color: var(--blue); background: var(--blue-lt); }
.category-btn:focus  { outline: 3px solid var(--blue); outline-offset: 2px; }
.category-btn:active { transform: scale(0.98); }

.cat-icon { font-size: 28px; flex-shrink: 0; }
.cat-text { flex: 1; }
.cat-text strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.cat-text span   { font-size: 12px; color: var(--text-sec); }
.cat-arrow       { font-size: 22px; color: var(--text-sec); }

.onboard-footer {
  padding: 8px 20px 24px;
  text-align: center;
}
.uid-display { margin-bottom: 6px; }
.uid-label   { font-size: 12px; color: var(--text-sec); }
.uid-value   { font-size: 13px; font-family: monospace; color: var(--blue); }
.onboard-hint { font-size: 11px; color: var(--text-sec); margin: 0; }

/* ===========================
   ГЛАВНЫЙ ЭКРАН
   =========================== */
.main-header {
  background: var(--blue);
  padding: 44px 16px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.main-header-text { flex: 1; }
.main-header-text h1 { font-size: 18px; font-weight: 600; color: #fff; margin: 0 0 2px; }
.main-header-text p  { font-size: 12px; color: rgba(255,255,255,0.75); margin: 0; }
.voice-fab-header {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.geo-banner {
  background: var(--blue-lt);
  padding: 10px 16px;
  font-size: 13px;
  color: var(--blue);
}

.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 14px 8px;
}
.main-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 14px;
  min-height: 110px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: center;
  transition: background 0.15s, transform 0.1s;
  font-size: var(--font-size-base);
}
.main-btn:hover  { background: var(--gray-lt); }
.main-btn:focus  { outline: 3px solid var(--blue); outline-offset: 2px; }
.main-btn:active { transform: scale(0.97); }
.main-btn--wide  {
  grid-column: 1 / -1;
  flex-direction: row;
  text-align: left;
  padding: 16px 18px;
  min-height: auto;
  gap: 16px;
}
.btn-icon   { font-size: 30px; }
.btn-label  { font-size: 15px; font-weight: 600; color: var(--text); display: block; }
.btn-hint   { font-size: 11px; color: var(--text-sec); margin-top: 2px; display: block; }

.gesture-guide {
  margin: 4px 14px 14px;
  padding: 12px 14px;
  background: var(--gray-lt);
  border-radius: var(--radius-md);
}
.gesture-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; color: var(--text-sec); }
.gesture-list  { list-style: none; padding: 0; margin: 0; }
.gesture-list li { font-size: 12px; color: var(--text-sec); padding: 3px 0; }

/* ===========================
   SUB-HEADER
   =========================== */
.sub-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 44px 14px 12px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}
.sub-header--transparent {
  background: rgba(0,0,0,0.3);
  border-bottom: none;
  position: absolute;
  left: 0; right: 0; top: 0;
}
.sub-header h2 { flex: 1; font-size: 18px; font-weight: 600; margin: 0; }
.back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--text);
  min-width: var(--touch-min); min-height: var(--touch-min);
  display: flex; align-items: center; justify-content: center;
}
.back-btn--white { color: #fff; }
.voice-btn {
  background: var(--blue-lt);
  border: none; border-radius: 50%; cursor: pointer;
  width: 44px; height: 44px; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.voice-btn--white { background: rgba(255,255,255,0.25); }

/* ===========================
   РЯДОМ
   =========================== */
.search-row { padding: 10px 14px; }
.search-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--gray-lt);
}
.search-input:focus { outline: 3px solid var(--blue); border-color: var(--blue); }

.filter-row {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filter-chip {
  background: var(--gray-lt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  min-height: var(--touch-min);
  display: flex; align-items: center;
  transition: background 0.15s;
}
.filter-chip.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.place-list { padding: 0 14px 14px; }
.loading-text { text-align: center; color: var(--text-sec); padding: 24px 0; }

.place-card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
  font-size: var(--font-size-base);
}
.place-card:hover  { border-color: var(--blue); }
.place-card:focus  { outline: 3px solid var(--blue); }
.place-card:active { transform: scale(0.98); }

.place-thumb {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--gray-lt);
  font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.place-info  { flex: 1; min-width: 0; }
.place-info h4 { font-size: 14px; font-weight: 600; margin: 0 0 3px; }
.place-info p  { font-size: 12px; color: var(--text-sec); margin: 0 0 8px; }
.access-icons  { display: flex; gap: 5px; }
.access-badge-sm {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}
.badge-ok      { background: var(--green-lt); color: var(--green); }
.badge-partial { background: var(--amber-lt); color: var(--amber); }
.badge-no      { background: var(--red-lt);   color: var(--red); }
.badge-unknown { background: var(--gray-lt);  color: var(--gray); }
.dist-tag {
  font-size: 11px; color: var(--blue);
  background: var(--blue-lt);
  padding: 3px 9px; border-radius: 999px;
  white-space: nowrap; flex-shrink: 0;
  align-self: flex-start;
}

/* ===========================
   КАРТОЧКА МЕСТА
   =========================== */
.place-hero {
  height: 180px;
  background: linear-gradient(135deg, var(--blue), #3A8FD4);
  display: flex; align-items: center; justify-content: center;
  font-size: 72px;
}
.place-body { padding: 18px 16px 24px; }
.place-name    { font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.place-address { font-size: 14px; color: var(--text-sec); margin: 0 0 4px; }
.place-hours   { font-size: 13px; color: var(--green); margin: 0 0 14px; }
.place-desc    { font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-sec); margin: 0 0 10px; }

.access-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.access-cell {
  flex: 1;
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}
.access-cell .ico { font-size: 20px; display: block; margin-bottom: 4px; }
.access-notes { font-size: 12px; color: var(--text-sec); margin: 0 0 20px; line-height: 1.6; }

.place-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.action-btn {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 12px 6px;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  min-height: var(--touch-min);
  transition: background 0.15s;
}
.action-btn:hover { background: var(--gray-lt); }
.action-btn:focus { outline: 3px solid var(--blue); }

.route-btn-big {
  width: 100%;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: 54px;
  transition: background 0.15s;
}
.route-btn-big:hover  { background: #163F72; }
.route-btn-big:focus  { outline: 3px solid var(--blue); outline-offset: 3px; }
.route-btn-big:active { transform: scale(0.98); }

/* ===========================
   ПОМОЩЬ
   =========================== */
.help-body { padding: 16px 14px; }
.sos-btn {
  width: 100%;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 18px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 12px;
  min-height: 60px;
}
.sos-btn:focus  { outline: 3px solid #fff; outline-offset: 2px; }
.sos-btn:active { transform: scale(0.98); }

.chat-btn {
  width: 100%;
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
  border-radius: var(--radius-md);
  padding: 15px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  min-height: var(--touch-min);
}
.help-card {
  background: var(--gray-lt);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.help-card h3   { font-size: 14px; font-weight: 600; margin: 0 0 6px; }
.help-card p    { font-size: 13px; color: var(--text-sec); margin: 0; line-height: 1.6; }
.help-card--info { background: var(--blue-lt); }
.phone-link { color: var(--blue); font-weight: 600; }

/* ===========================
   НАСТРОЙКИ
   =========================== */
.settings-body { padding: 12px 14px; }
.settings-section { margin-bottom: 22px; }
.settings-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-sec); margin: 0 0 10px;
}
.settings-options { display: flex; flex-direction: column; gap: 6px; }
.settings-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--gray-lt);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-size-base);
  min-height: var(--touch-min);
}
.settings-option input { width: 20px; height: 20px; cursor: pointer; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px;
  background: var(--gray-lt);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  cursor: pointer;
  font-size: var(--font-size-base);
  min-height: var(--touch-min);
}
.toggle-row input[type=checkbox] { width: 22px; height: 22px; cursor: pointer; }
.uid-settings { padding: 10px 0; text-align: center; }

/* ===========================
   МАРШРУТ
   =========================== */
.route-body { padding: 16px 14px; }
.route-field { margin-bottom: 12px; }
.route-field label { display: block; font-size: 12px; color: var(--text-sec); margin-bottom: 4px; font-weight: 600; }
.route-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  background: var(--gray-lt);
}
.route-field input:focus { outline: 3px solid var(--blue); border-color: var(--blue); }
.route-options { margin-bottom: 16px; }
.map-container {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-top: 16px;
  background: var(--gray-lt);
  overflow: hidden;
}

.route-info-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--blue-lt);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

/* ===========================
   КАМЕРА
   =========================== */
#screen-camera { padding-bottom: 0; }
.camera-view { position: relative; flex: 1; background: #000; }
.camera-video { width: 100%; height: 100%; object-fit: cover; }
.camera-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.camera-frame {
  width: 220px; height: 220px;
  border: 3px solid rgba(255,255,255,0.8);
  border-radius: 20px;
}
.camera-hint {
  margin-top: 14px; color: #fff;
  font-size: 14px; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}
.camera-controls {
  display: flex; gap: 12px;
  padding: 14px;
  background: #fff;
}
.camera-btn {
  flex: 1;
  background: var(--blue); color: #fff;
  border: none; border-radius: var(--radius-md);
  padding: 14px; font-size: 15px; font-weight: 600;
  cursor: pointer; min-height: var(--touch-min);
}
.camera-btn--secondary { background: var(--gray); }
.camera-result {
  padding: 14px;
  font-size: 15px; line-height: 1.7;
  min-height: 60px;
}

/* ===========================
   НИЖНЯЯ НАВИГАЦИЯ
   =========================== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  z-index: 100;
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  padding: 8px 4px 10px;
  background: none; border: none;
  cursor: pointer;
  min-height: 56px;
  font-size: 10px;
  color: var(--text-sec);
  transition: color 0.15s;
}
.nav-item span:first-child { font-size: 22px; }
.nav-item.active { color: var(--blue); }
.nav-item:focus  { outline: 3px solid var(--blue); outline-offset: -3px; }

/* ===========================
   СУБТИТРЫ (для глухих)
   =========================== */
.caption-bar {
  position: fixed;
  bottom: 60px; left: 12px; right: 12px;
  background: rgba(0,0,0,0.85);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.5;
  z-index: 200;
  text-align: center;
}

/* ===========================
   FOCUS VISIBLE
   =========================== */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
button:not(:focus-visible), input:not(:focus-visible) {
  outline: none;
}

/* ===========================
   МЕДИА
   =========================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (min-width: 440px) {
  .main-grid { gap: 14px; padding: 18px 18px 10px; }
  .main-btn  { min-height: 120px; }
}
/* ===========================
   ДОПОЛНЕНИЯ К main.css
   Вставить в конец файла
   =========================== */

/* ───────────────────────────
   КАТЕГОРИЯ-ТЕЛА (улучшение #3)
   Мгновенная адаптация UI
   ─────────────────────────── */

/* Mobility: синяя акцентовая полоса */
body.cat-mobility .main-header { background: #1B4F8A; }
body.cat-mobility .filter-chip.active { background: #1B4F8A; border-color: #1B4F8A; }

/* Hearing: зелёный акцент, крупный текст чипов */
body.cat-hearing .main-header { background: #2E7D32; }
body.cat-hearing .filter-chip.active { background: #2E7D32; border-color: #2E7D32; }
body.cat-hearing .place-card { border-left: 4px solid #2E7D32; }
/* Скрыть голосовые кнопки в режиме слуха */
body.cat-hearing .voice-btn,
body.cat-hearing .voice-fab-header { opacity: 0.4; pointer-events: none; }

/* Vision: тёмный фон, максимальный контраст */
body.cat-vision { background: #1a1a1a; color: #fff; }
body.cat-vision .screen { background: #1a1a1a; color: #fff; }
body.cat-vision .main-header { background: #000; }
body.cat-vision .place-card,
body.cat-vision .category-btn,
body.cat-vision .main-btn {
  background: #2a2a2a;
  border-color: #555;
  color: #fff;
}
body.cat-vision .filter-chip.active { background: #444; border-color: #888; color: #fff; }
body.cat-vision .btn-label,
body.cat-vision .place-info h4 { color: #fff; }
body.cat-vision .place-info p,
body.cat-vision .btn-hint { color: #aaa; }

/* Подсветка релевантной ячейки доступности */
.access-cell--highlight {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  transform: scale(1.04);
}

/* ───────────────────────────
   СЕКЦИИ ПРОФИЛЯ В НАСТРОЙКАХ (улучшение #1)
   Видны только для нужной категории
   ─────────────────────────── */
.profile-section { display: none; }

body.cat-mobility .cat-mobility-section { display: block; }
body.cat-hearing  .cat-hearing-section  { display: block; }
body.cat-vision   .cat-vision-section   { display: block; }

.settings-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--gray-lt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  min-height: var(--touch-min);
  flex: 1;
}
.settings-select:focus { outline: 3px solid var(--blue); }

/* ───────────────────────────
   ЭКРАН МЕСТА (улучшение #2)
   ─────────────────────────── */
.places-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 8px;
}
.places-count { font-size: 13px; color: var(--blue); font-weight: 600; }
.places-hint  { font-size: 11px; color: var(--text-sec); }

/* ───────────────────────────
   КРАУДСОРСИНГ (улучшение #4)
   ─────────────────────────── */
.crowdsource-section-wrap {
  margin-top: 24px;
  padding: 18px 0 0;
  border-top: 1px solid var(--border);
}

.crowdsource-intro {
  font-size: 13px;
  color: var(--text-sec);
  margin: 0 0 16px;
  line-height: 1.5;
}

/* Звёзды */
.star-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.star-label { font-size: 14px; font-weight: 600; white-space: nowrap; }
.stars { display: flex; gap: 4px; }
.star-btn {
  background: none;
  border: none;
  font-size: 32px;
  color: #ccc;
  cursor: pointer;
  padding: 4px;
  min-width: 44px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.1s, transform 0.1s;
}
.star-btn.active  { color: #F5A623; }
.star-btn:hover   { transform: scale(1.15); }
.star-btn:focus   { outline: 3px solid var(--blue); border-radius: 6px; }

/* Секции голосования */
.crowdsource-section {
  margin-bottom: 16px;
}
.access-vote-label {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 8px;
  display: block;
}
.access-vote-row {
  display: flex;
  gap: 8px;
}
.access-vote-btn {
  flex: 1;
  border: 1.5px solid var(--border);
  background: var(--gray-lt);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  min-height: var(--touch-min);
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
}
.access-vote-btn:focus { outline: 3px solid var(--blue); }
.access-vote-btn[aria-pressed="true"],
.access-vote-btn.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* Комментарий */
.crowdsource-comment-wrap { margin-bottom: 16px; }
.crowdsource-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  background: var(--gray-lt);
  resize: vertical;
  line-height: 1.5;
  margin-top: 6px;
}
.crowdsource-textarea:focus { outline: 3px solid var(--blue); border-color: var(--blue); }

/* Статус отправки */
.crowdsource-status {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}
.crowdsource-status--ok  { background: var(--green-lt); color: var(--green); }
.crowdsource-status--err { background: var(--red-lt);   color: var(--red); }

/* Кнопка «Отправить» в disabled */
#crowdsource-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* ================================================================
   ПАТЧ к main.css — добавить в КОНЕЦ файла static/css/main.css
   Fixes: filter chips clipping, wrapping filter system,
          profile-aware chips, crowdsource form, text drawer,
          category UI themes
   ================================================================ */

/* ────────────────────────────────────────────────────────────────
   FIX: Filter row — wrap instead of horizontal scroll
   Chips were clipped because overflow-x:auto inside a fixed
   position:fixed screen creates a new stacking context that
   clips children at the scroll boundary edge on iOS Safari.
   ──────────────────────────────────────────────────────────────── */
.filter-row {
  display: flex;
  flex-wrap: wrap;          /* ← key fix: chips wrap to next line */
  gap: 7px;
  padding: 4px 14px 14px;
  overflow: visible;        /* ← no more clipping */
}

.filter-chip {
  background: var(--gray-lt);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;      /* each chip stays on one line */
  cursor: pointer;
  height: 36px;             /* fixed height — not min-height — prevents stretch */
  line-height: 36px;        /* vertically center text without flex */
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  color: var(--text);
  flex-shrink: 0;           /* never compress — wrap instead */
}
.filter-chip .chip-icon { font-size: 13px; line-height: 1; }
.filter-chip .chip-sub  { font-size: 11px; opacity: 0.7; }

/* Standard active state */
.filter-chip.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* Category-coloured active chips */
.filter-chip.chip-mobility.active { background: #1B4F8A; border-color: #1B4F8A; }
.filter-chip.chip-hearing.active  { background: #2E7D32; border-color: #2E7D32; }
.filter-chip.chip-vision.active   { background: #5C35A6; border-color: #5C35A6; }

/* Profile-derived chip (shown for the user's exact disability sub-type) */
.filter-chip.chip-profile {
  background: var(--blue-lt);
  border-color: var(--blue);
  color: var(--blue);
  font-weight: 600;
}
.filter-chip.chip-profile.active {
  background: var(--blue);
  color: #fff;
}

/* ────────────────────────────────────────────────────────────────
   PLACES screen meta bar
   ──────────────────────────────────────────────────────────────── */
.places-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 8px;
}
.places-count {
  font-size: 13px;
  color: var(--blue);
  font-weight: 600;
}
.places-sort-hint {
  font-size: 11px;
  color: var(--text-sec);
}

/* ────────────────────────────────────────────────────────────────
   CATEGORY BODY THEMES — instant UI adaptation on category select
   ──────────────────────────────────────────────────────────────── */

/* Mobility: blue header */
body.cat-mobility .main-header { background: #1B4F8A; }

/* Hearing: green accent, voice buttons dimmed */
body.cat-hearing .main-header { background: #2E7D32; }
body.cat-hearing .filter-chip.chip-hearing.active { background: #2E7D32; border-color: #2E7D32; }
body.cat-hearing .place-card  { border-left: 4px solid #2E7D32; }
body.cat-hearing .voice-btn,
body.cat-hearing .voice-fab-header { opacity: 0.35; pointer-events: none; }

/* Vision: dark high-contrast theme */
body.cat-vision {
  --blue: #7C4DFF;
  --blue-lt: #EDE7FF;
  background: #121218;
}
body.cat-vision .screen { background: #1E1E28; color: #F0EEF8; }
body.cat-vision .sub-header { background: #1E1E28; border-color: rgba(255,255,255,0.1); }
body.cat-vision .main-header { background: #0D0D14; }
body.cat-vision .main-btn,
body.cat-vision .place-card,
body.cat-vision .category-btn,
body.cat-vision .settings-option,
body.cat-vision .toggle-row,
body.cat-vision .help-card {
  background: #2A2738;
  border-color: rgba(255,255,255,0.1);
  color: #F0EEF8;
}
body.cat-vision .btn-label,
body.cat-vision .place-info h4 { color: #F0EEF8; }
body.cat-vision .btn-hint,
body.cat-vision .place-info p,
body.cat-vision .text-sec { color: #9E9BB0; }
body.cat-vision .search-input,
body.cat-vision .route-field input,
body.cat-vision .cs-input,
body.cat-vision .crowdsource-textarea {
  background: #2A2738;
  color: #F0EEF8;
  border-color: rgba(255,255,255,0.15);
}
body.cat-vision .filter-chip { background: #2A2738; border-color: rgba(255,255,255,0.15); color: #F0EEF8; }
body.cat-vision .filter-chip.active { background: #7C4DFF; border-color: #7C4DFF; }
body.cat-vision .cs-group,
body.cat-vision .cs-detail-btn,
body.cat-vision .access-vote-btn { background: #32304A; border-color: rgba(255,255,255,0.1); color: #F0EEF8; }
body.cat-vision .section-title { color: #9E9BB0; }

/* Highlight the user's relevant access cell in place card */
.access-cell--highlight {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  transform: scale(1.05);
  position: relative;
  z-index: 1;
}

/* ────────────────────────────────────────────────────────────────
   PROFILE DETAIL SECTIONS IN SETTINGS
   Only the section matching the active category is shown
   ──────────────────────────────────────────────────────────────── */
.profile-section { display: none; }
body.cat-mobility .cat-mobility-section { display: block; }
body.cat-hearing  .cat-hearing-section  { display: block; }
body.cat-vision   .cat-vision-section   { display: block; }

.settings-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center no-repeat;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  cursor: pointer;
  min-height: var(--touch-min);
  flex: 1;
  font-family: inherit;
  color: var(--text);
}
.settings-select:focus { outline: 3px solid var(--blue); }
.settings-option.with-select {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.settings-option.with-select > span { font-size: 13px; }
.settings-option.with-select .settings-select { width: 100%; }

/* ────────────────────────────────────────────────────────────────
   TEXT DRAWER (replaces alert() for "Читать")
   ──────────────────────────────────────────────────────────────── */
.text-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 400;
  display: flex;
  align-items: flex-end;
}
.text-drawer-backdrop[hidden] { display: none; }

.text-drawer {
  width: 100%;
  background: #fff;
  border-radius: 22px 22px 0 0;
  max-height: 82vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  animation: td-slide-up 0.22s ease-out;
}
@keyframes td-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.td-handle {
  width: 40px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 0;
}

.td-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
}
.td-header h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
  flex: 1;
}
.td-close {
  background: var(--gray-lt);
  border: none;
  border-radius: 50%;
  width: 36px; height: 36px;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--text);
}
.td-close:focus { outline: 3px solid var(--blue); }

.td-body { padding: 16px 18px 4px; }
.td-address { font-size: 14px; color: var(--text-sec); margin: 0 0 10px; line-height: 1.5; }
.td-hours   { font-size: 13px; color: var(--green); margin: 0 0 12px; font-weight: 500; }
.td-desc    { font-size: 15px; line-height: 1.7; margin: 0 0 16px; color: var(--text); }

.td-access-grid {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.td-notes { font-size: 12px; color: var(--text-sec); margin: 0 0 16px; line-height: 1.6; }

.td-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 18px 8px;
}

/* ────────────────────────────────────────────────────────────────
   CROWDSOURCE FORM — comprehensive data collection
   ──────────────────────────────────────────────────────────────── */
.cs-wrap {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.cs-intro {
  font-size: 13px;
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* Progress bar */
.cs-progress {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-bottom: 18px;
}
.cs-prog-step {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.2s;
}
.cs-prog-step.filled { background: var(--blue); }
.cs-prog-label {
  font-size: 11px;
  color: var(--text-sec);
  white-space: nowrap;
  margin-left: 8px;
  min-width: 52px;
  text-align: right;
}

/* Section card */
.cs-card {
  background: var(--gray-lt);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 10px;
}
.cs-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-card-title span { font-size: 17px; }

/* Yes / Partial / No row */
.cs-yn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.cs-yn-btn {
  flex: 1;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 0 4px;
  height: 48px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  color: var(--text);
}
.cs-yn-btn .yn-ico { font-size: 15px; line-height: 1; }
.cs-yn-btn .yn-txt { font-size: 11px; line-height: 1; }
.cs-yn-btn:focus { outline: 3px solid var(--blue); }
.cs-yn-btn.sel-yes     { background: #EAF3DE; color: #2E7D32; border-color: #2E7D32; }
.cs-yn-btn.sel-partial { background: #FAEEDA; color: #E65100; border-color: #E65100; }
.cs-yn-btn.sel-no      { background: #FCEBEB; color: #C62828; border-color: #C62828; }

/* Feature checkboxes */
.cs-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 6px;
}
.cs-feat-btn {
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  transition: background 0.12s, border-color 0.12s;
  color: var(--text);
  line-height: 1.3;
}
.cs-feat-btn .feat-ico { font-size: 15px; flex-shrink: 0; }
.cs-feat-btn:focus { outline: 3px solid var(--blue); }
.cs-feat-btn.on {
  background: var(--blue-lt);
  border-color: var(--blue);
  color: var(--blue);
}

/* Inline selects inside card */
.cs-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.cs-sel-group { display: flex; flex-direction: column; gap: 4px; }
.cs-sel-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-sec);
}
.cs-sel {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  height: 38px;
}
.cs-sel:focus { outline: 3px solid var(--blue); }

/* Stars */
.cs-stars-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cs-stars-label {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.cs-stars {
  display: flex;
  gap: 2px;
}
.cs-star {
  background: none;
  border: none;
  font-size: 34px;
  color: #D4D0C8;
  cursor: pointer;
  padding: 2px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: color 0.1s, transform 0.1s;
}
.cs-star.lit   { color: #F5A623; }
.cs-star:hover { transform: scale(1.18); }
.cs-star:focus { outline: 3px solid var(--blue); border-radius: 6px; }

/* Photo upload */
.cs-photo-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cs-photo-add {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  height: 44px;
  transition: border-color 0.15s;
  color: var(--text);
}
.cs-photo-add:hover { border-color: var(--blue); color: var(--blue); }
.cs-photo-add input[type=file] { display: none; }
.cs-photo-thumb {
  width: 54px; height: 54px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
}

/* Comment */
.cs-comment-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-sec);
  margin-bottom: 6px;
}
.cs-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
  background: var(--gray-lt);
  color: var(--text);
}
.cs-textarea:focus { outline: 3px solid var(--blue); border-color: var(--blue); }

/* Visit context */
.cs-context-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.cs-ctx-btn {
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  transition: background 0.12s, border-color 0.12s;
}
.cs-ctx-btn.on { background: var(--blue-lt); border-color: var(--blue); color: var(--blue); }
.cs-ctx-btn:focus { outline: 3px solid var(--blue); }

/* Submit row */
.cs-submit-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.cs-anon-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sec);
  cursor: pointer;
  white-space: nowrap;
}
.cs-anon-toggle input[type=checkbox] {
  width: 18px; height: 18px;
  cursor: pointer;
}
.cs-submit-btn {
  flex: 1;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 15px 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  min-height: 52px;
  transition: background 0.15s, transform 0.1s;
}
.cs-submit-btn:hover   { background: #163F72; }
.cs-submit-btn:focus   { outline: 3px solid var(--blue); outline-offset: 3px; }
.cs-submit-btn:active  { transform: scale(0.98); }
.cs-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Status message */
.cs-status {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  margin-top: 12px;
}
.cs-status.ok  { background: var(--green-lt); color: var(--green); }
.cs-status.err { background: var(--red-lt);   color: var(--red); }
/* Patch A: GPS fallback notice on Nearby screen */
.geo-fallback-banner {
  font-size: 0.8rem;
  color: var(--text-secondary, #666);
  background: var(--surface-warn, #fff8e1);
  border-left: 3px solid var(--warn, #f5a623);
  padding: 0.45rem 0.75rem;
  margin: 0 0 0.5rem;
  border-radius: 0 6px 6px 0;
  line-height: 1.4;
}

/* PATCH_B_cs_status_info — photo upload in-progress state */
.cs-status.info {
  color: var(--text-info, #1565c0);
  background: var(--surface-info, #e3f2fd);
  border-left: 3px solid var(--info, #1976d2);
  padding: 0.5rem 0.75rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.85rem;
}

/* ══════════════════════════════════════════════════════
   PATCH C — place gallery, rating, facilities, contact
   ══════════════════════════════════════════════════════ */

/* Photo gallery strip */
.place-gallery:not([hidden]) {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 16px 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.place-gallery::-webkit-scrollbar { display: none; }

.place-photo {
  flex-shrink: 0;
  width: 220px;
  height: 148px;
  object-fit: cover;
  border-radius: var(--radius-sm, 8px);
  scroll-snap-align: start;
  background: var(--gray-lt, #f0f0f0);
}

/* Rating row */
.place-rating-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 12px;
  font-size: 14px;
}
.star-display {
  color: var(--amber, #f5a623);
  letter-spacing: 1px;
  font-size: 15px;
}
.rating-val   { font-weight: 700; font-size: 15px; }
.rating-count { font-size: 12px; color: var(--text-sec, #888); }

/* Entrance notes */
.place-entrance-wrap { margin: 0 0 16px; }
.place-entrance {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-sec, #555);
  margin: 0;
  background: var(--blue-lt, #e8f4fd);
  border-left: 3px solid var(--blue, #2d7dd2);
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

/* Facility chips */
.place-facilities {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}
.facility-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--green-lt, #e8f5e9);
  color: var(--green, #2e7d32);
  white-space: nowrap;
}

/* Contact links */
.place-contact-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.place-contact-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue, #2d7dd2);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--blue-lt, #b3d7f7);
  border-radius: var(--radius-sm, 8px);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.place-contact-link:hover { background: var(--blue-lt, #e8f4fd); }

/* =====================================================
   PATCH D -- adapted route button + route player
   ===================================================== */

.route-adapted-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  margin: 8px 0 0;
  background: var(--green, #2e7d32);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: var(--radius, 12px);
  cursor: pointer;
  text-align: center;
}
.route-adapted-btn:hover  { background: #245f27; }
.route-adapted-btn:active { transform: scale(0.98); }

.route-player {
  margin: 12px 0 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e0e0e0);
  border-radius: var(--radius, 12px);
  overflow: hidden;
}
.route-player-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border, #e0e0e0);
}
.route-player-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-sec, #666);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.route-player-close {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-sec, #888);
  padding: 0 0 0 8px;
}
.route-progress-bar {
  height: 4px;
  background: var(--gray-lt, #e0e0e0);
}
.route-progress-fill {
  height: 100%;
  background: var(--blue, #1B4F8A);
  transition: width 0.3s ease;
  width: 0%;
}
.route-step-card { padding: 14px 16px 10px; }
.route-step-number { font-size: 11px; font-weight: 600; color: var(--text-sec, #888); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.route-step-text   { font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.route-obstacle-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--amber-lt, #fff8e1); color: var(--amber, #f57f17); margin-bottom: 8px; }
.route-step-dist   { font-size: 12px; color: var(--blue, #1B4F8A); font-weight: 600; }
.route-player-controls { display: flex; gap: 8px; padding: 10px 16px 14px; justify-content: center; }
.rp-btn { background: var(--gray-lt, #f5f5f5); border: 1px solid var(--border, #e0e0e0); border-radius: var(--radius-sm, 8px); padding: 10px 20px; font-size: 18px; cursor: pointer; flex: 1; max-width: 80px; }
.rp-btn--play { background: var(--blue, #1B4F8A); color: #fff; border-color: var(--blue, #1B4F8A); max-width: 100px; font-size: 20px; }
.rp-btn:active { transform: scale(0.96); }
.route-caption { margin: 8px 0 0; padding: 10px 14px; background: #000; color: #fff; font-size: 16px; font-weight: 500; line-height: 1.5; border-radius: var(--radius-sm, 8px); text-align: center; }

/* =====================================================
   PATCH E -- chat drawer
   ===================================================== */

.chat-backdrop:not([hidden]) {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 450;
  display: flex;
  align-items: flex-end;
}
.chat-drawer {
  width: 100%;
  max-height: 82vh;
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  z-index: 451;
}
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}
.chat-title {
  font-size: 16px;
  font-weight: 700;
}
.chat-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--text-sec, #888);
  padding: 8px;          /* PATCH_CHAT_CSS_FIX: bigger hit area */
  margin: -8px;          /* compensate so layout unchanged */
  position: relative;
  z-index: 410;          /* above backdrop z-index:400 */
  pointer-events: all;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-msg { display: flex; }
.chat-msg--user  { justify-content: flex-end; }
.chat-msg--bot   { justify-content: flex-start; }
.chat-bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.chat-msg--user .chat-bubble {
  background: var(--blue, #1B4F8A);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg--bot .chat-bubble {
  background: var(--gray-lt, #f0f0f0);
  color: var(--text-primary, #111);
  border-bottom-left-radius: 4px;
}
.chat-bubble.typing { opacity: .5; font-style: italic; }
.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px 18px;
  border-top: 1px solid var(--border, #e0e0e0);
  flex-shrink: 0;
}
.chat-mic-btn {
  background: var(--surface-info, #e3f2fd);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-mic-btn.recording { background: #ffebee; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
.chat-input {
  flex: 1;
  border: 1px solid var(--border, #e0e0e0);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px;
  outline: none;
}
.chat-input:focus { border-color: var(--blue, #1B4F8A); }
.chat-send-btn {
  background: var(--blue, #1B4F8A);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

/* =====================================================
   PATCH F -- GPS badge on route player
   ===================================================== */

.route-gps-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  margin: 0 16px 10px;
  border-radius: 999px;
  background: var(--green-lt, #e8f5e9);
  color: var(--green, #2e7d32);
  display: inline-block;
}


/* =========================================================
   AD_MOCK_PATCH: mock ad placements
   ========================================================= */
.ad-banner-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: repeating-linear-gradient(135deg, #f4f0e6, #f4f0e6 10px, #efe9d8 10px, #efe9d8 20px);
  border-bottom: 1px dashed #c9bd9a;
  font-size: 12px;
  color: #7a6a3f;
  flex-shrink: 0;
}
.ad-banner-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #7a6a3f;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.ad-banner-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-interstitial {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-interstitial[hidden] { display: none; }
.ad-interstitial-box {
  width: min(92vw, 420px);
  height: min(80vh, 620px);
  background: #f4f0e6;
  border-radius: var(--radius-lg, 20px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.ad-interstitial-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: #7a6a3f;
}
.ad-interstitial-topbar .ad-banner-tag { background: rgba(255,255,255,0.25); }
.ad-close-btn {
  min-width: var(--touch-min, 44px);
  min-height: var(--touch-min, 44px);
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.ad-interstitial-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(135deg, #f4f0e6, #f4f0e6 14px, #efe9d8 14px, #efe9d8 28px);
}
.ad-placeholder-text {
  font-size: 22px;
  font-weight: 600;
  color: #7a6a3f;
  text-align: center;
  padding: 0 20px;
}

/* native ad card in Места list */
.place-card.place-card--ad {
  border: 1px dashed #c9bd9a;
  background: #fbf8ee;
  position: relative;
}
.place-card--ad .ad-native-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #7a6a3f;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}