/* Визуальная система 2026: тёмно-синяя, контрастная и спокойная.
   Органические формы живут в фоне и углах блоков, поэтому интерфейс
   остаётся предсказуемым и доступным, но больше не выглядит сеткой плиток. */

body {
  background:
    radial-gradient(ellipse 38% 28% at 2% 2%, rgba(66, 133, 255, .22), transparent 72%),
    radial-gradient(ellipse 28% 24% at 98% 86%, rgba(255, 197, 61, .16), transparent 72%),
    #edf3fb;
  font-size: 16px;
  overflow-x: clip;
}

.app-shell {
  position: relative;
  isolation: isolate;
  width: min(1180px, calc(100% - 40px));
  margin: 14px auto;
}

.app-shell::before,
.app-shell::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.app-shell::before {
  width: 170px;
  height: 110px;
  top: 106px;
  left: -72px;
  border-radius: 62% 38% 70% 30% / 45% 64% 36% 55%;
  background: #75a7ff;
  opacity: .24;
  rotate: -13deg;
}

.app-shell::after {
  width: 96px;
  height: 96px;
  right: -30px;
  bottom: 54px;
  border-radius: 50% 34% 58% 42% / 38% 62% 40% 60%;
  background: #ffc83d;
  opacity: .3;
  rotate: 18deg;
}

.layout-app .app-shell {
  height: min(920px, calc(100dvh - 28px));
  grid-template-rows: 72px minmax(0, 1fr) 28px;
}

.layout-doc .app-shell {
  min-height: calc(100dvh - 40px);
  grid-template-rows: 78px 1fr auto;
}

