/* NagelProfi — all styles of start.html (the consultant at /start). Colours are variables in :root. */
/* The whole colour palette. Every colour below is used only through these names — change a
   colour here and it changes everywhere on the site. (PDF documents and emails have their own
   copies of the brand colours: PDF_COLORS in index.html and EMAIL_COLORS in api/_lib/email.js.) */
:root {
  /* Brand */
  --coral: #D85A30;            /* main accent: buttons, the visitor's messages, active step */
  --coral-rgb: 216, 90, 48;    /* the same coral as numbers, for see-through shades — change together with --coral */
  --coral-dark: #993C1D;       /* links, done-step ticks, emphasis */
  --coral-soft: #F0997B;       /* a primary button that can't be pressed yet */
  --peach-light: #F5C4B3;      /* soft accents: done steps, chip borders, hover */
  --peach-pale: #FAECE7;       /* the page background, the contact-form card */
  --peach-ring: #F8D9CE;       /* the filled middle of the brush ring on the first screen */

  /* Text */
  --text-dark: #4A1B0C;        /* headings */
  --ink: #2A2622;              /* body text */
  --ink-rgb: 42, 38, 34;       /* the same ink as numbers, for shadows and the dialog backdrop — change together with --ink */
  --muted: #8A8378;            /* secondary text */
  --faint: #B5AFA4;            /* hints, placeholders, crossed-out done items */
  --on-accent: #FFFFFF;        /* text and icons on coral or dark backgrounds */

  /* Surfaces and lines */
  --bg: #FAFAF8;               /* tracker rows */
  --surface: #FFFFFF;          /* cards, panels, message bubbles, inputs */
  --icon-circle: #F5F1EC;      /* the round backing of the quiet icons in «Що всередині» */
  --border: #EFE9E2;           /* usual borders */
  --border-soft: #F0EEE8;      /* tracker rows */
  --border-strong: #D8D2C8;    /* empty tracker circles, checkboxes, the line of her story */
}
/* The main page (everything after the start card) takes darker shades of the coral and the greys,
   so that white text on the buttons and the grey texts read well (contrast at least 4.5:1). The
   start card keeps the original colours. */
.np-page {
  --coral: #BF4E28;
  --coral-rgb: 191, 78, 40;
  --muted: #6F685E;
  --faint: #6F685E;
}
/* Lora 600 — the one web font, for the headings of the main page (the title of the first screen,
   the section headings and the line under the conversation): font-family: 'Lora', Georgia, serif;
   font-weight: 600. Kept on our own server (SIL Open Font License, assets/fonts/Lora-OFL.txt) —
   never loaded from Google. Two parts of the font; the browser fetches a part only when a Lora
   text needs its letters, and shows the system font until it arrives (swap). */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/lora-cyrillic-600-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/lora-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--peach-pale);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* The links to the sections glide down the page instead of jumping. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#root { min-height: 100vh; }
button { font-family: inherit; }
textarea, input { font-family: inherit; }

/* ======================= The main page =======================
   Rhythm: 16 px page sides on a phone, 56 px between blocks and sections, 28 px inside cards.
   Up to 900 px wide the phone layout is used (in a column of at most 680 px); from 900 px the
   computer layout at the end of this part. */
.np-page a { color: var(--muted); }
.np-page a:hover { color: var(--coral-dark); }
.np-page a:focus-visible, .np-page button:focus-visible, .np-page summary:focus-visible {
  outline: 2px solid var(--coral-dark); outline-offset: 2px;
}

/* ---------- Header ---------- */
.np-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 1180px; margin: 0 auto; padding: 32px 16px 0;
}
.np-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.np-logo {
  display: block; flex-shrink: 0; width: 40px; height: 40px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); object-fit: contain;
}
.np-brand-name { margin: 0; font-size: 16px; font-weight: 700; color: var(--text-dark); }
/* The УКР / DE switch of the main page: the same look as on the start screen, 44 px high. */
.np-header .lang-btn { min-width: 52px; height: 44px; padding: 0 14px; }

/* ---------- Top of the page: first screen, or the conversation ---------- */
.np-top { position: relative; overflow: hidden; padding: 56px 16px 8px; }
.np-col { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; }
.np-banner { margin: 0 0 16px; }
/* The peach brush ring in the bottom-right corner of the first screen: under the text and partly
   beyond the edge. On a phone only its top shows, above the links to the sections. */
.np-ring {
  position: absolute; z-index: 0; right: -150px; bottom: -41px; width: 300px; height: 300px;
  clip-path: inset(0 0 225px 0);
}
.np-ring ellipse { stroke: var(--peach-light); }
.np-ring circle { fill: var(--peach-ring); }

