/* ═══════════════════════════════════════════════════════════
   ОРАКУЛ — дятел на кривой выручки и его речь
   ═══════════════════════════════════════════════════════════
   Та же птица, что стоит на горизонте недели на экране входа (auth.css,
   boot.css). Здесь горизонт — кривая денег периода: птица сидит на её
   последней прожитой точке. Знак не перекрашивается и не фильтруется ни
   в одной теме: меняется бумага, не птица.

   Экран открывается молчанием: у клюва три точки — он прочитал период и
   хочет сказать. Речь появляется по просьбе и набирается на глазах,
   часть за частью, из той же точки, где стояли точки, — так у пузыря
   есть место, откуда он взялся (§8.3: у всего есть источник).

   Движение: одна пружинная кривая на всё (--oc-ease), затухание без
   перелёта. Перелёт уместен там, где было движение руки; здесь его нет —
   речь не отскакивает. */
.oc{
  --oc-ease:cubic-bezier(.2,.8,.2,1);
  --oc-step:70ms;
  display:grid;grid-template-columns:232px minmax(0,1fr);gap:0 22px;
  padding:14px 18px 16px 14px;
}

/* ── птица на кривой ── */
/* Кривая держит одну высоту, сколько бы ни говорил дятел: растянутая на
   всю речь она превращала месяц в горную гряду. */
