*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#6C63FF;--primary-dk:#5a52d5;--bg:#1a1a2e;--bg-light:#16213e;--bg-card:#0f3460;--text:#eaeaea;--text-muted:#a0a0b0;--success:#00cec9;--danger:#ff6b6b;--border:#2a2a4a}
body{font-family:'Segoe UI',Tahoma,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

.auth-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460)}
.auth-container{width:100%;max-width:420px;padding:20px}
.auth-card{background:var(--bg-light);border-radius:12px;padding:40px 32px;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.logo{text-align:center;font-size:2rem;font-weight:700;margin-bottom:28px;color:var(--primary)}
.auth-tabs{display:flex;border-bottom:2px solid var(--border);margin-bottom:24px}
.tab-btn{flex:1;padding:10px;background:none;border:none;color:var(--text-muted);font-size:1rem;cursor:pointer}
.tab-btn.active{color:var(--primary);border-bottom:2px solid var(--primary);margin-bottom:-2px}
.auth-form{display:none}.auth-form.active{display:block}
.form-group{margin-bottom:18px}
.form-group label{display:block;margin-bottom:6px;font-size:.9rem;color:var(--text-muted)}
.form-group input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1rem;outline:none}
.form-group input:focus{border-color:var(--primary)}
.btn-primary{width:100%;padding:12px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:1rem;font-weight:600;cursor:pointer}
.btn-primary:hover{background:var(--primary-dk)}
.error-msg{margin-top:12px;color:var(--danger);font-size:.85rem;text-align:center}

.chat-page{overflow:hidden}
.chat-container{display:flex;height:100vh}
.sidebar{width:280px;background:var(--bg-light);display:flex;flex-direction:column;border-right:1px solid var(--border)}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:20px;border-bottom:1px solid var(--border)}
.sidebar-header h2{font-size:1.2rem}
.sidebar-section{padding:16px 20px;flex:1;overflow-y:auto}
.sidebar-section h3{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:10px}
.room-list,.user-list{list-style:none}
.room-list li{padding:10px 14px;border-radius:8px;cursor:pointer;margin-bottom:4px;font-weight:500}
.room-list li:hover{background:var(--bg-card)}
.room-list li.active{background:var(--primary);color:#fff}
.user-list li{padding:6px 14px;font-size:.9rem;color:var(--text-muted);display:flex;align-items:center;gap:8px}
.user-list li::before{content:'';width:8px;height:8px;background:var(--success);border-radius:50%}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.sidebar-footer span{font-weight:600}
.btn-logout{padding:6px 14px;border:1px solid var(--danger);border-radius:6px;background:none;color:var(--danger);cursor:pointer}
.btn-logout:hover{background:var(--danger);color:#fff}

.chat-main{flex:1;display:flex;flex-direction:column}
.chat-header{padding:16px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px}
.chat-header h2{font-size:1.1rem}
.menu-toggle{display:none;background:none;border:none;color:var(--text);font-size:1.4rem;cursor:pointer}
.chat-messages{flex:1;padding:20px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.message{max-width:70%;display:flex;flex-direction:column}
.message.own{align-self:flex-end}
.message.other{align-self:flex-start}
.message .meta{font-size:.75rem;color:var(--text-muted);margin-bottom:4px;display:flex;gap:8px}
.message.own .meta{justify-content:flex-end}
.message .bubble{padding:12px 16px;border-radius:12px;line-height:1.4;word-wrap:break-word}
.message.own .bubble{background:var(--primary);border-bottom-right-radius:4px}
.message.other .bubble{background:#2d2d5e;border-bottom-left-radius:4px}
.system-msg{text-align:center;color:var(--text-muted);font-size:.8rem;padding:4px 0}
.typing-indicator{padding:4px 24px;font-size:.8rem;color:var(--text-muted);min-height:24px}
.message-form{display:flex;padding:16px 24px;gap:12px;border-top:1px solid var(--border)}
.message-form input{flex:1;padding:12px 16px;border-radius:24px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:1rem;outline:none}
.message-form input:focus{border-color:var(--primary)}
.btn-send{padding:12px 24px;border:none;border-radius:24px;background:var(--primary);color:#fff;font-weight:600;cursor:pointer}
.btn-send:hover{background:var(--primary-dk)}

@media(max-width:768px){
  .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:100;transform:translateX(-100%);transition:transform .3s}
  .sidebar.open{transform:translateX(0)}
  .menu-toggle{display:block}
}

/* Whisper styles */
.message.whisper {
  align-self: center;
  max-width: 80%;
}

.whisper-meta {
  color: #e056a0 !important;
  justify-content: center !important;
}

.whisper-bubble {
  background: #2d1b3d !important;
  border: 1px solid #e056a0 !important;
  border-radius: 12px !important;
  font-style: italic;
}

.user-list li[style*="cursor: pointer"]:hover {
  color: #e056a0 !important;
  background: rgba(224, 86, 160, 0.1);
  border-radius: 6px;
}

@supports (padding-top: env(safe-area-inset-top)) {
  .chat-header {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
  .sidebar-header {
    padding-top: calc(20px + env(safe-area-inset-top));
  }
  .message-form {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Smooth scrolling */
.chat-messages {
  -webkit-overflow-scrolling: touch;
}

/* Prevent zoom on input focus (iPhone) */
input[type="text"],
input[type="password"] {
  font-size: 16px !important;
}

/* PWA standalone mode */
@media (display-mode: standalone) {
  .auth-page {
    padding-top: env(safe-area-inset-top);
  }
}

/* Small phones */
@media (max-width: 380px) {
  .auth-card {
    padding: 30px 20px;
  }
  .logo {
    font-size: 1.6rem;
  }
  .message-form {
    padding: 12px 16px;
    gap: 8px;
  }
  .btn-send {
    padding: 12px 16px;
  }
  .chat-messages {
    padding: 16px;
  }
  .message {
    max-width: 85%;
  }
}

/* ===== FIX MOBILE CHAT BAR POSITION ===== */

/* Move chat bar up on mobile */
@media (max-width: 768px) {
  .message-form {
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 20px));
    position: sticky;
    bottom: 0;
    background: var(--bg-light);
    z-index: 50;
  }

  .chat-main {
    height: 100vh;
    height: 100dvh;
  }

  .chat-messages {
    flex: 1;
    padding-bottom: 10px;
    margin-bottom: 0;
  }

  /* When keyboard opens, push bar up */
  .chat-container {
    height: 100vh;
    height: 100dvh;
  }
}

/* Galaxy S24 & iPhone 15 Pro */
@media (max-width: 430px) {
  .message-form {
    padding: 10px 12px;
    padding-bottom: calc(15px + env(safe-area-inset-bottom, 25px));
  }
}

/* Overlay when sidebar open on mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
}

.sidebar-overlay.active {
  display: block;
}

/* ===== DM STYLES ===== */
#dmList {
  list-style: none;
}

#dmList li {
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 4px;
  font-weight: 500;
  color: #e056a0;
}

#dmList li:hover {
  background: var(--bg-card);
}

#dmList li.active {
  background: #e056a0;
  color: #fff;
}

/* ===== IMAGE & VIDEO IN CHAT ===== */
.chat-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  margin-top: 4px;
}

