@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#070b13;--panel:#0d1421;--panel-2:#101927;--panel-3:#131e2f;--text:#f5f7fb;--muted:#8e9aab;--line:#1e2a3b;--line-strong:#2a3850;
  --accent:#8b5cf6;--accent-rgb:139,92,246;--accent-2:#5b4bf6;--success:#21d08b;--danger:#ff5b6e;--warning:#f9bd4a;
  --shadow:0 26px 80px rgba(0,0,0,.36);--radius:18px;--topbar:70px;--sidebar:294px;--rightbar:342px;
}
html[data-theme="light"]{--bg:#f4f6fa;--panel:#fff;--panel-2:#f9fbfd;--panel-3:#f1f4f8;--text:#182031;--muted:#748096;--line:#e3e8ef;--line-strong:#d4dce7;--shadow:0 24px 70px rgba(30,44,70,.12)}
html[data-accent="blue"]{--accent:#3388ff;--accent-rgb:51,136,255;--accent-2:#25b9ff}
html[data-accent="emerald"]{--accent:#13b981;--accent-rgb:19,185,129;--accent-2:#0bd2ae}
html[data-accent="rose"]{--accent:#f43f76;--accent-rgb:244,63,118;--accent-2:#fb7185}
html[data-accent="orange"]{--accent:#f08a24;--accent-rgb:240,138,36;--accent-2:#ffb020}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;min-height:100%;overflow:hidden;background:radial-gradient(circle at 74% -10%,rgba(var(--accent-rgb),.12),transparent 30%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif}button,input,textarea{font:inherit}.app-shell{width:100%;height:100vh;height:100dvh;min-height:0;display:grid;grid-template-columns:var(--sidebar) minmax(520px,1fr) var(--rightbar);overflow:hidden}.sidebar,.rightbar{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel) 88%,transparent));border-color:var(--line);position:relative;z-index:3}.sidebar{height:100%;min-height:0;overflow:hidden;border-right:1px solid var(--line);padding:25px 18px 18px;display:flex;flex-direction:column;gap:20px}.brand{display:flex;align-items:center;gap:12px;padding:2px 8px 18px}.brand-mark{width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--accent-2),var(--accent));position:relative;box-shadow:0 0 28px rgba(var(--accent-rgb),.22)}.brand-mark:before,.brand-mark:after{content:"";position:absolute;background:var(--panel);border-radius:50%}.brand-mark:before{width:19px;height:19px;left:9px;top:10px}.brand-mark:after{width:14px;height:14px;right:7px;bottom:8px}.brand-mark span{position:absolute;width:10px;height:18px;background:var(--panel);transform:rotate(42deg);left:19px;bottom:6px;border-radius:6px}.brand-mark i{position:absolute;right:-6px;top:-6px;background:var(--panel);border:1px solid var(--line);color:var(--accent);font-weight:800;font-style:normal;font-size:12px;border-radius:9px;padding:2px 5px}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:23px;letter-spacing:.3px}.brand-copy strong span{color:var(--accent)}.brand-copy small{letter-spacing:5px;color:var(--accent);font-size:10px;margin-top:7px}.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);display:inline-grid;place-items:center;cursor:pointer;transition:.2s}.icon-btn:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--text);background:rgba(var(--accent-rgb),.08)}.icon-btn.tiny{width:30px;height:30px}.sidebar-close,.rightbar-close{display:none;margin-left:auto}.main-nav{display:grid;gap:7px}.nav-item{text-decoration:none;color:var(--muted);display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:13px;position:relative;transition:.2s;border:1px solid transparent}.nav-item:hover{background:var(--panel-2);color:var(--text)}.nav-item.active{color:var(--text);border-color:rgba(var(--accent-rgb),.55);background:linear-gradient(90deg,rgba(var(--accent-rgb),.17),rgba(var(--accent-rgb),.06));box-shadow:inset 3px 0 0 var(--accent)}.nav-icon{width:25px;text-align:center;font-size:20px}.nav-icon.flag{font-size:18px}.nav-item b{font-weight:500}.nav-item em{font-style:normal;margin-left:auto;background:rgba(var(--accent-rgb),.16);color:var(--accent);font-size:12px;padding:4px 8px;border-radius:999px}.new-tag{margin-left:auto;font-size:9px;color:#fff;background:var(--accent);padding:4px 7px;border-radius:7px}.plus-promo{margin-top:auto;border:1px solid rgba(var(--accent-rgb),.45);border-radius:17px;padding:17px;background:linear-gradient(150deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.03));box-shadow:0 14px 40px rgba(var(--accent-rgb),.06)}.plus-title{display:flex;gap:8px;align-items:center}.plus-title span{color:var(--accent);font-size:22px}.plus-title strong{font-size:13px}.plus-promo p{font-size:12px;line-height:1.7;color:var(--muted);margin:10px 0 14px}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer}.btn-accent{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));width:100%;box-shadow:0 8px 25px rgba(var(--accent-rgb),.25)}.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.45);padding:8px 14px}.my-card{border:1px solid var(--line);border-radius:16px;background:var(--panel-2);padding:13px}.user-row{display:flex;align-items:center;gap:10px}.user-row.compact .user-meta{flex:1}.user-meta{display:flex;flex-direction:column;gap:4px}.user-meta strong{font-size:13px}.user-meta span{font-size:11px;color:var(--muted)}.xp-track{height:4px;background:var(--line);border-radius:99px;margin:12px 0 10px;overflow:hidden}.xp-track span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:inherit}.point-row{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.point-row strong{color:var(--text)}
.workspace{height:100vh;height:100dvh;min-height:0;overflow:hidden;display:grid;grid-template-rows:var(--topbar) auto auto minmax(0,1fr) auto;background:linear-gradient(180deg,rgba(var(--accent-rgb),.02),transparent 26%)}.topbar{display:flex;align-items:center;gap:16px;padding:13px 28px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 76%,transparent);backdrop-filter:blur(18px);position:sticky;top:0;z-index:4}.mobile-menu,.members-toggle{display:none}.searchbox{max-width:700px;flex:1;display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:0 14px;height:44px}.searchbox input{border:0;outline:0;background:transparent;color:var(--text);flex:1;min-width:0}.searchbox input::placeholder{color:var(--muted)}.searchbox kbd{font-size:11px;background:var(--panel-3);border:1px solid var(--line);border-radius:7px;padding:4px 6px;color:var(--muted)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:9px}.plus-chip{height:40px;border:1px solid rgba(var(--accent-rgb),.65);border-radius:12px;padding:0 16px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.04));color:var(--accent);font-weight:800;box-shadow:0 0 24px rgba(var(--accent-rgb),.08);cursor:pointer}.room-head{padding:24px 30px 18px;display:flex;align-items:center;justify-content:space-between;gap:18px}.room-title-wrap{display:flex;align-items:center;gap:15px}.turkey-orb{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:27px;background:radial-gradient(circle at 35% 30%,#ff6371,#cf1732 72%);box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 12px 28px rgba(222,26,54,.18)}.turkey-orb.small{width:44px;height:44px;font-size:21px}.room-head h1{font-size:27px;margin:0 0 6px}.room-head p{margin:0;color:var(--muted);font-size:12px}.room-head p i{font-style:normal;margin:0 7px}.online-dot{display:inline-block;width:8px;height:8px;background:var(--success);border-radius:50%;box-shadow:0 0 12px rgba(33,208,139,.55);margin-right:4px}.room-actions{display:flex;gap:8px}.announcement{margin:0 30px 15px;border:1px solid rgba(var(--accent-rgb),.28);background:linear-gradient(90deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.04));border-radius:14px;display:flex;align-items:center;gap:12px;padding:10px 13px;color:var(--muted)}.announcement p{margin:0;flex:1;font-size:12px}.announcement strong{color:var(--accent)}.megaphone{color:var(--accent);font-size:22px}.chat-stream{min-height:0;overflow:auto;padding:10px 30px 10px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}.message{display:grid;grid-template-columns:48px minmax(0,1fr);gap:13px;margin:0 0 14px;max-width:840px}.message-body{min-width:0}.message-head{display:flex;align-items:center;gap:8px;margin:2px 0 7px}.message-head strong{font-size:13px}.message-head time{font-size:10px;color:var(--muted)}.role-badge{font-size:9px;font-weight:800;padding:4px 7px;border-radius:7px;border:1px solid transparent}.role-badge.owner{color:#f1f4f8;background:#11151d;border-color:#343b47;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}.role-badge.main-admin,.role-badge.admin{color:#ffab55;background:rgba(255,147,24,.12);border-color:rgba(255,147,24,.34)}.role-badge.mod{color:#fff;background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.32)}.role-badge.plus{color:#f6be4a;background:rgba(246,190,74,.11);border-color:rgba(246,190,74,.2)}.role-badge.member{color:#69adff;background:rgba(59,151,255,.12);border-color:rgba(59,151,255,.30)}.role-badge.guest{color:#51df95;background:rgba(49,215,125,.11);border-color:rgba(49,215,125,.30)}.bubble{position:relative;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 92%,var(--accent) 8%));padding:15px 50px 15px 17px;box-shadow:0 8px 26px rgba(0,0,0,.08)}.bubble p{margin:0;font-size:13px;line-height:1.65;color:color-mix(in srgb,var(--text) 90%,var(--muted))}.dots{position:absolute;right:12px;top:10px;background:transparent;border:0;color:var(--muted);cursor:pointer}.reactions{display:flex;gap:7px;margin-top:7px}.reactions button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-size:11px;padding:5px 9px;border-radius:999px;cursor:pointer}.reactions button:hover{border-color:rgba(var(--accent-rgb),.4);color:var(--text)}.reactions .react-add{padding-inline:8px}.avatar{width:44px;height:44px;border-radius:50%;display:inline-grid;place-items:center;color:#fff;font-size:11px;font-weight:800;position:relative;flex:0 0 auto;border:2px solid color-mix(in srgb,var(--panel) 88%,white 12%);box-shadow:0 0 0 1px var(--line)}.avatar.small{width:28px;height:28px}.avatar-gradient.purple{background:linear-gradient(135deg,#8b5cf6,#3b246e)}.avatar-gradient.blue{background:linear-gradient(135deg,#358cff,#17356d)}.avatar-gradient.cyan{background:linear-gradient(135deg,#18c7d8,#145468)}.avatar-gradient.green{background:linear-gradient(135deg,#20c888,#14583d)}.avatar-gradient.rose{background:linear-gradient(135deg,#f4568a,#74203d)}.avatar-gradient.amber{background:linear-gradient(135deg,#f5ad3d,#77471a)}.avatar-gradient.slate{background:linear-gradient(135deg,#75839b,#333b49)}.presence{position:absolute;right:-1px;bottom:1px;width:10px;height:10px;border-radius:50%;background:var(--success);border:2px solid var(--panel)}.typing{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;margin:8px 0 8px 2px}.typing span{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:typing 1.2s infinite}.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.composer-wrap{padding:12px 30px 22px}.composer{border:1px solid var(--line-strong);background:linear-gradient(145deg,var(--panel-2),var(--panel));border-radius:17px;display:flex;align-items:center;gap:10px;padding:10px 11px;box-shadow:0 14px 35px rgba(0,0,0,.12)}.composer:focus-within{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)}.composer-tools{display:flex;gap:6px}.composer-tools button{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);background:var(--panel-3);color:var(--muted);cursor:pointer}.composer-tools button.gif{font-size:10px;font-weight:800}.composer textarea{resize:none;flex:1;min-height:38px;max-height:100px;border:0;outline:0;background:transparent;color:var(--text);padding:9px 6px}.composer textarea::placeholder{color:var(--muted)}.char-count{font-size:9px;color:var(--muted);white-space:nowrap}.send-btn{width:44px;height:44px;border:0;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 8px 24px rgba(var(--accent-rgb),.28);cursor:pointer;font-size:19px}
.rightbar{height:100%;min-height:0;overflow:hidden;border-left:1px solid var(--line);padding:17px 13px 14px;display:flex;flex-direction:column}.rightbar-head{display:flex;align-items:center;gap:10px;padding:5px 3px 11px}.rightbar-head strong{font-size:13px}.rightbar-head span{font-size:10px;margin-left:auto;color:var(--muted);background:var(--panel-3);border:1px solid var(--line);padding:4px 7px;border-radius:7px}.member-scroll{flex:1 1 auto;overflow:auto;min-height:0;padding-right:2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.member-group{padding:7px 0 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent)}.member-group h3{font-size:9px;line-height:1.2;letter-spacing:.075em;text-transform:uppercase;margin:0 6px 5px;color:var(--muted);font-weight:800}.member-group h3 small{font-size:8px;font-weight:600;letter-spacing:0;text-transform:none;opacity:.72}.plus-group h3{color:#e8b949}.group-cyan{color:#55dfe5}.group-blue{color:#579cff}.group-green{color:#36d98c}.member-row{width:100%;min-height:36px;border:0;background:transparent;color:var(--text);display:grid;grid-template-columns:27px minmax(0,1fr);align-items:center;gap:6px;padding:3px 5px;border-radius:7px;text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease}.member-row:hover,.member-row:focus-visible{background:color-mix(in srgb,var(--panel-2) 86%,var(--accent) 14%);outline:none}.member-pawn-slot{position:relative;width:27px;height:30px;display:grid;place-items:center;align-self:center}.member-pawn-slot>.com2-pawn{margin:0;transform:scale(.92);transform-origin:center}.member-pawn-slot>.com2-pawn.pawn-premium,.member-pawn-slot>.com2-pawn.pawn-black{transform:scale(.88)}.member-presence-dot{position:absolute;right:1px;bottom:2px;width:6px;height:6px;border-radius:50%;background:var(--success);border:1.5px solid var(--panel);box-shadow:0 0 6px rgba(33,208,139,.38);z-index:8}.member-copy{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.16}.member-name-line{display:block;min-width:0;max-width:100%;overflow:hidden}.member-row b{display:block;max-width:100%;font-size:11px;line-height:1.25;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-status{display:block;max-width:100%;font-size:8.5px!important;line-height:1.28;color:var(--muted)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.member-status::before{content:none}.muted-group{opacity:.65}.guest-line{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;padding:5px}.guest-line{position:relative}.room-card{flex:0 0 auto;margin-top:14px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--panel-2),var(--panel));padding:14px}.card-title{display:flex;justify-content:space-between;font-size:11px;margin-bottom:13px}.card-title span{color:var(--muted)}.room-mini{display:flex;gap:10px;align-items:center}.room-mini>div:last-child{display:flex;flex-direction:column;gap:4px}.room-mini b{font-size:12px}.room-mini span{font-size:8px;background:var(--panel-3);border:1px solid var(--line);border-radius:5px;color:var(--muted);padding:3px 5px}.room-card p{font-size:9px;line-height:1.6;color:var(--muted);margin:13px 0}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.stats div{display:flex;flex-direction:column;gap:3px}.stats b{font-size:12px}.stats span{font-size:7px;color:var(--muted)}
.popover{position:fixed;z-index:20;border:1px solid var(--line-strong);background:color-mix(in srgb,var(--panel) 95%,transparent);backdrop-filter:blur(22px);border-radius:16px;box-shadow:var(--shadow)}.theme-popover{width:255px;right:360px;top:82px;padding:15px}.popover-title{display:flex;justify-content:space-between;align-items:center}.popover-title button{border:0;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.mode-switch button,.palette-list button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:10px;padding:10px;cursor:pointer}.mode-switch button.active{border-color:rgba(var(--accent-rgb),.6);color:var(--text);background:rgba(var(--accent-rgb),.10)}.theme-popover h4{font-size:11px;margin:0 0 8px}.palette-list{display:grid;gap:5px}.palette-list button{display:flex;align-items:center;gap:8px;text-align:left}.palette-list button span{margin-left:auto;opacity:0}.palette-list button.active{border-color:rgba(var(--accent-rgb),.58);background:rgba(var(--accent-rgb),.09);color:var(--text)}.palette-list button.active span{opacity:1}.swatch{width:17px;height:17px;border-radius:50%}.swatch.purple{background:#8b5cf6}.swatch.blue{background:#3388ff}.swatch.emerald{background:#13b981}.swatch.rose{background:#f43f76}.swatch.orange{background:#f08a24}.theme-popover>small{display:block;color:var(--muted);font-size:9px;margin:12px 0 6px}.palette-preview{height:30px;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}.profile-popover{width:230px;padding:13px}.profile-top{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center}.profile-top .avatar{width:40px;height:40px}.profile-top>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.profile-top strong{font-size:12px}.profile-top span{font-size:9px;color:var(--muted)}.profile-actions{display:grid;margin-top:11px}.profile-actions button{border:0;background:transparent;color:var(--muted);text-align:left;padding:8px;border-radius:7px;font-size:10px;cursor:pointer}.profile-actions button:hover{background:var(--panel-2);color:var(--text)}.profile-actions hr{border:0;border-top:1px solid var(--line);width:100%}.profile-actions .danger{color:var(--danger)}.toast{position:fixed;left:50%;bottom:28px;z-index:50;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--panel);color:var(--text);border:1px solid var(--line-strong);box-shadow:var(--shadow);padding:12px 16px;border-radius:12px;font-size:11px;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}.backdrop{position:fixed;inset:0;background:rgba(2,5,10,.45);z-index:8;opacity:0;pointer-events:none;transition:.25s}
@media(max-height:900px) and (min-width:721px){
  :root{--topbar:58px}
  .sidebar{padding:14px 13px 11px;gap:8px}
  .brand{padding:0 7px 6px;gap:10px}.brand-mark{width:39px;height:39px;border-radius:13px}.brand-mark:before{width:16px;height:16px;left:8px;top:8px}.brand-mark:after{width:12px;height:12px;right:6px;bottom:7px}.brand-mark span{width:8px;height:15px;left:16px;bottom:5px}.brand-copy strong{font-size:20px}.brand-copy small{font-size:8px;letter-spacing:4px;margin-top:5px}
  .main-nav{gap:2px}.nav-item{padding:8px 10px;border-radius:10px;gap:10px}.nav-icon{width:23px;font-size:17px}.nav-item b{font-size:13px}.nav-item em{font-size:10px;padding:3px 6px}.new-tag{font-size:8px;padding:3px 6px}
  .plus-promo{padding:10px 12px;border-radius:13px}.plus-title span{font-size:18px}.plus-title strong{font-size:11px}.plus-promo p{font-size:9px;line-height:1.45;margin:5px 0 7px}.plus-promo .btn{padding:7px 10px;font-size:11px}
  .my-card{padding:9px 10px;border-radius:13px}.my-card .avatar{width:36px;height:36px}.user-meta strong{font-size:11px}.user-meta span{font-size:9px}.xp-track{margin:7px 0 6px}.point-row{font-size:9px}
  .topbar{padding:8px 22px}.searchbox{height:39px}.icon-btn{width:36px;height:36px}.plus-chip{height:36px}
  .room-head{padding:14px 24px 10px}.turkey-orb{width:44px;height:44px;font-size:21px}.room-head h1{font-size:23px;margin-bottom:4px}.room-head p{font-size:10px}
  .announcement{margin:0 24px 8px;padding:7px 10px;border-radius:11px}.announcement p{font-size:10px}.megaphone{font-size:18px}.announcement .btn{padding:6px 10px;font-size:10px}
  .chat-stream{padding:6px 24px 5px}.message{grid-template-columns:40px minmax(0,1fr);gap:10px;margin-bottom:8px;max-width:780px}.message>.avatar{width:38px;height:38px}.message-head{margin:1px 0 5px}.message-head strong{font-size:11px}.message-head time{font-size:9px}.role-badge{font-size:8px;padding:3px 6px}.bubble{padding:10px 42px 10px 13px;border-radius:12px}.bubble p{font-size:11px;line-height:1.45}.reactions{margin-top:5px}.reactions button{font-size:9px;padding:4px 7px}.typing{margin:5px 0;font-size:9px}
  .composer-wrap{padding:7px 24px 10px}.composer{padding:6px 8px;border-radius:14px}.composer-tools button{width:33px;height:33px}.composer textarea{min-height:32px;padding:7px 5px;font-size:11px}.send-btn{width:39px;height:39px}.char-count{font-size:8px}
  .rightbar{padding:10px 10px 10px}.rightbar-head{padding:3px 2px 7px}.member-group{padding:3px 0 5px}.member-group h3{font-size:8px;margin:0 5px 3px}.member-row{grid-template-columns:24px minmax(0,1fr);min-height:31px;gap:5px;padding:2px 4px}.member-pawn-slot{width:24px;height:27px}.member-pawn-slot>.com2-pawn{transform:scale(.82)}.member-pawn-slot>.com2-pawn.pawn-premium,.member-pawn-slot>.com2-pawn.pawn-black{transform:scale(.78)}.member-row b{font-size:9px}.member-status{font-size:7px!important}.room-card{margin-top:7px;padding:9px;border-radius:12px}.card-title{margin-bottom:8px}.room-mini .turkey-orb.small{width:34px;height:34px;font-size:16px}.room-card p{font-size:7px;line-height:1.4;margin:7px 0}.stats b{font-size:10px}.stats span{font-size:6px}
  .theme-popover{top:66px}
}
@media(max-width:1180px){:root{--sidebar:250px;--rightbar:300px}.sidebar{padding-inline:13px}.theme-popover{right:315px}.plus-chip{display:none}.message{max-width:none}}
@media(max-width:940px){.app-shell{grid-template-columns:240px minmax(0,1fr)}.rightbar{position:fixed;right:0;top:0;bottom:0;width:min(340px,90vw);transform:translateX(102%);transition:.25s;z-index:12;box-shadow:var(--shadow)}.rightbar.open{transform:translateX(0)}.members-toggle,.rightbar-close{display:inline-grid}.theme-popover{right:20px}.backdrop.show{opacity:1;pointer-events:auto}.room-card{margin-bottom:15px}}
@media(max-width:720px){.app-shell{display:block}.sidebar{position:fixed;left:0;top:0;bottom:0;width:min(300px,88vw);transform:translateX(-102%);transition:.25s;z-index:15;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.sidebar-close,.mobile-menu{display:inline-grid}.workspace{min-height:100vh}.topbar{padding:10px 13px;gap:8px}.searchbox{height:40px}.searchbox kbd{display:none}.top-actions{gap:5px}.top-actions>.icon-btn:first-child{display:none}.room-head{padding:18px 15px 13px}.room-head h1{font-size:23px}.turkey-orb{width:46px;height:46px;font-size:22px}.room-actions{display:none}.announcement{margin:0 15px 9px}.announcement .btn{display:none}.chat-stream{padding:8px 15px}.message{grid-template-columns:40px minmax(0,1fr);gap:9px}.message>.avatar{width:38px;height:38px}.bubble{padding:12px 38px 12px 13px}.bubble p{font-size:12px}.composer-wrap{padding:8px 12px 14px}.composer{gap:6px}.composer-tools button{width:34px;height:34px}.composer-tools button:nth-child(3){display:none}.char-count{display:none}.send-btn{width:40px;height:40px}.theme-popover{right:10px;top:62px;width:min(260px,calc(100vw - 20px))}.rightbar{width:min(340px,92vw)}}
@media(max-width:430px){.searchbox input::placeholder{font-size:11px}.room-head p{font-size:10px}.announcement p{font-size:10px}.message-head{flex-wrap:wrap}.role-badge{font-size:8px}.composer-tools button.gif{display:none}.my-card{margin-bottom:8px}}

/* COM2 Chat v2.2 — mobile viewport refinements */
@media (max-width:720px){
  html,body{width:100%;max-width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
  .app-shell{width:100%;max-width:100vw;height:100dvh;overflow:hidden}
  .workspace{width:100%;max-width:100vw;height:100dvh;min-height:0;overflow:hidden;grid-template-rows:58px auto auto minmax(0,1fr) auto}
  .topbar{width:100%;min-width:0;padding:8px 10px;gap:7px;overflow:hidden}
  .mobile-menu{flex:0 0 38px;width:38px;height:38px}
  .searchbox{min-width:0;max-width:none;width:auto;height:38px;padding:0 10px;gap:7px;border-radius:11px}
  .searchbox input{min-width:0;width:100%;font-size:11px}
  .top-actions{min-width:0;flex:0 0 auto;gap:5px}
  .top-actions .icon-btn{width:38px;height:38px;flex:0 0 38px}
  .plus-chip{display:none}
  .members-toggle{display:inline-grid}

  .room-head{min-width:0;padding:12px 12px 9px;gap:9px}
  .room-title-wrap{min-width:0;gap:10px}
  .turkey-orb{width:40px;height:40px;flex:0 0 40px;font-size:19px}
  .room-head h1{font-size:21px;line-height:1.05;margin-bottom:4px}
  .room-head p{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 76px)}

  .announcement{min-width:0;margin:0 10px 7px;padding:8px 10px;gap:8px;border-radius:11px;overflow:hidden}
  .announcement .megaphone{font-size:17px;flex:0 0 auto}
  .announcement p{font-size:9px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  .chat-stream{width:100%;min-width:0;padding:7px 10px 6px;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .message{width:100%;max-width:100%;grid-template-columns:34px minmax(0,1fr);gap:8px;margin-bottom:11px}
  .message>.avatar{width:32px;height:32px;font-size:9px;border-width:1px}
  .presence{width:8px;height:8px;border-width:1.5px}
  .message-head{min-width:0;gap:5px;margin:0 0 5px;flex-wrap:nowrap}
  .message-head strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .message-head time{font-size:8px;flex:0 0 auto}
  .role-badge{font-size:7px;padding:3px 5px;white-space:nowrap;flex:0 0 auto}
  .bubble{width:100%;max-width:100%;min-width:0;padding:10px 30px 10px 11px;border-radius:12px;overflow:hidden}
  .bubble p{font-size:10.5px;line-height:1.5;overflow-wrap:anywhere;word-break:normal}
  .dots{right:8px;top:7px;font-size:10px;padding:3px}
  .reactions{gap:5px;margin-top:5px;flex-wrap:wrap}
  .reactions button{font-size:9px;padding:4px 7px}
  .typing{font-size:9px;margin:5px 0 3px 1px}
  .typing span{width:5px;height:5px}

  .composer-wrap{width:100%;min-width:0;padding:7px 8px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,var(--bg) 34%)}
  .composer{width:100%;max-width:100%;min-width:0;gap:5px;padding:6px;border-radius:13px;overflow:hidden}
  .composer-tools{flex:0 0 auto;gap:4px}
  .composer-tools button{width:32px;height:32px;flex:0 0 32px;border-radius:9px}
  .composer textarea{min-width:0;width:0;flex:1 1 0;min-height:32px;max-height:74px;padding:7px 4px;font-size:11px;line-height:1.35}
  .send-btn{width:38px;height:38px;flex:0 0 38px;border-radius:11px;font-size:16px}

  .theme-popover{position:fixed;left:10px;right:10px;top:64px;width:auto;max-height:calc(100dvh - 76px);overflow:auto}
  .profile-popover{position:fixed!important;left:10px!important;right:10px!important;bottom:10px;top:auto!important;width:auto!important;max-width:none!important}
}

@media (max-width:430px){
  .topbar{padding-inline:8px}
  .searchbox{padding-inline:9px}
  .searchbox span{font-size:11px}
  .searchbox input::placeholder{font-size:10px}
  .top-actions .icon-btn{width:36px;height:36px;flex-basis:36px}
  .mobile-menu{width:36px;height:36px;flex-basis:36px}
  .room-head{padding-inline:10px}
  .announcement{margin-inline:8px}
  .chat-stream{padding-inline:8px}
  .message{grid-template-columns:32px minmax(0,1fr);gap:7px}
  .message>.avatar{width:30px;height:30px}
  .message-head strong{max-width:36vw}
  .bubble{padding-right:28px}
  .composer-wrap{padding-inline:7px}
  .composer-tools button.gif,.composer-tools button:nth-child(3){display:none}
}

@media (max-width:360px){
  .searchbox input{display:none}
  .searchbox{flex:0 0 38px;width:38px;padding:0;justify-content:center}
  .searchbox span{font-size:16px}
  .room-head p i,.room-head p i+*{display:none}
  .message-head strong{max-width:31vw}
}

/* COM2 Chat v3 Core — giriş / kayıt */
body.auth-body{overflow:auto;min-height:100vh;background:radial-gradient(circle at 18% 5%,rgba(var(--accent-rgb),.20),transparent 32%),radial-gradient(circle at 85% 90%,rgba(35,196,210,.09),transparent 28%),var(--bg)}
.auth-shell{width:min(1120px,calc(100% - 32px));min-height:min(720px,calc(100vh - 48px));margin:24px auto;display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:var(--shadow)}
.auth-hero{padding:64px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(150deg,rgba(var(--accent-rgb),.10),transparent 60%);border-right:1px solid var(--line)}
.auth-brand{display:flex;align-items:center;gap:14px;margin-bottom:48px}.auth-brand>div:last-child{display:flex;flex-direction:column}.auth-brand strong{font-size:28px}.auth-brand strong span{color:var(--accent)}.auth-brand small{letter-spacing:6px;color:var(--accent);font-size:10px;margin-top:5px}
.auth-kicker{width:max-content;border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08);color:var(--accent);border-radius:999px;padding:7px 10px;font-size:10px;font-weight:800;letter-spacing:.4px}.auth-hero h1{font-size:46px;line-height:1.08;margin:18px 0 16px;max-width:560px}.auth-hero>p{max-width:560px;color:var(--muted);line-height:1.8;font-size:14px}.auth-points{display:grid;gap:12px;margin-top:28px;color:color-mix(in srgb,var(--text) 78%,var(--muted));font-size:12px}.auth-points span::first-letter{color:var(--success)}
.auth-panel{padding:40px;display:flex;flex-direction:column;justify-content:center;position:relative}.auth-alert{border-radius:12px;padding:11px 13px;margin-bottom:14px;font-size:11px}.auth-alert.error{background:rgba(255,91,110,.10);border:1px solid rgba(255,91,110,.28);color:#ff9aaa}.auth-alert.success{background:rgba(33,208,139,.10);border:1px solid rgba(33,208,139,.28);color:#8ff0c8}
.auth-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;background:var(--panel-2);border:1px solid var(--line);padding:5px;border-radius:13px;margin-bottom:26px}.auth-tabs button{border:0;background:transparent;color:var(--muted);padding:10px 8px;border-radius:9px;cursor:pointer;font-size:11px;font-weight:700}.auth-tabs button.active{color:var(--text);background:rgba(var(--accent-rgb),.12);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.24)}
.auth-pane{display:none}.auth-pane.active{display:block}.auth-pane h2{font-size:24px;margin:0 0 7px}.auth-pane>p{font-size:12px;color:var(--muted);line-height:1.6;margin:0 0 20px}.auth-pane form{display:grid;gap:13px}.auth-pane label{display:grid;gap:7px;font-size:10px;color:var(--muted);font-weight:700}.auth-pane input{width:100%;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--text);border-radius:12px;padding:13px 14px;outline:none}.auth-pane input:focus{border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)}.auth-primary{margin-top:3px;border:0;border-radius:12px;padding:13px 16px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:800;cursor:pointer;box-shadow:0 10px 26px rgba(var(--accent-rgb),.22)}.auth-note{display:block;color:var(--muted);font-size:9px;line-height:1.6;margin-top:14px}.composer.sending{opacity:.72;pointer-events:none}
@media(max-width:820px){body.auth-body{overflow:auto}.auth-shell{grid-template-columns:1fr;min-height:0}.auth-hero{padding:34px;border-right:0;border-bottom:1px solid var(--line)}.auth-brand{margin-bottom:24px}.auth-hero h1{font-size:34px}.auth-points{display:none}.auth-panel{padding:28px 26px}}
@media(max-width:480px){.auth-shell{width:calc(100% - 20px);margin:10px auto;border-radius:20px}.auth-hero{padding:24px}.auth-brand .brand-mark{width:42px;height:42px}.auth-hero h1{font-size:28px}.auth-hero>p{font-size:12px}.auth-panel{padding:22px 18px}.auth-tabs button{font-size:9px}.auth-pane h2{font-size:21px}}

/* COM2 Chat v3.1 Social */
.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;background:var(--accent);color:#fff;font-size:9px;font-weight:800;box-shadow:0 6px 18px rgba(var(--accent-rgb),.25)}
.nav-badge[hidden]{display:none}
.social-overlay{position:fixed;inset:0;z-index:40;background:rgba(2,6,14,.62);backdrop-filter:blur(7px);display:flex;justify-content:flex-end;padding:14px}
.social-overlay[hidden]{display:none}
.social-panel{width:min(560px,calc(100vw - 28px));height:calc(100dvh - 28px);min-height:0;border:1px solid var(--line-strong);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,transparent),color-mix(in srgb,var(--panel-2) 96%,transparent));box-shadow:var(--shadow);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;animation:socialIn .18s ease-out}
@keyframes socialIn{from{transform:translateX(18px);opacity:.3}to{transform:none;opacity:1}}
.social-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 17px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),transparent)}
.social-panel>header h2{margin:2px 0 0;font-size:21px}.social-kicker{font-size:8px;letter-spacing:1.5px;color:var(--accent);font-weight:800}.social-body{min-height:0;overflow:auto;padding:18px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}.social-loading,.social-empty,.social-error{border:1px dashed var(--line-strong);border-radius:15px;padding:24px;color:var(--muted);font-size:12px;line-height:1.65;text-align:center}.social-error{color:#ff8e9a;border-color:rgba(255,91,110,.35);background:rgba(255,91,110,.05)}
.social-profile-card,.social-section{border:1px solid var(--line);border-radius:18px;background:var(--panel-2);padding:18px}.social-section+.social-section{margin-top:14px}.social-section h3{margin:0 0 13px;font-size:13px}.social-profile-hero{display:flex;align-items:center;gap:14px}.avatar.large{width:68px;height:68px;font-size:18px}.social-profile-hero h3{margin:0 0 4px;font-size:20px}.muted{color:var(--muted)!important}.social-profile-hero p{margin:0;font-size:11px}.profile-chip-row{display:flex;gap:7px;align-items:center;margin-top:9px}.soft-chip{font-size:9px;border:1px solid var(--line);background:var(--panel-3);border-radius:999px;padding:5px 8px;color:var(--muted)}.profile-bio{margin:18px 0;color:color-mix(in srgb,var(--text) 84%,var(--muted));font-size:12px;line-height:1.7}.profile-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.profile-stats>div{border:1px solid var(--line);background:var(--panel-3);border-radius:12px;padding:11px;text-align:center;display:flex;flex-direction:column;gap:4px}.profile-stats b{font-size:13px}.profile-stats span{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.social-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.social-actions button,.social-toolbar button,.mini,.back-btn,.dm-composer button{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:9px 11px;font-size:10px;font-weight:700;cursor:pointer}.social-actions button.primary,.mini.primary,.dm-composer button.primary{border-color:rgba(var(--accent-rgb),.5);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}.social-actions button.danger-soft{color:#ff8f9c;border-color:rgba(255,91,110,.28);background:rgba(255,91,110,.06)}.social-actions button:disabled{opacity:.55;cursor:default}.social-hint{color:var(--muted);font-size:11px;line-height:1.6;margin:0}
.social-user-row{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel-3);border-radius:13px;padding:10px;margin-top:8px;color:var(--text);text-align:left}.social-user-row.clickable{cursor:pointer}.social-user-row.clickable:hover{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.06)}.social-user-row .grow,.conversation-row .grow,.notification-row .grow,.dm-head .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.social-user-row b,.conversation-row b,.notification-row b{font-size:11px}.social-user-row small,.social-user-row span.muted{font-size:9px}.social-user-row .mini{margin-left:2px;padding:6px 9px}.presence.offline{background:#677385;box-shadow:none}
.social-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.social-toolbar span{font-size:10px}.conversation-list,.notification-list{display:grid;gap:8px}.conversation-row,.notification-row{width:100%;display:flex;align-items:center;gap:11px;border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:11px;color:var(--text);text-align:left;cursor:pointer}.conversation-row:hover,.notification-row:hover{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.05)}.conversation-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.conversation-preview{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-pill{font-style:normal;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;display:inline-grid;place-items:center;font-size:8px}.notification-row.unread{box-shadow:inset 3px 0 0 var(--accent);background:rgba(var(--accent-rgb),.07)}.notification-icon{width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:rgba(var(--accent-rgb),.12);color:var(--accent);display:grid;place-items:center}.notification-row .grow>span{font-size:9px;color:color-mix(in srgb,var(--text) 78%,var(--muted));line-height:1.45}.notification-row .grow>small{font-size:8px}
.dm-view{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}.dm-head{display:flex;align-items:center;gap:9px;padding-bottom:13px;border-bottom:1px solid var(--line)}.back-btn{width:34px;height:34px;padding:0;display:grid;place-items:center}.dm-head b{font-size:12px}.dm-head small{font-size:9px}.dm-messages{min-height:0;overflow:auto;padding:14px 3px;display:flex;flex-direction:column;gap:8px}.dm-message{display:flex;justify-content:flex-start}.dm-message.mine{justify-content:flex-end}.dm-bubble{max-width:78%;border:1px solid var(--line);background:var(--panel-3);border-radius:14px 14px 14px 4px;padding:10px 12px}.dm-message.mine .dm-bubble{border-color:rgba(var(--accent-rgb),.38);background:linear-gradient(135deg,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.09));border-radius:14px 14px 4px 14px}.dm-bubble p{margin:0;font-size:11px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}.dm-bubble time{display:block;text-align:right;margin-top:5px;font-size:7px;color:var(--muted)}.dm-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-top:12px;border-top:1px solid var(--line)}.dm-composer textarea{resize:none;min-width:0;max-height:90px;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:12px;padding:11px 12px;outline:none}.dm-composer textarea:focus{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)}
@media(max-width:720px){.social-overlay{padding:0;background:rgba(2,6,14,.72)}.social-panel{width:100vw;height:100dvh;border-radius:0;border-left:0;border-right:0;border-top:0}.social-panel>header{padding:14px 14px 12px}.social-body{padding:12px}.social-profile-card,.social-section{padding:14px}.profile-stats{gap:5px}.profile-stats>div{padding:9px 5px}.dm-bubble{max-width:88%}}

/* COM2 Chat v3.2 Moderation */
.moderation-button{color:var(--success);border-color:rgba(33,208,139,.28);background:rgba(33,208,139,.06)}
.moderation-button:hover{color:#8ff0c8;border-color:rgba(33,208,139,.5);background:rgba(33,208,139,.10)}
.mute-notice{display:flex;align-items:center;gap:9px;margin:0 0 8px;padding:9px 12px;border:1px solid rgba(249,189,74,.28);border-radius:12px;background:rgba(249,189,74,.07);font-size:10px;color:var(--muted)}
.mute-notice strong{color:var(--warning);white-space:nowrap}.room-kick-notice{justify-content:space-between}.room-kick-notice-copy{display:grid;gap:2px;min-width:0}.room-kick-notice-copy span{font-size:9px;line-height:1.45}.room-kick-notice>button{flex:0 0 auto}.composer.muted{opacity:.58}.composer.muted textarea,.composer.muted button{cursor:not-allowed}
.restriction-body{min-height:100dvh;display:grid;place-items:center;overflow:auto;padding:20px;background:radial-gradient(circle at 50% 0,rgba(255,91,110,.14),transparent 38%),var(--bg)}
.restriction-card{width:min(540px,100%);border:1px solid rgba(255,91,110,.28);background:var(--panel);border-radius:24px;padding:28px;box-shadow:var(--shadow);text-align:center}.restriction-icon{width:58px;height:58px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:rgba(255,91,110,.12);color:var(--danger);font-weight:900;font-size:28px}.restriction-card h1{margin:7px 0 8px}.restriction-card>p{color:var(--muted);line-height:1.65}.restriction-card dl{display:grid;gap:8px;margin:18px 0;text-align:left}.restriction-card dl>div{border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:11px}.restriction-card dt{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.restriction-card dd{margin:5px 0 0;font-size:12px;line-height:1.55}
.moderation-form-card,.message-action-card,.report-card,.sanction-row,.log-row,.filter-row{border:1px solid var(--line);background:var(--panel-2);border-radius:16px;padding:15px}.moderation-form-card h3{margin:0 0 5px;font-size:15px}.moderation-form-card>p{margin:0 0 15px;font-size:10px;line-height:1.6}.mod-user-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}.mod-user-head h3{margin:0 0 3px}.mod-user-head p{margin:0;font-size:9px}
.moderation-form{display:grid;gap:11px}.mod-field{display:grid;gap:6px}.mod-field[hidden]{display:none!important}.mod-field>span{font-size:9px;color:var(--muted);font-weight:700}.mod-field select,.mod-field textarea,.filter-add select,.filter-add input{width:100%;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:11px;padding:10px 11px;outline:none}.mod-field textarea{resize:vertical;min-height:86px}.mod-field select:focus,.mod-field textarea:focus,.filter-add select:focus,.filter-add input:focus{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)}.moderation-form>button.primary,.filter-add>button.primary{border:0;border-radius:11px;padding:11px 13px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:800;cursor:pointer}
.message-action-preview{margin:0 0 13px;padding:12px;border-left:3px solid var(--accent);background:var(--panel-3);border-radius:10px;color:color-mix(in srgb,var(--text) 86%,var(--muted));font-size:11px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.moderation-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:12px;padding:5px;border:1px solid var(--line);background:var(--panel-2);border-radius:12px}.moderation-tabs button{border:0;background:transparent;color:var(--muted);border-radius:8px;padding:9px 7px;font-size:9px;font-weight:800;cursor:pointer}.moderation-tabs button.active{background:rgba(var(--accent-rgb),.12);color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.22)}
.moderation-list{display:grid;gap:9px}.report-card-top,.sanction-row,.log-row,.filter-row{display:flex;align-items:center;gap:10px}.report-card-top .grow,.sanction-row .grow,.log-row .grow,.filter-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.report-card-top b,.sanction-row b,.log-row b,.filter-row b{font-size:11px}.report-card-top span,.sanction-row span,.log-row span,.filter-row span{font-size:9px;line-height:1.45}.report-card>small{display:block;margin-top:9px;font-size:8px}.report-details{margin:11px 0 0;font-size:10px;line-height:1.6;color:color-mix(in srgb,var(--text) 84%,var(--muted))}.report-message{margin:10px 0 0;padding:10px 11px;border:1px solid var(--line);border-left:3px solid var(--warning);border-radius:10px;background:var(--panel-3);font-size:10px;line-height:1.55;color:var(--muted)}.report-status{font-size:8px!important;padding:5px 7px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}.report-status.open{color:#ff9a7b;border-color:rgba(255,154,123,.24);background:rgba(255,154,123,.06)}.report-status.reviewed{color:var(--warning);border-color:rgba(249,189,74,.24);background:rgba(249,189,74,.06)}
.sanction-row,.log-row,.filter-row{padding:12px}.sanction-row .mini,.filter-row .mini{flex:0 0 auto}.filter-add{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:8px;margin-bottom:12px}.filter-add>button{padding-inline:15px}.mini.danger-soft{color:#ff8f9c;border-color:rgba(255,91,110,.28);background:rgba(255,91,110,.06)}
@media(max-width:720px){.moderation-tabs{grid-template-columns:repeat(2,1fr)}.filter-add{grid-template-columns:1fr}.mute-notice{align-items:flex-start;flex-direction:column;gap:3px}.restriction-card{padding:22px}.report-card .social-actions{gap:6px}}
/* COM2 Chat v3.3 Admin + Live Management */
.management-link{display:grid!important;place-items:center;text-decoration:none;color:var(--accent);border-color:rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.06)}.management-link:hover{border-color:rgba(var(--accent-rgb),.48);background:rgba(var(--accent-rgb),.11)}


/* COM2 Chat v3.4 — native confirmations, account settings, custom avatars */
.avatar{overflow:visible}.avatar>img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}.profile-detail-row{display:flex;flex-wrap:wrap;gap:7px;margin:-7px 0 15px}.account-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 94%,var(--accent) 6%));padding:18px;margin-bottom:14px}.account-card h3{font-size:14px;margin:0 0 15px}.account-avatar-row{display:flex;align-items:center;gap:16px}.avatar-upload-form{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.avatar-upload-form input[type=file]{max-width:280px;color:var(--muted);font-size:10px}.avatar-upload-form input::file-selector-button{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:9px;padding:8px 10px;margin-right:8px;cursor:pointer}.account-form{display:grid;gap:14px}.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.account-field{display:grid;gap:7px}.account-field>span{font-size:10px;font-weight:700;color:var(--muted)}.account-field input,.account-field textarea,.account-field select{width:100%;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:11px;padding:11px 12px;outline:0;font-size:11px}.account-field textarea{resize:vertical;min-height:90px}.account-field input:focus,.account-field textarea:focus,.account-field select:focus{border-color:rgba(var(--accent-rgb),.6);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)}.account-field small{font-size:9px}.account-form>.primary,.avatar-upload-form>.primary{justify-self:start;border:0;border-radius:10px;padding:10px 14px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:10px;font-weight:800;cursor:pointer}
.com2-confirm-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:18px;background:rgba(1,5,12,.67);backdrop-filter:blur(10px);opacity:0;transition:.16s}.com2-confirm-overlay.show{opacity:1}.com2-confirm-dialog{width:min(450px,100%);display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;border:1px solid var(--line-strong);border-radius:20px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel) 92%,var(--accent) 8%));box-shadow:0 28px 100px rgba(0,0,0,.55);padding:20px;transform:translateY(8px) scale(.985);transition:.16s}.com2-confirm-overlay.show .com2-confirm-dialog{transform:none}.com2-confirm-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.13);border:1px solid rgba(var(--accent-rgb),.32);color:var(--accent);font-size:20px;font-weight:900}.com2-confirm-copy h3{margin:4px 0 7px;font-size:17px}.com2-confirm-copy p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}.com2-confirm-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:9px;margin-top:5px}.com2-confirm-actions button{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:10px 14px;font-size:10px;font-weight:800;cursor:pointer}.com2-confirm-actions .primary{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}.com2-confirm-actions .danger-confirm{border-color:rgba(255,91,110,.35);background:linear-gradient(135deg,#e84258,#ff6b78);color:#fff}
@media(max-width:720px){.account-grid{grid-template-columns:1fr}.account-avatar-row{align-items:flex-start}.avatar-upload-form{display:grid;flex:1}.com2-confirm-dialog{grid-template-columns:44px minmax(0,1fr);padding:16px}.com2-confirm-icon{width:42px;height:42px}.com2-confirm-actions button{flex:1}}

/* COM2 Chat v3.5 — XP / Level / COM2 Puanı */
.xp-progress-line{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-4px;margin-bottom:8px;color:var(--muted);font-size:9px}.xp-progress-line button{border:0;background:transparent;color:var(--accent);font-weight:700;font-size:9px;padding:0;cursor:pointer}.xp-progress-line button:hover{text-decoration:underline}.progress-hero{display:flex;align-items:center;gap:14px;border:1px solid rgba(var(--accent-rgb),.32);background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.04));padding:18px;border-radius:16px}.progress-level-orb{width:62px;height:62px;flex:0 0 62px;border-radius:20px;display:grid;place-items:center;font-size:25px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 12px 30px rgba(var(--accent-rgb),.28)}.progress-hero h3{margin:3px 0 5px;font-size:19px}.progress-hero p{margin:0;font-size:10px}.progress-points{margin-left:auto;text-align:right;border-left:1px solid var(--line);padding-left:18px}.progress-points small{display:block;color:var(--muted);font-size:8px;letter-spacing:.7px}.progress-points b{display:block;color:var(--text);font-size:18px;margin-top:5px}.progress-card{border:1px solid var(--line);background:var(--panel-2);border-radius:15px;padding:15px}.progress-card h3{font-size:12px;margin:0 0 11px}.progress-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:11px}.progress-card-head span{font-size:9px}.progress-big-track{height:9px;background:var(--line);border-radius:999px;overflow:hidden;margin-top:11px}.progress-big-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 14px rgba(var(--accent-rgb),.3)}.progress-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.progress-metrics>div{border:1px solid var(--line);background:var(--panel-2);border-radius:13px;padding:12px;display:flex;flex-direction:column;gap:5px}.progress-metrics b{font-size:14px}.progress-metrics span{font-size:8px;color:var(--muted)}.progress-card ul{margin:0;padding-left:17px;color:var(--muted);font-size:9px;line-height:1.75}.progress-event{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}.progress-event:last-child{border-bottom:0}.progress-event .grow{display:flex;flex-direction:column;gap:3px}.progress-event b{font-size:10px}.progress-event small{font-size:8px}.progress-event strong{font-size:10px}.xp-amount{color:var(--accent)}.point-amount{color:var(--warning)}
@media(max-width:560px){.progress-hero{padding:13px;gap:10px;flex-wrap:wrap}.progress-level-orb{width:50px;height:50px;flex-basis:50px;border-radius:16px;font-size:20px}.progress-points{width:100%;margin-left:60px;border-left:0;border-top:1px solid var(--line);padding:9px 0 0;text-align:left}.progress-metrics{grid-template-columns:1fr}.xp-progress-line{font-size:8px}}

/* COM2 Chat v3.6 — COM2 Plus */
.plus-promo.active{border-color:rgba(250,188,70,.35);background:linear-gradient(145deg,rgba(106,74,255,.16),rgba(250,188,70,.08))}.plus-promo.active .plus-title{color:#f6c45d}.plus-chip.active{border-color:rgba(250,188,70,.5);box-shadow:0 0 24px rgba(143,91,255,.18);color:#f8cb6d}.plus-chip b{font:inherit;font-weight:800}
.plus-hero{display:flex;align-items:center;gap:15px;border:1px solid rgba(153,97,255,.32);background:linear-gradient(135deg,rgba(116,72,255,.16),rgba(39,154,255,.06));border-radius:18px;padding:18px}.plus-hero.active{border-color:rgba(248,190,78,.38);background:linear-gradient(135deg,rgba(116,72,255,.18),rgba(248,190,78,.08))}.plus-crown{width:62px;height:62px;flex:0 0 62px;border-radius:20px;display:grid;place-items:center;font-size:29px;color:#ffd56d;background:linear-gradient(135deg,#7a49ff,#3c6df4);box-shadow:0 15px 35px rgba(107,72,255,.25)}.plus-hero h3{margin:3px 0 5px;font-size:19px}.plus-hero p{margin:0;font-size:10px}.plus-balance{margin-left:auto;text-align:right;border-left:1px solid var(--line);padding-left:18px}.plus-balance small{display:block;color:var(--muted);font-size:8px;letter-spacing:.7px}.plus-balance b{display:block;font-size:17px;margin-top:4px;color:#f5c45f}.plus-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.plus-benefits article{border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:13px;display:flex;gap:10px;align-items:flex-start}.plus-benefits article>span{width:30px;height:30px;flex:0 0 30px;border-radius:10px;background:rgba(var(--accent-rgb),.1);color:var(--accent);display:grid;place-items:center}.plus-benefits b{display:block;font-size:10px;margin-bottom:4px}.plus-benefits small{display:block;color:var(--muted);font-size:8px;line-height:1.5}.plus-section-title{display:flex;align-items:end;justify-content:space-between;gap:12px}.plus-section-title>div{font-weight:800;font-size:13px}.plus-section-title small{font-size:8px}.plus-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.plus-plan{position:relative;border:1px solid var(--line);background:var(--panel-2);border-radius:16px;padding:15px;display:grid;gap:9px}.plus-plan.popular{border-color:rgba(var(--accent-rgb),.5);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.08)}.plus-plan em{position:absolute;right:10px;top:10px;font-style:normal;font-size:7px;font-weight:900;letter-spacing:.6px;color:var(--accent);background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.25);border-radius:999px;padding:4px 6px}.plus-plan-days{font-size:12px;font-weight:800}.plus-plan-price{font-size:18px;color:#f4c25c}.plus-plan-unit{font-size:8px;color:var(--muted);line-height:1.35}.plus-plan-saving{justify-self:start;font-size:7px;font-weight:900;letter-spacing:.4px;color:#5ee6a8;background:rgba(94,230,168,.09);border:1px solid rgba(94,230,168,.22);border-radius:999px;padding:4px 7px}.plus-plan button{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:9px 11px;font-size:9px;font-weight:800;cursor:pointer}.plus-plan button.primary{border-color:rgba(var(--accent-rgb),.5);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}.plus-plan button:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:560px){.plus-hero{padding:13px;flex-wrap:wrap}.plus-crown{width:50px;height:50px;flex-basis:50px;font-size:24px}.plus-balance{width:100%;margin-left:60px;border-left:0;border-top:1px solid var(--line);padding:9px 0 0;text-align:left}.plus-benefits{grid-template-columns:1fr}.plus-plans{grid-template-columns:1fr}.plus-section-title{align-items:flex-start;flex-direction:column;gap:3px}}

/* COM2 Chat v3.7 — Yetenekler */
.ability-name{font-weight:850}.ability-status{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:3px 7px;color:var(--muted);font-size:8px;background:var(--panel-3)}
.avatar{position:relative}.ability-accessory{position:absolute!important;right:-7px;top:-10px!important;z-index:4;width:18px;height:18px!important;display:grid!important;place-items:center;border:0!important;background:transparent!important;color:#ffd565!important;font-size:14px!important;text-shadow:0 2px 8px #0008;line-height:1!important}.ability-frame-violet{box-shadow:0 0 0 2px #8b5cf6,0 0 18px #8b5cf655}.ability-frame-ocean{box-shadow:0 0 0 2px #27a7ff,0 0 18px #27a7ff55}.ability-frame-emerald{box-shadow:0 0 0 2px #23d59b,0 0 18px #23d59b55}.ability-frame-gold{box-shadow:0 0 0 2px #f5c451,0 0 18px #f5c45155}.ability-frame-rose{box-shadow:0 0 0 2px #ff5f91,0 0 18px #ff5f9155}
.bubble.ability-aura-soft{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 8px 26px rgba(var(--accent-rgb),.08),inset 3px 0 rgba(var(--accent-rgb),.45)}.bubble.ability-aura-neon{border-color:rgba(var(--accent-rgb),.68);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.15),0 0 22px rgba(var(--accent-rgb),.18),inset 0 0 20px rgba(var(--accent-rgb),.05)}.bubble.ability-aura-glass{background:linear-gradient(135deg,rgba(var(--accent-rgb),.09),color-mix(in srgb,var(--panel-2) 88%,transparent));backdrop-filter:blur(12px);border-color:rgba(255,255,255,.12)}
.abilities-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid rgba(var(--accent-rgb),.35);background:linear-gradient(135deg,rgba(var(--accent-rgb),.13),transparent 70%);border-radius:18px;padding:18px}.abilities-hero h3{margin:4px 0 6px;font-size:19px}.abilities-hero p{margin:0;max-width:360px;font-size:10px;line-height:1.6}.ability-note{display:flex;align-items:flex-start;gap:10px;margin:12px 0;border:1px solid var(--line);background:var(--panel-2);padding:11px 13px;border-radius:13px}.ability-note>span{color:var(--accent);font-size:16px}.ability-note p{margin:0;color:var(--muted);font-size:10px;line-height:1.55}.ability-section{margin-top:18px}.ability-section>h3{margin:0 0 10px;font-size:12px}.ability-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.ability-card{border:1px solid var(--line);background:var(--panel-2);border-radius:16px;padding:14px;display:grid;gap:11px;transition:.18s}.ability-card:hover{border-color:rgba(var(--accent-rgb),.4);transform:translateY(-1px)}.ability-card.owned{background:linear-gradient(145deg,rgba(var(--accent-rgb),.07),var(--panel-2))}.ability-card.enabled{border-color:rgba(var(--accent-rgb),.48);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.08)}.ability-card-top{display:flex;align-items:center;gap:10px}.ability-card-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.12);color:var(--accent);border:1px solid rgba(var(--accent-rgb),.24);font-size:16px}.ability-card-top .grow{display:grid;gap:2px}.ability-card-top b{font-size:11px}.ability-card-top small{font-size:8px;text-transform:uppercase;letter-spacing:.6px}.plus-lock{margin-left:auto;border:1px solid #f2bd5740;background:#f2bd5711;color:#f6c968;border-radius:999px;padding:4px 7px;font-size:7px;font-weight:900}.ability-card>p{margin:0;color:var(--muted);font-size:9px;line-height:1.55;min-height:28px}.ability-card-foot{display:flex;align-items:center;gap:7px;min-height:34px}.ability-card-foot button{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:9px;padding:7px 9px;font-size:8px;font-weight:800;cursor:pointer}.ability-card-foot button.primary{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;margin-left:auto}.ability-card-foot button.primary-soft{color:var(--accent);border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08)}.ability-card-foot button:disabled{opacity:.45;cursor:not-allowed}.ability-price{color:var(--accent);font-size:11px}.ability-owned{font-size:8px;color:#63dfaf;font-weight:800;margin-right:auto}.ability-editor{border:1px solid var(--line);background:var(--panel-2);border-radius:18px;padding:18px;text-align:center}.ability-editor-icon{width:56px;height:56px;margin:0 auto 10px;border-radius:17px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.3);font-size:25px;color:var(--accent)}.ability-editor h3{margin:5px 0}.ability-editor>p{font-size:10px;line-height:1.5}.ability-settings-form{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px;text-align:left}.ability-setting-field{display:grid;gap:6px;font-size:8px;color:var(--muted);font-weight:800}.ability-setting-field input,.ability-setting-field select{width:100%;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:9px}.ability-setting-field input[type=color]{height:42px;padding:4px}.ability-preview{grid-column:1/-1;border:1px solid var(--line);background:var(--panel-3);border-radius:12px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.ability-preview strong{font-size:15px}.ability-settings-form .social-actions{grid-column:1/-1;margin-top:2px}
@media(max-width:520px){.ability-grid{grid-template-columns:1fr}.abilities-hero{align-items:flex-start}.ability-settings-form{grid-template-columns:1fr}.ability-preview,.ability-settings-form .social-actions{grid-column:auto}.ability-status{display:none}}

/* COM2 Chat v3.8 — advanced abilities & collections */
.ability-user-symbol{position:absolute;left:-7px;bottom:-5px;z-index:4;min-width:17px;height:17px;padding:0 3px;border-radius:7px;display:grid;place-items:center;background:var(--panel);border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-size:9px;font-style:normal;font-weight:900;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.ability-motion-shimmer{background-size:220% auto!important;animation:abilityNameShimmer 3s linear infinite}.ability-motion-pulse{display:inline-block;animation:abilityNamePulse 2.2s ease-in-out infinite}.ability-motion-float{display:inline-block;animation:abilityNameFloat 3s ease-in-out infinite}.ability-speed-1{animation-duration:3.8s!important}.ability-speed-2{animation-duration:2.6s!important}.ability-speed-3{animation-duration:1.55s!important}
@keyframes abilityNameShimmer{0%{background-position:0 50%}100%{background-position:220% 50%}}@keyframes abilityNamePulse{0%,100%{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}}@keyframes abilityNameFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.message-motion-rise{animation:messageRise .34s cubic-bezier(.2,.8,.2,1)}.message-motion-pulse{animation:messagePulse .42s ease-out}.message-motion-shimmer .bubble{animation:bubbleShimmer .8s ease-out}@keyframes messageRise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}@keyframes messagePulse{0%{opacity:.55;transform:scale(.985)}70%{transform:scale(1.005)}100%{opacity:1;transform:scale(1)}}@keyframes bubbleShimmer{0%{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.7),0 0 24px rgba(var(--accent-rgb),.2)}100%{box-shadow:0 8px 26px rgba(0,0,0,.08)}}
.social-profile-card{position:relative;overflow:hidden}.social-profile-card>*{position:relative;z-index:1}.profile-effect-aurora:before,.profile-effect-stars:before,.profile-effect-grid:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}.profile-effect-aurora:before{background:radial-gradient(circle at 15% 5%,rgba(var(--accent-rgb),.24),transparent 42%),radial-gradient(circle at 85% 25%,rgba(34,211,238,.12),transparent 36%)}.profile-effect-stars:before{background-image:radial-gradient(circle,rgba(255,255,255,.3) 1px,transparent 1px);background-size:23px 23px;opacity:.32}.profile-effect-grid:before{background-image:linear-gradient(rgba(var(--accent-rgb),.09) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent-rgb),.09) 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(to bottom,black,transparent)}
.collection-profile-badge{border-color:rgba(var(--accent-rgb),.35)!important;color:var(--accent)!important}.collection-strip{margin-top:12px;border:1px solid rgba(var(--accent-rgb),.25);background:linear-gradient(135deg,rgba(var(--accent-rgb),.09),var(--panel-2));border-radius:15px;padding:13px;display:flex;align-items:center;gap:14px}.collection-strip .grow{display:grid;gap:3px}.collection-strip b{font-size:11px}.collection-progress{width:125px;height:7px;border-radius:999px;background:var(--panel-3);border:1px solid var(--line);overflow:hidden}.collection-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 15px rgba(var(--accent-rgb),.35)}.collection-rarity-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}.rarity-pill{font-size:7px;font-weight:900;letter-spacing:.35px;border:1px solid var(--line);border-radius:999px;padding:5px 8px;background:var(--panel-2)}.rarity-common{color:var(--muted)}.rarity-rare{color:#4db8ff;border-color:#4db8ff33}.rarity-epic{color:#b57aff;border-color:#b57aff44}.rarity-legendary{color:#f6bd57;border-color:#f6bd5744}.ability-card.rarity-rare{box-shadow:inset 0 0 0 1px #4db8ff0d}.ability-card.rarity-epic{box-shadow:inset 0 0 0 1px #b57aff15}.ability-card.rarity-legendary{border-color:#f6bd5740;background:linear-gradient(145deg,#f6bd5708,var(--panel-2))}
.composer{position:relative}.emoji-picker{position:absolute;left:9px;bottom:calc(100% + 9px);z-index:25;width:282px;border:1px solid var(--line-strong);border-radius:15px;padding:10px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(18px);box-shadow:0 18px 52px rgba(0,0,0,.32);opacity:0;transform:translateY(5px) scale(.98);transition:.14s}.emoji-picker.show{opacity:1;transform:none}.emoji-picker-head{display:flex;align-items:center;justify-content:space-between;padding:2px 3px 8px}.emoji-picker-head b{font-size:10px}.emoji-picker-head small{font-size:7px}.emoji-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.emoji-grid button{aspect-ratio:1;border:1px solid var(--line);border-radius:9px;background:var(--panel-3);font-size:17px;cursor:pointer}.emoji-grid button:hover{border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.08);transform:translateY(-1px)}
@media(max-width:520px){.collection-strip{align-items:flex-start;flex-direction:column}.collection-progress{width:100%}.emoji-picker{width:min(282px,calc(100vw - 50px));left:0}.ability-user-symbol{left:-4px}}
@media(prefers-reduced-motion:reduce){.ability-motion-shimmer,.ability-motion-pulse,.ability-motion-float,.message-motion-rise,.message-motion-pulse,.message-motion-shimmer .bubble{animation:none!important}}

/* v3.8.1 — entitlement-checked COM2 custom emoji */
.com2-emoji{display:inline-block;width:1.55em;height:1.55em;vertical-align:-.36em;object-fit:contain;margin:0 .08em;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.16))}.com2-emoji.picker-emoji{width:27px;height:27px;vertical-align:middle;margin:0}.emoji-section-title{margin:7px 3px 5px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.emoji-grid.custom button{background:linear-gradient(145deg,var(--panel-3),rgba(var(--accent-rgb),.07));border-color:rgba(var(--accent-rgb),.2)}.emoji-grid.custom button:hover{border-color:rgba(var(--accent-rgb),.65);box-shadow:0 0 16px rgba(var(--accent-rgb),.12)}.emoji-pack-lock{margin-top:8px;border:1px dashed var(--line-strong);border-radius:10px;padding:9px;color:var(--muted);font-size:8px;line-height:1.45;text-align:center}.dm-bubble .com2-emoji{width:1.45em;height:1.45em}

/* v3.8.2 — visual composer for COM2 custom emoji */
.composer-editor{flex:1;min-width:0;min-height:38px;max-height:100px;overflow-y:auto;outline:0;color:var(--text);padding:8px 6px;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
.composer-editor:empty:before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
.composer-editor .composer-emoji{width:1.65em;height:1.65em;vertical-align:-.42em;margin:0 .1em;cursor:default}
.composer.muted .composer-editor{pointer-events:none;cursor:not-allowed}
.emoji-autocomplete{position:absolute;left:94px;bottom:calc(100% + 8px);z-index:30;width:min(330px,calc(100vw - 44px));max-height:260px;overflow:auto;border:1px solid var(--line-strong);border-radius:14px;padding:7px;background:color-mix(in srgb,var(--panel) 96%,transparent);backdrop-filter:blur(18px);box-shadow:0 18px 52px rgba(0,0,0,.32)}
.emoji-suggestion{width:100%;display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:10px;padding:8px 9px;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.emoji-suggestion:hover,.emoji-suggestion.active{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.10)}
.emoji-suggestion .suggestion-emoji{width:30px;height:30px;flex:0 0 30px;margin:0}
.emoji-suggestion span{display:grid;gap:2px}.emoji-suggestion b{font-size:10px}.emoji-suggestion small{font-size:7px;color:var(--muted);letter-spacing:.06em}
@media(max-width:720px){.emoji-autocomplete{left:8px;width:min(330px,calc(100vw - 32px))}.composer-editor{font-size:12px}}


/* COM2 Chat v3.8.4 — Pawn Restyle */
.pawn-name-line{display:inline-flex;align-items:center;gap:6px;min-width:0}.message-head>.com2-pawn{flex:0 0 auto}.member-row .pawn-name-line{max-width:100%}.user-meta .pawn-name-line{display:flex}.social-profile-hero .pawn-name-line{justify-content:flex-start}
.com2-pawn{position:relative;display:inline-grid;place-items:center;width:18px;height:24px;flex:0 0 18px;vertical-align:-6px;isolation:isolate;line-height:0}
.com2-pawn .pawn-art{display:block;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.34));transform:none}
.com2-pawn .pawn-role{position:absolute;right:-3px;bottom:0;width:6px;height:6px;border-radius:50%;border:1.5px solid var(--panel);z-index:5;box-shadow:0 1px 4px rgba(0,0,0,.55)}
.com2-pawn:not(.pawn-premium) .pawn-role{display:none}
.com2-pawn.pawn-green .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.32)) drop-shadow(0 0 3px rgba(49,215,125,.18))}
.com2-pawn.pawn-blue:not(.pawn-premium) .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.32)) drop-shadow(0 0 3px rgba(59,151,255,.20))}
.com2-pawn.pawn-white .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.35)) drop-shadow(0 0 4px rgba(255,255,255,.28))}
.com2-pawn.pawn-orange .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.34)) drop-shadow(0 0 4px rgba(255,147,24,.22))}
.com2-pawn.pawn-red .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.34)) drop-shadow(0 0 4px rgba(242,43,64,.25))}
.com2-pawn.pawn-black .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(190,199,215,.22))}
.com2-pawn.pawn-brown .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.48)) drop-shadow(0 0 4px rgba(138,90,43,.30))}
.com2-pawn.pawn-premium{width:20px;height:26px;flex-basis:20px}
.com2-pawn.pawn-premium::before{content:"";position:absolute;inset:12% -22% -10%;border-radius:50%;z-index:-1;opacity:.55;filter:blur(4px);pointer-events:none}
.com2-pawn.pawn-pink::before{background:radial-gradient(circle,rgba(255,104,176,.50),transparent 68%)}
.com2-pawn.pawn-blue.pawn-premium::before{background:radial-gradient(circle,rgba(49,126,255,.58),transparent 68%)}
.com2-pawn.pawn-purple::before{background:radial-gradient(circle,rgba(151,82,255,.68),transparent 68%)}
.com2-pawn.pawn-gold::before{background:radial-gradient(circle,rgba(255,193,36,.78),transparent 66%)}
.com2-pawn.pawn-pink .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.38)) drop-shadow(0 0 5px rgba(255,104,176,.42))}
.com2-pawn.pawn-blue.pawn-premium .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.40)) drop-shadow(0 0 6px rgba(49,126,255,.50))}
.com2-pawn.pawn-purple .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(151,82,255,.58))}
.com2-pawn.pawn-gold .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.46)) drop-shadow(0 0 8px rgba(255,193,36,.70))}
.com2-pawn.pawn-purple::after,.com2-pawn.pawn-gold::after{content:"";position:absolute;left:50%;bottom:-3px;width:20px;height:6px;border:1px solid currentColor;border-radius:50%;transform:translateX(-50%) scale(.82);opacity:.22;pointer-events:none;animation:pawnAura384 2.35s ease-in-out infinite}
.com2-pawn.pawn-purple{color:#a96cff}.com2-pawn.pawn-gold{color:#ffd65c}
.pawn-role-green{background:#31d77d}.pawn-role-blue{background:#3b97ff}.pawn-role-white{background:#fff}.pawn-role-orange{background:#ff9b3f}.pawn-role-red{background:#ff4257}.pawn-role-black{background:#11151d}
@keyframes pawnAura384{0%,100%{transform:translateX(-50%) scale(.78);opacity:.15}50%{transform:translateX(-50%) scale(1.12);opacity:.58}}
.ability-card-top>.com2-pawn{margin:4px 8px 4px 5px;transform:scale(1.42);transform-origin:center}.ability-card.rarity-legendary .com2-pawn.pawn-gold{filter:drop-shadow(0 0 6px rgba(255,199,50,.32))}
@media(max-width:720px){.com2-pawn{width:17px;height:23px;flex-basis:17px}.com2-pawn.pawn-premium{width:19px;height:25px;flex-basis:19px}.com2-pawn .pawn-role{right:-2px;width:5px;height:5px}}
@media(prefers-reduced-motion:reduce){.com2-pawn.pawn-purple::after,.com2-pawn.pawn-gold::after{animation:none}}


/* COM2 Chat v3.8.5 — Owner Pawn visibility + unbroken message wrap hotfix */
.chat-stream{overflow-x:hidden}
.message{min-width:0}
.message-body,.bubble,.bubble p{min-width:0;max-width:100%}
.bubble{overflow:hidden}
.bubble p{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.dm-messages{overflow-x:hidden}
.dm-message,.dm-bubble,.dm-bubble p{min-width:0;max-width:100%}
.dm-bubble p{overflow-wrap:anywhere;word-break:break-word}

/* Site Sahibi: siyah gövdeyi korurken koyu temada kaybolmayan obsidian/silver aura */
.com2-pawn.pawn-black{width:20px;height:26px;flex-basis:20px;color:#d8deea}
.com2-pawn.pawn-black::before{content:"";position:absolute;inset:4% -34% -15%;z-index:-2;border-radius:50%;background:radial-gradient(circle at 50% 58%,rgba(210,218,235,.38) 0 22%,rgba(121,76,255,.23) 38%,rgba(204,43,86,.16) 52%,transparent 72%);filter:blur(3.7px);opacity:.9;pointer-events:none;animation:ownerPawnGlow385 2.7s ease-in-out infinite}
.com2-pawn.pawn-black::after{content:"";position:absolute;left:50%;bottom:-3px;width:22px;height:6px;border:1px solid rgba(225,230,242,.72);border-radius:50%;transform:translateX(-50%) scale(.82);opacity:.38;box-shadow:0 0 6px rgba(151,100,255,.42),0 0 10px rgba(225,230,242,.16);pointer-events:none;animation:ownerPawnRing385 2.7s ease-in-out infinite}
.com2-pawn.pawn-black .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.68)) drop-shadow(0 0 4px rgba(230,235,246,.68)) drop-shadow(0 0 8px rgba(124,82,255,.30))}
@keyframes ownerPawnGlow385{0%,100%{opacity:.62;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes ownerPawnRing385{0%,100%{opacity:.26;transform:translateX(-50%) scale(.78)}50%{opacity:.62;transform:translateX(-50%) scale(1.08)}}
@media(max-width:720px){.com2-pawn.pawn-black{width:19px;height:25px;flex-basis:19px}}
@media(prefers-reduced-motion:reduce){.com2-pawn.pawn-black::before,.com2-pawn.pawn-black::after{animation:none}}

/* COM2 Chat v3.8.6 — chat performance & stability */
.topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:color-mix(in srgb,var(--panel) 96%,transparent)}
.chat-stream{overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:auto}
.chat-stream .bubble.ability-aura-glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(135deg,rgba(var(--accent-rgb),.075),color-mix(in srgb,var(--panel-2) 96%,transparent))}
.chat-stream .message:not(.is-visible) .ability-motion-shimmer,
.chat-stream .message:not(.is-visible) .ability-motion-pulse,
.chat-stream .message:not(.is-visible) .ability-motion-float,
.member-scroll .member-row:not(.is-visible) .ability-motion-shimmer,
.member-scroll .member-row:not(.is-visible) .ability-motion-pulse,
.member-scroll .member-row:not(.is-visible) .ability-motion-float{animation-play-state:paused!important}
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-purple::after,
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-gold::after,
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-black::before,
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-black::after,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-purple::after,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-gold::after,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-black::before,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-black::after{animation-play-state:paused!important}
@media(max-width:720px){.chat-stream{scrollbar-gutter:auto}.topbar{background:var(--panel)}}


/* COM2 Chat v3.8.7 — compositor / scroll paint hotfix */
.chat-stream{scroll-behavior:auto;overflow-anchor:none;contain:layout style;background:var(--bg)}
.chat-stream .message{contain:layout style}
.chat-stream .com2-pawn .pawn-art{transform:none}
.chat-stream.is-scrolling .bubble{box-shadow:none!important}
.chat-stream.is-scrolling .avatar{box-shadow:none!important}
.chat-stream.is-scrolling .com2-emoji{filter:none!important}
.chat-stream.is-scrolling .ability-motion-shimmer,
.chat-stream.is-scrolling .ability-motion-pulse,
.chat-stream.is-scrolling .ability-motion-float,
.chat-stream.is-scrolling .message-motion-rise,
.chat-stream.is-scrolling .message-motion-pulse,
.chat-stream.is-scrolling .message-motion-shimmer .bubble,
.chat-stream.is-scrolling .com2-pawn.pawn-purple::after,
.chat-stream.is-scrolling .com2-pawn.pawn-gold::after,
.chat-stream.is-scrolling .com2-pawn.pawn-black::before,
.chat-stream.is-scrolling .com2-pawn.pawn-black::after{animation-play-state:paused!important}
.chat-stream.is-scrolling .com2-pawn.pawn-premium::before,
.chat-stream.is-scrolling .com2-pawn.pawn-black::before{filter:none!important;opacity:.18!important}
.chat-stream.is-scrolling .com2-pawn .pawn-art{filter:none!important}
.chat-stream.is-scrolling .message{pointer-events:none}
@media(max-width:720px){.chat-stream{contain:layout style}}

/* COM2 Chat v3.9 — Store & Inventory */
.store-hero{display:flex;align-items:center;gap:18px;justify-content:space-between;padding:18px;border:1px solid rgba(var(--accent-rgb),.28);border-radius:18px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.13),var(--panel-2));margin-bottom:14px}.store-hero h3{margin:4px 0 5px;font-size:20px}.store-hero p{margin:0}.store-tabs{display:flex;gap:7px;overflow-x:auto;padding:2px 0 11px;scrollbar-width:none}.store-tabs::-webkit-scrollbar{display:none}.store-tabs button{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:8px 11px;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer}.store-tabs button.active{color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent}.store-products{min-height:220px}.store-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.store-card{position:relative;overflow:hidden;display:grid;grid-template-columns:78px minmax(0,1fr);grid-template-rows:auto auto;border:1px solid var(--line);background:linear-gradient(145deg,var(--panel-2),var(--panel));border-radius:17px;padding:14px;min-width:0}.store-card::after{content:"";position:absolute;inset:auto -25% -60% 20%;height:130px;background:radial-gradient(circle,rgba(var(--accent-rgb),.10),transparent 68%);pointer-events:none}.store-card.rarity-rare{border-color:color-mix(in srgb,#3b97ff 30%,var(--line))}.store-card.rarity-epic{border-color:color-mix(in srgb,#a96cff 38%,var(--line))}.store-card.rarity-legendary{border-color:color-mix(in srgb,#ffd65c 42%,var(--line));box-shadow:inset 0 0 28px rgba(255,214,92,.04)}.store-card.owned{background:linear-gradient(145deg,rgba(var(--accent-rgb),.08),var(--panel))}.store-card-visual{grid-row:1/3;display:grid;place-items:center;position:relative;min-height:86px}.store-card-visual>.com2-pawn{transform:scale(2.35);transform-origin:center}.store-product-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;font-weight:800;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.24);color:var(--accent)}.store-product-icon.plus{color:#ffd65c;background:linear-gradient(145deg,rgba(255,214,92,.16),rgba(var(--accent-rgb),.07));border-color:rgba(255,214,92,.25)}.store-badge{position:absolute;left:0;top:0;font-size:7px;font-weight:800;letter-spacing:.6px;padding:4px 6px;border-radius:7px;color:#07101b;background:#ffd65c}.store-card-meta{min-width:0}.store-rarity{font-size:7px;font-weight:800;letter-spacing:1px;color:var(--muted)}.store-card-meta h3{font-size:13px;margin:4px 0 5px}.store-card-meta p{font-size:9px;line-height:1.45;color:var(--muted);margin:0 0 7px}.store-card-foot{grid-column:2;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;position:relative;z-index:1}.store-price{font-size:11px;margin-right:auto}.store-owned{font-size:8px;color:var(--success);font-weight:700}.store-card-foot button{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:8px;padding:6px 8px;font-size:8px;font-weight:700;cursor:pointer}.store-card-foot button.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff}.store-card-foot button:disabled{opacity:.52;cursor:not-allowed}.store-inventory-plus{display:flex;align-items:center;gap:14px;padding:14px;border-radius:15px;border:1px solid var(--line);background:var(--panel-2);margin-bottom:10px}.store-inventory-plus.active{border-color:rgba(255,214,92,.28);background:linear-gradient(135deg,rgba(255,214,92,.08),var(--panel-2))}.store-inventory-plus h3{margin:3px 0;font-size:15px}.store-inventory-plus p{margin:0;font-size:9px}.store-inventory-summary{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;font-size:9px}.store-inventory-grid{display:grid;gap:7px;margin-bottom:14px}.store-inventory-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:9px 10px}.store-inventory-item>.com2-pawn{margin:0 4px}.store-inventory-item .ability-card-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:rgba(var(--accent-rgb),.10);color:var(--accent)}.store-inventory-item b{font-size:10px}.store-inventory-item small{display:block;font-size:8px;margin-top:3px}.store-inventory-item button{flex:0 0 auto}.store-inventory-item .mini{font-size:8px;padding:6px 8px}
@media(max-width:720px){.store-hero{padding:13px;align-items:flex-start}.store-hero h3{font-size:17px}.store-grid{grid-template-columns:1fr}.store-card{grid-template-columns:66px minmax(0,1fr);padding:12px}.store-card-visual>.com2-pawn{transform:scale(2)}.store-inventory-summary{flex-direction:column}.store-inventory-item{flex-wrap:wrap}.store-inventory-item .grow{min-width:150px}}

/* COM2 Chat v3.9.3 — COM2 Days custom purchase */
.plus-custom-days{margin-top:12px;border:1px solid rgba(var(--accent-rgb),.28);background:linear-gradient(145deg,rgba(var(--accent-rgb),.09),var(--panel-2));border-radius:16px;padding:15px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}.plus-custom-days h3{margin:4px 0 5px;font-size:15px}.plus-custom-days p{margin:0;font-size:9px;line-height:1.5}.plus-custom-controls{display:grid;grid-template-columns:92px 150px auto;gap:8px;align-items:center}.plus-custom-controls input{width:100%;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:10px 11px;font-size:13px;font-weight:800;outline:none}.plus-custom-controls input:focus{border-color:rgba(var(--accent-rgb),.62);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.10)}.plus-custom-preview{display:grid;gap:2px;border:1px solid var(--line);background:var(--panel-3);border-radius:10px;padding:8px 10px}.plus-custom-preview b{font-size:13px;color:#f4c25c}.plus-custom-preview small{font-size:7px;color:var(--muted);white-space:nowrap}.plus-custom-controls button{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:10px;padding:10px 12px;font-size:9px;font-weight:900;cursor:pointer;white-space:nowrap}.plus-custom-controls button:disabled{opacity:.45;cursor:not-allowed}.plus-tier-row{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}.plus-tier-row span{border:1px solid var(--line);background:var(--panel-3);color:var(--muted);border-radius:999px;padding:5px 7px;font-size:7px;font-weight:800}
@media(max-width:760px){.plus-custom-days{grid-template-columns:1fr}.plus-custom-controls{grid-template-columns:88px minmax(0,1fr)}.plus-custom-controls button{grid-column:1/-1}.plus-custom-preview small{white-space:normal}}

/* COM2 Chat v4.0 — Social Chat Experience */
.workspace{position:relative}
.social-body{overflow-x:hidden}
.store-tabs{display:flex!important;flex-wrap:nowrap!important;width:100%;max-width:100%;min-width:0;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scroll-padding-inline:2px;padding:2px 2px 11px;box-sizing:border-box}
.store-tabs button{flex:0 0 auto!important;scroll-snap-align:start;max-width:none}

.composer-reply{display:flex;align-items:center;gap:12px;margin:0 0 7px;padding:9px 11px;border:1px solid rgba(var(--accent-rgb),.28);border-left:3px solid var(--accent);border-radius:12px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),var(--panel-2));min-width:0}
.composer-reply[hidden]{display:none}.composer-reply>div{display:grid;gap:2px;min-width:0;flex:1}.composer-reply small{font-size:7px;font-weight:800;letter-spacing:.12em;color:var(--accent)}.composer-reply strong{font-size:10px}.composer-reply span{font-size:9px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.composer-reply button{width:28px;height:28px;border-radius:9px;border:1px solid var(--line);background:var(--panel-3);color:var(--muted);cursor:pointer}
.message-reply-preview{display:grid;width:100%;min-width:0;text-align:left;gap:2px;margin:0 0 9px;padding:7px 9px;border:0;border-left:2px solid var(--accent);border-radius:7px;background:rgba(var(--accent-rgb),.07);color:var(--text);cursor:pointer}.message-reply-preview strong{font-size:9px;color:var(--accent)}.message-reply-preview span{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:9px}.message-focus .bubble{animation:messageFocus 1.45s ease}@keyframes messageFocus{0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.08)}25%,65%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.20),0 0 28px rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.58)}}

.message-mention{display:inline;padding:1px 4px;border-radius:5px;background:rgba(var(--accent-rgb),.10);color:color-mix(in srgb,var(--accent) 78%,var(--text));font-weight:700}.message-mention.is-me{background:rgba(var(--accent-rgb),.20);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.22)}
.mention-autocomplete{position:absolute;left:94px;bottom:calc(100% + 8px);z-index:31;width:min(330px,calc(100vw - 44px));max-height:260px;overflow:auto;border:1px solid var(--line-strong);border-radius:14px;padding:7px;background:color-mix(in srgb,var(--panel) 96%,transparent);backdrop-filter:blur(18px);box-shadow:0 18px 52px rgba(0,0,0,.32)}.mention-suggestion{width:100%;display:flex;align-items:center;border:1px solid transparent;border-radius:10px;padding:8px 9px;background:transparent;color:var(--text);text-align:left;cursor:pointer}.mention-suggestion:hover,.mention-suggestion.active{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.10)}.mention-suggestion span{display:grid;gap:2px}.mention-suggestion b{font-size:10px}.mention-suggestion small{font-size:8px;color:var(--muted)}

.reactions{position:relative;min-height:25px;flex-wrap:wrap}.reaction-pill.mine{border-color:rgba(var(--accent-rgb),.52);background:rgba(var(--accent-rgb),.12);color:var(--text)}.reaction-pill b{font-size:9px}.reaction-picker{position:absolute;left:0;bottom:calc(100% + 5px);z-index:20;display:flex;gap:4px;padding:6px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel);box-shadow:0 14px 36px rgba(0,0,0,.26);opacity:0;transform:translateY(4px);transition:.12s}.reaction-picker.show{opacity:1;transform:none}.reaction-picker button{font-size:17px;padding:5px 7px;background:transparent;border-color:transparent}.reaction-picker button:hover{background:rgba(var(--accent-rgb),.10)}

.chat-new-indicator{position:absolute;z-index:6;right:28px;bottom:82px;display:flex;align-items:center;gap:7px;border:1px solid rgba(var(--accent-rgb),.48);border-radius:999px;padding:8px 12px;background:color-mix(in srgb,var(--panel) 94%,var(--accent) 6%);color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.24);font-size:10px;font-weight:800;cursor:pointer}.chat-new-indicator[hidden]{display:none}.unread-divider{display:flex;align-items:center;gap:9px;margin:5px 0 13px;color:var(--accent);font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.unread-divider::before,.unread-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(var(--accent-rgb),.38))}.unread-divider::after{background:linear-gradient(90deg,rgba(var(--accent-rgb),.38),transparent)}

.conversation-top{gap:8px}.conversation-right{display:inline-flex;align-items:center;gap:7px;margin-left:auto;flex:0 0 auto}.conversation-right time{font-size:7px;color:var(--muted);white-space:nowrap}.friend-presence.online{color:var(--success)}.friend-presence.away{color:#e4b64c}.friend-presence.offline{color:var(--muted)}
.notification-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px;padding-bottom:2px}.notification-tabs::-webkit-scrollbar{display:none}.notification-tabs button{flex:0 0 auto;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);border-radius:999px;padding:7px 10px;font-size:8px;font-weight:800;cursor:pointer}.notification-tabs button.active{background:rgba(var(--accent-rgb),.13);border-color:rgba(var(--accent-rgb),.42);color:var(--text)}.notification-icon{font-weight:900}

@media(max-width:720px){.mention-autocomplete{left:8px;width:min(330px,calc(100vw - 32px))}.chat-new-indicator{right:14px;bottom:72px}.composer-reply{margin-inline:0}.message-reply-preview span{max-width:68vw}.store-tabs{margin-right:0;padding-right:8px}}
@media(prefers-reduced-motion:reduce){.message-focus .bubble{animation:none}.reaction-picker{transition:none}}
.presence.away{background:#e4b64c;box-shadow:0 0 10px rgba(228,182,76,.38)}
@media(min-width:721px){.store-tabs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible!important;gap:7px;padding-bottom:11px}.store-tabs button{width:100%;min-width:0;padding:8px 6px!important;font-size:9px!important;overflow:hidden;text-overflow:ellipsis}}
@media(max-width:720px){.store-tabs{display:flex!important;overflow-x:auto!important}.store-tabs button{flex:0 0 auto!important}}

/* COM2 Chat v4.1 — Limited Editions */
.limited-stock-pill{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin-top:6px;padding:4px 7px;border-radius:999px;border:1px solid rgba(255,214,92,.28);background:rgba(255,214,92,.08);color:#ffd65c;font-size:7px;font-weight:900;letter-spacing:.55px;white-space:nowrap}.limited-stock-pill.soldout{border-color:rgba(255,102,120,.3);background:rgba(255,102,120,.08);color:#ff8997}.ability-card-top .limited-stock-pill{margin-left:auto;margin-top:0}.store-card.rarity-legendary .limited-stock-pill{box-shadow:0 0 18px rgba(255,214,92,.08)}
@media(max-width:720px){.ability-card-top{flex-wrap:wrap}.ability-card-top .limited-stock-pill{margin-left:0}}

/* COM2 Chat v4.1.2 — xat-inspired compact member list (original COM2 styling) */
@media(max-width:720px){
  .rightbar{padding-inline:11px}
  .member-row{grid-template-columns:27px minmax(0,1fr);min-height:37px;padding:3px 5px}
  .member-row b{font-size:11px}
  .member-status{font-size:8.5px!important}
}

/* COM2 Chat v4.1.4 — ultra-nadir sınırlı pawn koleksiyonu */
.com2-pawn.pawn-obsidian{color:#d9dee9}.com2-pawn.pawn-obsidian::before{background:radial-gradient(circle,rgba(143,76,255,.48),rgba(217,75,113,.18) 44%,transparent 72%)}
.com2-pawn.pawn-ruby{color:#ff4968}.com2-pawn.pawn-ruby::before{background:radial-gradient(circle,rgba(255,49,92,.62),rgba(255,198,92,.12) 46%,transparent 72%)}
.com2-pawn.pawn-celestial{color:#ffd65c}.com2-pawn.pawn-celestial::before{background:radial-gradient(circle,rgba(255,198,46,.72),rgba(255,239,160,.15) 48%,transparent 72%)}
.com2-pawn.pawn-amethyst{color:#aa6cff}.com2-pawn.pawn-amethyst::before{background:radial-gradient(circle,rgba(155,92,255,.64),rgba(255,213,126,.10) 48%,transparent 72%)}
.com2-pawn.pawn-sapphire{color:#4b91ff}.com2-pawn.pawn-sapphire::before{background:radial-gradient(circle,rgba(42,121,255,.66),rgba(255,222,122,.10) 48%,transparent 72%)}
.com2-pawn.pawn-rose{color:#ff8fba}.com2-pawn.pawn-rose::before{background:radial-gradient(circle,rgba(255,114,171,.58),rgba(255,214,185,.12) 48%,transparent 72%)}
.com2-pawn.pawn-obsidian .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.58)) drop-shadow(0 0 7px rgba(143,76,255,.48)) drop-shadow(0 0 3px rgba(217,75,113,.34))}
.com2-pawn.pawn-ruby .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.48)) drop-shadow(0 0 7px rgba(255,49,92,.58))}
.com2-pawn.pawn-celestial .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.46)) drop-shadow(0 0 8px rgba(255,198,46,.70))}
.com2-pawn.pawn-amethyst .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.44)) drop-shadow(0 0 7px rgba(155,92,255,.58))}
.com2-pawn.pawn-sapphire .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.44)) drop-shadow(0 0 7px rgba(42,121,255,.58))}
.com2-pawn.pawn-rose .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.42)) drop-shadow(0 0 7px rgba(255,114,171,.54))}
.store-card:has(.pawn-obsidian),.store-card:has(.pawn-ruby),.store-card:has(.pawn-celestial),.store-card:has(.pawn-amethyst),.store-card:has(.pawn-sapphire),.store-card:has(.pawn-rose){background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 90%,#d6a84b 10%),var(--panel));}

/* COM2 Chat v4.1.5 — Pawn Selector */
.pawn-selector{margin:12px 0 16px;padding:13px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.045),var(--panel-2))}.pawn-selector-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.pawn-selector-head h3{margin:3px 0 2px;font-size:14px}.pawn-selector-head p{margin:0;font-size:8px}.pawn-selector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.pawn-choice{min-width:0;display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid var(--line);border-radius:12px;background:var(--panel-3);transition:border-color .16s ease,background .16s ease,transform .16s ease}.pawn-choice:hover{border-color:var(--line-strong);transform:translateY(-1px)}.pawn-choice.active{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.075)}.pawn-choice>.com2-pawn{flex:0 0 auto;margin:0 2px}.pawn-choice b{display:block;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pawn-choice small{display:block;margin-top:2px;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pawn-choice button{flex:0 0 auto}.pawn-choice button.active{opacity:.72;cursor:default}.pawn-selector-owner{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid rgba(148,163,184,.18);border-radius:12px;background:rgba(2,6,23,.18)}.pawn-selector-owner b{display:block;font-size:10px}.pawn-selector-owner small{display:block;margin-top:3px;font-size:8px}
@media(max-width:720px){.pawn-selector-grid{grid-template-columns:1fr}.pawn-choice{padding:9px}.pawn-choice b{font-size:10px}.pawn-choice small{font-size:8px}}


/* COM2 Chat v4.1.8 — Classic Chat with Avatar */
.chat-stream {
  padding: 5px 18px 10px !important;
  overflow-x: hidden !important;
}

.chat-stream .message {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 7px 8px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 62%, transparent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.chat-stream .message:hover {
  background: color-mix(in srgb, var(--panel-2) 58%, transparent) !important;
}

.chat-stream .message > .avatar {
  display: inline-grid !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 1px 0 0 !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 78%, transparent) !important;
}

.chat-stream .message > .avatar .presence {
  width: 8px !important;
  height: 8px !important;
  border-width: 2px !important;
}

.chat-stream .message-body {
  min-width: 0 !important;
  width: 100% !important;
}

.chat-stream .message-head {
  display: grid !important;
  grid-template-columns: 16px minmax(0, auto) auto minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 5px !important;
  row-gap: 1px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 0 3px !important;
}

.chat-stream .message-head > .com2-pawn {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  width: 14px !important;
  height: 18px !important;
  min-width: 14px !important;
  margin: 0 !important;
  transform: none !important;
}

.chat-stream .message-head strong {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: 280px !important;
  margin: 0 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chat-stream .message-head .role-badge {
  display: none !important;
}

.chat-stream .message-head time {
  grid-column: 3 !important;
  grid-row: 1 !important;
  margin: 0 0 0 3px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  color: var(--muted) !important;
  opacity: .72 !important;
  white-space: nowrap !important;
}

.chat-stream .message-head .ability-status {
  grid-column: 2 / 5 !important;
  grid-row: 2 !important;
  display: block !important;
  width: auto !important;
  max-width: 520px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
  opacity: .88 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.chat-stream .bubble,
.chat-stream .message-motion-shimmer .bubble {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 0 0 19px !important;
  padding: 1px 30px 1px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  animation: none !important;
}

.chat-stream .bubble p {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.48 !important;
  color: color-mix(in srgb, var(--text) 93%, var(--muted)) !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

.chat-stream .dots {
  position: absolute !important;
  right: 0 !important;
  top: -3px !important;
  padding: 1px 5px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  line-height: 18px !important;
  opacity: .35 !important;
}

.chat-stream .message:hover .dots,
.chat-stream .dots:focus,
.chat-stream .dots:hover {
  opacity: 1 !important;
  background: var(--panel-3) !important;
  color: var(--text) !important;
}

.chat-stream .message-reply-preview {
  width: min(600px, 100%) !important;
  margin: 0 0 5px !important;
  padding: 4px 7px !important;
  gap: 1px !important;
  border: 0 !important;
  border-left: 2px solid var(--accent) !important;
  border-radius: 4px !important;
  background: rgba(var(--accent-rgb), .055) !important;
  box-shadow: none !important;
}

.chat-stream .message-reply-preview strong,
.chat-stream .message-reply-preview span {
  font-size: 8px !important;
  line-height: 1.25 !important;
}

.chat-stream .reactions {
  display: flex !important;
  gap: 4px !important;
  min-height: 0 !important;
  margin: 3px 0 0 19px !important;
}

.chat-stream .reactions button {
  min-height: 0 !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  border-color: color-mix(in srgb, var(--line) 70%, transparent) !important;
  background: transparent !important;
  font-size: 9px !important;
  line-height: 1.2 !important;
}

.chat-stream .reactions .react-add {
  padding-inline: 5px !important;
  opacity: .42 !important;
}

.chat-stream .message:hover .reactions .react-add {
  opacity: .9 !important;
}

.chat-stream .typing {
  margin: 5px 0 6px 46px !important;
  font-size: 9px !important;
}

.chat-stream .message-motion-rise,
.chat-stream .message-motion-pulse {
  animation: none !important;
}

@media (max-width: 720px) {
  .chat-stream {
    padding-inline: 8px !important;
  }
  .chat-stream .message {
    grid-template-columns: 34px minmax(0, 1fr) !important;
    gap: 7px !important;
    padding: 6px 5px 7px !important;
  }
  .chat-stream .message > .avatar {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
  }
  .chat-stream .message-head {
    grid-template-columns: 14px minmax(0, auto) auto minmax(0, 1fr) !important;
    column-gap: 4px !important;
  }
  .chat-stream .message-head > .com2-pawn {
    width: 12px !important;
    height: 16px !important;
    min-width: 12px !important;
  }
  .chat-stream .message-head strong {
    max-width: 42vw !important;
    font-size: 11px !important;
  }
  .chat-stream .message-head .ability-status {
    max-width: 55vw !important;
    font-size: 8px !important;
  }
  .chat-stream .bubble {
    margin-left: 16px !important;
    padding-right: 25px !important;
  }
  .chat-stream .bubble p {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }
  .chat-stream .reactions {
    margin-left: 16px !important;
  }
  .chat-stream .typing {
    margin-left: 41px !important;
  }
}


/* COM2 Chat v4.1.9 — Clean Classic Chat */
.chat-stream .message {
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 6px 8px 7px !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
.chat-stream .message:hover {
  background: color-mix(in srgb, var(--panel-2) 38%, transparent) !important;
}
.chat-stream .message > .avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin-top: 1px !important;
}
.chat-stream .message-head {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 18px !important;
  margin: 0 0 2px !important;
}
.chat-stream .message-head > .com2-pawn {
  width: 14px !important;
  height: 18px !important;
  min-width: 14px !important;
  margin: 0 !important;
  transform: none !important;
}
.chat-stream .message-head strong {
  max-width: 300px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}
.chat-stream .message-head time {
  margin-left: 3px !important;
  font-size: 8px !important;
  line-height: 1 !important;
  opacity: .62 !important;
}
.chat-stream .message-head .ability-status,
.chat-stream .message-head .role-badge,
.chat-stream .reactions,
.chat-stream .reaction-picker,
.chat-stream .react-add,
.chat-stream .reaction-pill {
  display: none !important;
}
.chat-stream .bubble {
  margin: 0 0 0 19px !important;
  padding: 2px 27px 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.chat-stream .bubble p {
  font-size: 12px !important;
  line-height: 1.5 !important;
}
.chat-stream .dots {
  right: 0 !important;
  top: 0 !important;
  opacity: .22 !important;
}
.chat-stream .message:hover .dots,
.chat-stream .dots:hover,
.chat-stream .dots:focus {
  opacity: .8 !important;
}
.chat-stream .message-reply-preview {
  width: min(560px,100%) !important;
  margin: 0 0 4px !important;
  padding: 3px 6px !important;
  background: rgba(var(--accent-rgb),.045) !important;
}
.chat-stream .typing {
  margin-left: 46px !important;
}
@media (max-width:720px) {
  .chat-stream .message {
    grid-template-columns: 34px minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 5px 5px 6px !important;
  }
  .chat-stream .message > .avatar {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
  }
  .chat-stream .message-head strong {
    max-width: 50vw !important;
    font-size: 11px !important;
  }
  .chat-stream .bubble {
    margin-left: 16px !important;
  }
  .chat-stream .bubble p {
    font-size: 11px !important;
  }
  .chat-stream .typing {
    margin-left: 41px !important;
  }
}

/* v4.2 — gift / transfer / trade */
.exchange-button{white-space:nowrap}
.exchange-item-hero,.exchange-target-card,.exchange-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:12px 13px}
.exchange-item-hero{margin-bottom:12px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),var(--panel-2))}
.exchange-item-hero h3{margin:2px 0 3px}
.exchange-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:10px;align-items:end;margin-bottom:12px}
.exchange-form>.ability-setting-field{margin:0}
.exchange-form input,.exchange-form select,.exchange-trade-box select{width:100%;min-width:0;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:10px 11px;outline:0}
.exchange-form input:focus,.exchange-form select:focus,.exchange-trade-box select:focus{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.06)}
.exchange-target-host{grid-column:1/-1;display:grid;gap:10px}
.exchange-action-grid{display:grid;grid-template-columns:1fr 1fr minmax(220px,1.25fr);gap:9px}
.exchange-action-grid>button{min-height:42px}
.exchange-trade-box{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px dashed var(--line-strong);border-radius:12px;padding:8px;background:rgba(var(--accent-rgb),.035)}
.exchange-trade-box .social-kicker{grid-column:1/-1}
.danger-soft{color:#ff8f9b!important;border-color:rgba(255,90,110,.34)!important;background:rgba(255,90,110,.08)!important}
.exchange-section{display:grid;gap:8px;margin-top:14px}.exchange-section h3{margin:0 0 2px}
.exchange-row{align-items:flex-start}.exchange-row.status-pending{border-color:rgba(var(--accent-rgb),.25)}
.exchange-row .social-kicker{display:block;margin-bottom:3px}.exchange-row b{display:block;font-size:12px}.exchange-row small{display:block;margin-top:3px}
.exchange-note{color:color-mix(in srgb,var(--text) 72%,var(--muted));font-style:italic}
.exchange-row-actions{display:flex;gap:6px;align-items:center;flex:0 0 auto}
@media(max-width:820px){.exchange-form{grid-template-columns:1fr}.exchange-target-host{grid-column:auto}.exchange-action-grid{grid-template-columns:1fr}.exchange-trade-box{grid-template-columns:1fr}.exchange-trade-box .social-kicker{grid-column:auto}.exchange-row{flex-direction:column}.exchange-row-actions{width:100%}.exchange-row-actions button{flex:1}}


/* v4.2.1 secure exchange authorization */
.com2-reauth-field{grid-column:1/-1;display:grid;gap:7px;margin-top:2px}.com2-reauth-field>span{font-size:9px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.com2-reauth-field input{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);border-radius:11px;background:var(--panel-2);color:var(--text);padding:11px 12px;outline:0}.com2-reauth-field input:focus{border-color:rgba(var(--accent-rgb),.65);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)}.com2-reauth-warning{grid-column:1/-1;color:var(--muted);font-size:9px;line-height:1.5}.com2-confirm-actions button:disabled{opacity:.45;cursor:not-allowed}

/* v4.2.2 — Authenticator 2FA */
.twofa-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}.twofa-head b{display:block;font-size:12px}.twofa-head small{display:block;margin-top:4px}.twofa-state{flex:0 0 auto;border:1px solid var(--line-strong);border-radius:999px;padding:5px 9px;font-size:8px;font-weight:900;letter-spacing:.08em;color:var(--muted);background:var(--panel-3)}.twofa-state.active{color:var(--success);border-color:rgba(33,208,139,.35);background:rgba(33,208,139,.08)}.twofa-actions{display:flex;gap:8px;flex-wrap:wrap}.totp-setup{display:grid;gap:10px;margin-top:13px;padding:13px;border:1px dashed rgba(var(--accent-rgb),.34);border-radius:13px;background:rgba(var(--accent-rgb),.04)}.totp-secret{display:block;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-3);color:var(--text);font-size:13px;letter-spacing:.08em;overflow-wrap:anywhere}.totp-verify{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.totp-verify input{width:100%;min-width:0;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:10px 11px;outline:0}.recovery-dialog{width:min(520px,calc(100vw - 28px))}.recovery-code-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.recovery-code-grid code{display:block;text-align:center;padding:10px;border-radius:9px;background:var(--panel-2);border:1px solid var(--line);font-size:11px;letter-spacing:.08em}@media(max-width:560px){.totp-verify{grid-template-columns:1fr}.recovery-code-grid{grid-template-columns:1fr}.twofa-head{align-items:flex-start}}

/* v4.2.3 — login MFA + device/session security */
.auth-mfa-pane{display:block!important}.auth-secondary-form{margin-top:10px;text-align:center}.auth-link-button{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:8px 10px;font:inherit}.auth-link-button:hover{color:var(--text)}
.security-access-head,.security-access-title{display:flex;align-items:center;gap:8px}.security-access-head{justify-content:space-between;margin:12px 0 8px}.security-access-list{display:grid;gap:8px}.security-access-row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:12px;padding:10px 11px}.security-access-title{min-width:0}.security-access-title b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.security-current,.security-mfa{font-size:8px;font-weight:850;letter-spacing:.04em;border-radius:999px;padding:3px 6px;white-space:nowrap}.security-current{color:var(--success);border:1px solid color-mix(in srgb,var(--success) 36%,transparent);background:color-mix(in srgb,var(--success) 9%,transparent)}.security-mfa{color:var(--accent);border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.08)}.security-device-heading{display:block;margin:16px 0 8px}.danger-soft{border-color:rgba(255,87,107,.26)!important;color:#ff7b8b!important}.security-access-row small{display:block;margin-top:3px;line-height:1.45}@media(max-width:620px){.security-access-row,.security-access-head{align-items:flex-start}.security-access-row{flex-direction:column}.security-access-row>button{width:100%}.security-access-head{gap:10px;flex-direction:column}.security-access-head>button{width:100%}}
.security-login-history{display:grid;gap:6px}.security-history-row{display:flex;align-items:center;gap:10px;padding:8px 3px;border-bottom:1px solid var(--line)}.security-history-row:last-child{border-bottom:0}.security-history-flags{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.security-network{font-size:8px;font-weight:850;border-radius:999px;padding:3px 6px;color:#71b7ff;border:1px solid rgba(113,183,255,.28);background:rgba(113,183,255,.08);white-space:nowrap}@media(max-width:620px){.security-history-row{align-items:flex-start}.security-history-flags{justify-content:flex-start}}

/* v4.3 — collection showcase + verified serial certificate */
.profile-collection-section{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.profile-collection-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}.profile-collection-head h4{margin:2px 0 3px;font-size:15px}.profile-collection-head p{margin:0;font-size:10px}
.profile-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.profile-collection-item{min-width:0;border:1px solid var(--line);border-radius:13px;background:var(--panel-2);padding:11px;position:relative;overflow:hidden}.profile-collection-item:before{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--line-strong)}.profile-collection-item.rarity-rare:before{background:#56a8ff}.profile-collection-item.rarity-epic:before{background:#a778ff}.profile-collection-item.rarity-legendary:before{background:#f2b84b}.profile-collection-item-top{display:flex;align-items:center;gap:9px;min-width:0}.profile-collection-item-top .com2-pawn{flex:0 0 auto}.profile-collection-item-top b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-collection-item-top small{display:block;font-size:8px;margin-top:2px}.collection-item-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--panel-3);border:1px solid var(--line);font-size:15px;flex:0 0 auto}.collection-serial-line{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:9px}.collection-serial-line>b{font-size:10px}.verified-owner-chip,.collection-owned-chip{display:inline-flex;align-items:center;width:max-content;border-radius:999px;padding:3px 6px;font-size:7px;font-weight:900;letter-spacing:.03em;color:#45db9b;background:rgba(69,219,155,.08);border:1px solid rgba(69,219,155,.22)}.collection-owned-chip{margin-top:9px}.collection-verify-button{width:100%;margin-top:7px}
.collection-editor-hero{border:1px solid var(--line);border-radius:16px;background:var(--panel-2);padding:16px;margin-bottom:12px}.collection-editor-hero h3{margin:3px 0 5px}.collection-editor-hero p{margin:0 0 10px}.collection-selection-count{font-size:11px;color:var(--accent)}.collection-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.collection-editor-item{position:relative;display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:11px;border-radius:13px;cursor:pointer;min-width:0}.collection-editor-item:hover{border-color:rgba(var(--accent-rgb),.38)}.collection-editor-item.selected{border-color:rgba(var(--accent-rgb),.72);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.2);background:rgba(var(--accent-rgb),.06)}.collection-editor-copy{display:block;min-width:0}.collection-editor-copy b,.collection-editor-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.collection-editor-copy b{font-size:11px}.collection-editor-copy small{font-size:8px;color:var(--muted);margin-top:3px}.collection-position-badge{position:absolute;right:7px;top:7px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:8px;font-weight:900}.sticky-actions{position:sticky;bottom:0;padding-top:12px;background:linear-gradient(180deg,transparent,var(--panel) 24%)}
.serial-certificate-card,.serial-history-card{border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--panel-2),var(--panel));padding:17px}.serial-certificate-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;align-items:center}.serial-certificate-card h3{margin:3px 0}.serial-certificate-card p{margin:0}.serial-certificate-seal{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(69,219,155,.36);background:rgba(69,219,155,.09);color:#45db9b;font-weight:1000;font-size:20px;box-shadow:0 0 26px rgba(69,219,155,.08)}.serial-certificate-code{grid-column:1/-1;border:1px dashed rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.05);padding:10px 12px;border-radius:11px}.serial-certificate-code small,.serial-certificate-code b{display:block}.serial-certificate-code small{font-size:7px;color:var(--muted);letter-spacing:.12em}.serial-certificate-code b{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;margin-top:3px;font-size:11px;overflow-wrap:anywhere}.serial-certificate-facts{grid-column:1/-1;display:grid;gap:6px}.serial-certificate-facts>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0;border-top:1px solid var(--line)}.serial-certificate-facts span{font-size:9px;color:var(--muted)}.serial-certificate-facts b{font-size:9px;text-align:right}.serial-history-card{margin-top:10px}.serial-history-card h4{margin:3px 0 12px}.serial-history-list{display:grid;gap:0}.serial-history-row{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-top:1px solid var(--line)}.serial-history-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:4px;box-shadow:0 0 10px rgba(var(--accent-rgb),.3)}.serial-history-row b{display:block;font-size:10px}.serial-history-row small{display:block;font-size:8px;margin-top:2px}
@media(max-width:760px){.profile-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-editor-grid{grid-template-columns:1fr}}
@media(max-width:430px){.profile-collection-grid{grid-template-columns:1fr}.profile-collection-head{align-items:stretch;flex-direction:column}.serial-certificate-facts>div{align-items:flex-start;flex-direction:column;gap:3px}.serial-certificate-facts b{text-align:left}}


/* COM2 Chat v4.4 — Güçler */
.power-set-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}.power-set-card{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}.power-set-card.complete{border-color:rgba(var(--accent-rgb),.48);background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),var(--panel-2));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.05)}.power-set-mark{width:30px;height:30px;display:grid;place-items:center;border-radius:10px;background:var(--panel-3);color:var(--muted);font-weight:900}.power-set-card.complete .power-set-mark{color:var(--accent);background:rgba(var(--accent-rgb),.14)}.power-set-card b{display:block;font-size:12px}.power-set-card small{display:block;margin-top:3px;font-size:9px}.profile-powers-section{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}.profile-powers-head{display:flex;align-items:flex-start;gap:12px}.profile-powers-head h4{margin:2px 0 4px}.profile-powers-head p{margin:0;font-size:10px}.profile-powers-actions{display:flex;align-items:center;justify-content:flex-end;margin-top:9px}.power-private-note{font-size:9px}.power-list-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.power-list-head h3{margin:0}.powers-detail-hero{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)}.powers-detail-hero h3{margin:3px 0 4px}.powers-detail-hero p{margin:0;font-size:10px}.powers-detail-list{display:grid;gap:8px;margin-top:12px}.power-detail-row{display:grid;grid-template-columns:32px 34px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2)}.power-rank{font-size:9px;color:var(--muted);font-weight:800}.power-value{font-size:10px;color:var(--accent);white-space:nowrap}.power-detail-row .collection-item-icon{width:30px;height:30px}.power-detail-row .com2-pawn{transform:scale(.9)}
@media(max-width:640px){.power-set-row{grid-template-columns:1fr}.power-detail-row{grid-template-columns:28px 30px minmax(0,1fr) auto}.power-detail-row>button{grid-column:3/5;justify-self:start}.power-value{font-size:9px}}


/* v4.4.3 — pawn selector cleanup + premium card stability */
.pawn-selector-grid{grid-template-columns:repeat(2,minmax(300px,1fr));align-items:stretch}
.pawn-selector-grid>.pawn-choice:first-child{grid-column:1/-1}
.pawn-choice{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:70px}
.pawn-choice>.com2-pawn{justify-self:center;align-self:center;margin:0}
.pawn-choice>.grow{min-width:0;display:grid;gap:2px}
.pawn-choice b{font-size:10px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25}
.pawn-choice small{font-size:8px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;word-break:break-word}
.pawn-choice button{justify-self:end;min-width:112px;text-align:center}
.pawn-choice.active{box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.10),0 10px 24px rgba(0,0,0,.16)}
.pawn-choice:first-child{background:linear-gradient(135deg,rgba(255,255,255,.03),rgba(var(--accent-rgb),.05) 65%,rgba(255,255,255,.02));border-color:rgba(var(--accent-rgb),.30)}
@media(max-width:980px){.pawn-selector-grid{grid-template-columns:1fr}}


/* COM2 Chat v4.4.4 — unified pawn polish */
.com2-pawn.pawn-premium{
  --pawn-glow:rgba(126,126,255,.45);
  --pawn-ring:rgba(210,220,255,.48);
  --pawn-glow-soft:rgba(126,126,255,.16);
}
.com2-pawn.pawn-pink{--pawn-glow:rgba(255,104,176,.58);--pawn-ring:rgba(255,177,215,.62);--pawn-glow-soft:rgba(255,104,176,.18)}
.com2-pawn.pawn-blue.pawn-premium{--pawn-glow:rgba(49,126,255,.64);--pawn-ring:rgba(136,181,255,.66);--pawn-glow-soft:rgba(49,126,255,.19)}
.com2-pawn.pawn-purple{--pawn-glow:rgba(151,82,255,.75);--pawn-ring:rgba(194,150,255,.74);--pawn-glow-soft:rgba(151,82,255,.23)}
.com2-pawn.pawn-gold{--pawn-glow:rgba(255,193,36,.86);--pawn-ring:rgba(255,226,126,.82);--pawn-glow-soft:rgba(255,193,36,.26)}
.com2-pawn.pawn-obsidian{--pawn-glow:rgba(155,96,255,.92);--pawn-ring:rgba(222,207,255,.88);--pawn-glow-soft:rgba(190,74,255,.28)}
.com2-pawn.pawn-ruby{--pawn-glow:rgba(255,52,94,.94);--pawn-ring:rgba(255,187,157,.90);--pawn-glow-soft:rgba(255,52,94,.29)}
.com2-pawn.pawn-celestial{--pawn-glow:rgba(255,202,54,.96);--pawn-ring:rgba(255,241,162,.94);--pawn-glow-soft:rgba(255,202,54,.32)}
.com2-pawn.pawn-amethyst{--pawn-glow:rgba(166,96,255,.94);--pawn-ring:rgba(226,202,255,.90);--pawn-glow-soft:rgba(166,96,255,.30)}
.com2-pawn.pawn-sapphire{--pawn-glow:rgba(54,137,255,.94);--pawn-ring:rgba(190,221,255,.90);--pawn-glow-soft:rgba(54,137,255,.30)}
.com2-pawn.pawn-rose{--pawn-glow:rgba(255,116,177,.92);--pawn-ring:rgba(255,211,231,.90);--pawn-glow-soft:rgba(255,116,177,.28)}

/* All premium pawns get a living aura; legendary collection pieces are stronger. */
.com2-pawn.pawn-premium::before{
  inset:4% -34% -18%;
  background:radial-gradient(circle at 50% 52%,var(--pawn-glow) 0 16%,var(--pawn-glow-soft) 34%,transparent 70%)!important;
  filter:blur(4px);
  opacity:.62;
  animation:pawnGlow444 2.8s ease-in-out infinite;
}
.com2-pawn.pawn-premium::after{
  content:"";
  position:absolute;
  left:50%;bottom:-3px;
  width:21px;height:6px;
  border:1px solid var(--pawn-ring);
  border-radius:50%;
  transform:translateX(-50%) scale(.78);
  opacity:.24;
  box-shadow:0 0 5px var(--pawn-glow),0 0 10px var(--pawn-glow-soft);
  pointer-events:none;
  animation:pawnRing444 2.8s ease-in-out infinite;
}
.com2-pawn.pawn-obsidian,.com2-pawn.pawn-ruby,.com2-pawn.pawn-celestial,.com2-pawn.pawn-amethyst,.com2-pawn.pawn-sapphire,.com2-pawn.pawn-rose{
  width:21px;height:28px;flex-basis:21px;
}
.com2-pawn.pawn-obsidian::before,.com2-pawn.pawn-ruby::before,.com2-pawn.pawn-celestial::before,.com2-pawn.pawn-amethyst::before,.com2-pawn.pawn-sapphire::before,.com2-pawn.pawn-rose::before{
  inset:-6% -48% -24%;opacity:.86;filter:blur(4.5px);animation-duration:2.35s
}
.com2-pawn.pawn-obsidian::after,.com2-pawn.pawn-ruby::after,.com2-pawn.pawn-celestial::after,.com2-pawn.pawn-amethyst::after,.com2-pawn.pawn-sapphire::after,.com2-pawn.pawn-rose::after{
  width:24px;height:7px;opacity:.46;box-shadow:0 0 7px var(--pawn-glow),0 0 14px var(--pawn-glow-soft);animation-duration:2.35s
}
.com2-pawn.pawn-obsidian .pawn-art,.com2-pawn.pawn-ruby .pawn-art,.com2-pawn.pawn-celestial .pawn-art,.com2-pawn.pawn-amethyst .pawn-art,.com2-pawn.pawn-sapphire .pawn-art,.com2-pawn.pawn-rose .pawn-art{
  animation:pawnLegendaryFloat444 3.2s ease-in-out infinite;
}
.com2-pawn.pawn-obsidian .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.62)) drop-shadow(0 0 6px rgba(155,96,255,.76)) drop-shadow(0 0 11px rgba(196,78,255,.34))}
.com2-pawn.pawn-ruby .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.54)) drop-shadow(0 0 7px rgba(255,52,94,.78)) drop-shadow(0 0 11px rgba(255,174,116,.28))}
.com2-pawn.pawn-celestial .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.50)) drop-shadow(0 0 8px rgba(255,202,54,.86)) drop-shadow(0 0 13px rgba(255,239,150,.34))}
.com2-pawn.pawn-amethyst .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.50)) drop-shadow(0 0 7px rgba(166,96,255,.80)) drop-shadow(0 0 12px rgba(226,202,255,.28))}
.com2-pawn.pawn-sapphire .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.50)) drop-shadow(0 0 7px rgba(54,137,255,.82)) drop-shadow(0 0 12px rgba(190,221,255,.28))}
.com2-pawn.pawn-rose .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.48)) drop-shadow(0 0 7px rgba(255,116,177,.80)) drop-shadow(0 0 12px rgba(255,211,231,.27))}

@keyframes pawnGlow444{0%,100%{opacity:.48;transform:scale(.92)}50%{opacity:.84;transform:scale(1.08)}}
@keyframes pawnRing444{0%,100%{opacity:.18;transform:translateX(-50%) scale(.72)}50%{opacity:.55;transform:translateX(-50%) scale(1.02)}}
@keyframes pawnLegendaryFloat444{0%,100%{transform:translateY(0)}50%{transform:translateY(-.8px)}}

/* Owner Black remains unique and visually separate from collectible pawns. */
.com2-pawn.pawn-black::before{opacity:.96;box-shadow:0 0 12px rgba(142,100,255,.18)}
.com2-pawn.pawn-black::after{opacity:.48}

/* Pawn selector: stable columns, stronger collection hierarchy, no button wrapping. */
.pawn-selector-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pawn-selector-grid>.pawn-choice.role-default{grid-column:1/-1}
.pawn-choice{grid-template-columns:46px minmax(0,1fr) max-content;min-height:72px;padding:10px 11px;overflow:hidden}
.pawn-choice>.com2-pawn{transform:scale(1.10);transform-origin:center}
.pawn-choice.limited{background:linear-gradient(135deg,rgba(255,211,97,.035),var(--panel-3) 58%,rgba(var(--accent-rgb),.025));border-color:color-mix(in srgb,#f2b84b 28%,var(--line))}
.pawn-choice.rarity-legendary{box-shadow:inset 0 0 20px rgba(242,184,75,.035)}
.pawn-choice.rarity-legendary.active{border-color:rgba(242,184,75,.58);box-shadow:inset 0 0 0 1px rgba(242,184,75,.12),0 8px 28px rgba(0,0,0,.18)}
.pawn-choice.role-default{background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(var(--accent-rgb),.045));border-color:rgba(var(--accent-rgb),.28)}
.pawn-choice button{min-width:112px;max-width:150px;white-space:nowrap;line-height:1.2;padding-inline:10px}
.pawn-choice.role-default button{min-width:128px}
.pawn-choice small{overflow-wrap:anywhere}
@media(max-width:760px){
  .pawn-selector-grid{grid-template-columns:1fr}
  .pawn-choice{grid-template-columns:42px minmax(0,1fr) max-content;min-height:68px}
  .pawn-choice button{min-width:auto;max-width:124px;padding-inline:8px;font-size:7.5px}
  .pawn-choice.role-default button{min-width:auto}
}
@media(max-width:430px){
  .pawn-choice{grid-template-columns:38px minmax(0,1fr);align-items:center}
  .pawn-choice button{grid-column:2;justify-self:start;max-width:100%;margin-top:3px}
}

/* Performance guards for the new premium effects. */
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-premium::before,
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-premium::after,
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-premium .pawn-art,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-premium::before,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-premium::after,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-premium .pawn-art{animation-play-state:paused!important}
.chat-stream.is-scrolling .com2-pawn.pawn-premium::before,
.chat-stream.is-scrolling .com2-pawn.pawn-premium::after,
.chat-stream.is-scrolling .com2-pawn.pawn-premium .pawn-art{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
  .com2-pawn.pawn-premium::before,.com2-pawn.pawn-premium::after,.com2-pawn.pawn-premium .pawn-art{animation:none!important}
}


/* COM2 Chat v4.4.7 — consistent pawn previews across Güçler / Mağaza / Profil */
.store-card-visual>.com2-pawn{transform:scale(2.45);transform-origin:center}
.store-card.rarity-legendary{background:linear-gradient(145deg,rgba(255,214,92,.075),var(--panel));box-shadow:inset 0 0 30px rgba(255,214,92,.045)}
.store-inventory-item>.com2-pawn{transform:scale(1.04);transform-origin:center;margin:0 5px 0 2px}
.profile-collection-item-top .com2-pawn{transform:scale(1.08);transform-origin:center}
.collection-editor-item .com2-pawn{transform:scale(1.06);transform-origin:center}
.power-detail-row .com2-pawn{transform:scale(1);transform-origin:center}
.ability-card-top>.com2-pawn{transform:scale(1.04);transform-origin:center;margin-inline:2px}
/* Standard premium pawns remain visually clean; rarity comes from aura/card, not an interior badge. */
.store-card:has(.pawn-pink),.store-card:has(.pawn-blue.pawn-premium),.store-card:has(.pawn-purple),.store-card:has(.pawn-gold){overflow:hidden}
.profile-collection-item.rarity-legendary,.power-detail-row.rarity-legendary{border-color:color-mix(in srgb,#ffd65c 38%,var(--line));box-shadow:inset 0 0 24px rgba(255,214,92,.035)}
@media(max-width:720px){.store-card-visual>.com2-pawn{transform:scale(2.08)}}


/* v4.4.8 — expanded rarity hierarchy */
.rarity-legendary_plus{color:#e8b7ff;border-color:#d58cff55}
.rarity-ancient{color:#ffd978;border-color:#ffd97866}
.rarity-mythic{color:#ff557d;border-color:#ff557d66}
.rarity-unique{color:#f1f3ff;border-color:#a78bfa77}
.ability-card.rarity-legendary_plus{border-color:#d58cff66;background:linear-gradient(145deg,#d58cff0d,var(--panel-2));box-shadow:inset 0 0 26px #d58cff0a}
.ability-card.rarity-ancient{border-color:#ffd97870;background:linear-gradient(145deg,#ffd97812,var(--panel-2));box-shadow:inset 0 0 30px #ffd9780c}
.ability-card.rarity-mythic{border-color:#ff557d77;background:linear-gradient(145deg,#ff557d12,var(--panel-2));box-shadow:inset 0 0 32px #ff557d0e}
.ability-card.rarity-unique{border-color:#b79cff88;background:linear-gradient(145deg,#b79cff16,var(--panel-2));box-shadow:inset 0 0 34px #b79cff12,0 0 20px #7c3aed10}
.store-card.rarity-legendary_plus{border-color:#d58cff66;background:linear-gradient(145deg,#d58cff10,var(--panel));box-shadow:inset 0 0 30px #d58cff0b}
.store-card.rarity-ancient{border-color:#ffd97875;background:linear-gradient(145deg,#ffd97812,var(--panel));box-shadow:inset 0 0 32px #ffd9780d}
.store-card.rarity-mythic{border-color:#ff557d7a;background:linear-gradient(145deg,#ff557d13,var(--panel));box-shadow:inset 0 0 34px #ff557d0f}
.store-card.rarity-unique{border-color:#b79cff8f;background:linear-gradient(145deg,#b79cff18,var(--panel));box-shadow:inset 0 0 38px #b79cff14,0 0 24px #7c3aed12}
.store-card.rarity-unique .store-rarity{color:#eeeaff}.store-card.rarity-mythic .store-rarity{color:#ff7896}.store-card.rarity-ancient .store-rarity{color:#ffe39a}.store-card.rarity-legendary_plus .store-rarity{color:#e8b7ff}
.profile-collection-item.rarity-legendary_plus:before{background:#d58cff}.profile-collection-item.rarity-ancient:before{background:#ffd978}.profile-collection-item.rarity-mythic:before{background:#ff557d}.profile-collection-item.rarity-unique:before{background:#b79cff}
.profile-collection-item.rarity-legendary_plus{border-color:#d58cff55}.profile-collection-item.rarity-ancient{border-color:#ffd97860}.profile-collection-item.rarity-mythic{border-color:#ff557d65}.profile-collection-item.rarity-unique{border-color:#b79cff75}
.power-detail-row.rarity-legendary_plus{border-color:#d58cff55}.power-detail-row.rarity-ancient{border-color:#ffd97860}.power-detail-row.rarity-mythic{border-color:#ff557d65}.power-detail-row.rarity-unique{border-color:#b79cff78;box-shadow:inset 0 0 28px #b79cff0e}
.pawn-choice.rarity-legendary_plus{border-color:#d58cff55}.pawn-choice.rarity-ancient{border-color:#ffd97860}.pawn-choice.rarity-mythic{border-color:#ff557d65}.pawn-choice.rarity-unique{border-color:#b79cff78}
.pawn-choice.rarity-unique.active{border-color:#c4b5fd;box-shadow:inset 0 0 0 1px #b79cff22,0 8px 30px #7c3aed18}
.collection-editor-item.rarity-legendary_plus{border-color:#d58cff50}.collection-editor-item.rarity-ancient{border-color:#ffd97855}.collection-editor-item.rarity-mythic{border-color:#ff557d55}.collection-editor-item.rarity-unique{border-color:#b79cff65}

/* v4.5.0 — status power suite */
.ability-status-text{position:relative;max-width:100%;font-weight:700}
.profile-power-status{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin:10px 0 0;padding:6px 9px;border-radius:9px;border:1px solid var(--line);background:var(--panel-3);font-size:10px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ability-preview-status{font-size:12px}
.member-status.ability-status-text{font-weight:650}


/* v4.5.1 — guided store categories */
.store-tabs-guided{padding-bottom:12px;margin-bottom:2px}
.store-guide{display:grid;gap:14px;margin:0 0 14px;padding:16px 17px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.09),var(--panel-2) 68%)}
.store-guide h3{margin:3px 0 5px;font-size:16px}
.store-guide p{margin:0;max-width:680px;font-size:9px;line-height:1.6}
.store-power-chain{display:flex;align-items:stretch;gap:7px;overflow-x:auto;padding:2px 1px 4px;scrollbar-width:none}
.store-power-chain::-webkit-scrollbar{display:none}
.store-chain-node{min-width:132px;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-3)}
.store-chain-node.available{border-color:rgba(var(--accent-rgb),.35)}
.store-chain-node.owned{border-color:rgba(69,219,155,.34);background:rgba(69,219,155,.055)}
.store-chain-step{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:rgba(var(--accent-rgb),.10);color:var(--accent);font-size:8px;font-weight:900}
.store-chain-node.owned .store-chain-step{color:#45db9b;background:rgba(69,219,155,.10)}
.store-chain-node b{display:block;font-size:9px;line-height:1.25}
.store-chain-node small{display:block;margin-top:2px;font-size:7px}
.store-chain-arrow{display:grid;place-items:center;flex:0 0 14px;color:var(--muted);font-size:11px}
.store-dependency{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin:7px 0 0;padding:4px 7px;border-radius:8px;border:1px solid rgba(var(--accent-rgb),.18);background:rgba(var(--accent-rgb),.06)}
.store-dependency span{font-size:6px;font-weight:900;letter-spacing:.7px;color:var(--accent)}
.store-dependency b{font-size:7px;color:var(--muted);font-weight:700;white-space:normal}
.store-missing-dependency{width:max-content;max-width:100%;margin-top:5px;padding:4px 7px;border-radius:8px;border:1px solid rgba(255,181,70,.22);background:rgba(255,181,70,.06);color:#f5bd62;font-size:7px;font-weight:800;line-height:1.35}
@media(max-width:720px){.store-guide{padding:13px}.store-guide h3{font-size:14px}.store-chain-node{min-width:122px}.store-tabs-guided{gap:6px}}

/* v4.7 — COM2 Coin shop */
.coin-shop-hero{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:22px;border:1px solid var(--border,#283451);border-radius:20px;background:linear-gradient(135deg,rgba(109,93,252,.10),rgba(251,191,36,.06))}.coin-shop-note{margin:14px 0}.coin-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.coin-package-card{display:flex;flex-direction:column;gap:15px;min-height:220px;padding:18px;border:1px solid var(--border,#283451);border-radius:18px;background:rgba(15,22,39,.72)}.coin-package-card.featured{border-color:rgba(250,204,21,.45);box-shadow:0 12px 34px rgba(250,204,21,.07)}.coin-package-top{display:flex;gap:13px;align-items:center}.coin-symbol{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:24px;font-weight:900;background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.3)}.coin-package-total{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:auto}.coin-package-total b{font-size:21px}.coin-package-total strong{font-size:18px}.coin-order-history{margin-top:22px;padding:18px;border:1px solid var(--border,#283451);border-radius:18px}.coin-order-head{margin-bottom:12px}.coin-order-list{display:grid;gap:9px}.coin-order-row{display:flex;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(148,163,184,.16);border-radius:13px;background:rgba(255,255,255,.018)}.coin-order-status{padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800;white-space:nowrap}.coin-order-status.pending{background:rgba(250,204,21,.12);color:#facc15}.coin-order-status.paid{background:rgba(52,211,153,.12);color:#5ee6a8}.coin-order-status.cancelled,.coin-order-status.failed{background:rgba(248,113,113,.12);color:#fb8b98}.coin-order-status.refunded{background:rgba(96,165,250,.12);color:#7db7ff}@media(max-width:900px){.coin-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:620px){.coin-shop-hero{align-items:flex-start;flex-direction:column}.coin-package-grid{grid-template-columns:1fr}.coin-order-row{align-items:flex-start;flex-wrap:wrap}}


/* v4.7.2 — coin shop layout refresh */
.coin-package-grid{grid-template-columns:repeat(3,minmax(240px,1fr));gap:16px;align-items:stretch}
.coin-package-card{position:relative;display:flex;flex-direction:column;gap:14px;min-height:300px;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(180deg,rgba(12,18,34,.92),rgba(10,15,28,.96));overflow:hidden}
.coin-package-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(250,204,21,.07),transparent 46%);pointer-events:none}
.coin-package-card.featured{border-color:rgba(250,204,21,.55);box-shadow:0 14px 36px rgba(250,204,21,.09), inset 0 0 0 1px rgba(250,204,21,.08)}
.coin-package-top{gap:12px;align-items:flex-start}
.coin-symbol{width:52px;height:52px;border-radius:16px;flex:0 0 52px;font-size:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.coin-package-copy{display:grid;gap:3px;min-width:0}
.coin-package-copy .social-kicker{font-size:10px;letter-spacing:.13em}
.coin-package-copy h3{margin:2px 0 0;font-size:15px;line-height:1.18}
.coin-package-copy .muted{font-size:9px;line-height:1.45;white-space:normal}
.coin-package-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto}
.coin-package-stat{padding:11px 12px;border-radius:14px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.03)}
.coin-package-stat small{display:block;font-size:9px;color:var(--muted,#94a3b8);letter-spacing:.08em;margin-bottom:4px}
.coin-package-stat strong{display:block;font-size:19px;line-height:1.1;white-space:nowrap}
.coin-package-stat.price strong{font-size:17px}
.coin-package-card .package-order{width:100%;justify-content:center;margin-top:2px}
.coin-package-footnote{font-size:8px;color:var(--muted,#94a3b8);line-height:1.4;min-height:22px}
@media(max-width:1024px){.coin-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.coin-package-grid{grid-template-columns:1fr}.coin-package-card{min-height:unset}.coin-package-summary{grid-template-columns:1fr 1fr}}
@media(max-width:380px){.coin-package-summary{grid-template-columns:1fr}.coin-package-stat strong{white-space:normal}}


/* v4.7.3 — coin shop hard layout rebuild */
.coin-package-grid{grid-template-columns:repeat(3,minmax(230px,1fr));gap:16px;align-items:stretch}
.coin-package-card{display:flex;flex-direction:column;gap:14px;min-height:320px;padding:18px;border:1px solid var(--border,#283451);border-radius:20px;background:linear-gradient(180deg,rgba(12,18,34,.95),rgba(10,15,28,.98));overflow:hidden}
.coin-package-card.featured{border-color:rgba(250,204,21,.48);box-shadow:0 14px 38px rgba(250,204,21,.07)}
.coin-package-top{display:flex;gap:12px;align-items:flex-start}
.coin-symbol{display:grid;place-items:center;width:46px;height:46px;flex:0 0 46px;border-radius:16px;font-size:24px;font-weight:900;background:rgba(250,204,21,.12);border:1px solid rgba(250,204,21,.30)}
.coin-package-copy{display:grid;gap:3px;min-width:0}
.coin-package-copy h3{margin:0;font-size:15px;line-height:1.2}
.coin-package-copy p{margin:0;font-size:9px;line-height:1.45;white-space:normal}
.coin-package-stack{display:grid;gap:10px;margin-top:auto}
.coin-package-box{padding:12px 13px;border-radius:14px;border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.03)}
.coin-package-box small{display:block;margin-bottom:4px;font-size:9px;letter-spacing:.08em;color:var(--muted,#94a3b8)}
.coin-package-box strong{display:block;font-size:22px;line-height:1.1;white-space:nowrap}
.coin-package-box.price strong{font-size:18px}
.coin-package-footnote{min-height:34px;font-size:8px;line-height:1.45;color:var(--muted,#94a3b8)}
.coin-package-card .package-order{width:100%;justify-content:center;padding:10px 14px;margin-top:2px}
@media(max-width:1024px){.coin-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.coin-package-grid{grid-template-columns:1fr}.coin-package-card{min-height:unset}}


/* v4.7.4 — coin shop 2-column layout */
.coin-package-grid{grid-template-columns:repeat(2,minmax(260px,1fr)) !important;gap:18px !important}
@media(max-width:720px){.coin-package-grid{grid-template-columns:1fr !important}}


/* v4.7.5 — final 2-column rarity coin packages */
.coin-package-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  gap:16px !important;
  box-sizing:border-box !important;
  overflow:visible !important;
}
.coin-package-grid > *{min-width:0 !important;max-width:100% !important;box-sizing:border-box !important}
.coin-package-card{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:300px;
  padding:18px;
  box-sizing:border-box !important;
  overflow:hidden !important;
  isolation:isolate;
}
.coin-package-top,.coin-package-copy,.coin-package-stack,.coin-package-box{min-width:0 !important;max-width:100% !important;box-sizing:border-box !important}
.coin-package-copy h3{font-size:clamp(16px,2vw,20px);overflow-wrap:anywhere}
.coin-package-copy p{overflow-wrap:anywhere}
.coin-package-box strong{font-size:clamp(17px,2.4vw,22px) !important;line-height:1.15;white-space:normal !important;overflow-wrap:anywhere}
.coin-package-box.price strong{font-size:clamp(16px,2vw,20px) !important}
.coin-package-card .package-order{max-width:100%;box-sizing:border-box}

.coin-package-card.coin-tier-rare{border-color:rgba(96,165,250,.40)}
.coin-package-card.coin-tier-rare::after{content:"RARE";position:absolute;right:14px;top:12px;font-size:9px;font-weight:900;letter-spacing:.14em;color:#93c5fd;opacity:.80}
.coin-package-card.coin-tier-epic{border-color:rgba(168,85,247,.48);box-shadow:0 12px 30px rgba(168,85,247,.06)}
.coin-package-card.coin-tier-epic::after{content:"EPIC";position:absolute;right:14px;top:12px;font-size:9px;font-weight:900;letter-spacing:.14em;color:#c084fc;opacity:.85}
.coin-package-card.coin-tier-legendary{border-color:rgba(250,204,21,.52);box-shadow:0 14px 34px rgba(250,204,21,.07)}
.coin-package-card.coin-tier-legendary::after{content:"EFSANEVİ";position:absolute;right:14px;top:12px;font-size:9px;font-weight:900;letter-spacing:.12em;color:#fde047;opacity:.90}
.coin-package-card.coin-tier-ancient{border-color:rgba(251,191,36,.58);box-shadow:0 14px 36px rgba(245,158,11,.08)}
.coin-package-card.coin-tier-ancient::after{content:"KADİM";position:absolute;right:14px;top:12px;font-size:9px;font-weight:900;letter-spacing:.14em;color:#fbbf24;opacity:.92}
.coin-package-card.coin-tier-mythic{border-color:rgba(244,63,94,.56);box-shadow:0 14px 36px rgba(244,63,94,.08)}
.coin-package-card.coin-tier-mythic::after{content:"MİTİK";position:absolute;right:14px;top:12px;font-size:9px;font-weight:900;letter-spacing:.14em;color:#fb7185;opacity:.92}
.coin-package-card.coin-tier-unique{border-color:rgba(250,204,21,.72);box-shadow:0 16px 42px rgba(250,204,21,.10),inset 0 0 0 1px rgba(255,255,255,.025)}
.coin-package-card.coin-tier-unique::before{background:radial-gradient(circle at 20% 0%,rgba(250,204,21,.13),transparent 48%),radial-gradient(circle at 100% 100%,rgba(168,85,247,.10),transparent 44%)}
.coin-package-card.coin-tier-unique::after{content:"EŞSİZ";position:absolute;right:14px;top:12px;font-size:9px;font-weight:900;letter-spacing:.14em;color:#fde047;opacity:1}
.coin-tier-rare .coin-symbol{border-color:rgba(96,165,250,.38)}
.coin-tier-epic .coin-symbol{border-color:rgba(168,85,247,.42)}
.coin-tier-legendary .coin-symbol,.coin-tier-ancient .coin-symbol,.coin-tier-unique .coin-symbol{border-color:rgba(250,204,21,.45)}
.coin-tier-mythic .coin-symbol{border-color:rgba(244,63,94,.45)}

@media(max-width:760px){
  .coin-package-grid{grid-template-columns:1fr !important}
  .coin-package-card{min-height:unset}
}


/* v4.8.0 — Volunteer / bağışçı özel pawn */
.com2-pawn.pawn-volunteer{--pawn-glow:rgba(42,224,202,.90);--pawn-ring:rgba(255,211,102,.88);--pawn-glow-soft:rgba(42,224,202,.25);width:21px;height:28px;flex-basis:21px}
.com2-pawn.pawn-volunteer::before{inset:-2% -42% -22%;opacity:.78;background:radial-gradient(circle at 50% 50%,rgba(255,211,102,.28) 0 12%,var(--pawn-glow) 20%,var(--pawn-glow-soft) 42%,transparent 72%)!important;animation-duration:3.1s}
.com2-pawn.pawn-volunteer::after{width:23px;height:7px;opacity:.42;border-color:rgba(255,211,102,.92);box-shadow:0 0 6px rgba(255,211,102,.42),0 0 13px rgba(42,224,202,.32)}
.com2-pawn.pawn-volunteer .pawn-art{filter:drop-shadow(0 2px 2px rgba(0,0,0,.48)) drop-shadow(0 0 7px rgba(42,224,202,.72)) drop-shadow(0 0 10px rgba(255,211,102,.24));animation:pawnLegendaryFloat444 3.8s ease-in-out infinite}
.account-bound-pill{display:inline-flex;align-items:center;width:max-content;max-width:100%;margin-top:4px;padding:3px 6px;border:1px solid rgba(255,211,102,.32);border-radius:999px;background:linear-gradient(90deg,rgba(42,224,202,.09),rgba(255,211,102,.09));color:#e9d58a;font-size:7px;font-weight:900;letter-spacing:.045em;white-space:nowrap}


/* v4.9.0 — COM2 Özel Statüler / Destekçi Mührü */
.supporter-seal{position:relative;display:inline-grid;place-items:center;width:19px;height:19px;flex:0 0 19px;margin-left:3px;vertical-align:middle;filter:drop-shadow(0 0 5px rgba(60,225,213,.35))}
.supporter-seal-crystal{position:relative;display:grid;place-items:center;width:12px;height:12px;transform:rotate(45deg);border-radius:4px;background:linear-gradient(135deg,#86fff2 0%,#38d8d4 28%,#137ebf 62%,#07243c 100%);border:1px solid rgba(255,218,126,.98);box-shadow:0 0 0 1px rgba(63,236,222,.16),0 0 10px rgba(51,224,210,.5),inset 1px 1px 3px rgba(255,255,255,.82),inset -2px -2px 4px rgba(3,24,47,.62);animation:supporterSealPulse 3.2s ease-in-out infinite}
.supporter-seal-crystal::before{content:"";position:absolute;inset:1px;border-top:1px solid rgba(255,255,255,.7);border-left:1px solid rgba(255,255,255,.35);border-radius:3px}
.supporter-seal-crystal::after{content:"";position:absolute;width:3px;height:3px;right:-2px;top:-2px;border-radius:50%;background:#ffe29a;box-shadow:0 0 6px #ffe29a, -11px 11px 7px rgba(78,244,227,.8)}
.supporter-seal-crystal b{position:relative;z-index:2;transform:rotate(-45deg);font-size:4.8px;line-height:1;letter-spacing:-.25px;color:#fff1bc;text-shadow:0 1px 2px #001a2f;font-weight:900}
.supporter-seal-large{width:44px;height:44px;flex-basis:44px;margin:0}
.supporter-seal-large .supporter-seal-crystal{width:29px;height:29px;border-width:2px;border-radius:8px;box-shadow:0 0 0 2px rgba(63,236,222,.12),0 0 24px rgba(51,224,210,.58),inset 2px 2px 7px rgba(255,255,255,.82),inset -4px -4px 8px rgba(3,24,47,.68)}
.supporter-seal-large .supporter-seal-crystal b{font-size:9px;letter-spacing:-.4px}.supporter-seal-large .supporter-seal-crystal::after{width:5px;height:5px;right:-4px;top:-4px;box-shadow:0 0 9px #ffe29a,-24px 24px 10px rgba(78,244,227,.82)}
@keyframes supporterSealPulse{0%,100%{filter:brightness(1);transform:rotate(45deg) scale(1)}50%{filter:brightness(1.12);transform:rotate(45deg) scale(1.045)}}
.message-head .supporter-seal{margin-right:1px}.member-name-line .supporter-seal{transform:scale(.9);transform-origin:left center}.pawn-name-line .supporter-seal{margin-left:4px}
.supporter-profile{position:relative;overflow:hidden;border-color:rgba(72,226,211,.26)!important;box-shadow:0 24px 70px rgba(3,18,34,.22),0 0 0 1px rgba(255,213,116,.05),0 0 38px rgba(43,211,201,.07)}
.supporter-profile::before{content:"";position:absolute;pointer-events:none;z-index:0;inset:-35% 42% auto -18%;height:210px;background:radial-gradient(circle,rgba(68,229,216,.16),transparent 66%);filter:blur(10px)}
.supporter-profile>*{position:relative;z-index:1}
.supporter-status-card{display:flex;align-items:center;gap:14px;margin:2px 0 16px;padding:14px 15px;border:1px solid rgba(78,225,213,.22);border-radius:17px;background:linear-gradient(115deg,rgba(28,201,193,.09),rgba(17,51,83,.08) 52%,rgba(242,199,101,.07));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.supporter-status-mark{width:46px;height:46px;display:grid;place-items:center;flex:0 0 46px}.supporter-status-kicker{display:block;color:#68ddd5;font-size:9px;font-weight:900;letter-spacing:.15em;margin-bottom:2px}.supporter-status-title{display:block;font-size:13px;letter-spacing:.04em;color:var(--text);margin-bottom:2px}.supporter-status-copy{display:block;color:var(--muted);font-size:11px}.supporter-status-year{margin-left:auto;padding:7px 9px;border:1px solid rgba(240,204,113,.22);border-radius:999px;color:#f0ce79;background:rgba(235,191,82,.06);font-size:10px;font-weight:800;white-space:nowrap}
@media(max-width:560px){.supporter-status-card{align-items:flex-start;flex-wrap:wrap}.supporter-status-year{margin-left:60px;margin-top:-10px}}
@media(prefers-reduced-motion:reduce){.supporter-seal-crystal{animation:none}}

/* v4.9.1 — COM2 Destekçi Mührü inline nickname alignment hotfix */
/* Mühür bir layout öğesi değil, nickname'in küçük inline statü işaretidir. */
.supporter-seal:not(.supporter-seal-large){
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:14px!important;
  height:14px!important;
  min-width:14px!important;
  flex:0 0 14px!important;
  margin:0 0 0 4px!important;
  padding:0!important;
  vertical-align:-2px!important;
  line-height:1!important;
  align-self:center!important;
  filter:drop-shadow(0 0 3px rgba(60,225,213,.28))!important;
}
.supporter-seal:not(.supporter-seal-large) .supporter-seal-crystal{
  width:9px!important;
  height:9px!important;
  border-radius:3px!important;
  border-width:1px!important;
  box-shadow:0 0 0 1px rgba(63,236,222,.12),0 0 6px rgba(51,224,210,.38),inset 1px 1px 2px rgba(255,255,255,.72),inset -1px -1px 3px rgba(3,24,47,.55)!important;
}
.supporter-seal:not(.supporter-seal-large) .supporter-seal-crystal b{
  font-size:3.8px!important;
  letter-spacing:-.2px!important;
}
.supporter-seal:not(.supporter-seal-large) .supporter-seal-crystal::after{
  width:2px!important;
  height:2px!important;
  right:-2px!important;
  top:-2px!important;
  box-shadow:0 0 4px #ffe29a,-8px 8px 5px rgba(78,244,227,.62)!important;
}

/* Sağ kullanıcı listesi: nickname + mühür aynı satır, durum metni alt satır. */
.member-name-line{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  min-width:0!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.member-name-line > b{
  display:block!important;
  flex:0 1 auto!important;
  min-width:0!important;
  max-width:calc(100% - 18px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.member-name-line > .supporter-seal{
  flex:0 0 14px!important;
  transform:none!important;
  transform-origin:center!important;
}

/* Chat: zaman damgası mühürden sonra gelir, mühür nicke yapışık kalır. */
.chat-stream .message-head > strong{
  flex:0 1 auto!important;
  min-width:0!important;
}
.chat-stream .message-head > .supporter-seal{
  flex:0 0 14px!important;
  margin-left:-1px!important;
  margin-right:1px!important;
}
.chat-stream .message-head > time{
  flex:0 0 auto!important;
}

/* Pawn + nickname satırları: destekçi işareti pawn değil nickname grubuna ait görünür. */
.pawn-name-line{
  align-items:center!important;
}
.pawn-name-line > strong,
.pawn-name-line > h3{
  min-width:0!important;
}
.pawn-name-line > .supporter-seal,
.pawn-name-line > #profileSupporterSlot{
  flex:0 0 auto!important;
}
#profileSupporterSlot{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  height:14px!important;
  margin:0!important;
  padding:0!important;
  line-height:1!important;
}
#profileSupporterSlot:empty{
  display:none!important;
}
#profileSupporterSlot > .supporter-seal{
  margin-left:-2px!important;
}

/* Profil/hero tarafında da başlık satırını büyütmez. */
.social-profile-hero .pawn-name-line,
.social-profile-card .pawn-name-line,
.user-meta .pawn-name-line{
  flex-wrap:nowrap!important;
}

@media(max-width:720px){
  .supporter-seal:not(.supporter-seal-large){width:13px!important;height:13px!important;min-width:13px!important;flex-basis:13px!important;margin-left:3px!important}
  .member-name-line > b{max-width:calc(100% - 17px)!important}
}

/* v4.9.2 — Supporter mini profile + full profile layout polish
   Mühür nickname'e aittir; pawn, rol veya kart ölçülerini büyütmez. */

/* --- Nicke tıklayınca açılan mini profil --- */
.profile-popover{
  width:230px;
  padding:14px 13px 12px;
}
.profile-popover .profile-top{
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  min-width:0;
}
.profile-popover .profile-top>.avatar{
  width:40px;
  height:40px;
  align-self:center;
}
.profile-popover .profile-top>div:nth-child(2){
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.profile-popover .pawn-name-line{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  min-width:0!important;
  max-width:100%!important;
  line-height:1!important;
}
#profilePawnSlot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:20px;
  min-width:20px;
  height:25px;
  margin:0 1px 0 0;
  line-height:0;
}
#profilePawnSlot>.com2-pawn{
  margin:0;
  transform:scale(.92);
  transform-origin:center;
}
#profileName{
  display:block;
  flex:0 1 auto;
  min-width:0!important;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px!important;
  line-height:1.2!important;
  margin:0!important;
}
#profileSupporterSlot{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 14px!important;
  width:14px!important;
  min-width:14px!important;
  height:14px!important;
  margin:0!important;
  padding:0!important;
}
#profileSupporterSlot>.supporter-seal{
  margin:0!important;
}
#profileLevel{
  display:block!important;
  margin:0 0 0 25px!important;
  font-size:8.5px!important;
  line-height:1.25!important;
  color:var(--muted)!important;
}
#profileRole{
  align-self:center;
  justify-self:end;
  max-width:78px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding:4px 7px;
  line-height:1.1;
}
.profile-popover .profile-actions{
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  gap:1px;
}
.profile-popover .profile-actions button{
  min-height:31px;
  padding:7px 8px;
  line-height:1.25;
}
.profile-popover .profile-actions hr{
  margin:5px 0;
}

/* --- Tam profil: daha düzenli kimlik hiyerarşisi --- */
.social-profile-card{
  padding:18px;
}
.social-profile-hero{
  display:grid;
  grid-template-columns:68px minmax(0,1fr);
  align-items:center;
  gap:14px;
  min-width:0;
}
.social-profile-hero>.avatar.large{
  align-self:center;
}
.social-profile-hero>div:nth-child(2){
  min-width:0;
}
.social-profile-hero .pawn-name-line{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  min-width:0!important;
  max-width:100%!important;
  line-height:1!important;
}
.social-profile-hero .pawn-name-line>.com2-pawn{
  flex:0 0 auto!important;
  margin:0!important;
}
.social-profile-hero .pawn-name-line>h3{
  flex:0 1 auto;
  min-width:0!important;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.2;
  margin:0!important;
}
.social-profile-hero .pawn-name-line>.supporter-seal{
  flex:0 0 14px!important;
  margin-left:0!important;
}
.social-profile-hero p.muted{
  margin-top:3px;
}
.profile-chip-row{
  flex-wrap:wrap;
  row-gap:6px;
  margin-top:8px;
}

/* Destekçi kartı: ikon / açıklama / yıl tek ve dengeli grid. */
.supporter-status-card{
  display:grid;
  grid-template-columns:50px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:16px 0 0;
  padding:13px 14px;
  min-width:0;
}
.supporter-status-mark{
  width:46px;
  height:46px;
  flex:none;
}
.supporter-status-card>.grow{
  min-width:0;
}
.supporter-status-kicker,
.supporter-status-title,
.supporter-status-copy{
  max-width:100%;
}
.supporter-status-copy{
  line-height:1.35;
}
.supporter-status-year{
  margin-left:0;
  justify-self:end;
  align-self:center;
}

/* Bio ve istatistikler özel statü kartına yapışmasın. */
.supporter-profile .profile-bio{
  margin:17px 0 14px;
  padding-top:15px;
  border-top:1px solid color-mix(in srgb,var(--line) 86%,transparent);
}
.profile-stats{
  margin-top:0;
}
.profile-stats>div{
  min-width:0;
}
.profile-stats b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Güç koleksiyonu bölümü görsel olarak profil metninden ayrılır. */
.profile-powers-section{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid color-mix(in srgb,var(--line) 86%,transparent);
}
.profile-powers-head h4{
  margin:3px 0 4px;
  line-height:1.2;
}
.profile-powers-actions{
  margin-top:10px;
}

/* Profil aksiyonları simetrik: 2 sütun, rastgele wrap yok. */
.social-profile-card>.social-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid color-mix(in srgb,var(--line) 86%,transparent);
}
.social-profile-card>.social-actions>button{
  width:100%;
  min-width:0;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.25;
  white-space:normal;
}
.social-profile-card>.social-actions>button:only-child{
  grid-column:1/-1;
  justify-self:start;
  width:auto;
}

@media(max-width:560px){
  .supporter-status-card{
    grid-template-columns:48px minmax(0,1fr);
    gap:10px 11px;
  }
  .supporter-status-year{
    grid-column:2;
    justify-self:start;
    margin:0!important;
  }
}

@media(max-width:420px){
  .social-profile-card>.social-actions{
    grid-template-columns:1fr;
  }
  .social-profile-card>.social-actions>button:only-child{
    grid-column:auto;
    width:100%;
  }
  .profile-stats{
    grid-template-columns:1fr;
  }
}


/* COM2 v4.10.0 — kalıcı public ID */
.profile-public-id{margin:3px 0 8px;color:var(--muted,#8f9ab2);font-size:11px;font-weight:700;letter-spacing:.055em;line-height:1.35;font-variant-numeric:tabular-nums}
.supporter-profile .profile-public-id{color:#9db8c9}


/* COM2 Chat v4.11.0 — COM2 ID arama + kalıcı profil URL */
.search-wrap{position:relative;flex:1;max-width:700px;min-width:0}
.search-wrap .searchbox{width:100%;max-width:none;box-sizing:border-box}
.user-search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:60;padding:8px;border:1px solid var(--line-strong);border-radius:15px;background:color-mix(in srgb,var(--panel) 97%,transparent);box-shadow:0 22px 55px rgba(0,0,0,.32);backdrop-filter:blur(18px);overflow:hidden}
.user-search-results[hidden]{display:none}
.user-search-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:5px 7px 8px;border-bottom:1px solid var(--line)}
.user-search-head small{font-size:9px}
.user-search-row{width:100%;display:flex;align-items:center;gap:10px;padding:9px 8px;border:0;border-radius:11px;background:transparent;color:var(--text);text-align:left;cursor:pointer}
.user-search-row:hover,.user-search-row:focus-visible{outline:0;background:rgba(var(--accent-rgb),.09)}
.user-search-row .avatar{width:34px;height:34px;flex:0 0 34px;font-size:9px}
.user-search-copy{display:block;min-width:0}
.user-search-copy b,.user-search-copy small{display:block;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-search-copy b{font-size:11px}.user-search-copy small{margin-top:2px;font-size:8px}
.user-search-go{flex:0 0 auto;color:var(--accent);font-weight:900}
.user-search-loading,.user-search-empty{padding:14px 10px;color:var(--muted);font-size:10px;line-height:1.5;text-align:center}
.profile-identity-row{display:flex;align-items:center;gap:7px;min-height:22px;margin-top:2px}
.profile-identity-row .profile-public-id{margin:0}
.profile-link-copy{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--panel-3);color:var(--muted);cursor:pointer;font-size:13px;line-height:1}
.profile-link-copy:hover{border-color:rgba(var(--accent-rgb),.42);color:var(--accent)}
@media(max-width:720px){.search-wrap{max-width:none}.user-search-results{position:fixed;left:10px;right:10px;top:62px}.user-search-row{padding:10px}.user-search-copy b{font-size:12px}.user-search-copy small{font-size:9px}}
@media(max-width:360px){.search-wrap{flex:0 0 38px;width:38px}.search-wrap:focus-within{position:absolute;left:52px;right:8px;width:auto;max-width:none;z-index:70}.search-wrap:focus-within .searchbox{width:100%;padding:0 10px;justify-content:flex-start}.search-wrap:focus-within .searchbox input{display:block}.search-wrap:focus-within .user-search-results{top:54px}}

/* v4.12.0 — COM2 Destek Sistemi */
.supporter-nav-item .nav-icon{color:#f3c96b}.supporter-nav-item .new-tag{background:linear-gradient(135deg,#19c6c8,#d5a949);color:#071019;border:0}.support-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,#15c5c7 9%,var(--panel)),color-mix(in srgb,#d8a846 7%,var(--panel)));overflow:hidden;position:relative}.support-hero:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-120px;top:-120px;background:#22d3ee12;filter:blur(2px);pointer-events:none}.support-hero.is-supporter{box-shadow:inset 0 0 0 1px #e5bd5c18,0 18px 50px #0002}.support-hero-crystal{width:72px;height:72px;position:relative;display:grid;place-items:center;filter:drop-shadow(0 8px 18px #0cc8cc33)}.support-hero-crystal i{position:absolute;inset:7px;transform:rotate(45deg);border-radius:16px;background:linear-gradient(135deg,#43ebdf,#127e98 48%,#e8c568 52%,#9a6a17);border:1px solid #fff5;box-shadow:inset 0 0 18px #fff4}.support-hero-crystal b{position:relative;z-index:1;color:white;font-size:15px;letter-spacing:-.5px;text-shadow:0 2px 6px #0008}.support-hero h3{font-size:22px;margin:3px 0 6px}.support-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:110px;position:relative;z-index:1}.support-price small{font-size:10px;letter-spacing:.11em;color:var(--muted)}.support-price b{font-size:24px}.support-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.support-benefits article{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 80%,transparent);border-radius:14px}.support-benefits article:last-child:nth-child(odd){grid-column:1/-1}.support-benefits p{margin:0;line-height:1.45}.support-benefit-icon{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#31d69b18;color:#4ce0aa;font-weight:900;flex:0 0 auto}.support-state-card,.support-action-card{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid var(--line);border-radius:17px;background:var(--panel-2)}.support-state-card.success{border-color:#45daa233;background:linear-gradient(135deg,#35d39c0c,var(--panel-2))}.support-state-card.pending{border-color:#e7bd5b33;background:linear-gradient(135deg,#e7bd5b0a,var(--panel-2))}.support-state-card h3,.support-action-card h3{margin:3px 0 5px}.support-state-pill{padding:7px 10px;border-radius:999px;background:#3bd9a418;color:#51dfa9;font-size:11px;letter-spacing:.08em}.support-pending-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#e6bc5b13;color:#eccd81;font-size:22px}.support-request-btn{white-space:nowrap}.support-note{padding:14px 16px;border:1px dashed var(--line);border-radius:14px}.support-note p{margin:5px 0 0;line-height:1.5}
@media(max-width:760px){.support-hero{grid-template-columns:auto 1fr}.support-price{grid-column:1/-1;align-items:flex-start;padding-left:90px}.support-benefits{grid-template-columns:1fr}.support-benefits article:last-child:nth-child(odd){grid-column:auto}.support-state-card,.support-action-card{align-items:flex-start;flex-wrap:wrap}.support-request-btn{width:100%}}

/* =========================================================
   COM2 Chat v4.12.1 — Sidebar density & mobile overflow fix
   Keeps navigation compact after adding the Support view.
   ========================================================= */
.sidebar{
  padding:18px 14px 12px;
  gap:10px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none;
}
.sidebar::-webkit-scrollbar{width:0;height:0}
.sidebar .brand{
  flex:0 0 auto;
  padding:0 7px 9px;
  gap:10px;
}
.sidebar .main-nav{
  flex:0 0 auto;
  display:grid;
  gap:3px;
}
.sidebar .nav-item{
  min-height:42px;
  padding:9px 11px;
  gap:10px;
  border-radius:11px;
}
.sidebar .nav-icon{
  width:23px;
  flex:0 0 23px;
  font-size:18px;
  line-height:1;
}
.sidebar .nav-icon.flag{font-size:17px}
.sidebar .nav-item b{font-size:14px;line-height:1.2}
.sidebar .nav-item em{font-size:10px;padding:3px 6px}
.sidebar .new-tag{font-size:8px;padding:3px 6px;border-radius:6px}
.sidebar .plus-promo{
  flex:0 0 auto;
  margin-top:4px;
  padding:12px 13px;
  border-radius:14px;
}
.sidebar .plus-title span{font-size:19px}
.sidebar .plus-title strong{font-size:12px}
.sidebar .plus-promo p{
  margin:6px 0 9px;
  font-size:10px;
  line-height:1.45;
}
.sidebar .plus-promo .btn{padding:8px 10px;font-size:12px}
.sidebar .my-card{
  flex:0 0 auto;
  margin-top:0;
  padding:10px 11px;
  border-radius:14px;
}
.sidebar .my-card .avatar{width:38px;height:38px}
.sidebar .my-card .user-row{gap:8px}
.sidebar .my-card .user-meta{gap:2px;min-width:0}
.sidebar .my-card .user-meta strong{font-size:11px}
.sidebar .my-card .user-meta>span{font-size:9px}
.sidebar .my-card .xp-track{margin:7px 0 6px}
.sidebar .my-card .point-row{font-size:9px}
.sidebar .my-card .xp-progress-line{font-size:8px}

/* Taller desktop screens still stay compact and balanced. */
@media(min-width:721px) and (min-height:901px){
  .sidebar .brand-mark{width:44px;height:44px;border-radius:14px}
  .sidebar .brand-copy strong{font-size:21px}
  .sidebar .brand-copy small{font-size:9px;letter-spacing:4px;margin-top:5px}
}

/* Short desktop / laptop viewports: fit the whole navigation without clipping. */
@media(min-width:721px) and (max-height:820px){
  .sidebar{padding:10px 11px 9px;gap:6px}
  .sidebar .brand{padding-bottom:4px}
  .sidebar .brand-mark{width:36px;height:36px;border-radius:12px}
  .sidebar .brand-copy strong{font-size:18px}
  .sidebar .brand-copy small{font-size:7px;letter-spacing:3px;margin-top:4px}
  .sidebar .main-nav{gap:1px}
  .sidebar .nav-item{min-height:34px;padding:6px 9px;border-radius:9px}
  .sidebar .nav-icon{width:21px;flex-basis:21px;font-size:15px}
  .sidebar .nav-item b{font-size:12px}
  .sidebar .plus-promo{padding:8px 10px;margin-top:1px}
  .sidebar .plus-promo p{margin:3px 0 5px;font-size:8px}
  .sidebar .plus-promo .btn{padding:6px 8px;font-size:10px}
  .sidebar .my-card{padding:7px 9px}
  .sidebar .my-card .avatar{width:34px;height:34px}
  .sidebar .my-card .xp-track{margin:5px 0 4px}
  .sidebar .my-card .point-row{font-size:8px}
}

/* Mobile drawer: independent scrolling, safe-area aware, compact menu. */
@media(max-width:720px){
  .sidebar{
    width:min(286px,88vw);
    padding:14px 12px calc(12px + env(safe-area-inset-bottom));
    gap:8px;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar .brand{padding:0 5px 7px;position:relative}
  .sidebar .brand-mark{width:40px;height:40px;border-radius:13px}
  .sidebar .brand-copy strong{font-size:19px}
  .sidebar .brand-copy small{font-size:8px;letter-spacing:3.5px;margin-top:4px}
  .sidebar .sidebar-close{margin-left:auto;flex:0 0 36px;width:36px;height:36px}
  .sidebar .main-nav{gap:2px}
  .sidebar .nav-item{min-height:38px;padding:7px 9px;border-radius:10px;gap:9px}
  .sidebar .nav-icon{width:21px;flex-basis:21px;font-size:16px}
  .sidebar .nav-icon.flag{font-size:15px}
  .sidebar .nav-item b{font-size:13px}
  .sidebar .new-tag,.sidebar .nav-item em{font-size:8px;padding:3px 5px}
  .sidebar .plus-promo{margin-top:2px;padding:10px 11px}
  .sidebar .plus-promo p{font-size:9px;margin:4px 0 7px}
  .sidebar .plus-promo .btn{padding:7px 9px;font-size:11px}
  .sidebar .my-card{padding:9px 10px;margin-bottom:2px}
  .sidebar .my-card .avatar{width:35px;height:35px}
}

@media(max-width:720px) and (max-height:700px){
  .sidebar{padding-top:9px;gap:5px}
  .sidebar .brand{padding-bottom:3px}
  .sidebar .brand-mark{width:34px;height:34px;border-radius:11px}
  .sidebar .brand-copy strong{font-size:17px}
  .sidebar .brand-copy small{font-size:7px;letter-spacing:3px;margin-top:3px}
  .sidebar .nav-item{min-height:33px;padding:5px 8px}
  .sidebar .nav-icon{font-size:14px}
  .sidebar .nav-item b{font-size:12px}
  .sidebar .plus-promo{padding:7px 9px}
  .sidebar .plus-promo p{display:none}
  .sidebar .plus-promo .btn{padding:6px 8px;font-size:10px}
  .sidebar .my-card{padding:7px 8px}
  .sidebar .my-card .coin-row{display:none}
}

@media(min-width:721px) and (max-height:900px){
  .sidebar{padding:14px 13px 10px;gap:7px}
  .sidebar .brand{padding-bottom:5px}
  .sidebar .brand-mark{width:39px;height:39px;border-radius:13px}
  .sidebar .brand-copy strong{font-size:20px}
  .sidebar .brand-copy small{font-size:8px;letter-spacing:4px;margin-top:4px}
  .sidebar .main-nav{gap:2px}
  .sidebar .nav-item{min-height:36px;padding:7px 10px;border-radius:10px}
  .sidebar .nav-icon{font-size:16px}
  .sidebar .nav-item b{font-size:13px}
  .sidebar .plus-promo{padding:9px 11px;margin-top:2px}
  .sidebar .plus-promo p{font-size:9px;margin:4px 0 6px}
  .sidebar .plus-promo .btn{padding:7px 9px;font-size:11px}
  .sidebar .my-card{padding:8px 9px}
}

/* Keep the extra-compact laptop rule stronger than the <=900px rule above. */
@media(min-width:721px) and (max-height:820px){
  .sidebar{padding:10px 11px 9px;gap:5px}
  .sidebar .brand{padding-bottom:3px}
  .sidebar .main-nav{gap:1px}
  .sidebar .nav-item{min-height:33px;padding:5px 8px}
  .sidebar .plus-promo{padding:7px 9px;margin-top:1px}
  .sidebar .plus-promo p{margin:3px 0 5px;font-size:8px}
  .sidebar .my-card{padding:7px 8px}
}

@media(max-width:720px){
  .sidebar .brand-mark:before{width:16px;height:16px;left:8px;top:8px}
  .sidebar .brand-mark:after{width:11px;height:11px;right:6px;bottom:6px}
  .sidebar .brand-mark span{width:8px;height:14px;left:16px;bottom:5px}
}
@media(max-width:720px) and (max-height:700px){
  .sidebar .brand-mark:before{width:14px;height:14px;left:7px;top:7px}
  .sidebar .brand-mark:after{width:10px;height:10px;right:5px;bottom:5px}
  .sidebar .brand-mark span{width:7px;height:12px;left:14px;bottom:4px}
}

/* COM2 v4.13.0 — Bildirim Merkezi */
.notification-center-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;padding:14px 15px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),var(--panel-2))}.notification-center-head>.grow{display:flex;flex-direction:column;gap:4px;min-width:0}.notification-center-head>.grow>b{font-size:13px}.notification-center-head>.grow>span{font-size:9px;line-height:1.45}.notification-unread-summary{flex:0 0 auto;border:1px solid rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.12);color:var(--text);border-radius:999px;padding:6px 9px;font-size:8px;font-weight:900;white-space:nowrap}.notification-unread-summary.empty{color:var(--muted);border-color:var(--line);background:var(--panel-3)}
.notification-tabs-v413{margin-bottom:12px}.notification-tabs-v413 button{display:inline-flex;align-items:center;gap:6px}.notification-tabs-v413 button em{font-style:normal;min-width:17px;height:17px;padding:0 5px;display:inline-grid;place-items:center;border-radius:999px;background:var(--panel-3);color:var(--muted);font-size:7px}.notification-tabs-v413 button.active em{background:rgba(var(--accent-rgb),.2);color:var(--text)}
.notification-toolbar-v413{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px}.notification-toolbar-info{font-size:8px;color:var(--muted)}.notification-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap}.notification-toolbar-actions .mini{padding:7px 9px;font-size:8px}.notification-toolbar-actions .danger-soft{color:#ff8f9c;border-color:rgba(255,91,110,.28);background:rgba(255,91,110,.06)}
.notification-list-v413{gap:8px}.notification-list-v413 .notification-row-v413{position:relative;width:100%;display:flex;align-items:stretch;gap:0;padding:0;border:1px solid var(--line);background:var(--panel-2);border-radius:15px;overflow:hidden;color:var(--text);box-shadow:none}.notification-list-v413 .notification-row-v413.unread{box-shadow:inset 3px 0 0 var(--accent);background:linear-gradient(90deg,rgba(var(--accent-rgb),.08),var(--panel-2) 36%)}.notification-list-v413 .notification-row-v413:hover{border-color:rgba(var(--accent-rgb),.4);background-color:rgba(var(--accent-rgb),.035)}
.notification-main-v413{min-width:0;flex:1;display:flex;align-items:center;gap:11px;border:0;background:transparent;color:inherit;text-align:left;padding:12px 10px 12px 13px;cursor:pointer}.notification-main-v413:focus-visible{outline:2px solid rgba(var(--accent-rgb),.7);outline-offset:-2px}.notification-row-v413 .notification-icon{width:36px;height:36px;flex:0 0 36px;border-radius:11px;font-size:13px}.notification-icon.tone-message{background:rgba(75,153,255,.12);color:#7eb4ff}.notification-icon.tone-social{background:rgba(101,213,167,.11);color:#70dcb0}.notification-icon.tone-success{background:rgba(82,222,153,.12);color:#63dfa1}.notification-icon.tone-account{background:rgba(var(--accent-rgb),.11);color:var(--accent)}.notification-icon.tone-supporter{background:linear-gradient(135deg,rgba(34,211,238,.13),rgba(245,190,65,.12));color:#f2c55c}.notification-icon.tone-plus{background:rgba(245,190,65,.11);color:#f4c955}.notification-icon.tone-security{background:rgba(255,91,110,.10);color:#ff8b98}.notification-icon.tone-system{background:rgba(138,148,174,.1);color:#b4bfd7}
.notification-copy-v413{gap:5px!important}.notification-title-line{display:flex;align-items:center;gap:7px;min-width:0}.notification-title-line>b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-new-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px rgba(var(--accent-rgb),.6);flex:0 0 6px}.notification-body-v413{font-size:9px;color:color-mix(in srgb,var(--text) 76%,var(--muted));line-height:1.5;display:block}.notification-message-count{font-size:8px;color:var(--accent);white-space:nowrap}.notification-meta-v413{display:flex;align-items:center;gap:7px;min-width:0;color:var(--muted);font-size:7.5px!important}.notification-meta-v413>span:not(.notification-category-pill){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}.notification-meta-v413 time{margin-left:auto;white-space:nowrap}.notification-category-pill{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:3px 6px;color:var(--muted);background:var(--panel-3);font-size:7px;font-weight:800}
.notification-delete-v413{align-self:stretch;width:38px;flex:0 0 38px;border:0;border-left:1px solid transparent;background:transparent;color:var(--muted);font-size:17px;cursor:pointer;opacity:.45;transition:.16s ease}.notification-row-v413:hover .notification-delete-v413,.notification-delete-v413:focus-visible{opacity:1}.notification-delete-v413:hover{background:rgba(255,91,110,.08);border-left-color:rgba(255,91,110,.15);color:#ff8f9c}.notification-empty-v413{margin-top:2px}
@media(max-width:640px){.notification-center-head{align-items:flex-start;padding:12px}.notification-center-head>.grow>span{max-width:240px}.notification-toolbar-v413{align-items:flex-start;flex-direction:column}.notification-toolbar-actions{width:100%;justify-content:flex-start}.notification-toolbar-actions .mini{flex:1 1 auto}.notification-main-v413{padding:11px 8px 11px 11px;gap:9px}.notification-row-v413 .notification-icon{width:33px;height:33px;flex-basis:33px}.notification-delete-v413{width:34px;flex-basis:34px}.notification-meta-v413>span:not(.notification-category-pill){max-width:80px}}

/* v4.14.2 — COM2 retro bildirim sesleri */
.sound-quick-toggle{font-size:17px;font-weight:850;color:var(--accent)}
.sound-quick-toggle.muted{color:var(--muted);opacity:.72}
.sound-settings-card{display:grid;gap:12px}
.sound-settings-card h3{margin:0 0 5px}
.sound-settings-head{display:flex;align-items:flex-start;gap:12px}
.sound-settings-head .social-hint{margin:0}
.sound-master-row,.sound-volume-row,.sound-option-row{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel-3) 82%,transparent);border-radius:13px;padding:12px 13px}
.sound-master-row b,.sound-volume-row b,.sound-option-row b{display:block;font-size:11px;margin-bottom:3px}
.sound-master-row small,.sound-volume-row small,.sound-option-row small{display:block;font-size:9px;line-height:1.45}
.sound-master-row input[type=checkbox],.sound-option-row input[type=checkbox]{width:18px;height:18px;flex:0 0 18px;accent-color:var(--accent);cursor:pointer}
.sound-volume-control{display:flex;align-items:center;gap:10px;width:min(260px,42%)}
.sound-volume-control input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.sound-volume-control output{min-width:38px;text-align:right;font-size:10px;font-weight:800;color:var(--accent)}
.sound-option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;transition:.2s}
.sound-option-grid.disabled{opacity:.58}
.sound-test-btn{flex:0 0 auto}
@media(max-width:720px){
  .room-actions{display:flex}.room-actions .icon-btn:not(.sound-quick-toggle){display:none}.room-actions .sound-quick-toggle{width:36px;height:36px}
  .sound-option-grid{grid-template-columns:1fr}.sound-master-row,.sound-volume-row,.sound-option-row{padding:11px}.sound-volume-row{align-items:flex-start;flex-direction:column}.sound-volume-control{width:100%}.sound-option-row{gap:9px}.sound-option-row .sound-test-btn{padding:7px 9px}
}

/* v4.14.3 — COM2 Modern / Classic ses paketi seçici */
.sound-pack-section{display:grid;gap:9px}
.sound-pack-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.sound-pack-title>b{font-size:11px}
.sound-pack-title>small{font-size:8.5px;line-height:1.4;text-align:right;max-width:390px}
.sound-pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sound-pack-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;gap:2px 9px;min-width:0;padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-3) 82%,transparent);color:var(--text);text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease,box-shadow .16s ease}
.sound-pack-card:hover{border-color:rgba(var(--accent-rgb),.36);transform:translateY(-1px)}
.sound-pack-card.active{border-color:rgba(var(--accent-rgb),.56);background:linear-gradient(135deg,rgba(var(--accent-rgb),.13),color-mix(in srgb,var(--panel-3) 88%,transparent));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.08)}
.sound-pack-card .sound-pack-icon{grid-row:1/3;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.1);color:var(--accent);font-size:15px;font-weight:900}
.sound-pack-card>b{font-size:10.5px;min-width:0}
.sound-pack-card>small{font-size:8px;line-height:1.35;min-width:0}
.sound-pack-card>em{grid-column:3;grid-row:1/3;align-self:center;font-style:normal;font-size:7.5px;font-weight:900;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:5px 7px;background:var(--panel-2)}
.sound-pack-card.active>em{color:var(--accent);border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.08)}
@media(max-width:640px){.sound-pack-title{align-items:flex-start;flex-direction:column;gap:3px}.sound-pack-title>small{text-align:left;max-width:none}.sound-pack-grid{grid-template-columns:1fr}.sound-pack-card{padding:11px 12px}}

/* =========================================================
   COM2 Chat v4.15.0 — Profile + Mini Profile + Mobile Polish
   Backend contract is unchanged; this section only normalizes
   profile identity hierarchy, overflow and viewport behavior.
   ========================================================= */

/* Shared identity safety: visual powers may animate, but never own layout width. */
.pawn-name-line{min-width:0;max-width:100%}
.pawn-name-line>.com2-pawn,
.pawn-name-line>#profilePawnSlot,
.pawn-name-line>.supporter-seal,
.pawn-name-line>#profileSupporterSlot{flex:0 0 auto!important}
.pawn-name-line>.ability-name,
.pawn-name-line>strong,
.pawn-name-line>h3{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-profile-card .ability-motion-shimmer,
.social-profile-card .ability-motion-pulse,
.social-profile-card .ability-motion-float,
.profile-popover .ability-motion-shimmer,
.profile-popover .ability-motion-pulse,
.profile-popover .ability-motion-float{max-width:100%}

/* Mini profile: compact premium card with stable identity + COM2 ID hierarchy. */
.profile-popover{
  width:282px;
  max-width:calc(100vw - 24px);
  padding:12px;
  border-radius:18px;
  border-color:color-mix(in srgb,var(--line-strong) 84%,var(--accent) 16%);
  background:linear-gradient(155deg,color-mix(in srgb,var(--panel) 97%,var(--accent) 3%),color-mix(in srgb,var(--panel-2) 98%,transparent));
  box-shadow:0 22px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.025);
  overflow:hidden;
}
.profile-popover .profile-top{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:11px;
  align-items:center;
  min-width:0;
  padding:2px 2px 10px;
}
.profile-popover .profile-top>.avatar{
  width:46px;
  height:46px;
  align-self:center;
  border-width:1px;
}
.profile-popover .profile-summary{
  min-width:0;
  display:grid;
  gap:5px;
  align-content:center;
}
.profile-popover .pawn-name-line{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:5px!important;
  width:100%;
  min-width:0!important;
  line-height:1!important;
}
#profilePawnSlot{
  width:19px;
  min-width:19px;
  height:25px;
  margin:0 1px 0 0;
}
#profilePawnSlot>.com2-pawn{margin:0;transform:scale(.9);transform-origin:center}
#profileName{
  flex:0 1 auto;
  min-width:0!important;
  max-width:100%;
  margin:0!important;
  font-size:12.5px!important;
  line-height:1.2!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#profileSupporterSlot{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 14px!important;
  width:14px!important;
  min-width:14px!important;
  height:14px!important;
  margin:0!important;
}
#profileSupporterSlot:empty{display:none!important}
#profileSupporterSlot>.supporter-seal{margin:0!important}
.profile-mini-meta{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  min-height:18px;
}
#profileRole{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:auto;
  justify-self:auto;
  flex:0 1 auto;
  max-width:132px;
  min-width:0;
  padding:3px 6px;
  font-size:8px;
  line-height:1.1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#profileLevel{
  display:inline-block!important;
  flex:0 0 auto;
  margin:0!important;
  color:var(--muted)!important;
  font-size:8.5px!important;
  line-height:1.2!important;
  white-space:nowrap;
}
.profile-mini-id{
  display:block;
  min-width:0;
  color:color-mix(in srgb,var(--muted) 90%,var(--accent) 10%);
  font-size:8px;
  font-weight:750;
  letter-spacing:.045em;
  line-height:1.25;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.profile-popover .profile-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:0;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb,var(--line) 84%,transparent);
}
.profile-popover .profile-actions button{
  min-width:0;
  min-height:36px;
  padding:7px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:color-mix(in srgb,var(--panel-3) 88%,transparent);
  color:var(--muted);
  text-align:center;
  font-size:9px;
  font-weight:700;
  line-height:1.25;
  white-space:normal;
}
.profile-popover .profile-actions button:hover{border-color:rgba(var(--accent-rgb),.36);background:rgba(var(--accent-rgb),.07);color:var(--text)}
.profile-popover .profile-actions [data-profile-action="view"]{grid-column:1/-1;border-color:rgba(var(--accent-rgb),.28);background:rgba(var(--accent-rgb),.075);color:var(--text)}
.profile-popover .profile-actions [data-profile-action="moderate"],
.profile-popover .profile-actions [data-profile-action="role"]{grid-column:1/-1}
.profile-popover .profile-actions hr{grid-column:1/-1;width:100%;margin:1px 0;border:0;border-top:1px solid var(--line)}
.profile-popover .profile-actions .danger{color:#ff8f9c;border-color:rgba(255,91,110,.2);background:rgba(255,91,110,.045)}

/* Full profile: balanced identity hero and consistent content rhythm. */
.social-profile-card{
  padding:20px;
  border-radius:20px;
  border-color:color-mix(in srgb,var(--line) 86%,var(--accent) 14%);
  background:linear-gradient(155deg,color-mix(in srgb,var(--panel-2) 98%,var(--accent) 2%),var(--panel-2));
  isolation:isolate;
}
.social-profile-hero{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  align-items:center;
  gap:16px;
  min-width:0;
  padding:15px;
  border:1px solid color-mix(in srgb,var(--line) 84%,var(--accent) 16%);
  border-radius:16px;
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.055),color-mix(in srgb,var(--panel-3) 92%,transparent));
  overflow:visible;
}
.social-profile-hero>.avatar.large{
  width:70px;
  height:70px;
  align-self:center;
  justify-self:center;
  font-size:17px;
}
.social-profile-hero>div:nth-child(2){min-width:0;overflow:visible}
.social-profile-hero .pawn-name-line{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  gap:6px!important;
  width:100%;
  min-width:0!important;
  max-width:100%!important;
  line-height:1!important;
  overflow:visible;
}
.social-profile-hero .pawn-name-line>.com2-pawn{flex:0 0 auto!important;margin:0!important}
.social-profile-hero .pawn-name-line>h3{
  flex:0 1 auto;
  min-width:0!important;
  max-width:100%;
  margin:0!important;
  font-size:20px;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.social-profile-hero .pawn-name-line>.supporter-seal{flex:0 0 14px!important;margin:0!important}
.profile-identity-row{
  display:flex;
  align-items:center;
  gap:5px;
  width:max-content;
  max-width:100%;
  min-height:28px;
  margin-top:7px;
  padding:3px 4px 3px 8px;
  border:1px solid var(--line);
  border-radius:9px;
  background:color-mix(in srgb,var(--panel) 38%,transparent);
}
.profile-identity-row .profile-public-id{
  min-width:0;
  margin:0;
  color:var(--muted);
  font-size:9px;
  font-weight:750;
  letter-spacing:.045em;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-link-copy{
  width:22px;
  height:22px;
  flex:0 0 22px;
  border-radius:7px;
  font-size:11px;
}
.profile-chip-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}
.profile-chip-row .role-badge,.profile-chip-row .soft-chip{min-height:22px;display:inline-flex;align-items:center;justify-content:center}
.profile-power-status{margin-top:12px;max-width:100%;box-sizing:border-box}
.supporter-status-card{margin-top:14px;border-radius:15px;background:linear-gradient(135deg,rgba(25,198,200,.055),rgba(213,169,73,.04),var(--panel-3))}
.profile-bio{margin:16px 0 13px;overflow-wrap:anywhere}
.supporter-profile .profile-bio{margin:16px 0 13px;padding-top:14px}
.profile-detail-row{display:flex;flex-wrap:wrap;gap:7px;margin:-3px 0 13px}
.profile-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:0}
.profile-stats>div{min-width:0;padding:10px 8px}
.profile-stats b{font-size:12px}
.profile-powers-section{margin-top:14px;padding-top:14px}

/* Full-profile actions: deterministic two-column geometry; admin controls own full rows. */
.social-profile-card>.social-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:15px;
  padding-top:15px;
}
.social-profile-card>.social-actions>button{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.25;
  white-space:normal;
}
.social-profile-card>.social-actions>.profile-action-admin{grid-column:1/-1}
.social-profile-card>.social-actions>button:only-child{grid-column:1/-1;width:100%;justify-self:stretch}
.social-profile-card>.social-actions>.social-hint{grid-column:1/-1}

/* Tablet: keep panel generous without allowing profile effects to push geometry. */
@media(max-width:940px){
  .social-panel{width:min(540px,calc(100vw - 20px));height:calc(100dvh - 20px)}
  .social-body{padding:16px}
}

/* Mobile bottom-sheet mini profile + edge-to-edge social panel with safe areas. */
@media(max-width:720px){
  .profile-popover{
    position:fixed!important;
    left:max(8px,env(safe-area-inset-left))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100dvh - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)));
    padding:12px;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    border-radius:20px;
  }
  .profile-popover .profile-top{grid-template-columns:46px minmax(0,1fr);gap:10px;padding-bottom:9px}
  .profile-popover .profile-top>.avatar{width:44px;height:44px}
  #profileName{font-size:12px!important}
  .profile-popover .profile-actions{gap:6px;padding-top:9px}
  .profile-popover .profile-actions button{min-height:35px;font-size:8.8px}

  .social-overlay{
    align-items:stretch;
    justify-content:flex-end;
    padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  }
  .social-panel{
    width:100%;
    height:100%;
    max-height:100%;
    border-radius:18px;
  }
  .social-panel>header{padding:14px 14px 12px}
  .social-panel>header h2{font-size:18px}
  .social-body{padding:12px}
  .social-profile-card{padding:13px;border-radius:17px}
  .social-profile-hero{grid-template-columns:60px minmax(0,1fr);gap:11px;padding:12px;border-radius:14px}
  .social-profile-hero>.avatar.large{width:56px;height:56px;font-size:14px}
  .social-profile-hero .pawn-name-line{gap:5px!important}
  .social-profile-hero .pawn-name-line>h3{font-size:16px;line-height:1.2}
  .profile-identity-row{margin-top:6px;min-height:25px;padding:2px 3px 2px 7px}
  .profile-chip-row{gap:5px;margin-top:6px}
  .profile-chip-row .role-badge,.profile-chip-row .soft-chip{min-height:20px;padding:4px 7px;font-size:8px}
  .profile-power-status{margin-top:9px;font-size:9px}
  .supporter-status-card{grid-template-columns:42px minmax(0,1fr);gap:9px 10px;margin-top:11px;padding:10px 11px}
  .supporter-status-mark{width:40px;height:40px}
  .supporter-status-year{grid-column:2;justify-self:start;margin:0!important}
  .profile-bio,.supporter-profile .profile-bio{margin:12px 0 10px;padding-top:0;border-top:0;font-size:10.5px;line-height:1.55}
  .profile-detail-row{margin:-1px 0 10px}
  .profile-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .profile-stats>div{padding:8px 5px;border-radius:10px}
  .profile-stats b{font-size:10px}
  .profile-stats span{font-size:7px}
  .profile-powers-section{margin-top:11px;padding-top:11px}
  .social-profile-card>.social-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:11px;padding-top:11px}
  .social-profile-card>.social-actions>button{min-height:36px;padding:8px 7px;font-size:9px}
  .social-profile-card>.social-actions>.profile-action-admin{grid-column:1/-1}
}

/* Short phones (older Android / compact iPhone heights): preserve chat and profile usable area. */
@media(max-width:720px) and (max-height:700px){
  .workspace{grid-template-rows:52px auto auto minmax(0,1fr) auto}
  .topbar{padding-block:6px}
  .mobile-menu,.top-actions .icon-btn{height:36px}
  .searchbox{height:36px}
  .room-head{padding:8px 10px 6px}
  .turkey-orb{width:34px;height:34px;flex-basis:34px;font-size:16px}
  .room-head h1{font-size:18px;margin-bottom:2px}
  .room-head p{font-size:8px}
  .announcement{margin:0 8px 5px;padding:6px 8px}
  .announcement p{font-size:8px}
  .chat-stream{padding-top:4px;padding-bottom:3px}
  .composer-wrap{padding-top:5px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .composer{padding:5px}
  .composer-editor{min-height:30px;max-height:60px;padding-block:6px}
  .profile-popover{max-height:calc(100dvh - 12px);padding:10px}
  .profile-popover .profile-top{padding-bottom:7px}
  .profile-popover .profile-actions{padding-top:7px;gap:5px}
  .profile-popover .profile-actions button{min-height:32px;padding:6px;font-size:8.3px}
  .social-overlay{padding:5px}
  .social-panel{border-radius:15px}
  .social-panel>header{padding:10px 11px 9px}
  .social-panel>header h2{font-size:16px}
  .social-body{padding:9px}
  .social-profile-card{padding:10px}
  .social-profile-hero{grid-template-columns:52px minmax(0,1fr);padding:9px;gap:9px}
  .social-profile-hero>.avatar.large{width:48px;height:48px}
  .social-profile-hero .pawn-name-line>h3{font-size:14px}
  .profile-identity-row{min-height:23px;margin-top:4px}
  .profile-chip-row{margin-top:4px}
  .supporter-status-card{margin-top:8px;padding:8px 9px}
  .profile-bio,.supporter-profile .profile-bio{margin:9px 0 8px}
  .profile-stats>div{padding:6px 4px}
  .profile-powers-section{margin-top:8px;padding-top:8px}
  .social-profile-card>.social-actions{margin-top:8px;padding-top:8px}
}

/* Very narrow phones keep two-column actions while protecting labels from overflow. */
@media(max-width:380px){
  .profile-popover{left:6px!important;right:6px!important;bottom:max(6px,env(safe-area-inset-bottom))!important}
  .profile-popover .profile-actions button{font-size:8px}
  .social-profile-card>.social-actions>button{font-size:8.5px}
  .profile-stats b{font-size:9px}
}

@media(prefers-reduced-motion:reduce){
  .profile-popover .ability-motion-shimmer,
  .profile-popover .ability-motion-pulse,
  .profile-popover .ability-motion-float,
  .social-profile-card .ability-motion-shimmer,
  .social-profile-card .ability-motion-pulse,
  .social-profile-card .ability-motion-float{animation:none!important}
}

/* =========================================================
   COM2 Chat v4.16.0 — Release Candidate / Connection Polish
   ========================================================= */
.connection-status{position:fixed;z-index:2500;left:50%;top:max(14px,env(safe-area-inset-top));transform:translateX(-50%);max-width:min(520px,calc(100vw - 28px));padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 14px 40px rgba(0,0,0,.24);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);font-size:12px;font-weight:800;letter-spacing:.01em;text-align:center;color:var(--text);pointer-events:none}
.connection-status.offline{border-color:color-mix(in srgb,#ffb84d 48%,var(--line));}
.connection-status.restored{border-color:color-mix(in srgb,#39d98a 42%,var(--line));}
.connection-offline .send-btn{opacity:.72}
@media(max-width:720px){.connection-status{top:max(8px,env(safe-area-inset-top));width:max-content;padding:9px 12px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.connection-status{transition:none!important}}

/* =========================================================
   COM2 Chat v4.16.1 — Final Polish / Mobile Keyboard Safety
   ========================================================= */
:root{--com2-app-height:100dvh;--com2-viewport-top:0px}
.app-shell,.workspace{height:var(--com2-app-height,100dvh)}

@media(max-width:720px){
  .workspace{height:var(--com2-app-height,100dvh);min-height:0}
  .sidebar,.rightbar{
    top:var(--com2-viewport-top,0px);
    bottom:auto;
    height:var(--com2-app-height,100dvh);
    max-height:var(--com2-app-height,100dvh);
  }
  .social-overlay{
    top:var(--com2-viewport-top,0px);
    bottom:auto;
    height:var(--com2-app-height,100dvh);
    max-height:var(--com2-app-height,100dvh);
  }
  .social-panel{height:100%;max-height:100%}
  .profile-popover{max-height:calc(var(--com2-app-height,100dvh) - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))}

  /* Klavye açıkken oda başlığı yerine mesaj alanına öncelik ver. */
  body.mobile-keyboard-open .room-head,
  body.mobile-keyboard-open .announcement{display:none}
  body.mobile-keyboard-open .workspace{grid-template-rows:52px minmax(0,1fr) auto}
  body.mobile-keyboard-open .topbar{padding-block:6px}
  body.mobile-keyboard-open .chat-stream{padding-top:5px;padding-bottom:4px}
  body.mobile-keyboard-open .composer-wrap{padding-top:5px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  body.mobile-keyboard-open .composer{padding:5px 6px}
  body.mobile-keyboard-open .composer-editor{max-height:72px}
  body.mobile-keyboard-open .emoji-picker,
  body.mobile-keyboard-open .emoji-autocomplete,
  body.mobile-keyboard-open .mention-autocomplete{max-height:min(220px,42vh);overscroll-behavior:contain}
}

@media(max-width:380px){
  body.mobile-keyboard-open .workspace{grid-template-rows:48px minmax(0,1fr) auto}
  body.mobile-keyboard-open .searchbox{height:34px}
}

/* =========================================================
   COM2 Chat v4.17.0 — BFF / Evlilik / İlişkiler
   ========================================================= */
.relationship-seal{display:inline-grid;place-items:center;flex:0 0 auto;width:16px;height:16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--panel-3);font-size:9px;line-height:1;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.12);vertical-align:middle}.relationship-seal.relationship-bff{color:var(--accent);border-color:rgba(var(--accent-rgb),.32);background:rgba(var(--accent-rgb),.085)}.relationship-seal.relationship-marriage{color:#ff6f8e;border-color:rgba(255,111,142,.34);background:rgba(255,111,142,.09)}.relationship-seal-large{width:34px;height:34px;font-size:17px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.member-name-line .relationship-seal{margin-left:1px}.profile-popover .relationship-seal{width:14px;height:14px;font-size:8px}.social-profile-hero .relationship-seal{flex:0 0 auto}
.relationship-profile-card,.relationship-current-card,.relationship-entry-card,.relationship-center-hero,.relationship-settings-card,.relationship-proposal{position:relative;border:1px solid var(--line);background:var(--panel-2);border-radius:16px;padding:14px;margin-top:12px;overflow:hidden}.relationship-profile-card,.relationship-current-card,.relationship-entry-card,.relationship-center-hero{display:flex;align-items:center;gap:11px}.relationship-profile-card:before,.relationship-current-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 0 0,rgba(var(--accent-rgb),.12),transparent 42%)}.relationship-profile-card.relationship-marriage:before,.relationship-current-card.relationship-marriage:before{background:radial-gradient(circle at 0 0,rgba(255,111,142,.16),transparent 45%)}.relationship-profile-card>*,.relationship-current-card>*{position:relative;z-index:1}.relationship-profile-mark{width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto}.relationship-profile-kicker{display:block;font-size:8px;letter-spacing:.12em;color:var(--muted);font-weight:800}.relationship-profile-title{display:block;font-size:12px;margin-top:2px}.relationship-profile-copy{display:block;color:var(--muted);font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relationship-partner-btn{flex:0 0 auto}
.relationship-entry-card{margin:0 0 14px}.relationship-entry-card h3,.relationship-center-hero h3,.relationship-settings-card h3,.relationship-proposal h3{margin:2px 0 4px;font-size:14px}.relationship-entry-card p,.relationship-center-hero p,.relationship-settings-card p,.relationship-proposal p{margin:0;font-size:10px;line-height:1.55}.relationship-current-card{margin:0 0 14px}.relationship-current-card>.avatar{flex:0 0 auto}.relationship-current-card .danger-soft{color:#ff8f9c;border-color:rgba(255,91,110,.28);background:rgba(255,91,110,.06)}
.relationship-request-row{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line)}.relationship-request-row:last-child{border-bottom:0}.relationship-request-row>.avatar{width:34px;height:34px}.relationship-request-row b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.relationship-request-row small{display:block;font-size:8.5px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.relationship-settings-card{margin-top:14px}.relationship-settings-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;align-items:end;margin-top:12px}.relationship-setting-field{display:grid;gap:6px}.relationship-setting-field>span{font-size:9px;color:var(--muted);font-weight:700}.relationship-setting-field select,.relationship-message{width:100%;box-sizing:border-box;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:10px 11px;outline:0;font:inherit;font-size:10px}.relationship-setting-field select:focus,.relationship-message:focus{border-color:rgba(var(--accent-rgb),.58);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.08)}.relationship-toggle{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:10px;color:var(--text);cursor:pointer}.relationship-toggle input{accent-color:var(--accent)}.relationship-settings-form>button{min-height:38px;border:1px solid rgba(var(--accent-rgb),.5);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border-radius:10px;padding:9px 13px;font-size:10px;font-weight:800;cursor:pointer}.relationship-empty-note{border:1px dashed var(--line-strong);border-radius:13px;padding:12px;color:var(--muted);font-size:10px;line-height:1.6;margin:0 0 14px}
.relationship-proposal{margin:0}.relationship-proposal-head{display:flex;align-items:center;gap:11px}.relationship-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.relationship-choice{display:flex;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--panel-3);color:var(--text);border-radius:13px;padding:12px;cursor:pointer}.relationship-choice:hover,.relationship-choice.active{border-color:rgba(var(--accent-rgb),.48);background:rgba(var(--accent-rgb),.075)}.relationship-choice-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:rgba(var(--accent-rgb),.09);font-size:17px;font-weight:900}.relationship-choice[data-type="marriage"] .relationship-choice-icon{color:#ff6f8e;background:rgba(255,111,142,.09)}.relationship-choice b{display:block;font-size:11px}.relationship-choice small{display:block;font-size:8.5px;line-height:1.45;margin-top:3px}.relationship-message{resize:vertical;min-height:72px;margin-top:10px;line-height:1.5}

@media(max-width:720px){.relationship-profile-card,.relationship-current-card,.relationship-entry-card,.relationship-center-hero{gap:9px;padding:12px}.relationship-profile-copy{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.relationship-current-card{display:grid;grid-template-columns:auto auto minmax(0,1fr);}.relationship-current-card>.mini{grid-column:auto}.relationship-request-row{grid-template-columns:auto auto minmax(0,1fr) auto}.relationship-request-row>.mini:last-child{grid-column:4}.relationship-settings-form{grid-template-columns:1fr}.relationship-settings-form>button{width:100%}.relationship-choice-grid{grid-template-columns:1fr}.relationship-toggle{grid-column:1}.relationship-entry-card{align-items:flex-start}.relationship-entry-card>.mini,.relationship-center-hero>.mini{flex:0 0 auto}}
@media(max-width:390px){.relationship-current-card{grid-template-columns:auto minmax(0,1fr);}.relationship-current-card>.relationship-seal{grid-row:1}.relationship-current-card>.avatar{grid-row:1}.relationship-current-card>.grow{grid-column:1/-1}.relationship-current-card>.mini{grid-column:auto}.relationship-request-row{grid-template-columns:auto minmax(0,1fr) auto}.relationship-request-row>.relationship-seal{display:none}.relationship-request-row>.avatar{width:32px;height:32px}.relationship-entry-card,.relationship-center-hero{display:grid;grid-template-columns:minmax(0,1fr) auto}.relationship-entry-card>.grow,.relationship-center-hero>.grow{min-width:0}}

/* COM2 Chat v4.17.2 — xat-like BFF / Evlilik user-list stacking */
.member-relationship-pair{position:relative;margin:2px 0 3px;padding:1px;border:1px solid color-mix(in srgb,var(--line) 78%,transparent);border-radius:10px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 91%,var(--accent) 9%),color-mix(in srgb,var(--panel) 96%,transparent));overflow:visible}
.member-relationship-pair.relationship-bff{border-color:color-mix(in srgb,#9b8cff 28%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 94%,#9b8cff 6%),var(--panel))}
.member-relationship-pair.relationship-marriage{border-color:color-mix(in srgb,#ff6f9f 30%,var(--line));background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 94%,#ff6f9f 6%),var(--panel))}
.member-relationship-pair .member-row{position:relative;z-index:1;border-radius:7px}
.member-relationship-pair .relationship-pair-first{padding-bottom:4px}
.member-relationship-pair .relationship-pair-second{padding-top:4px}
.member-relationship-pair .relationship-pair-first:after,.member-relationship-pair .relationship-pair-second:before{content:"";position:absolute;left:18px;width:1px;background:color-mix(in srgb,var(--accent) 46%,var(--line));pointer-events:none}
.member-relationship-pair .relationship-pair-first:after{height:6px;bottom:-4px}
.member-relationship-pair .relationship-pair-second:before{height:6px;top:-4px}
.member-relationship-bridge{position:absolute;z-index:3;left:12px;top:50%;transform:translateY(-50%);width:13px;height:13px;display:grid;place-items:center;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));background:var(--panel);color:var(--accent);font-size:7px;font-weight:900;line-height:1;box-shadow:0 0 0 2px color-mix(in srgb,var(--panel) 82%,transparent),0 0 8px rgba(var(--accent-rgb),.15);pointer-events:none}
.member-relationship-pair.relationship-bff .member-relationship-bridge{color:#a89cff;border-color:rgba(168,156,255,.38)}
.member-relationship-pair.relationship-marriage .member-relationship-bridge{color:#ff7ca9;border-color:rgba(255,124,169,.40)}
@media(max-width:720px){.member-relationship-pair{margin:2px 0}.member-relationship-bridge{left:10px;width:12px;height:12px;font-size:6.5px}.member-relationship-pair .relationship-pair-first:after,.member-relationship-pair .relationship-pair-second:before{left:16px}}


/* =========================================================
   COM2 Chat v4.18.0 — Powers / Store organization + Neon Glow
   ========================================================= */
.ability-name{font-weight:900;text-rendering:geometricPrecision}
.power-live-preview{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 62px;width:62px;min-width:0;min-height:34px;padding:4px 5px;box-sizing:border-box;border-radius:10px;background:color-mix(in srgb,var(--panel-3) 82%,transparent);border:1px solid color-mix(in srgb,var(--line) 72%,var(--accent) 28%);font-size:13px;font-weight:950;letter-spacing:.02em;white-space:nowrap;overflow:visible;isolation:isolate}
.power-live-preview.compact{flex-basis:54px;width:54px;min-height:31px;font-size:11px}
.power-live-preview.status{font-size:10px;color:var(--muted)}
.store-card-visual .power-live-preview{width:68px;flex-basis:68px;min-height:46px;background:transparent;border-color:transparent;font-size:15px}
.store-card-visual .power-live-preview.status{font-size:11px}
.power-preview-avatar{position:relative;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--accent-2));color:#fff;font-size:10px;font-weight:950;border:2px solid color-mix(in srgb,var(--accent) 54%,transparent);box-shadow:0 7px 18px rgba(var(--accent-rgb),.16)}
.power-preview-avatar .ability-accessory{right:-5px!important;top:-8px!important}.power-preview-avatar .ability-user-symbol{left:-6px;bottom:-4px}
.power-preview-message{display:inline-flex;align-items:center;justify-content:center;min-width:58px;min-height:32px;padding:7px 9px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel-3);font-size:8px;font-weight:850;color:var(--text)}
.power-preview-emoji{display:inline-flex;align-items:center;justify-content:center;min-width:60px;min-height:38px;padding:4px;border-radius:11px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.18);font-size:14px;letter-spacing:3px;color:var(--accent)}
.power-preview-profile{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:radial-gradient(circle at 30% 20%,rgba(var(--accent-rgb),.26),transparent 55%),var(--panel-3);border:1px solid rgba(var(--accent-rgb),.22);font-size:20px;color:var(--accent);box-shadow:inset 0 0 20px rgba(var(--accent-rgb),.08)}

.power-category-nav{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:12px 0 3px;padding:1px 1px 7px}.power-category-nav::-webkit-scrollbar{display:none}.power-category-nav button{display:flex;align-items:center;gap:5px;flex:0 0 auto;border:1px solid var(--line);border-radius:999px;background:var(--panel-2);color:var(--text);padding:7px 9px;font-size:8px;font-weight:850;cursor:pointer}.power-category-nav button>span{color:var(--accent)}.power-category-nav button>b{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(var(--accent-rgb),.11);color:var(--accent);font-size:7px}
.power-category-section{scroll-margin-top:16px;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 97%,var(--accent) 3%),var(--panel-2))}.power-category-section.store{margin-top:12px}.power-category-section.owned{border-color:color-mix(in srgb,var(--line) 80%,var(--accent) 20%)}
.power-category-head{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;margin-bottom:11px}.power-category-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.22);color:var(--accent);font-size:16px;font-weight:950}.power-category-head h3{margin:2px 0 3px;font-size:13px}.power-category-head p{margin:0;font-size:8px;line-height:1.45;max-width:480px}.power-category-count{align-self:start;border:1px solid var(--line);border-radius:999px;background:var(--panel-3);color:var(--muted);padding:5px 7px;font-size:7px;font-weight:850;white-space:nowrap}
.power-category-section .ability-grid,.power-category-section .store-grid{margin-top:0}
.powers-empty-owned{text-align:center;margin-top:14px;padding:28px 18px;border:1px dashed var(--line-strong);border-radius:17px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.055),var(--panel-2))}.power-empty-mark{width:48px;height:48px;margin:0 auto 10px;display:grid;place-items:center;border-radius:15px;background:rgba(var(--accent-rgb),.11);border:1px solid rgba(var(--accent-rgb),.24);color:var(--accent);font-size:22px}.powers-empty-owned h3{margin:0 0 6px;font-size:15px}.powers-empty-owned p{max-width:420px;margin:0 auto 13px;font-size:9px;line-height:1.55}.powers-empty-owned button{border:0;border-radius:10px;padding:9px 12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:9px;font-weight:900;cursor:pointer}.ability-history-card{margin-top:16px}

/* Cards now show a meaningful live preview instead of a generic glyph. */
.ability-card-top>.power-live-preview,.ability-card-top>.power-preview-avatar,.ability-card-top>.power-preview-message,.ability-card-top>.power-preview-emoji,.ability-card-top>.power-preview-profile{flex:0 0 auto}.ability-card-top>.power-preview-emoji{min-width:54px;min-height:31px;font-size:11px}.ability-card-top>.power-preview-message{min-width:54px;min-height:31px;padding:5px 7px}.ability-card-top>.power-preview-profile{width:34px;height:34px;border-radius:10px;font-size:16px}
.store-card-visual>.power-preview-avatar{transform:scale(1.08)}.store-card-visual>.power-preview-message{min-width:62px;min-height:38px}.store-card-visual>.power-preview-profile{width:48px;height:48px}

@media(max-width:720px){.power-category-section{padding:11px}.power-category-head{grid-template-columns:34px minmax(0,1fr) auto;gap:9px}.power-category-icon{width:34px;height:34px}.power-category-head p{display:none}.power-category-count{padding:4px 6px}.power-live-preview{flex-basis:54px;width:54px}.store-card-visual .power-live-preview{width:60px;flex-basis:60px}.abilities-hero .plus-balance,.store-hero .plus-balance{padding-left:12px}}
@media(prefers-reduced-motion:reduce){.power-live-preview.ability-motion-shimmer,.power-live-preview.ability-motion-pulse,.power-live-preview.ability-motion-float{animation:none!important}}


/* COM2 Chat v4.18.5 — Premium Pawn Aksesuarı visuals */
.com2-pawn{overflow:visible}
.pawn-hat{--hat-glow:#e7c36f;position:absolute;left:50%;top:-17px;width:36px;height:27px;transform:translateX(-50%) scale(.90);z-index:6;pointer-events:none;transform-origin:50% 100%;display:grid;place-items:end center;filter:none}
.pawn-hat-art{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;user-select:none;pointer-events:none}

.pawn-hat-cap{--hat-glow:#e65b57}.pawn-hat-top{--hat-glow:#d89a42}.pawn-hat-crown{--hat-glow:#ffbd4c}.pawn-hat-bunny{--hat-glow:#ff86b7}.pawn-hat-horns{--hat-glow:#ff4f58}.pawn-hat-halo{--hat-glow:#ffd95c}.pawn-hat-party{--hat-glow:#f4c64f}.pawn-hat-wizard{--hat-glow:#8174ff}
.pawn-hat-top{top:-20px;width:34px;height:31px}.pawn-hat-crown{top:-17px;width:35px;height:28px}.pawn-hat-bunny{top:-25px;width:36px;height:37px}.pawn-hat-horns{top:-17px;width:37px;height:28px}.pawn-hat-halo{top:-13px;width:39px;height:23px}.pawn-hat-party{top:-23px;width:31px;height:35px}.pawn-hat-wizard{top:-25px;width:39px;height:38px}
.com2-pawn.pawn-premium>.pawn-hat{transform:translateX(-50%) scale(.94)}
.member-pawn-slot .pawn-hat{filter:none}
.chat-stream.is-scrolling .pawn-hat{filter:none!important}
.pawn-hat-editor-preview{min-height:118px;justify-content:flex-start;overflow:visible}.pawn-hat-editor-preview .com2-pawn{transform:scale(2.65);margin:28px 42px 20px 50px}.pawn-hat-editor-preview .pawn-hat{filter:drop-shadow(0 2px 2px rgba(0,0,0,.58)) drop-shadow(0 0 3px color-mix(in srgb,var(--hat-glow) 48%,transparent))}
.hat-settings-form>.ability-setting-field:first-child{grid-column:1/-1}.hat-style-picker{min-width:0}.hat-style-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}.hat-style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.hat-style-choice{min-width:0;min-height:92px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(155deg,var(--panel-3),color-mix(in srgb,var(--panel-2) 92%,var(--accent) 8%));color:var(--text);padding:7px 5px 8px;display:grid;grid-template-rows:58px auto;align-items:center;justify-items:center;gap:4px;cursor:pointer;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease,background .16s ease}.hat-style-choice:hover{transform:translateY(-1px);border-color:rgba(var(--accent-rgb),.38)}.hat-style-choice.active{border-color:rgba(var(--accent-rgb),.68);background:linear-gradient(155deg,rgba(var(--accent-rgb),.14),var(--panel-3));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.12),0 7px 20px rgba(0,0,0,.15)}.hat-style-choice img{display:block;width:72px;height:58px;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.46));pointer-events:none}.hat-style-choice span{max-width:100%;font-size:7px;font-weight:850;line-height:1.15;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.hat-style-choice.active span{color:var(--accent)}
.power-category-icon:has(+*){flex:0 0 auto}
@media(max-width:720px){.pawn-hat{transform:translateX(-50%) scale(.86)}.com2-pawn.pawn-premium>.pawn-hat{transform:translateX(-50%) scale(.90)}.pawn-hat-editor-preview .com2-pawn{transform:scale(2.35);margin-left:42px}.hat-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hat-style-choice{min-height:88px}}

/* COM2 Chat v4.18.7 — Hat 2 Premium Seri */
.pawn-hat-pirate{--hat-glow:#ff9a45;top:-17px;width:40px;height:27px}
.pawn-hat-viking{--hat-glow:#8797ff;top:-20px;width:41px;height:31px}
.pawn-hat-samurai{--hat-glow:#ff624b;top:-21px;width:42px;height:33px}
.pawn-hat-neon{--hat-glow:#29d9ff;top:-22px;width:41px;height:34px}
.hat-series-title{grid-column:1/-1;width:100%;display:flex;align-items:center;justify-content:space-between;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),var(--panel-3));font-size:9px;font-weight:900;letter-spacing:.04em;color:var(--text)}
.hat-style-picker{display:grid;gap:8px}.hat-style-picker>.hat-style-grid{width:100%}

/* COM2 Chat v4.18.7.2 — Hat render performance hotfix: live hats use the baked PNG lighting; only the single editor preview keeps a lightweight glow. */

/* COM2 Chat v4.18.8.3 — rightbar scroll compositor guard */
.member-scroll.is-scrolling .member-row{pointer-events:none}
.member-scroll.is-scrolling .ability-motion-shimmer,
.member-scroll.is-scrolling .ability-motion-pulse,
.member-scroll.is-scrolling .ability-motion-float,
.member-scroll.is-scrolling .com2-pawn.pawn-purple::after,
.member-scroll.is-scrolling .com2-pawn.pawn-gold::after,
.member-scroll.is-scrolling .com2-pawn.pawn-black::before,
.member-scroll.is-scrolling .com2-pawn.pawn-black::after,
.member-scroll.is-scrolling .com2-pawn.pawn-premium::before,
.member-scroll.is-scrolling .com2-pawn.pawn-premium::after,
.member-scroll.is-scrolling .com2-pawn.pawn-premium .pawn-art{animation-play-state:paused!important}
.member-scroll.is-scrolling .member-row b{filter:none!important;text-shadow:none!important}
.member-scroll.is-scrolling .com2-pawn .pawn-art,
.member-scroll.is-scrolling .pawn-hat{filter:none!important}
.member-scroll.is-scrolling .member-presence-dot{box-shadow:none!important}


/* =========================================================
   COM2 Chat v4.18.8.4 — NameGlow + Premium Pawn Runtime Performance
   Live chat/rightbar only. Store, profile and ability previews keep full polish.
   ========================================================= */
.ability-name{ text-rendering:auto }

/* Shimmer remains visible, but quantized timing avoids repainting the clipped
   gradient on every display frame. */
.ability-motion-shimmer{animation-timing-function:steps(42,end)!important}

/* Live premium pawns: preserve a strong aura but remove the expensive scale +
   blur animation from every row/message. One lightweight opacity pulse remains. */
@keyframes pawnRingLivePerf{0%,100%{opacity:.18}50%{opacity:.38}}
.chat-stream .com2-pawn.pawn-premium::before,
.member-scroll .com2-pawn.pawn-premium::before{
  animation:none!important;
  filter:blur(2.4px)!important;
  opacity:.58!important;
  transform:none!important;
}
.chat-stream .com2-pawn.pawn-premium::after,
.member-scroll .com2-pawn.pawn-premium::after{
  animation:pawnRingLivePerf 3.6s ease-in-out infinite!important;
  transform:translateX(-50%) scale(.86)!important;
  box-shadow:0 0 6px var(--pawn-glow-soft)!important;
}
.chat-stream .com2-pawn.pawn-premium .pawn-art,
.member-scroll .com2-pawn.pawn-premium .pawn-art{
  animation:none!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.42)) drop-shadow(0 0 4px var(--pawn-glow))!important;
}

/* During active scrolling, do not merely pause compositor-heavy layers: remove
   them until scrolling settles. Gradient fill stays, so names remain readable. */
.chat-stream.is-scrolling .ability-name,
.chat-stream.is-scrolling .ability-status-text,
.member-scroll.is-scrolling .ability-name,
.member-scroll.is-scrolling .ability-status-text{
  animation:none!important;
  filter:none!important;
  text-shadow:none!important;
}
.chat-stream.is-scrolling .com2-pawn.pawn-premium::before,
.chat-stream.is-scrolling .com2-pawn.pawn-premium::after,
.member-scroll.is-scrolling .com2-pawn.pawn-premium::before,
.member-scroll.is-scrolling .com2-pawn.pawn-premium::after{
  animation:none!important;
  filter:none!important;
  box-shadow:none!important;
  opacity:.12!important;
}
.chat-stream.is-scrolling .com2-pawn.pawn-premium .pawn-art,
.member-scroll.is-scrolling .com2-pawn.pawn-premium .pawn-art{
  animation:none!important;
  filter:none!important;
}

/* Offscreen live items need no running shimmer/ring at all. The existing
   IntersectionObserver restores full styles only when they become visible. */
.chat-stream .message:not(.is-visible) .ability-motion-shimmer,
.member-scroll .member-row:not(.is-visible) .ability-motion-shimmer{
  animation:none!important;
}
.chat-stream .message:not(.is-visible) .com2-pawn.pawn-premium::after,
.member-scroll .member-row:not(.is-visible) .com2-pawn.pawn-premium::after{
  animation:none!important;
  opacity:.16!important;
}


/* =========================================================
   COM2 Chat v4.18.8.9 — Offscreen NameGlow + live Hat raster hardening
   Heavy name glow layers are not painted outside the visibility window.
   Live Hat nodes use 96x64 2x assets; full 192x128 art remains in editors.
   ========================================================= */
.chat-stream .message:not(.is-visible) .ability-name,
.chat-stream .message:not(.is-visible) .ability-status-text,
.member-scroll .member-row:not(.is-visible) .ability-name,
.member-scroll .member-row:not(.is-visible) .ability-status-text{
  filter:none!important;
  text-shadow:none!important;
}


/* v4.19.3 — Premium COM2 default avatar library */
.avatar-library-cta{position:relative;width:100%;margin-top:18px;min-height:86px;border:1px solid color-mix(in srgb,var(--accent) 48%,var(--line-strong));border-radius:18px;padding:13px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;text-align:left;color:var(--text);cursor:pointer;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--panel-3) 91%,var(--accent) 9%),color-mix(in srgb,var(--panel-2) 95%,var(--accent-2) 5%));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 34px rgba(0,0,0,.12);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.avatar-library-cta::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:linear-gradient(115deg,transparent 8%,rgba(255,255,255,.08) 32%,transparent 48%);transform:translateX(-110%);transition:transform .55s ease}
.avatar-library-cta:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 75%,#fff 10%);box-shadow:0 16px 38px rgba(0,0,0,.18),0 0 28px rgba(var(--accent-rgb),.10)}
.avatar-library-cta:hover::before{transform:translateX(110%)}
.avatar-library-previews{display:flex;align-items:center;min-width:96px;padding-left:4px}
.avatar-library-previews img{width:48px;height:48px;object-fit:cover;border-radius:14px;border:2px solid color-mix(in srgb,var(--panel-2) 82%,var(--accent) 18%);background:var(--panel-3);box-shadow:0 7px 20px rgba(0,0,0,.24)}
.avatar-library-previews img+img{margin-left:-15px}.avatar-library-previews img:nth-child(2){transform:translateY(-4px)}.avatar-library-previews img:nth-child(3){transform:translateY(3px)}
.avatar-library-copy{display:grid;gap:3px;min-width:0}.avatar-library-copy small{font-size:8px;font-weight:900;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}.avatar-library-copy strong{font-size:13px;letter-spacing:-.01em}.avatar-library-copy em{font-style:normal;font-size:9px;color:var(--muted);font-weight:600}
.avatar-library-arrow{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:17px;font-weight:900;box-shadow:0 8px 24px rgba(var(--accent-rgb),.25);transition:transform .18s ease}.avatar-library-cta:hover .avatar-library-arrow{transform:translateX(2px)}
.default-avatar-modal-overlay{position:fixed;inset:0;z-index:1400;display:grid;place-items:center;padding:24px;background:rgba(3,5,12,.74);backdrop-filter:blur(12px);opacity:0;transition:opacity .16s ease}.default-avatar-modal-overlay.show{opacity:1}
.default-avatar-modal{width:min(920px,96vw);max-height:min(790px,90vh);display:flex;flex-direction:column;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line-strong));border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 97%,var(--accent) 3%),var(--panel));box-shadow:0 34px 90px rgba(0,0,0,.48),0 0 55px rgba(var(--accent-rgb),.08);transform:translateY(8px) scale(.985);transition:transform .16s ease}.default-avatar-modal-overlay.show .default-avatar-modal{transform:none}
.default-avatar-modal-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--panel-3) 86%,var(--accent) 14%),transparent)}
.default-avatar-modal-brand{display:flex;align-items:center;gap:13px}.default-avatar-modal-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:19px;box-shadow:0 10px 30px rgba(var(--accent-rgb),.26)}
.default-avatar-modal-brand>div{display:grid;gap:2px}.default-avatar-modal-brand .social-kicker{font-size:8px}.default-avatar-modal-brand h3{margin:0;font-size:19px;letter-spacing:-.02em}.default-avatar-modal-brand p{margin:0;color:var(--muted);font-size:9px}
.default-avatar-modal-close{width:38px;height:38px;border:1px solid var(--line-strong);border-radius:12px;background:var(--panel-3);color:var(--text);font-size:22px;cursor:pointer;transition:border-color .15s ease,background .15s ease}.default-avatar-modal-close:hover{border-color:rgba(var(--accent-rgb),.5);background:color-mix(in srgb,var(--panel-3) 90%,var(--accent) 10%)}
.default-avatar-modal-body{overflow:auto;padding:21px 22px 25px;overscroll-behavior:contain}.default-avatar-modal-section+.default-avatar-modal-section{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}
.default-avatar-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:13px}.default-avatar-section-head>div{display:grid;gap:3px}.default-avatar-section-head b{font-size:12px}.default-avatar-section-head small{font-size:9px;color:var(--muted)}.default-avatar-count{min-width:28px;height:24px;padding:0 8px;border:1px solid var(--line-strong);border-radius:999px;display:grid;place-items:center;font-size:9px;font-weight:800;color:var(--muted);background:var(--panel-3)}
.default-avatar-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.default-avatar-option{position:relative;aspect-ratio:1/1;border:1px solid var(--line-strong);border-radius:15px;padding:5px;background:var(--panel-3);cursor:pointer;overflow:hidden;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}.default-avatar-option:hover{transform:translateY(-2px);border-color:rgba(var(--accent-rgb),.55);box-shadow:0 10px 26px rgba(0,0,0,.20)}.default-avatar-option.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12),0 12px 30px rgba(var(--accent-rgb),.10)}.default-avatar-option:disabled{cursor:wait;opacity:.72;transform:none}.default-avatar-option img{width:100%;height:100%;display:block;object-fit:cover;border-radius:10px;background:#0b0f19}.default-avatar-badge{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 7px 18px rgba(var(--accent-rgb),.32)}.default-avatar-badge:empty{display:none}
@media(max-width:800px){.default-avatar-modal-overlay{padding:12px}.default-avatar-modal{width:100%;max-height:92vh;border-radius:20px}.default-avatar-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:560px){.avatar-library-cta{grid-template-columns:auto minmax(0,1fr);padding:12px;gap:11px}.avatar-library-arrow{display:none}.avatar-library-previews{min-width:78px}.avatar-library-previews img{width:42px;height:42px;border-radius:12px}.avatar-library-copy strong{font-size:12px}.default-avatar-modal-overlay{padding:0;place-items:end center}.default-avatar-modal{max-height:94dvh;border-radius:22px 22px 0 0}.default-avatar-modal-head{padding:16px}.default-avatar-modal-brand p{display:none}.default-avatar-modal-body{padding:17px 14px 24px}.default-avatar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.default-avatar-modal-section+.default-avatar-modal-section{margin-top:21px;padding-top:18px}}

/* COM2 Chat v4.20.1 — Xat-style Zoom Power hover fix
   Xat behavior:
   1) Viewer owns/effectively has Zoom -> can enlarge any message avatar.
   2) Avatar owner owns/effectively has Zoom -> everyone can enlarge that avatar. */
.power-preview-zoom{font-size:12px!important;font-weight:900;letter-spacing:-.03em;background:linear-gradient(135deg,#6d5dfc,#27a7ff)!important;color:#fff!important;box-shadow:0 0 18px rgba(109,93,252,.32)}
@media (hover:hover) and (pointer:fine){
  body.viewer-avatar-zoom .chat-stream .message > .avatar,
  .chat-stream .message > .avatar.ability-avatar-zoom{z-index:20}

  body.viewer-avatar-zoom .chat-stream .message > .avatar > img,
  .chat-stream .message > .avatar.ability-avatar-zoom > img{
    position:relative;
    z-index:1;
    transform-origin:var(--avatar-zoom-origin-x,left) var(--avatar-zoom-origin-y,top);
    transition:transform .12s ease,border-radius .12s ease,box-shadow .12s ease;
  }

  body.viewer-avatar-zoom .chat-stream:not(.is-scrolling) .message > .avatar:hover,
  .chat-stream:not(.is-scrolling) .message > .avatar.ability-avatar-zoom:hover{z-index:80}

  body.viewer-avatar-zoom .chat-stream:not(.is-scrolling) .message > .avatar:hover > img,
  .chat-stream:not(.is-scrolling) .message > .avatar.ability-avatar-zoom:hover > img{
    will-change:transform;
    transform:scale(4);
    border-radius:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.46);
  }

  body.viewer-avatar-zoom .chat-stream:not(.is-scrolling) .message > .avatar:hover > .presence,
  .chat-stream:not(.is-scrolling) .message > .avatar.ability-avatar-zoom:hover > .presence{opacity:0}
}


/* COM2 Chat v4.20.2 — Zoom top-layer stacking fix
   While an eligible avatar is hovered, elevate the entire message row.
   This guarantees the 4× image renders above neighbouring Pawns, Hats,
   NameGlow/gradient layers, badges and later message rows. */
@media (hover:hover) and (pointer:fine){
  .chat-stream .message{
    position:relative;
    z-index:0;
  }

  body.viewer-avatar-zoom .chat-stream:not(.is-scrolling) .message:has(> .avatar:hover),
  .chat-stream:not(.is-scrolling) .message:has(> .avatar.ability-avatar-zoom:hover){
    z-index:500;
  }

  body.viewer-avatar-zoom .chat-stream:not(.is-scrolling) .message > .avatar:hover,
  .chat-stream:not(.is-scrolling) .message > .avatar.ability-avatar-zoom:hover{
    z-index:510;
    isolation:isolate;
  }

  body.viewer-avatar-zoom .chat-stream:not(.is-scrolling) .message > .avatar:hover > img,
  .chat-stream:not(.is-scrolling) .message > .avatar.ability-avatar-zoom:hover > img{
    position:relative;
    z-index:520;
  }

  /* Decorative powers must never sit above the enlarged avatar. */
  body.viewer-avatar-zoom .chat-stream:not(.is-scrolling) .message:has(> .avatar:hover) .message-body,
  .chat-stream:not(.is-scrolling) .message:has(> .avatar.ability-avatar-zoom:hover) .message-body{
    position:relative;
    z-index:1;
  }
}


/* COM2 Chat v4.20.3 — Zoom compositor optimization
   Do not pre-promote every eligible avatar to a GPU/compositor layer.
   will-change is applied only during the actual Zoom hover state. */


/* COM2 Chat v4.20.4 — viewport-aware Zoom edge handling.
   JS changes these CSS custom properties only while a real Zoom hover is possible. */
@media (hover:hover) and (pointer:fine){
  .chat-stream .message > .avatar{
    --avatar-zoom-origin-x:left;
    --avatar-zoom-origin-y:top;
  }
}

/* COM2 Chat v4.22.0 — Xat-style live two-sided trade */
.live-entry-actions{grid-template-columns:1fr 1fr}
.live-trade-start,.live-trade-top{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),var(--panel-2));border-radius:16px;padding:14px;margin:12px 0}
.live-trade-start input{width:min(220px,100%);border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:10px;padding:11px 12px;outline:0}
.live-trade-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}
.live-trade-side{display:grid;gap:11px;border:1px solid var(--line);background:var(--panel-2);border-radius:17px;padding:14px;min-width:0;transition:border-color .15s,box-shadow .15s}
.live-trade-side.mine{border-color:rgba(var(--accent-rgb),.30)}.live-trade-side.is-ready{box-shadow:inset 0 0 0 1px rgba(75,220,155,.16)}.live-trade-side.is-confirmed{border-color:rgba(75,220,155,.48)}
.live-trade-side-head{display:flex;align-items:center;gap:10px}.live-trade-side-head h3{margin:2px 0 1px}.live-trade-side-head .avatar{width:38px;height:38px}
.live-trade-ready-pill{font-size:10px;font-weight:900;letter-spacing:.06em;border:1px solid var(--line-strong);border-radius:999px;padding:5px 7px;color:var(--muted);white-space:nowrap}.live-trade-ready-pill.ready{color:#5ee6a8;border-color:rgba(94,230,168,.35)}.live-trade-ready-pill.confirmed{color:#fff;background:rgba(94,230,168,.16);border-color:rgba(94,230,168,.5)}
.live-trade-items{display:grid;gap:7px;min-height:58px}.live-trade-item{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--panel-3);border-radius:12px;padding:9px 10px}.live-trade-item b,.live-trade-item small{display:block}.live-trade-item .ability-card-icon{width:30px;height:30px;display:grid;place-items:center}
.live-trade-assets{display:grid;grid-template-columns:1fr 1fr;gap:8px}.live-trade-asset{border:1px solid var(--line);background:rgba(var(--accent-rgb),.035);border-radius:11px;padding:10px;text-align:center;font-weight:800}
.live-trade-editor{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:10px}.live-trade-edit-row{display:grid;grid-template-columns:minmax(0,1fr) 74px auto;gap:7px;align-items:end}.live-trade-edit-row.assets{grid-template-columns:1fr 1fr auto}.live-trade-edit-row select,.live-trade-edit-row input{width:100%;min-width:0;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:9px;padding:9px 10px;outline:0}.live-trade-edit-row label{display:grid;gap:4px;font-size:11px;color:var(--muted)}
.live-trade-summary{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:14px;padding:12px}.live-trade-summary-side{font-size:12px;font-weight:700}.live-trade-summary-side:last-child{text-align:right}.live-trade-swap{font-size:22px;color:var(--accent)}
.live-trade-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px;flex-wrap:wrap}.live-trade-actions>button:first-child{margin-right:auto}
.legacy-gifts{border-top:1px solid var(--line);padding-top:14px}
@media(max-width:820px){.live-entry-actions,.live-trade-grid{grid-template-columns:1fr}.live-trade-start{align-items:stretch;flex-direction:column}.live-trade-start input{width:100%}.live-trade-edit-row,.live-trade-edit-row.assets{grid-template-columns:1fr}.live-trade-summary{grid-template-columns:1fr}.live-trade-summary-side:last-child{text-align:left}.live-trade-swap{transform:rotate(90deg);justify-self:center}.live-trade-actions{display:grid;grid-template-columns:1fr 1fr}.live-trade-actions>button:first-child{margin-right:0}.live-trade-actions button{width:100%}}

/* v4.22.1 — inline quantity controls inside accepted live trade room */
.live-trade-qty-controls{display:flex;align-items:center;gap:5px;flex:0 0 auto}.live-trade-qty{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:30px;padding:0 7px;border:1px solid var(--line-strong);border-radius:9px;background:rgba(var(--accent-rgb),.055);font-size:12px;font-weight:900;color:var(--text);white-space:nowrap}.live-trade-qty-controls .mini{min-width:30px;padding-left:8px;padding-right:8px}
@media(max-width:620px){.live-trade-item{align-items:flex-start;flex-wrap:wrap}.live-trade-item .grow{min-width:calc(100% - 48px)}.live-trade-qty-controls{width:100%;justify-content:flex-end;padding-left:39px}.live-trade-qty-controls .danger-soft{margin-left:auto}}


/* COM2 Chat v4.22.3 — Live Trade UI Stability / responsive wide room */
.social-overlay.live-trade-mode .social-panel{width:min(980px,calc(100vw - 28px))}
.social-overlay.live-trade-mode .social-body{scroll-behavior:auto;overflow-anchor:none}
.social-overlay.live-trade-mode .live-trade-top{align-items:flex-start}
.social-overlay.live-trade-mode .live-trade-top .grow{min-width:0}
.social-overlay.live-trade-mode .live-trade-top h3{overflow-wrap:anywhere;line-height:1.18}
.live-trade-grid{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));align-items:start}
.live-trade-side{container-type:inline-size;align-content:start;overflow:hidden}
.live-trade-side-head{min-width:0;flex-wrap:wrap}.live-trade-side-head .grow{min-width:0}.live-trade-side-head h3{overflow-wrap:anywhere}.live-trade-ready-pill{margin-left:auto}
.live-trade-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;min-width:0}.live-trade-item .grow{min-width:0}.live-trade-item b,.live-trade-item small{overflow-wrap:anywhere}
.live-trade-qty-controls{min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
.live-trade-edit-row{grid-template-columns:minmax(0,1fr) 80px;align-items:end}.live-trade-edit-row>button{grid-column:1/-1;width:100%}
.live-trade-edit-row.assets{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.live-trade-edit-row.assets>button{grid-column:1/-1;width:100%}
.live-trade-editor small.muted{overflow-wrap:anywhere}
.live-trade-assets{min-width:0}.live-trade-asset{min-width:0;overflow-wrap:anywhere}
@container (max-width:430px){
  .live-trade-item{grid-template-columns:auto minmax(0,1fr)}
  .live-trade-qty-controls{grid-column:1/-1;width:100%;justify-content:flex-start;padding-left:39px}
  .live-trade-qty-controls .danger-soft{margin-left:auto}
  .live-trade-assets{grid-template-columns:1fr}
}
@media(max-width:720px){
  .social-overlay.live-trade-mode .social-panel{width:100vw;height:100dvh}
  .live-trade-grid{grid-template-columns:1fr}
  .live-trade-edit-row,.live-trade-edit-row.assets{grid-template-columns:1fr}
  .live-trade-edit-row>button,.live-trade-edit-row.assets>button{grid-column:auto}
}

/* v4.22.11 — Trade invite layout + persistent social modal stability */
.social-overlay{cursor:default}
.com2-trade-invite-dialog{
  width:min(520px,calc(100vw - 24px));
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:stretch;
  padding:22px;
  box-sizing:border-box;
}
.com2-trade-invite-head{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:14px;
  align-items:start;
  min-width:0;
  width:100%;
}
.com2-trade-invite-head>.com2-confirm-icon{grid-column:auto;flex:none}
.com2-trade-invite-head>.com2-confirm-copy{grid-column:auto;min-width:0;width:100%}
.com2-trade-invite-dialog .com2-confirm-copy .social-kicker{display:block;margin-bottom:8px;white-space:normal}
.com2-trade-invite-dialog .com2-confirm-copy h3{
  margin:0 0 9px;
  font-size:20px;
  line-height:1.25;
  word-break:normal;
  overflow-wrap:normal;
  white-space:normal;
  max-width:100%;
}
.com2-trade-invite-dialog .com2-confirm-copy p{
  margin:0;
  font-size:12px;
  line-height:1.7;
  word-break:normal;
  overflow-wrap:break-word;
  white-space:normal;
  max-width:100%;
}
.com2-trade-invite-dialog>.com2-confirm-actions{
  grid-column:auto;
  width:100%;
  margin:0;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.com2-trade-invite-dialog>.com2-confirm-actions button{min-width:92px}
@media(max-width:720px){
  .com2-trade-invite-dialog{width:min(100%,calc(100vw - 16px));padding:16px;gap:16px}
  .com2-trade-invite-head{grid-template-columns:42px minmax(0,1fr);gap:12px}
  .com2-trade-invite-dialog .com2-confirm-copy h3{font-size:18px}
  .com2-trade-invite-dialog>.com2-confirm-actions{display:grid;grid-template-columns:1fr 1fr}
  .com2-trade-invite-dialog>.com2-confirm-actions button{min-width:0;width:100%}
}

/* COM2 Chat v4.22.29 — Direct-to-chat guest bootstrap (chat layout untouched) */
.guest-bootstrap-body{min-height:100dvh;display:grid;place-items:center;overflow:auto;padding:20px;background:radial-gradient(circle at 18% 5%,rgba(var(--accent-rgb),.18),transparent 34%),radial-gradient(circle at 84% 92%,rgba(35,196,210,.08),transparent 30%),var(--bg)}
.guest-bootstrap-card{width:min(430px,100%);border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 96%,transparent);border-radius:24px;padding:32px;box-shadow:var(--shadow);text-align:center}
.guest-bootstrap-brand{justify-content:center;margin:0 0 24px}.guest-bootstrap-card h1{margin:12px 0 8px;font-size:24px}.guest-bootstrap-card>p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}
.guest-bootstrap-loader{height:34px;margin:15px 0 3px;display:flex;align-items:center;justify-content:center;gap:6px}.guest-bootstrap-loader i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:guest-bootstrap-pulse 1s ease-in-out infinite}.guest-bootstrap-loader i:nth-child(2){animation-delay:.12s}.guest-bootstrap-loader i:nth-child(3){animation-delay:.24s}
.guest-bootstrap-actions{margin-top:15px;display:grid;gap:10px}.guest-bootstrap-actions[hidden]{display:none}.guest-bootstrap-auth-link{color:var(--muted);font-size:10px;font-weight:700;text-decoration:none}.guest-bootstrap-auth-link:hover{color:var(--text)}.guest-bootstrap-noscript{margin-top:18px!important}.guest-bootstrap-noscript a{color:var(--accent)}
@keyframes guest-bootstrap-pulse{0%,100%{opacity:.32;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}
@media(max-width:480px){.guest-bootstrap-card{padding:26px 20px;border-radius:20px}.guest-bootstrap-card h1{font-size:21px}}


/* COM2 Chat v4.22.30 — Guest account conversion UX */
.sidebar .guest-my-card{padding:11px}
.guest-account-cta{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:grid;gap:9px}
.guest-account-copy{display:grid;gap:3px}.guest-account-copy b{font-size:10px;color:var(--text)}.guest-account-copy small{font-size:8px;line-height:1.45;color:var(--muted)}
.guest-account-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.guest-account-actions form{display:contents}
.guest-register-btn,.guest-login-btn{min-width:0;border-radius:9px;padding:8px 7px;font-size:8px;font-weight:850;cursor:pointer}
.guest-register-btn{border:1px solid rgba(var(--accent-rgb),.55);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 16px rgba(var(--accent-rgb),.16)}
.guest-login-btn{border:1px solid var(--line);background:var(--panel-3);color:var(--text)}
.guest-register-btn:hover{filter:brightness(1.06)}.guest-login-btn:hover{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.07)}
.guest-registration-closed{font-size:7px;color:var(--muted);text-align:center}
.guest-register-hero{border-color:rgba(var(--accent-rgb),.34);background:linear-gradient(145deg,rgba(var(--accent-rgb),.12),var(--panel-2))}
.guest-register-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:12px}
.guest-register-benefits>span{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:8px;background:var(--panel-3);font-size:8px;color:var(--text)}
.guest-register-benefits i{width:22px;height:22px;display:grid;place-items:center;border-radius:8px;background:rgba(var(--accent-rgb),.10);color:var(--accent);font-style:normal;font-size:11px;flex:0 0 22px}
.guest-register-actions{margin-top:2px}.guest-register-actions button{min-height:38px}.guest-convert-card .social-actions{margin-top:12px}
@media(max-width:560px){.guest-register-benefits{grid-template-columns:1fr}.guest-account-actions{grid-template-columns:1fr 1fr}}

/* COM2 Chat v4.22.31 — Unified guest authentication drawer */
.guest-auth-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:12px;padding:5px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2)}
.guest-auth-switch[hidden]{display:none}.guest-auth-switch button{min-width:0;border:0;border-radius:9px;padding:9px 10px;background:transparent;color:var(--muted);font-size:9px;font-weight:850;cursor:pointer}.guest-auth-switch button.active{background:rgba(var(--accent-rgb),.12);color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.24)}
.guest-auth-content{display:grid;gap:12px}.guest-auth-hero{border-color:rgba(var(--accent-rgb),.28);background:linear-gradient(145deg,rgba(var(--accent-rgb),.09),var(--panel-2))}.guest-auth-hero h3,.guest-auth-2fa h3{margin:5px 0 7px}.guest-auth-card{position:relative}.guest-auth-form{margin-top:2px}.guest-auth-actions{margin-top:2px}.guest-auth-actions button{min-height:38px}.guest-auth-alert{margin-bottom:11px;padding:9px 11px;border:1px solid rgba(255,91,110,.30);border-radius:10px;background:rgba(255,91,110,.07);color:#ff9aaa;font-size:9px;line-height:1.5}.guest-auth-alert[hidden]{display:none}.guest-auth-2fa{border-color:rgba(var(--accent-rgb),.30)}
@media(max-width:560px){.guest-auth-actions{display:grid;grid-template-columns:1fr}.guest-auth-actions button{width:100%}}

/* v4.22.32 — single active client guard. The active room remains visible as
   context, while an older tab is made deliberately non-interactive. */
.single-client-passive .app-shell{filter:saturate(.82) brightness(.72);pointer-events:none;user-select:none}
.single-client-lock{position:fixed;inset:0;z-index:25000;display:grid;place-items:center;padding:24px;background:rgba(4,8,18,.58);backdrop-filter:blur(8px);opacity:0;transition:opacity .16s ease}
.single-client-lock.show{opacity:1}
.single-client-lock-card{width:min(430px,100%);display:grid;justify-items:center;gap:14px;padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:0 28px 90px rgba(0,0,0,.42);text-align:center}
.single-client-lock-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:color-mix(in srgb,var(--accent) 18%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));font-size:25px;font-weight:900;color:var(--accent)}
.single-client-lock-copy{display:grid;gap:7px}
.single-client-lock-copy h2{margin:0;font-size:20px;line-height:1.25}
.single-client-lock-copy p{margin:0;color:var(--muted);line-height:1.55}
.single-client-lock-card>button{min-width:190px}
.single-client-lock-card>small{line-height:1.45}
@media(max-width:560px){.single-client-lock{padding:16px}.single-client-lock-card{padding:22px 18px;border-radius:18px}.single-client-lock-copy h2{font-size:18px}}

/* =========================================================
   COM2 Chat v4.22.33 — Classic xat interaction UX
   Room + private-message tabs; existing room message render stays untouched.
   ========================================================= */
.workspace{grid-template-rows:var(--topbar) auto auto auto minmax(0,1fr) auto}
.chat-tabs{min-width:0;display:flex;align-items:flex-end;gap:5px;padding:0 30px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);overflow:hidden}
.chat-tab{min-width:0;height:32px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-bottom-color:var(--line-strong);border-radius:10px 10px 7px 7px;padding:0 10px;background:color-mix(in srgb,var(--panel-2) 90%,transparent);color:var(--muted);cursor:pointer;font-size:9px;font-weight:800;transition:border-color .14s ease,background .14s ease,color .14s ease,box-shadow .14s ease}
.chat-tab:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
.chat-tab.active{color:var(--text);border-color:rgba(var(--accent-rgb),.48);background:linear-gradient(180deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.055));box-shadow:inset 0 -2px 0 var(--accent)}
.chat-tab b{min-width:0;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.chat-tab-room-icon{font-size:12px;line-height:1}.chat-tab-unread{min-width:17px;height:17px;display:inline-grid;place-items:center;padding:0 4px;border-radius:999px;background:var(--accent);color:#fff;font-size:7px;font-weight:900;line-height:1}.chat-tab-unread[hidden]{display:none}
.dm-tab-list{min-width:0;display:flex;align-items:center;gap:5px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.dm-tab-list::-webkit-scrollbar{display:none}.dm-tab-shell{flex:0 0 auto;display:flex;align-items:center;position:relative}.dm-chat-tab{padding-right:26px;max-width:185px}.dm-tab-dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 6px rgba(33,208,139,.4);flex:0 0 6px}.dm-tab-shell.has-unread .dm-chat-tab{border-color:rgba(var(--accent-rgb),.42);color:var(--text)}
.dm-tab-close{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;line-height:1}.dm-tab-close:hover{background:rgba(255,255,255,.06);color:var(--text)}
.workspace.dm-tab-active #roomAnnouncement,.workspace.dm-tab-active #chatStream,.workspace.dm-tab-active #roomComposerWrap,.workspace.dm-tab-active #chatNewIndicator{display:none!important}
.dm-workspace{grid-row:4 / 7;min-width:0;min-height:0;padding:0 30px 20px;overflow:hidden}
.dm-workspace:not([hidden]){display:flex;flex-direction:column}.dm-workspace[hidden]{display:none!important}.dm-workspace-empty{margin:auto;color:var(--muted);font-size:11px}
.dm-dock-conversation{flex:1;min-width:0;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:1px solid var(--line);border-radius:16px;background:linear-gradient(155deg,color-mix(in srgb,var(--panel-2) 96%,var(--accent) 4%),var(--panel));overflow:hidden;box-shadow:0 16px 42px rgba(0,0,0,.10)}.dm-dock-conversation[hidden]{display:none!important}
.dm-dock-head{display:flex;align-items:center;gap:9px;padding:10px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel-2) 90%,transparent)}.dm-dock-head>.avatar{width:34px;height:34px}.dm-dock-head>.grow{min-width:0;display:flex;flex-direction:column;gap:3px}.dm-dock-head b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-dock-head small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dm-dock-head .mini{padding:7px 9px;font-size:8px}
.dm-dock-messages{padding:14px 16px}.dm-dock-composer{padding:10px 12px 12px;background:color-mix(in srgb,var(--panel) 92%,transparent)}.dm-dock-composer textarea{min-height:40px}.dm-tab-hint{margin-bottom:10px;padding:8px 10px;border:1px solid rgba(var(--accent-rgb),.18);border-radius:10px;background:rgba(var(--accent-rgb),.05);color:var(--muted);font-size:8.5px;line-height:1.5}
/* Mini user card: keep it compact and action-first, closer to classic xat. */
.profile-popover .profile-actions [data-profile-action="view"]{grid-column:auto}
.profile-popover .profile-actions [data-profile-action="message"]{border-color:rgba(var(--accent-rgb),.34);background:rgba(var(--accent-rgb),.085);color:var(--text)}

@media(max-width:720px){
  .workspace{grid-template-rows:58px auto auto auto minmax(0,1fr) auto}
  .chat-tabs{padding:0 10px 6px;gap:4px}.chat-tab{height:30px;padding-inline:8px}.dm-chat-tab{padding-right:24px;max-width:150px}.chat-tab b{max-width:100px}
  .dm-workspace{grid-row:4 / 7;padding:0 10px 10px}.dm-dock-head{padding:8px 9px}.dm-dock-head .mini{padding:6px 7px}.dm-dock-messages{padding:10px}.dm-dock-composer{padding:8px}.dm-bubble{max-width:88%}
}
@media(max-width:720px) and (max-height:700px){.workspace{grid-template-rows:52px auto auto auto minmax(0,1fr) auto}.chat-tabs{padding-bottom:4px}.chat-tab{height:27px}.dm-workspace{padding-bottom:6px}}
@media(max-width:720px){
  body.mobile-keyboard-open .workspace{grid-template-rows:52px auto minmax(0,1fr) auto}
  body.mobile-keyboard-open .chat-tabs{grid-row:2;padding-bottom:4px}
  body.mobile-keyboard-open #chatStream{grid-row:3}
  body.mobile-keyboard-open #roomComposerWrap{grid-row:4}
  body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:52px auto minmax(0,1fr)}
  body.mobile-keyboard-open .workspace.dm-tab-active .dm-workspace{grid-row:3 / 4;padding-bottom:max(5px,env(safe-area-inset-bottom))}
  body.mobile-keyboard-open .dm-dock-head{display:none}.dm-dock-composer textarea{max-height:72px}
}
@media(max-width:380px){body.mobile-keyboard-open .workspace{grid-template-rows:48px auto minmax(0,1fr) auto}body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:48px auto minmax(0,1fr)}}

/* =========================================================
   COM2 Chat v4.22.34 — Bottom chat tabs / cleaner room header
   Keep the classic message render; move room + DM navigation to the dock.
   ========================================================= */
.workspace{grid-template-rows:var(--topbar) auto minmax(0,1fr) auto auto}
.workspace>.topbar{grid-row:1}
#roomAnnouncement{grid-row:2}
#chatStream{grid-row:3}
.chat-tabs{grid-row:4}
#roomComposerWrap{grid-row:5}
.chat-tabs.chat-tabs-bottom{
  align-items:flex-start;
  padding:7px 30px 0;
  border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  border-bottom:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 72%,transparent),transparent);
}
.chat-tabs-bottom .chat-tab{border-radius:7px 7px 10px 10px}
.chat-tabs-bottom .chat-tab.active{box-shadow:inset 0 2px 0 var(--accent)}
.dm-workspace{grid-row:3 / 4;padding:0 30px 10px}
.chat-new-indicator{bottom:122px}
.topbar-sound-toggle{flex:0 0 auto}

@media(max-width:720px){
  .workspace{grid-template-rows:58px auto minmax(0,1fr) auto auto}
  .chat-tabs.chat-tabs-bottom{padding:5px 10px 0}
  .dm-workspace{grid-row:3 / 4;padding:0 10px 6px}
  .chat-new-indicator{bottom:108px}
  .topbar-sound-toggle{display:none}
}
@media(max-width:720px) and (max-height:700px){
  .workspace{grid-template-rows:52px auto minmax(0,1fr) auto auto}
  .chat-tabs.chat-tabs-bottom{padding-top:4px}
}
@media(max-width:720px){
  body.mobile-keyboard-open .workspace{grid-template-rows:52px minmax(0,1fr) auto auto}
  body.mobile-keyboard-open #chatStream{grid-row:2}
  body.mobile-keyboard-open .chat-tabs{grid-row:3;padding:4px 10px 0}
  body.mobile-keyboard-open #roomComposerWrap{grid-row:4}
  body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:52px minmax(0,1fr) auto}
  body.mobile-keyboard-open .workspace.dm-tab-active .dm-workspace{grid-row:2 / 3;padding-bottom:max(4px,env(safe-area-inset-bottom))}
  body.mobile-keyboard-open .workspace.dm-tab-active .chat-tabs{grid-row:3}
}
@media(max-width:380px){
  body.mobile-keyboard-open .workspace{grid-template-rows:48px minmax(0,1fr) auto auto}
  body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:48px minmax(0,1fr) auto}
}

/* =========================================================
   COM2 Chat v4.22.37 — Unified Graphite Canvas / Room-DM Dock Parity
   Approved direction: classic xat interaction, modern COM2 surfaces.
   This pass fixes room/DM structural parity and keeps the UI lightweight.
   ========================================================= */
:root{
  --bg:#0b1018;
  --panel:#101720;
  --panel-2:#151e29;
  --panel-3:#1a2532;
  --text:#f3f5f7;
  --muted:#919baa;
  --line:#27313e;
  --line-strong:#354151;
  --com2-shell:#0d141e;
  --com2-top:#101720;
  --com2-canvas:#131c27;
  --com2-canvas-hover:#182330;
  --com2-dock:#101821;
  --com2-tab:#151e29;
  --com2-tab-active:#1d2936;
  --com2-input:#151e2a;
  --com2-room-gutter:18px;
}
html[data-theme="light"]{
  --bg:#edf1f5;
  --panel:#f7f9fb;
  --panel-2:#f1f4f7;
  --panel-3:#e9eef3;
  --text:#1b2430;
  --muted:#6f7a88;
  --line:#d6dde5;
  --line-strong:#c4ced9;
  --com2-shell:#eef2f6;
  --com2-top:#f8fafc;
  --com2-canvas:#f4f6f8;
  --com2-canvas-hover:#e9eef3;
  --com2-dock:#eef2f6;
  --com2-tab:#e7ecf1;
  --com2-tab-active:#ffffff;
  --com2-input:#ffffff;
}

/* Unified application palette. Keep expensive blur effects disabled. */
html,body{
  background:
    radial-gradient(circle at 72% -14%,rgba(var(--accent-rgb),.06),transparent 32%),
    var(--bg);
}
.app-shell{background:var(--com2-shell)}
.sidebar,.rightbar{
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,transparent),color-mix(in srgb,var(--panel-2) 94%,transparent));
  border-color:var(--line);
}
.workspace{background:var(--com2-shell)}
.topbar{
  background:var(--com2-top);
  border-bottom-color:var(--line);
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.searchbox,.icon-btn,.my-card,.room-card{background-color:var(--panel-2)}
.searchbox{border-color:var(--line)}

/* The right column follows the approved mockup: room info sits below the member list,
   not pinned to the bottom of a mostly empty sidebar. */
.member-scroll{
  flex:0 1 auto;
  max-height:calc(100dvh - 300px);
}
.room-card{margin-top:10px}

/* Announcement + chat card share one horizontal rhythm. */
.announcement{
  margin:12px var(--com2-room-gutter) 10px;
  padding:8px 12px;
  border-radius:11px;
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,var(--panel-2)),color-mix(in srgb,var(--accent) 2%,var(--panel-2)));
  box-shadow:none;
}

/* Room canvas + tabs form one framed chat surface. */
#chatStream{
  margin:0 var(--com2-room-gutter);
  padding:8px 14px 12px;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--com2-canvas) 97%,var(--panel) 3%),var(--com2-canvas));
  scrollbar-color:var(--line-strong) transparent;
}
#chatStream .message{border-bottom-color:color-mix(in srgb,var(--line) 54%,transparent)!important}
#chatStream .message:hover{background:color-mix(in srgb,var(--com2-canvas-hover) 66%,transparent)!important}

.chat-tabs.chat-tabs-bottom{
  min-height:38px;
  align-items:flex-end;
  gap:4px;
  margin:0 var(--com2-room-gutter);
  padding:5px 7px 0;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 10px 10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--com2-dock) 96%,var(--panel) 4%),var(--com2-dock));
  overflow:hidden;
}
.chat-tabs-bottom .chat-tab{
  position:relative;
  flex:0 0 auto;
  min-width:112px;
  max-width:170px;
  height:31px;
  gap:7px;
  padding:0 10px;
  border:1px solid var(--line);
  border-bottom-color:color-mix(in srgb,var(--line-strong) 78%,transparent);
  border-radius:8px 8px 0 0;
  background:var(--com2-tab);
  color:color-mix(in srgb,var(--text) 66%,var(--muted));
  box-shadow:none;
  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease;
}
.chat-tabs-bottom .chat-tab:first-child{border-left-color:var(--line)}
.chat-tabs-bottom .chat-tab:hover{
  border-color:color-mix(in srgb,var(--accent) 24%,var(--line-strong));
  background:color-mix(in srgb,var(--com2-tab) 88%,var(--text) 4%);
  color:var(--text);
}
.chat-tabs-bottom .chat-tab.active{
  border-color:color-mix(in srgb,var(--accent) 36%,var(--line-strong));
  background:var(--com2-tab-active);
  color:var(--text);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.chat-tabs-bottom .chat-tab b{
  min-width:0;
  max-width:108px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  font-weight:800;
}
.chat-tabs-bottom .chat-tab::before{content:none}
.chat-tabs-bottom .chat-tab-room-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));
  border-radius:6px;
  background:color-mix(in srgb,var(--accent) 11%,var(--panel-3));
  color:var(--accent);
  font-size:7.5px;
  font-weight:900;
  line-height:1;
}
.chat-tabs-bottom .chat-tab-unread{margin-left:auto;flex:0 0 auto}
.dm-tab-list{gap:4px;align-items:flex-end}
.dm-tab-shell{height:31px;align-items:stretch}
.dm-chat-tab{height:31px;padding-right:28px}
.dm-tab-avatar{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  flex:0 0 18px!important;
  border-width:1px!important;
  border-radius:50%!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--line-strong) 68%,transparent)!important;
  font-size:6px!important;
  overflow:hidden!important;
}
.dm-tab-avatar .presence,.dm-tab-avatar .ability-accessory,.dm-tab-avatar .ability-user-symbol{display:none!important}
.dm-tab-close{
  right:5px;
  width:17px;
  height:17px;
  border-radius:5px;
  color:color-mix(in srgb,var(--text) 45%,var(--muted));
}
.dm-tab-close:hover{background:rgba(255,255,255,.065);color:var(--text)}
.dm-tab-shell.has-unread .dm-chat-tab{
  border-color:color-mix(in srgb,var(--accent) 38%,var(--line-strong));
  background:color-mix(in srgb,var(--com2-tab) 86%,var(--accent) 14%);
  color:var(--text);
}
.dm-tab-shell.has-unread .dm-chat-tab.active{background:var(--com2-tab-active)}

/* Room composer is a separate low-profile dock under the room/DM tabs. */
#roomComposerWrap{
  margin:8px var(--com2-room-gutter) 12px;
  padding:0;
  background:transparent;
}
#roomComposerWrap .composer{
  border-color:var(--line-strong);
  border-radius:13px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--com2-input) 98%,transparent),color-mix(in srgb,var(--panel) 94%,transparent));
  box-shadow:0 7px 20px rgba(0,0,0,.10);
}
#roomComposerWrap .composer-tools button{background:var(--panel-3)}

/* DM now uses the exact same vertical order as the room:
   conversation canvas -> room/DM tabs -> composer. */
.dm-workspace{
  grid-row:2 / 4;
  min-width:0;
  min-height:0;
  margin:12px var(--com2-room-gutter) 0;
  padding:0;
  overflow:hidden;
  background:transparent;
}
.dm-workspace:not([hidden]){display:flex;flex-direction:column}
.dm-workspace[hidden]{display:none!important}
.dm-dock-conversation{
  flex:1;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--com2-canvas) 97%,var(--panel) 3%),var(--com2-canvas));
  overflow:hidden;
  box-shadow:none;
}
.dm-dock-conversation[hidden]{display:none!important}
.dm-dock-head{
  min-height:52px;
  padding:8px max(12px,calc((100% - 940px)/2));
  border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent);
  background:color-mix(in srgb,var(--com2-canvas) 82%,var(--panel) 18%);
}
.dm-dock-head>.avatar{width:31px;height:31px}
.dm-dock-head b{font-size:10px}.dm-dock-head small{font-size:8px}
.dm-dock-head .mini{padding:6px 8px;background:var(--panel-3)}
.dm-dock-messages{
  padding:12px max(12px,calc((100% - 940px)/2)) 14px;
  gap:6px;
  background:transparent;
  scrollbar-color:var(--line-strong) transparent;
}
.dm-dock-messages .dm-message{margin:0}
.dm-dock-messages .dm-bubble{
  max-width:min(68%,560px);
  padding:8px 10px;
  border-color:var(--line);
  border-radius:11px 11px 11px 4px;
  background:var(--panel-3);
  box-shadow:none;
}
.dm-dock-messages .dm-message.mine .dm-bubble{
  border-color:color-mix(in srgb,var(--accent) 34%,var(--line));
  border-radius:11px 11px 4px 11px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,var(--panel-3)),color-mix(in srgb,var(--accent) 6%,var(--panel-3)));
}
.dm-dock-messages .dm-bubble p{font-size:10.5px;line-height:1.45}

.dm-composer-host{
  grid-row:5;
  min-width:0;
  margin:8px var(--com2-room-gutter) 12px;
  padding:0;
  background:transparent;
}
.dm-composer-host[hidden]{display:none!important}
.dm-dock-composer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:7px;
  border:1px solid var(--line-strong);
  border-radius:13px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--com2-input) 98%,transparent),color-mix(in srgb,var(--panel) 94%,transparent));
  box-shadow:0 7px 20px rgba(0,0,0,.10);
}
.dm-dock-composer[hidden]{display:none!important}
.dm-dock-composer textarea{
  min-height:40px;
  max-height:90px;
  border:0;
  background:transparent;
  padding:10px 11px;
  box-shadow:none!important;
}
.dm-dock-composer textarea:focus{border:0;box-shadow:none!important}
.dm-dock-composer button.primary{
  min-width:68px;
  border-color:rgba(var(--accent-rgb),.52);
  box-shadow:0 6px 16px rgba(var(--accent-rgb),.15);
}

/* Drawers/cards inherit the same palette without flattening hierarchy. */
.social-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 99%,transparent),color-mix(in srgb,var(--panel-2) 97%,transparent))}
.social-profile-card,.social-section,.conversation-row,.notification-row,.account-card,.progress-card{background-color:var(--panel-2)}

@media(max-width:940px){
  .member-scroll{flex:1 1 auto;max-height:none}
}

@media(max-width:720px){
  :root{--com2-room-gutter:8px}
  .announcement{margin:7px var(--com2-room-gutter) 6px;padding:7px 9px;border-radius:9px}
  #chatStream{padding:7px 8px 9px;border-radius:9px 9px 0 0}
  .chat-tabs.chat-tabs-bottom{min-height:35px;padding:4px 5px 0;gap:3px;border-radius:0 0 9px 9px}
  .chat-tabs-bottom .chat-tab{min-width:102px;max-width:142px;height:29px;padding:0 7px;gap:6px}
  .chat-tabs-bottom .chat-tab b{max-width:82px;font-size:8.5px}
  .chat-tabs-bottom .chat-tab-room-icon,.dm-tab-avatar{width:17px!important;height:17px!important;min-width:17px!important;flex-basis:17px!important}
  .dm-tab-shell,.dm-chat-tab{height:29px}.dm-chat-tab{padding-right:25px}.dm-tab-close{right:4px;width:16px;height:16px}
  #roomComposerWrap{margin:6px var(--com2-room-gutter) max(8px,env(safe-area-inset-bottom))}
  .dm-workspace{grid-row:2 / 4;margin:7px var(--com2-room-gutter) 0}
  .dm-dock-conversation{border-radius:9px 9px 0 0}
  .dm-dock-head{min-height:46px;padding:7px 8px}
  .dm-dock-messages{padding:9px 8px 10px;gap:5px}
  .dm-dock-messages .dm-bubble{max-width:86%;padding:8px 9px}
  .dm-composer-host{margin:6px var(--com2-room-gutter) max(8px,env(safe-area-inset-bottom))}
  .dm-dock-composer{padding:6px;border-radius:12px}
  .dm-dock-composer textarea{min-height:38px;padding:9px}
}

@media(max-width:720px){
  body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:52px minmax(0,1fr) auto auto}
  body.mobile-keyboard-open .workspace.dm-tab-active .dm-workspace{grid-row:2 / 3;margin-top:4px;padding-bottom:0}
  body.mobile-keyboard-open .workspace.dm-tab-active .chat-tabs{grid-row:3}
  body.mobile-keyboard-open .workspace.dm-tab-active .dm-composer-host{grid-row:4;margin-top:5px}
  body.mobile-keyboard-open .dm-dock-head{display:none}
}
@media(max-width:380px){
  .chat-tabs-bottom .chat-tab{min-width:96px;max-width:128px}
  .chat-tabs-bottom .chat-tab b{max-width:70px}
  body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:48px minmax(0,1fr) auto auto}
}


/* v4.22.38 — DM uses the same visual message language as room chat. */
.dm-dock-conversation{border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 96%,var(--accent) 4%),color-mix(in srgb,var(--panel) 98%,#000 2%));}
.dm-dock-head{padding:10px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 92%,transparent),color-mix(in srgb,var(--panel) 90%,transparent));}
.dm-dock-head>.avatar{width:34px;height:34px}
.dm-dock-messages{padding:14px 18px 12px;display:block;overflow:auto;background:linear-gradient(180deg,rgba(var(--accent-rgb),.02),transparent 26%)}
.dm-dock-messages .message{max-width:840px;margin:0 0 14px;}
.dm-dock-messages .message:last-child{margin-bottom:0}
.dm-dock-messages .dm-chat-message.is-self .bubble{border-color:rgba(var(--accent-rgb),.30);background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 88%,var(--accent) 12%),color-mix(in srgb,var(--panel) 92%,var(--accent) 8%));}
.dm-dock-messages .dm-chat-message .dots{opacity:.45;pointer-events:none}
.dm-dock-messages .dm-chat-message .message-head{margin-bottom:7px}
.dm-dock-messages .dm-chat-message .message-head strong{font-size:12px}
.dm-dock-composer{padding:10px 12px 12px;border-top:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,transparent),var(--panel));display:flex;align-items:flex-end;gap:10px}
.dm-dock-composer textarea{flex:1;min-height:42px;max-height:92px;border:1px solid var(--line-strong);background:linear-gradient(145deg,var(--panel-2),var(--panel));border-radius:14px;padding:11px 12px;color:var(--text);outline:none;resize:none}
.dm-dock-composer textarea:focus{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)!important}
.dm-dock-composer button.primary{height:42px;min-width:66px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;border:0;box-shadow:0 8px 22px rgba(var(--accent-rgb),.22)}
.dm-dock-composer button.primary:hover{filter:brightness(1.04)}
.ability-frame-violet,.ability-frame-ocean,.ability-frame-emerald,.ability-frame-gold,.ability-frame-rose{outline:1px solid rgba(255,255,255,.18);outline-offset:2px}
.ability-frame-violet{box-shadow:0 0 0 2px #8b5cf6,0 0 0 4px rgba(139,92,246,.18),0 0 20px rgba(139,92,246,.38)!important}
.ability-frame-ocean{box-shadow:0 0 0 2px #27a7ff,0 0 0 4px rgba(39,167,255,.18),0 0 20px rgba(39,167,255,.38)!important}
.ability-frame-emerald{box-shadow:0 0 0 2px #23d59b,0 0 0 4px rgba(35,213,155,.18),0 0 20px rgba(35,213,155,.38)!important}
.ability-frame-gold{box-shadow:0 0 0 2px #f5c451,0 0 0 4px rgba(245,196,81,.18),0 0 20px rgba(245,196,81,.38)!important}
.ability-frame-rose{box-shadow:0 0 0 2px #ff5f91,0 0 0 4px rgba(255,95,145,.18),0 0 20px rgba(255,95,145,.38)!important}
@media (max-width: 720px){
  .dm-dock-messages{padding:10px 10px 8px}
  .dm-dock-messages .message{margin-bottom:12px}
  .dm-dock-composer{padding:8px}
  .dm-dock-composer textarea{min-height:40px}
}



/* =========================================================
   COM2 Chat v4.22.39 — TRUE Room/DM renderer parity
   DM no longer has its own bubble language. Both surfaces use .message/.bubble.
   Avatar Frame is a real overlay layer and is visible inside room messages too.
   ========================================================= */

/* A real frame layer instead of relying only on a subtle box-shadow. */
.avatar{isolation:isolate;overflow:visible}
.avatar>.ability-avatar-frame{
  position:absolute;
  inset:-4px;
  z-index:3;
  display:block;
  border:2px solid var(--ability-avatar-frame-color,#8b5cf6);
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.20),0 0 15px var(--ability-avatar-frame-glow,rgba(139,92,246,.58));
}
.avatar>.ability-avatar-frame-violet{--ability-avatar-frame-color:#8b5cf6;--ability-avatar-frame-glow:rgba(139,92,246,.62)}
.avatar>.ability-avatar-frame-ocean{--ability-avatar-frame-color:#27a7ff;--ability-avatar-frame-glow:rgba(39,167,255,.62)}
.avatar>.ability-avatar-frame-emerald{--ability-avatar-frame-color:#23d59b;--ability-avatar-frame-glow:rgba(35,213,155,.60)}
.avatar>.ability-avatar-frame-gold{--ability-avatar-frame-color:#f5c451;--ability-avatar-frame-glow:rgba(245,196,81,.62)}
.avatar>.ability-avatar-frame-rose{--ability-avatar-frame-color:#ff5f91;--ability-avatar-frame-glow:rgba(255,95,145,.62)}
.avatar>.ability-accessory,.avatar>.ability-user-symbol,.avatar>.presence{z-index:4}
.chat-stream .message>.avatar>.ability-avatar-frame{display:block!important}

/* The DM viewport occupies exactly the same center row and gutter as room chat. */
.dm-workspace{
  grid-row:3 / 4!important;
  min-width:0;
  min-height:0;
  margin:0 var(--com2-room-gutter)!important;
  padding:0!important;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--com2-canvas) 97%,var(--panel) 3%),var(--com2-canvas));
  overflow:hidden;
}
.dm-workspace:not([hidden]){display:block!important}
.dm-workspace[hidden]{display:none!important}
.dm-workspace-empty{display:none!important}
.dm-dock-conversation{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:hidden;
}
.dm-dock-conversation[hidden]{display:none!important}

/* Identity is already shown on every message, exactly like the room. */
.dm-dock-head{display:none!important}

/* Same message canvas measurements and no DM-only alignment/bubble styling. */
.dm-dock-messages{
  width:100%;
  height:100%;
  min-height:0;
  overflow:auto;
  display:block!important;
  margin:0!important;
  padding:8px 14px 12px!important;
  background:transparent!important;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
}
.dm-dock-messages .message{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr)!important;
  gap:13px!important;
  margin:0 0 14px!important;
  max-width:840px!important;
  justify-content:initial!important;
}
.dm-dock-messages .message-body{min-width:0}
.dm-dock-messages .message-head{display:flex!important;align-items:center!important;gap:8px!important;margin:2px 0 7px!important}
.dm-dock-messages .message-head strong{font-size:13px!important}
.dm-dock-messages .message-head time{font-size:10px!important;color:var(--muted)!important}
.dm-dock-messages .bubble{
  position:relative!important;
  width:auto!important;
  max-width:none!important;
  border:1px solid var(--line)!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 92%,var(--accent) 8%))!important;
  padding:15px 17px!important;
  box-shadow:0 8px 26px rgba(0,0,0,.08)!important;
}
.dm-dock-messages .bubble p{margin:0!important;font-size:13px!important;line-height:1.65!important;color:color-mix(in srgb,var(--text) 90%,var(--muted))!important}
.dm-dock-messages .dm-chat-message.is-self .bubble,
.dm-dock-messages .dm-message.mine .dm-bubble{border-color:var(--line)!important;background:linear-gradient(145deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 92%,var(--accent) 8%))!important;border-radius:15px!important}
.dm-dock-messages .dm-message,.dm-dock-messages .dm-message.mine{justify-content:initial!important}

/* DM composer uses the same shell language and send button as the room composer. */
.dm-composer-host{grid-row:5!important;margin:8px var(--com2-room-gutter) 12px!important;padding:0!important;background:transparent!important}
.dm-dock-composer.composer{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 11px!important;
  border:1px solid var(--line-strong)!important;
  border-radius:13px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--com2-input) 98%,transparent),color-mix(in srgb,var(--panel) 94%,transparent))!important;
  box-shadow:0 7px 20px rgba(0,0,0,.10)!important;
}
.dm-dock-composer.composer textarea{
  flex:1!important;
  min-width:0!important;
  min-height:38px!important;
  max-height:100px!important;
  resize:none!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:var(--text)!important;
  padding:9px 6px!important;
  box-shadow:none!important;
}
.dm-dock-composer.composer textarea::placeholder{color:var(--muted)}
.dm-dock-composer.composer .send-btn{flex:0 0 44px!important;width:44px!important;height:44px!important;min-width:44px!important;padding:0!important}

/* v4.22.49 — inactive DM composers must never be rendered.
   This intentionally overrides the later parity display:flex!important rule. */
.dm-composer-host > .dm-dock-composer.composer[hidden]{
  display:none!important;
}

@media(max-width:720px){
  .dm-workspace{margin:0 var(--com2-room-gutter)!important;border-radius:9px 9px 0 0}
  .dm-dock-messages{padding:7px 8px 9px!important}
  .dm-dock-messages .message{grid-template-columns:42px minmax(0,1fr)!important;gap:10px!important;margin-bottom:12px!important}
  .dm-composer-host{margin:6px var(--com2-room-gutter) max(8px,env(safe-area-inset-bottom))!important}
  .dm-dock-composer.composer{padding:8px!important}
  body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:52px minmax(0,1fr) auto auto!important}
  body.mobile-keyboard-open .workspace.dm-tab-active .dm-workspace{grid-row:2 / 3!important;margin:0 var(--com2-room-gutter)!important}
  body.mobile-keyboard-open .workspace.dm-tab-active .chat-tabs{grid-row:3!important}
  body.mobile-keyboard-open .workspace.dm-tab-active .dm-composer-host{grid-row:4!important;margin-top:5px!important}
}
@media(max-width:380px){body.mobile-keyboard-open .workspace.dm-tab-active{grid-template-rows:48px minmax(0,1fr) auto auto!important}}


/* v4.22.39 final parity lock — copy the established Clean Classic Chat metrics exactly. */
.dm-dock-messages.chat-stream .message{
  grid-template-columns:38px minmax(0,1fr)!important;
  gap:8px!important;
  padding:6px 8px 7px!important;
  margin:0!important;
  max-width:none!important;
  border-bottom:0!important;
  background:transparent!important;
}
.dm-dock-messages.chat-stream .message:hover{background:color-mix(in srgb,var(--panel-2) 38%,transparent)!important}
.dm-dock-messages.chat-stream .message>.avatar{width:34px!important;height:34px!important;min-width:34px!important;margin-top:1px!important}
.dm-dock-messages.chat-stream .message-head{display:flex!important;align-items:center!important;gap:5px!important;min-height:18px!important;margin:0 0 2px!important}
.dm-dock-messages.chat-stream .message-head>.com2-pawn{width:14px!important;height:18px!important;min-width:14px!important;margin:0!important;transform:none!important}
.dm-dock-messages.chat-stream .message-head strong{max-width:300px!important;font-size:12px!important;line-height:1.2!important}
.dm-dock-messages.chat-stream .message-head time{margin-left:3px!important;font-size:8px!important;line-height:1!important;opacity:.62!important}
.dm-dock-messages.chat-stream .bubble{margin:0 0 0 19px!important;padding:2px 27px 2px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.dm-dock-messages.chat-stream .bubble p{font-size:12px!important;line-height:1.5!important;color:color-mix(in srgb,var(--text) 90%,var(--muted))!important}
.dm-dock-messages.chat-stream .dm-chat-message.is-self .bubble{margin:0 0 0 19px!important;padding:2px 27px 2px 0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
@media(max-width:720px){
  .dm-dock-messages.chat-stream .message{grid-template-columns:34px minmax(0,1fr)!important;gap:7px!important;padding:5px 5px 6px!important}
  .dm-dock-messages.chat-stream .message>.avatar{width:31px!important;height:31px!important;min-width:31px!important}
  .dm-dock-messages.chat-stream .message-head strong{max-width:50vw!important;font-size:11px!important}
  .dm-dock-messages.chat-stream .bubble{margin-left:16px!important}
  .dm-dock-messages.chat-stream .bubble p{font-size:11px!important}
}


/* =========================================================
   COM2 Chat v4.22.40 — Desktop 12px spacing rhythm
   The six marked desktop gaps use the same measurement.
   Mobile/tablet rules remain untouched.
   ========================================================= */
@media (min-width:941px){
  :root{
    --com2-desktop-gap:12px;
    --com2-room-gutter:var(--com2-desktop-gap);
  }

  .announcement{
    margin:var(--com2-desktop-gap) var(--com2-room-gutter) var(--com2-desktop-gap);
  }

  #roomComposerWrap{
    margin:var(--com2-desktop-gap) var(--com2-room-gutter) var(--com2-desktop-gap);
  }

  .dm-composer-host{
    margin:var(--com2-desktop-gap) var(--com2-room-gutter) var(--com2-desktop-gap)!important;
  }

  .dm-workspace{
    margin:0 var(--com2-room-gutter)!important;
  }
}


/* v4.22.42 — Chat identity click affordance. */
.message-profile-trigger{
  cursor:pointer;
  transition:filter .14s ease,opacity .14s ease,transform .14s ease;
}
.message-profile-trigger:hover{filter:brightness(1.10)}
.message-profile-trigger:focus-visible{
  outline:2px solid rgba(var(--accent-rgb),.70);
  outline-offset:3px;
  border-radius:8px;
}
.message-profile-trigger.profile-loading{opacity:.62}
.message-head .ability-name.message-profile-trigger:hover{text-decoration:none!important}


/* =========================================================
   COM2 Chat v4.22.50 — Clean message hover
   Old classic-chat layers added several full-row hover fills.
   Keep actions/click targets, but never paint a wide selected strip.
   ========================================================= */
#chatStream .message:hover,
.dm-dock-messages.chat-stream .message:hover{
  background:transparent!important;
}

/* Hovering identity controls may brighten themselves, not the whole row. */
.chat-stream .message:hover .message-body,
.chat-stream .message:hover .bubble{
  background:transparent!important;
}


/* =========================================================
   COM2 Chat v4.22.51 — Pawn / Nick Baseline + Left Message Alignment
   Visual-only. Room and DM keep the same shared message language.
   ========================================================= */

/* Pawn sits on the nickname baseline instead of feeling like a separate column. */
#chatStream .message-head > .com2-pawn,
.dm-dock-messages.chat-stream .message-head > .com2-pawn{
  width:13px!important;
  height:16px!important;
  min-width:13px!important;
  flex:0 0 13px!important;
  align-self:center!important;
  margin:0!important;
  transform:translateY(-1px)!important;
}

/* Keep pawn → nickname spacing compact and natural. */
#chatStream .message-head,
.dm-dock-messages.chat-stream .message-head{
  gap:4px!important;
}

/* Message body always starts from the same left line.
   No reserved 19px pawn indent: pawn/no-pawn users now feel consistent. */
#chatStream .bubble,
.dm-dock-messages.chat-stream .bubble,
.dm-dock-messages.chat-stream .dm-chat-message.is-self .bubble{
  margin-left:0!important;
}

/* Mobile uses the exact same alignment principle. */
@media(max-width:720px){
  #chatStream .bubble,
  .dm-dock-messages.chat-stream .bubble,
  .dm-dock-messages.chat-stream .dm-chat-message.is-self .bubble{
    margin-left:0!important;
  }
}


/* =========================================================
   COM2 Chat v4.22.52 — Chat Pawn Effect Proportion Pass
   Only pawn visuals inside room/DM message identity rows.
   ========================================================= */

/* Premium/legendary aura must follow the compact 13x16 chat pawn size. */
#chatStream .message-head > .com2-pawn.pawn-premium::before,
.dm-dock-messages.chat-stream .message-head > .com2-pawn.pawn-premium::before{
  inset:5% -24% -14%!important;
  filter:blur(1.7px)!important;
  opacity:.50!important;
}

/* Owner black aura follows the same compact visual envelope. */
#chatStream .message-head > .com2-pawn.pawn-black::before,
.dm-dock-messages.chat-stream .message-head > .com2-pawn.pawn-black::before{
  inset:4% -25% -15%!important;
  filter:blur(1.8px)!important;
  opacity:.72!important;
}

/* Ground ring / aura ellipse was still sized for the old 20–24px pawn. */
#chatStream .message-head > .com2-pawn.pawn-premium::after,
.dm-dock-messages.chat-stream .message-head > .com2-pawn.pawn-premium::after,
#chatStream .message-head > .com2-pawn.pawn-black::after,
.dm-dock-messages.chat-stream .message-head > .com2-pawn.pawn-black::after{
  width:14px!important;
  height:4px!important;
  bottom:-2px!important;
  border-width:1px!important;
  transform:translateX(-50%) scale(.74)!important;
  box-shadow:0 0 3px var(--pawn-glow-soft,rgba(150,120,255,.22))!important;
}

/* Premium role-dot stays readable without looking larger than the pawn. */
#chatStream .message-head > .com2-pawn .pawn-role,
.dm-dock-messages.chat-stream .message-head > .com2-pawn .pawn-role{
  width:4px!important;
  height:4px!important;
  right:-2px!important;
  bottom:0!important;
  border-width:1px!important;
  box-shadow:0 1px 2px rgba(0,0,0,.45)!important;
}

/* Hats/accessories previously kept their 31–42px editor/live dimensions.
   Scale the whole accessory artwork relative to the compact chat pawn.
   bottom positioning keeps all Hat 1 / Hat 2 styles on one consistent anchor. */
#chatStream .message-head > .com2-pawn > .pawn-hat,
.dm-dock-messages.chat-stream .message-head > .com2-pawn > .pawn-hat{
  top:auto!important;
  bottom:10px!important;
  transform:translateX(-50%) scale(.52)!important;
  transform-origin:50% 100%!important;
}

/* Reduce glow footprint on premium pawn artwork in message rows only. */
#chatStream .message-head > .com2-pawn.pawn-premium .pawn-art,
.dm-dock-messages.chat-stream .message-head > .com2-pawn.pawn-premium .pawn-art{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.40)) drop-shadow(0 0 2.5px var(--pawn-glow))!important;
}
#chatStream .message-head > .com2-pawn.pawn-black .pawn-art,
.dm-dock-messages.chat-stream .message-head > .com2-pawn.pawn-black .pawn-art{
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.50)) drop-shadow(0 0 2.5px rgba(230,235,246,.52)) drop-shadow(0 0 4px rgba(124,82,255,.22))!important;
}

/* Legendary collection pieces used slightly stronger aura geometry.
   Normalize it in chat without changing their store/profile appearance. */
#chatStream .message-head > .com2-pawn:is(.pawn-obsidian,.pawn-ruby,.pawn-celestial,.pawn-amethyst,.pawn-sapphire,.pawn-rose)::before,
.dm-dock-messages.chat-stream .message-head > .com2-pawn:is(.pawn-obsidian,.pawn-ruby,.pawn-celestial,.pawn-amethyst,.pawn-sapphire,.pawn-rose)::before{
  inset:3% -27% -16%!important;
  filter:blur(1.8px)!important;
  opacity:.66!important;
}
#chatStream .message-head > .com2-pawn:is(.pawn-obsidian,.pawn-ruby,.pawn-celestial,.pawn-amethyst,.pawn-sapphire,.pawn-rose)::after,
.dm-dock-messages.chat-stream .message-head > .com2-pawn:is(.pawn-obsidian,.pawn-ruby,.pawn-celestial,.pawn-amethyst,.pawn-sapphire,.pawn-rose)::after{
  width:15px!important;
  height:4px!important;
  bottom:-2px!important;
  transform:translateX(-50%) scale(.74)!important;
  opacity:.34!important;
}

/* Mobile keeps the same proportions, only slightly tighter. */
@media(max-width:720px){
  #chatStream .message-head > .com2-pawn > .pawn-hat,
  .dm-dock-messages.chat-stream .message-head > .com2-pawn > .pawn-hat{
    bottom:10px!important;
    transform:translateX(-50%) scale(.49)!important;
  }
}


/* =========================================================
   COM2 Chat v4.22.53 — Mobile Hold Zoom + Message Hold Quote
   ========================================================= */

/* Do not allow native text-selection/context visuals while a hold is pending. */
.chat-stream .message.mobile-hold-pending{
  -webkit-user-select:none;
  user-select:none;
}

/* Touch Zoom mirrors the existing 4x desktop Zoom Power, but only while held. */
@media (hover:none), (pointer:coarse){
  .chat-stream .message{
    position:relative;
  }

  .chat-stream .message.mobile-avatar-zoom-row{
    z-index:500!important;
  }

  .chat-stream .message > .avatar.mobile-avatar-zoom-active{
    z-index:510!important;
    isolation:isolate;
  }

  .chat-stream .message > .avatar.mobile-avatar-zoom-active > img{
    position:relative!important;
    z-index:520!important;
    will-change:transform;
    transform-origin:var(--avatar-zoom-origin-x,left) var(--avatar-zoom-origin-y,top)!important;
    transform:scale(4)!important;
    border-radius:4px!important;
    box-shadow:0 8px 24px rgba(0,0,0,.46)!important;
    transition:transform .10s ease,border-radius .10s ease,box-shadow .10s ease!important;
  }

  .chat-stream .message > .avatar.mobile-avatar-zoom-active > .presence{
    opacity:0!important;
  }

  .chat-stream .message.mobile-avatar-zoom-row .message-body{
    position:relative;
    z-index:1;
  }
}


/* =========================================================
   COM2 Chat v4.22.54 — Mobile Message Long-Press Menu
   ========================================================= */
@media (hover:none), (pointer:coarse){
  /* Copy is provided by COM2's own long-press menu. Prevent browser text
     selection / iOS callout from fighting with the gesture. */
  .chat-stream .message,
  .chat-stream .message *{
    -webkit-user-select:none!important;
    user-select:none!important;
    -webkit-touch-callout:none!important;
  }
}

.mobile-message-menu{
  position:fixed;
  z-index:2600;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel-2) 96%,#000 4%);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  transform:translateY(-50%);
  touch-action:manipulation;
}

.mobile-message-menu-item{
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel-3);
  color:var(--text);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
}

.mobile-message-menu-item.primary{
  border-color:rgba(var(--accent-rgb),.38);
  background:rgba(var(--accent-rgb),.14);
  color:var(--accent);
}

.mobile-message-menu-item:active{
  transform:scale(.97);
}

@media(min-width:941px) and (hover:hover){
  .mobile-message-menu{display:none!important}
}


/* =========================================================
   COM2 Chat v4.22.56 — Classic room system-event rows
   Thin, non-bubble events: old xat room feel in COM2 language.
   ========================================================= */
.room-system-event{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:22px;
  margin:2px 0 7px 61px;
  max-width:780px;
  color:var(--muted);
  font-size:10px;
  line-height:1.35;
  user-select:none;
  pointer-events:none;
}
.room-system-icon{
  width:14px;
  height:14px;
  flex:0 0 14px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:color-mix(in srgb,var(--panel-3) 88%,transparent);
  font-size:8px;
  font-weight:900;
}
.room-system-text{font-weight:650;letter-spacing:.005em}
.room-system-event time{margin-left:2px;color:color-mix(in srgb,var(--muted) 72%,transparent);font-size:8px}
.room-system-event.tone-join .room-system-icon{color:var(--success);border-color:color-mix(in srgb,var(--success) 34%,var(--line));background:color-mix(in srgb,var(--success) 8%,var(--panel-3))}
.room-system-event.tone-member .room-system-icon,.room-system-event.tone-role .room-system-icon{color:var(--accent);border-color:rgba(var(--accent-rgb),.30);background:rgba(var(--accent-rgb),.08)}
.room-system-event.tone-role .room-system-text{color:color-mix(in srgb,var(--text) 80%,var(--accent) 20%)}
.room-system-event.tone-moderation .room-system-icon{color:#f4c66a;border-color:rgba(244,198,106,.28);background:rgba(244,198,106,.07)}
.room-system-event.tone-danger .room-system-icon{color:#ff7280;border-color:rgba(255,114,128,.30);background:rgba(255,114,128,.08)}
.room-system-event.tone-danger .room-system-text{color:color-mix(in srgb,var(--text) 76%,#ff7280 24%)}
@media(max-width:720px){
  .room-system-event{margin-left:51px;margin-right:8px;font-size:9.5px;gap:6px}
  .room-system-event time{font-size:7.5px}
}


/* =========================================================
   COM2 Chat v4.22.57 — Rightbar Users / Friends
   Classic xat-inspired friend list lives beside room users.
   ========================================================= */

.rightbar-head{
  flex:0 0 auto;
  gap:7px!important;
  padding:4px 1px 9px!important;
}

.rightbar-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  flex:1;
  min-width:0;
  padding:3px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-2);
}

.rightbar-tab{
  min-width:0;
  height:31px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  font-size:9.5px;
  font-weight:800;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}

.rightbar-tab:hover{
  color:var(--text);
  background:color-mix(in srgb,var(--panel-3) 86%,var(--accent) 14%);
}

.rightbar-tab.active{
  color:var(--text);
  border-color:rgba(var(--accent-rgb),.28);
  background:linear-gradient(135deg,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),.06));
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}

.rightbar-head .rightbar-tab > b,
.rightbar-head .rightbar-tab > span{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  font-size:inherit!important;
  line-height:1!important;
}

.rightbar-head .rightbar-tab > b{
  min-width:16px;
  height:16px;
  display:inline-grid;
  place-items:center;
  padding:0 4px!important;
  border-radius:999px!important;
  background:var(--panel-3)!important;
  color:var(--muted)!important;
  font-size:8px!important;
  font-weight:800;
}

.rightbar-head .rightbar-tab.active > b{
  background:rgba(var(--accent-rgb),.16)!important;
  color:var(--accent)!important;
}

.rightbar-head .rightbar-tab > .rightbar-tab-badge{
  background:rgba(var(--accent-rgb),.18)!important;
  color:var(--accent)!important;
}

.rightbar-head .rightbar-tab > .rightbar-tab-badge[hidden]{
  display:none!important;
}

.rightbar-close{
  flex:0 0 auto;
}

.rightbar-pane{
  min-height:0;
  flex:1 1 auto;
}

.rightbar-pane.active{
  display:flex;
  flex-direction:column;
}

.rightbar-pane[hidden]{
  display:none!important;
}

#rightUsersPane .member-scroll{
  flex:1 1 auto;
}

.right-friends-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:1px 2px 4px 0;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}

.right-friends-loading,
.right-friends-error{
  margin:10px 3px;
  padding:14px 10px;
  border:1px dashed var(--line);
  border-radius:10px;
  color:var(--muted);
  font-size:9px;
  line-height:1.5;
  text-align:center;
}

.right-friends-error{
  color:#ff7885;
  border-color:rgba(255,90,105,.24);
}

.right-friends-summary{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 5px;
  padding:8px 6px 9px;
  border-bottom:1px solid var(--line);
  background:color-mix(in srgb,var(--panel) 94%,transparent);
}

.right-friends-summary .grow{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.right-friends-summary strong{
  font-size:10px;
}

.right-friends-summary small{
  font-size:8px;
}

.right-friends-manage{
  flex:0 0 auto;
  min-height:27px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--panel-3);
  color:var(--muted);
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}

.right-friends-manage:hover{
  border-color:rgba(var(--accent-rgb),.34);
  color:var(--text);
}

.right-friends-section{
  padding:6px 0 8px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent);
}

.right-friends-section:last-child{
  border-bottom:0;
}

.right-friends-section > h3{
  margin:0 6px 5px;
  color:var(--muted);
  font-size:8px;
  line-height:1.2;
  letter-spacing:.075em;
  font-weight:800;
}

.right-friends-section > h3 small{
  font-size:8px;
  letter-spacing:0;
  font-weight:600;
  opacity:.72;
}

.right-friend-row,
.right-friend-request{
  width:100%;
  min-height:39px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text);
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  padding:4px 5px;
  text-align:left;
}

.right-friend-row{
  cursor:pointer;
  transition:background .14s ease;
}

.right-friend-row:hover,
.right-friend-row:focus-visible{
  outline:none;
  background:color-mix(in srgb,var(--panel-2) 86%,var(--accent) 14%);
}

.right-friend-row > .avatar.small,
.right-friend-request > .avatar.small{
  width:29px;
  height:29px;
  font-size:8px;
}

.right-friend-row .avatar .presence{
  width:8px;
  height:8px;
  border-width:1.5px;
}

.right-friend-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.right-friend-copy b{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  line-height:1.2;
}

.right-friend-copy small{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:7.5px;
  line-height:1.3;
}

.right-friend-go{
  color:var(--muted);
  font-size:15px;
  padding-right:2px;
}

.friend-presence.online{
  color:var(--success)!important;
}

.friend-presence.away{
  color:#e4b64c!important;
}

.friend-presence.offline{
  color:var(--muted)!important;
}

.right-friend-request{
  background:color-mix(in srgb,var(--panel-2) 92%,var(--accent) 8%);
  margin:2px 0;
}

.right-friend-request-actions{
  display:flex;
  align-items:center;
  gap:4px;
}

.right-friend-request-actions button{
  width:25px;
  height:25px;
  border-radius:7px;
  border:1px solid var(--line);
  background:var(--panel-3);
  color:var(--muted);
  font-weight:900;
  cursor:pointer;
}

.right-friend-request-actions .accept{
  border-color:rgba(33,208,139,.28);
  color:var(--success);
}

.right-friend-request-actions .decline{
  color:#ff7885;
}

.right-friends-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:7px;
  padding:24px 12px;
  color:var(--muted);
}

.right-friends-empty.compact{
  padding:18px 10px;
}

.right-friends-empty-icon{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(var(--accent-rgb),.25);
  background:rgba(var(--accent-rgb),.08);
  color:var(--accent);
  font-size:17px;
}

.right-friends-empty b{
  color:var(--text);
  font-size:10px;
}

.right-friends-empty p{
  margin:0;
  max-width:210px;
  font-size:8px;
  line-height:1.55;
}

.right-friends-empty .primary{
  min-height:30px;
  padding:0 11px;
  font-size:8px;
}

/* Room information is part of the Users pane only. */
.rightbar.friends-active .room-card{
  display:none!important;
}

@media(max-width:940px){
  .rightbar-tabs{margin-right:2px}
}

@media(max-width:720px){
  .rightbar-head{padding-bottom:8px!important}
  .rightbar-tab{height:33px;font-size:10px}
  .right-friend-row,.right-friend-request{min-height:42px;padding-block:5px}
  .right-friend-copy b{font-size:10.5px}
  .right-friend-copy small{font-size:8px}
}


/* =========================================================
   COM2 Chat v4.22.60 — Compact Navigation / Left Panel Removal
   Left rail is removed from the desktop layout.
   The old sidebar becomes a profile-driven overlay menu.
   ========================================================= */

:root{
  --sidebar:0px;
}

.app-shell{
  grid-template-columns:minmax(0,1fr) var(--rightbar)!important;
}

.app-shell > .sidebar{
  position:fixed!important;
  top:82px;
  right:18px;
  left:auto!important;
  width:min(340px,calc(100vw - 24px));
  height:auto;
  max-height:calc(100dvh - 98px);
  padding:18px 16px 16px!important;
  border:1px solid var(--line)!important;
  border-radius:20px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,transparent),color-mix(in srgb,var(--panel) 92%,transparent))!important;
  box-shadow:0 28px 80px rgba(0,0,0,.42)!important;
  transform:translateY(14px) scale(.985);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .18s ease,opacity .18s ease,visibility .18s ease;
  z-index:1350;
}

.app-shell > .sidebar.open{
  transform:translateY(0) scale(1);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.sidebar-close{
  display:inline-grid!important;
  margin-left:auto;
}

.sidebar .brand{
  padding:2px 4px 10px;
}

.sidebar .main-nav{
  gap:6px;
}

.sidebar .plus-promo{
  margin-top:4px;
}

.workspace{
  min-width:0;
}

.topbar{
  gap:12px;
  padding-inline:18px;
}

.search-wrap{
  flex:1 1 auto;
  min-width:0;
}

.top-actions{
  flex:0 0 auto;
  min-width:0;
  gap:8px;
}

.profile-menu-trigger{
  min-width:0;
  max-width:220px;
  height:42px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 10px 0 6px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 96%,transparent),color-mix(in srgb,var(--panel-3) 92%,transparent));
  color:var(--text);
  cursor:pointer;
}

.profile-menu-trigger:hover{
  border-color:rgba(var(--accent-rgb),.45);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.04));
}

.profile-menu-trigger-avatar{
  width:30px!important;
  height:30px!important;
  min-width:30px;
  box-shadow:none!important;
}

.profile-menu-trigger-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}

.profile-menu-trigger-copy strong,
.profile-menu-trigger-copy small{
  max-width:130px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.profile-menu-trigger-copy strong{
  font-size:12px;
}

.profile-menu-trigger-copy small{
  font-size:10px;
  color:var(--muted);
}

.members-toggle{
  display:none!important;
}

@media(min-width:941px){
  .app-shell{
    grid-template-columns:minmax(0,1fr) var(--rightbar)!important;
  }

  .workspace{
    border-right:1px solid var(--line)!important;
    background:linear-gradient(180deg,rgba(var(--accent-rgb),.02),transparent 26%)!important;
  }

  .rightbar{
    padding:16px 14px 14px!important;
    border-left:1px solid var(--line)!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel) 88%,transparent))!important;
    box-shadow:none!important;
  }

  .rightbar-head{
    min-height:auto!important;
    flex:0 0 auto!important;
    margin:0 0 12px!important;
    padding:0!important;
    border-bottom:0!important;
    background:transparent!important;
  }

  .rightbar-tabs{
    margin:0!important;
    padding:4px!important;
    height:auto!important;
    border:1px solid var(--line)!important;
    border-radius:14px!important;
    background:var(--panel-2)!important;
  }

  .rightbar-tab{
    height:38px!important;
    border-radius:10px!important;
  }

  .rightbar-pane{
    padding:0!important;
    background:transparent!important;
  }

  .rightbar-close{
    display:none!important;
  }

  #rightUsersPane .room-card{
    margin:12px 0 0!important;
    padding:12px!important;
    border:1px solid var(--line)!important;
    border-radius:16px!important;
    background:var(--panel-2)!important;
    box-shadow:none!important;
  }
}

.mobile-bottom-nav{
  display:none;
}

.mobile-bottom-nav-item{
  appearance:none;
  border:0;
  background:transparent;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  position:relative;
  cursor:pointer;
}

.mobile-bottom-nav-item span{
  font-size:15px;
  line-height:1;
}

.mobile-bottom-nav-item b{
  font-size:10px;
  font-weight:700;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mobile-bottom-nav-item em{
  position:absolute;
  top:4px;
  right:18%;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:9px;
  font-style:normal;
  font-weight:800;
}

.mobile-bottom-nav-item.active{
  color:var(--accent);
}

.mobile-bottom-nav-item.active span{
  transform:translateY(-1px);
}

@media(min-width:721px) and (max-width:940px){
  .members-toggle{
    display:inline-grid!important;
  }
}

@media(max-width:940px){
  .app-shell{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .app-shell > .sidebar{
    top:10px;
    right:10px;
    width:min(360px,calc(100vw - 20px));
    max-height:calc(100dvh - 20px);
  }

  .profile-menu-trigger{
    max-width:182px;
  }

  .rightbar{
    background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,transparent),color-mix(in srgb,var(--panel) 94%,transparent))!important;
  }
}

@media(max-width:720px){
  .topbar{
    padding-inline:10px;
    gap:8px;
  }

  .searchbox{
    height:40px;
    padding-inline:10px;
  }

  .searchbox kbd,
  .profile-menu-trigger-copy,
  .top-actions .top-action-quick{
    display:none;
  }

  .top-actions{
    gap:6px;
  }

  .profile-menu-trigger{
    width:40px;
    min-width:40px;
    height:40px;
    padding:0;
    justify-content:center;
    border-radius:12px;
  }

  .profile-menu-trigger-avatar{
    width:26px!important;
    height:26px!important;
    min-width:26px;
  }

  .app-shell > .sidebar{
    top:10px;
    right:10px;
    left:10px!important;
    width:auto;
    max-height:calc(100dvh - 20px);
    border-radius:18px;
  }

  .workspace{
    grid-template-rows:58px auto minmax(0,1fr) auto auto auto!important;
  }

  .mobile-bottom-nav{
    grid-row:6;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:2px;
    align-items:stretch;
    padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border-top:1px solid var(--line);
    background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 94%,transparent),color-mix(in srgb,var(--panel-2) 98%,transparent));
  }

  .chat-new-indicator{
    bottom:176px!important;
  }

  body.mobile-keyboard-open .mobile-bottom-nav{
    display:none!important;
  }

  body.mobile-keyboard-open .workspace{
    grid-template-rows:52px minmax(0,1fr) auto auto!important;
  }

  body.mobile-keyboard-open #chatStream{
    grid-row:2!important;
  }

  body.mobile-keyboard-open .chat-tabs{
    grid-row:3!important;
  }

  body.mobile-keyboard-open #roomComposerWrap,
  body.mobile-keyboard-open .dm-composer-host{
    grid-row:4!important;
  }
}

@media(max-width:380px){
  .workspace{
    grid-template-rows:48px auto minmax(0,1fr) auto auto auto!important;
  }

  body.mobile-keyboard-open .workspace,
  body.mobile-keyboard-open .workspace.dm-tab-active{
    grid-template-rows:48px minmax(0,1fr) auto auto!important;
  }
}

/* =========================================================
   COM2 Chat v4.22.61 — Compact Navigation Polish / Responsive Guard
   Visual-only follow-up to v4.22.60. No API or data-flow changes.
   ========================================================= */

/* Profile menu should behave like a compact launcher, not a second fixed rail. */
.app-shell > .sidebar{
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
  overscroll-behavior:contain;
}
.app-shell > .sidebar::-webkit-scrollbar{width:7px}
.app-shell > .sidebar::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px}
.app-shell > .sidebar .brand{position:sticky;top:-18px;z-index:2;margin:0 -2px 2px;padding:10px 6px 12px;background:color-mix(in srgb,var(--panel) 97%,transparent);backdrop-filter:blur(12px)}
.app-shell > .sidebar .brand-mark{width:38px;height:38px;border-radius:12px}
.app-shell > .sidebar .brand-copy strong{font-size:18px}
.app-shell > .sidebar .brand-copy small{font-size:8px;letter-spacing:4px;margin-top:5px}
.app-shell > .sidebar .nav-item{min-height:42px;padding:10px 11px;border-radius:11px}
.app-shell > .sidebar .nav-icon{width:22px;font-size:17px}
.app-shell > .sidebar .nav-item b{font-size:12px}
.app-shell > .sidebar .plus-promo{padding:13px;border-radius:14px}
.app-shell > .sidebar .my-card{border-radius:14px}

/* Keep the chat canvas visually dominant after removal of the left column. */
@media(min-width:941px){
  .topbar{padding-inline:22px}
  .searchbox{max-width:760px}
  .rightbar{width:var(--rightbar);min-width:var(--rightbar)}
  .member-scroll{padding-right:2px}
  .profile-menu-trigger{transition:border-color .16s ease,background .16s ease,transform .16s ease}
  .profile-menu-trigger:active{transform:translateY(1px)}
}

/* Tablet keeps the legacy rightbar trigger, while the left navigation stays avatar-driven. */
@media(min-width:721px) and (max-width:940px){
  .topbar{padding-inline:14px}
  .searchbox{max-width:none}
  .profile-menu-trigger-copy{display:none}
  .profile-menu-trigger{width:42px;min-width:42px;padding:0;justify-content:center}
}

/* Mobile: one clean top row + one stable bottom navigation. */
@media(max-width:720px){
  .topbar{min-width:0}
  .topbar .search-wrap{min-width:0}
  .topbar .searchbox{min-width:0}
  .topbar .searchbox input{font-size:12px}

  /* Bottom nav owns these destinations on mobile; avoid duplicate controls above. */
  .topbar .members-toggle,
  .topbar #topMessagesButton,
  .topbar #topNotificationsButton{display:none!important}

  .mobile-bottom-nav{
    min-height:58px;
    box-shadow:0 -10px 28px rgba(0,0,0,.10);
    z-index:5;
  }
  .mobile-bottom-nav-item{border-radius:10px;transition:background .14s ease,color .14s ease,transform .14s ease}
  .mobile-bottom-nav-item:active{transform:scale(.96)}
  .mobile-bottom-nav-item.active{background:rgba(var(--accent-rgb),.09)}
  .mobile-bottom-nav-item.active b{font-weight:800}

  /* Menu overlay is intentionally inset; it must never collide with device safe areas. */
  .app-shell > .sidebar{
    top:max(8px,env(safe-area-inset-top));
    right:max(8px,env(safe-area-inset-right));
    left:max(8px,env(safe-area-inset-left))!important;
    max-height:calc(var(--com2-app-height,100dvh) - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding-bottom:max(14px,env(safe-area-inset-bottom))!important;
  }

  /* Rightbar and profile menu are mutually exclusive slide-over surfaces. */
  .rightbar.open{z-index:1340}
  .app-shell > .sidebar.open{z-index:1350}

  /* When the keyboard is visible, chat/DM composer remains the only bottom control. */
  body.mobile-keyboard-open .mobile-bottom-nav{display:none!important}
  body.mobile-keyboard-open .chat-new-indicator{bottom:118px!important}
}

@media(max-width:420px){
  .topbar .plus-chip{display:none!important}
  .topbar .icon-btn[data-toast]{display:none!important}
  .topbar{padding-inline:8px}
  .top-actions{gap:4px}
  .mobile-bottom-nav-item b{font-size:9px}
}

@media(max-width:340px){
  .mobile-bottom-nav-item span{font-size:14px}
  .mobile-bottom-nav-item b{font-size:8px}
}

/* =========================================================
   COM2 Chat v4.22.62 — Smart Announcement / Rightbar Search / Guest Conversion
   ========================================================= */

/* Brand owns the top-left position; global user search now belongs to Users. */
.topbar-brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  color:var(--text);
  text-decoration:none;
}
.topbar-brand-mark{
  width:38px;
  height:38px;
  flex:0 0 38px;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  box-shadow:0 0 22px rgba(var(--accent-rgb),.18);
}
.topbar-brand-mark:before,
.topbar-brand-mark:after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:var(--panel);
}
.topbar-brand-mark:before{width:15px;height:15px;left:7px;top:7px}
.topbar-brand-mark:after{width:11px;height:11px;right:6px;bottom:6px}
.topbar-brand-mark i{position:absolute;width:8px;height:14px;left:15px;bottom:5px;border-radius:5px;background:var(--panel);transform:rotate(42deg)}
.topbar-brand-mark b{position:absolute;right:-5px;top:-5px;padding:1px 4px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--accent);font-size:9px;line-height:1.4}
.topbar-brand-copy{min-width:0;display:flex;flex-direction:column;line-height:1}
.topbar-brand-copy strong{font-size:18px;letter-spacing:.2px}
.topbar-brand-copy strong span{color:var(--accent)}
.topbar-brand-copy small{margin-top:5px;color:var(--muted);font-size:8px;letter-spacing:2px;white-space:nowrap}

.rightbar-user-search{
  flex:0 0 auto!important;
  width:100%;
  max-width:none!important;
  margin:0 0 10px;
  z-index:8;
}
.rightbar-user-search .searchbox{
  width:100%;
  max-width:none;
  height:38px;
  padding:0 10px;
  border-radius:10px;
  background:color-mix(in srgb,var(--panel-2) 96%,transparent);
}
.rightbar-user-search .searchbox input{font-size:10px}
.rightbar-user-search .searchbox kbd{font-size:8px;padding:3px 5px}
.rightbar-user-search .user-search-results{top:calc(100% + 6px);left:0;right:0}

/* Smart announcement: expanded only while unread/opened, otherwise a corner pill. */
.smart-announcement{
  position:relative;
  min-width:0;
  overflow:visible!important;
  align-items:center;
}
.smart-announcement[hidden]{display:none!important}
.smart-announcement .megaphone{
  font-size:18px!important;
  line-height:1;
}
.smart-announcement p{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  white-space:normal!important;
  overflow:visible!important;
}
.smart-announcement p strong{
  flex:0 0 auto;
  color:var(--accent);
  font-size:10px;
}
.smart-announcement #announcementText{
  min-width:0;
  color:var(--text);
  line-height:1.45;
}
.announcement-actions{
  margin-left:auto;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.announcement-edit,
.announcement-read{
  height:30px;
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:9px;
  background:rgba(var(--accent-rgb),.07);
  color:var(--text);
  cursor:pointer;
}
.announcement-edit{width:30px;padding:0;font-size:13px;color:var(--accent)}
.announcement-read{padding:0 10px;font-size:9px;font-weight:800}
.announcement-edit:hover,
.announcement-read:hover{border-color:rgba(var(--accent-rgb),.52);background:rgba(var(--accent-rgb),.12)}

.announcement-mini{
  position:fixed;
  z-index:80;
  top:calc(var(--topbar) + 12px);
  right:calc(var(--rightbar) + 18px);
  height:34px;
  padding:0 12px;
  border:1px solid rgba(var(--accent-rgb),.32);
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  color:var(--text);
  box-shadow:0 10px 28px rgba(0,0,0,.18);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.announcement-mini:hover{border-color:rgba(var(--accent-rgb),.58);background:rgba(var(--accent-rgb),.10)}
.announcement-mini[hidden]{display:none!important}
.workspace.dm-tab-active #announcementMini{display:none!important}

/* Guest conversion stays lightweight and dismissible. */
.guest-convert-nudge{
  position:fixed;
  z-index:72;
  left:18px;
  bottom:88px;
  width:min(340px,calc(100vw - 36px));
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px 12px;
  padding:12px 38px 12px 13px;
  border:1px solid rgba(var(--accent-rgb),.28);
  border-radius:14px;
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  box-shadow:0 18px 48px rgba(0,0,0,.25);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.guest-convert-nudge[hidden]{display:none!important}
.guest-convert-nudge>div:first-of-type{min-width:0;display:flex;flex-direction:column;gap:4px}
.guest-convert-nudge strong{font-size:10px;color:var(--text)}
.guest-convert-nudge span{font-size:8px;line-height:1.45;color:var(--muted)}
.guest-convert-actions{display:flex;align-items:center;gap:6px}
.guest-convert-primary,
.guest-convert-secondary{
  height:30px;
  padding:0 10px;
  border-radius:9px;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
}
.guest-convert-primary{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.guest-convert-secondary{border:1px solid var(--line);background:var(--panel-2);color:var(--text)}
.guest-convert-dismiss{
  position:absolute;
  top:6px;
  right:7px;
  width:24px;
  height:24px;
  border:0;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}

/* Inline announcement editor for owner/main-admin only. API still enforces the role. */
.announcement-editor-overlay{
  position:fixed;
  inset:0;
  z-index:22000;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(3,6,14,.66);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.announcement-editor-panel{
  width:min(560px,100%);
  padding:16px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:var(--panel);
  box-shadow:0 32px 90px rgba(0,0,0,.44);
}
.announcement-editor-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}
.announcement-editor-head h3{margin:3px 0 4px;font-size:17px}
.announcement-editor-head p{margin:0;font-size:9px}
.announcement-editor-panel textarea{
  width:100%;
  min-height:120px;
  max-height:260px;
  resize:vertical;
  padding:12px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  outline:0;
  background:var(--panel-2);
  color:var(--text);
  line-height:1.5;
}
.announcement-editor-panel textarea:focus{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.07)}
.announcement-editor-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.announcement-editor-actions{display:flex;gap:7px}
.announcement-editor-cancel,
.announcement-editor-save{height:34px;padding:0 13px;border-radius:9px;font-size:9px;font-weight:800;cursor:pointer}
.announcement-editor-cancel{border:1px solid var(--line);background:var(--panel-2);color:var(--text)}
.announcement-editor-save{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.announcement-editor-save:disabled{opacity:.55;cursor:wait}

@media(max-width:940px){
  .announcement-mini{right:12px;top:70px}
  .rightbar-user-search{margin-bottom:8px}
  .rightbar-user-search .user-search-results{position:absolute!important;top:calc(100% + 6px)!important;left:0!important;right:0!important}
}

@media(max-width:720px){
  .topbar-brand{gap:7px}
  .topbar-brand-mark{width:32px;height:32px;flex-basis:32px;border-radius:10px}
  .topbar-brand-mark:before{width:13px;height:13px;left:6px;top:6px}
  .topbar-brand-mark:after{width:9px;height:9px;right:5px;bottom:5px}
  .topbar-brand-mark i{width:7px;height:12px;left:13px;bottom:4px}
  .topbar-brand-copy strong{font-size:15px}
  .topbar-brand-copy small{font-size:7px;letter-spacing:1.5px;margin-top:4px}

  .smart-announcement{margin:6px var(--com2-room-gutter) 5px!important;padding:7px 8px!important;gap:7px!important}
  .smart-announcement p{display:block!important;min-width:0}
  .smart-announcement p strong{display:block;margin-bottom:2px;font-size:8px}
  .smart-announcement #announcementText{display:block;font-size:8px;line-height:1.35;max-height:3.9em;overflow:hidden}
  .announcement-read{height:27px;padding-inline:8px;font-size:8px}
  .announcement-edit{width:27px;height:27px}
  .announcement-mini{top:64px;right:9px;height:30px;padding-inline:10px;font-size:9px}

  .guest-convert-nudge{
    left:8px;
    bottom:calc(66px + env(safe-area-inset-bottom));
    width:min(330px,calc(100vw - 16px));
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    padding:10px 34px 10px 11px;
  }
  .guest-convert-actions{justify-content:flex-start}
  body.mobile-keyboard-open .announcement-mini,
  body.mobile-keyboard-open .guest-convert-nudge{display:none!important}

  .announcement-editor-overlay{padding:10px}
  .announcement-editor-panel{padding:13px;border-radius:15px}
  .announcement-editor-panel textarea{min-height:110px}
}

@media(max-width:420px){
  .topbar-brand-copy small{display:none}
  .topbar-brand-copy strong{font-size:14px}
}

/* =========================================================
   COM2 Chat v4.22.64 — Rightbar polish / Guest feature conversion
   ========================================================= */
.rightbar-user-search{position:sticky;top:0;z-index:4;padding:2px 0 9px;background:linear-gradient(180deg,var(--panel) 78%,color-mix(in srgb,var(--panel) 96%,transparent))}
.rightbar-user-search .searchbox{height:38px;border-radius:10px;padding-inline:10px;box-shadow:none}
.rightbar-user-search .searchbox input{font-size:11px}
.rightbar-user-search .searchbox kbd{font-size:9px;padding:3px 5px}
.member-scroll{scrollbar-gutter:stable}
.member-group>h3{position:relative;top:auto;z-index:auto;margin-top:0;padding:6px 5px;background:transparent;backdrop-filter:none}
.member-row{min-height:44px;border-radius:10px;transition:background .12s ease,border-color .12s ease}
.member-row:hover{background:rgba(var(--accent-rgb),.065)}
.member-copy{min-width:0}.member-name-line{min-width:0}.member-name-line>b{min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-card{overflow:hidden}

.guest-feature-gate{max-width:620px;margin:0 auto;display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;padding:22px;border:1px solid rgba(var(--accent-rgb),.28);border-radius:20px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.10),var(--panel-2));box-shadow:0 20px 60px rgba(0,0,0,.18)}
.guest-feature-gate-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-weight:900;box-shadow:0 12px 30px rgba(var(--accent-rgb),.26)}
.guest-feature-gate-copy h3{margin:5px 0 7px;font-size:20px}.guest-feature-gate-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.65}
.guest-feature-benefits{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.guest-feature-benefits span{padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);font-size:11px;color:color-mix(in srgb,var(--text) 88%,var(--muted))}
.guest-feature-actions{grid-column:1/-1;display:flex;gap:9px}.guest-feature-actions button{min-height:39px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);cursor:pointer;font-weight:700}.guest-feature-actions button.primary{border-color:rgba(var(--accent-rgb),.5);background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.profile-guest-convert{width:100%;display:grid;gap:8px}.profile-guest-convert .social-hint{margin:0}.profile-guest-convert button{justify-self:start}
@media(max-width:720px){.rightbar-user-search{padding-top:0}.guest-feature-gate{grid-template-columns:46px minmax(0,1fr);padding:16px;gap:12px}.guest-feature-gate-icon{width:46px;height:46px;border-radius:14px}.guest-feature-gate-copy h3{font-size:16px}.guest-feature-benefits{grid-template-columns:1fr}.guest-feature-actions{flex-direction:column}.guest-feature-actions button{width:100%}}

/* =========================================================
   COM2 Chat v4.23.0 — Room System v1 / active-room routing
   ========================================================= */
.room-switcher-trigger{height:40px;min-width:0;max-width:250px;display:flex;align-items:center;gap:7px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--text);cursor:pointer}
.room-switcher-trigger>span{color:var(--accent);font-weight:900}.room-switcher-trigger>b{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.room-switcher-trigger>small{color:var(--muted);font-size:9px;white-space:nowrap}.room-switcher-trigger>i{margin-left:auto;color:var(--muted);font-style:normal}.room-switcher-trigger:hover{border-color:rgba(var(--accent-rgb),.42);background:rgba(var(--accent-rgb),.07)}
.room-switcher-intro{padding:4px 2px 14px}.room-switcher-intro h3{margin:5px 0 4px}.room-switcher-intro p{margin:0;font-size:11px;line-height:1.6}
.room-switcher-list{display:grid;gap:7px}.room-switcher-row{width:100%;display:flex;align-items:center;gap:11px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--text);text-align:left;cursor:pointer}.room-switcher-row:hover{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.06)}.room-switcher-row.active{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.09);cursor:default}.room-switcher-code{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--panel-3);color:var(--accent);font-size:10px;font-weight:900}.room-switcher-row .grow{display:flex;min-width:0;flex-direction:column;gap:3px}.room-switcher-row .grow b{font-size:11px}.room-switcher-row .grow small{color:var(--muted);font-size:9px}.room-switcher-go{margin-left:auto;font-size:9px;color:var(--accent);font-weight:800}
@media(max-width:720px){.room-switcher-trigger{max-width:132px;padding-inline:8px}.room-switcher-trigger>small{display:none}.room-switcher-trigger>b{max-width:72px}.topbar-brand-copy small{display:none}}
@media(max-width:420px){.room-switcher-trigger{max-width:100px}.room-switcher-trigger>b{max-width:52px}}


/* =========================================================
   COM2 Chat v4.23.2 — Layout Recovery / Owner Row Hotfix
   Restores the intended post-v4.22.59 rightbar behavior while keeping
   Compact Navigation, Smart Announcement and Room System v1 intact.
   ========================================================= */

/* Desktop rightbar is a normal independent panel again. Never reserve a
   full-height list just to push Room Info to the bottom. */
@media(min-width:941px){
  .app-shell{
    grid-template-columns:minmax(0,1fr) var(--rightbar)!important;
    transition:none!important;
  }
  .workspace{
    min-width:0;
    border-right:1px solid var(--line)!important;
  }
  .rightbar{
    width:var(--rightbar)!important;
    min-width:var(--rightbar)!important;
    padding:16px 14px 14px!important;
    border-left:1px solid var(--line)!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--panel) 88%,transparent))!important;
    box-shadow:none!important;
  }
  .rightbar-head{
    min-height:auto!important;
    flex:0 0 auto!important;
    margin:0 0 10px!important;
    padding:0!important;
    border-bottom:0!important;
    background:transparent!important;
  }
  .rightbar-tabs{
    height:auto!important;
    margin:0!important;
    padding:4px!important;
    border:1px solid var(--line)!important;
    border-radius:14px!important;
    background:var(--panel-2)!important;
  }
  .rightbar-tab{height:38px!important;border-radius:10px!important}
  .rightbar-close{display:none!important}
  .rightbar-pane{min-height:0;padding:0!important;background:transparent!important}
  #rightUsersPane .member-scroll{
    flex:0 1 auto!important;
    max-height:calc(100dvh - 300px)!important;
    min-height:0!important;
  }
  #rightFriendsPane .right-friends-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
  }
  #rightUsersPane .room-card{
    flex:0 0 auto!important;
    margin:10px 0 0!important;
    padding:12px!important;
    border:1px solid var(--line)!important;
    border-radius:16px!important;
    background:var(--panel-2)!important;
    box-shadow:none!important;
  }
  .members-toggle{display:none!important}
}

/* The v4.22.64 sticky group heading could paint over the first member row.
   Owner black pawn + Hat extends beyond the slot, so the overlap was especially
   visible on the Sahip row. Group headings remain normal flow elements. */
.member-group{position:relative;overflow:visible!important}
.member-group>h3{
  position:relative!important;
  top:auto!important;
  z-index:0!important;
  margin:0 6px 4px!important;
  padding:5px 0 4px!important;
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.member-row{
  position:relative;
  z-index:1;
  min-height:38px!important;
  padding:4px 5px!important;
  overflow:visible!important;
}
.member-pawn-slot{
  position:relative;
  z-index:2;
  width:27px!important;
  height:31px!important;
  overflow:visible!important;
  isolation:isolate;
}
.member-pawn-slot>.com2-pawn{z-index:2}
.member-pawn-slot>.com2-pawn.pawn-premium,
.member-pawn-slot>.com2-pawn.pawn-black{transform:translateY(1px) scale(.84)!important;transform-origin:center!important}
.member-presence-dot{z-index:9!important}
.member-copy{position:relative;z-index:3;min-width:0;overflow:hidden}
.member-name-line{overflow:hidden!important}
.member-name-line>b{max-width:calc(100% - 34px)!important}

/* Keep classic xat-style rows, but stop the action dots from floating at the
   far edge of an ultrawide chat canvas. Room and DM stay visually identical. */
#chatStream .message-body,
.dm-dock-messages.chat-stream .message-body{
  width:min(860px,100%)!important;
  max-width:860px!important;
}
#chatStream .bubble,
.dm-dock-messages.chat-stream .bubble,
.dm-dock-messages.chat-stream .dm-chat-message.is-self .bubble{
  display:block!important;
  width:fit-content!important;
  min-width:52px!important;
  max-width:100%!important;
  padding-right:27px!important;
}
#chatStream .message-reply-preview,
.dm-dock-messages.chat-stream .message-reply-preview{
  max-width:min(560px,100%)!important;
}

/* Owner/main-admin render extra moderation/admin controls. The topbar must not
   grow or wrap only for privileged accounts. */
.topbar{min-width:0}
.topbar-brand{flex:0 0 auto}
.room-switcher-trigger{flex:0 1 auto}
.top-actions{min-width:0;flex:0 1 auto;justify-content:flex-end}
.top-actions>.icon-btn,
.top-actions>.management-link{flex:0 0 40px}
.profile-menu-trigger{flex:0 1 auto;overflow:visible}
.plus-chip{flex:0 1 auto;white-space:nowrap}

@media(min-width:941px) and (max-width:1320px){
  .topbar{gap:8px!important;padding-inline:14px!important}
  .top-actions{gap:5px!important}
  .plus-chip{padding-inline:10px!important}
  .profile-menu-trigger{max-width:160px!important}
  .room-switcher-trigger{max-width:210px!important}
}
@media(min-width:941px) and (max-width:1160px){
  .profile-menu-trigger-copy{display:none!important}
  .profile-menu-trigger{width:42px!important;min-width:42px!important;padding:0!important;justify-content:center!important}
  .room-switcher-trigger>small{display:none!important}
  .room-switcher-trigger{max-width:150px!important}
}
@media(min-width:941px) and (max-width:1040px){
  .topbar .icon-btn[data-toast]{display:none!important}
  .plus-chip b{max-width:88px;overflow:hidden;text-overflow:ellipsis}
}

/* Tablet/mobile returns to the established off-canvas rightbar. */
@media(max-width:940px){
  .rightbar{
    padding:10px!important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,transparent),color-mix(in srgb,var(--panel-2) 94%,transparent))!important;
    border-left:1px solid var(--line)!important;
  }
  .rightbar-head{
    min-height:auto!important;
    flex:0 0 auto!important;
    margin:0 0 8px!important;
    padding:0!important;
    border-bottom:0!important;
    background:transparent!important;
  }
  .rightbar-tabs{height:auto!important;margin:0!important;padding:4px!important}
  .rightbar-tab{height:34px!important}
  .rightbar-close{display:inline-grid!important}
  .rightbar-pane{padding:0!important;background:transparent!important}
  #rightUsersPane .member-scroll{flex:1 1 auto!important;max-height:none!important;min-height:0!important}
  #rightUsersPane .room-card{
    margin:8px 0 0!important;
    padding:10px!important;
    border:1px solid var(--line)!important;
    border-radius:13px!important;
    background:var(--panel-2)!important;
  }
}

@media(max-width:720px){
  .member-row{min-height:36px!important;padding:3px 4px!important}
  .member-pawn-slot{width:25px!important;height:29px!important}
  .member-pawn-slot>.com2-pawn.pawn-premium,
  .member-pawn-slot>.com2-pawn.pawn-black{transform:translateY(1px) scale(.78)!important}
  #chatStream .message-body,
  .dm-dock-messages.chat-stream .message-body{width:min(100%,720px)!important;max-width:100%!important}
}

/* =========================================================
   COM2 Chat v4.24.0 — Room Roles v1
   Room-local authority remains visually distinct from platform roles.
   ========================================================= */
.room-role-seal{
  width:16px;height:16px;min-width:16px;border-radius:5px;display:inline-grid;place-items:center;
  font-size:8px;line-height:1;border:1px solid var(--line);background:var(--panel-3);color:var(--muted);
  vertical-align:middle;box-shadow:none;
}
.room-role-seal.room-role-owner{color:#f5c45b;border-color:rgba(245,196,91,.38);background:rgba(245,196,91,.08)}
.room-role-seal.room-role-moderator{color:var(--accent);border-color:rgba(var(--accent-rgb),.34);background:rgba(var(--accent-rgb),.08)}
.member-name-line .room-role-seal{margin-left:2px;flex:0 0 auto}

.room-moderation-hero{display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),var(--panel-2));margin-bottom:12px}
.room-moderation-hero h3{margin:2px 0 4px;font-size:17px}.room-moderation-hero p{margin:0;font-size:11px;line-height:1.55}
.room-staff-section{display:grid;gap:8px}
.room-staff-row{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 10px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.room-staff-row.owner{border-color:rgba(245,196,91,.25);background:linear-gradient(90deg,rgba(245,196,91,.06),var(--panel-2))}
.room-staff-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--panel-3);color:var(--accent);font-size:13px;flex:0 0 auto}
.room-staff-row.owner .room-staff-icon{color:#f5c45b}
.room-staff-row b{display:block;font-size:11px}.room-staff-row small{display:block;margin-top:3px;font-size:9px}
.room-staff-add,.room-owner-transfer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:6px;padding-top:10px;border-top:1px solid var(--line)}
.room-staff-add input,.room-owner-transfer input{height:38px;min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--panel-3);color:var(--text);padding:0 11px;outline:none}
.room-staff-add input:focus,.room-owner-transfer input:focus{border-color:rgba(var(--accent-rgb),.55)}
.room-owner-transfer small{grid-column:1/-1;font-size:9px}
.moderation-scope-hint{display:block;margin:-2px 0 3px;line-height:1.5}.moderation-scope-hint.danger-text{color:#ff8b96}
.room-sanction-row{border-left:2px solid rgba(var(--accent-rgb),.42)}
.restriction-room-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.restriction-room-links .auth-primary{width:auto}

@media(max-width:720px){
  .room-staff-add,.room-owner-transfer{grid-template-columns:1fr}.room-owner-transfer small{grid-column:auto}
  .room-staff-row{align-items:flex-start}.room-staff-row .mini{margin-left:auto}
}

/* COM2 Chat v4.24.1 — Room moderation clarity hotfix */
.moderation-room-explain{
  display:grid;
  gap:5px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--line) 82%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel-2) 94%,var(--accent) 6%);
}
.moderation-room-explain b{font-size:11px;color:var(--text)}
.moderation-room-explain small{display:block;font-size:9px;line-height:1.55}

/* =========================================================
   COM2 Chat v4.25.0 — Room Management
   ========================================================= */
.room-switcher-intro-v425{display:flex;align-items:flex-start;gap:14px}.room-switcher-actions{margin-left:auto;display:flex;align-items:center;gap:7px;flex-wrap:wrap}.room-switcher-actions button{min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--text);font-size:9px;font-weight:800;cursor:pointer}.room-switcher-actions button.primary{border-color:rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.12);color:var(--accent)}
.room-switcher-entry{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:stretch}.room-switcher-entry>.room-switcher-row{min-width:0}.room-switcher-description{max-width:520px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-switcher-manage{min-width:58px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--muted);font-size:9px;font-weight:800;cursor:pointer}.room-switcher-manage:hover{border-color:rgba(var(--accent-rgb),.38);color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.room-management-hero{display:flex;align-items:flex-start;gap:12px;padding:4px 2px 14px}.room-management-hero h3{margin:5px 0 4px}.room-management-hero p{margin:0;font-size:10px;line-height:1.6}.room-management-hero>button{margin-left:auto;flex:0 0 auto;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2);color:var(--muted);cursor:pointer}
.room-management-form{display:grid;gap:10px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}.room-management-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.room-manage-field{display:grid;gap:6px;min-width:0}.room-manage-field>span{font-size:9px;font-weight:800;color:var(--muted)}.room-manage-field input,.room-manage-field textarea,.room-member-add input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;background:var(--panel-3);color:var(--text);padding:9px 10px;outline:none;font-size:10px}.room-manage-field textarea{resize:vertical;min-height:72px}.room-manage-field input:focus,.room-manage-field textarea:focus,.room-member-add input:focus{border-color:rgba(var(--accent-rgb),.48);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.08)}.room-manage-field input:disabled{opacity:.58;cursor:not-allowed}.room-private-toggle{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:color-mix(in srgb,var(--panel-3) 90%,transparent);font-size:9px;color:var(--text)}.room-private-toggle input{accent-color:var(--accent)}.room-management-note{font-size:8.5px;line-height:1.5}.room-management-form>button.primary{justify-self:start;min-height:36px;padding:0 14px;border:1px solid rgba(var(--accent-rgb),.38);border-radius:9px;background:rgba(var(--accent-rgb),.13);color:var(--accent);font-size:9px;font-weight:900;cursor:pointer}
.room-access-management{margin-top:12px}.room-access-management>p{margin:4px 0 10px;font-size:9px;line-height:1.55}.room-member-add{display:flex;gap:7px;margin-bottom:9px}.room-member-add input{flex:1}.room-member-add button{flex:0 0 auto}.room-member-list{display:grid;gap:6px}.room-member-row{display:flex;align-items:center;gap:9px;padding:8px 9px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2)}.room-member-row .grow{display:flex;flex-direction:column;gap:2px}.room-member-row b{font-size:10px}.room-member-row small{font-size:8px}
@media(max-width:720px){.room-switcher-intro-v425{display:grid}.room-switcher-actions{margin-left:0}.room-switcher-entry{grid-template-columns:minmax(0,1fr)}.room-switcher-manage{min-height:30px}.room-management-grid{grid-template-columns:1fr}.room-management-hero{display:grid}.room-management-hero>button{margin-left:0;justify-self:start}.room-member-add{display:grid;grid-template-columns:minmax(0,1fr) auto}}

/* =========================================================
   COM2 Chat v4.27.0 — Room Discovery
   ========================================================= */
.room-discovery-hero{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),var(--panel-2));margin-bottom:12px}.room-discovery-hero h2{margin:3px 0 5px;font-size:20px}.room-discovery-hero p{margin:0}.room-discovery-search{height:44px;display:flex;align-items:center;gap:9px;padding:0 13px;border:1px solid var(--line);border-radius:13px;background:var(--panel-2);margin-bottom:14px}.room-discovery-search>span{color:var(--accent);font-size:18px}.room-discovery-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text)}.room-discovery-content{display:grid;gap:18px}.room-discovery-section{display:grid;gap:9px}.room-discovery-section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:0 2px}.room-discovery-section-head h3{margin:0 0 2px;font-size:14px}.room-discovery-section-head p{margin:0;font-size:10px}.room-discovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.room-discovery-card{min-width:0;display:flex;flex-direction:column;gap:10px;padding:13px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,var(--panel-2),color-mix(in srgb,var(--panel-2) 94%,var(--accent) 6%));box-shadow:0 7px 22px rgba(0,0,0,.08)}.room-discovery-card:hover{border-color:rgba(var(--accent-rgb),.34)}.room-discovery-card.current{border-color:rgba(var(--accent-rgb),.46);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.10)}.room-discovery-card-top{display:flex;align-items:center;gap:9px;min-width:0}.room-discovery-icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:11px;background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.22);font-size:17px}.room-discovery-card-top .grow{min-width:0;display:flex;flex-direction:column;gap:3px}.room-discovery-card-top b,.room-discovery-card-top small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-discovery-card-top b{font-size:12px}.room-discovery-card-top small{font-size:9px}.room-discovery-favorite{width:32px;height:32px;flex:0 0 32px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--muted);cursor:pointer;font-size:17px}.room-discovery-favorite:hover,.room-discovery-favorite.active{color:#f6be4a;border-color:rgba(246,190,74,.35);background:rgba(246,190,74,.08)}.room-discovery-description{margin:0;min-height:34px;color:var(--muted);font-size:10px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.room-discovery-meta{display:flex;flex-wrap:wrap;gap:6px 10px;color:var(--muted);font-size:9px}.room-discovery-meta span:first-child{color:var(--success)}.room-discovery-card>button:last-child{margin-top:auto;min-height:34px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);cursor:pointer}.room-discovery-card>button.primary:last-child{border-color:rgba(var(--accent-rgb),.38);background:rgba(var(--accent-rgb),.10);color:var(--accent)}.room-discovery-card>button:disabled{opacity:.55;cursor:default}.room-discovery-empty{grid-column:1/-1}.room-danger-zone{border-color:rgba(255,85,102,.22)!important;background:rgba(255,85,102,.035)!important}
@media(max-width:720px){.room-discovery-hero{align-items:flex-start;padding:12px}.room-discovery-hero h2{font-size:16px}.room-discovery-grid{grid-template-columns:1fr}.room-discovery-card{padding:11px}.room-discovery-description{min-height:0}.room-discovery-meta{font-size:8.5px}}

/* =========================================================
   COM2 Chat v4.28.2 — Room mute pawn badge
   Active room mutes are visible on the rightbar pawn without
   replacing role/premium pawn visuals or exposing moderation notes.
   ========================================================= */
.member-pawn-mute-badge{
  position:absolute;left:-2px;bottom:1px;z-index:14;
  width:14px;height:14px;display:grid;place-items:center;
  border-radius:999px;border:1px solid rgba(255,103,116,.62);
  background:color-mix(in srgb,var(--panel) 90%,#ff5f70 10%);
  box-shadow:0 1px 5px rgba(0,0,0,.36),0 0 0 1px rgba(0,0,0,.08);
  font-size:8px;line-height:1;pointer-events:none;user-select:none;
}
@media(max-width:720px){.member-pawn-mute-badge{left:-3px;bottom:0;width:13px;height:13px;font-size:7px}}


/* =========================================================
   COM2 Chat v4.28.21 — Away presence
   A room tab that stays open in the background remains in the
   user list with a compact amber clock badge instead of dropping.
   ========================================================= */
.member-presence-dot.away{
  right:-1px;bottom:0;width:11px;height:11px;
  display:grid;place-items:center;
  background:#e4b64c;border-color:color-mix(in srgb,var(--panel) 84%,#e4b64c 16%);
  box-shadow:0 0 7px rgba(228,182,76,.34);
  color:#2a210c;font-style:normal;font-size:8px;font-weight:900;line-height:1;
}
.member-presence-dot.away::after{content:'◷';transform:translateY(-.2px)}
.member-away-label{color:#e4b64c!important;font-weight:650}
.member-status-separator{display:inline-block;margin:0 3px;color:var(--muted)!important}
.member-status-power.ability-status-text{font-weight:650}
.member-scroll.is-scrolling .member-presence-dot.away{box-shadow:none!important}
@media(max-width:720px){.member-presence-dot.away{right:-1px;bottom:0;width:10px;height:10px;font-size:7px}}

/* =========================================================
   COM2 Chat v4.28.44 — xat-style social glyphs + pawn-state badges
   Normal social markers are plain black glyphs, completely independent from
   authority/pawn colors. COM2 Plus only changes the glyph palette:
   registered ★ yellow; friend + and marriage ♥ red.
   ========================================================= */
.social-corner-mark{
  position:absolute;right:-2px;bottom:0;z-index:16;
  width:12px;height:12px;display:grid;place-items:center;
  padding:0;background:transparent!important;border:0!important;border-radius:0!important;
  color:#050505!important;font-style:normal;font-size:10px;font-weight:1000;line-height:1;
  pointer-events:none;user-select:none;box-shadow:none!important;
  text-shadow:0 0 1px rgba(255,255,255,.95),0 1px 1px rgba(255,255,255,.45);
}
.social-corner-registered,.social-corner-friend,.social-corner-marriage{color:#050505!important;background:transparent!important;box-shadow:none!important}
.social-corner-premium.social-corner-registered{color:#f2c14e!important;background:transparent!important;box-shadow:none!important;text-shadow:0 1px 1px rgba(0,0,0,.72),0 0 3px rgba(242,193,78,.42)}
.social-corner-premium.social-corner-friend,.social-corner-premium.social-corner-marriage{color:#d73a3a!important;background:transparent!important;box-shadow:none!important;text-shadow:0 1px 1px rgba(0,0,0,.72),0 0 3px rgba(215,58,58,.35)}
.member-flat-list{padding-top:4px}
.member-flat-list>.member-row{margin:0}
.member-flat-list>.relationship-pair-first{margin-bottom:0}
.member-flat-list>.relationship-pair-second{margin-top:0}
.avatar.small>.social-corner-mark{right:-2px;bottom:-1px;width:10px;height:10px;font-size:8px}
.avatar.large>.social-corner-mark{right:0;bottom:2px;width:13px;height:13px;font-size:11px}
.member-pawn-slot>.social-corner-mark.member-social-mark{right:-2px;bottom:0;width:11px;height:11px;font-size:9px;z-index:16}
.member-scroll.is-scrolling .social-corner-mark{text-shadow:none!important}

/* Away occupies the same lower-left moderation-status position as mute/ban,
   but only when neither of those stronger states is active. */
.member-pawn-away-badge{
  position:absolute;left:-3px;bottom:0;z-index:18;
  width:13px;height:13px;display:grid;place-items:center;
  border-radius:999px;border:1px solid color-mix(in srgb,var(--panel) 84%,#e4b64c 16%);
  background:#e4b64c;color:#2a210c;font-size:8px;font-weight:950;line-height:1;
  pointer-events:none;user-select:none;box-shadow:0 0 7px rgba(228,182,76,.34);
}
/* Legacy right-bottom away dot must never render in the roster anymore. */
.member-pawn-slot>.member-presence-dot.away{display:none!important}
.member-scroll.is-scrolling .member-pawn-away-badge{box-shadow:none!important}
@media(max-width:720px){
  .member-pawn-slot>.social-corner-mark.member-social-mark{right:-2px;bottom:0;width:10px;height:10px;font-size:8px}
  .member-pawn-away-badge{left:-3px;bottom:0;width:12px;height:12px;font-size:7px}
}



/* =========================================================
   COM2 Chat v4.28.45 — readable xat social glyph sizing
   Normal glyphs are always black. Plus only changes the glyph color:
   registered ★ yellow; friend + / marriage ♥ red.
   ========================================================= */
.member-pawn-slot>.social-corner-mark.member-social-mark{
  right:-7px!important;bottom:-2px!important;
  width:16px!important;height:16px!important;
  font-size:14px!important;line-height:16px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:900!important;
  color:#050505!important;background:transparent!important;border:0!important;border-radius:0!important;
  text-shadow:0 0 1px rgba(255,255,255,.98),0 1px 1px rgba(255,255,255,.75)!important;
}
.member-pawn-slot>.social-corner-premium.social-corner-registered.member-social-mark{
  color:#f5c542!important;
  text-shadow:0 1px 1px rgba(0,0,0,.85),0 0 4px rgba(245,197,66,.58)!important;
}
.member-pawn-slot>.social-corner-premium.social-corner-friend.member-social-mark,
.member-pawn-slot>.social-corner-premium.social-corner-marriage.member-social-mark{
  color:#e23b3b!important;
  text-shadow:0 1px 1px rgba(0,0,0,.85),0 0 4px rgba(226,59,59,.48)!important;
}
@media(max-width:720px){
  .member-pawn-slot>.social-corner-mark.member-social-mark{
    right:-6px!important;bottom:-2px!important;width:15px!important;height:15px!important;font-size:13px!important;line-height:15px!important;
  }
}


/* =========================================================
   COM2 Chat v4.28.46 — deterministic BFF/Marriage roster marker
   A visible pair gets one shared +/♥ centered between the two pawn rows.
   If only one partner is in the roster, that user's own marker remains.
   ========================================================= */
.member-flat-list .member-relationship-pair{
  position:relative!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;
  overflow:visible!important;
}
.member-flat-list .member-relationship-pair .member-row{
  position:relative;z-index:1;margin:0!important;border-radius:7px!important;
  padding-top:4px!important;padding-bottom:4px!important;
}
.member-flat-list .member-relationship-pair .relationship-pair-first:after,
.member-flat-list .member-relationship-pair .relationship-pair-second:before{display:none!important}
.member-flat-list .member-relationship-bridge{
  position:absolute!important;left:11px!important;top:50%!important;
  right:auto!important;bottom:auto!important;transform:translateY(-50%)!important;
  z-index:22!important;width:16px!important;height:16px!important;
  display:grid!important;place-items:center!important;
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;font-family:Arial,Helvetica,sans-serif!important;
  font-size:14px!important;font-weight:900!important;line-height:16px!important;
  color:#050505!important;box-shadow:none!important;
  text-shadow:0 0 1px rgba(255,255,255,.98),0 1px 1px rgba(255,255,255,.75)!important;
  pointer-events:none!important;
}
.member-flat-list .member-relationship-bridge.social-corner-premium.social-corner-friend,
.member-flat-list .member-relationship-bridge.social-corner-premium.social-corner-marriage{
  color:#e23b3b!important;
  text-shadow:0 1px 1px rgba(0,0,0,.85),0 0 4px rgba(226,59,59,.48)!important;
}
@media(max-width:720px){
  .member-flat-list .member-relationship-bridge{left:9px!important;width:15px!important;height:15px!important;font-size:13px!important;line-height:15px!important}
}

/* =========================================================
   COM2 Chat v4.28.48 — stronger xat-style roster glyph placement
   Individual glyphs are slightly larger/heavier. Shared BFF/marriage glyphs
   sit at the right edge of the pawn column, centered between both rows.
   ========================================================= */
.member-pawn-slot>.social-corner-mark.member-social-mark{
  right:-9px!important;bottom:-3px!important;
  width:18px!important;height:18px!important;
  font-size:16px!important;line-height:18px!important;
  font-weight:1000!important;
  -webkit-text-stroke:.2px currentColor;
}
.member-flat-list .member-relationship-bridge{
  left:24px!important;top:50%!important;
  width:19px!important;height:19px!important;
  font-size:17px!important;line-height:19px!important;
  font-weight:1000!important;
  -webkit-text-stroke:.25px currentColor;
}
@media(max-width:720px){
  .member-pawn-slot>.social-corner-mark.member-social-mark{
    right:-8px!important;bottom:-3px!important;
    width:17px!important;height:17px!important;font-size:15px!important;line-height:17px!important;
  }
  .member-flat-list .member-relationship-bridge{
    left:20px!important;width:18px!important;height:18px!important;
    font-size:16px!important;line-height:18px!important;
  }
}
/* v4.28.52 — paid social requests + xat-style direct Coin/Days transfer */
.relationship-choice-price{display:block;margin-top:5px;color:#f4c25c;font-size:8px;font-style:normal;font-weight:900;letter-spacing:.25px}
.balance-transfer-hero{display:flex;align-items:center;gap:12px;border:1px solid rgba(var(--accent-rgb),.28);background:linear-gradient(135deg,rgba(var(--accent-rgb),.12),var(--panel-2));border-radius:18px;padding:15px}.balance-transfer-hero h3{margin:3px 0;font-size:17px}.balance-transfer-hero p{margin:0}.balance-transfer-lock{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--muted);border-radius:999px;padding:7px 9px;font-size:8px;font-weight:800;white-space:nowrap}
.balance-transfer-balances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.balance-transfer-balances article{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--panel-2);border-radius:15px;padding:13px}.balance-transfer-balances article>span{width:34px;height:34px;display:grid;place-items:center;flex:0 0 34px;border-radius:11px;background:rgba(var(--accent-rgb),.11);color:#f4c25c;font-size:17px}.balance-transfer-balances small,.balance-transfer-balances b{display:block}.balance-transfer-balances small{color:var(--muted);font-size:7px;letter-spacing:.45px}.balance-transfer-balances b{margin-top:3px;font-size:16px}
.balance-transfer-card{margin-top:12px;border:1px solid var(--line);background:var(--panel-2);border-radius:18px;padding:15px}.balance-transfer-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0 13px}.balance-transfer-types button{border:1px solid var(--line-strong);background:var(--panel-3);color:var(--muted);border-radius:12px;padding:11px;font-size:9px;font-weight:900;cursor:pointer}.balance-transfer-types button.active{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.12);color:var(--text);box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.08)}.balance-transfer-types button:disabled{opacity:.5;cursor:not-allowed}
.balance-transfer-form{display:grid;gap:11px}.balance-transfer-field{display:grid;gap:6px}.balance-transfer-field>span{font-size:8px;font-weight:900;color:var(--muted);letter-spacing:.35px}.balance-transfer-field input{width:100%;border:1px solid var(--line-strong);background:var(--panel-3);color:var(--text);border-radius:11px;padding:11px 12px;outline:none}.balance-transfer-field input:focus{border-color:rgba(var(--accent-rgb),.65);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}.balance-transfer-warning{margin:0;border:1px solid rgba(244,194,92,.24);background:rgba(244,194,92,.07);color:#d9c18c;border-radius:12px;padding:10px 11px;font-size:8px;line-height:1.5}
.balance-transfer-success{display:grid;justify-items:center;text-align:center;border:1px solid rgba(94,230,168,.3);background:linear-gradient(145deg,rgba(94,230,168,.09),var(--panel-2));border-radius:20px;padding:26px 18px}.balance-transfer-success-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:18px;background:rgba(94,230,168,.14);color:#5ee6a8;font-size:27px;font-weight:900;margin-bottom:12px}.balance-transfer-success h3{margin:7px 0 4px;font-size:21px}.balance-transfer-success p{margin:0 0 14px}
@media(max-width:560px){.balance-transfer-balances{grid-template-columns:1fr}.balance-transfer-lock{display:none}.balance-transfer-types{grid-template-columns:1fr}.balance-transfer-card{padding:13px}}