:root{
  --win-blue:#0756aa;
  --win-blue-light:#4ca3ef;
  --win-line:#7f9db9;
  --surface:#eef6ff;
  --panel:#ffffff;
  --text:#10283e;
  --muted:#687d90;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%}
body{font-family:Tahoma,Verdana,Arial,sans-serif;color:var(--text)}
button,select,input,textarea{font:inherit}
.chat-page{overflow:hidden;padding:10px;background:linear-gradient(135deg,#cfe5f8,#f7fbff)}
.chat-shell{
  width:min(100%,1280px);
  height:calc(100vh - 20px);
  margin:auto;
  display:grid;
  grid-template-rows:auto auto auto auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid #315f88;
  background:var(--surface);
  box-shadow:0 22px 70px rgba(0,38,75,.28)
}
.chat-header{
  min-height:58px;
  padding:7px 8px 7px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:white;
  background:linear-gradient(180deg,var(--win-blue-light),#1671c7 45%,var(--win-blue) 46%,#08498e);
  box-shadow:inset 0 1px rgba(255,255,255,.7)
}
.chat-brand{display:flex;align-items:center;gap:10px}
.butterfly-logo{width:48px;height:38px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));animation:flutter 4s ease-in-out infinite}
.chat-brand strong,.chat-brand small{display:block}
.chat-brand strong{font-size:1.08rem;text-shadow:0 1px #00386d}
.chat-brand small{opacity:.9}
.window-controls{display:flex;gap:3px}
.window-controls button{
  width:27px;height:24px;padding:0;border:1px solid rgba(255,255,255,.7);border-radius:2px;
  color:white;background:linear-gradient(#4b9be1,#1261aa)
}
.window-controls button:last-child{background:linear-gradient(#e87a6d,#b72f26)}
.chat-menu-bar{
  min-height:27px;padding:3px 8px;display:flex;gap:18px;align-items:center;
  border-bottom:1px solid #b8cad8;background:#f4f7fa;font-size:.78rem
}
.format-toolbar{
  min-height:42px;padding:5px 7px;display:flex;align-items:center;gap:5px;
  border-bottom:1px solid #97b0c4;background:linear-gradient(#ffffff,#e4edf4)
}
.format-toolbar button,.format-toolbar select,.leave-link{
  min-height:29px;padding:4px 8px;border:1px solid #7f9db9;border-radius:2px;
  background:linear-gradient(#fff,#dce9f2);color:#17344e;text-decoration:none
}
.format-toolbar button.active{background:#c5def1;box-shadow:inset 0 0 0 1px #75a7cd}
.format-toolbar select{max-width:140px}
.toolbar-spacer{flex:1}
.status-control{display:flex;align-items:center;gap:5px}
.status-control select{min-width:145px}
#my-status-icon{width:22px;text-align:center}
.colour-a{font-weight:900;border-bottom:3px solid currentColor}
.room-topic{
  min-height:35px;padding:6px 10px;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid #9cb5c9;background:linear-gradient(#fff,#e9f3fb)
}
.room-topic img{width:25px;height:20px}
.room-topic b{color:#164d7e}
.chat-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 270px}
.message-panel{position:relative;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto auto}
.messages{min-height:0;overflow-y:auto;padding:8px 10px;background:white}
.msg{padding:5px 6px;border-bottom:1px solid #edf1f4}
.message-meta{display:flex;align-items:center;justify-content:space-between;gap:15px}
.message-meta strong{display:flex;align-items:center;gap:5px;font-size:.8rem}
.message-role img{width:18px;height:18px;display:block}
.msg p{margin:3px 0 3px 24px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg time{color:#71869a;font-size:.68rem}
.msg.system{
  display:flex;align-items:center;justify-content:space-between;
  margin:4px 0;padding:7px 9px;border:1px solid #dfd1ee;background:#faf6ff;color:#704594;font-style:italic
}
.chat-smiley{width:22px;height:22px;vertical-align:-6px}
.typing{min-height:22px;padding:2px 11px;color:#60798e;background:#f7fbff;font-size:.74rem;font-style:italic}
#message-form{
  display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:5px;padding:5px;
  border-top:1px solid #9cb5c9;background:#e8f2fa
}
#message-form textarea{resize:none;padding:8px;border:1px solid #7f9db9;background:white}
#message-form button{border:1px solid #66859e;background:linear-gradient(#fff,#d6e5ef)}
.bottom-status-bar{
  min-height:25px;display:grid;grid-template-columns:1fr auto auto;gap:15px;padding:3px 8px;
  border-top:1px solid #9cb5c9;background:#e9f1f7;color:#536a7c;font-size:.7rem
}
.scroll-bottom{
  position:absolute;right:285px;bottom:112px;z-index:5;padding:6px 10px;border:1px solid #66859e;
  border-radius:13px;background:#e7f3fc;color:#164d7e;box-shadow:0 3px 10px rgba(0,0,0,.15)
}
.people-panel{min-height:0;padding:10px;border-left:1px solid #9cb5c9;background:linear-gradient(#f8fcff,#e4f0f8)}
.people-heading{padding-bottom:8px;border-bottom:1px solid #b9ccdb}
.people-heading h2{margin:0;color:#164d7e;font-size:1.04rem}
.people-heading small{color:#6d8192}
#people{height:calc(100% - 50px);overflow-y:auto}
.person{padding:7px 5px;border-bottom:1px solid #d7e5ef;cursor:default}
.person:hover{background:#d9ebfa}
.person-main{display:flex;align-items:center;gap:5px;min-width:0}
.person-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.presence-icon{width:21px;height:21px;display:grid;place-items:center;flex:0 0 21px}
.role-icon{width:20px;height:20px;display:grid;place-items:center}
.role-icon img{max-width:19px;max-height:19px}
.status-online{color:#16a34a}
.status-away{font-size:1rem}
.status-brb{color:#7c3aed}
.status-busy{font-size:.9rem}
.status-phone{color:#1d5c97}
.status-lunch{font-size:.95rem}
.person small{display:block;margin-left:46px;color:#6e8192;font-size:.66rem}
.person.ignored{opacity:.45}
.context-menu{
  position:fixed;z-index:99999;width:205px;padding:4px;border:1px solid #596d7c;
  background:white;box-shadow:3px 3px 12px rgba(0,0,0,.3)
}
.context-menu button{display:block;width:100%;padding:7px;text-align:left;border:0;background:white}
.context-menu button:hover{background:#dcecff}
.toolbar-popup{
  position:fixed;z-index:80000;padding:10px;border:1px solid #5e7890;background:#f5f9fc;
  box-shadow:3px 4px 15px rgba(0,0,0,.28)
}
.toolbar-popup>strong{display:block;margin-bottom:7px;color:#164d7e}
.colour-popup{top:115px;left:265px;width:190px}
.colour-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.colour-grid button{height:24px;border:1px solid #51697c}
.smiley-popup{top:115px;left:315px}
.smiley-popup>div{display:flex;gap:5px}
.smiley-popup button{padding:4px;border:1px solid #8aa5ba;background:white}
.smiley-popup img{width:30px;height:30px}
.whisper-window{
  position:fixed;z-index:10000;width:370px;height:320px;right:24px;bottom:24px;
  display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;
  border:2px solid #1b5d9f;background:#eef6ff;box-shadow:0 20px 60px rgba(0,0,0,.35)
}
.whisper-window header{
  display:flex;justify-content:space-between;align-items:center;padding:5px 6px;color:white;
  background:linear-gradient(180deg,#4ca3ef,#1671c7 48%,#0756aa 49%,#084a91);cursor:move
}
.whisper-window header>div{display:flex;align-items:center;gap:6px}
.whisper-window header img{width:27px;height:21px}
.whisper-window header button{color:white;border:1px solid rgba(255,255,255,.6);background:#1d65ad}
.whisper-window.min{height:35px;overflow:hidden}
.whisper-contact{padding:5px 8px;border-bottom:1px solid #9cb5c9;background:#f8fbfe;color:#5d7488;font-size:.72rem}
.whisper-body{overflow-y:auto;padding:8px;background:white}
.whisper-body>div{max-width:86%;margin:5px 0;padding:7px;border-radius:8px;background:#e9f2fa}
.whisper-body .mine{margin-left:auto;background:#d8f0e5}
.whisper-body p{margin:3px 0}
.whisper-body time{font-size:.66rem;color:#708092}
.whisper-window form{display:grid;grid-template-columns:1fr auto;padding:5px;background:#e8f2fa}
.whisper-window textarea{resize:none;padding:7px;border:1px solid #8aa4b9}
.whisper-window form button{border:1px solid #758fa5;background:linear-gradient(#fff,#d7e5ee)}
.whisper-state{min-height:18px;padding:0 6px;color:#a21f1f}
.toast-area{position:fixed;z-index:120000;right:20px;top:20px;display:grid;gap:9px}
.chat-toast{
  width:min(330px,calc(100vw - 40px));display:flex;gap:10px;padding:12px;
  border:1px solid #6e91ad;border-radius:5px;background:linear-gradient(#fff,#e8f3fb);
  box-shadow:0 10px 35px rgba(0,0,0,.25);transform:translateX(120%);transition:.25s
}
.chat-toast.show{transform:translateX(0)}
.chat-toast>span{font-size:1.45rem}
.chat-toast strong,.chat-toast small{display:block}
.chat-toast small{margin-top:2px;color:#61778a}
.user-card{
  position:fixed;z-index:110000;width:240px;padding:12px;border:1px solid #7696ae;
  background:linear-gradient(#fff,#e8f3fa);box-shadow:0 10px 30px rgba(0,0,0,.25)
}
.user-card-title{display:flex;gap:7px;align-items:center;padding-bottom:8px;border-bottom:1px solid #bed0dd}
.user-card>div:not(.user-card-title){display:flex;justify-content:space-between;gap:10px;padding:5px 0}
.user-card span,.user-card small{color:#657c8f}
dialog{border:2px solid #1b5d9f;background:#eef6ff}
dialog form{display:grid;gap:12px;min-width:290px}
dialog pre{white-space:pre-wrap}
.theme-night{
  --surface:#182330;--panel:#111820;--text:#e7eef5;--muted:#93a6b8;
  background:#0d141c;color:var(--text)
}
.theme-night .chat-shell{border-color:#416079;background:#182330}
.theme-night .chat-menu-bar,.theme-night .format-toolbar,.theme-night .room-topic,
.theme-night .bottom-status-bar,.theme-night .typing{background:#1d2a36;color:#d8e5ee}
.theme-night .messages,.theme-night #message-form textarea,.theme-night .whisper-body{background:#10171f;color:#e7eef5}
.theme-night .msg{border-color:#293743}
.theme-night .people-panel{background:#17222c}
.theme-night .person:hover{background:#263746}
@keyframes flutter{0%,90%,100%{transform:rotate(0) scaleX(1)}94%{transform:rotate(-3deg) scaleX(.85)}97%{transform:rotate(3deg) scaleX(1.05)}}
@media(max-width:850px){
  .chat-page{padding:0}
  .chat-shell{height:100vh}
  .chat-menu-bar{display:none}
  .format-toolbar{flex-wrap:wrap}
  .toolbar-spacer{display:none}
  .chat-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 150px}
  .people-panel{border-left:0;border-top:1px solid #9cb5c9}
  .scroll-bottom{right:15px;bottom:260px}
  .whisper-window{width:calc(100% - 20px);right:10px;bottom:10px}
}

/* Socudya Chat 6.44 — live room snapshot and optional host entry */
.join-host-code{margin:15px 0 0;border:1px solid #c0d4e4;border-radius:6px;background:#f4f9fd}
.join-host-code summary{padding:10px 12px;cursor:pointer;color:#315d7f;font-size:.82rem;font-weight:700}
.join-host-code[open]{padding-bottom:11px}.join-host-code[open] summary{margin-bottom:3px}
.join-host-code label,.join-host-code input{margin-left:11px;margin-right:11px;width:calc(100% - 22px)}
.join-room-snapshot{margin:18px 0 0;padding:11px 13px;display:grid;gap:5px;border:1px solid #bfd4e4;border-radius:7px;background:linear-gradient(#f9fdff,#edf7fd);color:#526f85;font-size:.78rem;line-height:1.4}
.join-room-snapshot b{color:#174f7f}
@media(max-width:520px){.join-room-snapshot{margin-top:13px;padding:9px}.join-host-code{margin-top:11px}}

/* Socudya Chat 2.3 — responsive boxed join page */
.join-page{
  min-height:100%;
  overflow:auto;
  padding:max(22px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 5%,rgba(84,210,216,.18),transparent 28rem),linear-gradient(145deg,#edf7ff,#fff 48%,#eaf3fb);
  color:#102f49
}
.join-shell{
  width:min(100%,700px);
  overflow:hidden;
  border:1px solid #3976ae;
  border-radius:24px;
  background:rgba(249,253,255,.96);
  box-shadow:0 24px 70px rgba(24,74,116,.22),inset 0 1px rgba(255,255,255,.9)
}
.join-branding{
  min-height:238px;
  padding:30px 24px 22px;
  display:grid;
  justify-items:center;
  align-content:center;
  background:radial-gradient(circle at 50% 38%,rgba(67,179,236,.13),transparent 16rem),linear-gradient(180deg,#fafdff,#edf7ff)
}
.join-butterfly{
  width:150px;
  height:112px;
  margin-bottom:7px;
  filter:drop-shadow(0 7px 10px rgba(21,88,132,.15));
  animation:join-butterfly-float 4s ease-in-out infinite
}
.join-branding strong{
  font-size:clamp(2rem,7vw,3.25rem);
  line-height:1;
  letter-spacing:.22em;
  color:#102b50
}
.join-branding>span{
  margin-top:9px;
  font-size:1.12rem;
  font-weight:900;
  letter-spacing:.52em;
  color:#f07d32;
  transform:translateX(.26em)
}
.join-window{
  margin:0 28px 26px;
  overflow:hidden;
  border:1px solid #2164a8;
  border-radius:15px;
  background:#f8fcff;
  box-shadow:0 10px 28px rgba(35,85,125,.13),inset 0 1px #fff
}
.join-window-title{
  min-height:68px;
  padding:12px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  color:#fff;
  background:linear-gradient(180deg,#327dd4 0%,#1263ba 48%,#0753a2 49%,#0b4385 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.55)
}
.join-window-title h1{
  margin:0;
  font-size:clamp(1.45rem,4.4vw,2rem);
  line-height:1.15;
  text-align:center
}
.join-title-icon{
  position:relative;
  width:35px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#fff;
  color:#1560ae;
  font-weight:900
}
.join-title-icon::after{
  content:"";
  position:absolute;
  left:8px;
  bottom:-6px;
  border:6px solid transparent;
  border-top-color:#fff;
  transform:rotate(18deg)
}
.join-window-content{padding:24px 40px 28px}
.join-introduction{
  margin:0 0 25px;
  color:#18334c;
  font-size:1.08rem;
  line-height:1.5;
  text-align:center
}
.join-introduction span{color:#5b7185}
.join-error{
  margin-bottom:18px;
  padding:11px 13px;
  border:1px solid #dc8d8d;
  border-radius:8px;
  background:#fff0f0;
  color:#8b2020
}
#join-form{display:grid;gap:10px}
#join-form label{font-size:.94rem;font-weight:700;color:#18334c}
#nickname{
  width:100%;
  min-height:53px;
  padding:11px 14px;
  border:2px solid #2a68b6;
  border-radius:7px;
  outline:0;
  background:#fff;
  color:#102f49;
  font-size:1.05rem
}
#nickname:focus{
  border-color:#0d54a7;
  box-shadow:0 0 0 3px rgba(35,111,196,.15)
}
#join-button{
  width:100%;
  min-height:58px;
  margin-top:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:1px solid #1656a2;
  border-radius:8px;
  color:#fff;
  background:linear-gradient(180deg,#4b94e5 0%,#2673cb 46%,#0754ad 47%,#0a4388 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.65),0 4px 10px rgba(17,79,139,.18);
  font-size:1.16rem;
  font-weight:800;
  cursor:pointer
}
#join-button:disabled{cursor:wait;opacity:.8}
.join-connecting{
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#42637e;
  font-size:.88rem
}
.join-connecting img{
  width:31px;
  height:24px;
  animation:join-connecting 750ms ease-in-out infinite alternate
}
.join-separator{
  margin:22px 0 17px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:13px;
  color:#667d91
}
.join-separator::before,.join-separator::after{content:"";border-top:1px solid #b9cbd9}
.join-return{
  display:block;
  color:#125cb5;
  font-size:1rem;
  text-align:center;
  text-decoration:none
}
.join-return:hover{text-decoration:underline}
.join-footer{
  min-height:68px;
  padding:13px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-top:1px solid #b8d3e7;
  background:linear-gradient(180deg,#eaf6ff,#dceefa);
  color:#24465f;
  text-align:center
}
.join-footer img{width:35px;height:27px}
@keyframes join-butterfly-float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-7px) rotate(1deg)}
}
@keyframes join-connecting{
  from{transform:translateX(-4px) scale(.94)}
  to{transform:translateX(4px) scale(1.05)}
}
@media(max-width:700px){
  .join-page{align-items:start;padding-top:max(14px,env(safe-area-inset-top))}
  .join-shell{width:100%;border-radius:18px}
  .join-branding{min-height:170px;padding:20px 18px 15px}
  .join-butterfly{width:104px;height:78px;margin-bottom:4px}
  .join-branding strong{font-size:2rem}
  .join-branding>span{margin-top:6px;font-size:.85rem}
  .join-window{margin:0 12px 16px;border-radius:12px}
  .join-window-title{min-height:58px;padding:10px 12px}
  .join-title-icon{width:30px;height:26px;flex:0 0 30px}
  .join-window-title h1{font-size:1.35rem}
  .join-window-content{padding:20px 18px 23px}
  .join-introduction{margin-bottom:20px;font-size:.98rem}
  #nickname{min-height:51px;font-size:1rem}
  #join-button{min-height:56px}
  .join-footer{min-height:58px;padding:10px 14px;font-size:.82rem}
}
@media(max-width:390px){
  .join-branding{min-height:145px}
  .join-butterfly{width:85px;height:64px}
  .join-branding strong{font-size:1.65rem}
  .join-window-title h1{font-size:1.16rem}
  .join-window-content{padding-left:14px;padding-right:14px}
  .join-footer span{max-width:240px}
}
@media(max-height:650px) and (orientation:landscape){
  .join-page{display:block}
  .join-shell{margin:auto}
  .join-branding{
    min-height:115px;
    grid-template-columns:auto auto;
    column-gap:13px
  }
  .join-butterfly{
    width:75px;height:56px;grid-row:1 / span 2;margin:0
  }
  .join-branding strong{align-self:end;font-size:1.65rem}
  .join-branding>span{align-self:start;margin-top:3px}
}
@media(prefers-reduced-motion:reduce){
  .join-butterfly,.join-connecting img{animation:none}
}

/* Chat 6.44.1 — one-column mobile join screen without horizontal clipping */
@media(max-width:700px){
  html,body,.join-page{width:100%;max-width:100vw;overflow-x:hidden}
  .join-page{padding:max(8px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))}
  .join-shell,.join-branding,.join-window,.join-window-title,.join-window-content,
  #join-form,.join-room-snapshot,.join-footer{width:100%;max-width:100%;min-width:0}
  .join-shell{border-radius:13px}
  .join-branding{min-height:105px;padding:11px 12px 9px}
  .join-butterfly{width:60px;height:45px;margin-bottom:2px}
  .join-branding strong{font-size:1.42rem;letter-spacing:.17em}
  .join-branding>span{margin-top:3px;font-size:.68rem;letter-spacing:.42em}
  .join-window{width:auto;max-width:calc(100% - 12px);margin:0 6px 9px;border-radius:9px}
  .join-window-title{min-height:48px;padding:7px 9px;gap:8px}
  .join-title-icon{width:27px;height:24px;flex-basis:27px}
  .join-window-title h1{min-width:0;font-size:1.08rem}
  .join-window-content{padding:12px 12px 14px}
  .join-introduction{margin-bottom:11px;font-size:.88rem;line-height:1.35}
  #join-form{gap:7px}
  #nickname{max-width:100%;min-width:0;min-height:46px;padding:8px 10px;font-size:1rem}
  #join-button{max-width:100%;min-width:0;min-height:47px;margin-top:4px;font-size:1rem}
  .join-host-code{max-width:100%;margin-top:7px;overflow:hidden}
  .join-host-code summary{padding:8px 9px;font-size:.76rem}
  .join-host-code label,.join-host-code input{max-width:calc(100% - 18px);margin-left:9px;margin-right:9px;width:calc(100% - 18px)}
  .join-room-snapshot{margin-top:8px;padding:7px 8px;gap:3px;font-size:.71rem;overflow-wrap:anywhere}
  .join-separator{margin:10px 0 8px}
  .join-return{font-size:.88rem}
  .join-footer{min-height:42px;padding:7px 10px;font-size:.72rem}
  .join-footer img{width:28px;height:21px}
}
@media(max-width:390px){
  .join-branding{min-height:92px}
  .join-butterfly{width:52px;height:39px}
  .join-branding strong{font-size:1.28rem}
  .join-window-content{padding-inline:10px}
}
@media(max-width:700px) and (max-height:740px){
  .join-branding{min-height:78px;grid-template-columns:auto auto;column-gap:9px}
  .join-butterfly{width:48px;height:36px;grid-row:1 / span 2;margin:0}
  .join-branding strong{align-self:end;font-size:1.22rem}
  .join-branding>span{align-self:start;margin-top:2px}
  .join-window-title{min-height:43px}
  .join-window-content{padding-top:9px;padding-bottom:10px}
  .join-introduction{margin-bottom:8px;font-size:.82rem}
  .join-footer{display:none}
}


/* Core 2.3 — mobile-only toolbar and people-list refinement */
.mobile-chat-toolbar,.mobile-tool-panel{display:none}
.person-main{display:grid;grid-template-columns:21px 20px minmax(0,1fr);align-items:center}
.person small{margin-left:46px}
@media(max-width:850px){
  .format-toolbar{display:none}
  .format-toolbar.mobile-expanded{
    position:fixed;
    z-index:90000;
    left:8px;
    right:8px;
    top:96px;
    display:flex;
    padding:8px;
    border:1px solid #6d8ba2;
    box-shadow:0 12px 35px rgba(0,0,0,.28)
  }
  .chat-menu-bar{display:none}
  .mobile-chat-toolbar{
    min-height:43px;
    padding:5px 7px;
    display:grid;
    grid-template-columns:minmax(0,1.5fr) 1fr 46px 1fr;
    gap:5px;
    border-bottom:1px solid #97b0c4;
    background:linear-gradient(#fff,#e4edf4)
  }
  .mobile-chat-toolbar button,.mobile-status-control{
    min-height:32px;
    border:1px solid #7f9db9;
    border-radius:3px;
    background:linear-gradient(#fff,#dce9f2)
  }
  .mobile-status-control{display:flex;align-items:center;padding:0 5px}
  .mobile-status-control select{width:100%;min-width:0;border:0;background:transparent}
  .mobile-tool-panel{
    position:absolute;
    z-index:85000;
    top:103px;
    left:7px;
    right:7px;
    padding:7px;
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    border:1px solid #718da3;
    background:#f2f8fc;
    box-shadow:0 10px 28px rgba(0,0,0,.24)
  }
  .mobile-tool-panel[hidden]{display:none}
  .mobile-tool-panel button,.mobile-tool-panel a{
    flex:1;
    min-width:64px;
    padding:8px;
    border:1px solid #7f9db9;
    background:linear-gradient(#fff,#dce9f2);
    color:#17344e;
    text-align:center;
    text-decoration:none
  }
  .chat-shell{grid-template-rows:auto auto auto minmax(0,1fr)}
  .colour-popup,.smiley-popup{top:105px;left:10px;right:10px;width:auto}
}
.theme-night .mobile-chat-toolbar,.theme-night .mobile-tool-panel{background:#1d2a36}
.theme-night .mobile-chat-toolbar button,.theme-night .mobile-status-control,
.theme-night .mobile-tool-panel button,.theme-night .mobile-tool-panel a{background:#263746;color:#e7eef5;border-color:#58748a}


/* Core 2.4 — people list and expanded smiley picker */
.people-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.person{border-radius:4px}.person:hover{box-shadow:inset 0 0 0 1px #9cbcd5}
.person-main{grid-template-columns:22px 22px minmax(0,1fr)}
.role-icon img{width:21px;height:21px}
.smiley-popup{width:260px}
.smiley-tabs{display:flex;gap:4px;margin-bottom:8px}
.smiley-tabs button{flex:1;padding:6px;border:1px solid #8aa5ba;background:#edf5fb}
.smiley-tabs button.active{background:#cfe5f7;font-weight:700}
.smiley-page{display:none;grid-template-columns:repeat(5,1fr);gap:5px}
.smiley-page.active{display:grid}
.smiley-page button{min-height:42px;display:grid;place-items:center;font-size:1.25rem}
.smiley-page img{width:31px;height:31px}


/* ------------------------------------------------------------------
   Core 2.5 — mobile smiley picker and touch refinements
------------------------------------------------------------------- */
@media(max-width:850px){
  #mobile-smiley-btn{
    position:relative;
    z-index:2;
    touch-action:manipulation;
    cursor:pointer;
  }

  .smiley-popup{
    position:fixed;
    z-index:160000;
    top:auto !important;
    left:10px !important;
    right:10px !important;
    bottom:
      max(
        86px,
        calc(72px + env(safe-area-inset-bottom))
      ) !important;
    width:auto !important;
    max-height:min(58vh,430px);
    overflow-y:auto;
    padding:12px;
    border-radius:9px;
    box-shadow:0 18px 45px rgba(0,0,0,.36);
    -webkit-overflow-scrolling:touch;
  }

  .smiley-tabs{
    position:sticky;
    z-index:2;
    top:-12px;
    margin:-12px -12px 10px;
    padding:10px 12px 8px;
    background:inherit;
  }

  .smiley-page{
    grid-template-columns:repeat(5,minmax(44px,1fr));
    gap:7px;
  }

  .smiley-page button{
    min-width:44px;
    min-height:48px;
    padding:5px;
    touch-action:manipulation;
  }

  .smiley-page img{
    width:33px;
    height:33px;
  }

  .theme-night .smiley-popup{
    color:#e7eef5;
    border-color:#58748a;
    background:#1d2a36;
  }

  .theme-night .smiley-tabs button,
  .theme-night .smiley-page button{
    color:#e7eef5;
    border-color:#58748a;
    background:#263746;
  }
}

@media(max-width:390px){
  .smiley-page{
    grid-template-columns:repeat(4,minmax(44px,1fr));
  }
}

/* ------------------------------------------------------------------
   Chat 2.6 — audit repairs, authentic host hammers and composer smileys
------------------------------------------------------------------- */
.window-controls{display:flex;gap:3px}
.window-controls button{cursor:pointer}
.chat-shell.window-maximised{position:fixed;inset:0;z-index:150000;width:100vw;height:100dvh;max-width:none}
.chat-shell.window-minimised{height:auto;min-height:0}
.chat-shell.window-minimised .chat-menu-bar,
.chat-shell.window-minimised .format-toolbar,
.chat-shell.window-minimised .mobile-chat-toolbar,
.chat-shell.window-minimised .mobile-tool-panel,
.chat-shell.window-minimised .room-topic,
.chat-shell.window-minimised .chat-layout{display:none!important}

.message-role img,.role-icon img{
  width:18px;height:18px;max-width:none;max-height:none;
  image-rendering:pixelated;filter:drop-shadow(1px 1px 0 rgba(0,0,0,.25))
}
.role-icon{width:22px;height:22px}
.person-main{grid-template-columns:21px 22px minmax(0,1fr)}
.person small{margin-left:48px}

#message-form{
  grid-template-columns:minmax(0,1fr) auto 90px;
  align-items:stretch;
}
#message-form textarea{min-height:48px}
#message-form button{min-height:48px;padding:7px 12px;cursor:pointer}
#message-form button:disabled{cursor:wait;opacity:.7}
.compose-smiley-btn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  min-width:94px;color:#163f65;font-weight:700;
  background:linear-gradient(#fff,#d8e9f4)!important
}
.compose-smiley-btn::first-letter{font-size:1.45rem;color:#d49400}
.send-btn{font-weight:800;color:#123b60}

.smiley-popup{
  position:fixed;width:min(390px,calc(100vw - 24px));max-height:min(440px,70vh);
  overflow:auto;padding:10px;border:2px solid #66839a;border-radius:4px;
  background:#eef6fb;box-shadow:4px 5px 18px rgba(0,0,0,.32)
}
.smiley-popup-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.smiley-popup-heading strong{color:#164d7e}
.smiley-popup-heading button{width:28px;height:25px;padding:0;border:1px solid #758da0;background:linear-gradient(#fff,#d6e5ef);font-weight:800}
.smiley-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px}
.smiley-page{display:none;grid-template-columns:repeat(5,minmax(48px,1fr));gap:6px}
.smiley-page.active{display:grid}
.smiley-page button{
  min-width:48px;min-height:50px;padding:5px;display:grid;place-items:center;
  border:1px solid #91a8ba;border-radius:3px;background:#fff;cursor:pointer
}
.smiley-page button:hover,.smiley-page button:focus{background:#d8ecfa;outline:2px solid #3b7cb0;outline-offset:-2px}
.smiley-page img{width:34px;height:34px;image-rendering:auto}
.smiley-help{display:block;margin-top:8px;color:#5f7384;text-align:center}
.theme-night .smiley-popup{background:#1d2a36;border-color:#58748a;color:#e7eef5}
.theme-night .smiley-popup-heading strong{color:#d7ecfb}
.theme-night .smiley-page button,.theme-night .smiley-popup-heading button{background:#263746;color:#e7eef5;border-color:#58748a}

@media(max-width:850px){
  .chat-shell{height:100dvh}
  #message-form{grid-template-columns:minmax(0,1fr) 52px 72px;gap:4px;padding-bottom:max(5px,env(safe-area-inset-bottom))}
  .compose-smiley-btn{min-width:0;padding:4px!important;font-size:1.4rem}
  .compose-smiley-btn span{display:none}
  .send-btn{padding-inline:8px!important}
  .smiley-popup{
    left:8px!important;right:8px!important;bottom:max(76px,calc(68px + env(safe-area-inset-bottom)))!important;
    width:auto!important;max-height:min(62vh,460px)
  }
  .smiley-page{grid-template-columns:repeat(5,minmax(44px,1fr))}
  .smiley-page button{min-width:44px;min-height:48px}
  .people-panel{min-height:120px}
}
@media(max-width:390px){
  #message-form{grid-template-columns:minmax(0,1fr) 48px 65px}
  .smiley-page{grid-template-columns:repeat(4,minmax(44px,1fr))}
}

/* Socudya Chat 3.0 — focused MSN-era room redesign */
:root{
  --chat-blue-deep:#003f84;
  --chat-blue:#0b67bf;
  --chat-blue-light:#70b8ec;
  --chat-silver:#e8f0f7;
  --chat-line:#91adc4;
}
.chat-page{padding:6px;background:linear-gradient(145deg,#d9ecfb 0%,#f9fcff 48%,#c8e1f4 100%)}
.chat-shell{
  width:min(100%,1440px);height:calc(100vh - 12px);border:1px solid #1a5d96;border-radius:8px;
  grid-template-rows:auto auto auto auto minmax(0,1fr);box-shadow:0 20px 60px rgba(11,54,93,.30),inset 0 1px #fff
}
.chat-header{min-height:52px;padding:5px 8px 5px 10px;border-radius:7px 7px 0 0;background:linear-gradient(180deg,#49a4e8 0%,#1273c8 40%,#0758a8 41%,#003f84 100%)}
.butterfly-logo{width:44px;height:34px}.chat-brand strong{font-size:1.18rem}.chat-brand small{font-size:.78rem}
.chat-menu-bar{min-height:25px;padding:2px 8px;gap:6px;background:linear-gradient(#fff,#e7eef5);border-bottom:1px solid #a9bccb}
.menu-trigger{padding:3px 9px;border:1px solid transparent;background:transparent;border-radius:2px}.menu-trigger:hover,.menu-trigger.open{border-color:#8ca9bf;background:#d9eaf7}
.format-toolbar{min-height:40px;padding:4px 7px;background:linear-gradient(#fdfefe,#dae7f1);box-shadow:inset 0 1px #fff}
.format-toolbar button,.format-toolbar select,.leave-link{min-height:28px;border-color:#8da8bd;background:linear-gradient(#fff,#dbe8f1);box-shadow:inset 0 1px #fff}
.status-control{padding-left:8px;border-left:1px solid #b6c7d4}.status-control select{min-width:150px;font-weight:700;color:#164d7e}
.room-topic{min-height:33px;background:linear-gradient(90deg,#f9fcff,#e8f4fd);border-bottom-color:#8facbf}
.room-topic b{font-size:1.02rem}.room-privacy-note{margin-left:auto;color:#5f7588;font-size:.7rem}
.chat-layout{grid-template-columns:minmax(0,1fr) 245px;background:#fff}
.message-panel{grid-template-rows:minmax(0,1fr) auto auto auto}
.messages{padding:8px 12px;background:linear-gradient(180deg,#fff,#fbfdff)}
.msg{padding:6px 5px;border-bottom:1px solid #e7eef4}.msg:hover{background:#f5faff}
.message-meta strong{font-size:.82rem}.message-role img{width:16px;height:16px;image-rendering:pixelated}
.msg p{margin:2px 0 3px 22px}.msg.system{margin:3px 0;padding:5px 8px;border:0;border-left:3px solid #8c6bb1;background:#f7f2fb;font-size:.8rem}
.chat-smiley{width:19px;height:19px;vertical-align:-5px;image-rendering:auto}
.typing{min-height:19px;padding:1px 10px;background:#f4f9fd;font-size:.7rem}
#message-form{grid-template-columns:minmax(0,1fr) 48px 82px;gap:4px;padding:5px;background:linear-gradient(#edf5fb,#dae9f4)}
#message-form textarea{min-height:58px;border:1px solid #7193ad;box-shadow:inset 1px 1px 2px rgba(0,0,0,.08);font-size:.92rem}
.compose-smiley-btn{padding:0!important;display:grid!important;place-items:center!important;font-size:1.5rem!important;color:#174f84!important}
.compose-smiley-btn span{display:none}.send-btn{font-weight:800;color:#0b477d!important;font-size:1rem}
.bottom-status-bar{min-height:23px;grid-template-columns:1fr auto auto;background:linear-gradient(#eef5fa,#dce8f1);font-size:.68rem}
.people-panel{padding:8px;border-left:1px solid #8faabf;background:linear-gradient(180deg,#f8fcff,#e8f3fb)}
.people-heading{display:flex;align-items:end;justify-content:space-between;gap:8px;padding:3px 4px 7px}.people-heading h2{font-size:1rem}.people-heading small{max-width:135px;text-align:right;font-size:.65rem}
.person{padding:6px 4px;border-bottom:1px solid #d5e4ef;border-radius:3px}.person:hover{background:#dceefb}
.person-main{gap:4px}.presence-icon{width:16px;height:16px;flex-basis:16px;font-size:.75rem}.role-icon{width:18px;height:18px}.role-icon img{width:16px;height:16px;image-rendering:pixelated}.person small{margin-left:38px;font-size:.64rem}
.smiley-popup{width:min(420px,calc(100vw - 20px))!important;max-height:min(360px,calc(100vh - 110px));overflow:auto;padding:7px;border:2px solid #47789e;border-radius:4px;background:linear-gradient(#f4f9fd,#dcebf6)}
.smiley-popup-heading{display:flex!important;align-items:center;justify-content:space-between!important;margin-bottom:2px}.smiley-popup-heading strong{font-size:.95rem;color:#0b4d83}.smiley-popup-heading button{width:25px;height:23px;padding:0!important;font-weight:900}
.smiley-subheading{display:block!important;margin:0 0 6px;color:#62798c;font-size:.68rem}
.smiley-page{display:grid!important;grid-template-columns:repeat(10,1fr);gap:3px;margin:0 0 3px}
.smiley-page button{width:100%;aspect-ratio:1;padding:2px!important;border:1px solid #9db4c7!important;background:linear-gradient(#fff,#e7f1f8)!important;border-radius:2px}
.smiley-page button:hover{border-color:#3f78a5!important;background:#d9eefc!important;transform:translateY(-1px)}
.smiley-page img{width:22px!important;height:22px!important;image-rendering:auto}.smiley-help{display:block;margin-top:5px;text-align:center;color:#566f83;font-size:.66rem}
.scroll-bottom{right:258px;bottom:105px}
.context-menu{border-color:#4e6c83}.context-menu button:hover{background:#cfe8fa}
.window-minimised{height:52px!important;overflow:hidden}.window-maximised{width:100%!important;height:100vh!important;margin:0!important;border-radius:0!important}
@media(max-width:850px){
  .chat-page{padding:0}.chat-shell{height:100dvh;border-radius:0;border:0}
  .chat-header{min-height:48px;border-radius:0}.chat-brand strong{font-size:1rem}.chat-brand small{font-size:.69rem}
  .format-toolbar{display:none}.mobile-chat-toolbar{display:flex!important;min-height:42px;padding:5px;gap:5px;background:linear-gradient(#fff,#dce9f3);border-bottom:1px solid #92acc0}
  .mobile-chat-toolbar button,.mobile-chat-toolbar select{min-height:32px;border:1px solid #819fb6;background:linear-gradient(#fff,#dce8f1)}
  .mobile-status-control{display:flex;align-items:center;gap:4px;flex:1}.mobile-status-control select{width:100%}
  .room-topic{padding:5px 8px}.room-privacy-note{display:none}
  .chat-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 116px}
  .people-panel{padding:5px;border-left:0;border-top:1px solid #8faabf}.people-heading{padding:1px 3px 4px}.people-heading h2{font-size:.85rem}.people-heading small{font-size:.58rem}
  #people{height:80px;display:flex;gap:5px;overflow-x:auto;overflow-y:hidden}.person{min-width:135px;border:1px solid #c4d8e7;background:#f8fcff}
  #message-form{grid-template-columns:minmax(0,1fr) 44px 68px}.messages{padding:5px 7px}.msg p{margin-left:18px}
  .bottom-status-bar{grid-template-columns:1fr auto}.bottom-status-bar span:last-child{display:none}
  .smiley-popup{position:fixed!important;left:8px!important;right:8px!important;bottom:82px!important;top:auto!important;width:auto!important;max-height:48vh}
  .smiley-page{grid-template-columns:repeat(7,1fr)}.smiley-page img{width:24px!important;height:24px!important}
  .scroll-bottom{right:10px;bottom:205px}.whisper-window{width:calc(100% - 12px);height:min(72vh,520px);right:6px;bottom:6px}
}
@media(max-width:440px){
  .window-controls button{width:25px}.chat-layout{grid-template-rows:minmax(0,1fr) 102px}
  .people-heading small{display:none}#people{height:70px}.person{min-width:120px;padding:4px}
  #message-form textarea{min-height:50px}.smiley-page{grid-template-columns:repeat(6,1fr)}
}


/* Socudya Chat 3.1 — focused controls, authentic hammers, instant sending */
.chat-shell{grid-template-rows:auto auto auto minmax(0,1fr)}
.chat-menu-bar{display:none!important}
.chat-header{box-shadow:inset 0 1px rgba(255,255,255,.65),inset 0 -1px rgba(0,35,85,.55)}
.format-toolbar{border-top:1px solid #d9e8f4}
.message-role img,.role-icon img{width:18px!important;height:18px!important;image-rendering:pixelated;filter:none!important}
.role-icon{width:20px;height:20px}
.pending-message{opacity:.78;background:#f1f8fd!important}
.pending-message time::after{content:' · sending';color:#7890a3;font-style:italic}
#message-form{grid-template-columns:minmax(0,1fr) 104px 82px!important}
.compose-smiley-btn{display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;padding:5px 10px!important;font-size:.83rem!important}
.compose-smiley-btn img{width:23px;height:23px;display:block}
.compose-smiley-btn span{display:inline!important}
.send-btn.sending::after{content:'…'}
.smiley-popup{width:min(430px,calc(100vw - 20px))!important;max-height:min(390px,70vh)!important;padding:8px!important}
.smiley-popup-heading>div{display:grid;gap:1px}.smiley-popup-heading small{color:#60778a;font-size:.66rem}
.smiley-grid{display:grid;grid-template-columns:repeat(7,minmax(44px,1fr));gap:4px}
.smiley-grid button{min-width:0;min-height:50px;padding:3px 2px;border:1px solid #9db4c7;border-radius:2px;background:linear-gradient(#fff,#e8f2f8);display:grid;place-items:center;gap:0;cursor:pointer}
.smiley-grid button:hover,.smiley-grid button:focus{background:#d8ecfa;border-color:#3677aa;outline:1px solid #3677aa}
.smiley-grid img{width:25px;height:25px}.smiley-grid small{font-size:.56rem;color:#61788b;line-height:1}
@media(max-width:850px){
  .chat-shell{grid-template-rows:auto auto auto minmax(0,1fr)}
  #message-form{grid-template-columns:minmax(0,1fr) 48px 68px!important}
  .compose-smiley-btn{padding:3px!important}.compose-smiley-btn img{width:25px;height:25px}.compose-smiley-btn span{display:none!important}
  .smiley-grid{grid-template-columns:repeat(6,minmax(42px,1fr))}
}
@media(max-width:390px){.smiley-grid{grid-template-columns:repeat(5,minmax(42px,1fr))}}