/* ============================================================
   ss_chat.css  —  사커스타 인게임 채팅 위젯 (mobile3)
   prefix: sschat-  (게임 CSS 충돌 방지)
   테마: 퍼플(메인)  /  귓속말=핑크(분리 강조)
     - P-deep #6a3de8 / P-mid #8b6df0 / P-vivid #7c3aed
     - 귓속말 W: #c9257f(text) / #ffe6f4(bg) / #ffcfe8(border)
   ============================================================ */
#sschat-root{ font-family:inherit; -webkit-tap-highlight-color:transparent; }
#sschat-root *{ box-sizing:border-box; }
/* 인라인 SVG 아이콘 (웹폰트 무의존) */
.sschat-svg{ width:1em; height:1em; display:inline-block; vertical-align:-0.125em; fill:currentColor; pointer-events:none; }

/* FAB (접힘) — 좌하단 (우측 .uchatIcon 스택과 충돌 회피) */
#sschat-fab{
  position:fixed; left:14px; bottom:96px; z-index:9998;
  width:52px; height:52px; border:none; border-radius:50%;
  background:linear-gradient(135deg,#9d7bff,#7c3aed); color:#fff; font-size:23px;
  box-shadow:0 8px 20px rgba(124,58,237,.45); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:transform .12s, bottom .25s ease;
}
/* 하단 뉴스 티커가 떠있을 때만 위로, 사라지면 원래(낮은) 위치로 복귀 */
#sschat-root.sschat-ticker #sschat-fab{ bottom:150px; }
#sschat-fab:active{ transform:scale(.9); }
#sschat-fab.sschat-hide{ display:none; }
#sschat-badge{
  position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px;
  background:#ff3b30; color:#fff; border-radius:100px; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;
}
#sschat-badge.sschat-hide{ display:none; }

/* 닫힘 상태 귓속말 토스트 (핑크) */
#sschat-wtoast{
  position:fixed; left:14px; bottom:158px; z-index:9998; max-width:230px;
  display:none; background:#fff; border:1px solid #ffcfe8; border-left:3px solid #d6338a;
  border-radius:10px; padding:9px 12px; font-size:12px; color:#2a323d;
  box-shadow:0 8px 22px rgba(0,0,0,.2); cursor:pointer; transition:bottom .25s ease;
}
#sschat-root.sschat-ticker #sschat-wtoast{ bottom:212px; }
#sschat-wtoast.sschat-on{ display:block; }
#sschat-wtoast b{ color:#d6338a; }
#sschat-wtoast span{ display:block; margin-top:2px; color:#6f7d8c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#sschat-wtoast i{ color:#d6338a; }

/* 패널 */
#sschat-panel{
  position:fixed; left:0; right:0; bottom:0; z-index:9999; height:70vh; max-height:640px;
  background:#fff; border-radius:18px 18px 0 0; box-shadow:0 -10px 30px rgba(0,0,0,.25);
  display:flex; flex-direction:column; transform:translateY(102%); transition:transform .22s ease;
}
#sschat-panel.sschat-open{ transform:translateY(0); }
#sschat-panel.sschat-mini{
  left:auto; right:auto; top:60px; bottom:auto; width:230px; height:300px;
  min-width:200px; min-height:200px; border-radius:16px; box-shadow:0 12px 34px rgba(0,0,0,.32);
}

