/* ЛОКАЛ — ИИ-агент конструктора /marshrut. Чат-диалог в одной семье с «Закат над
   Волгой»: тёплый градиент-карточка, красный точечно, типографика на токенах index.css.
   Лента сверху, ввод ВНИЗУ блока, под вводом — живая погода. */

/* Якорь для CTA «Собрать вечер к закату →» — скролл из-под липкой шапки.
   padding:0 — гасим глобальный section{padding:6rem 0} из index.css (иначе пустые 96px вокруг карточки). */
.mr-agent { display: block; margin: 0 0 var(--space-xl); padding: 0; scroll-margin-top: 80px; }

/* Статичный блок ЛОКАЛ под агентом — без двойного отступа (border-top сам делит). */
.mr-brand--static { margin-top: 0; }

/* --- Карточка агента (язык «Закат над Волгой») --- */
.mra {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background:
    radial-gradient(130% 130% at 92% 0%, rgba(218, 41, 28, 0.05), transparent 60%),
    linear-gradient(165deg, var(--color-beige-light), var(--color-white));
  border: 1px solid var(--color-beige-dark);
  border-radius: var(--radius-lg);
}

/* --- Лента --- */
.mra-thread { display: flex; flex-direction: column; gap: 16px; }
.mra-thread:empty { display: none; }

/* --- Приветствие + пилюли (пустой диалог) --- */
.mra-welcome[hidden] { display: none; }
.mra-kicker { display: block; color: var(--color-red); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; }
.mra-greeting { margin: 10px 0 0; font-size: 1.12rem; line-height: 1.55; color: var(--color-black-soft); max-width: 44ch; }
.mra-pills {
  display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 8px; padding: 4px 2px;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.mra-pills::-webkit-scrollbar { display: none; }   /* карусель: одна строка, скролл по X, скроллбар скрыт */
.mra-pills .mra-pill { flex: none; }
.mra-pill {
  font-family: var(--font-body); font-size: 0.85rem; line-height: 1; padding: 8px 15px; border-radius: 999px;
  background: var(--color-white); border: 1px solid var(--color-beige-dark); color: var(--color-black-soft);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.mra-pill:hover { border-color: var(--color-gray); }
.mra-pill[aria-pressed="true"] { background: var(--color-red); border-color: var(--color-red); color: var(--color-white); }
.mra-pill:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

/* --- Реплики --- */
.mra-msg { font-size: 0.96rem; line-height: 1.6; color: var(--color-black-soft); }
.mra-msg--agent { align-self: flex-start; max-width: 92%; }
.mra-msg--agent p { margin: 0; }
.mra-msg--notice { color: var(--color-gray); }
.mra-msg--user {
  align-self: flex-end; max-width: 88%; padding: 10px 15px; border-radius: var(--radius-md);
  background: var(--color-beige); color: var(--color-black);
}
.mra-said-pills { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 7px; }
.mra-said-pills span {
  font-family: var(--font-mono); font-size: 0.7rem; padding: 2px 8px; border-radius: 999px;
  background: var(--color-beige-dark); color: var(--color-black);
}

/* --- Индикатор «думаю» --- */
.mra-thinking { display: inline-flex; align-items: center; gap: 10px; padding: 6px 2px; }
.mra-think-dots { display: inline-flex; gap: 5px; flex: none; }
.mra-think-dots i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-gray-light);
  animation: mra-bounce 1.2s var(--ease-out) infinite;
}
.mra-think-dots i:nth-child(2) { animation-delay: 0.15s; }
.mra-think-dots i:nth-child(3) { animation-delay: 0.3s; }
.mra-think-txt { font-size: 0.9rem; color: var(--color-gray); letter-spacing: 0.01em; }
@keyframes mra-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* --- Маршрут: сворачиваемая карточка --- */
.mra-msg--route {
  align-self: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-beige-dark);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  scroll-margin-top: 80px;
}
.mra-route-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 2px 0; cursor: pointer; text-align: left; font: inherit;
  color: var(--color-black);
}
.mra-route-head-ico { flex: none; width: 20px; height: 20px; color: var(--color-red); }
.mra-route-head-ico svg { width: 20px; height: 20px; display: block; }
.mra-route-head-text { flex: 1; font-weight: 600; font-size: 1.02rem; line-height: 1.4; letter-spacing: -0.01em; }
.mra-route-chev { flex: none; width: 18px; height: 18px; color: var(--color-gray); transition: transform var(--duration-fast) var(--ease-out); }
.mra-route-head:focus-visible { outline: 2px solid var(--color-red); outline-offset: 3px; border-radius: var(--radius-sm); }
.mra-msg--route.is-collapsed .mra-route-chev { transform: rotate(-90deg); }
.mra-msg--route.is-collapsed .mra-route-body { display: none; }
.mra-route-body { margin-top: var(--space-sm); }

