/* ---- Win95 / 98 aesthetic, hand-rolled (no external deps) ---- */
* { box-sizing: border-box; }
:root{
  --bg:#008080;              /* classic teal desktop */
  --face:#c0c0c0;            /* button/window face */
  --shadow:#808080;
  --dark:#000000;
  --light:#ffffff;
  --hi:#dfdfdf;
  --title:#000080;           /* navy title bar */
  --title2:#1084d0;
}
html,body{height:100%;}
body{
  margin:0; background:var(--bg);
  font-family:"MS Sans Serif","Microsoft YaHei",Tahoma,sans-serif;
  font-size:13px; color:#000;
  display:flex; align-items:center; justify-content:center;
  -webkit-font-smoothing:none;
}
.screen{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;}
.hidden{display:none !important;}

/* ---- window chrome ---- */
.window{
  background:var(--face);
  border:2px solid;
  border-color:var(--light) var(--dark) var(--dark) var(--light);
  box-shadow:1px 1px 0 var(--shadow);
  padding:2px;
}
.title-bar{
  background:linear-gradient(90deg,var(--title),var(--title2));
  color:#fff; font-weight:bold;
  display:flex; align-items:center; justify-content:space-between;
  padding:3px 4px; user-select:none;
}
.title-bar-text{font-size:12px;}
.title-bar-controls button{
  width:16px; height:14px; padding:0; margin-left:2px;
  border:2px solid; border-color:var(--light) var(--dark) var(--dark) var(--light);
  background:var(--face); position:relative; cursor:pointer;
}
.title-bar-controls button::after{content:"✕"; font-size:9px; position:absolute; top:-2px; left:3px;}
.title-bar-controls button[disabled]{opacity:.5; cursor:default;}
.window-body{padding:10px;}

/* ---- buttons / inputs ---- */
button{
  font-family:inherit; font-size:12px; padding:4px 12px; cursor:pointer;
  background:var(--face); border:2px solid;
  border-color:var(--light) var(--dark) var(--dark) var(--light);
}
button:active{border-color:var(--dark) var(--light) var(--light) var(--dark);}
input{
  font-family:inherit; font-size:13px; padding:3px 4px;
  border:2px solid; border-color:var(--dark) var(--light) var(--light) var(--dark);
  background:#fff;
}
.sunken{border:2px solid; border-color:var(--dark) var(--light) var(--light) var(--dark); background:#fff;}

/* ---- auth ---- */
.auth-window{width:320px;}
.tabs{display:flex; gap:2px; margin-bottom:10px;}
.tab{flex:1;}
.tab.active{border-color:var(--dark) var(--light) var(--light) var(--dark); font-weight:bold;}
.field{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.field label{width:56px; text-align:right;}
.field input{flex:1;}
.actions{text-align:center; margin-top:12px;}
.actions button{min-width:120px;}
.hint{font-size:11px; color:#444; margin:8px 0 0;}
.status-msg{min-height:16px; margin-top:8px; color:#a00; font-size:12px; text-align:center;}
.copyright{color:#cfe; font-size:11px; text-shadow:1px 1px 0 #045;}

/* ---- chat ---- */
.chat-window{width:min(760px,96vw); height:min(560px,92vh); display:flex; flex-direction:column;}
.chat-window .window-body{flex:1; display:flex; min-height:0;}
.chat-body{gap:8px;}
.chat-main{flex:1; display:flex; flex-direction:column; min-width:0;}
.chat-side{width:150px; display:flex; flex-direction:column;}
.side-title{font-weight:bold; margin-bottom:4px;}
.userlist{flex:1; list-style:none; margin:0; padding:6px; overflow-y:auto; font-size:12px;}
.userlist li{padding:2px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.userlist li::before{content:"●"; font-size:9px; margin-right:5px; vertical-align:middle;}

.messages{flex:1; overflow-y:auto; padding:8px; line-height:1.55; word-break:break-word;}
.messages .line{margin:1px 0;}
.messages .ts{color:#888; font-size:11px; margin-right:4px;}
.messages .name{font-weight:bold; margin-right:2px;}
.messages .name::after{content:"：";}
.lvl-name{margin-right:2px;}
.lvl{font-size:12px; margin-left:2px; letter-spacing:-1px; vertical-align:middle;}
.userlist .lvl{font-size:12px; letter-spacing:-1px;}
.messages .system{color:#008000; font-style:italic;}

.typing-line{height:16px; font-size:11px; color:#555; padding:2px 2px 0;}
.send-row{display:flex; gap:6px; margin-top:6px;}
.send-row input{flex:1;}
#emoji-btn{padding:4px 8px;}

.emoji-panel{
  margin-top:6px; padding:6px; display:flex; flex-wrap:wrap; gap:2px;
  max-height:130px; overflow-y:auto;
  border:2px solid; border-color:var(--dark) var(--light) var(--light) var(--dark); background:#fff;
}
.emoji-panel span{cursor:pointer; font-size:20px; padding:2px 4px; border-radius:2px;}
.emoji-panel span:hover{background:#000080; }

@media (max-width:560px){
  .chat-side{display:none;}
}