/* ════════════════════════════════════════════════════════════════════
   СЦЕНА «ХАОС → ПОРЯДОК» — флагман-полоса лендинга AiDocMaker.
   Три зоны: Входящее (свалка) → Распознаём (OCR/чтение сути) → Разложено
   по типам + поиск. Токены и манера — как в css/scenes.css (SSOT).
   Разметку и таймлайн строит js/scene-chaos-order.js; здесь только вид.
   Единственный акцент — --accent (терракота). «Грязный» вид передаётся
   ТОЛЬКО формой/наклоном/грейскейлом, не вторым цветом.
   ════════════════════════════════════════════════════════════════════ */

.scene-chaos{
  --accent:#A04E33; --accent-soft:#FBF1EC; --accent-line:#ECC7B5;
  --paper:#F7F4EE; --sand:#F0EBDF; --line:#E7E1D6;
  --ink:#1C1B19; --graphite:#4A463E; --muted:#847E72;
  --docbg:#FFFFFF; --docline:#E7E1D6; --skeleton:#ECE8DF;
  --frame-bg:#FBFAF6; --shadow:rgba(40,30,20,.14);
  width:100%; color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .scene-chaos{
  --paper:#1A1815; --sand:#221F1B; --line:#332E28;
  --ink:#F4F1EA; --graphite:#D8D1C4; --muted:#A8A294;
  --accent:#C26B4C; --accent-soft:#2A211C; --accent-line:#5A3D2E;
  --docbg:#211E1A; --docline:#3A342C; --skeleton:#2E2A23;
  --frame-bg:#1E1B17; --shadow:rgba(0,0,0,.5);
}}
:root[data-theme="dark"] .scene-chaos{
  --paper:#1A1815; --sand:#221F1B; --line:#332E28;
  --ink:#F4F1EA; --graphite:#D8D1C4; --muted:#A8A294;
  --accent:#C26B4C; --accent-soft:#2A211C; --accent-line:#5A3D2E;
  --docbg:#211E1A; --docline:#3A342C; --skeleton:#2E2A23;
  --frame-bg:#1E1B17; --shadow:rgba(0,0,0,.5);
}
.scene-chaos *{box-sizing:border-box}

/* ---------- Рамка-полоса: три зоны ---------- */
.scene-chaos .band{position:relative;background:var(--frame-bg);border:1px solid var(--line);
  border-radius:24px;padding:22px 24px 24px;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 30px 60px -30px var(--shadow);
  display:grid;grid-template-columns:1fr 150px 1.18fr;gap:14px;align-items:start;}
.scene-chaos .col{position:relative;min-width:0;}
.scene-chaos .chead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 12px;min-height:16px;}
.scene-chaos .col-mid .chead{justify-content:center;}
.scene-chaos .chead .lbl{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.03em;}
.scene-chaos .chead .org{font-size:10px;font-weight:600;color:var(--muted);opacity:.7;white-space:nowrap;}

/* ---------- Карточка-документ (переиспользуемый примитив) ---------- */
.scene-chaos .doc-chip{background:var(--docbg);border:1px solid var(--docline);border-radius:10px;
  padding:8px 9px 9px;position:relative;overflow:hidden;box-shadow:0 6px 15px -12px var(--shadow);}
.scene-chaos .doc-chip .cap{display:flex;align-items:center;gap:5px;margin-bottom:6px;min-width:0;}
.scene-chaos .doc-chip .fmt{font-size:6.5px;font-weight:800;letter-spacing:.02em;padding:2px 3px;border-radius:3px;line-height:1;flex:none;}
.scene-chaos .doc-chip .nm{font-size:8.5px;color:var(--muted);font-weight:600;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s ease,color .3s ease;}
.scene-chaos .doc-chip .sk{height:4px;border-radius:3px;background:var(--skeleton);margin:4px 0;}
.scene-chaos .doc-chip .sk.s2{width:78%}.scene-chaos .doc-chip .sk.s3{width:56%}
.scene-chaos .doc-chip.gone{opacity:0!important;transition:opacity .3s ease;} /* терминальное состояние — бьёт .in */
/* тип-теги форматов (единая палитра из scenes.css) */
.scene-chaos .fmt-pdf{color:#C0392B;background:#FBEAE8}.scene-chaos .fmt-xlsx{color:#1E7A46;background:#E7F3EB}
.scene-chaos .fmt-docx{color:#2B5CB8;background:#E8EEF9}.scene-chaos .fmt-jpg{color:#B87A2B;background:#FBF2E3}

/* реквизиты-пилюли (тип + № + дата) */
.scene-chaos .req{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;}
.scene-chaos .pill{font-size:8px;font-weight:700;padding:2px 6px;border-radius:20px;background:var(--sand);
  color:var(--graphite);border:1px solid var(--line);white-space:nowrap;line-height:1.3;}
.scene-chaos .pill.t{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-line);}
/* метка честного OCR */
.scene-chaos .doc-chip .ocr{font-size:6px;font-weight:800;letter-spacing:.02em;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-line);padding:2px 4px;border-radius:4px;
  line-height:1.1;margin-left:auto;flex:none;white-space:nowrap;opacity:0;transform:scale(.8);
  transition:opacity .3s ease,transform .3s ease;}
