/* Виджет «Поддержка» (2026-09-30) — на всех страницах сайта; JS — widget.js, API — forward/support_player_api.php */
.sw-host{ position:fixed; right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); z-index:9000; font-family:Inter,system-ui,sans-serif; }
.sw-launcher{
  width:54px; height:54px; border-radius:50%; border:0; cursor:pointer; position:relative;
  background:linear-gradient(135deg,#29a3ab,#2b7fff); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px rgba(43,127,255,.35); transition:transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s;
}
.sw-launcher:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(43,127,255,.45); }
.sw-launcher svg{ width:23px; height:23px; fill:none; stroke:#fff; stroke-width:2; stroke-linejoin:round; }
.sw-unread{ position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:#ef4444; color:#fff; font:700 11px Inter,system-ui,sans-serif; display:flex; align-items:center; justify-content:center; border:2px solid #0a0e16; }
.sw-host.open .sw-launcher{ display:none; }

.sw-panel{
  width:min(378px,calc(100vw - 24px)); height:min(640px,calc(100dvh - 48px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#0d1320; border:1px solid rgba(255,255,255,.07); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.55); color:#e7edf2; font:14px Inter,system-ui,sans-serif;
}
.sw-panel.live{ position:absolute; right:0; bottom:0; opacity:0; transform:translateY(10px) scale(.98); transform-origin:bottom right; pointer-events:none; transition:opacity .2s, transform .2s cubic-bezier(.4,0,.2,1); }
.sw-host.open .sw-panel.live{ opacity:1; transform:none; pointer-events:auto; }
.sw-host .sw-panel.live{ visibility:hidden; } .sw-host.open .sw-panel.live{ visibility:visible; }

.sw-head{ padding:16px 16px 12px; border-bottom:1px solid rgba(255,255,255,.06); background:radial-gradient(420px 160px at 0% 0%,rgba(41,163,171,.14),transparent 70%); }
.sw-title-row{ display:flex; align-items:center; gap:10px; }
.sw-title{ font:700 19px Unbounded,system-ui,sans-serif; letter-spacing:-.01em; }
.sw-x{ margin-left:auto; width:30px; height:30px; border-radius:9px; border:0; background:none; color:#9fb2c0; cursor:pointer; font-size:14px; }
.sw-x:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sw-hours{ font-size:12px; color:#9fb2c0; margin-top:4px; }
.sw-ops{ display:flex; align-items:center; margin:12px 0; font-size:12.5px; color:#9fb2c0; min-height:24px; }
.sw-ops b{ color:#e7edf2; margin-left:8px; }
.sw-ops.sleep{ color:#e7edf2; font-weight:600; font-size:13px; }
.sw-avas{ display:flex; }
.sw-avas i{ width:24px; height:24px; border-radius:50%; margin-left:-6px; border:2px solid #0d1320; font:700 10px/20px Inter,system-ui,sans-serif; font-style:normal; text-align:center; color:#fff; position:relative; }
.sw-avas i:first-child{ margin-left:0; }
.sw-avas img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.sw-avas i{ background:linear-gradient(135deg,#29a3ab,#2b7fff); }
.sw-avas i:last-child::after{ content:''; position:absolute; right:-3px; bottom:-2px; width:8px; height:8px; border-radius:50%; background:#7fdca6; border:2px solid #0d1320; }
.sw-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:3px; border-radius:12px; background:rgba(255,255,255,.04); }
.sw-tabs button{ height:34px; border:0; border-radius:9px; background:none; color:#9fb2c0; font:600 13px Inter,system-ui,sans-serif; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:background .15s,color .15s; }
.sw-tabs button.on{ background:rgba(255,255,255,.08); color:#fff; }
.sw-tbadge{ min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#ef4444; color:#fff; font-size:10px; line-height:16px; }

.sw-body{ flex:1; overflow-y:auto; overscroll-behavior:contain; padding:14px 16px; scrollbar-width:thin; }
.sw-lbl{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#5e7585; margin:2px 0 6px; }
.sw-faq{ border-bottom:1px solid rgba(255,255,255,.06); }
.sw-faq .q{ display:flex; align-items:center; gap:10px; padding:13px 0; font-weight:600; cursor:pointer; }
.sw-faq .pm{ margin-left:auto; width:12px; height:12px; position:relative; flex:none; }
.sw-faq .pm::before,.sw-faq .pm::after{ content:''; position:absolute; background:#9fb2c0; border-radius:2px; transition:opacity .2s; }
.sw-faq .pm::before{ left:0; right:0; top:5px; height:2px; } .sw-faq .pm::after{ top:0; bottom:0; left:5px; width:2px; }
.sw-faq.open .pm::after{ opacity:0; }
.sw-faq .a{ display:none; padding:0 0 13px; color:#9fb2c0; font-size:13px; line-height:1.5; }
.sw-faq.open .a{ display:block; }

.sw-night{ text-align:center; padding:16px 12px 18px; margin-bottom:12px; border-radius:14px; background:rgba(43,127,255,.07); border:1px solid rgba(43,127,255,.18); display:flex; flex-direction:column; gap:6px; }
.sw-night .moon{ font-size:34px; } .sw-night span{ font-size:12.5px; color:#9fb2c0; line-height:1.5; }

.sw-foot{ padding:12px 16px 16px; border-top:1px solid rgba(255,255,255,.06); }
.sw-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.sw-chip{ padding:6px 11px; border-radius:999px; font-size:11.5px; font-weight:600; color:#c9d6df; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); cursor:pointer; }
.sw-chip:hover{ border-color:rgba(41,163,171,.45); }
.sw-cta{ width:100%; height:46px; border:0; border-radius:13px; cursor:pointer; background:linear-gradient(120deg,#29a3ab,#2b7fff); color:#fff; font:600 14px Inter,system-ui,sans-serif; box-shadow:0 8px 22px rgba(43,127,255,.28); transition:transform .1s; }
.sw-cta:active{ transform:scale(.98); }

.sw-chat{ display:flex; flex-direction:column; gap:8px; }
.sw-msg{ max-width:84%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.45; position:relative; }
.sw-msg .who{ font-size:11px; font-weight:700; color:#5fe3ff; margin-bottom:3px; }
.sw-msg .tm{ font-size:10.5px; opacity:.6; text-align:right; margin-top:3px; }
.sw-msg.op{ align-self:flex-start; background:rgba(255,255,255,.06); border-bottom-left-radius:4px; }
.sw-msg.me{ align-self:flex-end; background:linear-gradient(120deg,#1f7f86,#2463c9); border-bottom-right-radius:4px; }
.sw-msg.img .shot{ width:170px; height:100px; border-radius:9px; background:repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 8px,rgba(255,255,255,.03) 8px 16px); display:flex; align-items:flex-end; padding:6px; font-size:11px; }
.sw-day{ align-self:center; font-size:11px; color:#5e7585; }
.sw-sys{ align-self:center; font-size:11.5px; color:#5e7585; padding:3px 10px; border-radius:999px; background:rgba(255,255,255,.03); }
.sw-typing{ font-size:12px; color:#5e7585; display:flex; align-items:center; gap:3px; }
.sw-typing i{ width:5px; height:5px; border-radius:50%; background:#5e7585; animation:swb 1s infinite; } .sw-typing i:nth-child(2){ animation-delay:.15s; } .sw-typing i:nth-child(3){ animation-delay:.3s; margin-right:5px; }
@keyframes swb{ 0%,60%,100%{ transform:none; opacity:.5 } 30%{ transform:translateY(-3px); opacity:1 } }
.sw-topics{ display:flex; flex-wrap:wrap; gap:6px; }
.sw-topics button{ padding:7px 11px; border-radius:999px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#c9d6df; font:600 12px Inter,system-ui,sans-serif; cursor:pointer; }
.sw-topics button.on{ border-color:rgba(41,163,171,.6); background:rgba(41,163,171,.16); color:#fff; }
.sw-wait{ font-size:12px; color:#9fb2c0; }
.sw-hint{ padding:10px 12px; border-radius:12px; background:rgba(240,198,90,.06); border:1px solid rgba(240,198,90,.2); display:flex; flex-direction:column; gap:5px; font-size:12.5px; }
.sw-hint .t{ font-weight:700; color:#f0c65a; } .sw-hint a{ color:#c9d6df; cursor:pointer; }
.sw-status{ font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; }
.sw-status.work{ background:rgba(43,127,255,.16); color:#8fb8ff; }
.sw-rate{ display:flex; align-items:center; gap:8px; padding:8px 16px; font-size:12.5px; color:#9fb2c0; border-top:1px solid rgba(255,255,255,.06); }
.sw-rate button{ border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); border-radius:9px; padding:3px 9px; cursor:pointer; }
.sw-composer{ display:flex; align-items:flex-end; gap:8px; padding:10px 12px 12px; border-top:1px solid rgba(255,255,255,.06); }
.sw-composer textarea{ flex:1; resize:none; height:40px; max-height:120px; padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.25); color:#e7edf2; font:13.5px Inter,system-ui,sans-serif; outline:none; }
.sw-composer textarea:focus{ border-color:rgba(41,163,171,.45); }
.sw-clip,.sw-send{ width:40px; height:40px; flex:none; border-radius:12px; border:0; cursor:pointer; font-size:15px; }
.sw-clip{ background:rgba(255,255,255,.05); color:#9fb2c0; }
.sw-send{ background:linear-gradient(120deg,#29a3ab,#2b7fff); color:#fff; }
@media (pointer:coarse){ .sw-composer textarea{ font-size:16px; } }
@media (prefers-reduced-motion:reduce){ .sw-panel.live,.sw-launcher,.sw-typing i{ transition:none; animation:none; } }

/* скрытое (вкладки, пустой счётчик непрочитанных) не должно перебиваться display:flex */
.sw-host [hidden]{ display:none !important; }

/* должность из «Состава» после ника, цвет — цвет должности */
.sw-role{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; vertical-align:1px; color:var(--rc); background:color-mix(in srgb,var(--rc) 16%,transparent); border:1px solid color-mix(in srgb,var(--rc) 40%,transparent); }

/* карточка наказания в теме «Бан или мут» */
.sw-ban{ border-radius:13px; padding:11px 12px; background:rgba(232,64,64,.07); border:1px solid rgba(232,64,64,.28); font-size:12.5px; display:flex; flex-direction:column; gap:5px; }
.sw-ban .top{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.sw-ban .kind{ font-size:10px; font-weight:800; letter-spacing:.06em; padding:2px 7px; border-radius:6px; background:#e84040; color:#fff; }
.sw-ban .left{ margin-left:auto; color:#ffb0b0; font-weight:600; }
.sw-ban .row{ display:flex; gap:8px; } .sw-ban .row span{ width:64px; flex:none; color:#5e7585; }
.sw-banact{ display:flex; flex-direction:column; gap:6px; }
.sw-banact button{ text-align:left; padding:9px 12px; border-radius:11px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); color:#c9d6df; font:600 12.5px Inter,system-ui,sans-serif; cursor:pointer; }
.sw-banact button.on{ border-color:rgba(41,163,171,.6); background:rgba(41,163,171,.14); color:#fff; }

/* ── живой виджет: доп. элементы ── */
.sw-host *{ box-sizing:border-box; }
.sw-host button{ font-family:inherit; }
.sw-body{ white-space:normal; }
.sw-msg .txt{ white-space:pre-wrap; word-break:break-word; }
.sw-msg .imgs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.sw-msg .imgs a{ display:block; width:96px; height:72px; border-radius:8px; overflow:hidden; background:rgba(0,0,0,.25); }
.sw-msg .imgs img{ width:100%; height:100%; object-fit:cover; display:block; }
.sw-msg.bot .who{ color:#7fdca6; }
.sw-empty{ text-align:center; color:#5e7585; font-size:12.5px; padding:24px 8px; }
.sw-login{ margin:auto 0; text-align:center; display:flex; flex-direction:column; gap:12px; align-items:center; padding:24px 10px; color:#9fb2c0; font-size:13px; }
.sw-login b{ color:#e7edf2; font-size:15px; }
.sw-login a{ display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:12px; background:linear-gradient(120deg,#29a3ab,#2b7fff); color:#fff; font-weight:600; text-decoration:none; }
.sw-ticketbar{ display:flex; align-items:center; gap:8px; font-size:12px; color:#9fb2c0; padding:0 0 4px; }
.sw-ticketbar b{ color:#e7edf2; }
.sw-status.new{ background:rgba(232,64,64,.16); color:#ff8a8a; }
.sw-status.wait{ background:rgba(240,190,60,.16); color:#f0c65a; }
.sw-status.done{ background:rgba(60,200,120,.14); color:#7fdca6; }
.sw-done{ display:flex; flex-direction:column; gap:8px; padding:10px 16px 14px; border-top:1px solid rgba(255,255,255,.06); }
.sw-done .sw-rate{ border:0; padding:0; }
.sw-rate button.on{ border-color:rgba(41,163,171,.6); background:rgba(41,163,171,.16); }
.sw-files{ display:flex; gap:6px; flex-wrap:wrap; padding:0 12px; }
.sw-files span{ font-size:11px; padding:4px 8px; border-radius:8px; background:rgba(255,255,255,.06); color:#c9d6df; cursor:pointer; }
.sw-files span::after{ content:' ✕'; opacity:.6; }
.sw-err{ margin:0 12px; padding:7px 10px; border-radius:9px; font-size:12px; background:rgba(232,64,64,.1); color:#ffb0b0; }
.sw-composer textarea:disabled,.sw-send:disabled{ opacity:.5; }
.sw-hint a{ text-decoration:none; }
.sw-hint .ans{ display:none; color:#9fb2c0; font-size:12px; line-height:1.45; padding:2px 0 4px; }
.sw-hint .it.open .ans{ display:block; }
.sw-avas img{ display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.sw-avas i{ background:linear-gradient(135deg,#29a3ab,#2b7fff); }
.sw-ban + .sw-ban{ margin-top:6px; }
.sw-role{ display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:10px; font-weight:700; vertical-align:1px; color:var(--rc,#29a3ab); background:rgba(41,163,171,.12); border:1px solid rgba(41,163,171,.35); }
@supports (background:color-mix(in srgb,red 10%,transparent)){
  .sw-role{ background:color-mix(in srgb,var(--rc,#29a3ab) 16%,transparent); border-color:color-mix(in srgb,var(--rc,#29a3ab) 40%,transparent); }
}
@media (max-width:520px){
  .sw-host.open{ left:8px; right:8px; bottom:8px; }
  .sw-host.open .sw-panel.live{ width:100%; height:calc(100dvh - 16px); }
  .sw-launcher{ width:50px; height:50px; }
}

/* открыт «Чат сайта» — поддержка уходит под него (кнопка перекрывала поле ввода чата) */
html.chat-panel-open .sw-host{ display:none; }