.oc-side{display:flex;flex-direction:column;align-self:flex-start;position:sticky;top:0}
.oc-perch{position:relative;height:168px;color:var(--ink)}
.oc-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.oc-line .oc-solid{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;opacity:.9}
.oc-line .oc-faint{fill:none;stroke:var(--rule);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:3 4}
.oc-line .oc-fill{fill:url(#oc-g)}
/* Птица стоит на точке кривой: низ короба — на самой линии. */
.oc-bird{position:absolute;width:66px;transform:translate(-50%,-100%);pointer-events:none}
.oc-bird-fallback,.oc-bird img{display:block;width:100%;height:auto}
.oc-bird-fallback{opacity:1;transition:opacity var(--t-move) linear}
.oc-bird-idle{
  position:absolute;inset:0;display:block;width:100%;height:auto;opacity:0;
  pointer-events:none;transition:opacity var(--t-move) linear;
}
.oc-bird.is-alive .oc-bird-idle{opacity:1}
.oc-bird.is-alive .oc-bird-fallback{opacity:0}
.oc-bird .oc-bird-winter{display:none}
html[data-mascot-theme="winter"] .oc-bird .oc-bird-idle{display:none}
html[data-mascot-theme="winter"] .oc-bird .oc-bird-fallback{opacity:1}
html[data-mascot-theme="winter"] .oc-bird .oc-bird-default{display:none}
html[data-mascot-theme="winter"] .oc-bird .oc-bird-winter{display:block}

/* Три точки у клюва — «есть что сказать». Не значок и не плашка: тот же
   знак, каким в переписке показывают, что собеседник набирает. Точки
   зажигаются по очереди и гаснут вместе — это дыхание, а не бег.
   Дышат три раза, когда дятел прочитал период, и затихают: дятел ждёт,
   а не печатает, и вечное мигание рядом с цифрами тянуло бы взгляд, не
   сообщая ничего нового. Сменился период — прочитал заново, дышит снова. */
.oc-dots{
  position:absolute;right:-10px;top:0;display:flex;gap:3px;align-items:center;
  padding:5px 7px;border-radius:var(--r) var(--r) var(--r) var(--r-xs);
  /* Плашка носит акцент — единственный цвет, который меняется вместе с
     бумагой: на светлой теме она тёмная, на тёмной светлая. Плита тут не
     годится: в тёмной теме она одного тона с карточкой и пропадает. */
  background:var(--accent);box-shadow:var(--sh-1);
}
.oc-dots b{
  width:4px;height:4px;border-radius:50%;background:var(--accent-ink);opacity:.5;
  animation:ocDot 1.5s var(--oc-ease) 3;
}
.oc-dots b:nth-child(2){animation-delay:.18s}
.oc-dots b:nth-child(3){animation-delay:.36s}
@keyframes ocDot{0%,64%,100%{opacity:.5;transform:none}28%{opacity:1;transform:translateY(-2px)}}

.oc-who{display:flex;align-items:baseline;gap:8px;margin-top:12px;padding-left:2px}
.oc-who b{font-size:13px;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.oc-mood{
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}

/* ── речь ── */
.oc-talk{min-width:0;display:flex;flex-direction:column}
.oc-head{align-items:center}
.oc-tools{margin-left:auto;display:flex;align-items:center;gap:6px}
/* Подпись про ИИ — тихая кнопка: она настройка, а не действие. */
.oc-ai{
  height:24px;padding:0 9px;border-radius:var(--r);border:1px dashed var(--rule);
  font-size:10.5px;letter-spacing:.02em;color:var(--ink-3);
  transition:color var(--t-tap) var(--oc-ease), border-color var(--t-tap) var(--oc-ease);
}
@media (hover:hover) and (pointer:fine){
  .oc-ai:hover{color:var(--ink);border-color:var(--ink-3)}
}
.oc-ai.on{border-style:solid;color:var(--ink-2)}
.oc-redo{
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r);color:var(--ink-3);
}
.oc-redo svg{width:13px;height:13px}
@media (hover:hover) and (pointer:fine){
  .oc-redo:hover{background:var(--sunk);color:var(--ink)}
}
.oc-redo:active{transform:scale(.94)}
.oc-redo[disabled]{opacity:.4;pointer-events:none}

/* ── приглашение ── */
/* Пока не попросили: одна фраза, счёт наблюдений и кнопка. Ни одного
   показания — иначе это уже отчёт, только мелким шрифтом. */
.oc-hint{
  position:relative;padding:15px 16px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--paper);
  animation:ocRise 320ms var(--oc-ease) both;
}
.oc-hint::before{
  content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;
  background:var(--paper);border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transform:rotate(45deg);
}
.oc-hint-say{font-size:14.5px;font-weight:550;line-height:1.4;letter-spacing:-.015em;color:var(--ink)}
.oc-hint-meta{
  margin-top:5px;font-size:11px;
  color:var(--ink-3);
}
.oc-hint-row{display:flex;align-items:center;gap:14px;margin-top:12px}
.oc-tell{height:32px;padding:0 14px}
.oc-tell svg{width:14px;height:14px}
.oc-more{
  font-size:12px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px;
  transition:color var(--t-tap) var(--oc-ease);
}
@media (hover:hover) and (pointer:fine){
  .oc-more:hover{color:var(--ink)}
}

/* ── пузырь ── */
/* Лист с хвостиком к птице: рамка, а не тень — как у карточек (§8.3).
   Растёт из того угла, где были точки: речь приходит оттуда, откуда
   пришёл намёк. */
.oc-bubble{
  position:relative;padding:15px 16px 12px;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--paper);transform-origin:0 26px;
  animation:ocSpeak 340ms var(--oc-ease) both;
}
.oc-bubble::before{
  content:"";position:absolute;left:-7px;top:26px;width:12px;height:12px;
  background:var(--paper);border-left:1px solid var(--rule);border-bottom:1px solid var(--rule);
  transform:rotate(45deg);
}
@keyframes ocSpeak{from{opacity:0;transform:scale(.97) translateY(5px)}to{opacity:1;transform:none}}
@keyframes ocRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Вердикт — единственная крупная строка речи. Набор крупного текста:
   отрицательный трекинг и плотная интерлиньяж (чем крупнее, тем теснее). */