.np-hero { display: flex; flex-direction: column; gap: 16px; }
.np-hero h1 {
  margin: 0; font-family: 'Lora', Georgia, serif; font-size: 22px; line-height: 1.3; font-weight: 600;
  color: var(--text-dark);
}
.np-hero-sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); }
.np-maps-line {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; margin: -10px 0 -12px; font-size: 13px; line-height: 1.4; text-decoration: none;
}
.np-maps-line svg { flex: 0 0 auto; color: var(--coral-dark); }
.np-maps-link { color: var(--coral-dark); text-decoration: underline; text-underline-offset: 3px; }

/* The field (or the conversation card), the quiet actions 4 px under it, the panels they open. */
.np-block { display: flex; flex-direction: column; gap: 4px; }
.np-hero + .np-block { margin-top: 56px; }
.np-block + .np-section-links { margin-top: 28px; }
.np-input-wrap { display: flex; flex-direction: column; gap: 6px; }
.np-panels { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.np-panels .account-panel { margin-bottom: 0; }

/* ---------- The question field — its focus ring is shown on the whole card ---------- */
.np-field { background: var(--surface); }
.np-field:focus-within { outline: 2px solid var(--coral-dark); outline-offset: 2px; }
.np-field textarea {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; resize: none; background: transparent;
  font-size: 16px; /* not less: iPhone zooms in on a field with smaller text */
  color: var(--ink); outline: none;
}
.np-field textarea::placeholder { color: var(--muted); opacity: 1; }
.np-field.big {
  display: flex; flex-direction: column; gap: 16px; padding: 28px;
  border: 1px solid var(--peach-light); border-radius: 20px;
}
.np-field-input { position: relative; }
/* Room for the examples: «Наприклад:» and three questions, each 44 px high to tap — 156 px; the
   tap area of the third one reaches 16 px down into the space under the text box. */
.np-field.big textarea { min-height: 140px; line-height: 1.5; }
/* The examples stand over the empty text box like a placeholder. They can't be tapped: every tap
   goes through to the text box, and with the cursor in it they go (screens.jsx). */
.np-examples { position: absolute; inset: 0; display: flex; flex-direction: column; pointer-events: none; }
.np-examples-label { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.np-example {
  display: flex; align-items: center; min-height: 44px; margin: 0;
  font-size: 16px; line-height: 1.5; color: var(--muted);
}
.np-field-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.np-ai-notice { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.np-field-buttons { display: flex; gap: 8px; flex-shrink: 0; }
.np-send, .np-mic {
  width: 48px; height: 48px; flex-shrink: 0; padding: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* With an empty field sending does nothing, but the button keeps its colour. */
.np-send { border: 0; background: var(--coral); color: var(--on-accent); }
.np-send:disabled { cursor: default; }
.np-mic { border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.np-mic.mic-on {
  background: var(--coral); color: var(--on-accent); border-color: var(--coral);
  animation: micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--coral-rgb), .45); }
  70% { box-shadow: 0 0 0 9px rgba(var(--coral-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--coral-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) {
  .np-mic.mic-on { animation: none; }
}
/* The compact field at the bottom of the conversation card */
.np-field.compact {
  display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px;
  border: 1px solid var(--border); border-radius: 12px;
}
.np-field.compact textarea { flex: 1 1 auto; min-width: 0; line-height: 1.4; max-height: 140px; overflow-y: auto; }
.np-field.compact .np-send, .np-field.compact .np-mic { width: 44px; height: 44px; }
.voice-error { margin: 0; font-size: 11px; color: var(--faint); }
.char-counter { margin: 0 2px; font-size: 11px; color: var(--muted); text-align: right; }

/* ---------- The quiet actions: «Синхронізація», «Почати спочатку», «Залишити контакт» ---------- */
/* On a phone the row stands in the middle under the card; on a computer it starts where the text
   inside the card starts (below). */
.quiet-actions { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; }
.quiet-actions > * {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 12.5px; line-height: 1.4; font-weight: 400;
  color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
.quiet-actions > *:hover { color: var(--coral-dark); }
.quiet-actions > *:disabled { cursor: default; }

/* ---------- Links to the sections lower on the page ---------- */
.np-section-links { display: flex; flex-direction: column; }
.np-section-links a {
  display: flex; align-items: center; min-height: 44px;
  border-top: 1px solid var(--peach-light); font-size: 13px; text-decoration: none;
}
.np-section-links a:last-child { border-bottom: 1px solid var(--peach-light); }

/* ---------- The conversation card ---------- */
.np-chat {
  display: flex; flex-direction: column; gap: 28px; padding: 28px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
}
.np-chat-tagline {
  margin: 56px 0 0; font-family: 'Lora', Georgia, serif; font-size: 18px; line-height: 1.4; font-weight: 600;
  color: var(--text-dark);
}
.np-chat-tagline + .np-section-links { margin-top: 56px; }
/* scroll-margin: her question brought to the top of the screen keeps a little air above it. */
.msg-row { display: flex; scroll-margin-top: 16px; }
.msg-row.user { justify-content: flex-end; }
.msg-row.assistant { justify-content: flex-start; }
.msg-bubble { padding: 10px 14px; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; animation: fadeIn .18s ease; }
.msg-row.user > .msg-bubble { max-width: 86%; }
.msg-row.assistant > .msg-bubble { max-width: 92%; }
.msg-bubble.user {
  background: var(--coral); color: var(--on-accent);
  border-radius: 14px 14px 4px 14px;
}
.msg-bubble.assistant {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 14px 14px 14px 4px;
}
.msg-bold { color: var(--coral); font-weight: 700; }
.msg-row.user .msg-bold { color: var(--on-accent); }
.np-page .msg-link { color: var(--coral-dark); text-decoration: underline; word-break: break-all; }
.np-page .msg-row.user .msg-link { color: var(--on-accent); }
.msg-image { display: block; max-width: 160px; max-height: 90px; margin: 6px 0; border-radius: 6px; }
.msg-line { min-height: 1.1em; }
.msg-bullet { display: flex; gap: 7px; padding-left: 2px; }
.bullet-dot { color: var(--coral-dark); flex-shrink: 0; }
.msg-row.user .bullet-dot { color: var(--on-accent); }

.msg-meta-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 92%; }
.search-tag {
  font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 4px;
  padding-left: 4px;
}
.suggest-chip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--peach-pale); border: 1.5px dashed var(--peach-light);
  border-radius: 12px; padding: 9px 12px; font-size: 12.5px; color: var(--text-dark);
}
.suggest-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--coral); color: var(--on-accent); border: 1px solid var(--coral);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.suggest-btn.secondary {
  background: none; color: var(--muted); border: 1px solid var(--border);
}
.suggest-done { font-size: 12px; color: var(--coral-dark); font-weight: 600; padding-left: 4px; }
/* Answer buttons under the consultant's question: a tap sends the option as her reply. */
.quick-replies { display: flex; flex-wrap: wrap; gap: 8px; }
.quick-reply {
  min-height: 40px; padding: 8px 14px; border: 1px solid var(--peach-light); border-radius: 999px;
  background: var(--surface); color: var(--coral-dark); font-size: 13px; font-weight: 600; line-height: 1.3;
  text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.quick-reply:hover { border-color: var(--coral); }
.quick-reply:active { background: var(--peach-pale); }
.quick-reply:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
/* The details form for a document, under the consultant's answer (forms.jsx DetailsForm). */
.details-form {
  display: flex; flex-direction: column; gap: 12px; max-width: 420px; padding: 16px;
  background: var(--surface); border: 1px solid var(--peach-light); border-radius: 16px;
}
.details-field { display: flex; flex-direction: column; gap: 4px; }
.details-field span { font-size: 12.5px; font-weight: 600; color: var(--text-dark); }
.details-field input {
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: var(--bg); font: inherit; font-size: 16px; color: var(--ink); /* 16px: no zoom-in on iPhone */
}
.details-field input::placeholder { color: var(--muted); font-size: 14px; }
.details-field input:focus { outline: none; border-color: var(--coral); background: var(--surface); }
.details-hint { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.details-problem { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--coral-dark); }
.details-send {
  align-self: flex-start; min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px;
  background: var(--coral); color: var(--on-accent); font-size: 14px; font-weight: 600; cursor: pointer;
}
.details-send:disabled { background: var(--coral-soft); cursor: default; }
.details-send:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }

.guv-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; max-width: 100%;
}
.guv-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text-dark); }
.guv-recipient { margin: 0 0 10px; font-size: 11px; color: var(--muted); }
.guv-rows { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.guv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.guv-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0; border-bottom: 1px dashed var(--border);
}
.guv-row.total { font-weight: 700; color: var(--coral-dark); border-bottom: none; padding-top: 6px; }
.guv-label { flex: 1; min-width: 0; }
.guv-sub { color: var(--muted); font-weight: 400; font-size: 11px; }
.guv-value { flex-shrink: 0; white-space: nowrap; }

