/* ВетНави — серия layout/visual-правок первого mobile-экрана (AGENTS.md
   задачи, newest first): «Подключить новый full-screen mobile background
   new-vetnavi...» (текущая — mobile/tablet используют `new-vetnavi.png`
   как единственный decorative layer `#landing-screen`, `background-size:
   100% auto` + `top center`, без overlay — asset уже достаточно мягкий);
   «Подключить новый portrait asset...» (ввёл сам `#landing-screen`,
   оборачивающий header+hero одной background-поверхностью); «Исправить
   desktop-композицию...» (desktop — full-width sections со своим
   `.container`). Desktop (`≥1024px`) всюду не тронут этой серией — свой
   `hero-vetnavi.png` + `cover` на `.hero-shell`, как и было.

   Не design system: переменные/tokens ниже существуют для того, чтобы
   палитру и spacing можно было централизованно менять без переписывания
   разметки. Mobile-first: базовые правила целятся в ~360–430px, media
   queries только расширяют/дают больше воздуха на tablet/desktop. */

:root {
  --page-bg: #f4fbf3;
  --surface: #ffffff;
  --surface-soft: #eaf7e9;
  --text-main: #123b2d;
  --text-muted: #66786f;
  --text-faint: #8a9b90;
  --accent: #22a84a;
  --accent-dark: #147a34;
  --accent-contrast: #ffffff;
  --border: #dce9de;
  --focus-ring: #22a84a;
  --warning-bg: #fff0e9;
  --warning-border: #f6c3ad;
  --warning-accent: #f45b3d;
  --warning-text: #8a2c1b;
  --error-bg: #fff0e9;
  --error-border: #f6c3ad;
  --error-text: #8a2c1b;

  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1.125rem;
  --space-4: 1.75rem;
  --space-5: 2.5rem;
  --space-6: 3.25rem;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --font-size-sm: 0.9rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: clamp(1.2rem, 5vw, 2rem);

  --max-content-width: 1320px;
  --readable-max-width: 42rem;
  --grid-max-width: 960px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--page-bg);
  color: var(--text-main);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: var(--font-size-base);
  line-height: 1.55;
}

.page {
  width: 100%;
}

/* Shared inner content wrapper for every full-width page section (header,
   hero, result) — caps width and gives consistent side padding, but never
   owns vertical spacing itself (each section sets its own padding-block so
   it can have its own full-bleed background independent of its content). */
.container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding-inline: var(--space-3);
}

/* Guards against any later rule (e.g. `display: flex` for layout) winning
   over the `hidden` attribute on source-order/specificity ties — elements
   toggled via `.hidden = true/false` in home.js must always actually hide. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Landing screen: header + hero share ONE continuous background ------
   (AGENTS.md задача «Подключить новый full-screen mobile background
   new-vetnavi...»). On mobile `#landing-screen` is the single decorative
   surface for the whole first viewport — `.site-header` and `.hero-shell`
   both sit inside it with no background of their own, so there is no seam
   between "header bar" and "hero section": one asset underneath both.
   `min-height: 100svh` (with a plain `100vh` fallback line right before
   it, so an unsupporting browser just keeps that) makes the landing scene
   fill at least the first real viewport.

   `new-vetnavi.png` (2160×3840, true 9:16) is noticeably wider-per-height
   than a real phone viewport (e.g. 390×844 ≈ 0.462 vs the asset's 0.5625),
   so `cover` would need to crop ~9% off each side to fill the viewport's
   height — on this asset that risks clipping the signpost/parrot cluster,
   which sits close to the right edge (раздел 2 задачи explicitly rules
   this out). `background-size: 100% auto` instead matches the viewport's
   full width exactly (zero horizontal crop — the top-right cluster is
   always fully visible) and lets the image's own height fall short of a
   tall viewport; whatever is left uncovered at the bottom is plain
   `background-color`, picked to match the asset's own soft mint/cream tail
   so the seam is invisible rather than a visible rectangle.

   The asset's own built-in softness replaces the old radial/linear overlay
   from the previous (busier) assets entirely — раздел 3/4 задачи
   explicitly asks to drop those rather than add more green tint on top of
   an already-pale image.

   After a real search, `home.js` adds `.is-result` here (alongside hiding
   `#hero-shell`) — the decorative background and the forced full-screen
   height both disappear, leaving the header as a plain bar over the
   ordinary page background; `.landing-screen` is never removed from the
   DOM, only this modifier toggles, so the header itself never disappears
   (раздел 7 задачи — only the *decorative landing background* goes away).
   Desktop (`≥1024px`) is intentionally untouched: the override further
   down resets this wrapper to a plain block and gives `.hero-shell` back
   its own background, exactly as before this task. */