.oc-verdict{
  font-size:15.5px;font-weight:600;line-height:1.4;letter-spacing:-.02em;color:var(--ink);
  min-height:1.4em;
}
/* Каретка живёт только пока набирают. */
.oc-caret{
  display:none;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;
  background:var(--ink);border-radius:1px;
}
.oc-bubble.is-typing .oc-caret{display:inline-block;animation:ocCaret 1.05s step-end infinite}
@keyframes ocCaret{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ── части отчёта ── */
.oc-sec{margin-top:13px;padding-left:11px;border-left:2px solid var(--rule)}
/* Радость и тревога — статусы, и риска носит их цвет; текст — никогда. */
.oc-sec.t-good{border-color:var(--ok-line)}
.oc-sec.t-bad{border-color:var(--late-line)}
.oc-sec.t-advice{border-color:var(--ink-3)}
.oc-sec h4,.oc-note h4{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;
  color:var(--ink-3);margin:0 0 6px;
}
.oc-mark{display:flex;color:var(--ink-3)}
.oc-mark svg{width:11px;height:11px}
.oc-sec.t-good .oc-mark{color:var(--ok)}
.oc-sec.t-bad .oc-mark{color:var(--late)}
.oc-items{list-style:none;margin:0;padding:0}
.oc-items li,.oc-note li,.oc-note p{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.oc-items li + li,.oc-note li + li{margin-top:4px}
/* Советы — порядок действий, и он пронумерован: квадратик, как номер
   строки в ведомости. */
.oc-do{counter-reset:oc}
.oc-do li{position:relative;padding-left:23px;counter-increment:oc}
.oc-do li::before{
  content:counter(oc);position:absolute;left:0;top:.15em;
  width:15px;height:15px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--rule);border-radius:var(--r-xs);
  font-size:9.5px;color:var(--ink-3);
}
/* Показание внутри фразы — чернилами и табличными цифрами, как в таблицах: глаз
   ловит числа, не перечитывая строку. */
.oc-n{font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:0;color:var(--ink)}

.oc-note > p:first-child{font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.4;color:var(--ink)}
.oc-note h4{margin-top:13px}
.oc-note > :first-child{margin-top:0}
.oc-note p + p,.oc-note ul + p,.oc-note p + ul{margin-top:8px}
.oc-note ul{list-style:none;margin:0;padding:0}
.oc-note b{font-weight:600;color:var(--ink)}
/* Поток модели: каретка стоит в конце последней строки, пока идут слова. */
.oc-note.live > :last-child::after{
  content:"";display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.1em;
  background:var(--ink);border-radius:1px;animation:ocCaret 1.05s step-end infinite;
}

/* Выход частей: каждая приходит следом за предыдущей, снизу и коротко.
   Непоказанная часть места не занимает — иначе под вердиктом стояла бы
   пустая коробка в рост всего отчёта, и лист «печатался» бы в пустоту.
   Очередь ведёт экран (analytics.mjs), здесь — только как это выглядит. */
.oc-bubble.is-typing .oc-sec,
.oc-bubble.is-revealing .oc-sec{display:none}
.oc-bubble.is-revealing .oc-sec.in{display:block;animation:ocStep 280ms var(--oc-ease) both}
@keyframes ocStep{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── подпись ── */
.oc-by{display:block;margin-top:11px;font-size:10.5px;font-style:normal;color:var(--ink-3)}
.oc-by.live{display:flex;align-items:center;gap:10px}
.oc-by.live::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-3);
  animation:ocPulse 1.2s ease-in-out infinite;
}
.oc-by.warn{color:var(--late)}
.oc-skip{font-size:10.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .oc-skip:hover{color:var(--ink)}
}
/* Какая подпись видна, решает состояние пузыря, а не перерисовка. */
.oc-bubble:not(.is-typing) .oc-by.live{display:none}
.oc-bubble.is-typing .oc-by:not(.live){display:none}
@keyframes ocPulse{0%,100%{opacity:.25}50%{opacity:1}}

/* ── вопросы и ответы ── */
.oc-thread{margin-top:8px}
.oc-turn{padding:11px 0 2px;border-top:1px solid var(--rule-2);animation:ocRise 260ms var(--oc-ease) both}
.oc-q{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.oc-q::before{content:"— ";color:var(--ink-3)}
.oc-a{margin-top:2px}
.oc-a p,.oc-a li{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.oc-a p + p{margin-top:6px}
.oc-wait{color:var(--ink-3)!important}
.oc-ask-box{animation:ocRise 260ms var(--oc-ease) both}
.oc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.oc-chip{
  height:26px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--rule);background:var(--card);
  font-size:11.5px;color:var(--ink-2);white-space:nowrap;
  transition:background-color var(--t-tap) var(--oc-ease), border-color var(--t-tap) var(--oc-ease),
    color var(--t-tap) var(--oc-ease), transform var(--t-tap) var(--oc-ease);
}
@media (hover:hover) and (pointer:fine){
  .oc-chip:hover{background:var(--sunk);color:var(--ink);border-color:var(--ink-3)}
}
.oc-chip:active{transform:scale(.97)}
.oc-chip[disabled]{opacity:.45;pointer-events:none}
.oc-ask{display:flex;gap:8px;margin-top:10px}
.oc-ask .oc-in{
  flex:1;min-width:0;height:34px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--rule);
  background:var(--card);font-size:13px;color:var(--ink);transition:border-color var(--t-tap) var(--oc-ease);
}
.oc-ask .oc-in::placeholder{color:var(--ink-3)}
.oc-ask .oc-in:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--focus-ring)}
.oc-ask .oc-in[disabled]{opacity:.6}
.oc-ask .btn{height:34px}