.typing-bubble { font-size: 13px; color: var(--faint); }

.report-link { align-self: flex-start; background: none; border: none; padding: 0; margin: 4px 0 0 6px; color: var(--muted); font-size: 11px; text-decoration: underline; cursor: pointer; font-family: inherit; }
.report-done { margin: 4px 0 0 6px; font-size: 11px; color: var(--muted); }
.report-box { margin: 6px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); max-width: 100%; }
.report-note { font-size: 11.5px; color: var(--muted); margin: 0 0 8px; line-height: 1.5; }
.report-textarea { width: 100%; min-height: 56px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px; resize: vertical; margin-bottom: 8px; }

/* The soft contact invitation under an answer */
.np-invite {
  display: flex; flex-direction: column; gap: 16px; padding: 28px;
  background: var(--peach-pale); border: 1px solid var(--peach-light); border-radius: 14px;
}
.np-invite p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.np-invite-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.np-invite-buttons > button { flex: 1 1 auto; min-height: 44px; padding: 8px 16px; font-size: 13px; }

/* A secondary button with a dark coral outline («Не зараз», the studio links) */
.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 8px 16px; border: 1px solid var(--coral-dark); border-radius: 10px; background: var(--surface);
  color: var(--coral-dark); font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer;
}
.np-page .btn-outline { color: var(--coral-dark); }