/* OCR-луч (сканирующая полоса, только transform/opacity) */
.scene-chaos .doc-chip .beam{position:absolute;left:0;right:0;top:0;height:42%;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,var(--accent-line),transparent);}
.scene-chaos .doc-chip.reading .beam{opacity:.7;animation:chaos-scan 1s ease-in-out;}
@keyframes chaos-scan{0%{transform:translateY(-20%)}100%{transform:translateY(240%)}}

/* ---------- Зона 1: Входящее (свалка) ---------- */
.scene-chaos .pile{position:relative;min-height:252px;transform-origin:50% 100%;}
.scene-chaos .pile.breathe{animation:chaos-breathe 3.4s ease-in-out infinite;}
@keyframes chaos-breathe{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.scene-chaos .pile .doc-chip{position:absolute;width:148px;--rot:0deg;filter:grayscale(1);
  opacity:0;transform:translateY(-42px) rotate(var(--rot)) scale(.92);
  box-shadow:0 10px 22px -14px var(--shadow);
  transition:opacity .5s ease,transform .6s cubic-bezier(.4,1.45,.5,1);}
.scene-chaos .pile .doc-chip.in{opacity:.82;transform:rotate(var(--rot)) scale(1);}
.scene-chaos .pile .doc-chip.gone{opacity:0;}
.scene-chaos .pile .doc-chip .req,.scene-chaos .pile .doc-chip .ocr{display:none;} /* свалка компактна */

/* ---------- Зона 2: Распознаём (центр-сцена) ---------- */
.scene-chaos .stage{position:relative;min-height:180px;display:flex;align-items:center;justify-content:center;}
.scene-chaos .stage .scan-ico{color:var(--muted);opacity:.45;transition:opacity .3s ease;}
.scene-chaos .stage .scan-ico svg{width:32px;height:32px;}
.scene-chaos .stage.busy .scan-ico{opacity:0;}
.scene-chaos .stage-card{position:absolute;width:150px;filter:grayscale(1);opacity:0;transform:scale(.96);
  box-shadow:0 16px 34px -16px var(--shadow);transition:opacity .3s ease,transform .3s ease,filter .5s ease;}
.scene-chaos .stage-card.in{opacity:1;transform:none;}
.scene-chaos .stage-card.lit{filter:grayscale(0);}
.scene-chaos .stage-card .req{min-height:20px;}                      /* место зарезервировано */
.scene-chaos .stage-card .req .pill{opacity:0;transform:translateY(4px) scale(.9);transition:opacity .25s ease,transform .25s ease;}
.scene-chaos .stage-card.lit .req .pill{opacity:1;transform:none;}
.scene-chaos .stage-card.lit .req .pill:nth-child(2){transition-delay:.08s}
.scene-chaos .stage-card.lit .req .pill:nth-child(3){transition-delay:.16s}
.scene-chaos .stage-card.lit .ocr{opacity:1;transform:none;}
.scene-chaos .stage-card.strike .nm{text-decoration:line-through;text-decoration-color:var(--accent);opacity:.45;}

/* ---------- Зона 3: Разложено по типам (полки) ---------- */
.scene-chaos .rhead{position:relative;min-height:18px;margin:0 2px 8px;}
.scene-chaos .rlbl{font-size:10.5px;font-weight:600;color:var(--muted);transition:opacity .35s ease;}
.scene-chaos .rlbl b{color:var(--ink);font-weight:800;}
.scene-chaos .rhead.found .rlbl{opacity:0;}
.scene-chaos .query{position:absolute;inset:0;display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease;pointer-events:none;}
.scene-chaos .rhead.found .query{opacity:1;transform:none;}
.scene-chaos .query .qw{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;color:var(--muted);}
.scene-chaos .query .qw svg{width:12px;height:12px;color:var(--accent);}

.scene-chaos .stack{display:flex;flex-direction:column;gap:6px;}
.scene-chaos .shelf{}
.scene-chaos .shelf-hd{display:flex;align-items:center;gap:5px;margin:0 0 3px;}
.scene-chaos .shelf-hd .ico{width:13px;height:13px;color:var(--muted);display:inline-flex;transition:color .35s ease;}
.scene-chaos .shelf-hd .ico svg{width:100%;height:100%;}
.scene-chaos .shelf-hd .nm{font-size:9.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;transition:color .35s ease;}
.scene-chaos .shelf.lit .shelf-hd .ico{color:var(--accent);}
.scene-chaos .shelf.lit .shelf-hd .nm{color:var(--ink);}
.scene-chaos .slots{display:flex;flex-direction:column;gap:4px;}

.scene-chaos .filed{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;
  background:var(--docbg);border:1px solid var(--docline);position:static;overflow:visible;
  box-shadow:none;transition:opacity .35s ease,border-color .35s ease,box-shadow .35s ease,transform .4s cubic-bezier(.4,1.3,.5,1),filter .35s ease;}
.scene-chaos .filed .ft{font-size:9px;font-weight:700;color:var(--graphite);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.scene-chaos .filed .ft b{color:var(--ink);font-weight:700;}
.scene-chaos .filed .ft .n{color:var(--accent);font-weight:700;}
.scene-chaos .filed.ph{border-style:dashed;opacity:.34;}
.scene-chaos .filed.ph .ft,.scene-chaos .filed.ph .ft b,.scene-chaos .filed.ph .ft .n{color:var(--muted);}
.scene-chaos .filed.filled{opacity:1;border-style:solid;box-shadow:0 5px 14px -11px var(--shadow),0 0 0 1px var(--accent-line);}
.scene-chaos .filed.pop{animation:chaos-pop .4s ease;}
@keyframes chaos-pop{0%{transform:translateY(4px) scale(.96)}55%{transform:translateY(-2px) scale(1.02)}100%{transform:none}}

/* Поиск: полки притухают, найденные выезжают вперёд с подсветкой реквизитов */
.scene-chaos .stack.dim .filed,.scene-chaos .stack.dim .shelf-hd{opacity:.4;filter:grayscale(.4);}
.scene-chaos .stack.dim .filed.hit{opacity:1;filter:none;transform:translateX(-8px) scale(1.03);
  box-shadow:0 8px 18px -10px var(--shadow),0 0 0 1.6px var(--accent);border-color:var(--accent);}
.scene-chaos .stack.dim .filed.hit .ft b{color:var(--accent);}

/* ---------- Летящий клон ---------- */
.scene-chaos .fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:9;}
.scene-chaos .fx .fly{position:absolute;width:150px;will-change:transform,filter;
  box-shadow:0 18px 32px -14px var(--shadow);}
.scene-chaos .fx .fly .req,.scene-chaos .fx .fly .ocr{display:none;}

/* ---------- Слоган-подпись под полосой ---------- */
.scene-chaos .slogan{text-align:center;margin-top:14px;font-size:13px;font-weight:600;color:var(--muted);
  opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease,color .5s ease;}
.scene-chaos .slogan.show{opacity:1;transform:none;color:var(--ink);}

/* ---------- Мобильная раскладка (≤720px): зоны вертикально ---------- */
@media (max-width:720px){
  .scene-chaos .band{grid-template-columns:1fr;gap:4px;padding:18px 16px 20px;}
  .scene-chaos .col-mid .chead{justify-content:flex-start;}
  .scene-chaos .pile{min-height:230px;}
  .scene-chaos .stage{min-height:150px;}
  .scene-chaos .doc-chip .req .pill:nth-child(n+3){display:none;} /* меньше пилюль */
  .scene-chaos .slogan{font-size:12px;margin-top:12px;}
}