/* Интерфейс по прототипу Mobile-firstUXUIPrototype (тёплая светлая тема).
   Без билд-шага — чистый CSS, шрифты Inter + Lora через <link> в base.html. */
:root{
  --bg:#F8F6F2; --surface:#fff;
  --ink:#1A1511; --ink-2:#3A3630; --muted:#5C5650; --muted-2:#9A938C; --faint:#C8C1B8;
  --line:#EAE6E0; --line-2:#E5DFD8; --warm-200:#F0ECE6; --warm-300:#E5DFD8;

  --brand:#4F7A6C; --brand-light:#E8F4EE; --brand-lighter:#DBF0EA; --brand-dark:#3A5C51;
  --danger:#C46B5A; --danger-bg:#FDF0EE;

  --video:#3C5A94; --video-bg:#E8EDF8;
  --photo:#8A5B34; --photo-bg:#F9F0E5;
  --text-accent:#2F7A52; --text-bg:#E8F4EE;

  --font:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:'Lora',Georgia,serif;
  --app-width:480px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand);}
h1,h2,h3{font-family:var(--font-serif);font-weight:500;letter-spacing:-0.3px;color:var(--ink);margin:0;}
h1{font-size:22px;line-height:1.35;}
h2{font-size:18px;}
h3{font-size:15px;}
p{margin:0 0 10px;}
.muted{color:var(--muted-2);font-size:13px;}
.section-label{font-size:11px;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:0.6px;margin:0 0 10px;}