/* ---------- The sections lower on the page ---------- */
.np-sections {
  display: flex; flex-direction: column; gap: 56px;
  max-width: 712px; margin: 0 auto; padding: 48px 16px 56px;
}
.np-section {
  display: flex; flex-direction: column; gap: 28px; padding: 28px; scroll-margin-top: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
}
.np-section h2 {
  margin: 0; font-family: 'Lora', Georgia, serif; font-size: 18px; line-height: 1.35; font-weight: 600;
  color: var(--text-dark);
}
.np-pair { display: flex; flex-direction: column; gap: 56px; }

/* «Хто я і як я це пройшла» */
.np-who h2 { font-size: 20px; line-height: 1.3; }
.np-who-grid { display: flex; flex-direction: column; gap: 28px; }
/* The title with the quiet «Сховати цей розділ» at its right; on a narrow phone the button
   moves under the title, at the left. Its 44 px tap area overlaps the space around it. */
.np-who-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 16px; }
.np-who-head .np-quiet-button { margin-block: -8px; }
/* A quiet text button: «Сховати цей розділ», «Показати». */
.np-quiet-button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font-size: 12.5px; line-height: 1.4; color: var(--muted);
}
.np-quiet-button:hover { color: var(--coral-dark); }
/* The hidden section: one line with its title and «Показати». */
.np-section.np-who-collapsed {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between;
  column-gap: 16px; row-gap: 0; padding-block: 12px;
}
.np-who-story, .np-who-photos { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.np-owner { display: flex; align-items: center; gap: 16px; }
.np-owner p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.np-owner strong { display: block; font-size: 15px; font-weight: 700; color: var(--text-dark); }
.np-avatar { position: relative; flex: 0 0 auto; width: 88px; height: 88px; }
.np-avatar-ring { position: absolute; left: 0; top: 0; width: 88px; height: 88px; }
.np-avatar-ring ellipse { stroke: var(--peach-light); }
.np-avatar img { position: absolute; left: 12px; top: 12px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.np-timeline {
  display: flex; flex-direction: column; gap: 28px; margin: 0; padding: 0 0 0 22px; list-style: none;
  border-left: 1px dashed var(--border-strong);
}
.np-timeline li { position: relative; display: flex; flex-direction: column; gap: 8px; }
.np-timeline-dot {
  position: absolute; left: -29px; top: 2px; width: 13px; height: 13px;
  border: 2px solid var(--coral-dark); border-radius: 50%; background: var(--surface);
}
.np-timeline-label {
  font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--coral-dark);
}
.np-timeline p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.np-timeline figure { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.np-timeline figure img { display: block; width: 100%; aspect-ratio: 21 / 20; border-radius: 14px; object-fit: cover; }
.np-timeline figcaption { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.np-gallery { display: flex; flex-direction: column; gap: 8px; }
.np-gallery img { display: block; width: 100%; border-radius: 14px; object-fit: cover; }
.np-gallery .np-photo-wide { height: 182px; }
.np-gallery-row { display: grid; gap: 8px; }
.np-gallery-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.np-gallery-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np-gallery-row img { aspect-ratio: 1 / 1; }
/* A photo of «Хто я» is a button: a tap opens it big (photo-viewer.jsx). */
.np-photo-btn {
  display: block; width: 100%; padding: 0; border: 0; border-radius: 14px; background: none; cursor: zoom-in;
}
.np-photo-btn:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.np-photo-btn.is-away img { visibility: hidden; } /* while the photo is out in the viewer */

/* The photo viewer: the photo in a white frame over the blurred page. */
.np-viewer { position: fixed; inset: 0; z-index: 45; }
.np-viewer-bg {
  position: absolute; inset: 0; background: rgba(250, 236, 231, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}
.np-viewer-fade { transition: opacity .25s ease; }
.np-viewer-stage {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; touch-action: none;
  padding: calc(64px + env(safe-area-inset-top, 0px)) 16px calc(56px + env(safe-area-inset-bottom, 0px));
}
.np-viewer-fig { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.np-viewer-frame {
  overflow: hidden; padding: 8px; border-radius: 20px; background: var(--surface);
  box-shadow: 0 18px 48px rgba(var(--ink-rgb), .18);
}
.np-viewer-frame img {
  display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 13px;
  transform-origin: 0 0; user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.np-viewer-fig figcaption {
  max-width: 34em; font-size: 14px; line-height: 1.5; color: var(--text-dark); text-align: center; text-wrap: balance;
}
.np-viewer-count {
  position: absolute; top: calc(24px + env(safe-area-inset-top, 0px)); left: 20px;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.np-viewer-close {
  position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--surface); color: var(--text-dark);
  box-shadow: 0 2px 10px rgba(var(--ink-rgb), .12); cursor: pointer;
}
.np-viewer-close:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; }
.np-viewer-dots {
  position: absolute; left: 0; right: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.np-viewer-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--peach-light); transition: width .2s, background .2s; }
.np-viewer-dots span.is-on { width: 18px; border-radius: 3px; background: var(--coral); }
@media (prefers-reduced-motion: reduce) {
  .np-viewer-fade, .np-viewer-dots span { transition: none; }
}
.np-who-links { display: flex; flex-direction: column; gap: 8px; }
.np-who-summary {
  display: flex; flex-direction: column; gap: 8px; padding: 16px;
  background: var(--peach-pale); border: 1px solid var(--peach-light); border-radius: 14px;
}
.np-who-summary p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.np-who-summary .np-who-summary-main { font-weight: 600; color: var(--text-dark); }

/* «Як виглядає весь шлях» — the tracker */
.np-path { gap: 16px; }
.tracker-head { display: flex; flex-direction: column; gap: 2px; }
.tracker-sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.tracker-substep-total { margin: 0; font-size: 12px; color: var(--coral-dark); font-weight: 600; }
.tracker-hint { margin: 0; font-size: 12px; color: var(--muted); }
.tracker-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tracker-step-block { display: flex; flex-direction: column; gap: 6px; }
.tracker-row {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px;
  border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg);
  cursor: pointer; transition: border-color .15s ease;
  /* Without this, a slightly-off tap on Android Chrome can be interpreted as starting a
     text selection (the row is a plain div full of text) instead of a click — the row
     flashes blue like selected text and the click never registers. */
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tracker-row:hover { border-color: var(--peach-light); }
.tracker-row.active { background: var(--peach-pale); border-color: var(--peach-light); }
.tracker-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--border-strong); background: var(--surface);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tracker-dot.done { background: var(--peach-light); border: none; }
.tracker-dot.active { background: var(--coral); border: none; }
.tracker-dot .num { font-size: 12px; color: var(--muted); }
.tracker-dot.done svg { color: var(--coral-dark); }
.tracker-dot.active svg { color: var(--on-accent); }
.tracker-label { flex: 1; margin: 0; font-size: 13.5px; line-height: 1.4; }
.tracker-label.done { color: var(--muted); text-decoration: line-through; }
.tracker-label.active { color: var(--text-dark); font-weight: 600; }
.tracker-label.pending { color: var(--ink); }
.tracker-substep-count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--coral-dark); }
.tracker-row > svg { color: var(--coral-dark); }
.tracker-substeps { display: flex; flex-direction: column; padding-left: 40px; }
.tracker-substep {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 6px;
  border-radius: 8px; cursor: pointer; transition: background .15s ease;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tracker-substep:hover { background: var(--bg); }
.tracker-substep-dot {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--border-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
}
.tracker-substep-dot.done { background: var(--coral); border-color: var(--coral); }
.tracker-substep-dot.done svg { color: var(--on-accent); }
.tracker-substep-label { font-size: 12.5px; line-height: 1.4; color: var(--ink); }
.tracker-substep.done .tracker-substep-label { color: var(--muted); text-decoration: line-through; }
.context-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  font-size: 11.5px; font-weight: 600; color: var(--coral-dark);
  background: var(--peach-pale); border: 1px solid var(--peach-light);
  border-radius: 999px; padding: 4px 10px;
}

/* «Що всередині» and «Питання і відповіді»: points that open on a tap */
.np-page summary { list-style: none; cursor: pointer; }
.np-page summary::-webkit-details-marker { display: none; }
.np-items summary, .np-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--text-dark);
}
.np-chevron { flex: 0 0 auto; color: var(--coral-dark); transition: transform .15s ease; }
details[open] > summary .np-chevron { transform: rotate(180deg); }