/* --- Таймлайн --- */
.mra-timeline { list-style: none; position: relative; margin: 0; padding: 0; }
.mra-timeline::before { content: ""; position: absolute; left: 21px; top: 14px; bottom: 14px; width: 2px; background: var(--color-beige-dark); }
.mra-point { position: relative; padding: 0 0 var(--space-lg) 58px; }
.mra-point::before { display: none; }
/* Категорийная плитка-миниатюра — лидирующий «thumbnail» точки (тёплый люкс). */
.mra-point-glyph {
  position: absolute; left: 0; top: 1px; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 11px;
  background:
    radial-gradient(120% 120% at 75% 12%, rgba(218, 41, 28, 0.07), transparent 60%),
    linear-gradient(165deg, var(--color-beige-light), var(--color-white));
  border: 1px solid var(--color-beige-dark); color: var(--color-red);
}
.mra-point-glyph svg { width: 21px; height: 21px; display: block; }
.mra-time { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-red); }
.mra-name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: -0.01em; font-size: 1.22rem;
  line-height: 1.2; color: var(--color-black); margin: 3px 0 5px;
}
.mra-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8rem; color: var(--color-red); letter-spacing: 0; }
.mra-rating-star { font-size: 1.6rem; line-height: 1; }   /* звезда ×2 к цифре рейтинга */
.mra-name .mra-maplink { margin-top: 0; flex: none; }     /* «На карте →» — в строке заголовка, после рейтинга */
/* Адрес точки + кнопка «копировать» (тихий люкс) */
.mra-addr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; row-gap: 4px; margin: 1px 0 9px; }
.mra-addr-text { font-size: 0.78rem; letter-spacing: 0.01em; color: var(--color-gray); }
.mra-addr-copy {
  flex: none; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--color-beige-dark); border-radius: var(--radius-sm); background: transparent;
  color: var(--color-gray); cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mra-addr-copy svg { width: 14px; height: 14px; }
.mra-addr-copy:hover { color: var(--color-red); border-color: var(--color-red); }
.mra-addr-copy:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }
.mra-addr-copy .ic-done { display: none; }
.mra-addr-copy.is-copied { color: var(--color-red); border-color: var(--color-red); }
.mra-addr-copy.is-copied .ic-copy { display: none; }
.mra-addr-copy.is-copied .ic-done { display: block; }
.mra-why { font-size: 0.95rem; line-height: 1.55; color: var(--color-black-soft); margin: 0 0 9px; }
.mra-for { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 9px; }
.mra-for-label { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-gray); }
.mra-tag {
  font-size: 0.76rem; line-height: 1; padding: 5px 11px; border-radius: 999px;
  background: var(--color-beige-light); border: 1px solid var(--color-beige-dark); color: var(--color-black-soft);
}
.mra-maplink {
  display: inline-block; margin-top: 6px; font-size: 0.76rem; letter-spacing: 0.02em;
  color: var(--color-gray); text-decoration: none; border-bottom: 1px solid var(--color-beige-dark); padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mra-maplink:hover { color: var(--color-red); border-color: var(--color-red); }
.mra-addr .mra-maplink { margin-top: 0; flex: none; }  /* «На карте →» — следом за кнопкой copy */
.mra-walk {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 0 0 var(--space-md) 58px;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.02em; color: var(--color-gray);
}
.mra-walk-ico { flex: none; display: grid; place-items: center; width: 18px; height: 18px; color: var(--color-gray-light); }
.mra-walk-ico svg { width: 15px; height: 15px; display: block; }
/* Точка/интервал прячутся, когда замена в слоте вытолкнула хвост за 23:30 (показываем notice). */
.mra-point[hidden], .mra-walk[hidden] { display: none; }

/* --- Слот точки: листаемые альтернативы (LocalSlot) + одиночная карточка --- */
.mra-slot, .mra-card { min-width: 0; }
.mra-slot-notice { margin: 2px 0 var(--space-md); color: var(--color-gray); font-size: 0.8rem; line-height: 1.5; }

/* --- Погода в выдаче маршрута: лёгкий люкс-каллаут --- */
.mra-wx-note {
  display: flex; align-items: center; gap: 11px; margin-top: var(--space-md);
  padding: 0.7rem 0.9rem; border-radius: var(--radius-md);
  background:
    radial-gradient(120% 120% at 90% 0%, rgba(218, 41, 28, 0.05), transparent 58%),
    linear-gradient(165deg, var(--color-beige-light), var(--color-white));
  border: 1px solid var(--color-beige-dark);
}
.mra-wx-note-ico { flex: none; width: 24px; height: 24px; color: var(--color-red); }
.mra-wx-note-ico svg { width: 24px; height: 24px; display: block; }
.mra-wx-note-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mra-wx-note-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray); }
.mra-wx-note-text { font-size: 0.88rem; line-height: 1.45; color: var(--color-black-soft); }

