:root{
  --xp-blue-dark: #0a3fae;
  --xp-blue-mid: #1266e6;
  --panel-top: #eef6fe;
  --panel-bottom: #cfe6fb;
  --list-alt: #e5f1fc;
  --border-blue: #6ea9dd;
  --online-green: #59b345;
  --busy-red: #d13438;
  --away-yellow: #e8b52a;
  --offline-gray: #9aa5ad;
  --ink: #1a2733;
  --ink-soft: #5b6b78;
  --link: #0057d8;
  --nudge-orange: #ff9d1f;
  --error-red: #b3261e;
}
*{ box-sizing: border-box; }
body{
  margin:0;
  min-height:100vh;
  font-family: Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  background:
    radial-gradient(circle at 20% 15%, #cfe9fb 0%, transparent 45%),
    linear-gradient(180deg, #2f7bd6 0%, #6fb3ee 40%, #bfe3fb 75%, #e9f6ff 100%);
  color: var(--ink);
}

/* ---------- window chrome, reused everywhere ---------- */
.win{
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--border-blue);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 12px 30px rgba(10,40,90,0.35), 0 0 0 1px rgba(255,255,255,0.4) inset;
  overflow: hidden;
}
.titlebar{
  display:flex; align-items:center; gap:6px;
  padding:6px 8px;
  background: linear-gradient(180deg, #3f8cf3 0%, #1266e6 45%, #0a3fae 100%);
  color:#fff; font-size:12px; font-weight:bold;
  text-shadow: 0 1px 1px rgba(0,0,0,0.35);
}
.titlebar .logo{ width:18px; height:18px; flex-shrink:0; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.titlebar .ttl{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.capbtn{
  width:20px; height:18px; border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #6fb3ff, #1a5fd6);
  border:1px solid #0a3fae; font-size:10px; color:#fff; line-height:1;
}
.capbtn.close{ background: linear-gradient(180deg, #ff8b7a, #d13c2b); border-color:#8a1e12; }
.menubar{
  display:flex; gap:14px; padding:4px 10px; font-size:11px; color:var(--ink);
  background: linear-gradient(180deg, #f5fafe, #dcedfb);
  border-bottom:1px solid var(--border-blue);
}

/* ---------- auth pages (login / register) ---------- */
.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
}
.auth-win{ width: 360px; }
.auth-body{ background:#fff; padding:22px 24px; }
.auth-title{ text-align:center; margin-bottom:14px; }
.auth-title .logo-lg{ width:44px; height:44px; }
.auth-title h1{ font-size:16px; margin:6px 0 2px; color: var(--xp-blue-dark); }
.auth-title p{ font-size:11px; color:var(--ink-soft); margin:0; }
.field{ margin-bottom:12px; }
.field label{ display:block; font-size:11px; font-weight:bold; margin-bottom:3px; color:var(--ink); }
.field input, .field select{
  width:100%; padding:7px 8px; font-size:12px;
  border:1px solid var(--border-blue); border-radius:3px;
  font-family: inherit; background:#fbfdff;
}
.field input:focus, .field select:focus{ outline:2px solid #7fb8f5; outline-offset:1px; }
.btn-primary{
  width:100%; padding:8px; font-size:12px; font-weight:bold; color:#fff;
  border-radius:4px; cursor:pointer;
  background: linear-gradient(180deg, #6fc24f 0%, #3f9a2b 60%, #2e7d1e 100%);
  border:1px solid #2a6b1a; box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.btn-primary:hover{ filter:brightness(1.05); }
.auth-switch{ text-align:center; font-size:11px; margin-top:14px; color:var(--ink-soft); }
.auth-switch a{ color:var(--link); text-decoration:none; }
.auth-switch a:hover{ text-decoration:underline; }
.err-box{
  background:#fdecea; border:1px solid var(--error-red); color:var(--error-red);
  font-size:11px; padding:7px 9px; border-radius:3px; margin-bottom:12px;
}
.avatar-picker{ display:flex; flex-wrap:wrap; gap:6px; }
.avatar-picker label{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-size:16px; border:1px solid var(--border-blue); border-radius:4px; background:#fbfdff; cursor:pointer;
}
.avatar-picker input{ display:none; }
.avatar-picker input:checked + span{ display:block; }
.avatar-picker label:has(input:checked){ background: var(--list-alt); border-color: var(--xp-blue-mid); }

/* ---------- main app layout ---------- */
.app-wrap{
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  gap:24px; flex-wrap:wrap; padding:30px 16px;
}
.buddy-win{ width:300px; }
.chat-win{ width:380px; }

.me-panel{
  display:flex; align-items:center; gap:8px; padding:8px 10px;
  background: linear-gradient(180deg, #ffffff, #eaf4fd);
  border-bottom: 1px solid var(--border-blue);
}
.avatar{
  width:34px; height:34px; border-radius:4px; border:2px solid #fff;
  box-shadow: 0 0 0 1px var(--border-blue);
  background: linear-gradient(135deg,#ffd97a,#ff9d1f);
  display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.me-info{ flex:1; min-width:0; }
.me-name{ font-size:12px; font-weight:bold; display:flex; align-items:center; gap:5px; }
.status-dot{ width:9px; height:9px; border-radius:50%; background: var(--online-green); box-shadow: 0 0 4px rgba(89,179,69,0.9); flex-shrink:0; }
.status-dot.busy{ background: var(--busy-red); box-shadow:0 0 4px rgba(209,52,56,0.9);}
.status-dot.away{ background: var(--away-yellow); box-shadow:0 0 4px rgba(232,181,42,0.9);}
.status-dot.offline{ background: var(--offline-gray); box-shadow:none; }
.status-select{
  font-size:10.5px; border:1px solid var(--border-blue); border-radius:3px; padding:1px 3px;
  font-family:inherit; background:#fff; color:var(--ink-soft);
}
.pm-input{
  border:none; background:transparent; font-size:10.5px; font-style:italic; color:var(--ink-soft);
  width:100%; padding:0; font-family:inherit;
}
.pm-input:focus{ outline:1px solid var(--border-blue); background:#fff; }

.addbar{ display:flex; gap:6px; margin:7px 10px; }
.addbar input{
  flex:1; padding:4px 8px; font-size:11px; border:1px solid var(--border-blue); border-radius:10px; font-family:inherit;
}
.addbar button{
  font-size:10.5px; padding:3px 10px; border-radius:10px; border:1px solid var(--border-blue);
  background: linear-gradient(180deg,#fff,#dcedfb); cursor:pointer;
}
.addbar-msg{ margin: 0 10px 6px; font-size:10.5px; min-height:12px; }
.addbar-msg.ok{ color: var(--online-green); }
.addbar-msg.error{ color: var(--error-red); }

.contact-list{ max-height:360px; overflow-y:auto; padding-bottom:4px; }
.contact{
  display:flex; align-items:center; gap:7px; padding:5px 10px; cursor:pointer; border-left:3px solid transparent;
}
.contact:hover{ background: var(--list-alt); }
.contact.selected{ background: var(--list-alt); border-left-color: var(--xp-blue-mid); }
.contact .avatar-sm{
  width:26px; height:26px; border-radius:3px; border:1px solid #fff; box-shadow:0 0 0 1px var(--border-blue);
  display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;
}
.contact .c-info{ min-width:0; flex:1; }
.contact .c-name{ font-size:11.5px; color: var(--link); display:flex; align-items:center; gap:5px; }
.contact .c-pm{ font-size:10px; color:var(--ink-soft); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.contact.offline .c-name{ color:#8b98a3; }
.contact.offline .avatar-sm{ filter:grayscale(0.9); opacity:0.7; }
.newmsg-badge{
  font-size:9px; font-weight:bold; color:#fff; background: var(--nudge-orange);
  padding:0 5px; border-radius:8px; animation: pulseGlow 1.1s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 0 rgba(255,157,31,0.6); transform:scale(1); }
  50%{ box-shadow:0 0 6px rgba(255,157,31,0.9); transform:scale(1.06); }
}
.empty-hint{ padding:20px 14px; font-size:11px; color:var(--ink-soft); text-align:center; }

/* ---------- chat window ---------- */
.chat-toolbar{
  display:flex; gap:5px; padding:5px 8px; align-items:center;
  background: linear-gradient(180deg,#f5fafe,#dcedfb); border-bottom:1px solid var(--border-blue);
}
.chat-toolbar .peer-name{ font-size:11px; font-weight:bold; color: var(--xp-blue-dark); margin-right:auto; }
.tbtn{
  width:24px;height:22px; border-radius:3px; background: linear-gradient(180deg,#fff,#e3eefb);
  border:1px solid var(--border-blue); display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer;
}
.chat-body{
  background:#fff; height:320px; padding:10px; font-size:11.5px; overflow-y:auto;
  border-bottom:1px solid var(--border-blue); display:flex; flex-direction:column; gap:10px;
}
.msg .who{ font-weight:bold; margin-bottom:1px; }
.msg .who.me{ color:#8a1ec7; }
.msg .who.them{ color:#0a6fd1; }
.msg .who .time{ font-weight:normal; color:#9aa5ad; font-size:9.5px; margin-left:5px; }
.msg .bubble{ color:var(--ink); line-height:1.35; word-wrap:break-word; }
.sys-nudge{
  align-self:center; font-size:10px; color:#b5760b; background:#fff6e2; border:1px dashed #e8b52a;
  padding:3px 10px; border-radius:10px;
}
@keyframes shake{
  0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-4px);} 40%{ transform:translateX(4px);}
  60%{ transform:translateX(-3px);} 80%{ transform:translateX(3px);}
}
.shake-once{ animation: shake 0.5s ease-in-out; }

.composer{ display:flex; flex-direction:column; background:#fff; }
.compose-input{
  min-height:52px; padding:8px; font-size:11.5px; border:none; resize:none; font-family:inherit; color:var(--ink);
}
.compose-input:focus{ outline:none; }
.compose-actions{ display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:6px 8px; border-top:1px solid #dbe6f0; }
.send-btn{
  padding:5px 18px; font-size:11px; font-weight:bold; color:#fff; border-radius:4px; cursor:pointer;
  background: linear-gradient(180deg, #6fc24f 0%, #3f9a2b 60%, #2e7d1e 100%);
  border:1px solid #2a6b1a; box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
}
.chat-placeholder{
  display:flex; align-items:center; justify-content:center; height:100%;
  color:var(--ink-soft); font-size:11.5px; text-align:center; padding:20px;
}

.logout-link{ font-size:10px; color:#fff; text-decoration:none; opacity:0.85; }
.logout-link:hover{ text-decoration:underline; }