.np-inside { gap: 16px; }
.np-inside-lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text-dark); }
.np-inside-text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.np-items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--border); }
.np-items > li { padding: 4px 0; border-top: 1px solid var(--border); }
.np-items summary { min-height: 44px; }
.np-item-body { display: flex; flex-direction: column; gap: 4px; padding: 2px 0 8px; }
.np-item-body > p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.np-item-body > p:last-child { padding-bottom: 4px; }
.np-item-body > p.np-item-more { padding-top: 6px; } /* a second paragraph in an opened point */
.np-item-body > .np-item-note { font-size: 12.5px; color: var(--muted); }
/* «Завантажити», «Додати підпис» — quiet buttons with a round icon */
.quiet-button {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.quiet-button:hover { color: var(--coral-dark); }
.quiet-button:disabled { opacity: .45; cursor: not-allowed; }
.quiet-button .icon-circle {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--icon-circle);
}
.np-inside-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
/* The two sample photos inside «Зразки документів» */
.docs-panel { display: flex; align-items: flex-start; gap: 14px; margin: 8px 0 4px; overflow-x: auto; }
.docs-panel .doc-item { text-align: center; flex-shrink: 0; width: 130px; }
.docs-panel img { width: 130px; border-radius: 10px; border: 1px solid var(--border); display: block; }
.docs-panel .np-photo-btn { border-radius: 10px; }
.docs-panel .doc-title { font-size: 11px; margin: 6px 0 0; font-weight: 600; }
.docs-panel .doc-sub { font-size: 10px; margin: 2px 0 0; color: var(--muted); }
.doc-caption { font-size: 10px; margin: 4px 0 0; color: var(--muted); font-style: italic; }

