/* Тёплый интерфейс (палитра «тёплая терракота на креме», 29.10): кремовый фон, белые листы-карточки, один тёплый цвет для действий
   (кнопки, свои сообщения, выбранные ответы), приглушённые тёплые акценты подсказок. Синего, зелёного и чёрных
   кнопок нет; тёмной темы нет: сайт всегда светлый. Мобильный в первую очередь; всё читается и без JS. */
:root {
  --bg: #f7f2ec;
  --surface: #fffcf8;
  --surface-2: #faf5ef;
  --text: #26201c;
  --muted: #655d55;
  --faint: #7d756c;
  --line: #e9e0d5;
  --field-line: #dacfc2;
  --hair: rgba(31, 33, 29, .07);
  --primary: #b5532f;
  --primary-hover: #9a4425;
  --ink: var(--primary);
  --on-ink: #ffffff;
  --accent: #9a4425;
  --accent-soft: #f8e8df;
  --glow: #f3dfcc;
  --ok: #157a45; --ok-soft: #e6f4ea;
  --warn: #8f5b00; --warn-soft: #fbf2df; --warn-line: #ecd29b;
  --bad: #b8321f; --bad-soft: #fbebe7;
  --ochre: #94650f; --ochre-soft: #f6ecd3;
  --plum: #6b4a7a; --plum-soft: #efe6f2;
  --sepia: #6f5a47; --sepia-soft: #efe7de;
  --radius: 18px;
  --radius-s: 12px;
  --shadow: 0 1px 2px rgba(60, 40, 25, .05), 0 8px 24px rgba(60, 40, 25, .07);
  --shadow-primary: 0 6px 18px rgba(181, 83, 47, .26);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "PT Serif", Georgia, "Times New Roman", serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg) radial-gradient(900px 420px at 85% -160px, var(--glow), transparent 70%) no-repeat; color: var(--text); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern"; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); color: var(--text); text-wrap: balance; }
h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.022em; font-weight: 700; margin: 8px 0 12px; }
h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.016em; font-weight: 650; margin: 32px 0 12px; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; font-weight: 650; margin: 0 0 6px; }
p { margin: 0 0 12px; }
b, strong { font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.lead { color: var(--muted); font-size: 19px; line-height: 1.5; margin-bottom: 20px; }
.prose { max-width: 66ch; }
::selection { background: var(--accent-soft); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }

/* Шапка и подвал */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--hair); }
.top-in { max-width: 1080px; margin: 0 auto; padding: 0 16px; height: 52px; display: flex; align-items: center; gap: 10px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); font-weight: 650; letter-spacing: -.01em; font-size: 16px; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand svg { flex: none; color: var(--primary); }
.beta { font-size: 11px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; color: var(--warn); background: var(--warn-soft); }
.top-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.top-nav a { color: var(--muted); }
.top-nav a:hover { color: var(--text); text-decoration: none; }
.top-nav .btn { color: var(--on-ink); }
@media (max-width: 560px) { .top-nav .hide-m, .top-acc .hide-m { display: none; } }

