/* CHAT SOMAN • load after profile.css. All geometry belongs to the base sheets. */
body:has(> .app) {
  --cs-purple: #7c3aed;
  --cs-violet: #9333ea;
  --cs-pink: #ec4899;
  --cs-neon-pink: #ff2bd6;
  --cs-sky: #00bfff;
  --cs-blue: #2563eb;
  --cs-cyan: #00d9ff;
  --cs-lavender: #f3e8ff;
  --cs-blush: #fce7f3;
  --cs-white: #fff;
  --cs-ink: #302446;
  --cs-line: #dac5ee;
  --cs-owner: #ff1493;
  --cs-admin: #dc2626;
  --cs-mod: #16a34a;
  --cs-gloss: inset 0 1px 0 #ffffff85, 0 2px 6px #53267718;
}
body:has(> .app) > header {
  background: linear-gradient(112deg,#53229e,var(--cs-purple) 38%,#ad3097 78%,var(--cs-pink));
  border-color: var(--cs-cyan);
  box-shadow: inset 0 -1px var(--cs-cyan),0 3px 12px #54289033;
}
body > header .header-right button {
  border-radius: 10px;
  box-shadow: var(--cs-gloss);
}
body > header .header-right :is(#gamesBtn,#walletButton) {
  color: #623805;
  background: linear-gradient(#fff6cf,#ffd77f);
  border-color: #edba55;
}
body > header .header-right #profileBtn {color:#462680;background:linear-gradient(#fff,#e5d4ff)}
body > header .header-right #settingsButton {color:#075877;background:linear-gradient(#f6ffff,#b7ecfb)}
body > header .header-right #aboutBtn {color:#274896;background:linear-gradient(#f8fcff,#cfddff)}
body > header .header-right #logoutButton {color:#8b2354;background:linear-gradient(#fff7fa,#fbcfe4)}
body .app > main, body .app > aside {
  border-color: var(--cs-line);
  box-shadow: 0 4px 18px #7435aa1c;
}
body .app main .room-header, body[data-skin] .app main .welcome {
  color: var(--cs-ink);
  border-color: var(--cs-line);
  background: radial-gradient(ellipse at 94% 135%,#beeefe 0 23%,transparent 24%),
              radial-gradient(ellipse at 76% -65%,#fff9 0 42%,transparent 43%),
              linear-gradient(110deg,var(--cs-lavender),var(--cs-blush) 64%,#dbf5ff);
}
body .app .room-header :is(h1,p,.eyebrow),body .app main .welcome b {color:#543777}
body .app main #inviteButton,body .app aside #userSearch {
  background:linear-gradient(#fff,#f8f2ff);
  border-color:var(--cs-line);
  color:#493366;
  box-shadow:var(--cs-gloss);
}
body .app main .conversation-head,body .app main .composer,body .app > aside {
  background:linear-gradient(115deg,#fff,#faf6ff);
  color:var(--cs-ink);
  border-color:var(--cs-line);
}
body .app main .conversation-head :is(b,span),body .app .composer :is(.composer-footer,.tools-right) {color:#695478}
body[data-skin] .app main #messages,body .app main #messages {
  background:var(--cs-white);
  color:var(--cs-ink);
  border-radius:8px;
  box-shadow:inset 0 0 0 1px #e9d9f2,inset 0 0 10px #9433c008;
  scrollbar-color:#b080dd #f5edfc;
}
body[data-skin] .app #messages .message:nth-child(even) {background:#fbf8fe}
body .app #messages .message {border-color:#eee4f5}
body[data-skin] .app #messages .bubble,body .app #messages .bubble {color:var(--cs-ink);background:transparent}
body .app #messages .empty {color:#716080}
body .app main .tools {
  background:linear-gradient(#fdfaff,#f2e7ff);
  border-radius:8px;
  box-shadow:inset 0 0 0 1px var(--cs-line);
}
body .app .composer .tools button {
  color:#56318b;
  border-radius:6px;
  background:linear-gradient(#fff,#f4eaff);
  box-shadow:var(--cs-gloss);
}
body .app .composer #messageInput {
  background:#fff;color:var(--cs-ink);border-color:#a679e8;border-radius:10px;
}
body .app .composer #messageInput:focus {
  border-color:var(--cs-purple);
  box-shadow:0 0 0 3px #ec48992b;
}
body .app .composer #sendButton {
  color:#fff;font-weight:800;border-color:#2486ea;
  background:linear-gradient(155deg,var(--cs-sky),#137ecb 42%,var(--cs-blue));
  text-shadow:0 1px 2px #104479;
  box-shadow:inset 0 1px #ffffff80,0 2px 8px #00bfff45;
}
body .app aside .directory-tabs button {
  
  background:linear-gradient(var(--tab-top,#337cca),var(--tab-bottom,#2054a1));
  color:white;font-weight:750;border-radius:8px;box-shadow:var(--cs-gloss);
}
body .app aside [data-tab=friends] {--tab-top:#9457c9;--tab-bottom:#663399}
body .app aside [data-tab=inbox] {--tab-top:#317c91;--tab-bottom:#225969}
body .app aside [data-tab=rooms] {--tab-top:#b44895;--tab-bottom:#81347d}
body .app aside .directory-tabs button.active {
  box-shadow:inset 0 0 0 2px #fef5ff,0 0 0 1px var(--cs-purple),0 0 6px #ac6aed60;
}
body .app aside #profileIdentity {background:linear-gradient(110deg,#fff,#f6edff);color:var(--cs-ink)}
body .app aside #userList .person {
  --card:#edf6ff;--edge:#c2def7;
  background:linear-gradient(105deg,#fff,var(--card));
  box-shadow:inset 3px 0 var(--edge),inset 0 0 0 1px var(--edge);
  border-radius:8px;
}
body .app #userList .person:has([data-role=owner]) {--card:#ffeaf5;--edge:#efa6cb}
body .app #userList .person:has([data-role=admin]) {--card:#fff0ef;--edge:#edb3b1}
body .app #userList .person:has([data-role=mod]) {--card:#eaf8ee;--edge:#9fd5b3}
body .app #userList .person:has([data-role=guest]) {--card:#f1edf7;--edge:#d5ccdf}
body .app #userList .directory-user {color:var(--cs-ink)}
body .app aside .person-info small {color:#655771}
body .app :is(#myName,.directory-user,.message-meta button)[data-role=owner] {--role-color:var(--cs-owner)}
body .app :is(#myName,.directory-user,.message-meta button)[data-role=admin] {--role-color:var(--cs-admin)}
body .app :is(#myName,.directory-user,.message-meta button)[data-role=mod] {--role-color:var(--cs-mod)}
body .app aside #myName:is([data-role=owner],[data-role=admin],[data-role=mod]),
body .app aside #userList .directory-user:is([data-role=owner],[data-role=admin],[data-role=mod]) .person-info b,
body .app #messages .message-meta button:is([data-role=owner],[data-role=admin],[data-role=mod]) {
  color:var(--role-color);font-weight:800;
}
#panelDialog #panelContent .studio-tabs button {
  background:linear-gradient(var(--tab-top),var(--tab-bottom));color:#fff;font-weight:800;
  border:1px solid var(--tab-bottom);border-radius:8px;box-shadow:var(--cs-gloss);
}
#panelContent [data-studio=people] {--tab-top:#367fc7;--tab-bottom:#24579e}
#panelContent [data-studio=rooms] {--tab-top:#935ac3;--tab-bottom:#69348e}
#panelContent [data-studio=bans] {--tab-top:#c84f60;--tab-bottom:#9b253b}
#panelContent [data-studio=reports] {--tab-top:#a5601c;--tab-bottom:#81410f}
#panelContent [data-studio=audit] {--tab-top:#217f7b;--tab-bottom:#155c5a}
#panelDialog #panelContent .studio-tabs button.selected {box-shadow:inset 0 -3px #fff,0 0 0 1px var(--tab-bottom)}
#panelContent #manageSpam {background:linear-gradient(#fff0f7,#f8d1e6);color:#7c2252;font-weight:750}
#panelContent #spamForm textarea {width:100%;box-sizing:border-box;resize:vertical}
#panelContent #playerOutput:not(:empty) {background:linear-gradient(120deg,var(--cs-lavender),var(--cs-blush));border-top:2px solid var(--cs-purple);border-radius:8px}
body:has(> .app) :is(.app,header .header-right,#panelContent .studio-tabs) button:focus-visible {
  outline:2px solid var(--cs-purple);outline-offset:2px;
}
@media (hover:hover) {
  body:has(> .app) :is(header .header-right,.composer,.directory-tabs,.studio-tabs) button:hover:enabled {filter:brightness(1.07)}
}
@media (prefers-reduced-motion:no-preference) {
  body:has(> .app) :is(header .header-right,.composer,.directory-tabs,.studio-tabs) button {transition:filter 180ms ease,box-shadow 180ms ease}
}
/* Layered curves echo the reference header without adding markup. */
body:has(> .app) > header {
  background-image:
    radial-gradient(ellipse at 14% -48%,transparent 46%,#66ddff85 47%,transparent 50%),
    radial-gradient(ellipse at 66% -88%,transparent 57%,#ffb0e780 58%,transparent 62%),
    linear-gradient(110deg,#53229e,var(--cs-purple) 38%,#ad3097 78%,var(--cs-pink));
}
body .app .rail #roomList .room-btn.active {
  border-color:#ad8bea;
  box-shadow:inset 3px 0 var(--cs-purple),0 2px 8px #6736ac22;
}

/* Shared swatches for profile actions and the compact composer toolbar. */
#panelContent #savePrefs, .composer #imageButton, #panelContent #snap {
  --action-light:#edfff3; --action-base:#bbeacd; --action-ink:#175633;
}
#panelContent #openOptions, .composer #fontBtn, #panelContent #avatarUpload {
  --action-light:#f7f0ff; --action-base:#ddc8fc; --action-ink:#542a84;
}
#panelContent #editDetails, .composer #transferBtn, #panelContent #camera {
  --action-light:#edfaff; --action-base:#bce5fc; --action-ink:#154e73;
}
#panelContent #creditsBtn, .composer #emojiButton {
  --action-light:#fff9de; --action-base:#ffe39a; --action-ink:#714509;
}
#panelContent #presetGallery, .composer #giftButton, #panelContent #record {
  --action-light:#fff0f8; --action-base:#fbcbe3; --action-ink:#84204e;
}
#panelContent #shareInvite, .composer #mediaBtn {
  --action-light:#eafffa; --action-base:#afe7db; --action-ink:#11584e;
}
.composer #gifButton {--action-light:#f2f1ff; --action-base:#d3d4ff; --action-ink:#3a397d}
.composer #youtubeButton {--action-light:#fff2ed; --action-base:#ffd0c4; --action-ink:#862d20}
body .app .composer .tools button,
#panelDialog #panelContent:has(.profile-title) :is(#savePrefs,#openOptions,#editDetails,#creditsBtn,#presetGallery,#camera,#snap,#record,#shareInvite,#socialLinks button),
#panelContent #avatarUpload::file-selector-button {
  color:var(--action-ink,#3f4659);
  background:linear-gradient(160deg,var(--action-light,#fff),var(--action-base,#dce3ef));
  border-radius:8px;
  font-weight:750;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 28%,transparent),inset 0 2px 0 #ffffff75,0 2px 4px #34204417;
}
#panelDialog:has(#panelContent .profile-title) {
  color-scheme:light;
  background:linear-gradient(155deg,#f5ecff 0%,#fff 46%,#f1f9ff 100%);
  color:#332744;
  border-color:#c7b1de;
}
#panelDialog #panelContent:has(.profile-title) :is(h2,h3,label,.profile-title small,.profile-coins) {color:#483257}
#panelDialog #panelContent:has(.profile-title) :is(select,#avatarUpload) {
  color:#382b49;background:#fff;border-color:#cdbada;
}
#panelDialog:has(.profile-title) #closePanel {background:#eadcf6;color:#53336c}
#panelContent #avatarUpload::file-selector-button {border:0;padding:.4em .75em;margin-inline-end:.6em}
#socialLinks [data-provider=google] {--action-light:#fff7df;--action-base:#f7deab;--action-ink:#6d450c}
#socialLinks [data-provider=x] {--action-light:#f3f5fa;--action-base:#d5dce9;--action-ink:#344054}
#socialLinks [data-provider=facebook] {--action-light:#eef6ff;--action-base:#c2d9ff;--action-ink:#234d91}
#socialLinks [data-provider=instagram] {--action-light:#fff1fa;--action-base:#f5c6df;--action-ink:#7d2b59}
#panelDialog #panelContent #socialLinks button:disabled {opacity:.8;filter:saturate(.5);cursor:not-allowed}
body .app aside #userList .person > button.directory-user {
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
body .app aside #userList .person > button.present {background:#fff9;color:#5e4471;border-color:#d8c9e0}
@media (hover:hover) {
  body .app aside #userList .person:hover {outline:1px solid var(--edge);outline-offset:-1px}
  #panelDialog #panelContent:has(.profile-title) button:hover:enabled {filter:brightness(1.04)}
}

/* Room controls and staff navigation */
body .app #messages .message-meta button[data-role],
body .app aside #userList .directory-user[data-role] .person-info b,
body .app aside #myName[data-role],
#panelDialog .profile-title h2 {font-weight:400}
body .app main #messages .system-line {color:#b51c2b;font-weight:750;padding:3px 0;border-bottom:1px solid #f2dbe0}
#messages .message-actions {margin-inline-start:auto;white-space:nowrap}
#messages .message-actions button,#messages .reply-link {padding:2px 5px;border:0;background:#f3edfa;color:#594568;border-radius:4px;font-size:11px}
#messages .message-actions button+button {margin-inline-start:3px;color:#92293a}
#messages .message:focus {outline:2px solid #9065c4}
#replyDraft:not([hidden]) {background:#f4eafa;color:#493058;padding:4px 8px;border-inline-start:3px solid #9864cb}
#userList .roster-avatar {position:relative;margin-bottom:7px}
#userList .presence-icon {position:absolute;bottom:-6px;left:0;font:700 12px/13px sans-serif;border-radius:50%;background:white;width:13px;height:13px;text-align:center}
.presence-icon.online {color:#147540}.presence-icon.offline {color:#737786}.presence-icon.away {color:#965500}
#panelDialog .studio-tabs {display:flex;flex-wrap:wrap;gap:5px}
#panelDialog #panelContent .studio-tabs button {background:linear-gradient(#fbf8ff,#e8def7);color:#4c3267;border-color:#d4c3e3}
#panelDialog #panelContent .studio-tabs button.selected {background:#5e3d89;color:white}
#panelContent [data-studio-page][hidden]{display:none}
#panelContent .profile-group {border:1px solid #dacae8;border-radius:9px;padding:10px;margin:8px 0}
#panelContent .profile-group summary {color:#523368;font-weight:700;cursor:pointer}
#panelContent .profile-group[open] summary {margin-bottom:10px}
@media(max-width:650px){#messages .message{flex-wrap:wrap}.studio-tabs button{font-size:12px}}
#profileIdentity #myAvatar {position:relative;overflow:visible}
#myAvatar > img,#myAvatar > video {border-radius:inherit}
#myAvatar .presence-icon {position:absolute;bottom:-4px;left:-2px;border-radius:50%;background:white;font:700 14px/14px sans-serif}
#panelContent [data-studio=people]{--section-accent:#3575ba}
#panelContent [data-studio=rooms]{--section-accent:#8c55aa}
#panelContent [data-studio=bans]{--section-accent:#b04855}
#panelContent [data-studio=audit]{--section-accent:#287c72}
#panelContent [data-studio=reports]{--section-accent:#9d6823}
#panelDialog #panelContent .studio-tabs button {box-shadow:inset 0 -3px var(--section-accent,#9273ab)}
#panelContent:has(> .portrait) > h2 {font-weight:400}

/* Staff tools have consistent colors across the overview and action pages. */
#panelDialog #panelContent .studio-tabs button {
  color:var(--section-ink,#493467);background:linear-gradient(150deg,#fff,var(--section-fill,#e7dbf5));
  border-color:var(--section-fill,#d7cbe7);box-shadow:inset 0 -2px currentColor;
}
#panelDialog #panelContent .studio-tabs button.selected {outline:2px solid currentColor;outline-offset:-2px}
#panelContent [data-studio=home]{--section-fill:#d8e8ff;--section-ink:#204f8c}
#panelContent [data-studio=people]{--section-fill:#bcefe4;--section-ink:#126659}
#panelContent [data-studio=admins]{--section-fill:#e4ccfe;--section-ink:#60348f}
#panelContent [data-studio=rooms]{--section-fill:#ccecf9;--section-ink:#225774}
#panelContent [data-studio=bans]{--section-fill:#ffd3d6;--section-ink:#912638}
#panelContent [data-studio=reports]{--section-fill:#ffdfb6;--section-ink:#81480c}
#panelContent [data-studio=audit]{--section-fill:#dae6eb;--section-ink:#344f60}
#panelContent [data-studio=announcement]{--section-fill:#ffd1b9;--section-ink:#8b4126}
#panelContent [data-studio=branding]{--section-fill:#fbd1ef;--section-ink:#84336e}
#panelContent [data-studio=network]{--section-fill:#c2e7fc;--section-ink:#1e5885}
#panelContent [data-studio=gifts]{--section-fill:#ffd9e8;--section-ink:#92315e}
#panelContent [data-studio=spam]{--section-fill:#ecd6c7;--section-ink:#74442d}
#panelContent [data-studio=coins]{--section-fill:#ffe793;--section-ink:#785009}
#panelContent [data-studio=server]{--section-fill:#d1eec6;--section-ink:#386332}
body .app aside #myName:is([data-role=owner],[data-role=admin],[data-role=mod]),
body .app aside #userList .directory-user:is([data-role=owner],[data-role=admin],[data-role=mod]) .person-info b,
body .app #messages .message-meta button:is([data-role=owner],[data-role=admin],[data-role=mod]),
#panelDialog #panelContent h2:has(.staff-png) {font-weight:800}
body .app #messages .message-meta button[data-role=member],body .app #messages .message-meta button[data-role=guest]{font-weight:400}
#panelContent :is(#addUserAccount,#addAdminAccount){color:#245865;background:#dbf2ee;font-weight:700}
#panelContent #addAdminAccount{color:#553473;background:#edddff}
body .app main #roomAd:not([hidden]){display:block;flex:0 0 auto;margin:0;padding:6px 12px;color:#58275d;background:linear-gradient(100deg,#fff1c9,#ffe6f3);border-block:1px solid #e8bfd4}
body .app main #roomAd a{color:#3e428b}
#privatePopup[hidden]{display:none}
#privatePopup:not([hidden]){
  position:fixed;inset:auto 12px 12px auto;margin:0;z-index:9999;box-sizing:border-box;
  width:min(380px,calc(100vw - 24px));height:min(420px,85dvh);display:flex;flex-direction:column;
  overflow:hidden;border:1px solid #b99ddc;border-radius:14px;padding:0;background:#fff;color:#352645;
  box-shadow:0 12px 38px #321e5340;
}
#privatePopup.pm-large:not([hidden]){inset:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px)}
#privatePopup .pm-head{display:flex;align-items:center;gap:6px;background:linear-gradient(105deg,#573a95,#8d427f);color:white;padding:8px 12px}
#privatePopup .pm-head strong{flex:1}
#privatePopup button{padding:5px 9px;color:#44335b;background:#f5effb;border:1px solid #d9c9e9;border-radius:7px}
#privatePopup .pm-threads{display:flex;gap:4px;overflow:auto;padding:6px;flex:none}
#privatePopup .pm-threads [aria-pressed=true]{background:#e7d7fa;border-color:#9673bd}
#privatePopup .pm-log{flex:1;min-height:0;overflow:auto;padding:4px 12px}
#privatePopup .pm-log p{margin:4px 0;overflow-wrap:anywhere;color:#352645}
#privatePopup .pm-form{display:flex;gap:6px;align-items:end;padding:8px}
#privatePopup label{flex:1;min-width:0;color:#554365;font-size:12px}
#privatePopup input{display:block;width:100%;box-sizing:border-box;background:white;color:#302543}
#privatePopup .pm-form button{background:#225fb1;color:white}
#privatePopup .pm-full{align-self:start;margin:0 8px 8px}
#panelContent [data-studio-page] button:not([data-studio]){
  color:var(--ctl-ink,#334f6d);background:linear-gradient(#fff,var(--ctl-fill,#d8e9f7));font-weight:650;
}
#panelContent [data-mod=kick],#panelContent [data-studio-page=reports]{--ctl-fill:#ffdfb6;--ctl-ink:#794813}
#panelContent [data-mod=ban],#panelContent [data-room-remove],#panelContent [data-studio-page=spam]{--ctl-fill:#ffd3d9;--ctl-ink:#89293d}
#panelContent [data-mod=mute],#panelContent [data-studio-page=admins],#panelContent #addAdminAccount{--ctl-fill:#e6d8fb;--ctl-ink:#513574}
#panelContent [data-mod=unmute],#panelContent [data-studio-page=bans],#panelContent #addUserAccount{--ctl-fill:#c9ebd8;--ctl-ink:#24573a}
#panelContent [data-studio-page=coins]{--ctl-fill:#ffe79e;--ctl-ink:#6a4d12}
#panelContent [data-studio-page=gifts],#panelContent [data-studio-page=branding]{--ctl-fill:#ffd8ee;--ctl-ink:#753158}
#panelContent [data-studio-page=announcement]{--ctl-fill:#ffe2cf;--ctl-ink:#773e1a}
#messages .room-announcement{padding:4px 6px;border-inline-start:3px solid #cc7f38;background:#fff6e5;color:#724a25;font-size:12px;overflow-wrap:anywhere}
#messages .room-announcement a{color:#513b84}