/* Бриф «Обсудить проект»: окно поверх страницы дизайна, палитра вселенной дизайна */
/* прокрутку страницы под окнами держит DzLock (dizain.js) без overflow:hidden: полоса прокрутки
   не исчезает, ширина и закреплённые блоки не меняются, страница стоит на месте;
   место под полосу всё равно закреплено на случай меню и других слоёв */
html{scrollbar-gutter:stable;}
html.bf-lock{background:#09061A;}
html.vr-open{background:#07060D;}
.bf{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;color:#F4F1FF;font-family:"Inter Tight",Arial,sans-serif;-webkit-font-smoothing:antialiased;}
.bf[hidden]{display:none;}
.bf *{box-sizing:border-box;}
.bf-veil{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 0%,rgba(107,76,255,.32),transparent 60%),rgba(9,6,26,.86);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);}
.bf-panel{position:relative;display:flex;flex-direction:column;width:min(820px,100%);max-height:min(880px,100%);border-radius:30px;overflow:hidden;
  background:radial-gradient(90% 60% at 100% 0%,rgba(107,76,255,.28),transparent 62%),radial-gradient(70% 50% at 0% 100%,rgba(195,181,255,.12),transparent 60%),linear-gradient(180deg,#171040,#0E0A24);
  border:1px solid rgba(195,181,255,.2);box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);}

/* шапка: подпись, прогресс по шагам и крестик */
.bf-head{display:flex;align-items:center;gap:18px;padding:22px 26px 18px 32px;border-bottom:1px solid rgba(255,255,255,.07);}
.bf-kick{font:500 12px/1 "JetBrains Mono",monospace;color:#B3A3FF;letter-spacing:.02em;white-space:nowrap;}
.bf-prog{flex:1;display:flex;gap:6px;min-width:0;}
.bf-prog i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.12);position:relative;overflow:hidden;}
.bf-prog i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#6B4CFF,#C3B5FF);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.bf-prog i.is-done::after{transform:none;}
.bf-prog i.is-cur::after{transform:scaleX(.5);}
.bf.is-final .bf-prog i::after{transform:none;}
.bf-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#F4F1FF;cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .5s cubic-bezier(.2,.9,.2,1.3);}
.bf-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;}
.bf-x:hover{background:rgba(195,181,255,.18);transform:rotate(90deg);}