.page { max-width: 720px; margin: 0 auto; padding: 20px 16px 64px; }
.foot { border-top: 1px solid var(--hair); }
.foot-in { max-width: 1080px; margin: 0 auto; padding: 28px 16px 40px; color: var(--faint); font-size: 13px; line-height: 1.5; display: grid; gap: 10px; }
.foot-in p { margin: 0; max-width: 80ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot-links a { color: var(--muted); }

/* Шаги дела: «Шаг 3 из 8» + тонкая шкала + список шагов */
.stepper { margin: 0 0 14px; }
.stepper .where { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.stepper .where b { color: var(--text); font-weight: 600; }
.stepper .bar { display: flex; gap: 3px; margin-bottom: 10px; }
.stepper .bar span { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background .3s; }
.stepper .bar span.on { background: var(--ink); }
.stepper ol { list-style: none; margin: 0; padding: 0 0 2px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.stepper ol::-webkit-scrollbar { display: none; }
.stepper li a { display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.stepper li a:hover { background: var(--surface); text-decoration: none; color: var(--text); }
.stepper .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--line); color: var(--muted); }
.stepper li.past .n { background: var(--ink); color: var(--on-ink); }
.stepper li.current a { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow); }
.stepper li.current .n { background: var(--accent); color: #fff; }
@media (max-width: 560px) { .stepper li:not(.current) .t { display: none; } .stepper li a { padding: 5px; } .stepper li.current a { padding-right: 10px; } }

/* Срок — на всех экранах дела */
.deadline { display: flex; align-items: center; gap: 10px; border-radius: var(--radius-s); padding: 10px 14px; margin: 0 0 22px; background: var(--surface); font-size: 15px; box-shadow: var(--shadow); }
.deadline::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.deadline.ok::before { background: var(--ok); }
.deadline.warn { background: var(--warn-soft); box-shadow: none; }
.deadline.warn::before { background: var(--warn); }
.deadline.bad { background: var(--bad-soft); box-shadow: none; }
.deadline.bad::before { background: var(--bad); }

/* Листы и заметки */
.card { background: var(--surface); border-radius: var(--radius); padding: 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.card h2 { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.note { background: var(--accent-soft); border-radius: var(--radius-s); padding: 12px 16px; margin: 12px 0; }
.alert { background: var(--warn-soft); border-radius: var(--radius-s); padding: 12px 16px; margin: 12px 0; color: var(--text); }
.todo { background: var(--warn-soft); box-shadow: none; }
.todo ul { margin: 0; padding-left: 20px; }
.soon { margin-top: 40px; }

/* Формы */
.form fieldset { border: 0; border-radius: var(--radius); background: var(--surface); padding: 20px 20px 6px; margin: 0 0 16px; min-width: 0; box-shadow: var(--shadow); }
.form legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-family: var(--display); font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.form legend ~ * { clear: both; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label, .field .label { font-weight: 600; font-size: 15px; }
.opt { font-weight: 400; color: var(--faint); font-size: 13px; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=email], input[type=tel], input[type=number], input:not([type]), select, textarea {
  font: inherit; font-size: 17px; color: var(--text); background: var(--surface); border: 1px solid var(--field-line);
  border-radius: var(--radius-s); padding: 12px 14px; width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s, background .15s;
}
input[type=date], input[type=time] { min-height: 50px; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
textarea { resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px var(--accent-soft); }
::placeholder { color: var(--faint); }
.hint { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.45; }

.q { border: 0; border-radius: var(--radius); background: var(--surface); padding: 18px 20px; margin: 0 0 12px; box-shadow: var(--shadow); min-width: 0; }
.q legend { float: left; width: 100%; padding: 0; margin: 0 0 12px; font-family: var(--display); font-weight: 650; font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
.q legend ~ * { clear: both; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; line-height: 1.3; transition: background .15s, border-color .15s, color .15s; }
.chip:hover span { border-color: color-mix(in srgb, var(--muted) 50%, var(--line)); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.chip input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ink); }

/* Кнопки */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 600; font-size: 16px; line-height: 1.2; min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; text-align: center; transition: transform .08s ease, background .15s, border-color .15s, opacity .15s; -webkit-tap-highlight-color: transparent; }
.btn:hover { text-decoration: none; border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-ink); box-shadow: var(--shadow-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn.primary.small { box-shadow: none; }
.btn.small { min-height: 36px; padding: 7px 14px; font-size: 14px; }
.btn.big { min-height: 56px; padding: 16px 28px; font-size: 17px; }
.btn[disabled] { opacity: .45; cursor: default; }
.link { font: inherit; font-size: 14px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link.danger { color: var(--bad); }
.btn.link { background: none; border-color: transparent; color: var(--accent); font-weight: 500; min-height: 0; padding: 8px 4px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.actions .btn { flex: 1 1 200px; }
.actions.sticky { position: sticky; bottom: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); margin: 0; border-top: 1px solid var(--hair); }

.copyrow { display: flex; gap: 8px; margin: 12px 0 0; }
.copyrow input { flex: 1; font-size: 14px; }
.savelink { background: var(--accent-soft); box-shadow: none; }

/* Вердикт */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 8px 0 18px; }
.tile { background: var(--surface); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 2px; box-shadow: var(--shadow); }
.tile .k { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.tile .v { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tile .s { font-size: 13px; color: var(--muted); }
.tile.bad { background: var(--bad-soft); box-shadow: none; }
.tile.bad .v { color: var(--bad); }
.tile.good { background: var(--ok-soft); box-shadow: none; }
.tile.good .v { color: var(--ok); }
.grounds { display: grid; gap: 12px; }
.ground { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.ground > :last-child { margin-bottom: 0; }
.ground header, .ground-block > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ground header h3 { margin: 0 0 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 650; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pill::before { content: ""; width: 18px; height: 6px; border-radius: 3px; background: currentColor; opacity: .9; -webkit-mask: linear-gradient(90deg, #000 0 28%, transparent 28% 36%, #000 36% 64%, transparent 64% 72%, #000 72%); mask: linear-gradient(90deg, #000 0 28%, transparent 28% 36%, #000 36% 64%, transparent 64% 72%, #000 72%); }
.pill.strong { background: var(--ok-soft); color: var(--ok); }
.pill.medium { background: var(--warn-soft); color: var(--warn); }
.pill.medium::before { -webkit-mask: linear-gradient(90deg, #000 0 28%, transparent 28% 36%, #000 36% 64%, transparent 64%); mask: linear-gradient(90deg, #000 0 28%, transparent 28% 36%, #000 36% 64%, transparent 64%); }
.pill.weak { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.pill.weak::before { -webkit-mask: linear-gradient(90deg, #000 0 28%, transparent 28%); mask: linear-gradient(90deg, #000 0 28%, transparent 28%); }
.possible { padding-left: 20px; }
.possible li { margin-bottom: 8px; }
.verdict-none { border-left: 4px solid var(--ok); }

/* Доказательства */
.ground-block { background: var(--surface); border-radius: var(--radius); padding: 20px; margin: 0 0 16px; box-shadow: var(--shadow); }
.ground-block > header h2, .ground-block > h2 { margin: 0 0 8px; font-size: 20px; }
.sub { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.ev { padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.tag { font-size: 12px; color: var(--faint); white-space: nowrap; }
.tag.req { color: var(--accent); font-weight: 650; }
.files { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.files li { display: block; font-size: 15px; }
.files a { word-break: break-all; }
.file-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.file-note { margin-top: 4px; font-size: 15px; padding: 10px 12px; }

/* Загрузка файлов: мягкая зона, само поле прозрачно поверх */
.upload { position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 12px; padding: 10px 16px; border-radius: 999px; border: 1px dashed color-mix(in srgb, var(--muted) 50%, var(--line)); background: var(--surface-2); font-size: 15px; cursor: pointer; max-width: 100%; }
.upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.upload span { pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload span::before { content: "＋ "; color: var(--accent); font-weight: 700; }
.upload:hover { border-color: var(--accent); }
.upload:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.upload.has-files span::before { content: "✓ "; color: var(--ok); }
.upload.big { display: grid; place-items: center; text-align: center; border-radius: var(--radius); min-height: 150px; padding: 28px 20px; margin: 14px 0 16px; font-size: 16px; background: var(--surface-2); }
.upload.big span { white-space: normal; font-weight: 600; }
.upload.big span::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a66c2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M5 20h14'/%3E%3C/svg%3E") center / 22px no-repeat; }
.upload.big.has-files span::before { background: var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7f4b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center / 22px no-repeat; }
.upload-card .btn { width: 100%; }

/* Документы */
.doclist { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 0; }
.doclist li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.doclist li:last-child { border-bottom: 0; }
.doclist b { flex: 1 1 220px; font-weight: 600; }
pre.doc { white-space: pre-wrap; background: var(--surface); border-radius: var(--radius); padding: 28px 24px; font: 16px/1.6 var(--serif); overflow-x: auto; box-shadow: var(--shadow); color: var(--text); }
.howto ol { padding-left: 22px; }
.howto li { margin-bottom: 10px; }
.channels { display: grid; gap: 8px; }
.channel { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px 14px; cursor: pointer; background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.channel:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.channel:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.channel input { margin-top: 4px; accent-color: var(--ink); }
.channel small { display: block; color: var(--muted); font-size: 14px; }

/* Распознавание и ожидание */
.progress { display: flex; gap: 18px; align-items: center; }
.progress h2 { margin: 0 0 4px; }
.spinner { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--ink); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 3s; } }
.field.flag input, .field.flag select, .field.flag textarea { border-color: var(--warn-line); background: var(--warn-soft); }
.checknote { font-size: 13px; color: var(--warn); margin: 0; }

/* Рассказ своими словами */
.understood h2 { margin-top: 0; }
.story-matches { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.story-matches li { padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius-s); }
.quote { display: block; color: var(--muted); font-style: italic; font-size: 15px; margin-top: 2px; }
.plain-list { margin: 0 0 12px; padding-left: 20px; }
.plain-list li { margin-bottom: 4px; }
.from-story { font-size: 14px; color: var(--muted); margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--accent); }

/* Тезисы: что доказать и чем */
.thesis { border-left: 3px solid var(--line); padding: 2px 0 4px 14px; margin: 0 0 18px; }
.thesis-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.thesis-head p { margin: 0 0 4px; flex: 1 1 260px; }
.thesis-st { font-size: 12px; font-weight: 650; border-radius: 999px; padding: 3px 10px; white-space: nowrap; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.thesis-st.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.thesis-st.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.ev-request { margin: 6px 0; }
.how summary, details > summary { cursor: pointer; color: var(--accent); }
.how p { margin: 6px 0 0; }

/* Комплект: проверка и главные кнопки */
.pkg-check.ok { background: var(--ok-soft); box-shadow: none; }
.pkg-check.bad { background: var(--warn-soft); box-shadow: none; }
.pkg-check h2 { margin-top: 0; }
.issues { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.issues li { background: var(--surface); border-radius: var(--radius-s); padding: 12px 14px; border-left: 4px solid var(--line); }
.issues li.high { border-left-color: var(--bad); }
.issues .quote { margin: 0 0 4px; }
.main-download { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.main-download .hint { flex-basis: 100%; margin: 0; }

/* Куда подавать: сверка со справочником и суд */
.dir-check { border-radius: var(--radius-s); padding: 12px 14px; margin: 0 0 16px; background: var(--surface-2); border: 1px solid var(--line); }
.dir-check.match { background: var(--ok-soft); border-color: transparent; }
.dir-check.differs { background: var(--warn-soft); border-color: transparent; }
.dir-check p { margin: 0 0 6px; }
.fill-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.court-pick { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.court-pick h3 { margin: 0 0 6px; }
.court-pick.active { border-top: 2px solid var(--ink); }
.court-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 12px; }
.court-list li { display: grid; gap: 4px; justify-items: start; }
.default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Ответ и сопровождение */
.check-line label { display: flex; gap: 10px; align-items: center; font-weight: 600; margin-bottom: 6px; }
.check-line input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--ink); }

/* ── Главная и посадочные ─────────────────────────────────────── */
.page.wide { max-width: 1080px; }
.hero { display: grid; gap: 40px; align-items: center; padding: 20px 0 8px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.2fr .8fr; padding: 56px 0 24px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ok); background: var(--ok-soft); padding: 6px 12px 6px 10px; border-radius: 999px; margin-bottom: 16px; letter-spacing: .01em; }
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.hero h1 { font-size: clamp(38px, 4.9vw, 56px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 18px; }
.hero h1 span { color: var(--primary); }
.hero .lead { font-size: clamp(18px, 2vw, 21px); max-width: 34em; }
.start { display: grid; gap: 12px; margin-top: 26px; max-width: 470px; }
.start .btn { width: 100%; }
.start .check { margin: 0; font-size: 14px; color: var(--muted); }
.assure { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); margin: 4px 0 0; padding: 0; list-style: none; }
.assure li::before { content: "✓"; color: var(--ok); font-weight: 700; margin-right: 6px; }

/* Номер постановления: на главной и вместо файла на шаге «Постановление» */
.uin-field { display: grid; gap: 6px; }
.uin-field label { font-weight: 600; font-size: 15px; }
.uin-field .opt { display: block; margin-top: 2px; }
.uin-card label { display: block; color: var(--muted); }
.uin-card .copyrow input { font-size: 17px; letter-spacing: .02em; }
.uin-out:empty { display: none; }
.uin-out.ok { color: var(--ok); }
.uin-out.bad { color: var(--warn); }

/* Лист жалобы — витрина результата */
.paper-wrap { position: relative; padding: 10px 6px 18px; }
.paper { position: relative; background: #fff; color: #172033; border-radius: 6px; padding: 30px 30px 26px; font: 12.5px/1.55 var(--serif); box-shadow: 0 1px 1px rgba(23,32,51,.04), 0 12px 40px rgba(23,32,51,.08), 0 40px 80px -20px rgba(60,46,20,.16); transform: rotate(-1.2deg); max-width: 440px; margin: 0 auto; }
.paper.back { position: absolute; inset: 22px 0 0 18px; transform: rotate(2.4deg); opacity: .6; }
.paper .to { text-align: right; margin-bottom: 18px; color: #3a3a3c; }
.paper .ttl { text-align: center; font-weight: 700; letter-spacing: .06em; margin: 6px 0 2px; }
.paper .sub-ttl { text-align: center; margin-bottom: 14px; color: #3a3a3c; }
.paper p { margin: 0 0 8px; text-align: justify; hyphens: auto; }
.paper .ln { display: block; height: 7px; border-radius: 4px; background: #ececf0; margin: 7px 0; }
.paper .sign { display: flex; justify-content: space-between; margin-top: 18px; color: #6e6e73; }
.paper .stamp { position: absolute; right: 22px; bottom: 54px; transform: rotate(-8deg); border: 2px solid #1a7f4b; color: #1a7f4b; border-radius: 8px; padding: 4px 10px; font: 700 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; margin: 36px 0 8px; box-shadow: var(--shadow); }
@media (min-width: 800px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: var(--surface); padding: 20px 20px 18px; }
.fact b { display: block; color: var(--primary); font-family: var(--display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.fact span { display: block; font-size: 14px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

.section { padding: 56px 0 8px; }
.section > h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; line-height: 1.08; margin: 0 0 10px; }
.section > .lead { max-width: 40em; }
.steps-grid { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; counter-reset: st; }
@media (min-width: 800px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } }
.steps-grid li { background: var(--surface); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow); counter-increment: st; }
.steps-grid li::before { content: counter(st); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--primary); margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.steps-grid b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -.01em; margin-bottom: 6px; }
.steps-grid span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.steps-list { padding-left: 22px; }
.steps-list li { margin-bottom: 8px; }

.split { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; align-items: start; } }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.ticks li:last-child { border-bottom: 0; }
.ticks li::before { content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.ticks b { font-weight: 650; }
.ticks span { color: var(--muted); font-size: 15px; }

.principles { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 800px) { .principles { grid-template-columns: repeat(2, 1fr); } }
.principle { background: var(--surface); border-radius: var(--radius); padding: 22px 22px 20px; box-shadow: var(--shadow); }
.principle h3 { font-size: 19px; margin-bottom: 8px; }
.principle p { color: var(--muted); font-size: 15px; margin: 0; }
.principle .ico { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); display: grid; place-items: center; margin-bottom: 16px; color: var(--accent); }

.kinds { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 800px) { .kinds { grid-template-columns: repeat(3, 1fr); } }
.kind { background: var(--surface); border-radius: var(--radius); padding: 22px 20px; box-shadow: var(--shadow); display: grid; gap: 6px; align-content: start; color: var(--text); }
a.kind:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--ink); }
.kind .art { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kind b { font-family: var(--display); font-size: 19px; letter-spacing: -.01em; }
.kind span { color: var(--muted); font-size: 15px; }
.kind .state { justify-self: start; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); margin-top: 6px; }
.kind.off { box-shadow: none; background: transparent; border: 1px dashed var(--line); }
.kind.off .state { background: var(--surface-2); color: var(--muted); }

.faq { margin-top: 24px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 20px; font-weight: 600; color: var(--text); cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 18px; margin: 0; color: var(--muted); max-width: 70ch; }

.cta-final { text-align: center; padding: 64px 0 24px; }
.cta-final h2 { font-size: clamp(28px, 4vw, 40px); letter-spacing: -.03em; margin: 0 0 10px; }
.cta-final .start { margin: 22px auto 0; text-align: left; }
.price-note { display: inline-block; font-size: 14px; color: var(--muted); background: var(--surface); padding: 6px 12px; border-radius: 999px; box-shadow: var(--shadow); }

.mobile-cta { display: none; }
@media (max-width: 700px) {
  .mobile-cta { display: block; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 30; transition: transform .25s ease, opacity .25s; }
  .mobile-cta .btn { width: 100%; box-shadow: 0 10px 30px rgba(15, 92, 69, .3); }
  .mobile-cta.hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
}

/* Заявки (лиды) */
.lead-form { display: grid; gap: 12px; }
.ok-box { background: var(--ok-soft); border-radius: var(--radius-s); padding: 14px 16px; }
.paper .w55 { width: 55%; } .paper .w60 { width: 60%; } .paper .w70 { width: 70%; } .paper .w80 { width: 80%; } .paper .w92 { width: 92%; }
.paper .pray { margin-top: 10px; }
.paywall { border: 2px solid var(--ink); }
.pay-form { display: grid; gap: 10px; }
pre.doc.fade { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.more-grounds summary { color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.more-grounds summary::-webkit-details-marker { display: none; }
.more-grounds summary::after { content: "+"; color: var(--muted); font-size: 20px; line-height: 1; }
.more-grounds[open] summary::after { content: "−"; }
.more-grounds .possible { margin: 14px 0 0; }
.kind-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.kind-switch .hint { flex-basis: 100%; }
.seg { font: inherit; font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; }
.seg:hover { border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); }
.seg.on { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.remind-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.remind-mail { display: grid; gap: 10px; max-width: 460px; }
.frame-check { font-size: 14px; margin: 6px 0 0; padding: 8px 12px; border-radius: var(--radius-s); background: var(--surface-2); }
.frame-check.mismatch { background: var(--warn-soft); }
.frame-check.match { background: var(--ok-soft); }

/* Чат-режим дела: сообщения сервиса слева белыми карточками, ответы человека справа синим */
.chat { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 8px auto 0; padding-bottom: 24px; }
.msg { max-width: 88%; padding: 12px 16px; border-radius: 20px; line-height: 1.45; font-size: 16px; overflow-wrap: break-word; }
.msg.bot { align-self: flex-start; background: var(--surface); box-shadow: var(--shadow); border-top-left-radius: 6px; }
.msg.bot .hint { display: block; margin-top: 6px; }
.msg.bot.warn { background: var(--warn-soft); box-shadow: none; }
.msg.bot.ground { border-left: 4px solid var(--ok); }
.msg.bot.save .copyrow { margin-top: 10px; }
.msg.me { align-self: flex-end; background: var(--primary); color: var(--on-ink); border-top-right-radius: 6px; }
.msg.me .edit { font: inherit; font-size: 13px; color: rgba(255, 255, 255, .8); background: none; border: 0; padding: 0 0 0 8px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.msg.me .edit-form { display: inline; }
.summary { margin: 10px 0; font-size: 15px; }
.summary dt { color: var(--muted); font-size: 13px; }
.summary dd { margin: 0 0 8px; font-weight: 600; }
.chat-kind { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.typing { display: flex; gap: 10px; align-items: center; color: var(--muted); }
/* Ход работы: сделанное — зелёными галочками, текущее — с точками */
.typing[data-typing], .typing:has(.trail) { flex-direction: column; align-items: flex-start; gap: 8px; }
.typing .trail { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--text); font-size: 15px; }
.typing .trail li { position: relative; padding-left: 24px; }
.typing .trail li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2px solid var(--ok, #16a34a);
  border-bottom: 2px solid var(--ok, #16a34a); transform: rotate(-45deg); }
.typing .trail li.fresh { animation: trail-in .35s ease-out; }
@keyframes trail-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.typing .now-doing { display: flex; gap: 10px; align-items: center; }
@media (prefers-reduced-motion: reduce) { .typing .trail li.fresh { animation: none; } }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: blink 1.2s infinite ease-in-out; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } }
.composer { align-self: stretch; display: grid; gap: 12px; margin-top: 4px; }
.composer form { display: grid; gap: 10px; }
.composer.replies { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.composer.replies form { display: contents; }
.reply { font: inherit; font-size: 15px; font-weight: 600; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--primary); background: var(--surface); color: var(--primary); cursor: pointer; text-align: left; line-height: 1.3; transition: background .15s, color .15s; }
.reply:hover { background: var(--primary); color: var(--on-ink); text-decoration: none; }
.composer-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.composer .upload.big { margin: 0; min-height: 120px; }
.chat-alt { text-align: center; }
#now { scroll-margin-top: 80px; }
[data-assistant] .thread .msg, [data-assistant] .thread .replies, .thread .msg.fresh, .thread .msg.pending { animation: rise .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .thread .msg, .thread .replies { animation: none !important; } }

/* ── Главная — сразу чат: слева «Ваши дела» (компьютер), справа лента с приветствием и подсказками, строка ввода снизу ── */
.page.home { max-width: 1240px; padding-top: 0; padding-bottom: 24px; }
body:has(.page.home) .top-in { max-width: 1240px; }
.home-app { display: grid; gap: 28px; }
.home-side { display: none; }
@media (min-width: 1024px) {
  .home-app { grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
  .home-side { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 68px; max-height: calc(100svh - 84px);
    overflow: auto; padding: 18px 0 8px; }
  .only-narrow { display: none !important; }
}
.home-side h2 { font-size: 12.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 14px 0 2px 4px; }
.side-cases { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-cases a { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; color: var(--text); }
.side-cases a:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); text-decoration: none; }
.side-cases span { font-size: 15px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-cases time { font-size: 12.5px; color: var(--faint); }
.side-empty { font-size: 14px; color: var(--muted); margin: 0 4px; line-height: 1.45; }
.side-foot { margin: auto 4px 0; padding-top: 24px; font-size: 12px; color: var(--faint); line-height: 1.5; }

.assistant { display: flex; flex-direction: column; min-height: calc(100svh - 52px - 32px); }
.home-chat { width: 100%; max-width: 860px; margin: 0 auto; }
.thread { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 18px; }
.thread:empty { padding: 0; }
.home-chat .thread { padding-top: clamp(18px, 5vh, 56px); }
.msg.bot.hello { display: flex; gap: 14px; align-items: flex-start; max-width: 100%; align-self: stretch; padding: 20px 22px; border-radius: 22px; border-top-left-radius: 8px; }
.hello-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--primary);
  color: #f7f0e1; font: 700 24px/1 var(--serif); }
.hello-body h1 { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; letter-spacing: -.01em; font-weight: 700; margin: 4px 0 8px; }
.hello-body p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.55; max-width: 40em; }
.assistant.started .prompts { display: none; }
.assistant.started .hello-body p { display: none; }
.start-card { display: grid; gap: 12px; }
.start-card p { margin: 0; }
.start-card .btn { justify-self: start; min-width: 160px; }

/* Подсказки в ленте: четыре группы по тому, что человек хочет сделать */
.prompts { display: grid; gap: 12px; margin: 0 0 20px; }
@media (min-width: 720px) { .prompts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pgroup { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 14px 16px 16px; box-shadow: var(--shadow); }
.pgroup h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font-family: var(--font); font-size: 14px; font-weight: 650;
  letter-spacing: .01em; color: var(--text); }
.pg-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.pg-appeal .pg-ico { background: var(--accent-soft); color: var(--primary); }
.pg-money .pg-ico { background: var(--ochre-soft); color: var(--ochre); }
.pg-check .pg-ico { background: var(--sepia-soft); color: var(--sepia); }
.pg-shield .pg-ico { background: var(--plum-soft); color: var(--plum); }
.pchips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip { font: inherit; font-size: 15px; line-height: 1.25; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text); cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, color .15s, transform .1s; -webkit-tap-highlight-color: transparent; }
.chip:hover { border-color: currentColor; text-decoration: none; }
.pg-appeal .chip:hover { color: var(--primary); background: var(--accent-soft); }
.pg-money .chip:hover { color: var(--ochre); background: var(--ochre-soft); }
.pg-check .chip:hover { color: var(--sepia); background: var(--sepia-soft); }
.pg-shield .chip:hover { color: var(--plum); background: var(--plum-soft); }
.chip:active { transform: scale(.97); }
.home-dock { position: sticky; bottom: 0; margin-top: auto; padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, var(--bg) 70%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.home-dock .composer-bar { position: static; }
.consent-line { text-align: center; font-size: 12px; color: var(--faint); margin: 8px 0 0; }

.composer-bar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 10; margin-top: auto;
  display: flex; align-items: flex-end; gap: 4px; padding: 7px; background: var(--surface); border: 1px solid var(--line); border-radius: 30px;
  box-shadow: 0 12px 40px -8px rgba(23, 32, 51, .16); transition: border-color .15s, box-shadow .15s; }
.composer-bar:focus-within { border-color: color-mix(in srgb, var(--primary) 55%, var(--line)); box-shadow: 0 0 0 4px var(--accent-soft), 0 12px 40px -8px rgba(23, 32, 51, .16); }
.composer-bar textarea { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; resize: none; padding: 11px 6px; font-size: 17px; line-height: 1.4; max-height: 160px; }
.composer-bar textarea:focus { border: 0; background: transparent; box-shadow: none; }
.attach { position: relative; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.attach:hover, .attach:focus-within { background: var(--surface-2); color: var(--text); }
.attach input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.send { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--primary); color: var(--on-ink); cursor: pointer; transition: opacity .15s, transform .1s, background .15s; }
.send:hover { background: var(--primary-hover); }
.send:active { transform: scale(.94); }
.send:disabled { opacity: .3; cursor: default; transform: none; }
.assure-line { text-align: center; font-size: 13px; color: var(--faint); margin: 12px 0 0; }
.nojs-start { margin-top: 24px; }

/* Чат дела: переписка и закреплённая снизу строка ввода с подсказками над ней */
.case-chat .thread { padding-top: 18px; }
.dock { position: sticky; bottom: 0; z-index: 10; margin-top: auto; display: grid; gap: 10px;
  padding: 14px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, var(--bg) 72%, color-mix(in srgb, var(--bg) 0%, transparent)); }
.dock .composer-bar { position: static; }
.composer-bar.off { opacity: .55; }
.composer-bar input[type=date] { flex: 1; min-width: 0; border: 0; background: transparent; box-shadow: none; min-height: 46px; font-size: 17px; padding: 8px 6px; }
.composer-bar input[type=date]:focus { box-shadow: none; }
.composer-bar textarea:disabled { background: transparent; cursor: default; }
.attach.pulse { color: var(--primary); background: var(--accent-soft); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick:empty { display: none; }
.reply.ghost { border-color: var(--line); color: var(--muted); font-weight: 500; }
.reply.ghost:hover { background: var(--surface); border-color: color-mix(in srgb, var(--muted) 45%, var(--line)); color: var(--text); }
.check-reply { position: relative; display: inline-flex; }
.check-reply input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.check-reply:has(input:checked) { background: var(--primary); color: var(--on-ink); }
.check-reply:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.msg.docs { border-left: 4px solid var(--ok); }
.doc-links { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 8px; }
.doc-links li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.doc-links li span { flex: 1 1 180px; font-weight: 600; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-actions .btn { min-height: 42px; padding: 9px 18px; font-size: 15px; }
.howto-list { margin: 8px 0 0; padding-left: 20px; }
.howto-list li { margin-bottom: 6px; }
.msg .how { margin-top: 6px; }
.msg .how summary { font-size: 14px; }
/* Главная и чат — как приложение: вместо подвала короткая строка под полем ввода */
.page.home + .foot { display: none; }
.legal-line { text-align: center; font-size: 12px; color: var(--faint); margin: 6px 0 0; }
/* Телефон: приветствие компактнее — подсказки видны на первом экране */
@media (max-width: 560px) {
  .msg.bot.hello { padding: 16px; gap: 12px; }
  .hello-mark { width: 34px; height: 34px; font-size: 20px; border-radius: 10px; }
  .hello-body p { font-size: 15.5px; }
  .pgroup { padding: 12px 13px 14px; border-radius: 18px; }
  .chip { font-size: 14.5px; padding: 7px 12px; }
}
/* Свёрнутая панель дела: главный срок — плашкой рядом со счётчиками */
.cf-term { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; color: var(--warn); background: var(--warn-soft); }
.cf-term.bad { color: var(--bad); background: var(--bad-soft); }
/* Дело: заменённая версия документа — строкой, а не карточкой */
.doc-old { margin: 0 0 8px; font-size: 13px; color: var(--faint); }
.cf-head b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.legal-line a { color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 719px) {
  .quick { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 28px), transparent); }
  .quick::-webkit-scrollbar { display: none; }
  .quick .reply { flex: none; white-space: nowrap; }
}

/* ── Дело-диалог ИИ-юриста: материалы дела сверху, ответы помощника с абзацами и списками ── */
.new-case { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); }
.top-nav .new-case { color: var(--primary); }
@media (max-width: 560px) { .new-case { padding: 8px; } .top-nav { gap: 10px; } .chat-kind { max-width: 34vw; } }
.new-case:hover { text-decoration: none; background: var(--accent-soft); }
.msg.me .said, .msg.me.pending { white-space: pre-line; }
.att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg.me .att:first-child { margin-top: 0; }
.att-chip { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); }
.msg.answer p { margin: 0 0 10px; }
.msg.answer ul, .msg.answer ol { margin: 0 0 10px; padding-left: 22px; }
.msg.answer li { margin-bottom: 4px; }
.msg.answer > :last-child { margin-bottom: 0; }
.ask-files { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-s); background: var(--accent-soft); font-size: 15px; }
.ask-files ul { margin: 6px 0; padding-left: 20px; }
.skill-form { display: grid; gap: 6px; justify-items: start; margin-top: 12px; }
.case-files { margin: 14px 0 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.case-files summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 15px; }
.case-files summary::-webkit-details-marker { display: none; }
.case-files summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 20px; font-weight: 400; line-height: 1; }
.case-files[open] summary::after { content: "−"; }
.cf-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--primary); flex: none; }
.cf-count { color: var(--muted); font-weight: 500; }
.cf-list { list-style: none; margin: 0; padding: 0 16px; display: grid; }
.cf-item { padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.cf-item p { margin: 4px 0 0; color: var(--text); line-height: 1.45; }
.cf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cf-meta { display: block; color: var(--muted); font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.cf-deadline { color: var(--warn) !important; }
.cf-del button { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cf-del button:hover { color: var(--bad); }
.case-files > .hint { margin: 0; padding: 4px 16px 14px; font-size: 13px; }
.picked { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.picked .att-chip { background: var(--surface); color: var(--text); box-shadow: var(--shadow); max-width: 70vw; }
.picked-clear { font: inherit; font-size: 13px; color: var(--muted); background: none; border: 0; cursor: pointer; text-decoration: underline; }
.picked[hidden] { display: none; }

/* ── Документы, которые составил ИИ-юрист: карточка в ответе, просмотр текста, кнопки «Составить» ── */
.msg.answer.made { border-left: 4px solid var(--ok); }
.doc-card { display: flex; gap: 12px; align-items: flex-start; padding: 12px; margin: 0 0 12px; border-radius: var(--radius-s); background: var(--ok-soft); }
.doc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface); color: var(--ok); }
.doc-card-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.doc-card-body .hint { margin: 0; }
.doc-card .doc-actions { margin-top: 6px; }
.doc-card .doc-actions .btn { min-height: 36px; padding: 7px 16px; font-size: 14px; }
@media (max-width: 480px) {  /* телефон: Word и PDF парой, остальные кнопки во всю ширину */
  .doc-card .doc-ico { display: none; }  /* ширина нужнее кнопкам */
  .doc-card .doc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .doc-card .doc-actions .btn { padding: 7px 8px; justify-content: center; text-align: center; }
  .doc-card .doc-actions .btn:nth-child(n+3) { grid-column: 1 / -1; }  /* «PDF для Госуслуг», «Опись» — во всю ширину */
}
.doc-preview { margin: 0 0 12px; }
.doc-preview summary { font-size: 14px; color: var(--accent); cursor: pointer; }
.doc-preview pre.doc { margin: 8px 0 0; padding: 16px; font-size: 14px; line-height: 1.5; max-height: 420px; overflow: auto; box-shadow: none; border: 1px solid var(--line); }
.offer-form { display: grid; gap: 8px; justify-items: start; margin-top: 12px; }
.offer-form .btn { text-align: left; white-space: normal; }
.cf-made { padding-top: 2px; }
.cf-links { display: inline-flex; gap: 6px; flex: none; }
.cf-links .btn { min-height: 30px; padding: 4px 12px; font-size: 13px; }

/* ── Карточка «Судебный приказ» в деле-диалоге: срок, данные, возражения, подача, исход ── */
.msg.court-card { max-width: 100%; align-self: stretch; display: grid; gap: 12px; border-left: 4px solid var(--primary); }
.court-card .doc-card { margin: 0; background: var(--accent-soft); }
.court-card .doc-ico { color: var(--primary); }
.cc-status { margin: 0; padding: 10px 12px; border-radius: var(--radius-s); background: var(--surface-2); font-weight: 600; }
.cc-status.ok { background: var(--ok-soft); color: var(--ok); }
.cc-status.warn { background: var(--warn-soft); color: var(--warn); }
.cc-status.bad { background: var(--bad-soft); color: var(--bad); }
.cc-fields { margin: 0; }
.cc-edit summary { cursor: pointer; color: var(--accent); font-size: 15px; }
.cc-form { display: grid; gap: 10px; }
.cc-edit .cc-form { margin-top: 10px; }
.cc-form .field { margin: 0; }
.cc-form .btn { justify-self: start; }
.cc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-row input[type=date], .cc-row select, .cc-row input[type=email] { width: auto; min-width: 0; flex: 0 1 auto; }
.cc-consent { display: flex; gap: 6px; align-items: center; flex-basis: 100%; }
.cc-consent input { width: auto; }
.cc-banner { display: block; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-s); background: var(--accent-soft); color: var(--primary);
  font-weight: 600; font-size: 15px; text-decoration: none; }
.cc-banner.warn { background: var(--warn-soft); color: var(--warn); }
.cc-banner.bad { background: var(--bad-soft); color: var(--bad); }
.cc-banner:hover { text-decoration: underline; }
.thread .msg { scroll-margin-top: 70px; }
/* Форма «Данные для документа» в сообщении помощника */
.fields-form { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border-radius: var(--radius-s); background: var(--surface-2); }
.fields-form .field { margin: 0; }
.field-doubt { display: block; margin-top: 4px; font-size: 13px; color: var(--warn); }
.msg.answer:has(.fields-form) { max-width: 100%; align-self: stretch; }
.cc-person { border: 0; margin: 0; padding: 12px; display: grid; gap: 10px; border-radius: var(--radius-s); background: var(--surface-2); }
.cc-person legend { font-weight: 600; font-size: 15px; padding: 0; margin-bottom: 4px; float: left; width: 100%; }

/* ── Дело-диалог: широкая страница — переписка слева, панель дела справа (на телефоне — свёрнута сверху) ── */
.top-in { max-width: 1200px; }
.page.home.wide { max-width: 1200px; }
.dialog .chat-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: calc(100svh - 52px - 40px); }
.case-side { order: -1; margin-top: 14px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.case-side > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-weight: 600; font-size: 15px; }
.case-side > summary::-webkit-details-marker { display: none; }
.case-side > summary::after { content: "+"; margin-left: auto; color: var(--muted); font-size: 20px; font-weight: 400; line-height: 1; }
.case-side[open] > summary::after { content: "−"; }
.side-box { padding: 14px 16px; border-top: 1px solid var(--hair); }
.side-box h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; }
.side-box > .hint { margin: 10px 0 0; font-size: 13px; }
.side-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.side-recs li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 15px; line-height: 1.35; }
.rec-mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--field-line); display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--on-ink); margin-top: 1px; }
.side-recs li.done .rec-mark { background: var(--ok); border-color: var(--ok); }
.side-recs li.done .rec-text { color: var(--muted); }
.rec-text .hint { display: block; font-size: 12px; margin: 2px 0 0; }
.rec-add { font-size: 13px; font-weight: 600; color: var(--primary); cursor: pointer; white-space: nowrap; padding-top: 1px; }
.rec-add:hover { text-decoration: underline; }
.side-upload { margin-top: 12px; cursor: pointer; display: inline-flex; }
.side-term a { font-weight: 650; display: block; }
.side-term.warn a { color: var(--warn); }
.side-term.bad a { color: var(--bad); }
.side-box .cf-list { padding: 0; }
.side-box .cf-item { padding: 10px 0; }
.side-box .cf-item:first-child { border-top: 0; padding-top: 0; }
.side-box .cf-links { margin-top: 6px; }
@media (min-width: 1080px) {
  .dialog { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
  .case-side { order: 0; position: sticky; top: 68px; max-height: calc(100svh - 84px); overflow: auto; margin-top: 18px; }
  .case-side > summary { pointer-events: none; padding-bottom: 4px; }
  .case-side > summary::after, .case-side[open] > summary::after { content: none; }
  .only-narrow { display: none; }
}

/* Вход, пароль, регистрация (account/*.html) */
.page.auth { display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; }
.auth-in { width: 100%; max-width: 420px; }
.auth-pitch { color: var(--muted); font-size: 17px; line-height: 1.5; margin: 0 0 16px; text-align: center; }
.auth-card { padding: 24px; }
.auth-card h1 { font-size: 26px; margin: 0 0 16px; }
.auth-card .btn.big { width: 100%; margin-top: 4px; }
.auth-card .field input { width: 100%; }
.auth-alt { text-align: center; margin: 16px 0 0; font-size: 15px; color: var(--muted); }
/* Вход через Яндекс ID и VK ID (account/_oauth.html): обычные кнопки, значки в цвет текста */
.oauth { display: grid; gap: 10px; margin: 0 0 4px; }
.auth-card .oauth .btn.big { margin-top: 0; }
.oauth-btn svg { flex: none; color: var(--ink); }
.oauth-consent { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.oauth-or { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; font-size: 14px; color: var(--muted); }
.oauth-or::before, .oauth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Шапка: почта и «Выйти» */
.top-acc { display: flex; align-items: center; gap: 4px; margin-left: 12px; font-size: 14px; }
.top-email { color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-acc .btn.link { color: var(--muted); }
.top-nav:empty + .top-acc { margin-left: auto; }
/* Главная: «Ваши дела» */
.my-cases { margin: 0 0 18px; }
.my-cases h2 { font-size: 15px; font-weight: 650; color: var(--muted); margin: 0 0 8px; letter-spacing: 0; }
.my-cases ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.my-cases a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: var(--radius-s); background: var(--surface); box-shadow: var(--shadow); color: var(--text); }
.my-cases a:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow); }
.my-cases span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.my-cases time { flex: none; color: var(--muted); font-size: 13px; }
.top-acc .top-admin { min-height: 32px; padding: 5px 12px; font-size: 14px; margin-right: 6px; }

/* Лимит нейросети: полоска остатка (шапка, главная, над строкой ввода) */
.top-quota { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; font-size: 13px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; cursor: default; }
.qbar { display: inline-block; width: 46px; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.qbar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--primary); }
/* ширина — классом с шагом 5 % (CSP не пускает встроенные стили) */
.qbar .q0 { width: 0%; } .qbar .q5 { width: 5%; } .qbar .q10 { width: 10%; } .qbar .q15 { width: 15%; } .qbar .q20 { width: 20%; } .qbar .q25 { width: 25%; } .qbar .q30 { width: 30%; } .qbar .q35 { width: 35%; } .qbar .q40 { width: 40%; } .qbar .q45 { width: 45%; } .qbar .q50 { width: 50%; } .qbar .q55 { width: 55%; } .qbar .q60 { width: 60%; } .qbar .q65 { width: 65%; } .qbar .q70 { width: 70%; } .qbar .q75 { width: 75%; } .qbar .q80 { width: 80%; } .qbar .q85 { width: 85%; } .qbar .q90 { width: 90%; } .qbar .q95 { width: 95%; } .qbar .q100 { width: 100%; }
.qbar.big { width: 100%; height: 8px; }
.top-quota.low, .quota-card.low b { color: var(--warn); }
.top-quota.low .qbar i, .quota-card.low .qbar i { background: var(--warn); }
.quota-card { margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.quota-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.quota-head b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.quota-card p { margin: 8px 0 0; font-size: 12.5px; color: var(--faint); }
.quota-line { margin: 0; font-size: 13px; color: var(--warn); text-align: center; }

/* галочки подписки — в основном цвете, без зелёного */
.ticks.warm li::before { background-color: var(--primary); }
/* ── Аккаунт (/akkaunt) ───────────────────────────────────────── */
.acct { max-width: 640px; margin: 24px auto 48px; }
.acct h1 { margin-bottom: 18px; }
.acct-card { padding: 20px 22px; margin-bottom: 16px; }
.acct-card h2 { font-size: 19px; margin: 0 0 10px; }
.acct-card .field input { width: 100%; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.danger-zone h2 { color: var(--bad); }
.btn.danger { background: var(--surface); border-color: var(--bad); color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); }
a.top-email { text-decoration: none; }
a.top-email:hover { color: var(--text); }
.blank { background: var(--warn-soft); border-bottom: 1px dashed var(--warn); padding: 0 4px; border-radius: 3px; }
.show-m { display: none; }
@media (max-width: 560px) { .show-m { display: inline; } }
@media (max-width: 560px) { .top-email { max-width: none; flex-shrink: 0; } .top-quota { white-space: nowrap; } }

/* ── Документ без подписки: «лист» без текста (subscription.preview) ───────── */
.doc-sheet { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 120px;
  margin-top: 8px; user-select: none; -webkit-user-select: none; overflow: hidden; }
.doc-sheet p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.5; }
.doc-sheet .ds-right { text-align: right; margin-left: 40%; }
.doc-sheet .ds-title { text-align: center; font-weight: 700; letter-spacing: .08em; margin-top: 14px; }
.doc-sheet .ds-center { text-align: center; color: var(--muted); }
.doc-sheet .ds-bold { font-weight: 700; margin-top: 10px; }
.ds-bar { display: block; height: 9px; border-radius: 5px; background: var(--line); margin: 0 0 9px; }
.ds-bar.ds-right { margin-left: auto; }
.ds-bar.ds-sign { margin-top: 18px; }
.ds-lock { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px; display: grid; gap: 6px; justify-items: start;
  background: linear-gradient(to bottom, transparent, var(--surface) 42%); }
.ds-lock span { color: var(--muted); font-size: 14px; }
.ds-bar.w30 { width: 30%; }
.ds-bar.w35 { width: 35%; }
.ds-bar.w40 { width: 40%; }
.ds-bar.w45 { width: 45%; }
.ds-bar.w50 { width: 50%; }
.ds-bar.w55 { width: 55%; }
.ds-bar.w60 { width: 60%; }
.ds-bar.w65 { width: 65%; }
.ds-bar.w70 { width: 70%; }
.ds-bar.w75 { width: 75%; }
.ds-bar.w80 { width: 80%; }
.ds-bar.w85 { width: 85%; }
.ds-bar.w90 { width: 90%; }
.ds-bar.w95 { width: 95%; }
.ds-bar.w100 { width: 100%; }

/* ── Широкая раскладка (30.10.2026, лендинга нет): слева — что происходит, по центру — чат ──────────────────────
   Главная: колонка .home-side (шаги _steps.html, ваши дела, на чём основаны ответы, условия), дело: панель дела слева. */
.page.home, .page.home.wide { max-width: 1440px; }
body:has(.page.home) .top-in { max-width: 1440px; }
@media (min-width: 1024px) {
  .home-app { grid-template-columns: 300px minmax(0, 1fr); gap: 32px; }
  .home-side { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px 14px; margin-top: 18px; }
}
.side-persona { display: flex; gap: 12px; align-items: center; padding: 0 4px 4px; }
.side-persona b { display: block; font-size: 16px; line-height: 1.25; }
.side-persona div span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.side-steps { list-style: none; margin: 4px 0 0; padding: 0 4px; display: grid; gap: 12px; }
.side-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: start; }
.side-steps b { display: block; font-size: 15px; line-height: 1.3; padding-top: 3px; }
.side-steps li div span { display: block; font-size: 13px; color: var(--muted); line-height: 1.4; margin-top: 2px; }
.st-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700;
  border: 1.5px solid var(--line); color: var(--muted); background: var(--surface); }
.side-steps li.now .st-n { background: var(--primary); border-color: var(--primary); color: var(--on-ink); }
.side-steps li.done .st-n { background: var(--accent-soft); border-color: transparent; color: var(--primary); }
.side-steps li.done b { color: var(--muted); font-weight: 550; }
.side-text { margin: 0 4px; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.side-facts { list-style: none; margin: 0 4px; padding: 0; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.4; }
.side-facts li { position: relative; padding-left: 16px; }
.side-facts li::before { content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.side-steps-box h2 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 650; }
.side-steps-box .side-steps { padding: 0; }
.top-login { margin-left: auto; }
@media (min-width: 1080px) {
  .dialog { grid-template-columns: 320px minmax(0, 1fr); gap: 32px; }
  .case-side { order: -1; }
  .dialog .chat-col { width: 100%; max-width: 920px; justify-self: center; }
}