.np-faq { gap: 0; padding: 28px 28px 12px; }
.np-faq h2 { margin: 0 0 16px; }
.np-faq details { border-top: 1px solid var(--border); }
.np-faq summary { min-height: 48px; padding: 6px 0; }
.np-faq-answer { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.np-faq-answer p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); }

/* ---------- Footer ---------- */
.np-footer { display: flex; flex-direction: column; gap: 16px; padding-top: 28px; border-top: 1px solid var(--peach-light); }
.np-footer-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 10px;
  font-size: 12.5px; color: var(--muted);
}
.np-footer-links a, .np-footer-links .link-btn { display: inline-flex; align-items: center; min-height: 44px; }
.np-footer-links .np-footer-delete { flex: 0 0 100%; justify-content: center; }
.np-footer-disclaimer { margin: 0; font-size: 10.5px; line-height: 1.4; color: var(--muted); text-align: center; }

/* Without the links to the sections (her «Хто я» is hidden), the ring keeps its top showing
   beside the quiet actions instead of above the links. */
@media (max-width: 899px) {
  .np-top.no-links .np-ring { bottom: -217px; }
}

/* A short phone screen (like 375×667): less air above the field, so that the whole field and
   the quiet actions under it are seen without scrolling. */
@media (max-width: 899px) and (max-height: 700px) {
  .np-header { padding-top: 24px; }
  .np-top { padding-top: 40px; }
  .np-hero + .np-block { margin-top: 40px; }
}