.landing-screen {
  --landing-image: url('../img/new-vetnavi.png');
  /* AGENTS.md задача «...убрать монотонность зелёного фона...»: below the
     asset's own rendered bottom edge, `background-color` used to be a flat
     match of the asset's tail (#dbf2d7) all the way down to the bottom of
     `100svh` — on a tall phone that reads as one long, monotone mint
     surface. This gradient layer (painted on top of the plain color, under
     the image — multi-background's first layer is topmost) fades that same
     green into `--page-bg` partway down, so the lower part of the landing
     screen (where `#nearby-clinics` lives) reads as a calmer, more neutral
     page surface instead of a continuation of the hero's own color. The
     stops are expressed as fractions of the viewport height because the
     image's own rendered height (`100% auto`, i.e. viewport width scaled by
     the asset's fixed aspect ratio) lands at a fairly consistent ~80-85%
     of a typical mobile viewport's height regardless of exact device. */
  --landing-fade: linear-gradient(
    to bottom,
    rgba(244, 251, 243, 0) 0%,
    rgba(244, 251, 243, 0) 62%,
    rgba(244, 251, 243, 0.65) 78%,
    var(--page-bg) 92%
  );

  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  /* Sampled from the asset's own bottom-most pixels — still the immediate
     fallback right where the image ends, before the fade above takes over
     further down. */
  background-color: #dbf2d7;
  background-image: var(--landing-fade), var(--landing-image);
  background-repeat: no-repeat, no-repeat;
  background-size: auto, 100% auto;
  background-position: 0 0, top center;
}

.landing-screen.is-result {
  min-height: 0;
  display: block;
  background-image: none;
  background-color: transparent;
}

/* --- Header: full-width bar, brand sits inside the shared container ----- */
/* Compact on mobile by default (раздел 4/7 задачи «Исправить mobile hero
   по новому asset...») — widens back a little at tablet/desktop via the
   responsive block below, never the other way around. */