/* тело: шаги сменяют друг друга со сдвигом и размытием */
.bf-body{position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:34px 40px 30px;scrollbar-width:thin;scrollbar-color:rgba(195,181,255,.3) transparent;}
.bf-step{padding:0 0 4px;}
.bf-q-n{font:500 12px/1.2 "JetBrains Mono",monospace;color:#B3A3FF;margin:0 0 16px;letter-spacing:.02em;}
.bf-t{text-wrap:balance;font:600 clamp(28px,3.4vw,44px)/1.06 "Inter Tight",Arial,sans-serif;letter-spacing:-.03em;margin:0 0 14px;color:#F4F1FF;}
.bf-t em,.bf-sub em{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.02em;color:#C3B5FF;}
.bf-sub{text-wrap:balance;font-size:17px;line-height:1.5;color:rgba(244,241,255,.7);margin:0 0 26px;max-width:600px;}
.bf-hints{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px;}
.bf-hints li{position:relative;padding-left:22px;font-size:16px;line-height:1.45;color:rgba(244,241,255,.72);}
.bf-hints li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:50%;border:1.5px solid #B3A3FF;}

/* поля */
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;margin-bottom:20px;}
.bf-f{display:flex;flex-direction:column;gap:8px;min-width:0;}
.bf-wide{grid-column:1/-1;}
.bf-l{font:500 12px/1.2 "JetBrains Mono",monospace;color:rgba(244,241,255,.72);letter-spacing:.01em;}
.bf-l b{color:#C3B5FF;font-weight:500;}
.bf-l i{font-style:normal;color:rgba(244,241,255,.38);margin-left:4px;}
.bf input:not(.bf-hp),.bf textarea{width:100%;font:400 17px/1.35 "Inter Tight",Arial,sans-serif;color:#F4F1FF;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:16px 18px;outline:none;transition:border-color .25s,background .25s,box-shadow .25s;-webkit-appearance:none;appearance:none;}
.bf input:not(.bf-hp){height:56px;}
.bf textarea{min-height:104px;resize:vertical;}
.bf input::placeholder,.bf textarea::placeholder{color:rgba(244,241,255,.32);}
.bf input:not(.bf-hp):focus,.bf textarea:focus{border-color:#B3A3FF;background:rgba(195,181,255,.07);box-shadow:0 0 0 4px rgba(107,76,255,.22);}
.bf-f.is-err input{border-color:#FF8BA7;box-shadow:0 0 0 4px rgba(255,90,130,.14);}
.bf-err{font-size:13.5px;line-height:1.3;color:#FFB3C4;min-height:0;}
.bf-err:empty{display:none;}
.bf-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;}
.bf-msg{display:flex;gap:8px;}
.bf-msg input{flex:1;min-width:0;}
.bf-tabs{flex:none;display:flex;padding:4px;gap:2px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);height:56px;}
.bf-tabs button{border:0;border-radius:10px;padding:0 12px;font:600 14px/1 "Inter Tight",Arial,sans-serif;color:rgba(244,241,255,.6);background:transparent;cursor:pointer;transition:background .3s,color .3s;}
.bf-tabs button[aria-selected="true"]{background:#C3B5FF;color:#0E0A24;}
.bf-consent{font-size:13.5px;line-height:1.5;color:rgba(244,241,255,.5);margin:4px 0 0;}
.bf-consent a{color:#C3B5FF;text-decoration:underline;text-decoration-color:rgba(195,181,255,.4);text-underline-offset:3px;}

/* варианты-чипсы */
.bf-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px;}
.bf-chip{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.035);color:#F4F1FF;font:500 15.5px/1.2 "Inter Tight",Arial,sans-serif;text-align:left;cursor:pointer;transition:background .3s,border-color .3s,color .3s,transform .45s cubic-bezier(.2,.9,.2,1.4);}
.bf-chip:hover{border-color:rgba(195,181,255,.55);background:rgba(195,181,255,.08);}
.bf-chip:active{transform:scale(.96);}
.bf-chip[aria-pressed="true"]{background:#C3B5FF;border-color:#C3B5FF;color:#0E0A24;}
.bf-chip[aria-pressed="true"]::after{content:"";width:6px;height:11px;margin-left:2px;border:solid #0E0A24;border-width:0 2px 2px 0;transform:translateY(-2px) rotate(45deg);}
.bf-sw{flex:none;width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.4);}
.bf-sw-bw{background:linear-gradient(135deg,#fff 50%,#000 50%);}
.bf-sw-any{background:conic-gradient(#FF4D6D,#FFC24B,#5BD38A,#4B8BFF,#B36BFF,#FF4D6D);}
.bf-group{margin:4px 0 4px;}
.bf-group .bf-l{display:block;margin-bottom:10px;}
.bf-text{margin-top:4px;}

/* подвал окна */
.bf-foot{display:flex;align-items:center;gap:12px;padding:18px 26px 22px 32px;border-top:1px solid rgba(255,255,255,.07);background:linear-gradient(180deg,rgba(14,10,36,0),rgba(14,10,36,.6));}
.bf-sp{flex:1;}
.bf-back,.bf-skip{height:52px;padding:0 20px;border-radius:999px;font:600 15px/1 "Inter Tight",Arial,sans-serif;color:#F4F1FF;cursor:pointer;transition:background .3s,border-color .3s,color .3s;}
.bf-back{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.16);background:transparent;}
.bf-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-left:-4px;}
.bf-retry svg,.bf-retry::before{display:none;}
.bf-back:hover{background:rgba(255,255,255,.07);}
.bf-skip{border:0;background:transparent;color:rgba(244,241,255,.6);text-decoration:underline;text-decoration-color:rgba(244,241,255,.25);text-underline-offset:4px;}
.bf-skip:hover{color:#F4F1FF;}
.bf-back[hidden],.bf-skip[hidden],.bf-next[hidden]{display:none;}
.bf-next{white-space:nowrap;position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 34px;border:0;border-radius:999px;background:#C3B5FF;color:#0E0A24;font:700 16.5px/1 "Inter Tight",Arial,sans-serif;cursor:pointer;overflow:hidden;isolation:isolate;box-shadow:0 12px 40px rgba(107,76,255,.35);transition:transform .5s cubic-bezier(.2,.9,.2,1.25),box-shadow .5s,background .4s;}
.bf-next::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 48%,transparent 66%);transform:translateX(-130%);transition:transform .9s cubic-bezier(.2,.8,.2,1);}
.bf-next:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(107,76,255,.5);}
.bf-next:hover::before{transform:translateX(130%);}
.bf-next:disabled{cursor:progress;}
.bf.is-busy .bf-foot .bf-next span{opacity:0;}
.bf.is-busy .bf-foot .bf-next::after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(14,10,36,.25);border-top-color:#0E0A24;animation:bf-spin .8s linear infinite;}
@keyframes bf-spin{to{transform:rotate(360deg);}}
.bf.is-final .bf-foot{display:none;}

/* финал: печать-галочка рисуется линией */
.bf-final{display:flex;flex-direction:column;align-items:center;text-align:center;padding:30px 0 20px;}
.bf-final .bf-sub{margin-left:auto;margin-right:auto;}
.bf-seal{width:108px;height:108px;margin-bottom:22px;}
.bf-seal svg{width:100%;height:100%;fill:none;stroke:#C3B5FF;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.bf-seal circle{stroke:rgba(195,181,255,.35);stroke-dasharray:1;stroke-dashoffset:1;animation:bf-draw 1s .35s cubic-bezier(.6,0,.2,1) forwards;}
.bf-seal path{stroke-dasharray:1;stroke-dashoffset:1;animation:bf-draw .6s 1.1s cubic-bezier(.6,0,.2,1) forwards;}
.bf-seal.is-warn svg{stroke:#FFB3C4;}
.bf-seal.is-warn circle{stroke:rgba(255,179,196,.35);}
@keyframes bf-draw{to{stroke-dashoffset:0;}}
.bf-fail-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.bf-copied{font-size:14px;color:#C3B5FF;min-height:20px;margin:16px 0 0;}

/* телефон: окно на весь экран, кнопки внизу у большого пальца */
@media (max-width:640px){
  .bf{padding:0;align-items:stretch;}
  .bf-panel{width:100%;max-height:none;height:100%;border-radius:0;border:0;}
  .bf-head{padding:calc(14px + env(safe-area-inset-top)) 14px 12px 20px;gap:12px;}
  .bf-kick{display:none;}
  .bf-body{padding:24px 20px 22px;}
  .bf-t{font-size:clamp(27px,8vw,34px);}
  .bf-sub{font-size:16px;margin-bottom:22px;}
  .bf-grid{grid-template-columns:1fr;gap:14px;}
  .bf-msg{flex-direction:column;}
  .bf-tabs{height:48px;}
  .bf-tabs button{flex:1;}
  .bf-chip{min-height:44px;font-size:15px;padding:10px 15px;}
  .bf-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:6px;}
  .bf-foot .bf-back{width:52px;padding:0;justify-content:center;}
  .bf-foot .bf-back span{display:none;}
  .bf-foot .bf-back svg{margin:0;}
  .bf-skip{padding:0 10px;}
  .bf-next{padding:0 24px;height:54px;}
  .bf-final{padding-top:12vh;}
}
@media (prefers-reduced-motion:reduce){
  .bf *{animation-duration:.01ms!important;transition-duration:.01ms!important;}
  .bf-seal circle,.bf-seal path{stroke-dashoffset:0;}
}
.bf-fail-cta .bf-retry{height:56px;padding:0 22px;}