/* ---------- Computer layout (from 900 px) ---------- */
@media (min-width: 900px) {
  .np-header { padding: 32px 20px 0; }
  .np-top { padding: 56px 16px; }
  .np-ring { right: -200px; bottom: -282px; width: 520px; height: 520px; clip-path: none; }
  .np-hero h1 { font-size: 32px; line-height: 1.25; }
  .np-hero-sub { font-size: 17px; line-height: 1.5; }
  .np-maps-line { font-size: 14.5px; }
  .np-maps-line svg { width: 16px; height: 16px; }
  .np-field.big textarea, .np-examples-label, .np-example { font-size: 20px; line-height: 1.4; }
  .np-field.big textarea { min-height: 160px; }
  .np-ai-notice { font-size: 13px; }
  .np-field.big .np-send, .np-field.big .np-mic { width: 52px; height: 52px; }
  .np-field.big .np-send svg { width: 20px; height: 20px; }
  .quiet-actions { justify-content: flex-start; padding-left: 28px; }
  .np-chat + .quiet-actions { padding-left: 40px; }
  .quiet-actions > * { font-size: 13px; }
  .np-section-links { flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 24px; }
  .np-section-links a, .np-section-links a:last-child { border: 0; font-size: 13.5px; }
  .np-chat { padding: 40px; }
  .msg-bubble { font-size: 15px; }
  .msg-row.user > .msg-bubble { max-width: 70%; }
  .msg-row.assistant > .msg-bubble, .msg-meta-col { max-width: 80%; }
  .np-invite p { font-size: 14.5px; }
  .np-invite-buttons > button { flex: 0 0 auto; padding: 8px 28px; }
  .np-chat-tagline { font-size: 22px; }
  .np-chat-tagline + .np-section-links { margin-top: 28px; }

  .np-sections { max-width: 1072px; padding: 0 16px 56px; }
  .np-section h2 { font-size: 24px; }
  .np-who { gap: 56px; padding: 56px; }
  .np-who h2 { font-size: 26px; }
  .np-who-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; row-gap: 28px; align-items: start; }
  .np-who-head { grid-column: 1 / -1; }
  .np-quiet-button { font-size: 13px; }
  .np-timeline p { font-size: 15px; }
  .np-timeline figure { max-width: 300px; }
  .np-gallery .np-photo-wide { height: 250px; }
  .np-who-summary { padding: 28px; }
  .np-who-summary p { font-size: 15px; }
  .np-path { gap: 28px; padding: 56px; }
  .tracker-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
  /* Room for a name on two lines, so the six steps of the grid are the same height. */
  .tracker-row { min-height: 66px; padding: 12px 16px; }
  .tracker-label { font-size: 14.5px; }
  /* «Що всередині» and «Питання і відповіді» side by side; opening a point in one doesn't stretch the other. */
  .np-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .np-inside { padding: 40px; }
  .np-faq { padding: 40px 40px 24px; }
  .np-footer { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 56px; }
  .np-footer-links { justify-content: flex-start; column-gap: 28px; font-size: 13px; }
  .np-footer-dot { display: none; }
  .np-footer-links .np-footer-delete { flex: 0 0 auto; }
  .np-footer-disclaimer { max-width: 420px; padding-top: 13px; font-size: 12px; line-height: 1.5; text-align: left; }
}

/* ======================= Panels and buttons (main page and dialogs) ======================= */
.btn-ghost {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--muted);
  background: none; border: 1px solid var(--border);
  border-radius: 10px; padding: 7px 12px; cursor: pointer;
  transition: all .15s ease;
  text-decoration: none; font-family: inherit;
}
.btn-ghost:hover { border-color: var(--peach-light); color: var(--coral-dark); }
.btn-ghost:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost:disabled:hover { border-color: var(--border); color: var(--muted); }

.account-panel {
  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
}
.account-panel-text { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.conversation-id-note { margin: 10px 0 0; font-size: 10.5px; color: var(--muted); opacity: 0.7; word-break: break-all; }
.np-page .account-panel-text a, .account-panel-text a { color: var(--coral-dark); }
/* The signature panel inside «Що всередині» → «Підпис»: no frame of its own there. */
.account-panel.in-item { max-width: none; margin: 4px 0 8px; padding: 0; border: 0; background: none; }

.signature-pad-wrap { display: flex; flex-direction: column; gap: 8px; }
.signature-canvas {
  width: 100%; max-width: 680px; height: 260px; touch-action: none;
  border: 1.5px dashed var(--peach-light); border-radius: 10px; background: var(--surface); cursor: crosshair;
}
.signature-preview {
  max-width: 220px; max-height: 80px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); padding: 6px; align-self: flex-start;
}

/* Landing */
.landing {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px;
}
.landing-card {
  max-width: 440px; width: 100%; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  padding: 36px 28px;
}
.landing-card img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; margin-bottom: 14px; }
.landing-card h1 { margin: 0 0 12px; font-size: 20px; color: var(--text-dark); }
.landing-lede { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: var(--ink); }
/* The last text before the buttons keeps the same distance to them as before (the German line used to be last). */
.landing-card .landing-lede:last-of-type { margin-bottom: 20px; }
.landing-lede-de { margin: 0 0 20px; font-size: 12.5px; color: var(--muted); font-style: italic; }
/* The УКР / DE switch above the start card, at its right edge. */
.landing-lang { width: 100%; max-width: 440px; display: flex; justify-content: flex-end; margin-bottom: 10px; }
.landing-start { width: 100%; padding: 12px; font-size: 14.5px; }
.landing-secondary { width: 100%; justify-content: center; margin-top: 10px; padding: 8px 12px; font-size: 13px; }

