/* Полноэкранная страница ИИ-ассистента DEREVOPARK (Gemini-style).
   Рендерится плагином как отдельный документ (вне темы). Фон-«изошка» — через
   CSS-переменную --dp-fp-iso (задаётся в шаблоне из настройки). */
:root{
  --dp-fp-iso: none;            /* шаблон подставит url(...) из настройки фона */
  --green: rgb(213,246,103);
  --green-soft: rgba(213,246,103,.85);
  --gold: rgba(228,200,128,.9);
  --ink: rgba(236,239,228,.94);
  --muted: rgba(202,206,190,.62);
  --glass-strong: rgba(14,19,16,.74);
  --line: rgba(228,236,200,.10);
  --font: "TT Fors","Helvetica Neue",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:#0b1310;overflow:hidden;-webkit-font-smoothing:antialiased}

/* ───────── Изометрический фон (плейсхолдер + слот под арт) ───────── */
.dp-fp-iso{position:fixed;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 80% 0%, #16241b 0%, #101a15 45%, #0a120e 100%)}
.dp-fp-iso__art{position:absolute;inset:0;background-image:var(--dp-fp-iso);background-size:cover;background-position:center;opacity:.92}
.dp-fp-iso__grid{position:absolute;inset:-20%;transform:rotateX(58deg) rotateZ(45deg);transform-origin:center;opacity:.5;
  background-image:linear-gradient(rgba(150,180,150,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,150,.10) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 40%,#000 12%,transparent 62%)}
.dp-fp-iso__glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5}
.dp-fp-iso__glow.g1{width:46vw;height:46vw;left:-8vw;bottom:-12vw;background:radial-gradient(circle,rgba(166,208,94,.4),transparent 70%)}
.dp-fp-iso__glow.g2{width:38vw;height:38vw;right:-6vw;top:-10vw;background:radial-gradient(circle,rgba(221,185,106,.28),transparent 70%)}
.dp-fp-iso__tiles{position:absolute;inset:0;mask-image:radial-gradient(circle at 50% 45%,#000 8%,transparent 60%)}
.dp-fp-tile{position:absolute;width:120px;height:120px;border:1px solid rgba(213,246,103,.16);border-radius:14px;
  background:rgba(30,42,32,.30);transform:rotateX(58deg) rotateZ(45deg);box-shadow:0 30px 50px rgba(0,0,0,.35);
  animation:dp-fp-float 9s ease-in-out infinite}
.dp-fp-tile.t1{left:12%;top:60%}
.dp-fp-tile.t2{left:78%;top:30%;animation-delay:-3s;border-color:rgba(228,200,128,.18)}
.dp-fp-tile.t3{left:70%;top:72%;animation-delay:-6s;width:90px;height:90px}
@keyframes dp-fp-float{0%,100%{transform:rotateX(58deg) rotateZ(45deg) translateZ(0)}50%{transform:rotateX(58deg) rotateZ(45deg) translateZ(18px)}}
.dp-fp-iso__veil{position:absolute;inset:0;background:radial-gradient(130% 90% at 50% 40%,rgba(5,9,7,.5),transparent 60%),linear-gradient(180deg,rgba(8,13,10,.58),rgba(8,13,10,.82))}
/* нет фоновой картинки → показываем плейсхолдер-сетку; есть → прячем её */
body[data-has-bg="1"] .dp-fp-iso__grid,
body[data-has-bg="1"] .dp-fp-iso__tiles{display:none}

/* ───────── Сцена ───────── */
.dp-fp-stage{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:880px;margin:0 auto;padding:26px clamp(16px,4vw,40px) 24px}
.dp-fp-top{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.dp-fp-mark{width:34px;height:34px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  background:center/150% no-repeat url("../img/moss-stage-1-new.webp"),radial-gradient(circle at 50% 52%,#35551f,#16221a);
  box-shadow:0 0 16px rgba(167,222,82,.22),inset 0 1px 0 rgba(255,255,255,.18)}
.dp-fp-name{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:rgba(222,227,208,.82);text-shadow:0 1px 10px rgba(0,0,0,.75)}
.dp-fp-name b{color:#fff;font-weight:600}
.dp-fp-badge{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:rgba(222,227,208,.82);text-shadow:0 1px 10px rgba(0,0,0,.75)}
.dp-fp-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}

.dp-fp-core{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0}

.dp-fp-hero{text-align:center;padding:10px 0 22px;transition:opacity .4s ease,transform .4s ease}
.dp-fp-hero h1{margin:0 0 10px;font-weight:500;line-height:1.06;letter-spacing:-.02em;font-size:clamp(30px,5.4vw,52px);text-shadow:0 2px 24px rgba(0,0,0,.55)}
.dp-fp-hero h1 .grad{background:linear-gradient(95deg,var(--green) 0%,var(--gold) 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dp-fp-hero p{margin:0 auto;max-width:540px;color:rgba(226,230,212,.88);font-size:15px;font-weight:300;line-height:1.6;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.dp-fp-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
.dp-fp-chip{border:1px solid var(--line);background:rgba(30,40,32,.42);color:rgba(224,230,206,.86);font:inherit;font-size:13px;font-weight:300;padding:10px 15px;border-radius:14px;cursor:pointer;backdrop-filter:blur(8px);transition:.2s}
.dp-fp-chip:hover{border-color:rgba(213,246,103,.4);background:rgba(60,74,46,.5);color:#eef4d6;transform:translateY(-1px)}

.dp-fp-chat{display:none;flex:1 1 auto;overflow-y:auto;padding:8px 2px 6px;scrollbar-width:thin;scrollbar-color:rgba(194,175,118,.18) transparent}
.dp-fp-chat.show{display:block}
.dp-fp-msg{display:flex;gap:11px;margin:14px 0;max-width:92%;opacity:0;transform:translateY(16px) scale(.97);animation:dp-fp-rise .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes dp-fp-rise{to{opacity:1;transform:none}}
.dp-fp-msg.user{margin-left:auto;flex-direction:row-reverse}
.dp-fp-ava{flex:0 0 auto;width:30px;height:30px;border-radius:50%;margin-top:2px;overflow:hidden;
  background:center/150% no-repeat url("../img/moss-stage-1-new.webp"),radial-gradient(circle at 50% 52%,#35551f,#16221a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.dp-fp-msg.user .dp-fp-ava{background:linear-gradient(135deg,rgba(194,162,91,.55),rgba(90,86,64,.6))}
.dp-fp-bubble{padding:13px 16px;border-radius:16px;font-size:14.5px;line-height:1.55;font-weight:300}
.dp-fp-msg.assistant .dp-fp-bubble{background:rgba(13,19,15,.66);border:1px solid rgba(186,179,145,.16);color:rgba(240,244,228,.97);-webkit-backdrop-filter:blur(12px) saturate(115%);backdrop-filter:blur(12px) saturate(115%)}
.dp-fp-msg.user .dp-fp-bubble{background:linear-gradient(135deg,rgba(116,96,50,.62),rgba(46,44,32,.6));border:1px solid rgba(201,177,112,.24);color:rgba(248,240,214,.97);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dp-fp-bubble a{color:var(--green-soft);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word}
.dp-fp-bubble p{margin:0 0 8px}.dp-fp-bubble p:last-child{margin-bottom:0}
.dp-fp-bubble strong{font-weight:600;color:rgba(255,255,250,.96)}
.dp-fp-bubble ul,.dp-fp-bubble ol{margin:4px 0 8px;padding-left:20px}
.dp-fp-bubble .tag{display:inline-block;margin-top:9px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dp-fp-typing{display:inline-flex;gap:5px;align-items:center;height:10px}
.dp-fp-typing i{width:6px;height:6px;border-radius:50%;background:var(--green-soft);opacity:.5;animation:dp-fp-blink 1.1s infinite}
.dp-fp-typing i:nth-child(2){animation-delay:.2s}.dp-fp-typing i:nth-child(3){animation-delay:.4s}
@keyframes dp-fp-blink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.95;transform:translateY(-3px)}}
.dp-fp-caret{display:inline-block;width:7px;height:1.05em;vertical-align:-2px;margin-left:1px;background:var(--green);animation:dp-fp-cb .9s step-end infinite}
@keyframes dp-fp-cb{50%{opacity:0}}

.dp-fp-composer{flex:0 0 auto;margin-top:14px}
.dp-fp-composer form{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 18px;border-radius:26px;background:var(--glass-strong);
  border:1px solid rgba(213,246,103,.16);box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(234,219,173,.08);backdrop-filter:blur(22px) saturate(120%)}
.dp-fp-attach{flex:0 0 auto;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--muted);cursor:pointer;border:1px solid transparent;transition:.2s}
.dp-fp-attach:hover{color:#e3dcc8;background:rgba(255,255,255,.05)}
.dp-fp-composer input[type=text]{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:300}
.dp-fp-composer input::placeholder{color:rgba(159,166,150,.6)}
.dp-fp-send{flex:0 0 auto;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;color:#10160f;
  background:linear-gradient(135deg,var(--green),rgba(166,208,94,.9));box-shadow:0 0 18px rgba(186,230,90,.35);transition:.2s}
.dp-fp-send:hover{transform:scale(1.05)}
.dp-fp-send svg{width:19px;height:19px}
.dp-fp-hint{text-align:center;color:rgba(150,156,140,.5);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:12px 0 0}

@media (max-width:560px){.dp-fp-hero h1{font-size:30px}.dp-fp-name{display:none}.dp-fp-stage{padding:18px 14px 16px}}

/* ───────── «Живой» режим: моховик-аватары + дышащий фон ───────── */
/* Аватар-моховик: перелив двух стадий мха (::after) + мягко пульсирующее свечение. */
.dp-fp-mark,
.dp-fp-msg.assistant .dp-fp-ava{position:relative;animation:dp-fp-ava-glow 6.5s ease-in-out infinite}
.dp-fp-mark::after,
.dp-fp-msg.assistant .dp-fp-ava::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:center/150% no-repeat url("../img/moss-stage-2-new.webp");opacity:0;animation:dp-fp-moss 7.5s ease-in-out infinite}
@keyframes dp-fp-moss{0%,100%{opacity:0;transform:scale(1) rotate(0deg)}50%{opacity:.5;transform:scale(1.035) rotate(1.5deg)}}
@keyframes dp-fp-ava-glow{0%,100%{box-shadow:0 0 10px rgba(166,208,94,.2),inset 0 1px 0 rgba(255,255,255,.18)}50%{box-shadow:0 0 18px rgba(186,230,90,.32),inset 0 1px 0 rgba(255,255,255,.2)}}

/* Фон-фото медленно «дышит» (Ken Burns). */
.dp-fp-iso__art{transform-origin:center;animation:dp-fp-kenburns 42s ease-in-out infinite alternate}
@keyframes dp-fp-kenburns{0%{transform:scale(1.04) translate(0,0)}100%{transform:scale(1.13) translate(-1.6%,-1.4%)}}

/* Свечения медленно дрейфуют и пульсируют. */
.dp-fp-iso__glow.g1{animation:dp-fp-glow1 15s ease-in-out infinite}
.dp-fp-iso__glow.g2{animation:dp-fp-glow2 19s ease-in-out infinite}
@keyframes dp-fp-glow1{0%,100%{transform:translate(0,0) scale(1);opacity:.45}50%{transform:translate(6vw,-4vh) scale(1.14);opacity:.62}}
@keyframes dp-fp-glow2{0%,100%{transform:translate(0,0) scale(1);opacity:.26}50%{transform:translate(-5vw,5vh) scale(1.12);opacity:.4}}

/* Светлячки — тёплые искры, мягко плавают в глубине фона. */
.dp-fp-sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.dp-fp-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(222,245,150,.9);
  box-shadow:0 0 8px rgba(213,246,103,.8),0 0 16px rgba(166,208,94,.45);opacity:.3;animation:dp-fp-firefly ease-in-out infinite}
.dp-fp-spark:nth-child(1){left:10%;top:64%;animation-duration:9s;animation-delay:-1s}
.dp-fp-spark:nth-child(2){left:22%;top:38%;animation-duration:11s;animation-delay:-4s;width:3px;height:3px}
.dp-fp-spark:nth-child(3){left:84%;top:30%;animation-duration:10s;animation-delay:-2s}
.dp-fp-spark:nth-child(4){left:78%;top:70%;animation-duration:12s;animation-delay:-6s;width:3px;height:3px}
.dp-fp-spark:nth-child(5){left:50%;top:22%;animation-duration:13s;animation-delay:-3s}
.dp-fp-spark:nth-child(6){left:15%;top:85%;animation-duration:10.5s;animation-delay:-7s;width:5px;height:5px}
.dp-fp-spark:nth-child(7){left:90%;top:52%;animation-duration:9.5s;animation-delay:-5s;width:3px;height:3px}
.dp-fp-spark:nth-child(8){left:64%;top:80%;animation-duration:12.5s;animation-delay:-8s}
@keyframes dp-fp-firefly{0%,100%{transform:translate(0,0);opacity:.16}25%{transform:translate(18px,-28px);opacity:.58}50%{transform:translate(-12px,-46px);opacity:.3}75%{transform:translate(14px,-24px);opacity:.48}}

/* ───────── Прикреплённые фото участка (vision) ───────── */
.dp-fp-tray{display:none;flex-wrap:wrap;gap:8px;margin:0 6px 10px}
.dp-fp-chip-file{position:relative;width:56px;height:56px;border-radius:12px;overflow:hidden;border:1px solid rgba(213,246,103,.28);box-shadow:0 6px 18px rgba(0,0,0,.35);animation:dp-fp-rise .3s ease}
.dp-fp-chip-file img{width:100%;height:100%;object-fit:cover;display:block}
.dp-fp-chip-file button{position:absolute;top:3px;right:3px;width:18px;height:18px;border:0;border-radius:50%;cursor:pointer;background:rgba(8,12,9,.82);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center;padding:0;transition:.18s}
.dp-fp-chip-file button:hover{background:rgba(176,64,58,.92)}
.dp-fp-shots{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.dp-fp-shot{width:132px;max-width:48%;border-radius:12px;display:block;border:1px solid rgba(255,255,255,.14)}

/* ───────── Стилевой лоск ───────── */
.dp-fp-composer form{padding:8px 8px 8px 10px;border-radius:30px;border-color:rgba(213,246,103,.22);transition:border-color .25s ease,box-shadow .25s ease}
.dp-fp-composer form:focus-within{border-color:rgba(213,246,103,.46);box-shadow:0 20px 54px rgba(0,0,0,.46),0 0 0 1px rgba(213,246,103,.16),inset 0 1px 0 rgba(234,219,173,.1)}
.dp-fp-attach{width:42px;height:42px;color:rgba(213,246,103,.82);border:1px solid rgba(213,246,103,.22);
  background:radial-gradient(circle at 38% 30%,rgba(213,246,103,.12),transparent 62%),rgba(26,34,26,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 8px rgba(0,0,0,.22);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease}
.dp-fp-attach:hover{color:#eaf6c2;border-color:rgba(213,246,103,.55);
  background:radial-gradient(circle at 38% 30%,rgba(213,246,103,.28),transparent 60%),rgba(40,52,36,.62);
  box-shadow:0 0 16px rgba(186,230,90,.42),inset 0 1px 0 rgba(255,255,255,.14);transform:translateY(-1px)}
.dp-fp-attach:active{transform:scale(.94)}
.dp-fp-attach svg{width:18px;height:18px}
.dp-fp-composer input[type=text]{padding:0 4px}
.dp-fp-send{width:44px;height:44px}
.dp-fp-chip{padding:11px 17px;border-radius:16px;background:rgba(20,28,22,.5);backdrop-filter:blur(10px)}
.dp-fp-chip:hover{box-shadow:0 8px 22px rgba(0,0,0,.32)}
.dp-fp-hero{animation:dp-fp-hero-in .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes dp-fp-hero-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.dp-fp-mark{box-shadow:0 0 16px rgba(167,222,82,.22),inset 0 1px 0 rgba(255,255,255,.18),0 4px 14px rgba(0,0,0,.4)}
.dp-fp-dot{animation:dp-fp-dot-pulse 2.4s ease-in-out infinite}
@keyframes dp-fp-dot-pulse{0%,100%{opacity:1;box-shadow:0 0 10px var(--green)}50%{opacity:.45;box-shadow:0 0 3px var(--green)}}
.dp-fp-chips{margin:0 2px 10px}
.dp-fp-iso__glow.g1{animation-duration:13s}
.dp-fp-iso__glow.g2{animation-duration:16s}
/* рассинхрон «дыхания» аватаров — чтобы не пульсировали в унисон */
.dp-fp-msg.assistant:nth-of-type(3n) .dp-fp-ava,.dp-fp-msg.assistant:nth-of-type(3n) .dp-fp-ava::after{animation-delay:-2.6s}
.dp-fp-msg.assistant:nth-of-type(3n+2) .dp-fp-ava,.dp-fp-msg.assistant:nth-of-type(3n+2) .dp-fp-ava::after{animation-delay:-5.1s}

/* ───────── Большой «живой» 3D-моховик (super-model) в шапке ───────── */
.dp-fp-orb{position:relative;flex:0 0 auto;width:84px;height:84px}
.dp-fp-orb-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
.dp-fp-orb.ready .dp-fp-orb-canvas{display:block}
.dp-fp-orb-img{position:absolute;inset:8%;border-radius:50%;overflow:hidden;
  background:center/150% no-repeat url("../img/moss-stage-1-new.webp"),radial-gradient(circle at 50% 52%,#35551f,#16221a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 18px rgba(167,222,82,.22);
  animation:dp-fp-orb-breathe 6s ease-in-out infinite}
.dp-fp-orb.ready .dp-fp-orb-img{display:none}
@keyframes dp-fp-orb-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
/* сообщения без персональных аватаров — присутствие даёт один орб в шапке */
.dp-fp-msg{gap:0}
.dp-fp-msg .dp-fp-ava{display:none}
/* свой логотип в шапке (если задан в настройках) */
.dp-fp-logo{height:30px;max-width:220px;object-fit:contain;display:block;filter:drop-shadow(0 1px 8px rgba(0,0,0,.55))}