/* ── настройка ИИ ── */
.oc-key{margin-bottom:12px;padding:12px 14px;border:1px solid var(--rule);border-radius:var(--r-lg);
  background:var(--card);animation:ocRise 240ms var(--oc-ease) both}
.oc-key-form{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:10px 12px;align-items:end}
.oc-key-l{display:block;font-size:11px;font-weight:550;color:var(--ink-2)}
.oc-key-l .inp{margin-top:5px;height:34px;padding:0 11px;font-size:12.5px}
.oc-key-row{grid-column:1 / -1;display:flex;gap:8px}
.oc-key-note{margin-top:9px;font-size:11px;line-height:1.5;color:var(--ink-3)}

@media (max-width:1240px){
  .oc{grid-template-columns:1fr}
  /* В одну колонку птица стоит над речью и не липнет к верху: липкая
     она наезжала бы на заголовок при прокрутке. */
  .oc-side{position:static;flex-direction:row;align-items:flex-end;gap:14px;width:100%}
  .oc-perch{flex:1;min-width:0;height:120px}
  .oc-who{margin-top:0;padding-bottom:6px;flex-direction:column;align-items:flex-end;gap:2px}
  .oc-bubble{transform-origin:34px 0}
  .oc-bubble::before,.oc-hint::before{left:34px;top:-7px;transform:rotate(135deg)}
  .oc-key-form{grid-template-columns:1fr}
}
/* Просили тише — движения нет, но есть всё остальное: части стоят на
   местах, набор мгновенный, точки у клюва просто светятся. */
@media (prefers-reduced-motion:reduce){
  .oc-bird-idle{display:none}
  .oc-bird.is-alive .oc-bird-fallback{opacity:1}
  .oc-bubble,.oc-hint,.oc-turn,.oc-ask-box,.oc-key{animation:none}
  .oc-bubble.is-revealing .oc-sec.in{animation:none}
  .oc-bubble.is-typing .oc-sec{display:block}
  .oc-dots b{animation:none;opacity:.8}
  .oc-caret,.oc-note.live > :last-child::after{animation:none}
  .oc-by.live::before{animation:none;opacity:1}
  .oc-chip:active,.oc-redo:active{transform:none}
}

/* ── ответ ведёт: кнопки под речью и строка про сегодня ──
   Действие — кнопка, а не ссылка в тексте: речь читают, а идут по
   кнопке. Строка про сегодня в приглашении — дятел знает не только
   период, и это видно до просьбы, но без единого показания периода. */
.oc-hint-now{margin-top:6px;font-size:12px;color:var(--ink-2)}
.oc-acts{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 2px 13px}
.oc-act{
  display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;
  border:1px solid var(--rule);border-radius:var(--r);background:var(--card);
  font-size:11.5px;font-weight:550;color:var(--ink);box-shadow:var(--sh-1);
  transition:background-color var(--t-tap) var(--oc-ease), border-color var(--t-tap) var(--oc-ease);
}
.oc-act svg{width:12px;height:12px;color:var(--ink-3)}
@media (hover:hover) and (pointer:fine){
  .oc-act:hover{background:var(--sunk);border-color:var(--ink-3)}
}
.oc-act:active{transform:scale(.97)}
.oc-follow{margin-top:8px}
.oc-thread-foot{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:10.5px;color:var(--ink-3)}
.oc-clear{font-size:10.5px;color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .oc-clear:hover{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){ .oc-act:active{transform:none} }