/* =====================================================================
   E — Приятели, чат в игра, доклади, история, поддръжка (.so- / .sp-)
   ===================================================================== */

/* ---------- приятели ---------- */
.so-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start}
@media (max-width:900px){ .so-layout{grid-template-columns:minmax(0,1fr)} }
.so-main{min-width:0; display:flex; flex-direction:column; gap:16px}
.so-ftabs{align-self:flex-start}
.so-guest{display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap; border-color:rgba(255,197,61,.4)}
.so-guest > .pi{width:34px; height:34px; color:var(--paccent)}
.so-guest > div{flex:1 1 220px; min-width:0}
.so-guest p{margin:4px 0 0}
.so-h{font:700 12px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--pmuted); margin:6px 0 2px}
.so-count{margin:0; font-size:14px}
.so-oncount{color:var(--pgood)}
.so-list{display:flex; flex-direction:column; gap:8px}
.so-user{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--pline); min-width:0; animation:soIn .35s var(--pease) both}
.so-list .so-user:nth-child(2){animation-delay:.03s} .so-list .so-user:nth-child(3){animation-delay:.06s} .so-list .so-user:nth-child(4){animation-delay:.09s} .so-list .so-user:nth-child(n+5){animation-delay:.12s}
@keyframes soIn{from{opacity:0; transform:translateY(8px)}}
.so-user:hover{border-color:var(--pline2)}
.so-ava{position:relative; display:block; flex:0 0 auto; border-radius:50%}
.so-ava::after{content:''; position:absolute; right:0; bottom:0; width:13px; height:13px; border-radius:50%; background:#6b7699; box-shadow:0 0 0 3px var(--pcard)}
.so-ava.on::after{background:var(--pgood); animation:soPulse 2.4s ease-in-out infinite}
@keyframes soPulse{50%{box-shadow:0 0 0 3px var(--pcard), 0 0 0 6px rgba(63,210,138,.25)}}
.so-uinfo{flex:1 1 auto; min-width:0}
.so-uname{display:flex; align-items:center; gap:6px; color:var(--ptext); text-decoration:none; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.so-uname:hover{color:var(--paccent)}
.so-vip{padding:1px 7px; font-size:10px}
.so-usub{font-size:13px; color:var(--pmuted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.so-pres.on{color:var(--pgood)}
.so-uact{display:flex; align-items:center; gap:6px; flex:0 0 auto}
.so-more{width:40px; height:40px}
@media (max-width:520px){
  .so-hide-s{display:none}
  .so-user{padding:10px; gap:10px; flex-wrap:wrap}
  .so-uinfo{flex-basis:calc(100% - 70px)}
  .so-uact{margin-left:auto}
  .so-user .pava{--s:42px!important}
}
.so-search{position:relative; display:block}
.so-search .pi{position:absolute; left:14px; top:50%; translate:0 -50%; color:var(--pmuted)}
.so-search input{padding-left:42px}
.so-results{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.so-invite{position:relative; overflow:hidden}
.so-invite::before{content:''; position:absolute; right:-40px; top:-40px; width:140px; height:140px; border-radius:50%; background:radial-gradient(circle, rgba(255,197,61,.25), transparent 70%)}
.so-invite-ic{display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:rgba(255,197,61,.15); color:var(--paccent); font-size:22px; margin-bottom:10px}
.so-invite p{margin:6px 0 12px; font-size:14px; line-height:1.5}
.so-linkbox{display:flex; gap:8px; flex-wrap:wrap}
.so-linkbox input{flex:1 1 160px; min-width:0; font-size:14px}
.so-nolink{margin:0; padding:10px 12px; border-radius:10px; border:1px dashed var(--pline2); color:var(--pmuted); font-size:13px}
.so-tips ul{margin:8px 0 0; padding-left:18px; color:var(--pmuted); font-size:14px; line-height:1.55}
.so-tips .ph3 .pi{color:var(--paccent)}
.so-menu button{display:flex; align-items:center; gap:14px; width:100%; padding:14px 6px; border:0; border-bottom:1px solid var(--pline); background:none; color:var(--ptext); font:600 15px var(--body); text-align:left; cursor:pointer; border-radius:10px}
.so-menu button:hover{background:rgba(255,255,255,.05)}
.so-menu button .pi{color:var(--paccent); width:22px; height:22px}
.so-menu button span{flex:1}
.so-menu .so-danger, .so-menu .so-danger .pi{color:var(--pbad)}
.so-gamepick{display:flex; flex-direction:column; gap:8px}

/* ---------- бърз чат ---------- */
.so-gbtn .pi{width:20px; height:20px}
.so-gbtn[aria-expanded="true"]{background:var(--paccent); color:var(--pacc-ink)}
.so-chatpanel{position:fixed; z-index:62; box-sizing:border-box; padding:12px; border-radius:18px; background:rgba(17,27,68,.97); border:1px solid var(--pline2); box-shadow:0 24px 60px rgba(0,0,0,.55); transform-origin:var(--ox,90%) 0; animation:soPop .26s var(--pspring); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--ptext)}
.so-chatpanel.out{animation:soPopOut .16s ease forwards}
@keyframes soPop{from{opacity:0; transform:scale(.85) translateY(-6px)}}
@keyframes soPopOut{to{opacity:0; transform:scale(.92) translateY(-4px)}}
.so-cp-head{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px}
.so-cp-head b{font:400 16px var(--display); color:var(--paccent)}
.so-cp-head span{font-size:11px; color:var(--pmuted)}
.so-cp-cats{display:flex; gap:4px; padding:3px; border-radius:99px; background:rgba(255,255,255,.06); margin-bottom:10px}
.so-cp-cats button{flex:1; min-height:34px; border:0; border-radius:99px; background:none; color:var(--pmuted); font:600 12px var(--body); cursor:pointer; padding:0 4px; transition:background .2s, color .2s}
.so-cp-cats button.on{background:var(--paccent); color:var(--pacc-ink)}
.so-cp-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.so-cp-grid.stk{grid-template-columns:repeat(4,1fr)}
.so-preset{min-height:44px; padding:8px 10px; border-radius:12px; border:1px solid var(--pline); background:rgba(255,255,255,.06); color:var(--ptext); font:600 14px var(--body); cursor:pointer; animation:soIn .25s var(--pease) both; animation-delay:calc(var(--i) * 25ms); transition:background .15s, transform .15s}
.so-preset:hover{background:rgba(255,197,61,.18); border-color:rgba(255,197,61,.5)}
.so-preset:active{transform:scale(.95)}
.so-preset:focus-visible, .so-cp-cats button:focus-visible{outline:3px solid var(--paccent); outline-offset:1px}
.so-cp-grid.stk .so-preset{padding:6px; aspect-ratio:1; min-height:0; display:grid; place-items:center}
.so-cp-grid.stk .so-preset svg{width:100%; max-width:46px; height:auto; transition:transform .25s var(--pspring)}
.so-cp-grid.stk .so-preset:hover svg{transform:scale(1.12) rotate(-6deg)}
.so-cp-foot{display:flex; align-items:center; gap:10px; margin-top:12px; padding-top:10px; border-top:1px solid var(--pline); font-size:13px; color:var(--pmuted); cursor:pointer}
.so-cp-muted{display:flex; gap:10px; padding:12px; border-radius:12px; background:rgba(255,93,108,.12); border:1px solid rgba(255,93,108,.4); font-size:13px}
.so-cp-muted .pi{color:var(--pbad); width:22px; height:22px}
.so-cp-muted p{margin:4px 0 0; color:#ffd9dd}
.so-chatlayer{position:fixed; inset:0; z-index:60; pointer-events:none; overflow:hidden}
.so-bubble{position:absolute; max-width:min(240px, calc(100vw - 16px)); padding:9px 14px; border-radius:16px; background:var(--paper,#fffdf7); color:var(--ink,#14161c); font:700 15px var(--body); box-shadow:0 10px 26px rgba(0,0,0,.4); animation:soBub .34s var(--pspring) both; box-sizing:border-box}
.so-bubble::after{content:''; position:absolute; left:calc(var(--tail,50%) - 7px); width:14px; height:14px; background:inherit; transform:rotate(45deg); border-radius:2px}
.so-bubble.me::after{bottom:-6px}
.so-bubble.opp::after{top:-6px}
.so-bubble.me{background:linear-gradient(180deg,#ffe08a,var(--paccent))}
.so-bubble.sticker{padding:6px 10px}
.so-bubble.out{animation:soBubOut .26s ease forwards}
.so-bname{display:block; font:600 11px var(--body); color:#5a6180; margin-bottom:1px}
.so-stk{display:block; width:58px; height:58px; animation:soWig .7s .2s ease-in-out}
.so-stk svg{width:100%; height:100%}
@keyframes soBub{from{opacity:0; transform:translateY(10px) scale(.6)}}
@keyframes soBubOut{to{opacity:0; transform:translateY(-8px) scale(.9)}}
@keyframes soWig{30%{transform:rotate(-10deg) scale(1.1)} 60%{transform:rotate(8deg)}}

/* ---------- доклад ---------- */
.so-rep{display:flex; flex-direction:column; gap:14px}
.so-fs{border:0; margin:0; padding:0; min-width:0}
.so-fs legend{font-size:13px; font-weight:600; color:var(--pmuted); margin-bottom:8px; padding:0}
.so-targets{display:flex; flex-wrap:wrap; gap:8px}
.so-target{display:flex; align-items:center; gap:8px; padding:6px 14px 6px 6px; min-height:44px; box-sizing:border-box; border-radius:99px; border:1.5px solid var(--pline2); cursor:pointer; transition:border-color .2s, background .2s; max-width:100%}
.so-target span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.so-target em{font-style:normal; font-size:11px; color:var(--pmuted)}
.so-target input, .so-reason input, .so-catchip input{position:absolute; opacity:0; width:1px; height:1px}
.so-target:has(input:checked){border-color:var(--paccent); background:rgba(255,197,61,.12)}
.so-target:has(input:focus-visible), .so-reason:has(input:focus-visible), .so-catchip:has(input:focus-visible){outline:3px solid var(--paccent); outline-offset:2px}
.so-reasons{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:6px}
.so-reason{position:relative; display:flex; align-items:center; gap:10px; padding:10px 12px; min-height:44px; box-sizing:border-box; border-radius:12px; border:1.5px solid var(--pline); background:rgba(255,255,255,.03); cursor:pointer; font-size:14px; line-height:1.3; transition:border-color .2s, background .2s}
.so-reason::before{content:''; flex:0 0 auto; width:16px; height:16px; border-radius:50%; border:2px solid var(--pline2); transition:border .2s, background .2s}
.so-reason:has(input:checked){border-color:var(--paccent); background:rgba(255,197,61,.1)}
.so-reason:has(input:checked)::before{border:5px solid var(--paccent)}
.so-txt textarea{min-height:90px}
.so-cnt{align-self:flex-end}
.so-req{font-style:normal; color:var(--pwarn)}
.so-attach{border:1px solid var(--pline); border-radius:12px; padding:10px 12px; background:rgba(255,255,255,.03); font-size:14px}
.so-attach summary{cursor:pointer; font-weight:600; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.so-attach summary .pi{color:var(--paccent)}
.so-attach ol{margin:8px 0 0; padding-left:22px; color:var(--pmuted); font-size:13px; line-height:1.6; max-height:160px; overflow:auto}
.so-thanks{text-align:center; padding:12px 0 6px; display:flex; flex-direction:column; align-items:center; gap:10px}
.so-thanks p{margin:0; color:#dfe5fb; line-height:1.5; max-width:40ch}
.so-thanks-ic{display:grid; place-items:center; width:72px; height:72px; border-radius:50%; background:var(--pgood); color:#06291a; font-size:38px; animation:soCheck .5s var(--pspring)}
@keyframes soCheck{from{transform:scale(0) rotate(-40deg)}}
.so-ticket{color:var(--paccent)}

/* ---------- оплаквания ---------- */
.so-clayout{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start}
@media (max-width:900px){ .so-clayout{grid-template-columns:minmax(0,1fr)} }
.so-catchips{display:flex; flex-wrap:wrap; gap:6px}
.so-catchip{position:relative; cursor:pointer}
.so-catchip span{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border-radius:99px; border:1.5px solid var(--pline2); font:600 13px var(--body); transition:background .2s, border-color .2s, color .2s}
.so-catchip input:checked + span{background:var(--paccent); border-color:var(--paccent); color:var(--pacc-ink)}
.so-ac{position:relative}
.so-acl{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; padding:6px; border-radius:12px; background:var(--pbg2); border:1px solid var(--pline2); box-shadow:var(--pshadow)}
.so-acl button{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:6px 8px; border:0; border-radius:8px; background:none; color:var(--ptext); font:600 14px var(--body); cursor:pointer; text-align:left}
.so-acl button:hover, .so-acl button:focus-visible{background:rgba(255,255,255,.08)}
.so-acl p{margin:6px 8px}
.so-picked{display:flex; align-items:center; gap:10px; padding:6px 6px 6px 8px; border-radius:99px; border:1.5px solid var(--paccent); background:rgba(255,197,61,.1)}
.so-picked b{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.so-picked .picon-btn{width:34px; height:34px}
.so-myrep{display:flex; flex-direction:column; gap:12px; min-width:0}
.so-replist{display:flex; flex-direction:column; gap:12px}
.so-rep-item{display:flex; flex-direction:column; gap:8px; transition:box-shadow .4s}
.so-rep-item.hl{border-color:var(--paccent); box-shadow:0 0 0 3px rgba(255,197,61,.25)}
.so-rep-t{font:700 15px var(--body); margin:0}
.so-rep-x{margin:0; color:#dfe5fb; font-size:14px; line-height:1.5; overflow-wrap:anywhere}
.so-rep-m{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600}
.so-date{font-size:12px}
.so-steps{list-style:none; margin:6px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); position:relative}
.so-steps li{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; font-size:12px; color:var(--pmuted); min-width:0}
.so-steps li::before{content:''; position:absolute; top:7px; left:-50%; width:100%; height:3px; background:var(--pline); z-index:0}
.so-steps li:first-child::before{display:none}
.so-steps li.done::before, .so-steps li.cur::before{background:var(--pgood)}
.so-steps i{position:relative; z-index:1; width:16px; height:16px; border-radius:50%; background:var(--pcard2); border:2px solid var(--pline2); box-sizing:border-box}
.so-steps li.done i{background:var(--pgood); border-color:var(--pgood)}
.so-steps li.cur i{background:var(--paccent); border-color:var(--paccent); box-shadow:0 0 0 4px rgba(255,197,61,.2)}
.so-steps li.cur span{color:var(--ptext); font-weight:700}
.so-steps.resolved li.cur i{background:var(--pgood); border-color:var(--pgood)}
.so-steps.rejected li.cur i{background:var(--pbad); border-color:var(--pbad)}
.so-steps.rejected li.cur::before{background:var(--pbad)}
.so-steps small{font-size:11px; opacity:.8}
.so-resol{display:flex; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(111,168,255,.1); border:1px solid rgba(111,168,255,.35); font-size:14px}
.so-resol .pi{color:var(--pinfo); width:20px; height:20px; margin-top:2px}
.so-resol p{margin:2px 0 0; color:#dfe5fb}

/* ---------- история ---------- */
.so-stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:12px; margin-bottom:16px}
.so-stat{display:flex; align-items:center; gap:14px; padding:14px}
.so-ring{position:relative; width:64px; height:64px; flex:0 0 auto}
.so-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.so-ring circle{fill:none; stroke-width:7}
.so-ring .bg{stroke:rgba(255,255,255,.1)}
.so-ring .fg{stroke:var(--paccent); stroke-linecap:round; animation:soRing 1s var(--pease) both}
@keyframes soRing{from{stroke-dasharray:0 200}}
.so-ring b{position:absolute; inset:0; display:grid; place-items:center; font-size:15px}
.so-ring-l{display:flex; flex-direction:column; min-width:0}
.so-ring-l span{font-size:13px}
.so-upsell{display:flex; align-items:center; gap:14px; margin-bottom:16px; text-decoration:none; color:var(--ptext); border-color:rgba(255,197,61,.45); background:linear-gradient(120deg,rgba(255,197,61,.16),rgba(240,140,26,.06) 60%), var(--pcard); transition:transform .25s var(--pease), box-shadow .25s}
.so-upsell:hover{transform:translateY(-2px); box-shadow:var(--pshadow)}
.so-upsell > div{flex:1; min-width:0}
.so-upsell p{margin:3px 0 0; color:var(--pmuted); font-size:14px}
.so-up-ic, .so-upsell.big > .pi{display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border-radius:14px; background:var(--paccent); color:var(--pacc-ink); font-size:22px}
.so-upsell.big{flex-wrap:wrap; margin-top:14px}
.so-upsell.big > .pi{padding:10px; box-sizing:border-box}
.so-hfilters{display:flex; flex-wrap:wrap; gap:8px 16px; margin-bottom:14px}
.so-hfilters > div{display:flex; flex-wrap:wrap; gap:6px}
.so-hfilters .pchip{min-height:36px; padding:0 13px}
.so-hlist{display:flex; flex-direction:column; gap:8px}
.so-mrow{position:relative; display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--pline); color:var(--ptext); text-decoration:none; transition:border-color .2s, transform .2s var(--pease), background .2s; animation:soIn .3s var(--pease) both}
.so-mrow:hover{border-color:var(--pline2); background:rgba(255,255,255,.06); transform:translateX(3px)}
.so-mrow:focus-visible{outline:3px solid var(--paccent); outline-offset:2px}
.so-gic{display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(255,197,61,.14); color:var(--paccent); font-size:22px}
.so-gic.g-belot{background:rgba(111,168,255,.15); color:var(--pinfo)}
.so-gic.g-tabla{background:rgba(63,210,138,.14); color:var(--pgood)}
.so-gic.g-ludo{background:rgba(255,93,108,.14); color:var(--pbad)}
.so-gic.big{width:56px; height:56px; font-size:28px; border-radius:16px}
.so-minfo{display:flex; flex-direction:column; gap:3px; min-width:0}
.so-opps{display:flex; align-items:center; gap:4px; min-width:0; font-size:13px}
.so-opps .pava{box-shadow:0 0 0 2px var(--pcard)}
.so-opps .pava + .pava{margin-left:-8px}
.so-opps .pmuted{margin-left:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.so-mres{display:flex; flex-direction:column; align-items:flex-end; gap:3px}
.so-score{font-size:16px; font-weight:700}
.so-mmeta{display:flex; flex-direction:column; align-items:flex-end; font-size:12px; white-space:nowrap}
.so-flag{position:absolute; top:6px; right:8px; color:var(--pbad); font-size:12px}
@media (max-width:600px){
  .so-mrow{grid-template-columns:40px minmax(0,1fr) auto; padding:10px}
  .so-gic{width:40px; height:40px}
  .so-mmeta{grid-column:2 / -1; flex-direction:row; gap:10px; justify-content:flex-start}
}
.so-retn{font-size:13px; margin-top:16px}
.so-back{margin-bottom:12px}
.so-mhead{display:flex; flex-direction:column; gap:14px; margin-bottom:18px}
.so-mh-top{display:flex; align-items:center; gap:14px}
.so-mh-top > div{flex:1; min-width:0}
.so-bigscore{color:var(--paccent); margin-left:6px}
.so-players{display:flex; flex-wrap:wrap; align-items:center; gap:10px}
.so-pl{display:flex; align-items:center; gap:10px; padding:6px 14px 6px 6px; border-radius:99px; background:rgba(255,255,255,.05); border:1px solid var(--pline); min-width:0; max-width:100%}
.so-pl.me{border-color:rgba(255,197,61,.5)}
.so-pl span{display:flex; flex-direction:column; min-width:0}
.so-pl b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.so-pl small{font-size:12px}
.so-vs{font:700 11px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--pmuted)}
.so-mh-meta{font-size:13px; gap:14px}
@media (max-width:520px){ .so-mh-chip{display:none} }
.so-replay-wrap{display:flex; flex-direction:column; gap:10px}

/* плейър на повторения */
.so-replay{display:flex; flex-direction:column; gap:12px}
.so-rp-ctrl{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:10px 12px; border-radius:16px; background:var(--pcard); border:1px solid var(--pline); position:sticky; top:calc(var(--phdr) + 8px); z-index:5}
.so-rp-play{display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:0; background:linear-gradient(180deg,var(--paccent),var(--paccent2)); color:var(--pacc-ink); font-size:20px; cursor:pointer; box-shadow:0 3px 0 var(--gold3,#a85d00); transition:transform .2s var(--pspring)}
.so-rp-play:hover{transform:scale(1.06)}
.so-rp-play.on{animation:soBeat 1.6s ease-in-out infinite}
@keyframes soBeat{50%{box-shadow:0 3px 0 var(--gold3,#a85d00), 0 0 0 8px rgba(255,197,61,.18)}}
.so-rp-play:focus-visible{outline:3px solid var(--paccent); outline-offset:3px}
.so-rp-scrub{flex:1 1 160px; min-width:0; accent-color:var(--paccent); height:28px}
.so-rp-time{font-size:13px; color:var(--pmuted); white-space:nowrap}
.so-rp-time b{color:var(--ptext)}
.so-rp-speed{display:flex; gap:4px}
.so-rp-speed .pchip{min-height:34px; min-width:40px; justify-content:center}
.so-rp-lines{list-style:none; margin:0; padding:6px; max-height:min(60vh,560px); overflow:auto; overscroll-behavior:contain; border-radius:16px; background:rgba(3,8,30,.35); border:1px solid var(--pline); display:flex; flex-direction:column; gap:2px}
.so-rp-lines:empty{display:none}
.so-rp-l{display:flex; align-items:flex-start; gap:10px; padding:6px 8px; border-radius:10px; font-size:14px; line-height:1.4; min-width:0}
.so-rp-l.new{animation:soLine .35s var(--pease)}
@keyframes soLine{from{opacity:0; transform:translateX(-10px); background:rgba(255,197,61,.18)}}
.so-rp-l time{flex:0 0 38px; font:500 12px var(--num); color:var(--pmuted); padding-top:2px}
.so-rp-ic{flex:0 0 auto; color:var(--pmuted)}
.so-rp-txt{min-width:0; overflow-wrap:anywhere}
.so-rp-l.t-play .so-rp-ic{color:var(--paccent)}
.so-rp-l.t-trick .so-rp-txt, .so-rp-l.t-last10 .so-rp-txt{color:var(--pgood)}
.so-rp-l.t-marriage .so-rp-txt, .so-rp-l.t-belot .so-rp-txt, .so-rp-l.t-decl .so-rp-txt{color:var(--paccent); font-weight:700}
.so-rp-chat{display:inline-flex; align-items:center; gap:6px; padding:5px 12px 5px 5px; border-radius:14px 14px 14px 4px; background:var(--paper,#fffdf7); color:var(--ink,#14161c); font-weight:600; max-width:100%; overflow-wrap:anywhere}
.so-rp-chat.mine{background:linear-gradient(180deg,#ffe08a,var(--paccent))}
.so-rp-l.sep{padding:0; margin:8px 0}
.so-rp-sep{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; width:100%; padding:8px 12px; border-radius:10px; background:rgba(255,197,61,.1); border-left:3px solid var(--paccent); font-size:13px}
.so-rp-sep b{color:var(--paccent); font:700 11px var(--body); letter-spacing:.12em; text-transform:uppercase}
.so-rp-sep .pi{color:var(--paccent)}
.so-card{display:inline-block; padding:0 4px; margin:0 1px; border-radius:4px; background:var(--paper,#fffdf7); color:#14161c; font-weight:700; font-family:var(--num); line-height:1.35}
.so-card.red{color:#d42a3c}
.so-rp-hint{margin:0; display:flex; align-items:center; gap:6px; font-size:14px}

/* =====================================================================
   Поддръжка (.sp-)
   ===================================================================== */
.sp-hero{text-align:center; padding:12px 0 18px; display:flex; flex-direction:column; align-items:center; gap:10px}
.sp-search{position:relative; display:block; width:min(100%,560px); margin-top:6px}
.sp-search .pi{position:absolute; left:16px; top:50%; translate:0 -50%; color:var(--pmuted); width:20px; height:20px}
.sp-search input{padding:15px 16px 15px 46px; border-radius:99px; font-size:17px}
.sp-cats{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-bottom:20px}
.sp-cats .pchip{min-height:38px; padding:0 14px}
.sp-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start}
@media (max-width:900px){ .sp-layout{grid-template-columns:minmax(0,1fr)} }
.sp-side{position:sticky; top:calc(var(--phdr) + 16px)}
@media (max-width:900px){ .sp-side{position:static} }
.sp-ch{display:flex; align-items:center; gap:8px; font:700 12px var(--body); letter-spacing:.12em; text-transform:uppercase; color:var(--paccent); margin:22px 0 8px}
.sp-ch:first-child{margin-top:0}
.sp-found{margin:0 0 8px; font-size:13px}
.sp-acc{display:flex; flex-direction:column; gap:6px}
.sp-item{border-radius:14px; background:rgba(255,255,255,.035); border:1px solid var(--pline); transition:border-color .2s, background .2s}
.sp-item.open{border-color:rgba(255,197,61,.4); background:rgba(255,197,61,.05)}
.sp-q{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:52px; padding:12px 16px; border:0; background:none; color:var(--ptext); font:600 15px/1.35 var(--body); text-align:left; cursor:pointer; border-radius:14px}
.sp-q:focus-visible, .sp-th:focus-visible{outline:3px solid var(--paccent); outline-offset:-3px}
.sp-chev{color:var(--pmuted); transition:transform .3s var(--pease)}
.sp-item.open .sp-chev, .sp-ticket.open .sp-th .sp-chev{transform:rotate(90deg); color:var(--paccent)}
.sp-a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .32s var(--pease), opacity .25s; opacity:0}
.sp-a > div{overflow:hidden; min-height:0}
.open > .sp-a{grid-template-rows:1fr; opacity:1}
.sp-a p{margin:0; padding:0 16px 14px; color:#dfe5fb; line-height:1.6; font-size:15px}
.sp-item mark{background:rgba(255,197,61,.35); color:inherit; border-radius:3px; padding:0 1px}
.sp-contact{display:flex; flex-direction:column; gap:12px}
.sp-contact p{margin:0; font-size:14px; line-height:1.5}
.sp-mail{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; font-size:14px}
.sp-tickets{margin-top:36px; scroll-margin-top:calc(var(--phdr) + 12px)}
.sp-tlist{display:flex; flex-direction:column; gap:10px; margin-top:12px}
.sp-ticket{padding:0; overflow:hidden}
.sp-th{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"st t d c" "st l l l"; align-items:center; gap:4px 12px; width:100%; padding:14px 16px; border:0; background:none; color:var(--ptext); text-align:left; cursor:pointer; font:inherit}
.sp-th .pchip{grid-area:st}
.sp-th b{grid-area:t; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sp-tl{grid-area:l; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sp-td{grid-area:d; font-size:12px; white-space:nowrap}
.sp-th .sp-chev{grid-area:c}
@media (max-width:520px){ .sp-th{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"st c" "t t" "l l" "d d"} .sp-th .pchip{justify-self:start} }
.sp-ticket .sp-a > div{padding:0 16px}
.sp-ticket.open .sp-a > div{padding-bottom:16px}
.sp-thread{display:flex; flex-direction:column; gap:8px}
.sp-tm{max-width:85%; padding:8px 12px; border-radius:14px; background:rgba(255,255,255,.07); align-self:flex-end}
.sp-tm.support{align-self:flex-start; background:rgba(111,168,255,.14); border:1px solid rgba(111,168,255,.3)}
.sp-tm.bot{align-self:flex-start; background:rgba(255,197,61,.08)}
.sp-tm small{display:block; color:var(--pmuted); font-size:11px; margin-bottom:2px}
.sp-tm p{margin:0; font-size:14px; line-height:1.5; overflow-wrap:anywhere}
.sp-sla, .sp-closed{font-size:13px; margin:12px 0 8px}
.sp-reply{display:flex; gap:8px; align-items:flex-end; margin-top:8px}
.sp-reply textarea{flex:1; min-width:0; min-height:46px; resize:vertical; font:500 15px var(--body); padding:10px 12px; border-radius:12px; border:1.5px solid var(--pline); background:rgba(3,8,30,.45); color:var(--ptext); box-sizing:border-box}
.sp-reply textarea:focus{outline:none; border-color:var(--paccent)}
@media (max-width:520px){ .sp-reply{flex-direction:column; align-items:stretch} }
.sp-fab{position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:45; display:inline-flex; align-items:center; gap:8px; min-height:52px; padding:0 20px; border:0; border-radius:99px; background:linear-gradient(180deg,var(--paccent),var(--paccent2)); color:var(--pacc-ink); font:700 15px var(--body); cursor:pointer; box-shadow:0 10px 30px rgba(255,160,40,.35); animation:soPop .4s var(--pspring); transition:transform .2s var(--pspring)}
.sp-fab:hover{transform:translateY(-2px)}
.sp-fab .pi{width:22px; height:22px}
@media (max-width:900px){ .sp-fab{bottom:calc(var(--ptab) + 14px + env(safe-area-inset-bottom,0px))} }
body.sp-chat-open .sp-fab{display:none}

/* чат прозорец */
.sp-chat{position:fixed; right:16px; bottom:16px; z-index:70; width:min(380px, calc(100vw - 32px)); height:min(580px, calc(100vh - 100px)); display:flex; flex-direction:column; border-radius:22px; background:var(--pbg2); border:1px solid var(--pline2); box-shadow:0 30px 80px rgba(0,0,0,.55); overflow:hidden; opacity:0; transform:translateY(20px) scale(.96); transform-origin:bottom right; transition:opacity .22s ease, transform .3s var(--pspring)}
.sp-chat.on{opacity:1; transform:none}
@media (max-width:600px){ .sp-chat{left:0; right:0; bottom:0; width:auto; height:min(86vh, calc(100vh - 40px)); border-radius:22px 22px 0 0; padding-bottom:env(safe-area-inset-bottom,0px)} }
.sp-chead{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 16px; border-bottom:1px solid var(--pline); background:linear-gradient(180deg,rgba(255,197,61,.1),transparent)}
.sp-chead > div{flex:1; min-width:0; display:flex; flex-direction:column}
.sp-chead span{font-size:12px; color:var(--pmuted); display:flex; align-items:center; gap:6px}
.sp-live{width:8px; height:8px; border-radius:50%; background:var(--pgood); box-shadow:0 0 0 3px rgba(63,210,138,.25)}
.sp-botava{display:inline-block; width:34px; height:34px; flex:0 0 auto}
.sp-botava svg{width:100%; height:100%}
.sp-cmsgs{flex:1; overflow:auto; overscroll-behavior:contain; padding:14px; display:flex; flex-direction:column; gap:10px}
.sp-m{display:flex; gap:8px; align-items:flex-end; max-width:92%}
.sp-m.user{align-self:flex-end}
.sp-m.new{animation:soIn .3s var(--pease)}
.sp-m .sp-botava{width:28px; height:28px}
.sp-mb{display:flex; flex-direction:column; gap:6px; min-width:0}
.sp-mt{padding:9px 13px; border-radius:16px 16px 16px 4px; background:rgba(255,255,255,.08); font-size:14px; line-height:1.5; overflow-wrap:anywhere}
.sp-m.user .sp-mt{border-radius:16px 16px 4px 16px; background:linear-gradient(180deg,var(--paccent),var(--paccent2)); color:var(--pacc-ink); font-weight:600}
.sp-acts{display:flex; flex-wrap:wrap; gap:6px}
.sp-acts .pchip{min-height:34px; white-space:normal; text-align:left; line-height:1.25; padding:6px 12px}
.sp-acts .pchip:disabled{opacity:.5; cursor:default}
.sp-cform{display:flex; gap:8px; padding:10px; border-top:1px solid var(--pline)}
.sp-cin{flex:1; min-width:0; border-radius:99px; padding:11px 16px}
.sp-csend{width:46px; min-height:46px; padding:0}

/* админ таб */
.sp-adm{display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:16px; align-items:start; min-height:420px}
.sp-adm-list{display:flex; flex-direction:column; gap:10px; min-width:0}
.sp-adm-items{display:flex; flex-direction:column; gap:6px}
.sp-adm-it{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px; padding:10px; border-radius:12px; border:1px solid var(--pline); background:rgba(255,255,255,.03); color:var(--ptext); text-align:left; cursor:pointer; font:inherit}
.sp-adm-it.on{border-color:var(--paccent); background:rgba(255,197,61,.08)}
.sp-adm-it span{display:flex; flex-direction:column; min-width:0}
.sp-adm-it b, .sp-adm-it small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.sp-adm-it b{font-size:14px}
.sp-adm-it small{font-size:12px}
.sp-adm-conv{min-width:0; padding:16px; border-radius:var(--pr); border:1px solid var(--pline); background:var(--pcard); display:flex; flex-direction:column; gap:12px}
.sp-adm-head{display:flex; align-items:center; gap:10px}
.sp-adm-head > div{flex:1; min-width:0; display:flex; flex-direction:column}
.sp-adm-head small{font-size:12px; overflow-wrap:anywhere}
.sp-adm-back{display:none}
.sp-adm-thread{max-height:420px; overflow:auto; padding:4px}
.sp-adm-thread .sp-tm.user{align-self:flex-start}
.sp-adm-thread .sp-tm.support{align-self:flex-end}
.sp-macros{display:flex; flex-wrap:wrap; gap:6px}
.sp-macros .pchip{min-height:34px}
.sp-adm-none{display:grid; place-items:center; min-height:300px}
@media (max-width:820px){
  .sp-adm{grid-template-columns:minmax(0,1fr)}
  .sp-adm.has-sel .sp-adm-list{display:none}
  .sp-adm:not(.has-sel) .sp-adm-conv{display:none}
  .sp-adm-back{display:inline-grid}
}
.sp-contact .pbtn, .so-linkbox .pbtn{box-sizing:border-box}