/* 헤더 */
#sschat-head{ background:linear-gradient(135deg,#8b6df0,#6a3de8); color:#fff; padding:10px 14px; position:relative; }
.sschat-htop{ display:flex; align-items:center; justify-content:space-between; }
.sschat-title{ font-weight:800; font-size:15px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sschat-hbtn{ display:flex; gap:5px; flex:none; }
.sschat-ico{
  background:rgba(255,255,255,.2); border:none; color:#fff; width:27px; height:27px; border-radius:8px;
  font-size:15px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.sschat-ico.sschat-act{ background:#fff; color:#6a3de8; }
.sschat-hbot{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:8px; }
.sschat-filter{ display:flex; gap:5px; }
.sschat-seg{
  border:1px solid rgba(255,255,255,.5); background:rgba(255,255,255,.14); color:#fff;
  font-size:11px; font-weight:700; border-radius:100px; padding:3px 12px; cursor:pointer;
}
.sschat-seg.sschat-act{ background:#fff; color:#6a3de8; }
.sschat-live{ font-size:11.5px; opacity:.9; white-space:nowrap; cursor:pointer; }
.sschat-live .sschat-dot{ color:#59e08a; margin-right:3px; }
#sschat-panel.sschat-mini .sschat-hbot{ display:none; }
#sschat-panel.sschat-mini #sschat-head{ cursor:move; touch-action:none; }
#sschat-panel.sschat-mini .sschat-name{ font-size:10px; }
/* 미니창이 충분히 커지면(sschat-wide) 전체창처럼 필터/접속자수 줄·정상 폰트 노출 */
#sschat-panel.sschat-mini.sschat-wide .sschat-hbot{ display:flex; }
#sschat-panel.sschat-mini.sschat-wide .sschat-name{ font-size:11px; }

/* 관리자 바 (sminia 전용, JS가 display 토글) */
#sschat-admin{ display:none; align-items:center; justify-content:space-between; gap:8px; padding:5px 12px; background:#3a2a5e; color:#e5dcff; font-size:11px; font-weight:700; }
#sschat-admin button{ background:#c0392b; color:#fff; border:none; border-radius:6px; padding:3px 11px; font-size:11px; font-weight:700; cursor:pointer; }

/* 메시지 리스트 */
#sschat-body{ flex:1; overflow-y:auto; padding:13px 11px; background:#eef1f5; display:flex; flex-direction:column; gap:9px; }
.sschat-sys{ align-self:center; background:rgba(0,0,0,.08); color:#5a6675; font-size:11px; padding:3px 11px; border-radius:100px; }
.sschat-row{ display:flex; gap:8px; max-width:80%; }
.sschat-row.sschat-other{ align-self:flex-start; }
.sschat-row.sschat-me{ align-self:flex-end; flex-direction:row-reverse; }
/* 운영자(sminia) 공지 메시지 — 가운데 넓게, 골드 강조 */
.sschat-row.sschat-op{
  align-self:center; max-width:94%; width:100%; flex-direction:row;
  padding:2px 0;
}
.sschat-row.sschat-op > div:not(.sschat-ava){ align-items:stretch; flex:1; min-width:0; }
.sschat-ava-op > img{
  box-shadow:0 0 0 2px #f5c542, 0 2px 8px rgba(200,140,0,.35);
}
.sschat-optag{
  display:inline-flex; align-items:center; height:16px; padding:0 7px;
  border-radius:4px; font-size:10px; font-weight:900; letter-spacing:.2px;
  color:#5a3a00; background:linear-gradient(135deg,#ffe566,#f5c542);
  border:1px solid #e0a800; margin-right:5px; vertical-align:middle;
  box-shadow:0 1px 2px rgba(180,120,0,.25);
}
.sschat-coach-op{
  background:linear-gradient(135deg,#fff8e0,#ffe9a8) !important;
  border-color:#f0d060 !important;
}
.sschat-coach-op .sschat-lnk{ color:#8a5a00 !important; }
.sschat-bubble.sschat-opbub{
  background:linear-gradient(135deg,#fffbeb 0%,#fff3c4 55%,#ffe9a0 100%);
  border:1.5px solid #f0c040;
  border-radius:10px 14px 14px 14px;
  color:#3a2a00; font-weight:600; font-size:13.5px;
  box-shadow:0 2px 10px rgba(200,150,0,.22), inset 0 1px 0 rgba(255,255,255,.7);
  width:100%; max-width:100%;
}
.sschat-row.sschat-op .sschat-time{ color:#a67c00; font-weight:600; }
/* 말풍선이 내부 글 크기에 맞게(내용만큼만) — 컬럼 flex + align-items */
.sschat-row > div:not(.sschat-ava){ min-width:0; display:flex; flex-direction:column; }
.sschat-row.sschat-other > div:not(.sschat-ava){ align-items:flex-start; }
.sschat-row.sschat-me > div:not(.sschat-ava){ align-items:flex-end; }
.sschat-ava{ position:relative; width:33px; height:33px; flex:none; }
.sschat-ava > img{ width:33px; height:33px; border-radius:50%; object-fit:cover; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.1); }
.sschat-ava > .sschat-avalv{ position:absolute; right:-5px; bottom:-5px; background:#6a3de8; color:#fff; font-size:9px; font-weight:800; line-height:15px; height:16px; padding:0 5px; border-radius:100px; border:1.5px solid #fff; white-space:nowrap; }
/* 접속상태 점 (사진 왼쪽아래): 녹색=접속중 → 앰버 → 회색(오프라인). 색은 JS presDot()가 인라인 지정 */
.sschat-ava > .sschat-pres{ position:absolute; left:-2px; bottom:-2px; width:11px; height:11px; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 2px rgba(0,0,0,.3); }
.sschat-name{ font-size:11px; color:#6f7d8c; margin:0 0 3px 2px; font-weight:600; }
.sschat-tag{ display:inline-flex; align-items:center; justify-content:center; height:16px; padding:0 4px; border-radius:4px; font-size:9.5px; font-weight:800; color:#fff; margin-right:4px; letter-spacing:-.3px; vertical-align:middle; }
.sschat-lv{ background:#ece5ff; color:#6a3de8; font-weight:800; border-radius:5px; padding:0 4px; font-size:10px; margin:0 2px; }
.sschat-lnk{ color:#2a5db0; cursor:pointer; text-decoration:underline; }
/* 귓속말 버튼(💬 칩) — 핑크 태그화 */
.sschat-wbtn2{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-left:4px; padding:2px 7px; background:#ffe6f4; color:#c9257f; border:1px solid #ffcfe8; border-radius:100px; font-size:11px; line-height:1; cursor:pointer; }
.sschat-wbtn2:active{ background:#ffcfe8; }
/* 친선 신청 칩(⚔ 친선) — 귓속말보다 작게, 같은 서버만 노출 */
.sschat-fbtn{ display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; margin-left:3px; padding:1px 5px; background:#e8f8ef; color:#15803d; border:1px solid #bbf0d0; border-radius:100px; font-size:9.5px; font-weight:800; line-height:1.2; cursor:pointer; letter-spacing:-.2px; white-space:nowrap; }
.sschat-fbtn:active{ background:#bbf0d0; }
.sschat-emb{ height:14px; vertical-align:middle; margin-right:3px; }
/* 팀 로고+이름 태그(pill) */
.sschat-team{ display:inline-flex; align-items:center; gap:3px; max-width:150px; vertical-align:middle; margin-right:4px; padding:1px 8px 1px 5px; border-radius:100px; background:linear-gradient(135deg,#f4f0ff,#e9e2fb); border:1px solid #ddd4f5; }
.sschat-team .sschat-emb{ height:13px; margin:0; flex:none; }
.sschat-team .sschat-lnk{ color:#5a4a8a; text-decoration:none; font-weight:800; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sschat-otm .sschat-team{ background:linear-gradient(135deg,#f4f0ff,#e9e2fb); }
/* 감독이름 태그(pill) — 팀과 구분되는 슬레이트블루 톤 */
.sschat-coach{ display:inline-flex; align-items:center; max-width:130px; vertical-align:middle; margin-right:4px; padding:1px 9px; border-radius:100px; background:linear-gradient(135deg,#eef2fb,#e1e8f6); border:1px solid #d5def0; }
.sschat-coach .sschat-lnk{ color:#3b4a66; text-decoration:none; font-weight:800; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sschat-wtag{ background:#ffd6ec; color:#c9257f; font-size:9px; font-weight:800; border-radius:4px; padding:0 4px; margin-left:3px; }
/* 국적 깃발 (감독 pill 안쪽, 닉과 한 몸 — 줄바꿈 분리 방지) */
.sschat-nat{ height:12px; vertical-align:middle; margin:0 0 0 4px; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.12); flex:none; }
.sschat-coach{ max-width:170px; }
.sschat-coach .sschat-lnk{ min-width:0; }
.sschat-bubble{ background:#fff; color:#2a323d; padding:8px 11px; border-radius:4px 14px 14px 14px; font-size:13px; line-height:1.5; box-shadow:0 1px 3px rgba(0,0,0,.07); word-break:break-word; overflow-wrap:anywhere; white-space:pre-wrap; min-width:40px; max-width:100%; }
.sschat-row.sschat-me .sschat-bubble{ background:#e5dcff; border-radius:14px 4px 14px 14px; }
.sschat-bubble.sschat-wsp{ background:#ffe6f4; border:1px solid #ffcfe8; }
.sschat-time{ font-size:10px; color:#9aa7b5; margin:3px 2px 0; }
.sschat-row.sschat-me .sschat-time{ text-align:right; }
.sschat-del{ font-size:10px; color:#c0392b; cursor:pointer; margin-left:4px; }
/* 답글(카톡식): 말풍선 안 인용블록 + 입력칩 + 원글 하이라이트 */
.sschat-row.sschat-other .sschat-bubble{ cursor:pointer; }
.sschat-reply-quote{ display:block; font-size:11px; color:#5a4a8a; background:rgba(106,61,232,.09); border-left:2px solid #8b6df0; padding:3px 8px; border-radius:6px; margin-bottom:5px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:240px; }
.sschat-reply-quote:active{ background:rgba(106,61,232,.18); }
.sschat-rto{ font-size:11px; color:#6a3de8; font-weight:800; padding:0 4px; white-space:nowrap; cursor:pointer; }
.sschat-row.sschat-hl .sschat-bubble{ animation: sschat-hlk 1.4s ease; }
@keyframes sschat-hlk{ 0%{ box-shadow:0 0 0 3px rgba(124,58,237,.8); } 100%{ box-shadow:0 1px 3px rgba(0,0,0,.07); } }

/* 보상 지급 뱃지 (해당 메시지 옆 영구표시) */
.sschat-rwbadge{ display:inline-block; font-size:10px; font-weight:800; color:#a86400; background:linear-gradient(135deg,#fff0b0,#ffd23e); border:1px solid #f2c14e; border-radius:100px; padding:1px 7px; margin-left:4px; vertical-align:middle; white-space:nowrap; box-shadow:0 1px 2px rgba(200,140,0,.25); }

/* 첨부 표시 (메시지 내): img=인라인 썸네일(클릭 원본), file(tif)=다운로드 칩 */
.sschat-att-img{ margin-top:2px; }
.sschat-att-img img{ display:block; max-width:100%; max-height:240px; width:auto; height:auto; border-radius:10px; cursor:pointer; background:#f0f0f4; box-shadow:0 1px 3px rgba(0,0,0,.12); }
.sschat-att-img img:active{ opacity:.85; }
.sschat-att-file{ display:inline-flex; align-items:center; gap:6px; max-width:100%; margin-top:2px; padding:7px 12px; background:#f4f0ff; border:1px solid #ddd4f5; border-radius:10px; color:#5a4a8a; font-size:12px; font-weight:700; text-decoration:none; cursor:pointer; }
.sschat-att-file:active{ background:#e9e2fb; }
.sschat-att-file i{ font-size:14px; color:#6a3de8; flex:none; }
.sschat-att-file span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* 첨부만 있고 본문 없는 말풍선: 여백 최소화(이미지가 곧 말풍선) */
.sschat-bubble.sschat-bubble-att{ padding:4px; min-width:0; }
.sschat-row.sschat-me .sschat-bubble.sschat-bubble-att{ background:#e5dcff; }

/* 이모지 */
#sschat-emoji{ display:none; flex-wrap:wrap; gap:2px; padding:8px 10px; background:#fff; border-top:1px solid #eef1f5; max-height:104px; overflow-y:auto; }
#sschat-emoji.sschat-on{ display:flex; }
#sschat-emoji span{ font-size:20px; cursor:pointer; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:8px; }
#sschat-emoji span:active{ background:#eef1f5; }

/* 입력 */
.sschat-input{ display:flex; gap:8px; padding:10px; background:#fff; border-top:1px solid #e0e6ee; align-items:center; }
.sschat-emojibtn{ flex:none; background:none; border:none; color:#8b6df0; font-size:19px; cursor:pointer; padding:0 2px; line-height:1; }
.sschat-input input{ flex:1 1 0; min-width:0; border:1px solid #dce3ec; border-radius:100px; padding:9px 12px; font-size:13px; outline:none; color:#2a323d; }
.sschat-input input:focus{ border-color:#8b6df0; }
.sschat-sendbtn{ flex:none; white-space:nowrap; border:none; background:linear-gradient(135deg,#8b6df0,#6a3de8); color:#fff; font-weight:700; border-radius:100px; padding:9px 14px; font-size:13px; cursor:pointer; }
.sschat-sendbtn:disabled{ cursor:default; }
.sschat-wto{ font-size:11px; color:#c9257f; font-weight:700; padding:0 4px; white-space:nowrap; cursor:pointer; }

/* 첨부 버튼(클립) + 대기바(전송 전 미리보기) */
.sschat-filein{ display:none; }
.sschat-attbtn{ flex:none; background:none; border:none; color:#8b6df0; font-size:18px; cursor:pointer; padding:0 2px; line-height:1; }
.sschat-attbtn:disabled{ opacity:.4; cursor:default; }
#sschat-attbar{ padding:8px 10px; background:#fff; border-top:1px solid #eef1f5; }
#sschat-attbar.sschat-hide{ display:none; }
.sschat-pend{ display:flex; align-items:center; gap:8px; background:#f4f0ff; border:1px solid #ddd4f5; border-radius:10px; padding:6px 8px; }
.sschat-pend-thumb img{ width:38px; height:38px; object-fit:cover; border-radius:7px; display:block; background:#e9e2fb; }
.sschat-pend-ico{ width:38px; height:38px; border-radius:7px; background:#e9e2fb; color:#6a3de8; display:flex; align-items:center; justify-content:center; font-size:18px; flex:none; }
.sschat-pend-nm{ flex:1; min-width:0; font-size:12px; color:#5a4a8a; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sschat-pend-x{ flex:none; background:#efe9fb; border:none; color:#6a3de8; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; padding:0; }
.sschat-pend-x:active{ background:#ddd4f5; }

/* 접속자 목록 */
#sschat-online{ display:none; position:absolute; left:0; right:0; top:0; bottom:0; background:#fff; z-index:3; flex-direction:column; border-radius:18px 18px 0 0; }
#sschat-online.sschat-on{ display:flex; }
#sschat-panel.sschat-mini #sschat-online{ border-radius:16px; }
.sschat-online-head{ background:linear-gradient(135deg,#8b6df0,#6a3de8); color:#fff; padding:11px 14px; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:space-between; }
.sschat-online-head button{ background:rgba(255,255,255,.25); border:none; color:#fff; border-radius:8px; padding:4px 11px; font-size:12px; cursor:pointer; }
#sschat-online-list{ flex:1; overflow-y:auto; padding:5px; }
.sschat-ou{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-bottom:1px solid #f0f3f7; }
.sschat-ou .sschat-nm{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.sschat-onm{ font-size:12.5px; font-weight:700; color:#2a323d; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sschat-otm{ font-size:11px; color:#7a869a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sschat-oact{ flex:none; display:flex; gap:4px; align-items:center; }
.sschat-wbtn{ flex:none; background:#ffe6f4; color:#c9257f; border:1px solid #ffcfe8; border-radius:100px; font-size:11px; font-weight:700; padding:3px 10px; cursor:pointer; }
/* 접속자 목록 친선 버튼 — 귓속말보다 한 단계 작게 */
.sschat-fbtn2{ flex:none; background:#e8f8ef; color:#15803d; border:1px solid #bbf0d0; border-radius:100px; font-size:10px; font-weight:800; padding:2px 7px; cursor:pointer; line-height:1.2; white-space:nowrap; }
.sschat-fbtn2:active{ background:#bbf0d0; }
.sschat-obtn-del{ flex:none; background:#fbe6e6; color:#c0392b; border:1px solid #f0c6c6; border-radius:100px; font-size:11px; font-weight:700; padding:3px 9px; cursor:pointer; }
.sschat-oempty{ padding:14px; color:#8b97a5; font-size:12px; text-align:center; }

/* 리사이즈 핸들 (미니 전용) */
#sschat-resize{ display:none; }
#sschat-panel.sschat-mini #sschat-resize{
  display:block; position:absolute; right:3px; bottom:3px; width:20px; height:20px; cursor:nwse-resize; z-index:5; touch-action:none;
  background:linear-gradient(135deg, transparent 45%, rgba(106,61,232,.4) 45%, rgba(106,61,232,.4) 58%, transparent 58%, transparent 72%, rgba(106,61,232,.4) 72%);
  border-radius:0 0 14px 0;
}

/* 하루 첫 대화 보상 +1 애니메이션 (기분좋은 출발) */
.sschat-reward{
  position:absolute; left:50%; top:48%; z-index:30;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  pointer-events:none;
  animation: sschat-reward-float 1.9s cubic-bezier(.18,.7,.25,1) forwards;
}
.sschat-reward-coin{
  width:56px; height:56px; border-radius:50%; box-sizing:border-box;
  background:radial-gradient(circle at 34% 30%, #fff6c0, #ffd23e 46%, #f5a623 100%);
  box-shadow:0 6px 18px rgba(245,166,35,.55), inset 0 -3px 6px rgba(180,110,0,.35), inset 0 3px 6px rgba(255,255,255,.6);
  color:#a86400; font-weight:900; font-size:27px; line-height:52px; text-align:center;
  border:2px solid #ffe694;
  animation: sschat-coin-spin 1.9s ease-out forwards;
}
.sschat-reward-plus{
  font-size:30px; font-weight:900; letter-spacing:-1px;
  color:#ff9d00; text-shadow:0 2px 10px rgba(255,150,0,.4), 0 0 2px #fff;
}
.sschat-reward-sub{
  font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#8b6df0,#6a3de8);
  padding:4px 12px; border-radius:100px; box-shadow:0 4px 12px rgba(106,61,232,.4);
  white-space:nowrap;
}
@keyframes sschat-reward-float{
  0%{ opacity:0; transform:translate(-50%,-30%) scale(.3); }
  15%{ opacity:1; transform:translate(-50%,-50%) scale(1.18); }
  28%{ transform:translate(-50%,-52%) scale(1); }
  70%{ opacity:1; transform:translate(-50%,-74%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-120%) scale(.95); }
}
@keyframes sschat-coin-spin{
  0%{ transform:rotateY(0deg) scale(.5); }
  45%{ transform:rotateY(360deg) scale(1.12); }
  65%{ transform:rotateY(540deg) scale(1); }
  100%{ transform:rotateY(720deg) scale(1); }
}


/* ---------- AI 도우미(스텔라) ---------- */
.sschat-aibtn{display:inline-flex;align-items:center;gap:4px;border:0;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-weight:700;font-size:11px;border-radius:14px;padding:2px 9px 2px 3px;cursor:pointer;line-height:1.6;margin-right:2px}
.sschat-aibtn img{width:20px;height:20px;border-radius:50%;object-fit:cover;background:#fff}
.sschat-aibtn.sschat-act{box-shadow:0 0 0 2px rgba(255,255,255,.65) inset}
.sschat-aito{display:inline-flex;align-items:center;gap:4px;background:#ede9fe;color:#6d28d9;font-weight:700;font-size:11px;border-radius:12px;padding:2px 8px 2px 3px;margin-right:4px;cursor:pointer;white-space:nowrap;flex:none}
.sschat-aito img{width:18px;height:18px;border-radius:50%;object-fit:cover;background:#fff}
.sschat-aiava img{background:#fff}
.sschat-aitag{display:inline-block;margin-left:4px;background:linear-gradient(135deg,#7c3aed,#4f46e5);color:#fff;font-size:9px;font-weight:800;border-radius:8px;padding:1px 5px;vertical-align:middle}
.sschat-aibub{background:linear-gradient(180deg,#f5f3ff,#ede9fe);border:1px solid #ddd6fe;color:#3b3663}
.sschat-aithink{color:#7c6fd0;font-style:italic}
.sschat-aidots i{display:inline-block;width:4px;height:4px;margin-left:3px;border-radius:50%;background:#8b5cf6;animation:sschat-aidot 1.2s infinite}
.sschat-aidots i:nth-child(2){animation-delay:.2s}
.sschat-aidots i:nth-child(3){animation-delay:.4s}
@keyframes sschat-aidot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---------- AI v2: 줄바꿈·공개버튼·캐릭터 피커 ---------- */
/* aiFmt가 라인단위 블록(<div>)으로 렌더 → white-space normal(pre-line이면 이중 줄바꿈) */
.sschat-aibub{white-space:normal}
/* 답변 서식: 소제목 / 리스트(마커+행잉인덴트) / 문단 / 간격 */
.sschat-aibub .sschat-aih{font-weight:800;color:#5b3fb0;font-size:12.5px;margin:9px 0 4px;letter-spacing:-.01em}
.sschat-aibub .sschat-aih:first-child{margin-top:0}
.sschat-aibub .sschat-aili{display:flex;gap:6px;align-items:baseline;margin:3px 0;line-height:1.45}
.sschat-aibub .sschat-aimk{flex:none;color:#7c3aed;font-weight:800;min-width:16px;text-align:center}
.sschat-aibub .sschat-aitx{flex:1;min-width:0;overflow-wrap:anywhere}
.sschat-aibub .sschat-aip{margin:3px 0;line-height:1.5}
.sschat-aibub .sschat-aip:first-child{margin-top:0}
.sschat-aibub .sschat-aisp{height:5px}
.sschat-aishare{color:#7c3aed;font-weight:700;cursor:pointer;margin-left:6px}
.sschat-aishared{color:#9ca3af;font-weight:700;margin-left:6px}
/* 질문형 메시지 → "AI에게 물어보기" 칩(시간줄 우측). 누르면 그 문장을 스텔라에게 질문 */
.sschat-askai{display:inline-flex;align-items:center;gap:3px;margin-left:6px;cursor:pointer;font-size:10px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:100px;padding:2px 9px;vertical-align:middle;white-space:nowrap;line-height:1.5;box-shadow:0 1px 3px rgba(124,58,237,.35)}
.sschat-askai .sschat-svg{width:11px;height:11px}
/* 선수 링크칩 옆 현 등급 배지(player_info.asp getGrade와 동일 색). S/A/B/C/D/E/전설(l) */
.sschat-grd{display:inline-block;font-size:8.5px;font-weight:900;line-height:1.2;padding:1px 4px;border-radius:5px;color:#fff;vertical-align:middle;margin-left:1px}
.sschat-grd-s{background:linear-gradient(135deg,#dc2626,#f87171);box-shadow:0 0 4px rgba(248,113,113,.5)}
.sschat-grd-l{background:#09090b;color:#fbbf24;border:1px solid rgba(251,191,36,.5);text-shadow:0 0 5px rgba(251,191,36,.8)}
.sschat-grd-a{background:#7c3aed}
.sschat-grd-b{background:#3b82f6}
.sschat-grd-c{background:#16a34a}
.sschat-grd-d{background:#ca8a04}
.sschat-grd-e{background:#64748b}
.sschat-askai:active{opacity:.82;transform:scale(.97)}
.sschat-aito span{max-width:64px;overflow:hidden;text-overflow:ellipsis}
.sschat-aito-x{font-style:normal;font-weight:800;color:#8b7bd8;padding:0 2px;margin-left:2px}
#sschat-aipick{position:absolute;top:42px;right:8px;background:#fff;border:1px solid #ddd6fe;border-radius:12px;box-shadow:0 8px 24px rgba(80,60,180,.28);padding:6px;z-index:40;min-width:220px;max-width:260px}
.sschat-aipick-t{font-size:11px;font-weight:800;color:#6d28d9;padding:4px 6px 6px}
.sschat-aipick-it{display:flex;align-items:center;gap:8px;padding:6px 7px;border-radius:9px;cursor:pointer;font-size:12px;font-weight:700;color:#374151}
.sschat-aipick-it:hover{background:#f5f3ff}
.sschat-aipick-it.sschat-act{background:#ede9fe;color:#6d28d9}
.sschat-aipick-it img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid #e5e7eb;flex-shrink:0}
.sschat-aipick-it i{font-style:normal;font-size:10px;color:#9ca3af;margin-left:auto;flex-shrink:0}
.sschat-aipick-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.sschat-aipick-txt span{display:flex;align-items:center;gap:4px}
.sschat-aipick-txt small{font-size:10px;font-weight:500;color:#8b86a8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sschat-aipick-smart{font-style:normal;font-size:9px;font-weight:800;color:#fff;background:linear-gradient(135deg,#7c3aed,#4f46e5);border-radius:7px;padding:1px 5px;white-space:nowrap}

/* AI v3: 영입 잠금 표시 */
.sschat-aipick-lock{opacity:.75}
.sschat-aipick-lock img{filter:grayscale(35%)}
.sschat-aipick-it i{font-style:normal;font-size:10px;font-weight:800;color:#7c3aed;margin-left:auto;background:#f5f3ff;border:1px solid #ddd6fe;border-radius:8px;padding:1px 6px}

/* AI v4: 답변 액션바(이어서 질문·리액션)+리액션 뱃지 */
.sschat-aiacts{display:flex;gap:6px;margin:4px 0 2px;align-items:center}
.sschat-aiacts button{border:1px solid #ddd6fe;background:#fff;border-radius:12px;padding:3px 9px;font-size:12px;cursor:pointer;line-height:1.4;color:#6d28d9;font-weight:700}
.sschat-aiacts button:hover{background:#f5f3ff}
.sschat-airct{font-size:12px}
.sschat-aibub[data-aimenu]{cursor:pointer}

/* AI v5: 답변 내 이미지(선수사진/엠블럼/뉴스) */
.sschat-aiimg{margin-top:6px}
.sschat-aiimg img{max-width:140px;max-height:140px;border-radius:10px;border:1px solid #ddd6fe;background:#fff;cursor:pointer}

/* AI v6: 엔티티 바로가기 칩 */
.sschat-ailnk{display:inline-block;background:#fff;border:1px solid #c4b5fd;color:#5b21b6;border-radius:10px;padding:1px 8px;margin:3px 4px 0 0;font-size:11px;font-weight:700;cursor:pointer}
.sschat-ailnk:hover{background:#f5f3ff}

/* ---------- 관리자 AI 통계 패널 ---------- */
/* 헤더 버튼 폭 과다로 줄바꿈/깨짐 방지 */
.sschat-hbtn{ max-width:72%; flex-wrap:wrap; justify-content:flex-end; row-gap:4px; }
.sschat-aibtn{ font-size:10px; padding:2px 7px 2px 3px; max-width:100%; }
.sschat-aibtn img{ width:18px; height:18px; }
.sschat-aistatsbtn{ background:linear-gradient(135deg,#0ea5e9,#2563eb)!important; padding-left:7px!important; }

/* 온라인 패널과 동일: 패널 전체 오버레이 */
#sschat-stats{
  display:none; flex-direction:column;
  position:absolute; left:0; right:0; top:0; bottom:0;
  z-index:40; background:#f1f5f9; overflow:hidden;
  border-radius:18px 18px 0 0;
}
#sschat-stats.sschat-on{ display:flex; }
#sschat-stats.sschat-hide{ display:none !important; }
#sschat-panel.sschat-mini #sschat-stats{ border-radius:16px; }

.sschat-stats-head{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; background:linear-gradient(135deg,#1e3a5f,#1e40af); color:#fff;
  font-weight:800; font-size:13px;
}
.sschat-stats-head span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sschat-stats-head button{
  flex:none; border:0; background:rgba(255,255,255,.22); color:#fff; border-radius:8px;
  padding:5px 11px; font-size:11px; font-weight:700; cursor:pointer;
}
.sschat-stats-days{
  flex:none; display:flex; gap:6px; padding:8px 12px; background:#fff;
  border-bottom:1px solid #e5e7eb;
}
.sschat-stats-d{
  border:1px solid #cbd5e1; background:#f1f5f9; color:#334155; border-radius:100px;
  padding:4px 12px; font-size:11px; font-weight:800; cursor:pointer;
}
.sschat-stats-d.sschat-act{ background:#2563eb; border-color:#2563eb; color:#fff; }
#sschat-stats-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:10px 12px 18px;
}
.sschat-stats-load{ text-align:center; color:#64748b; font-size:12px; padding:28px 8px; }

.sschat-stats-cards{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:6px; margin-bottom:12px;
}
@media (max-width:380px){
  .sschat-stats-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
.sschat-scard{
  background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:8px 4px; text-align:center; min-width:0;
}
.sschat-scard b{
  display:block; font-size:15px; font-weight:900; color:#1e293b; line-height:1.15;
  overflow:hidden; text-overflow:ellipsis;
}
.sschat-scard span{ display:block; font-size:9.5px; color:#64748b; font-weight:700; margin-top:2px; }
.sschat-scard.sschat-ok b{ color:#16a34a; }
.sschat-scard.sschat-err b{ color:#dc2626; }

.sschat-stats-sec{
  background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  padding:10px; margin-bottom:10px;
}
.sschat-stats-st{ font-size:12px; font-weight:800; color:#1e3a5f; margin-bottom:8px; }

/* 서버별 가로 바: 한 줄 고정(깨짐 방지) */
.sschat-srow{
  display:flex; align-items:center; gap:6px; margin:6px 0; flex-wrap:nowrap;
}
.sschat-stag{
  display:inline-flex; flex:none; min-width:34px; justify-content:center; align-items:center;
  color:#fff; font-size:10px; font-weight:900; border-radius:6px; padding:3px 6px; line-height:1.2;
}
.sschat-sbarw{
  flex:1 1 auto; min-width:40px; height:11px; background:#eef2ff;
  border-radius:100px; overflow:hidden;
}
.sschat-sbar{ height:100%; width:0; background:linear-gradient(90deg,#6366f1,#8b5cf6); border-radius:100px; }
.sschat-sbar.sschat-charbar{ background:linear-gradient(90deg,#7c3aed,#4f46e5); }
.sschat-sn{ flex:none; font-size:11px; font-weight:800; color:#0f172a; min-width:26px; text-align:right; }
.sschat-smeta{
  display:block; width:100%; font-size:10px; color:#94a3b8;
  padding-left:40px; margin:-2px 0 4px; box-sizing:border-box;
}

/* 일별 차트: % height 대신 고정 스택 높이 + px 세그먼트 */
.sschat-chart{
  display:flex; align-items:flex-end; gap:4px; height:132px;
  padding:6px 2px 0; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.sschat-ccol{
  flex:1 0 26px; min-width:22px; max-width:40px; height:120px;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}
.sschat-cstack{
  width:70%; height:92px; flex:none;
  display:flex; flex-direction:column-reverse; justify-content:flex-start;
  background:#eef2f7; border-radius:5px 5px 2px 2px; overflow:hidden;
}
.sschat-cseg{ width:100%; flex:none; min-height:2px; box-sizing:border-box; }
.sschat-clab{
  font-size:9px; color:#64748b; margin-top:4px; white-space:nowrap; line-height:1;
}
.sschat-cn{ font-size:9px; font-weight:800; color:#334155; line-height:1.1; margin-top:2px; }