/* --- Врезка «по пути»: витрина ЛОКАЛ на Рождественской ---
   Показывается, только если день реально идёт по улице, не чаще раза в 12 ч
   (логика — ai-marshrut.js). Семья тёплых каллаутов (.mra-wx-note / «Закат»). */
.mra-shop {
  display: flex; align-items: flex-start; gap: 11px; margin-top: var(--space-md);
  padding: 0.85rem 0.95rem; border-radius: var(--radius-md);
  background:
    radial-gradient(130% 130% at 10% 0%, rgba(218, 41, 28, 0.06), transparent 55%),
    linear-gradient(160deg, var(--color-beige-light), var(--color-white));
  border: 1px solid var(--color-beige-dark);
}
.mra-shop[hidden] { display: none; }
.mra-shop-ico { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--color-red); }
.mra-shop-ico svg { width: 22px; height: 22px; display: block; }
.mra-shop-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mra-shop-label { font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray); }
.mra-shop-text { font-size: 0.88rem; line-height: 1.5; color: var(--color-black-soft); }
.mra-shop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; }
.mra-shop-addr { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; color: var(--color-gray); }
.mra-shop-link { font-size: 0.72rem; color: var(--color-red); text-decoration: none; }
.mra-shop-link:hover, .mra-shop-link:focus-visible { text-decoration: underline; }

/* --- Встроенная карта Яндекса (открытая, один живой iframe) --- */
.mra-map { margin: var(--space-md) 0 0; }
.mra-map.is-live { aspect-ratio: 16 / 11; border-radius: var(--radius-md); overflow: hidden; background: var(--color-beige-dark); }
.mra-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.mra-map-load {
  width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: 1px solid var(--color-beige-dark); background: var(--color-beige-light); color: var(--color-black);
  border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mra-map-load:hover { color: var(--color-red); border-color: var(--color-red); }
.mra-map-load:focus-visible { outline: 2.5px solid var(--color-red); outline-offset: -3px; }

.mra-refine {
  margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--color-beige-dark);
  font-size: 0.74rem; color: var(--color-gray-light); letter-spacing: 0.02em;
}

/* --- Композер: ввод ВНИЗУ блока + погода под ним --- */
.mra-composer { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-beige-dark); }
.mra-thread:empty + .mra-composer { border-top: 0; padding-top: 0; margin-top: 0; }
/* Композер «тихий люкс»: ввод и кнопка — единое тёплое поле, мягкий фокус-ринг,
   красный акцент собран в один аккуратный кружок-отправку. */
