/* Люмьер — помощник в левом нижнем углу.
   Персонаж собран из слоёв: тело без бобин, две бобины (крутятся) и свечение объектива.
   Остальные позы — готовые кадры, бобины в них неподвижны. */

.lum{--lum-h:150px;position:fixed;left:14px;bottom:14px;z-index:80;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  pointer-events:none}
.lum *{box-sizing:border-box}
.lum[hidden]{display:none}

/* ---------- сцена: персонаж и реплика ---------- */
.lum__stage{position:relative;display:flex;align-items:flex-end;gap:6px;
  transform:translateX(var(--lum-x,0px));transition:transform var(--lum-walk,0ms) linear}
.lum__char{pointer-events:auto;position:relative;flex:none;
  height:var(--lum-h);aspect-ratio:300/340;padding:0;border:0;background:none;cursor:pointer;
  filter:drop-shadow(0 10px 14px rgba(10,12,14,.28));-webkit-tap-highlight-color:transparent}
.lum__char:focus-visible{outline:2px solid var(--acc,#3ec6c9);outline-offset:4px;border-radius:6px}
.lum__char>*{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none}
.lum__body,.lum__pose{inset:0;width:100%;height:100%;object-fit:contain}
.lum__pose{display:none}
.lum[data-pose]:not([data-pose=idle]) .lum__pose{display:block}
.lum[data-pose]:not([data-pose=idle]) .lum__body,
.lum[data-pose]:not([data-pose=idle]) .lum__reel,
.lum[data-pose]:not([data-pose=idle]) .lum__glow{display:none}

/* бобины — позади головы; растяжение по вертикали даёт лёгкий ракурс */
.lum__reel{aspect-ratio:1;translate:-50% -50%;scale:1 1.08}
.lum__reel--l{left:32%;top:19.4%;width:36.4%}
.lum__reel--r{left:67.4%;top:19.9%;width:36.5%}
.lum__reel i{position:absolute;inset:0;background:var(--lum-reel) center/contain no-repeat;animation:lumSpin 9s linear infinite}
.lum__reel--r i{animation-duration:11s;animation-delay:-3s}
.lum[data-busy] .lum__reel i{animation-duration:1.6s}
@keyframes lumSpin{to{transform:rotate(360deg)}}

.lum__glow{left:57.9%;top:43.3%;width:12%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,rgba(120,236,238,.75) 0 22%,rgba(62,198,201,.28) 45%,transparent 70%);
  mix-blend-mode:screen;animation:lumGlow 3.6s ease-in-out infinite}
@keyframes lumGlow{0%,100%{opacity:.35;scale:.9}50%{opacity:.85;scale:1.08}}

/* покачивание при ходьбе и лёгкое «дыхание» в покое */
.lum[data-walking] .lum__char{animation:lumBob .34s ease-in-out infinite}
@keyframes lumBob{0%,100%{translate:0 0}50%{translate:0 -4px}}
.lum[data-pose=idle] .lum__char{animation:lumBreath 4.8s ease-in-out infinite}
@keyframes lumBreath{0%,100%{translate:0 0}50%{translate:0 -2px}}
.lum[data-turn] .lum__char{scale:-1 1}

/* ---------- реплика ---------- */
.lum__bubble{pointer-events:auto;position:relative;align-self:flex-start;margin-top:10px;
  width:min(300px,calc(100vw - var(--lum-h) - 44px));padding:16px 18px 14px;
  background:var(--graphite-2,#22252a);color:var(--dark-ink,#f2f3f2);
  border:1px solid var(--hair-dark,#454b53);border-radius:2px;
  box-shadow:0 18px 40px -18px rgba(10,12,14,.55);
  opacity:0;translate:0 8px;transition:opacity .28s ease,translate .28s ease;visibility:hidden}
.lum__bubble.on{opacity:1;translate:0 0;visibility:visible}
.lum__bubble::before{content:"";position:absolute;left:-7px;bottom:26px;width:12px;height:12px;
  background:inherit;border-left:1px solid var(--hair-dark,#454b53);border-bottom:1px solid var(--hair-dark,#454b53);rotate:45deg}
.lum__who{display:block;margin-bottom:6px;font-size:11.5px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--acc,#3ec6c9)}
.lum__say{margin:0 0 12px;font-size:15.5px;line-height:1.45;color:var(--dark-ink,#f2f3f2)}
.lum__acts{display:flex;gap:8px;align-items:center}
.lum__x{position:absolute;top:6px;right:6px;width:32px;height:32px;display:grid;place-items:center;
  border:0;background:none;color:var(--dark-ink-3,#9aa0a7);cursor:pointer;border-radius:2px}
.lum__x:hover{color:#fff}
.lum__x svg{width:14px;height:14px}

/* ---------- кнопки и чипы ---------- */
.lum-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;
  border:1px solid transparent;border-radius:2px;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  background:var(--acc,#3ec6c9);color:var(--acc-glyph,#08282a);text-decoration:none}
.lum-btn:hover{background:#56d2d5}
.lum-btn[disabled]{opacity:.45;cursor:not-allowed}
.lum-btn--ghost{background:transparent;color:var(--dark-ink-2,#c9ccd0);border-color:var(--hair-dark,#454b53)}
.lum-btn--ghost:hover{background:rgba(255,255,255,.05);color:#fff}
.lum-btn:focus-visible,.lum-chip:focus-visible,.lum input:focus-visible{outline:2px solid var(--acc,#3ec6c9);outline-offset:2px}

.lum-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.lum-chip{min-height:44px;padding:0 14px;border:1px solid var(--hair-dark,#454b53);border-radius:2px;
  background:transparent;color:var(--dark-ink-2,#c9ccd0);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;text-align:left}
.lum-chip:hover{border-color:#6a727c;color:#fff}
.lum-chip[aria-pressed=true]{background:rgba(62,198,201,.12);border-color:var(--acc,#3ec6c9);color:#fff}

/* ---------- окно помощника ---------- */
.lum__panel{pointer-events:auto;position:absolute;left:0;bottom:calc(var(--lum-h) + 12px);
  width:min(440px,calc(100vw - 28px));max-height:min(620px,calc(100vh - var(--lum-h) - 110px));
  display:flex;flex-direction:column;background:var(--graphite-2,#22252a);color:var(--dark-ink-2,#c9ccd0);
  border:1px solid var(--hair-dark,#454b53);border-radius:2px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
  opacity:0;translate:0 10px;visibility:hidden;transition:opacity .25s ease,translate .25s ease}
.lum__panel.on{opacity:1;translate:0 0;visibility:visible}
/* кадровые метки по углам — как у тёмных экранов сайта */
.lum__panel::before{content:"";position:absolute;inset:8px;pointer-events:none;opacity:.3;
  background:
    linear-gradient(currentColor,currentColor) 0 0/14px 1px no-repeat,linear-gradient(currentColor,currentColor) 0 0/1px 14px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 0/14px 1px no-repeat,linear-gradient(currentColor,currentColor) 100% 0/1px 14px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/14px 1px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/1px 14px no-repeat,
    linear-gradient(currentColor,currentColor) 100% 100%/14px 1px no-repeat,linear-gradient(currentColor,currentColor) 100% 100%/1px 14px no-repeat}
.lum__head{display:flex;align-items:center;gap:10px;padding:18px 20px 12px;border-bottom:1px solid var(--hair-dark,#454b53)}
.lum__head b{display:block;color:#fff;font-size:16px;font-weight:800;letter-spacing:-.01em}
.lum__head small{display:block;font-size:12.5px;color:var(--dark-ink-3,#9aa0a7)}
.lum__head .lum__x{position:static;margin-left:auto}
.lum__step{font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--dark-ink-3,#9aa0a7)}
.lum__body-w{overflow:auto;padding:16px 20px 18px;overscroll-behavior:contain}
.lum__q{margin:6px 0 14px;color:#fff;font-size:19px;font-weight:800;line-height:1.3;letter-spacing:-.015em}
.lum__hint{margin:-6px 0 14px;font-size:13.5px;line-height:1.45;color:var(--dark-ink-3,#9aa0a7)}
.lum__nav{display:flex;gap:8px;justify-content:space-between;margin-top:16px}
.lum__row{display:flex;gap:8px;align-items:center}
.lum input[type=number],.lum input[type=date],.lum input[type=text]{min-height:46px;width:100%;padding:0 12px;
  border:1px solid var(--hair-dark,#454b53);border-radius:2px;background:#1a1d21;color:#fff;font:inherit;font-size:16px;
  font-variant-numeric:tabular-nums;color-scheme:dark}
.lum label.lum__lbl{display:block;margin:12px 0 6px;font-size:13px;font-weight:600;color:var(--dark-ink-2,#c9ccd0)}

/* план */
.lum-plan{margin:4px 0 0;padding:0;list-style:none;border-top:1px solid var(--hair-dark,#454b53)}
.lum-plan li{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:11px 0;border-bottom:1px solid var(--hair-dark,#454b53)}
.lum-plan b{color:#fff;font-size:14.5px;font-weight:600;line-height:1.35}
.lum-plan em{grid-column:1;font-style:normal;font-size:12.5px;color:var(--dark-ink-3,#9aa0a7);line-height:1.4}
.lum-plan span{grid-row:1/3;grid-column:2;text-align:right;font-variant-numeric:tabular-nums;font-size:14px;color:var(--dark-ink-2,#c9ccd0);white-space:nowrap}
.lum-plan span i{display:block;font-style:normal;color:var(--acc,#3ec6c9);font-size:12.5px;font-weight:600}
.lum-sum{display:flex;justify-content:space-between;gap:12px;margin:12px 0 4px;font-variant-numeric:tabular-nums}
.lum-sum b{color:#fff;font-size:18px;font-weight:800}
.lum-verdict{margin:14px 0 4px;padding:12px 14px;border-left:2px solid var(--acc,#3ec6c9);background:rgba(62,198,201,.08);
  color:#fff;font-size:14.5px;line-height:1.45}
.lum-verdict--tight{border-color:#e8c46a;background:rgba(232,196,106,.08)}
.lum-verdict--late{border-color:#e8a33c;background:rgba(232,163,60,.1)}
.lum-note{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--dark-ink-3,#9aa0a7)}
.lum-consent{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--dark-ink-3,#9aa0a7)}
.lum-consent input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--acc,#3ec6c9)}
.lum-consent a{color:var(--dark-ink-2,#c9ccd0)}
.lum-msg{margin:10px 0 0;font-size:14px;line-height:1.45}
.lum-msg--err{color:#e8a33c}
.lum-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- телефон: над нижней панелью связи ---------- */
@media(max-width:1080px){
  .lum{--lum-h:92px;left:8px;bottom:66px}
  .lum__bubble{margin-top:0;padding:13px 14px 12px}
  .lum__say{font-size:14.5px;margin-bottom:10px}
  .lum__bubble{padding:12px 12px 12px 14px}
  .lum__acts .lum-btn{min-height:42px;padding:0 11px;font-size:14px;white-space:nowrap}
  /* окно встаёт над персонажем, чтобы тот оставался виден */
  .lum__panel{position:fixed;left:8px;right:8px;width:auto;bottom:calc(66px + var(--lum-h) + 8px);
    max-height:calc(100dvh - 66px - var(--lum-h) - 8px - 58px)}
}
@media(max-width:420px){.lum__bubble{width:calc(100vw - var(--lum-h) - 30px)}}

/* без анимаций, если человек их отключил */
@media(prefers-reduced-motion:reduce){
  .lum__reel i,.lum__glow,.lum[data-pose=idle] .lum__char,.lum[data-walking] .lum__char{animation:none}
  .lum__stage{transition:none}
}