/* Виджет поддержки (components/support-widget.html). Вынесен из инлайна шаблона:
   кешируется на год через asset(), а не приезжает ~14 КБ в каждой странице. */
#wc-root{position:fixed;right:1.25rem;bottom:calc(1.25rem + var(--cookie-lift,0px));transition:bottom .25s ease;z-index:9998;font-family:var(--font-sans,inherit);
  --wc-line:rgba(255,255,255,.08);--wc-line2:rgba(255,255,255,.15);--wc-av:#151515;
  --wc-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.07)}
[data-theme="light"] #wc-root{--wc-line:rgba(0,0,0,.08);--wc-line2:rgba(0,0,0,.16);--wc-av:#141414;
  --wc-shadow:0 24px 64px rgba(20,20,40,.16),0 0 0 1px rgba(0,0,0,.07)}
#wc-root [hidden]{display:none!important}
#wc-root svg.wc-ic{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── кнопка чата ── */
#wc-launcher{width:52px;height:52px;border-radius:15px;border:0;cursor:pointer;background:var(--gold);color:#0a0a0a;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.32),0 0 0 1px var(--gold-border);transition:transform .16s ease,filter .16s ease;position:relative}
#wc-launcher:hover{transform:translateY(-2px);filter:brightness(1.06)}
#wc-launcher svg.wc-ic{width:23px;height:23px}
#wc-launcher .wc-i-x{display:none}
#wc-launcher.open .wc-i-x{display:block}
#wc-launcher.open .wc-i-chat{display:none}
#wc-launcher .wc-dot{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font-size:.68rem;font-weight:600;display:none;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
#wc-launcher.has-unread .wc-dot{display:flex}

/* ── «Нужна помощь?» ── */
#wc-nudge{position:absolute;right:0;bottom:66px;background:var(--bg-2);border:1px solid var(--wc-line2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.3);padding:.6rem .85rem .6rem .75rem;display:flex;align-items:center;gap:.55rem;cursor:pointer;transform-origin:bottom right;animation:wc-nudge-in .3s ease}
#wc-nudge .wc-nudge-dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0;box-shadow:0 0 0 3px var(--gold-bg);animation:wc-pulse 1.9s ease-in-out infinite}
#wc-nudge .wc-nudge-txt{font-size:.85rem;font-weight:500;color:var(--text);white-space:nowrap}
#wc-nudge .wc-nudge-x{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--bg-2);border:1px solid var(--wc-line2);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#wc-nudge .wc-nudge-x:hover{color:var(--text)}
#wc-nudge .wc-nudge-x svg.wc-ic{width:11px;height:11px}
@keyframes wc-nudge-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@keyframes wc-pulse{0%,100%{box-shadow:0 0 0 3px rgba(212,168,83,.16)}50%{box-shadow:0 0 0 5px rgba(212,168,83,.05)}}