.mra-form {
  position: relative; display: flex; align-items: flex-end; gap: 8px;
  padding: 5px 5px 5px 6px;
  background: var(--color-white); border: 1px solid var(--color-beige-dark); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.05), 0 10px 24px rgba(26, 26, 26, 0.06);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.mra-form:focus-within { border-color: var(--color-gray); box-shadow: 0 0 0 3px rgba(218, 41, 28, 0.12), 0 10px 24px rgba(26, 26, 26, 0.07); }
.mra-input {
  flex: 1; resize: none; font-family: var(--font-body); font-size: 1rem; line-height: 1.55;
  padding: 11px 8px 11px 10px; min-height: 46px; max-height: 160px; color: var(--color-black);
  background: transparent; border: 0; border-radius: 0;
}
.mra-input::placeholder { color: var(--color-gray-light); }
.mra-input:focus { outline: none; }
/* Меняющаяся подсказка — оверлей поверх инпута, кроссфейд со сдвигом. pointer-events:none → клик уходит в инпут. */
.mra-hint {
  position: absolute; left: 16px; top: 5px; height: 46px;
  display: flex; align-items: center; pointer-events: none;
  font-family: var(--font-body); font-size: 1rem; line-height: 1.55; color: var(--color-gray-light);
  max-width: calc(100% - 58px); overflow: hidden;
  opacity: 1; transition: opacity var(--duration-fast) var(--ease-out);
}
.mra-hint.is-filled { opacity: 0; }
.mra-hint > span {
  display: inline-block; white-space: nowrap;
  transition: opacity 0.34s var(--ease-out), transform 0.34s var(--ease-out);
}
.mra-hint.is-out > span { opacity: 0; transform: translateY(-7px); }
.mra-hint.is-in > span { opacity: 0; transform: translateY(7px); }
.mra-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mra-send {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: var(--color-red); color: var(--color-white); cursor: pointer; display: grid; place-items: center;
  transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.mra-send svg { width: 17px; height: 17px; }
.mra-send:hover { background: var(--color-red-hover); }
.mra-send:active { transform: scale(0.94); }
.mra-send:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }
.mra-send:disabled { opacity: 0.4; cursor: default; }

/* --- Условия дня под вводом: погода + закат в одном блоке (люкс-карточка) --- */
.mra-cond {
  margin-top: var(--space-md);
  padding: 0.95rem 1.15rem 0.9rem;
  background:
    radial-gradient(120% 120% at 90% 0%, rgba(218, 41, 28, 0.05), transparent 58%),
    linear-gradient(165deg, var(--color-beige-light), var(--color-white));
  border: 1px solid var(--color-beige-dark);
  border-radius: var(--radius-lg);
}
/* Скелетон погоды до фетча (переопределяет display:none из marshrut.css; иконки/температуру/строки даёт .mr-wx-* там же). */
.mra-cond .mr-wx-skeleton { display: block; height: 78px; }

/* Закат — отделён тонкой линией от погоды */
.mra-cond-sun { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--color-beige-dark); }
.mra-cond-sun[hidden] { display: none; }
.mra-sun-main { display: flex; align-items: center; gap: 0.9rem; }
.mra-sun-arc { flex: 0 0 72px; width: 72px; }
.mra-sun-arc svg { width: 72px; height: 44px; display: block; }
.mra-arc-curve { stroke: var(--color-beige-dark); stroke-width: 1.4; stroke-dasharray: 2 5; fill: none; }
.mra-arc-base { stroke: var(--color-beige-dark); stroke-width: 1.4; }
.mra-arc-sun { fill: var(--color-red); }
.mra-sun-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mra-sun-eyebrow, .mra-wx-eyebrow { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-red); }
.mra-wx-eyebrow { display: block; margin-bottom: 7px; }
.mra-sun-time { font-family: var(--font-display); font-size: 1.95rem; line-height: 1; letter-spacing: 0.01em; color: var(--color-black); }
.mra-sun-count { font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gray); }
.mra-sun-answer { margin: 0.6rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--color-black-soft); }
.mra-sun-link {
  display: inline-block; margin-top: 0.5rem; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--color-gray);
  text-decoration: none; border-bottom: 1px solid var(--color-beige-dark); padding-bottom: 1px;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mra-sun-link:hover { color: var(--color-red); border-color: var(--color-red); }