/* ── Верхний бар ─────────────────────────────────────────────────────────── */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;
  background:rgba(248,246,242,0.95);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-2);
}
.topbar-brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);}
.topbar-logo{width:24px;height:24px;background:var(--brand);border-radius:6px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.topbar-name{font-family:var(--font-serif);font-size:15px;font-weight:600;letter-spacing:-0.2px;}
.topbar-tabs{display:flex;align-items:center;gap:2px;}
.tab{
  padding:5px 11px;border-radius:20px;font-size:12px;font-weight:400;
  color:var(--muted-2);background:transparent;text-decoration:none;white-space:nowrap;
  border:none;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.tab.is-active{font-weight:600;color:var(--brand);background:var(--brand-light);}
.topbar-logout{font-size:11px;color:var(--muted-2);background:none;border:none;cursor:pointer;padding:4px 6px;font-family:inherit;}
.topbar-logout:hover{color:var(--muted);}

main{max-width:var(--app-width);margin:0 auto;padding:16px 16px 48px;}

/* ── Кнопки / поля ──────────────────────────────────────────────────────── */
button,input[type=submit]{
  background:var(--brand);color:#fff;border:none;border-radius:12px;
  padding:11px 16px;font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;
  transition:background .15s ease,opacity .15s ease;
}
button:hover,input[type=submit]:hover{background:var(--brand-dark);}
button:disabled{opacity:.5;cursor:default;background:var(--brand);}
button.secondary{background:transparent;color:var(--muted);border:1.5px solid var(--line-2);}
button.secondary:hover{background:var(--warm-200);}
button.danger{background:var(--danger-bg);color:var(--danger);}
button.danger:hover{background:#f8e3df;}
.btn-primary-full{width:100%;height:52px;border-radius:14px;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-block{width:100%;}
.link-button{background:none;border:none;padding:0;font-size:13px;font-weight:500;color:var(--brand);cursor:pointer;font-family:inherit;}
.link-danger{color:var(--danger);}

input[type=text],input[type=email],input[type=password],textarea{
  width:100%;padding:11px 14px;border:1.5px solid var(--line-2);border-radius:12px;
  font-family:inherit;font-size:15px;background:var(--surface);color:var(--ink);outline:none;
  transition:border-color .15s ease;
}
input:focus,textarea:focus{border-color:var(--brand);}
textarea{resize:none;min-height:120px;line-height:1.6;}
label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:14px 0 6px;}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px;}
.error{background:var(--danger-bg);border:1px solid #eec7bf;color:var(--danger);padding:11px 14px;border-radius:10px;margin-bottom:16px;font-size:14px;}
.notice{background:var(--brand-light);color:var(--brand-dark);padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:16px;}

/* ── Пилюли / бейджи ───────────────────────────────────────────────────── */
.tag{display:inline-block;background:var(--warm-200);color:var(--muted);border-radius:20px;padding:3px 10px;font-size:11px;font-weight:500;margin:2px 4px 2px 0;}
.tag-link{text-decoration:none;cursor:pointer;}
.tag-link.is-active{background:var(--brand);color:#fff;}
.type-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:500;letter-spacing:.2px;}
.type-badge svg{width:10px;height:10px;}

/* Цвета по типу источника */
.t-video{--accent:var(--video);--accent-bg:var(--video-bg);}
.t-photo{--accent:var(--photo);--accent-bg:var(--photo-bg);}
.t-text{--accent:var(--text-accent);--accent-bg:var(--text-bg);}
.type-badge.t-video,.type-badge.t-photo,.type-badge.t-text{background:var(--accent-bg);color:var(--accent);}

/* ── Карточка знания (KnowledgeCard.tsx) ───────────────────────────────── */
.knowledge-card{
  display:flex;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;
  margin-bottom:10px;
}
a.knowledge-card:hover{box-shadow:0 2px 12px rgba(26,21,17,.06);}
.knowledge-card > .kc-stripe{width:3px;background:var(--accent,var(--brand));flex:0 0 auto;}
.kc-body{flex:1;min-width:0;padding:12px 14px;}
.kc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.kc-actions{display:flex;align-items:center;gap:12px;}
.kc-actions .link-button{font-size:11px;}
.kc-title{font-family:var(--font-serif);font-size:14px;font-weight:500;color:var(--ink);line-height:1.4;margin:0 0 6px;}
.kc-content{font-size:12px;color:var(--muted);line-height:1.55;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.kc-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kc-meta{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.kc-meta .loc{font-size:10px;color:var(--muted-2);}
.kc-meta .date{font-size:10px;color:var(--faint);}
.knowledge-card.compact .kc-body{padding:10px 12px;}
.knowledge-card.compact .kc-title{font-size:13px;}
.knowledge-card.compact .kc-content{-webkit-line-clamp:2;}

/* ── Секции Базы ───────────────────────────────────────────────────────── */
.kb-section{margin-bottom:24px;}
.search-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1.5px solid var(--line-2);border-radius:14px;padding:10px 14px;margin-bottom:20px;transition:border-color .15s ease;}
.search-bar.is-active{border-color:var(--brand);}
.search-bar svg{flex:0 0 auto;color:var(--muted-2);}
.search-bar input{border:none;padding:0;border-radius:0;font-size:14px;background:transparent;}
.search-bar input:focus{border:none;}
.search-clear{background:none;border:none;color:var(--faint);cursor:pointer;padding:0;font-size:13px;}
.topic-chips{display:flex;flex-wrap:wrap;gap:6px;}
.topic-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;background:var(--surface);border:1px solid var(--line);border-radius:20px;font-size:12px;color:var(--ink-2);cursor:pointer;}
.topic-chip.is-active{background:var(--brand);color:#fff;border-color:var(--brand);}
.topic-chip .count{min-width:16px;height:16px;background:var(--warm-200);color:var(--muted-2);border-radius:8px;font-size:10px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;}
.topic-chip.is-active .count{background:rgba(255,255,255,.25);color:#fff;}

/* Панель типа источника в «Базе»: свёрнута по умолчанию, раскрывается по клику.
   Цвет и иконка — те же, что у сегмента на «Добавить» (класс .t-video/.t-photo/
   .t-text задаёт --accent на всю панель, включая вложенные .source-row). */
.src-group{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:10px;overflow:hidden;}
.src-group-head{
  display:flex;align-items:center;gap:12px;width:100%;
  background:none;border:none;padding:12px 14px;
  font-family:inherit;font-size:14px;color:inherit;text-align:left;cursor:pointer;
}
.src-group-head[disabled]{cursor:default;opacity:.55;}
.src-group-head:not([disabled]):hover{background:var(--accent-bg,var(--warm-200));}
.src-group-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-bg,var(--brand-light));color:var(--accent,var(--brand));display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.src-group-title{flex:1;min-width:0;font-weight:500;color:var(--ink);}
.src-group-count{min-width:22px;height:20px;padding:0 7px;border-radius:10px;background:var(--warm-200);color:var(--muted);font-size:11px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;}
.src-group.is-open .src-group-count{background:var(--accent-bg,var(--brand-light));color:var(--accent,var(--brand));}
.src-group-chevron{flex:0 0 auto;color:var(--faint);transition:transform .18s ease;}
.src-group.is-open .src-group-chevron{transform:rotate(180deg);}
/* Тёплый фон страницы внутри раскрытой панели: белые строки на белой панели
   сливались бы в одно полотно, а так вложенность читается сразу. */
.src-group-body{padding:8px 10px 10px;background:var(--bg);border-top:1px solid var(--line);}

.source-row{display:flex;align-items:center;gap:12px;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;text-decoration:none;color:inherit;text-align:left;}
.src-group-body .source-row:last-child{margin-bottom:0;}
.source-row:hover{box-shadow:0 2px 12px rgba(26,21,17,.06);}
.source-row-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-bg,var(--brand-light));display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--accent,var(--brand));}
.source-row-main{flex:1;min-width:0;}
/* display:block обязателен: это <span> внутри <a> (ссылку нельзя набивать <p>),
   а инлайновый элемент не переносит подпись на свою строку и игнорирует
   обрезку длинного заголовка — название и «4 знания · 27 авг» слипались. */
.source-row-title{display:block;font-size:13px;font-weight:500;color:var(--ink);line-height:1.35;margin:0 0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.source-row-sub{display:block;font-size:11px;color:var(--muted-2);margin:0;}
.source-row-chevron{flex:0 0 auto;color:var(--faint);}
.linkish{background:none;border:none;padding:8px 0;color:var(--brand);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;}

/* ── Экран «Добавить» ──────────────────────────────────────────────────── */
.add-prompt{font-size:14px;color:var(--muted-2);margin-bottom:16px;}
.segmented{display:flex;gap:2px;background:var(--warm-200);border-radius:12px;padding:4px;margin-bottom:24px;}
.segmented button{flex:1;background:transparent;color:var(--muted-2);border-radius:9px;padding:8px 0;font-size:13px;font-weight:400;box-shadow:none;}
.segmented button:hover{background:transparent;}
.segmented button.is-active{background:#fff;color:var(--accent,var(--brand));font-weight:600;box-shadow:0 1px 4px rgba(0,0,0,.08);}
.dropzone{background:#FAFAF8;border:2px dashed var(--line-2);border-radius:16px;padding:32px 24px;text-align:center;cursor:pointer;margin-bottom:12px;}
.dropzone:hover{border-color:var(--accent,var(--brand));}
.dropzone-icon{width:56px;height:56px;border-radius:16px;background:var(--accent-bg,var(--brand-light));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--accent,var(--brand));}
.dropzone-title{font-size:15px;font-weight:500;color:var(--ink-2);margin:0 0 6px;}
.dropzone-hint{font-size:12px;color:var(--faint);margin:0;}
.dropzone-formats{font-size:11px;color:#D5CFC8;margin:8px 0 0;}
.char-count{font-size:11px;color:var(--faint);text-align:right;margin:6px 0 0;}
.add-hint{text-align:center;font-size:11px;color:var(--faint);margin-top:10px;letter-spacing:.1px;}
.of-screen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Обработка / степпер ──────────────────────────────────────────────── */
.proc-head{text-align:center;margin:12px 0 28px;}
.proc-icon{width:56px;height:56px;border-radius:16px;background:var(--accent-bg,var(--brand-light));color:var(--accent,var(--brand));display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.proc-icon.busy{animation:pulse-ring 1.5s ease-out infinite;}
.stepper{display:flex;flex-direction:column;gap:2px;}
.step{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:10px;transition:background .3s ease;}
.step.active{background:var(--accent-bg,var(--brand-light));}
.step.future{opacity:.4;}
.step-mark{width:22px;height:22px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--line-2);}
.step.active .step-mark{border-color:var(--accent,var(--brand));border-top-color:transparent;animation:spin .8s linear infinite;}
.step.done .step-mark{border:none;background:var(--accent,var(--brand));animation:check-appear .35s cubic-bezier(.175,.885,.32,1.275) both;}
.step-label{font-size:14px;color:var(--muted-2);}
.step.active .step-label{color:var(--ink);font-weight:500;}
.step.done .step-label{color:var(--ink-2);}

.result-flag{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.result-flag-dot{width:20px;height:20px;border-radius:50%;background:var(--brand-light);display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.result-flag span{font-size:12px;font-weight:600;color:var(--brand);}
.source-chip{display:flex;align-items:center;gap:10px;background:var(--accent-bg,var(--video-bg));border-radius:12px;padding:10px 14px;margin:14px 0 20px;}
.source-chip-icon{width:32px;height:32px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--accent,var(--video));}
.source-chip-main{flex:1;min-width:0;}
.source-chip-title{font-size:12px;font-weight:500;color:var(--accent,var(--video));line-height:1.3;margin:0;}
.source-chip-sub{font-size:11px;color:var(--muted-2);margin:1px 0 0;}

/* ── Конспект (review/detail) ─────────────────────────────────────────── */
.review-banner{background:var(--brand-light);color:var(--brand-dark);border-radius:12px;padding:12px 14px;font-size:14px;margin:14px 0 18px;}
.conspect-summary{border-left:3px solid var(--brand);padding:2px 0 2px 14px;margin:16px 0;}
.conspect-summary-label{font-size:11px;font-weight:700;color:var(--muted-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;}
.conspect-summary p{margin:0;font-size:15px;}
.conspect-tags{margin-bottom:20px;}
.conspect-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
.section-card{border-top:1px solid var(--line);padding-top:16px;margin-top:16px;}
.section-card h2{font-size:16px;margin-bottom:8px;font-family:var(--font-serif);}
.section-body p{margin:0 0 10px;}
.section-body ul,.section-body ol{margin:0 0 10px;padding-left:20px;}
.section-body li{margin-bottom:4px;}
.section-footer{display:flex;align-items:center;gap:14px;font-size:13px;margin-top:8px;}

/* Главная мысль раздела: спокойный акцент, не «плашка-предупреждение» —
   она стоит над КАЖДЫМ разделом, и яркая заливка быстро утомляла бы. */
.takeaway{margin:0 0 10px;padding-left:12px;border-left:2px solid var(--brand);
  font-size:15px;font-weight:500;color:var(--ink);line-height:1.5;}

/* Форматы отображения раздела (см. app/interfaces.py: PresentationFormat) */
.section-body blockquote{margin:0 0 10px;padding:2px 0 2px 14px;border-left:3px solid var(--warm-300,var(--line));
  font-family:var(--font-serif);font-style:italic;color:var(--ink-2);}
.section-body .checklist{list-style:none;padding-left:0;}
.section-body .checklist li{display:flex;align-items:flex-start;gap:8px;}
.check-box{flex:0 0 auto;width:16px;height:16px;margin-top:2px;border:1.4px solid var(--muted-2);border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:var(--brand);}
.check-checked .check-box{border-color:var(--brand);background:var(--brand-light);}
.check-crossed .check-box{border-color:var(--muted-2);color:var(--muted-2);}
.check-crossed .check-text{text-decoration:line-through;color:var(--muted);}
/* Таблица обязана скроллиться внутри себя: иначе на телефоне она растягивает
   всю страницу по горизонтали. */
.table-wrap{overflow-x:auto;margin:0 0 10px;-webkit-overflow-scrolling:touch;}
.section-body table{border-collapse:collapse;font-size:14px;min-width:100%;}
.section-body th,.section-body td{border:1px solid var(--line);padding:6px 10px;text-align:left;vertical-align:top;}
.section-body th{background:var(--warm-200);font-weight:600;}
/* process v1 — вертикальная цепочка со стрелками, без diagram-движка. */
.process-chain{list-style:none;padding-left:0;margin:0 0 10px;}
.process-chain li{position:relative;padding:8px 12px;background:var(--warm-200);border-radius:10px;margin-bottom:22px;}
.process-chain li:last-child{margin-bottom:0;}
.process-chain li::after{content:"↓";position:absolute;left:50%;transform:translateX(-50%);bottom:-20px;
  font-size:14px;color:var(--muted-2);line-height:1;}
.process-chain li:last-child::after{content:none;}

/* ── Экран источника ──────────────────────────────────────────────────── */
.back-header{display:flex;align-items:center;padding:12px 0;margin-bottom:8px;}
.back-link{display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;color:var(--brand);font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;}
.src-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;}
.src-head-icon{width:48px;height:48px;border-radius:14px;background:var(--accent-bg,var(--brand-light));color:var(--accent,var(--brand));display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.src-head-main{flex:1;min-width:0;}
.stat-tiles{display:flex;gap:10px;margin-bottom:24px;}
.stat-tile{flex:1;background:var(--warm-200);border-radius:10px;padding:10px 12px;}
.stat-tile.video{background:var(--video-bg);}
.stat-tile-num{font-size:20px;font-weight:600;color:var(--ink);line-height:1;font-family:var(--font);}
.stat-tile.video .stat-tile-num{color:var(--video);}
.stat-tile-label{font-size:11px;color:var(--muted-2);margin-top:3px;}
.snippet-box{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.snippet-box p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.transcript-link,.link-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--warm-200);border:none;border-radius:10px;padding:10px 14px;margin:14px 0;text-decoration:none;color:var(--muted);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;}
.divider{height:1px;background:var(--line);margin:16px 0;}

/* ── Транскрипт ──────────────────────────────────────────────────────── */
.breadcrumb{font-size:13px;color:var(--muted-2);margin-bottom:16px;}
.breadcrumb a{color:var(--muted-2);text-decoration:none;}
.breadcrumb span{margin:0 5px;}
.transcript-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;}
.transcript-duration{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--muted-2);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:4px 10px;}
.transcript-body{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;}
.transcript-body p{margin:0 0 10px;}

/* ── Ассистент ──────────────────────────────────────────────────────── */
.assistant-head{text-align:center;margin-bottom:24px;}
.assistant-head-icon{width:48px;height:48px;border-radius:14px;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.assistant-head h1{font-size:20px;margin-bottom:6px;}
.ask-row{display:flex;gap:8px;align-items:flex-end;background:var(--surface);border:1.5px solid var(--line-2);border-radius:14px;padding:8px 8px 8px 14px;margin-bottom:24px;}
.ask-row textarea{border:none;padding:8px 0;min-height:24px;font-size:14px;border-radius:0;}
.ask-row textarea:focus{border:none;}
.ask-send{width:36px;height:36px;border-radius:10px;padding:0;display:flex;align-items:center;justify-content:center;flex:0 0 auto;}
.example-prompt{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:13px;color:var(--ink-2);text-align:left;margin-bottom:8px;font-weight:400;}
.example-prompt:hover{background:var(--warm-200);}
.example-prompt .arrow{color:var(--brand);font-size:14px;flex:0 0 auto;}
.stats-chip{margin-top:24px;padding:12px 14px;background:var(--warm-200);border-radius:12px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted-2);}
.stats-chip strong{color:var(--muted);}

.chat-q{background:var(--brand-light);border-radius:12px 12px 4px 12px;padding:10px 14px;margin:0 0 16px 40px;font-size:13px;color:var(--ink);}
.chat-a-row{display:flex;gap:10px;margin-bottom:20px;}
.chat-a-avatar{width:28px;height:28px;border-radius:50%;background:var(--brand-light);color:var(--brand);display:flex;align-items:center;justify-content:center;flex:0 0 auto;margin-top:2px;}
.chat-a-bubble{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:4px 12px 12px 12px;padding:12px 14px;font-size:13px;color:var(--ink-2);line-height:1.6;}
.chat-a-bubble.plain{white-space:pre-wrap;}
.from-base{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.from-base::before,.from-base::after{content:"";flex:1;height:1px;background:var(--line);}
.from-base span{font-size:11px;color:var(--muted-2);white-space:nowrap;}
.typing-dots{display:inline-flex;gap:4px;align-items:center;}
.typing-dots i{width:7px;height:7px;border-radius:50%;background:var(--faint);display:inline-block;animation:bounce 1.2s ease-in-out infinite;}
.typing-dots i:nth-child(2){animation-delay:.2s;}
.typing-dots i:nth-child(3){animation-delay:.4s;}
.suggest-box{background:var(--warm-200);border-radius:12px;padding:14px;margin-bottom:20px;}
.suggest-box p{font-size:12px;color:var(--muted);margin:0 0 8px;}
.suggest-box li{font-size:12px;color:var(--muted);}
.htmx-indicator{display:none;}
.htmx-request .htmx-indicator{display:block;}
.htmx-request.htmx-indicator{display:block;}

.history-item{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px;}
.history-q{font-family:var(--font-serif);font-size:14px;font-weight:500;color:var(--ink);margin:0 0 6px;}
.history-a{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 8px;white-space:pre-wrap;}
.history-date{font-size:11px;color:var(--faint);}
.history-a.empty{color:#8a6d1a;}

.answer-box{background:var(--brand-light);border-radius:12px;padding:16px 18px;white-space:pre-wrap;font-size:14px;}
.answer-box.empty{background:#fdf3d8;color:#8a6d1a;}
.status-pill{display:inline-block;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600;}
.status-pending,.status-transcribing,.status-extracting{background:#fdf3d8;color:#8a6d1a;}
.status-review{background:var(--brand-light);color:var(--brand-dark);}
.status-done{background:var(--brand-light);color:var(--brand);}
.status-failed{background:var(--danger-bg);color:var(--danger);}

.empty-state{text-align:center;padding:32px 0;}
.empty-state h2{margin-bottom:8px;}
.demo-label{font-size:11px;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;margin:20px 0 10px;}

/* ── Анимации ───────────────────────────────────────────────────────── */
@keyframes fade-up{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
@keyframes step-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes bounce{0%,80%,100%{transform:scale(1);}40%{transform:scale(1.35);}}
@keyframes check-appear{0%{transform:scale(0);opacity:0;}60%{transform:scale(1.2);}100%{transform:scale(1);opacity:1;}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(79,122,108,.3);}70%{box-shadow:0 0 0 10px rgba(79,122,108,0);}100%{box-shadow:0 0 0 0 rgba(79,122,108,0);}}
@keyframes shimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}}
.fade-up{animation:fade-up .4s ease both;}
.shimmer{background:linear-gradient(90deg,#f0ece6 25%,#f8f6f2 50%,#f0ece6 75%);background-size:800px 100%;animation:shimmer 1.5s infinite;}

/* ── Док загрузки (фикс. снизу, переживает переходы через hx-preserve) ─── */
#upload-dock{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--surface);border-top:1px solid var(--line-2);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px rgba(26,21,17,.10);
  animation:fade-up .25s ease both;
}
#upload-dock[hidden]{display:none;}
body.dock-open main{padding-bottom:96px;}
#upload-dock .dock-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
#upload-dock .dock-label{font-size:12px;font-weight:600;color:var(--ink-2);line-height:1.4;}
#upload-dock .dock-label a{color:var(--brand);text-decoration:none;}
#upload-dock .dock-sub{font-size:11px;color:var(--muted-2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#upload-dock .dock-bar{height:4px;border-radius:3px;background:var(--warm-300);margin-top:8px;overflow:hidden;}
#upload-dock .dock-fill{height:100%;background:var(--brand);border-radius:3px;}
/* Индетерминантный индикатор: бегущий отрезок, крутится до ответа сервера
   (процент не показываем — Safari на iOS врёт про ход отдачи, см. upload.js). */
#upload-dock .dock-bar.is-indeterminate .dock-fill{width:40%;animation:dock-slide 1.15s ease-in-out infinite;}
@keyframes dock-slide{0%{margin-left:-45%;}100%{margin-left:100%;}}
@media (prefers-reduced-motion:reduce){
  #upload-dock .dock-bar.is-indeterminate .dock-fill{width:100%;margin-left:0;animation:dock-pulse 1.4s ease-in-out infinite;}
  @keyframes dock-pulse{0%,100%{opacity:.35;}50%{opacity:1;}}
}
#upload-dock .dock-x{background:none;border:none;color:var(--muted-2);font-size:18px;line-height:1;padding:0 2px;cursor:pointer;flex:0 0 auto;}
#upload-dock .dock-x:hover{color:var(--ink-2);background:none;}
#upload-dock .dock-retry{background:none;border:none;color:var(--brand);font-size:12px;font-weight:600;padding:6px 0 0;cursor:pointer;}
#upload-dock.is-error{background:var(--danger-bg);border-top-color:#eec7bf;}
#upload-dock.is-error .dock-label{color:var(--danger);}
#upload-dock.is-error .dock-retry{color:var(--danger);}

/* ── Список «В обработке» на экране «Добавить» ──────────────────────── */
.proc-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent,var(--brand));
  border-radius:10px;padding:11px 13px;margin-bottom:8px;
  text-decoration:none;color:inherit;
}
a.proc-row:hover{box-shadow:0 2px 12px rgba(26,21,17,.06);}
.proc-row-title{display:block;font-size:13px;font-weight:500;color:var(--ink);}
.proc-row-status{display:block;font-size:11px;color:var(--muted-2);margin-top:2px;}
.proc-row.is-ready{border-left-color:var(--brand);}
.proc-row.is-ready .proc-row-status{color:var(--brand);font-weight:600;}
.proc-row.is-failed{border-left-color:var(--danger);}
.proc-row.is-failed .proc-row-status{color:var(--danger);}
.proc-spinner{
  width:14px;height:14px;flex:0 0 auto;border-radius:50%;
  border:2px solid var(--warm-300);border-top-color:var(--brand);
  animation:spin .8s linear infinite;
}

/* ── Телефон ───────────────────────────────────────────────────────── */
@media (max-width:640px){
  main{padding:14px 16px 56px;}
  .topbar{padding:10px 14px;}
  .topbar-name{display:none;}
  .tab{padding:6px 10px;}
  /* <16px → Safari iOS зумит при фокусе */
  input[type=text],input[type=email],input[type=password],textarea{font-size:16px;}
  button,input[type=submit]{min-height:44px;}
  .segmented button{min-height:0;}
  .kc-actions .link-button,.section-footer .link-button{padding:6px 0;}
  .conspect-actions button{width:100%;}
  .conspect-actions form{flex:1 0 100%;}
}