/* Legal footer of the start screen and the crash screen (the main page has its own, .np-footer). */
.legal-footer { margin-top: 18px; text-align: center; }
.legal-footer-links { font-size: 12px; margin: 0 0 4px; }
.legal-footer-links a { color: var(--muted); text-decoration: underline; }
.legal-footer-links a:hover { color: var(--coral-dark); }
.assistant-disclaimer { font-size: 10.5px; color: var(--muted); line-height: 1.4; margin: 0; }

/* Lead form */
.lead-card {
  background: var(--peach-pale); border: 1px solid var(--peach-light); border-radius: 14px;
  padding: 14px 16px;
}
.lead-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text-dark); }
.lead-desc { margin: 0 0 12px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.lead-card .field-row:last-of-type { margin-bottom: 10px; }
.howheard-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
/* The answer chips of the contact form and the УКР / DE language switch look the same. */
.howheard-chip, .lang-btn {
  font-size: 12px; font-weight: 600; color: var(--coral-dark);
  background: var(--surface); border: 1px solid var(--peach-light); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; font-family: inherit; transition: all .15s ease;
}
.howheard-chip:hover, .lang-btn:hover { border-color: var(--coral); }
.howheard-chip.selected, .lang-btn.selected { background: var(--coral); color: var(--on-accent); border-color: var(--coral); }
.lang-switch { display: flex; gap: 4px; flex-shrink: 0; }
.lang-btn.selected { cursor: default; }
.consent-row {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px;
  font-size: 12px; color: var(--muted); line-height: 1.4; cursor: pointer;
}
.consent-row input { margin-top: 2px; flex-shrink: 0; }
.consent-row a, .np-page .consent-row a { color: var(--coral-dark); }
.lead-done p { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--coral-dark); font-weight: 600; }

/* Lead form fields */
.field-row { display: flex; gap: 6px; margin-bottom: 14px; }
.field-row input, .field-row textarea {
  flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; font-size: 13px; outline: none;
}
.field-row textarea { font-family: inherit; line-height: 1.4; min-height: 60px; resize: vertical; }
.lead-field-error { margin: -6px 2px 12px; font-size: 12px; color: var(--coral-dark); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.btn-primary {
  background: var(--coral); color: var(--on-accent); border: none; border-radius: 10px;
  padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.btn-primary:disabled { background: var(--coral-soft); cursor: default; }
/* A ghost button placed next to a .btn-primary — same height as it. */
.btn-ghost.btn-pair { padding: 8px 14px; font-size: 13px; }
/* Equal-width stacked choices (e.g. "which conversation to keep") in narrow panels. */
.modal-actions.stack-actions { flex-direction: column; align-items: stretch; }
.stack-actions .btn-ghost { justify-content: center; }
/* Buttons in a row from the left edge (plain .modal-actions keeps them on the right);
   start-wrap also lets them wrap onto a second line on a narrow phone. */
.modal-actions.start { justify-content: flex-start; }
.modal-actions.start-wrap { justify-content: flex-start; flex-wrap: wrap; align-items: center; }

/* One-off adjustments that used to be written straight into the markup. */
.account-panel.wide { max-width: 720px; }                          /* the signature panel */
.lead-desc.howheard-label { margin: 0 0 6px; }                     /* "Як ти дізналася про нас?" */
.lead-desc.paywall-alt { margin-top: 10px; margin-bottom: 0; }     /* "Ще не готова платити?" */
.optional-note { opacity: .65; }                                   /* "(необов'язково)" */
.flip { transform: rotate(180deg); }                               /* an opened chevron */
.no-shrink { flex-shrink: 0; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Short confirmation of what the user just did ("Розмову видалено") — disappears on its own. */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--on-accent); border-radius: 12px; padding: 10px 16px;
  font-size: 13.5px; line-height: 1.4; box-shadow: 0 6px 20px rgba(var(--ink-rgb), .18);
  animation: toastIn .2s ease;
}
.toast svg { flex-shrink: 0; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* Dialog over the page ("Видалити мої дані") — opened from the footer, so it must appear
   where the visitor is rather than in a panel at the top. */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 40; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--ink-rgb), .45);
}
.dialog {
  width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface); border-radius: 16px; padding: 18px 16px; outline: none;
  overflow-wrap: anywhere; /* a long email address must not push the dialog wider */
}
.dialog h2 { margin: 0; font-size: 16px; color: var(--ink); }
.dialog h3 { margin: 0; font-size: 13px; color: var(--ink); }
.dialog-section { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.dialog .field-row { margin-bottom: 0; }
.dialog .modal-actions { margin-top: 0; }
.dialog-done { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink); }
.dialog-done svg { flex-shrink: 0; color: var(--coral); }
/* A button that looks like the footer links next to it. */
.link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: var(--coral-dark); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--peach-light); border-radius: 8px; }