.site-header {
  padding-block: 0.65rem;
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Informational label only (раздел 5 задачи «Исправить mobile hero...») —
   no dropdown/selector logic, just the current context city. */
.location-label {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.location-label svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.brand-mark {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent-dark);
}

.brand-tagline {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Hero shell: mobile vs desktop differ in WHERE the background lives -
   (AGENTS.md задача «Подключить новый portrait asset как фон всего первого
   мобильного экрана ВетНави»). On mobile/tablet (`<1024px`) `.hero-shell`
   no longer carries any background of its own — the whole first screen's
   imagery now lives one level up, on `#landing-screen` (header + hero
   together, see above), so here it is just a transparent flex layout slot
   that grows to fill the remaining height below the header (`flex: 1`) and
   centers `#hero-content` in it. Desktop (`≥1024px`, untouched by this
   task) gets its own background back via the media query further down —
   `#landing-screen` resets to a plain block there, so desktop's header/
   hero visual relationship is exactly what it was before this task. Only
   the true initial landing lives here — `#hero-content` (title + subtitle
   + composer + quick hints) gets moved out into the result shell's working
   container for every other state (see home.js), so this section is
   either the full landing or entirely hidden, never partial. */

.hero-shell {
  flex: 1;
  display: flex;
  align-items: flex-start;
  padding-block: 0.5rem 1.25rem;
}

.hero-inner {
  width: 100%;
}

.hero-content {
  min-width: 0;
}

/* No decorative backdrop here on purpose (AGENTS.md задача «Убрать
   неудачную cloud-подложку заголовка...», раздел 1) — a prior soft-cloud
   pseudo-element backdrop behind the headline was tried twice and never
   read well on a real render; removed outright rather than attempting a
   third variant in this task. The headline sits directly on
   `new-vetnavi`, same as `.composer-subtitle` below it. */
.hero-heading {
  position: relative;
  margin: 0 0 0.65rem;
}

#composer-title {
  position: relative;
  font-size: var(--font-size-xl);
  font-weight: 700;
  margin: 0 0 0.25rem;
  max-width: 14rem;
}

/* Forces the exact "Расскажите, / что случилось" line break on mobile
   (AGENTS.md задача «Исправить конкретные визуальные несоответствия mobile
   hero ВетНави...», раздел 1) instead of relying on where the text happens
   to wrap at a given width. `display:inline` in the desktop override below
   lets the two spans flow as normal text again, wrapping naturally. Moot
   once `home.js` replaces `#composer-title`'s content for clarify (plain
   text, no spans) — this only matters for the initial landing title. */
.title-line {
  display: block;
}

.composer-subtitle {
  position: relative;
  color: var(--text-muted);
  margin: 0;
  max-width: 15rem;
  font-size: 0.8rem;
  line-height: 1.3;
}

.composer {
  position: relative;
  max-width: 26rem;
}

/* Real auto-grow (AGENTS.md задача «...исправить mobile composer так,
   чтобы textarea динамически росла от 1 до 3 строк») — `home.js`
   (`resizeComposerTextarea`) measures real content (`scrollHeight`) on
   every `input` and sets an inline `height` to match. CSS owns the actual
   limits: `min-height` is sized for exactly one line + small symmetric
   `padding-block`, so the resting/placeholder state has only a sliver of
   leftover space (not a whole reserved second row) and reads as centered
   rather than stuck to the top — browsers never vertically center partial
   `<textarea>` content, so keeping the *resting* box close to one line's
   natural height is what actually achieves that look, not a padding/
   line-height trick on a taller box. `max-height` caps growth at ~3 lines;
   beyond that the inline `height` from JS is clamped by this `max-height`
   regardless, and `overflow-y: auto` reveals the field's own internal
   scrollbar — no JS-side line-count threshold needed. */
textarea#problem-text {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  max-height: 5.25rem;
  padding: 0.5rem 2.6rem 0.5rem 0.8rem;
  font-size: 0.95rem;
  line-height: 1.4;
  font-family: inherit;
  color: var(--text-main);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(18, 59, 45, 0.05);
  resize: none;
  overflow-y: auto;
}

textarea#problem-text::placeholder {
  color: var(--text-faint);
}

textarea#problem-text:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 168, 74, 0.2);
}

textarea#problem-text:disabled {
  color: var(--text-muted);
  background: var(--page-bg);
}

/* Pill, not a circle (AGENTS.md задача «Локально отполировать mobile hero
   ВетНави...», раздел 5) — wider than tall, arrow-only, vertically centered
   on the composer regardless of its height via `top:50%`/`translateY`. */
.send-button {
  position: absolute;
  right: 0.3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
}

.send-button:hover:not(:disabled) {
  background: var(--accent-dark);
}

.send-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Quick hint chips (examples only — no structured filters/routing) ---- */

.quick-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

/* Compact on purpose (раздел 6 задачи «Исправить mobile hero...») — the
   first mobile screen already carries the hero composition + composer;
   chips are a density/visual-weight detail, not a second CTA row. */
.hint-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: var(--surface);
  color: var(--accent-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  font-family: inherit;
  cursor: pointer;
}

.hint-chip svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.hint-chip:hover:not(:disabled) {
  background: var(--surface-soft);
  border-color: var(--accent);
}

.hint-chip:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.hint-chip:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Nearby clinics: landing-only, separate from doctor search ----------- */
/* AGENTS.md задача «Добавить на initial mobile screen ВетНави первый
   end-to-end сценарий "Ближайшие клиники" по геолокации пользователя».
   Deliberately lighter-weight than `.doctor-card` — a different, smaller
   product scenario, not a second doctor-result list (раздел 6/9 задачи). */