.topbar {
  position: relative;
  z-index: 40;
  align-self: center;
  min-height: 66px;
  padding: 8px 12px 8px 10px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 26px 38px 24px 34px;
  background: linear-gradient(118deg, #061a3c 0%, #0b2f71 62%, #123e8b 100%);
  box-shadow: 0 12px 34px rgba(5, 27, 65, .24);
  overflow: visible;
}

.topbar::after {
  content: "";
  position: absolute;
  right: 28%;
  top: -5px;
  width: 48px;
  height: 11px;
  border-radius: 999px 60% 999px 45%;
  background: #ffc83d;
  rotate: -3deg;
}

.brand { color: #fff; gap: 13px; }
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 46% 54% 64% 36% / 38% 60% 40% 62%;
  color: #08204a;
  background: #fff;
  box-shadow: 0 5px 16px rgba(0,0,0,.16);
}
.brand:hover .brand-mark { color: #fff; background: #2f73ff; transform: rotate(-3deg); }
.brand-copy { gap: 1px; }
.brand-copy strong { font-size: 17px; letter-spacing: -.015em; }
.brand-copy small { color: #dce8ff; font-size: 12px; }

.topnav { gap: 3px; margin-right: 0; }
.topnav a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  color: #dce8ff;
  font-size: 14px;
  font-weight: 600;
}
.topnav a:hover { color: #fff; background: rgba(255,255,255,.13); }
.topnav a.is-current {
  color: #071c43;
  background: #fff;
  box-shadow: 0 4px 15px rgba(1,14,36,.19);
}

.nav-toggle {
  border-color: rgba(255,255,255,.3);
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
}
.nav-toggle span { background: #fff; }

.chat {
  border: 1px solid rgba(155, 178, 214, .55);
  border-radius: 38px 24px 52px 30px;
  background:
    radial-gradient(ellipse 260px 180px at 100% 0%, rgba(55, 119, 244, .12), transparent 72%),
    #fff;
  box-shadow: var(--shadow);
}

.conversation { padding: 20px clamp(24px, 7vw, 90px) 16px; }
.welcome { width: min(900px, 100%); padding-top: clamp(2px, 1.2vh, 12px); }
.welcome-icon {
  width: 42px;
  height: 39px;
  margin-bottom: 9px;
  border-radius: 46% 54% 63% 37% / 39% 60% 40% 61%;
  background: linear-gradient(140deg, #1754ca, #3380ff);
  box-shadow: 12px 8px 0 -5px #ffcf4d, 0 12px 24px rgba(36,99,235,.24);
  rotate: -2deg;
}
.welcome-icon svg { width: 22px; }
.eyebrow {
  margin-bottom: 7px;
  color: #1b54c7;
  font-size: 13px;
  letter-spacing: .075em;
}
.welcome h1 {
  max-width: 22ch;
  font-size: clamp(37px, 4vw, 50px);
  line-height: 1.04;
  letter-spacing: -.048em;
  text-wrap: balance;
}
.welcome-text {
  max-width: 52ch;
  margin: 9px 0 13px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.55;
}
.suggestions-label { margin-bottom: 6px; color: #3e5270; font-size: 12px; }
.suggestions { gap: 6px 9px; }
.suggestions button {
  position: relative;
  min-height: 60px;
  padding: 8px 14px;
  gap: 14px;
  border-color: #c8d6e9;
  border-radius: 23px 34px 25px 18px;
  box-shadow: 0 6px 18px rgba(8, 35, 80, .06);
  overflow: hidden;
}
.suggestions button:nth-child(2n) { border-radius: 34px 20px 18px 28px; }
.suggestions button::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 17px;
  right: -9px;
  bottom: -3px;
  border-radius: 50% 0 0 0;
  background: #ffc83d;
  opacity: .9;
}
.suggestions button:nth-child(2n)::after { background: #6aa0ff; }
.suggestions button:hover {
  border-color: #6d91ca;
  background: #f4f7ff;
  box-shadow: 0 12px 30px rgba(20, 68, 150, .13);
  transform: translateY(-2px);
}
.suggestion-icon {
  flex-basis: 38px;
  height: 38px;
  border-radius: 50% 42% 55% 45%;
  color: #fff;
  background: linear-gradient(145deg, #0b357c, #2f73ff);
}
.suggestion-icon svg { width: 21px; height: 21px; }
.suggestions b { margin-bottom: 3px; font-size: 15px; }
.suggestions small { color: #53637b; font-size: 13px; }

.city-now {
  margin-bottom: 10px;
  padding: 8px 13px;
  border-color: #aac4ef;
  border-radius: 28px 16px 28px 16px;
  color: #0b2d69;
  background: linear-gradient(105deg, #e2ecff, #f6f8ff);
  box-shadow: 0 8px 22px rgba(20, 68, 150, .07);
}
.city-now-copy b { font-size: 15px; }
.city-now-copy small { font-size: 12px; opacity: .82; }

.message { width: min(830px, 100%); margin-bottom: 22px; }
.user-bubble {
  padding: 14px 18px;
  border-radius: 26px 26px 8px 26px;
  background: linear-gradient(135deg, #092454, #174fae);
  font-size: 16px;
  line-height: 1.5;
  box-shadow: 0 8px 22px rgba(8,36,84,.18);
}
.assistant-row { grid-template-columns: 42px minmax(0, 1fr); gap: 13px; }
.assistant-avatar {
  width: 42px;
  height: 42px;
  border-radius: 45% 55% 62% 38% / 40% 62% 38% 60%;
  background: linear-gradient(145deg, #1b5ce0, #4690ff);
  box-shadow: 5px 5px 0 -2px #ffd45c;
}
.assistant-bubble {
  padding: 21px 22px;
  border-color: #cbd8eb;
  border-radius: 12px 28px 28px 28px;
  box-shadow: var(--shadow-card);
}
.answer-status { color: #164bac; font-size: 12px; }
.answer-copy { color: #162b4b; font-size: 16px; line-height: 1.68; }
.route-list li { grid-template-columns: 29px 1fr; color: #263b5b; font-size: 15px; line-height: 1.55; }
.route-list li::before { width: 27px; height: 27px; border-radius: 50%; font-size: 12px; }
.contacts { padding: 14px 16px; border-radius: 18px 28px 18px 28px; color: #263b5b; font-size: 14px; }
.answer-warning { padding: 13px 15px; border-radius: 14px 24px 14px 24px; font-size: 14px; }
.site-links-title { font-size: 12px; }
.site-link { padding: 13px 14px; border-radius: 18px 26px 18px 26px; }
.site-link-icon { width: 36px; height: 36px; border-radius: 50%; }
.site-link-copy b { font-size: 14px; }
.site-link-copy small { font-size: 13px; }
.primary-source { min-height: 46px; padding: 0 18px; border-radius: 999px; font-size: 14px; }
.source-details summary { min-height: 46px; font-size: 13px; }
.source-list { border-radius: 22px 22px 22px 8px; box-shadow: var(--shadow); }
.source-list a { padding: 11px 12px; border-radius: 12px; font-size: 13px; }

.composer-area {
  position: relative;
  padding: 11px clamp(18px, 6vw, 76px) 12px;
  border-top-color: #dce6f4;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
}
.composer {
  min-height: 54px;
  padding: 6px 7px 6px 18px;
  border: 1.5px solid #8395af;
  border-radius: 30px 30px 30px 18px;
  box-shadow: 0 8px 24px rgba(8, 35, 80, .09);
}
.composer:focus-within { border-color: #2463eb; box-shadow: 0 0 0 4px #dfe9ff, 0 10px 28px rgba(8,35,80,.12); }
.composer textarea { height: 40px; padding: 9px 0 7px; font-size: 16px; }
.composer textarea { scrollbar-width: none; }
.composer textarea::-webkit-scrollbar { display: none; }
.composer textarea::placeholder { color: #64738a; }
.send-button {
  flex-basis: 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(145deg, #1d5ee3, #2c78ff);
  box-shadow: 0 6px 15px rgba(36,99,235,.3);
}
.voice-button {
  width: 46px;
  height: 46px;
  margin-right: 2px;
  border-color: #aebed5;
  color: #284468;
  background: #f7f9fd;
}
.voice-button:hover { border-color: #2463eb; color: #164bac; background: #e8efff; }
.voice-button.is-listening { border-color: #b3261e; background: #b3261e; color: #fff; }
.voice-button.is-processing { border-color: #174fae; color: #fff; background: #174fae; animation: voicePulse 1.1s ease-in-out infinite; }
.voice-status {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 9px 14px;
  border: 1px solid #a9c2ec;
  border-radius: 999px;
  color: #103b83;
  background: rgba(244, 248, 255, .98);
  box-shadow: 0 8px 24px rgba(7,31,75,.16);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  transform: translateX(-50%);
}
.voice-status.is-listening { color: #fff; border-color: #174fae; background: #174fae; }
.voice-status.is-processing { color: #fff; border-color: #174fae; background: #174fae; }
.voice-status.is-ready { color: #075c41; border-color: #8bd2ba; background: #ecfbf5; }
.voice-status.is-error { color: #8b211c; border-color: #e7aaa6; background: #fff3f2; }
.composer-note { color: #596a82; font-size: 12px; }
.legal-line { color: #384d6c; font-size: 12px; }
.legal-line .about-button {
  min-height: 31px;
  border-color: #a9bad2;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 12px;
}
.status i { width: 9px; height: 9px; background: #18a873; box-shadow: 0 0 0 4px rgba(24,168,115,.12); }
.about-dialog { border-radius: 34px 24px 38px 24px; }
.about-dialog p, .about-dialog li { color: #334867; font-size: 15px; }

/* Документные страницы */
.page {
  position: relative;
  padding: 42px 24px 54px;
}
.page::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px;
  right: 6%;
  width: 190px;
  height: 100px;
  border-radius: 46% 54% 36% 64% / 66% 36% 64% 34%;
  background: linear-gradient(135deg, rgba(63,127,255,.18), rgba(255,208,81,.2));
  rotate: 8deg;
}
.page-title {
  margin-bottom: 14px;
  max-width: 19ch;
  color: #071a3d;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 1.04;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.page-lead { margin-bottom: 28px; color: #334867; font-size: 18px; line-height: 1.62; }
.page-head { max-width: 76ch; margin-bottom: 30px; }
.section-title { color: #0a285e; font-size: 25px; letter-spacing: -.02em; }
.block { padding: 38px 0; border-bottom-color: #c6d5e9; }
.block-note { color: #465a77; font-size: 15px; line-height: 1.65; }
.section-tabs { gap: 10px; border-bottom: 0; }
.section-tabs a, .filter-chip {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-color: #b6c8e2;
  color: #243a5b;
  background: #fff;
  font-size: 14px;
  box-shadow: 0 3px 10px rgba(8,35,80,.05);
}
.section-tabs a:hover, .filter-chip.is-active {
  color: #fff;
  background: #0b357c;
}

:is(.olymp-card, .prep-card, .school-card, .calendar-card, .news-item,
    .outage-card, .report-card, .stat-card, .org-card) {
  position: relative;
  border-color: #c7d5e7;
  border-radius: 24px 31px 22px 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
:is(.olymp-card, .prep-card, .school-card, .calendar-card, .news-item,
    .outage-card, .report-card, .stat-card, .org-card):nth-child(2n) {
  border-radius: 34px 20px 28px 24px;
}
:is(.olymp-card, .prep-card, .school-card, .calendar-card, .news-item,
    .outage-card, .report-card, .stat-card, .org-card)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffd157;
  opacity: .82;
}
:is(.olymp-card, .prep-card, .school-card, .calendar-card, .news-item,
    .outage-card, .report-card, .stat-card, .org-card):nth-child(3n)::after {
  background: #71a3ff;
}
:is(.olymp-card, .prep-card, .school-card, .calendar-card, .news-item,
    .outage-card, .report-card, .org-card) h3 { font-size: 17px; line-height: 1.4; }

.olymp-short, .olymp-note, .calendar-what, .calendar-how,
.news-desc, .outage-summary, .outage-streets, .report-text,
.school-kind, .school-person { font-size: 14px; line-height: 1.6; }
.olymp-row { font-size: 14px; }
.olymp-primary, .primary-button {
  min-height: 46px;
  border-radius: 999px;
  background: #0b357c;
  font-size: 15px;
  box-shadow: 0 7px 18px rgba(11,53,124,.18);
}
.olymp-secondary, .ghost-button { min-height: 42px; border-radius: 999px; font-size: 14px; }
.ask-box-wrap, .subscribe-box, .field-group {
  border-color: #b7cbec;
  border-radius: 28px 40px 26px 20px;
  background: linear-gradient(135deg, #e5eeff, #f7f9ff 70%);
  box-shadow: 0 10px 30px rgba(8,35,80,.06);
}
.field > span { color: #243a5b; font-size: 15px; }
.field-hint, .group-note, .form-hint { color: #4b5f7b; font-size: 14px; }
.field input, .field select, .field textarea, .map-search,
.subscribe-form input, .ask-box input {
  min-height: 50px;
  border-color: #71839f;
  border-radius: 16px 22px 16px 16px;
  font-size: 16px;
}
.checkbox-field { font-size: 15px; }
.site-footer {
  padding: 20px 24px 10px;
  color: #435775;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}
.site-footer p { margin: 0 auto; }

/* Карта остаётся инструментом, но получает тот же контраст и ритм. */
.map-page {
  grid-template-columns: 390px minmax(0, 1fr);
  border: 1px solid #bccde4;
  border-radius: 34px 22px 44px 28px;
  background: #fff;
  box-shadow: var(--shadow);
}
.map-side { background: #edf3fb; border-right-color: #bfcfe3; }
.map-side-head { flex: 0 0 auto; padding: 14px 14px 10px; border-bottom-color: #c2d2e6; }
.map-side-head h1 { margin-bottom: 8px; font-size: 19px; }
.map-side-head .map-search { min-height: 44px; margin-bottom: 7px; padding: 9px 11px; font-size: 14px; }
.map-side-head .filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
}
.map-side-head .filter-chip {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  padding: 6px 7px;
  font-size: 12px;
  line-height: 1.15;
  box-shadow: none;
}
.map-side-head .search-hint { margin-top: 6px; padding: 6px 8px; font-size: 12.5px; }
.org-names { padding: 7px; }
.org-detail { padding: 16px 18px 22px; }
.map-side.has-detail .map-side-head { padding: 7px 9px; }
.map-side.has-detail .map-side-head h1,
.map-side.has-detail .map-side-head .map-search,
.map-side.has-detail .map-side-head .search-hint,
.map-side.has-detail .map-side-head .from-chat { display: none; }
.map-side.has-detail .map-side-head .filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  padding: 1px 0 3px;
  scrollbar-width: none;
}
.map-side.has-detail .map-side-head .filters::-webkit-scrollbar { display: none; }
.map-side.has-detail .map-side-head .filter-chip {
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  padding-inline: 10px;
}
.org-name { min-height: 44px; padding: 11px 12px; border-radius: 14px 22px 14px 14px; color: #263b5b; font-size: 15px; }
.org-detail h2 { font-size: 19px; }
.org-detail .org-label { margin: 16px 0 5px; color: #0b357c; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.org-detail .org-text { margin: 0; color: #263b5b; font-size: 15px; line-height: 1.6; }
.detail-link, .detail-phone, .detail-back { font-size: 15px; }
.map-hint, .map-status, .coverage-note, .search-hint { font-size: 14px; }

/* У всех анонсов один и тот же каркас: сроки, классы, предметы, пояснение. */
.news-item { display: flex; flex-direction: column; gap: 12px; padding: 17px; }
.news-head { margin: 0; }
.news-name { font-size: 16px; line-height: 1.4; }
.news-head .news-name { margin: 0; }
.news-facts { display: grid; gap: 7px; }
.news-fact {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.45;
}
.news-fact-label { color: var(--muted); }
.news-fact-value { color: var(--ink-soft); }
.news-desc { margin: auto 0 0; color: #465a77; }
.news-more {
  align-self: flex-start;
  margin-top: 2px;
  color: #0b357c;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.news-more:hover { text-decoration: underline; }

/* Ссылки в карточках организаций не вылезают из рамок на узких карточках. */
.place-links { gap: 8px; }
.place-links .olymp-secondary {
  min-width: 0;
  max-width: 100%;
  min-height: 40px;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 860px) {
  .map-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: 42vh auto; overflow: auto; }
  .map-area { order: -1; }
  .map-side,
  .map-side-head,
  .org-detail,
  .detail-head,
  .detail-head > div,
  #detail-body { min-width: 0; max-width: 100%; }
  .map-side { width: 100%; border-right: 0; border-top: 1px solid var(--line); overflow-x: hidden; }
  .org-detail h2,
  .org-detail .org-text,
  .detail-link,
  .detail-phone { overflow-wrap: anywhere; }
  .org-names, .org-detail { overflow: visible; }
}

@media (max-width: 980px) {
  .topnav {
    top: 72px;
    right: 0;
    left: 0;
    gap: 3px;
    padding: 10px;
    border-color: #b7c9e2;
    border-radius: 24px 14px 28px 22px;
    background: rgba(255,255,255,.98);
  }
  .topnav a { min-height: 46px; color: #213857; }
  .topnav a:hover { color: #0b357c; background: #e7efff; }
  .topnav a.is-current { color: #fff; background: #0b357c; }
}

@media (max-width: 760px) {
  body { background: #edf3fb; }
  .app-shell { width: 100%; margin: 0; }
  .app-shell::before, .app-shell::after { display: none; }
  .layout-app .app-shell { height: 100dvh; grid-template-rows: 66px minmax(0, 1fr) 20px; }
  .layout-doc .app-shell { min-height: 100dvh; grid-template-rows: 72px 1fr auto; }
  .topbar {
    min-height: 60px;
    align-self: stretch;
    padding: max(7px, env(safe-area-inset-top)) 14px 6px;
    border: 0;
    border-radius: 0 0 28px 18px;
    box-shadow: 0 8px 24px rgba(5,27,65,.19);
  }
  .topbar::after { right: 25%; width: 38px; top: auto; bottom: -3px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { display: none; }
  .nav-toggle { width: 42px; height: 42px; }
  .topnav { top: 62px; right: 12px; left: 12px; }

  .chat { border: 0; border-radius: 0; background: #fff; box-shadow: none; }
  .conversation { padding: 12px 16px 10px; }
  .welcome { padding-top: clamp(1px, 1vh, 8px); }
  .welcome-icon { width: 36px; height: 34px; margin-bottom: 7px; }
  .welcome h1 { font-size: clamp(34px, 9.5vw, 39px); line-height: 1.03; }
  .welcome-text { margin: 7px 0 10px; font-size: 16px; }
  .suggestions { gap: 5px; }
  .suggestions button { min-height: 52px; padding: 7px 12px; }
  .suggestion-icon { flex-basis: 34px; height: 34px; }
  .suggestions b { font-size: 15px; }
  .suggestions small { font-size: 13px; }

  .assistant-row { grid-template-columns: 34px minmax(0,1fr); gap: 9px; }
  .assistant-avatar { width: 34px; height: 34px; }
  .assistant-bubble { padding: 17px 15px; border-radius: 9px 23px 23px 23px; }
  .answer-copy { font-size: 15.5px; line-height: 1.62; }
  .user-bubble { max-width: 93%; font-size: 15px; }
  .route-list li { font-size: 14px; }
  .contacts, .answer-warning { font-size: 13.5px; }
  .composer-area { padding: 8px 12px max(7px, env(safe-area-inset-bottom)); }
  .composer { min-height: 52px; padding-left: 16px; }
  .composer textarea { height: 38px; font-size: 16px; }
  .voice-button { width: 40px; height: 40px; margin-right: 0; }
  .send-button { flex-basis: 40px; width: 40px; height: 40px; }
  .voice-status { bottom: calc(100% + 6px); font-size: 12.5px; }
  .legal-line { margin-top: 4px; font-size: 10px; }

  .page { padding: 30px 16px 42px; overflow-x: clip; }
  .page::before { top: 14px; right: -24px; width: 125px; height: 76px; }
  .page-title { font-size: clamp(34px, 10vw, 44px); }
  .page-lead { font-size: 16.5px; }
  .section-title { font-size: 22px; }
  .block { padding: 31px 0; }
  .site-footer { padding: 18px 16px 24px; }
  .ask-box-wrap, .subscribe-box, .field-group { padding: 19px; border-radius: 24px 32px 22px 18px; }
  .map-page { border: 0; border-radius: 0; box-shadow: none; }
  .map-side-head { padding: 12px; }
  .map-side-head h1 { font-size: 19px; }
  .map-side-head .filter-chip { min-height: 32px; font-size: 11.5px; }
  .news-fact { grid-template-columns: 68px minmax(0, 1fr); }
}

@media (max-width: 390px) {
  .eyebrow { margin-bottom: 6px; font-size: 11px; }
  .welcome h1 { font-size: 33px; }
  .welcome-text { font-size: 15px; }
  .suggestions-label { margin-bottom: 5px; font-size: 11px; }
  .suggestion-icon svg { width: 20px; height: 20px; }
}

@media (max-height: 720px) and (max-width: 760px) {
  .conversation { padding-top: 8px; }
  .welcome-icon { width: 30px; height: 28px; margin-bottom: 5px; box-shadow: 8px 5px 0 -4px #ffcf4d; }
  .welcome-icon svg { width: 18px; }
  .welcome h1 { font-size: 30px; }
  .welcome-text { margin: 5px 0 7px; font-size: 14px; }
  .city-now { margin-bottom: 6px; padding-block: 6px; }
  .suggestions button { min-height: 48px; padding-block: 5px; }
  .suggestions small { font-size: 12px; }
}

@keyframes voicePulse { 50% { opacity: .7; } }

@media (prefers-reduced-motion: reduce) {
  .welcome-icon, .app-shell::before, .app-shell::after, .topbar::after { rotate: 0deg; }
  .voice-button.is-processing { animation: none; }
}