.chat-wrap { max-width: 900px; margin: 30px auto; color: #eaf6ff; font-family: 'Orbitron',sans-serif; }
.chat-auth, .chat-main { background:#0b0f1a; border:1px solid #1a2333; border-radius:16px; padding:18px; box-shadow:0 0 20px rgba(0,255,255,.15); }

.tabs { display:flex; gap:8px; margin-bottom:10px; }
.tab { background:#0b0f1a; border:1px solid #2b3b4d; color:#9ec; padding:6px 10px; border-radius:8px; cursor:pointer; }
.tab.active { border-color:#00ffff; color:#00ffff; text-shadow:0 0 8px #00ffff; }

.panel { display:none; }
.panel.show { display:block; }
label { display:block; margin:10px 0; }
input { width:100%; background:#0a0f1a; border:1px solid #2b3b4d; color:#fff; padding:10px; border-radius:8px; }
.btn-neon { background:#0b0f1a; border:2px solid #00ffff; color:#00ffff; padding:8px 14px; border-radius:10px; cursor:pointer; text-shadow:0 0 8px #00ffff; }
.btn-ghost { background:transparent; border:1px solid #445; color:#cfe; padding:6px 10px; border-radius:8px; cursor:pointer; }
.msg { margin-top:8px; font-size:.9rem; min-height:1.2em; }

.chat-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
#whoami { opacity:.8; font-size:.85rem; }

.messages { background:#0a0f1a; border:1px solid #1a2333; border-radius:12px; padding:10px; height:420px; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.msgitem { background:#0b1020; border:1px solid #1e2a3a; border-radius:10px; padding:10px; }
.msgmeta { display:flex; gap:8px; align-items:center; font-size:.8rem; color:#8fd; opacity:.9; margin-bottom:4px; }
.msgtext { white-space:pre-wrap; word-break:break-word; }
.msgactions { display:flex; gap:8px; margin-top:6px; opacity:.8; }
.msgreply { border-left:3px solid #00ffff55; padding-left:8px; margin-bottom:6px; font-size:.9rem; opacity:.8; }

.replybar { margin:8px 0; padding:8px; border:1px dashed #00ffff77; border-radius:10px; background:#07101b; }
.composer { display:flex; gap:8px; align-items:center; margin-top:8px; }
#msgInput { flex:1; }
.filebtn { display:inline-flex; align-items:center; cursor:pointer; border:1px solid #2b3b4d; border-radius:8px; padding:4px 8px; }

.emoji-picker { margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }
.emoji-picker button { background:#0b0f1a; border:1px solid #2b3b4d; color:#fff; border-radius:8px; padding:6px 8px; cursor:pointer; }

a.attachment { color:#00ffff; text-decoration:underline; }
img.attachment-img { max-width:240px; border-radius:8px; border:1px solid #1e2a3a; margin-top:6px; display:block; }

body {
    background-image: linear-gradient(to top, #2a0b53, #000000);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem 0;
    box-sizing: border-box;
}
#particles {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}