/* ── окно ── */
#wc-panel{position:absolute;right:0;bottom:66px;width:372px;max-width:calc(100vw - 2.5rem);height:560px;max-height:calc(100vh - 7rem);background:var(--bg-2);border-radius:14px;box-shadow:var(--wc-shadow);display:flex;flex-direction:column;overflow:hidden;transform-origin:bottom right;animation:wc-in .16s ease;color:var(--text)}
@keyframes wc-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.wc-head{height:54px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 8px 0 16px;border-bottom:1px solid var(--wc-line)}
.wc-head .wc-mark{width:18px;height:18px;color:var(--gold);flex-shrink:0}
.wc-title{flex:1;min-width:0;font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-pill{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;color:var(--text-dim);border:1px solid var(--wc-line);border-radius:999px;padding:3px 9px 3px 8px;white-space:nowrap}
.wc-online{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0}
.wc-ibtn{width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:var(--text-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:.14s}
.wc-ibtn:hover{background:var(--hover-bg);color:var(--text)}
.wc-ibtn:disabled{opacity:.45;cursor:not-allowed}
/* Колокольчик: уведомления об ответе включены — золотой и залитый */
#wc-bell.on{color:var(--gold)}
#wc-bell.on .wc-bell-b{fill:currentColor}

/* ── анкета: имя → почта ── */
.wc-in{flex:1;min-height:0;overflow-y:auto;padding:24px 22px 18px;display:flex;flex-direction:column}
.wc-h{margin:0;font-size:1.19rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.wc-lead{margin:7px 0 0;font-size:.84rem;line-height:1.55;color:var(--text-dim)}
.wc-stepper{display:flex;gap:10px;margin:24px 0 20px}
.wc-stepper div{flex:1;border-top:2px solid var(--wc-line2);padding-top:9px;font-size:.75rem;color:var(--text-muted);display:flex;gap:8px;transition:.2s}
.wc-stepper span{font-family:var(--font-mono,monospace);font-size:.72rem}
.wc-stepper div.on{border-color:var(--gold);color:var(--text)}
.wc-step{display:flex;flex-direction:column;animation:wc-in .16s ease}
.wc-step label{font-size:.78rem;font-weight:500;color:var(--text-dim);margin-bottom:7px}
.wc-step input{width:100%;height:42px;border-radius:9px;border:1px solid var(--wc-line2);background:transparent;color:var(--text);font:inherit;font-size:.9rem;padding:0 12px;transition:border-color .14s,box-shadow .14s}
.wc-step input::placeholder{color:var(--text-muted)}
.wc-step input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-bg)}
.wc-step input.bad{border-color:var(--red,#ef4444)}
.wc-hint{font-size:.75rem;line-height:1.45;color:var(--text-muted);margin-top:8px}
.wc-err{font-size:.75rem;color:var(--red,#ef4444);margin-top:6px;min-height:1em}
.wc-btns{display:flex;gap:8px;margin-top:10px}
/* Кнопки — в золоте сайта, как «Заказать сервер» */
.wc-btn{flex:1;height:42px;border-radius:9px;border:0;background:var(--gold);color:#0a0a0a;font:inherit;font-size:.875rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:filter .14s}
.wc-btn:hover{filter:brightness(1.07)}
.wc-btn svg.wc-ic{width:16px;height:16px}
.wc-btn-ghost{height:42px;border-radius:9px;border:1px solid var(--wc-line2);background:transparent;color:var(--text-dim);font:inherit;font-size:.86rem;font-weight:500;padding:0 16px;cursor:pointer;transition:.14s}
.wc-btn-ghost:hover{color:var(--text);border-color:var(--gold-dim)}
.wc-priv{margin-top:auto;display:flex;gap:8px;align-items:flex-start;font-size:.75rem;line-height:1.5;color:var(--text-muted);padding-top:14px;border-top:1px solid var(--wc-line)}
.wc-priv svg.wc-ic{width:15px;height:15px;margin-top:1px}

/* ── переписка: строки как в Slack, без облачков ── */
.wc-feed{flex:1;min-height:0;overflow-y:auto;padding:10px 0 8px;display:flex;flex-direction:column}
.wc-feed::-webkit-scrollbar{width:7px}
.wc-feed::-webkit-scrollbar-thumb{background:var(--bg-5);border-radius:4px}
.wc-row{display:flex;gap:11px;padding:7px 16px 3px}
.wc-row.cont{padding-top:0}
.wc-row.cont .wc-av{visibility:hidden;height:0}
.wc-av{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:600}
.wc-av.brand{background:var(--wc-av);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-border)}
.wc-av.brand svg{width:17px;height:17px}
.wc-av.staff{background:var(--gold-bg);color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-border)}
.wc-av.me{background:var(--bg-5);color:var(--text)}
.wc-body{flex:1;min-width:0}
.wc-who{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:.8rem;line-height:1.3}
.wc-who b{font-weight:600;color:var(--text)}
.wc-tag{font-size:.66rem;font-weight:600;letter-spacing:.02em;color:var(--text-muted);border:1px solid var(--wc-line2);border-radius:5px;padding:0 5px;line-height:1.45}
.wc-tag.ai{color:var(--gold);border-color:var(--gold-border)}
.wc-who time{font-size:.72rem;color:var(--text-muted)}
.wc-text{margin-top:2px;font-size:.875rem;line-height:1.55;color:var(--text);white-space:pre-wrap;word-break:break-word}
.wc-row.mine .wc-text{color:var(--text-dim)}
.wc-row.cont .wc-text{margin-top:0}
.wc-img{display:block;max-width:100%;max-height:220px;margin-top:5px;border-radius:10px;border:1px solid var(--wc-line);cursor:pointer;object-fit:cover}
/* Файл (лог, конфиг, PDF) — плашка со скачиванием, без превью */
.wc-file{display:inline-flex;align-items:center;gap:10px;max-width:100%;margin-top:5px;padding:8px 14px 8px 10px;border:1px solid var(--wc-line2);border-radius:10px;color:var(--text);text-decoration:none;transition:border-color .14s}
.wc-file:hover{border-color:var(--gold-dim)}
.wc-file svg.wc-ic{width:20px;height:20px;color:var(--gold)}
.wc-file-b{display:flex;flex-direction:column;min-width:0}
.wc-file-n{font-size:.84rem;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wc-file-s{font-size:.72rem;color:var(--text-muted)}
.wc-sysline{display:flex;align-items:center;gap:10px;margin:4px 16px 8px;font-size:.72rem;color:var(--text-muted);white-space:nowrap;min-width:0}
.wc-sysline::before,.wc-sysline::after{content:'';flex:1;height:1px;background:var(--wc-line);min-width:12px}
.wc-sysline span{overflow:hidden;text-overflow:ellipsis}
.wc-sysline b{color:var(--text-dim);font-weight:500}
.wc-sysline button{background:none;border:0;padding:0;color:var(--gold);font:inherit;cursor:pointer}
.wc-sysline button:hover{text-decoration:underline}
/* Предложение включить уведомления / итог — плашка в ленте */
.wc-note{display:flex;align-items:center;gap:10px;margin:6px 16px 10px;padding:9px 12px;border:1px solid var(--wc-line2);border-radius:10px;font-size:.78rem;line-height:1.45;color:var(--text-dim)}
.wc-note svg.wc-ic{width:16px;height:16px;color:var(--gold)}
.wc-note span{flex:1;min-width:0;word-break:break-word}
.wc-note button{flex-shrink:0;height:28px;border-radius:7px;border:0;background:var(--gold);color:#0a0a0a;font:inherit;font-size:.75rem;font-weight:600;padding:0 11px;cursor:pointer;transition:filter .14s}
.wc-note button:hover{filter:brightness(1.07)}
/* Опрос из поддержки: пять звёзд или свои варианты ответа, ответ — одним нажатием */
.wc-poll{margin-top:8px}
.wc-poll.busy{opacity:.6;pointer-events:none}
.wc-stars{display:flex;gap:2px}
.wc-star{width:36px;height:36px;padding:4px;border:0;border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;transition:color .12s,transform .12s}
.wc-star svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.wc-stars:not(.done):hover .wc-star{color:var(--gold)}
.wc-stars:not(.done):hover .wc-star svg{fill:currentColor}
.wc-stars:not(.done) .wc-star:hover ~ .wc-star{color:var(--text-muted)}
.wc-stars:not(.done) .wc-star:hover ~ .wc-star svg{fill:none}
.wc-stars:not(.done) .wc-star:hover{transform:scale(1.1)}
.wc-star:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.wc-star.on{color:var(--gold)}
.wc-star.on svg{fill:currentColor}
.wc-star:disabled{cursor:default}
.wc-opts{display:flex;flex-direction:column;gap:6px}
.wc-opt{display:flex;align-items:center;gap:8px;width:100%;min-height:38px;padding:7px 12px;border-radius:9px;border:1px solid var(--wc-line2);background:transparent;color:var(--text);font:inherit;font-size:.85rem;line-height:1.4;text-align:left;cursor:pointer;transition:border-color .14s,background .14s}
.wc-opt:hover:not(:disabled){border-color:var(--gold-dim)}
.wc-opt:focus-visible{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-bg)}
.wc-opt svg.wc-ic{width:15px;height:15px;color:var(--gold)}
.wc-opt.on{border-color:var(--gold);background:var(--gold-bg)}
.wc-opt:disabled{cursor:default}
.wc-opt:disabled:not(.on){opacity:.45}
.wc-poll-ok{margin-top:6px;font-size:.75rem;color:var(--text-muted)}
.wc-typing .wc-who{color:var(--text-muted)}
.wc-dots{display:inline-flex;gap:3px;margin-left:2px;transform:translateY(-1px)}
.wc-dots i{width:4px;height:4px;border-radius:50%;background:var(--text-muted);animation:wc-tp 1.2s infinite ease-in-out}
.wc-dots i:nth-child(2){animation-delay:.15s}.wc-dots i:nth-child(3){animation-delay:.3s}
@keyframes wc-tp{0%,60%,100%{opacity:.3}30%{opacity:1}}

.wc-closed{padding:11px 16px;text-align:center;color:var(--text-muted);font-size:.78rem;line-height:1.5;border-top:1px solid var(--wc-line)}

/* ── поле ввода ── */
.wc-cbox{border-top:1px solid var(--wc-line);flex-shrink:0}
.wc-cbox textarea{display:block;width:100%;resize:none;max-height:120px;border:0;background:transparent;color:var(--text);font:inherit;font-size:.875rem;line-height:1.45;padding:12px 16px 6px}
.wc-cbox textarea:focus{outline:0}
.wc-cbox textarea::placeholder{color:var(--text-muted)}
.wc-tb{display:flex;align-items:center;gap:6px;padding:2px 10px 10px 8px}
.wc-kbd{font-size:.72rem;color:var(--text-muted)}
.wc-kbd kbd{font-family:inherit;font-size:.68rem;border:1px solid var(--wc-line2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin-right:3px}
.wc-send{margin-left:auto;width:32px;height:32px;border-radius:8px;border:0;background:var(--gold);color:#0a0a0a;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:filter .14s}
.wc-send:hover{filter:brightness(1.07)}
.wc-send:disabled{opacity:.4;cursor:not-allowed}
.wc-send svg.wc-ic{width:16px;height:16px;stroke-width:2.4}

@media (max-width:480px){
  #wc-root{right:.9rem;bottom:calc(.9rem + var(--cookie-lift,0px))}
  #wc-panel{width:calc(100vw - 1.8rem);height:calc(100vh - 6rem)}
  /* < 16px — iOS Safari зумит страницу при фокусе на поле */
  .wc-step input,.wc-cbox textarea{font-size:16px}
  .wc-kbd{display:none}
}
/* Узкий экран: от плашки «Онлайн» остаётся точка — иначе режется заголовок */
@media (max-width:400px){
  .wc-pill{padding:6px;border-color:transparent}
  .wc-pill-t{display:none}
}
@media (prefers-reduced-motion:reduce){ #wc-nudge,#wc-panel,.wc-step{animation:none} #wc-nudge .wc-nudge-dot,.wc-dots i{animation:none} }