/* A soft, translucent off-white panel — not a heavy bordered card — so the
   section reads as its own calmer surface wherever it lands on the
   hero/page-bg fade above, without introducing a hard rectangle. */
.nearby-clinics {
  margin-top: 0.85rem;
  max-width: 26rem;
  padding: 0.75rem 0.75rem 0.9rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
}

.nearby-title {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-main);
}

.nearby-action {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  color: var(--accent-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.nearby-action:hover:not(:disabled) {
  background: var(--surface-soft);
  border-color: var(--accent);
}

.nearby-action:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.nearby-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.nearby-status {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.nearby-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.nearby-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem;
}

.nearby-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.nearby-card-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-main);
}

.nearby-card-distance {
  flex-shrink: 0;
  font-size: 0.78rem;
  color: var(--accent-dark);
  font-weight: 600;
}

.nearby-card-address {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* --- Result shell: full-width section, working content container -------- */
/* `#urgency-banner`, `#query-summary`, the composer (moved here for
   clarify/edit) and the result heading/explanation all share one
   `--readable-max-width` reading column — only `.doctor-list` widens into a
   grid (раздел 6/7/8 задачи «Исправить desktop-композицию ВетНави...»). */

.result-shell {
  padding-block: var(--space-4) var(--space-6);
}

.urgency-banner,
.query-summary,
#composer-mount,
.status-region,
.result-header,
.result-subtext,
.result-explanation,
.error-block {
  max-width: var(--readable-max-width);
}

.query-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: 0 var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.query-summary-text {
  margin: 0;
  font-size: var(--font-size-lg);
  color: var(--text-main);
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-dark);
  font-size: var(--font-size-sm);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.link-button:hover {
  color: var(--accent);
}

.link-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Status / loading ----------------------------------------------------*/

.status-region {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-1);
  min-height: 1.3em;
  color: var(--text-muted);
}

.status-region.is-loading::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: vn-pulse 1.4s ease-in-out infinite;
}

.status-region.is-error {
  color: var(--error-text);
}

@keyframes vn-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .status-region.is-loading::before {
    animation: none;
  }
}

/* --- Urgency banner -------------------------------------------------------*/

.urgency-banner {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-text);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-base);
}

.urgency-banner p {
  margin: 0;
}

/* --- Result region ---------------------------------------------------------*/

.result-region {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.result-header {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 700;
  padding: 0 var(--space-1);
}

.result-subtext {
  margin: var(--space-1) 0 0;
  padding: 0 var(--space-1);
  color: var(--text-muted);
}

.result-explanation {
  margin: var(--space-2) 0 0;
  padding: 0 var(--space-1);
  color: var(--text-faint);
  font-size: var(--font-size-sm);
}

.error-block {
  background: var(--error-bg);
  border: 1px solid var(--error-border);
  color: var(--error-text);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* --- Doctor cards -----------------------------------------------------------*/
/* Wider than the readable text column (up to `--grid-max-width`) so a
   tablet/desktop 2-column grid has room, but still capped well short of
   the full `--max-content-width` — cards stay a comfortable size, never
   stretched edge-to-edge (раздел 6 задачи). */

.doctor-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: var(--grid-max-width);
}

.doctor-card {
  display: flex;
  gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: 0 1px 3px rgba(18, 59, 45, 0.07);
}

.avatar {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar svg {
  width: 1.65rem;
  height: 1.65rem;
}

.doctor-card-body {
  flex: 1;
  min-width: 0;
}

.doctor-card-body h3 {
  margin: 0;
  font-size: var(--font-size-lg);
}

.doctor-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}

.doctor-card .tags li {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.75rem;
  font-size: var(--font-size-sm);
  color: var(--accent-dark);
}

.doctor-card .match-caption {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-faint);
}

.doctor-card .places {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.doctor-card .places-label {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-faint);
}