.chat-image:hover {
  opacity: 0.9;
}

.chat-video {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  display: block;
  margin-top: 4px;
}

.btn-attach {
  padding: 12px;
  border: none;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  transition: .2s;
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-attach:hover {
  background: var(--primary);
}

/* Mobile image size */
@media (max-width: 768px) {
  .chat-image {
    max-height: 200px;
  }
  .chat-video {
    max-height: 200px;
  }
  .message {
    max-width: 85%;
  }
}

/* ===== MESSAGE MENU ===== */
.msg-menu {
  position: fixed;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px;
  z-index: 200;
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  min-width: 140px;
}

.msg-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}

.msg-menu button:hover {
  background: var(--bg-card);
}

.edited-tag {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-style: italic;
}

/* ===== REPLY ===== */
.reply-bar {
  display: flex;
  align-items: center;
  padding: 8px 24px;
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  gap: 10px;
}

.reply-info {
  flex: 1;
  overflow: hidden;
}

.reply-info span {
  display: block;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#replyToUser {
  color: var(--primary);
  font-weight: 600;
}

#replyToText {
  color: var(--text-muted);
}

.reply-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 4px 8px;
}

.reply-cancel:hover {
  color: var(--danger);
}

.reply-quote {
  background: rgba(108, 99, 255, 0.15);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  padding: 6px 10px;
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

.reply-quote:hover {
  background: rgba(108, 99, 255, 0.25);
}

.reply-quote-user {
  color: var(--primary);
  font-weight: 600;
  display: block;
  font-size: 0.75rem;
}

.reply-quote-text {
  color: var(--text-muted);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .reply-bar {
    padding: 8px 16px;
  }
}