:root{
  --bg:#0b1020;
  --panel:#0f1724;
  --card:#0f1728;
  --accent:#7c5cff;
  --muted:#9aa4b2;
  --glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box;font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif}
body{margin:0;background:linear-gradient(180deg,#070814 0%,var(--bg) 100%);color:#e6eef8}

/* Scrollbar styling */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#5a6370;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#7a8390}

/* Firefox scrollbar */
* {
  scrollbar-color: #5a6370 transparent;
  scrollbar-width: thin;
}

.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(2,6,23,0.6),rgba(2,6,23,0.8))}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:28px;border-radius:14px;box-shadow:0 10px 40px rgba(2,6,23,0.6);width:420px;text-align:center;border:1px solid rgba(255,255,255,0.04)}
.card h2{margin:0 0 8px 0}
.card input{width:100%;padding:12px;margin-top:12px;border:1px solid rgba(255,255,255,0.06);border-radius:10px;background:transparent;color:var(--muted)}
.card button{margin-top:14px;padding:10px 16px;border-radius:10px;background:linear-gradient(90deg,var(--accent),#5fe0ff);color:#07102a;border:0;font-weight:600}
.card .hint{font-size:12px;color:var(--muted);margin-top:8px}

.chat{max-width:980px;margin:28px auto;background:linear-gradient(180deg,var(--card),var(--panel));border-radius:12px;box-shadow:0 8px 40px rgba(2,6,23,0.6);overflow:hidden;display:flex;flex-direction:column;height:82vh}
.chat-header{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,0.03);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}
.header-right{display:flex;align-items:center;gap:16px;margin-left:auto}
.logout-btn{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.1);padding:8px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:all 0.2s}
.logout-btn:hover{color:#ff6b6b;border-color:#ff6b6b}
.messages{padding:18px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px;background:transparent}
.message{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.message .who{font-weight:700;color:var(--accent);font-size:13px}
.message .when{font-size:11px;color:var(--muted);margin-top:6px}
.message .text{margin-top:8px;color:#dbeafe}
.media{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.media-item{max-width:220px;border-radius:10px;box-shadow:0 6px 20px rgba(2,6,23,0.6)}

.send-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(255,255,255,0.03);align-items:center}
.send-form textarea{flex:1;padding:12px;border:1px solid rgba(255,255,255,0.04);border-radius:10px;background:transparent;color:#e6eef8;resize:vertical;min-height:44px;max-height:140px}
.send-form textarea::placeholder{color:rgba(230,238,248,0.4)}
.send-form button{background:var(--accent);color:#07102a;border:0;padding:10px 12px;border-radius:10px;font-weight:600}
.send-form #attachBtn{background:transparent;padding:8px;border-radius:8px;color:var(--muted);border:1px solid rgba(255,255,255,0.02);display:flex;align-items:center;gap:6px}
.controls{display:flex;gap:8px;align-items:center}
.file-count{font-size:12px;color:var(--muted);margin-left:4px}
.previews{padding:8px 16px;display:flex;gap:8px}
.preview-media{max-width:120px;border-radius:8px}
.preview-item{position:relative;overflow:hidden;border-radius:8px}
.preview-more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,7,18,0.6);color:#fff;font-weight:700;font-size:18px}

.media.compact{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.media.compact .media-item{width:100%;height:120px;object-fit:cover}
.media.grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.media.grid-4 .media-item{width:100%;height:120px;object-fit:cover}
.me-info{font-size:13px;color:var(--muted)}

@media (max-width:768px){
  .chat{height:90vh;margin:12px;max-width:100%}
  .send-form{flex-wrap:wrap}
  .controls{width:100%;justify-content:flex-end;display:flex;gap:8px}
  .send-form textarea{width:100%;order:-1}
  .card{width:90%;max-width:380px}
}
@media (max-width:480px){
  .chat{height:93vh}
  .chat-header{padding:12px 16px}
  .chat-header h1{font-size:18px;margin:0}
  .header-right{flex-direction:column;gap:8px;width:100%;margin-left:0;margin-top:8px}
  .logout-btn{width:100%;font-size:11px}
  .messages{padding:12px;gap:8px}
  .message{padding:8px;border-radius:8px}
  .send-form{padding:8px;gap:4px}
  .send-form textarea{padding:10px;font-size:14px}
  .send-form button{padding:8px 10px;font-size:14px}
  .media-item{max-width:100%;height:120px;object-fit:cover}
  .preview-media{max-width:80px}
  .preview-item{border-radius:6px}
}