.doctor-card .clinic {
  margin: 0;
}

.doctor-card .clinic-name {
  margin: 0;
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.doctor-card .clinic-address {
  margin: 0.15rem 0 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.doctor-card .organization-name {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

/* --- Responsive: tablet / desktop ----------------------------------------- */
/* Mobile stays the reference layout (раздел 5 задачи «Исправить
   desktop-композицию ВетНави...») — everything below only adds desktop-
   specific composition via media queries; nothing here changes base rules. */

@media (min-width: 640px) {
  .hero-shell {
    padding-block: var(--space-6);
  }
}

/* Full-width sections (header/hero/result) with an inner `.container`,
   instead of one narrow centered column, only from here (раздел 1/2
   задачи «Исправить desktop-композицию ВетНави...», carried over by this
   task). The hero illustration stays a background layer at every width —
   desktop just widens the readable column and re-anchors the gradient/
   image position for the taller, wider section instead of a top-left
   mobile corner. Below this, mobile stays the reference layout untouched
   (раздел 5/8 задачи «Исправить mobile hero...»). */
@media (min-width: 1024px) {
  /* Desktop never adopted the mobile "header + hero share one background"
     concept from this task — reset the wrapper to a plain block so header
     and hero look exactly as they did before this task (раздел 9: «Desktop
     не редизайнить»). */
  .landing-screen {
    display: block;
    min-height: 0;
    background-image: none;
    background-color: transparent;
  }

  .hero-shell {
    /* Desktop keeps its own background here instead — the original asset
       + `cover` (раздел 9 задачи «Подключить новый hero asset...» — the
       mobile-composed asset is mobile/tablet-only; untouched otherwise
       from the previous desktop-composition fix). */
    --hero-gradient: radial-gradient(
      85% 160% at 0% 45%,
      var(--surface-soft) 0%,
      var(--surface-soft) 30%,
      rgba(234, 247, 233, 0.78) 46%,
      rgba(234, 247, 233, 0.25) 64%,
      rgba(234, 247, 233, 0) 82%
    );
    --hero-image: url('../img/hero-vetnavi.png');

    background-color: var(--surface-soft);
    background-image: var(--hero-gradient), var(--hero-image);
    background-repeat: no-repeat, no-repeat;
    background-size: auto, cover;
    background-position: 0 0, 78% 42%;
    flex: none;
    align-items: center;
    min-height: clamp(460px, 56vh, 620px);
  }

  /* Scoped to `.hero-inner` on purpose: once `#hero-content` is relocated
     into `#composer-mount` (clarify/edit — see home.js), it must behave as
     an ordinary block in the result shell's reading column, not keep a
     width meant for the landing hero's text column. */
  .hero-inner .hero-content {
    max-width: 30rem;
  }

  #composer-title,
  .composer-subtitle,
  .composer {
    max-width: none;
  }

  /* Mobile-only polish (AGENTS.md задача «Локально отполировать mobile
     hero ВетНави...») shrank `.composer-subtitle` below the value desktop
     was already using — restored here so desktop stays exactly as before
     this task (раздел 7: desktop unaffected except safe regression CSS). */
  .composer-subtitle {
    font-size: 0.88rem;
    line-height: 1.55;
  }

  /* The forced mobile "Расскажите, / что случилось" line break (раздел 1
     задачи «Исправить конкретные визуальные несоответствия...») is mobile-
     only — desktop keeps its previous natural inline flow/wrapping. */
  .title-line {
    display: inline;
  }

  /* The mobile-only vertical-centering fix shortened the composer/button
     well past what reads comfortably at desktop's wider column — restored
     to a desktop-appropriate size here (раздел 7: regression-safe only). */
  textarea#problem-text {
    min-height: 3.5rem;
    max-height: 6rem;
    padding: 0.75rem 3rem 0.75rem 0.9rem;
    line-height: 1.5;
  }

  .send-button {
    width: 3rem;
    height: 2.3rem;
    right: 0.55rem;
  }

  .send-button svg {
    width: 20px;
    height: 20px;
  }

  .doctor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}