/* Метка погоды (обновлено · источник) — общий низ блока */
.mra-cond-meta { margin: 0.6rem 0 0; font-size: 0.64rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gray-light); }
.mra-cond-meta:empty { display: none; }
.mra-cond-meta a {
  color: var(--color-gray); border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mra-cond-meta a:hover, .mra-cond-meta a:focus-visible { color: var(--color-red); border-color: var(--color-red); outline: none; }

/* ≥620px: погода и закат в ОДНУ строку — две колонки с вертикальным разделителем,
   метка «обновлено · Open-Meteo» на всю ширину снизу. На узких — остаётся стопкой. */
@media (min-width: 620px) {
  .mra-cond { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.15rem; }
  .mra-cond-wx, .mra-cond-sun { min-width: 0; }
  .mra-cond-sun { margin-top: 0; padding-top: 0; border-top: 0; padding-left: 1.15rem; border-left: 1px solid var(--color-beige-dark); }
  .mra-cond-meta { grid-column: 1 / -1; }
}

.mra-composer-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.mra-composer-foot:has(.mra-clear[hidden]) { display: none; }
.mra-clear {
  background: transparent; border: 0; cursor: pointer; padding: 4px 0;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--color-gray);
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.mra-clear:hover { color: var(--color-red); border-color: var(--color-red); }
.mra-clear:focus-visible { outline: 2px solid var(--color-red); outline-offset: 2px; }

/* Мобайл: вся ширина — карточкам. Левая колонка таймлайна (глиф+рельса) на узком экране
   съедала ~46px: глиф и время встают СТРОКОЙ над карточкой, рельса скрыта, интервалы
   «пешком» выравниваются под временем. Парная правка — гуттеры стрелок в local-slot.css. */
@media (max-width: 560px) {
  .mra { padding: 14px; }
  /* Карточка маршрута — полоса во всю ширину агент-блока (гасим боковые поля/рамку .mra):
     вложенность рамок .mra → route → ls-card на 393px съедала треть экрана. */
  .mra-msg--route {
    margin: 0 -14px; padding: 13px 12px;
    border-left: 0; border-right: 0; border-radius: 0;
  }
  .mra-timeline::before { display: none; }
  .mra-point { padding-left: 0; }
  .mra-point-glyph {
    position: static; display: inline-grid; vertical-align: middle;
    width: 30px; height: 30px; border-radius: 8px; margin-right: 9px;
  }
  .mra-point-glyph svg { width: 16px; height: 16px; }
  .mra-time { display: inline-block; vertical-align: middle; }
  .mra-point > .mra-slot, .mra-point > .mra-card { margin-top: 9px; }
  /* Интервал «пешком» = нить пути: пунктир от карточки выше к глифу следующей точки,
     пешеход сидит на нити (белый фон разрывает пунктир), текст — под колонкой времени. */
  .mra-walk { padding: 2px 0 var(--space-md) 0; }
  /* Вынос вверх = весь нижний отступ точки (--space-lg) — нить ДОТЯГИВАЕТСЯ до рамки карточки;
     вниз уходит под непрозрачную плитку глифа следующей точки (соединение с обеих сторон). */
  .mra-walk::before {
    content: ""; position: absolute; left: 14px;
    top: calc(-1 * var(--space-lg) - 1px); bottom: -14px;
    border-left: 2px dotted var(--color-beige-dark);
  }
  .mra-walk-ico {
    position: relative; z-index: 1; width: 30px; height: 30px;
    background: var(--color-white); color: var(--color-gray);
  }
  .mra-walk-ico svg { width: 16px; height: 16px; transform: scaleY(-1); }   /* следы носками вниз — по ходу пути */
  /* Теги «кому» — лента в одну строку, листается как пилюли под полем ввода. */
  .mra-for {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  }
  .mra-for::-webkit-scrollbar { display: none; }
  .mra-for .mra-for-label, .mra-for .mra-tag { flex: none; }
  .mra-name { font-size: 1.12rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mra-think-dots i { animation: none; }
  .mra-pill, .mra-form, .mra-send, .mra-maplink, .mra-route-chev, .mra-map-load, .mra-clear, .mra-sun-link, .mra-addr-copy, .mra-hint, .mra-hint > span { transition: none; }
}