/* Chat Window */
#chat-window{
  position:fixed;bottom:80px;left:30px;width:340px;height:480px;
  background:rgba(15,15,15,.97);backdrop-filter:blur(20px);
  border:1px solid #333;border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.9);
  display:none;flex-direction:column;overflow:hidden;
  z-index:99998;color:#fff;font-family:'Rajdhani',sans-serif;
}
#chat-window.show{display:flex;}

.chat-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid #222;
  cursor:grab;flex-shrink:0;user-select:none;
}
.chat-header:active{cursor:grabbing;}
.chat-header-left{display:flex;align-items:center;gap:10px;}
.chat-dot{width:8px;height:8px;border-radius:50%;background:#44ff88;animation:pulseDot 2s infinite;}
.chat-title{font-family:'Azionix','Orbitron',sans-serif;font-size:12px;letter-spacing:2px;color:#ddd;}
.chat-header-right{display:flex;align-items:center;gap:10px;}
.chat-status{font-size:10px;color:#666;letter-spacing:.5px;}
.chat-close{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-close:hover{background:#2a2a2a;color:#fff;}

.chat-nick-change{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-nick-change:hover{background:#2a2a2a;color:#4fc3f7;}

.chat-clear-all{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-clear-all:hover{background:#3a1a1a;color:#ff5252;}

.chat-owner-toggle{background:none;border:none;color:#666;cursor:pointer;font-size:12px;padding:4px 8px;border-radius:6px;transition:.15s;}
.chat-owner-toggle:hover{background:#2a2a1a;color:#ffd54f;}
.chat-owner-toggle.active{background:#3a2f00;color:#ffd54f;box-shadow:0 0 10px rgba(255,213,79,.3);}

/* ============ CHAT ROOM TABS ============ */

/* Outer container: holds the scroll strip + the "+" button */
.chat-room-tabs {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 8px 12px 0;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
  overflow: hidden;
}

/* Inner scroll strip — only this scrolls */
.chat-room-tabs-scroll {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 1px;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
}
.chat-room-tabs-scroll::-webkit-scrollbar { display: none; }

.chat-room-tab {
  background: transparent;
  border: none;
  color: #666;
  font-family: 'Rajdhani', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 6px 12px 8px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  flex-shrink: 0;
}
.chat-room-tab:hover { color: #ccc; background: rgba(255,255,255,.03); }
.chat-room-tab.active {
  color: #fff;
  border-bottom-color: #4fc3f7;
  background: rgba(79,195,247,.08);
}
.chat-room-tab i { font-size: 10px; opacity: .7; }

/* The "+" button — always pinned to the right, never scrolls */
.chat-room-add {
  background: rgba(79,195,247,.12);
  border: none;
  color: #4fc3f7;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
  transition: .2s;
}
.chat-room-add:hover {
  background: rgba(79,195,247,.25);
  color: #fff;
  transform: scale(1.08);
}

.chat-tab-badge {
  display: none;
  background: #ff4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.chat-tab-badge.show { display: inline-flex; }

.chat-nick-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}
.chat-nick-row input {
  flex: 1;
  background: #0d0d0d;
  border: 1px solid #333;
  border-radius: 8px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
}
.chat-nick-row input:focus { border-color: #4fc3f7; }
.chat-nick-row button {
  background: #4fc3f7;
  border: none;
  border-radius: 8px;
  color: #000;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 0 16px;
  cursor: pointer;
  transition: .15s;
}
.chat-nick-row button:hover { background: #7ad4f9; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-messages::-webkit-scrollbar { width: 5px; }
.chat-messages::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }
.chat-empty { color: #444; text-align: center; font-size: 12px; margin-top: 30px; }

.chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
  animation: chatPop .2s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.chat-msg.mine { align-self: flex-end; background: #2b65f6; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.other { align-self: flex-start; background: #1a1a1a; color: #e0e0e0; border: 1px solid #2a2a2a; border-bottom-left-radius: 4px; }
.chat-msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  margin-bottom: 3px;
  opacity: .75;
}
.chat-msg.other .chat-msg-meta { color: #4fc3f7; }
.chat-msg.mine .chat-msg-meta { color: #bcd4ff; justify-content: flex-end; }
@keyframes chatPop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-owner-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(90deg, #ffd54f, #ffab00);
  color: #000;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 8px;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-right: 4px;
}
.chat-owner-tag i { font-size: 8px; }

.chat-msg.mine.owner-msg { box-shadow: 0 0 0 1px rgba(255,213,79,.5); }
.chat-msg.other.owner-msg { border-color: rgba(255,213,79,.4); }

.chat-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(180,30,30,.85);
  border: 1px solid rgba(255,80,80,.4);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: .15s;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 4px;
  letter-spacing: .3px;
}
.chat-msg:hover .chat-delete-btn { opacity: 1; pointer-events: auto; }
.chat-delete-btn:hover { background: #e53935; }
.chat-msg.mine .chat-delete-btn { right: auto; left: 6px; }

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #222;
  flex-shrink: 0;
  background: #0a0a0a;
}
.chat-input-row input {
  flex: 1;
  background: #0d0d0d;
  border: 1px solid #333;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
}
.chat-input-row input:focus { border-color: #4fc3f7; }
.chat-input-row button {
  background: #4fc3f7;
  border: none;
  border-radius: 10px;
  color: #000;
  width: 40px;
  cursor: pointer;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-input-row button:hover { background: #7ad4f9; }
.chat-input-row button:disabled { opacity: .4; cursor: not-allowed; }

/* Call overlay */
#call-overlay{
  position:fixed;inset:0;background:#000;z-index:999999;
  display:none;align-items:center;justify-content:center;
}
#call-card{
  width:90vw;max-width:900px;aspect-ratio:16/9;
  background:#111;border-radius:20px;position:relative;
  overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.9);
}
#call-remote-video{width:100%;height:100%;object-fit:cover;background:#000;}
#call-local-video{
  position:absolute;bottom:80px;right:20px;
  width:180px;height:120px;object-fit:cover;
  border-radius:12px;border:2px solid #333;background:#000;
}
#call-controls{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;gap:16px;
}
#call-controls button{
  width:50px;height:50px;border-radius:50%;border:none;
  background:#222;color:#fff;cursor:pointer;font-size:18px;
  transition:.2s;
}
#call-controls button:hover{background:#333;transform:scale(1.1);}
#call-end{background:#c62828!important;}
#call-end:hover{background:#e53935!important;}

/* Incoming call popup */
#incoming-call-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:999998;display:none;align-items:center;justify-content:center;
}
#incoming-call-card{
  background:#111;border:1px solid #2a2f3a;border-radius:24px;
  padding:40px 50px;text-align:center;color:#fff;
  box-shadow:0 30px 80px rgba(0,0,0,.9);
  animation:icIn .35s cubic-bezier(.2,.8,.2,1);
  min-width:320px;
}
@keyframes icIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
#incoming-call-card .ic-icon{
  width:80px;height:80px;border-radius:50%;
  background:rgba(79,195,247,.15);color:#4fc3f7;
  display:flex;align-items:center;justify-content:center;
  font-size:36px;margin:0 auto 20px;
  animation:icRing 1.4s infinite;
}
@keyframes icRing{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(-15deg)}20%,40%{transform:rotate(15deg)}}
#incoming-call-card .ic-label{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:#888;font-weight:700;
}
#incoming-call-card .ic-from{
  font-size:24px;font-weight:700;margin:8px 0 30px;
}
#incoming-call-card .ic-actions{
  display:flex;gap:16px;justify-content:center;
}
#incoming-call-card .ic-btn{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  width:90px;padding:14px 0;border-radius:14px;border:none;
  cursor:pointer;font-family:inherit;font-size:12px;font-weight:700;
  transition:.2s;
}
#incoming-call-card .ic-btn i{font-size:20px;}
#incoming-call-card .ic-accept{
  background:#2eb872;color:#fff;
}
#incoming-call-card .ic-accept:hover{background:#3ad888;transform:scale(1.05);}
#incoming-call-card .ic-decline{
  background:#c62828;color:#fff;
}
#incoming-call-card .ic-decline:hover{background:#e53935;transform:scale(1.05);}

/* Call timer */
#call-timer{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,.6);color:#fff;
  padding:6px 14px;border-radius:20px;
  font-family:monospace;font-size:14px;font-weight:600;
  z-index:5;
}

/* ============================================================
   Status dots
   ============================================================ */

.status-dot-user {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
  border: 1.5px solid #0a0a0a;
  vertical-align: middle;
}
.status-dot-user.online  { background: #44ff88; box-shadow: 0 0 6px rgba(68,255,136,.6); }
.status-dot-user.idle    { background: #ffd54f; box-shadow: 0 0 6px rgba(255,213,79,.6); }
.status-dot-user.dnd     { background: #ff4444; box-shadow: 0 0 6px rgba(255,68,68,.6); }
.status-dot-user.offline { background: #555; }

/* Clickable username */
.chat-msg-meta .chat-user-link {
  cursor: pointer;
  transition: color .15s;
}
.chat-msg-meta .chat-user-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* ============================================================
   User profile popup
   ============================================================ */

.user-profile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 999998;
  display: none;
  align-items: center;
  justify-content: center;
}
.user-profile-overlay.show { display: flex; }

.user-profile-card {
  background: #111;
  border: 1px solid #2a2f3a;
  border-radius: 20px;
  width: 340px;
  max-width: 90vw;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.9);
  animation: profileIn .3s cubic-bezier(.2,.8,.2,1);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
}
@keyframes profileIn {
  from { opacity: 0; transform: scale(.92) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.user-profile-header {
  position: relative;
  height: 90px;
  background: linear-gradient(135deg, #2b65f6 0%, #6a4cff 50%, #ec4899 100%);
}

.user-profile-avatar {
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #222;
  border: 4px solid #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
}

.user-profile-body {
  padding: 46px 24px 20px 24px;
  text-align: center;
}

.user-profile-name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}

.user-profile-status-line {
  font-size: 12px;
  color: #888;
  font-weight: 600;
  letter-spacing: .5px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.user-profile-bio {
  font-size: 13px;
  color: #ccc;
  line-height: 1.5;
  margin-bottom: 16px;
  padding: 10px;
  background: rgba(255,255,255,.03);
  border-radius: 10px;
  min-height: 40px;
}

.user-profile-room {
  font-size: 12px;
  color: #888;
  margin-bottom: 18px;
}
.user-profile-room strong {
  color: #4fc3f7;
}

.user-profile-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.user-profile-btn {
  flex: 1;
  padding: 10px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.user-profile-btn.primary {
  background: #2b65f6;
  color: #fff;
}
.user-profile-btn.primary:hover { background: #4a7fff; transform: translateY(-1px); }
.user-profile-btn.secondary {
  background: #2a2f3a;
  color: #fff;
}
.user-profile-btn.secondary:hover { background: #3a404e; }
.user-profile-btn.danger {
  background: rgba(198,40,40,.2);
  color: #ff7070;
  border: 1px solid rgba(255,80,80,.3);
}
.user-profile-btn.danger:hover { background: #c62828; color: #fff; }

.user-profile-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.5);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}
.user-profile-close:hover { background: #fff; color: #000; }

/* ============================================================
   Friends panel
   ============================================================ */

.friends-panel {
  position: fixed;
  top: 80px;
  right: 90px;
  width: 260px;
  max-height: 400px;
  background: rgba(15,15,15,.97);
  backdrop-filter: blur(20px);
  border: 1px solid #333;
  border-radius: 16px;
  z-index: 999998;
  display: none;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.9);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
}
.friends-panel.show { display: flex; }

.friends-header {
  padding: 12px 16px;
  border-bottom: 1px solid #222;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #aaa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.friends-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}
.friends-list::-webkit-scrollbar { width: 5px; }
.friends-list::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }

.friend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background .15s;
}
.friend-item:hover { background: rgba(255,255,255,.04); }

.friend-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2a2f3a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.friend-info {
  flex: 1;
  min-width: 0;
}
.friend-name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-room {
  font-size: 10px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-empty {
  padding: 30px 16px;
  text-align: center;
  font-size: 12px;
  color: #555;
}

/* ============================================================
   Chat image messages
   ============================================================ */

.chat-image-msg {
  max-width: 200px;
  max-height: 200px;
  border-radius: 10px;
  display: block;
  cursor: pointer;
  transition: transform .2s;
  border: 1px solid rgba(255,255,255,.1);
}
.chat-image-msg:hover { transform: scale(1.02); }

.chat-attach-btn {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 15px;
  padding: 0 10px;
  transition: color .15s;
}
.chat-attach-btn:hover { color: #4fc3f7; }

/* Image lightbox */
#chat-image-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.95);
  z-index: 9999999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#chat-image-lightbox.show { display: flex; }
#chat-image-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}


/* ============================================================
   Room creator + browser
   ============================================================ */

.chat-room-add {
  background: rgba(79,195,247,.12) !important;
  color: #4fc3f7 !important;
  border-radius: 50% !important;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  margin-left: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.chat-room-add:hover { background: rgba(79,195,247,.25) !important; color: #fff !important; }

.room-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
}
.room-overlay.show { display: flex; }

.room-modal {
  background: #111;
  border: 1px solid #2a2f3a;
  border-radius: 20px;
  width: 400px;
  max-width: 92vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.9);
  color: #fff;
  font-family: 'Rajdhani', sans-serif;
  animation: roomModalIn .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes roomModalIn {
  from { opacity: 0; transform: scale(.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.room-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}
.room-modal-header h3 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
}
.room-modal-header button {
  background: none;
  border: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: .15s;
}
.room-modal-header button:hover { background: #2a2a2a; color: #fff; }

.room-modal-body {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
}

.room-label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 14px;
}
.room-label:first-child { margin-top: 0; }

.room-modal-body input {
  width: 100%;
  background: #0a0b0f;
  border: 1px solid #2a2f3a;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  box-sizing: border-box;
}
.room-modal-body input:focus { border-color: #4fc3f7; }

.room-hint {
  display: block;
  font-size: 10px;
  color: #555;
  margin-top: 4px;
  letter-spacing: .5px;
}

.room-privacy-row {
  display: flex;
  gap: 10px;
}
.room-privacy-btn {
  flex: 1;
  background: #0a0b0f;
  border: 1px solid #2a2f3a;
  color: #888;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.room-privacy-btn:hover { border-color: #444; color: #ccc; }
.room-privacy-btn.active {
  background: rgba(79,195,247,.15);
  border-color: #4fc3f7;
  color: #4fc3f7;
}

#room-password-wrap {
  margin-top: 14px;
}

.room-create-btn,
.room-browse-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  transition: .2s;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.room-create-btn {
  background: #2b65f6;
  color: #fff;
}
.room-create-btn:hover { background: #4a7fff; transform: translateY(-1px); }
.room-browse-btn {
  background: #1a1a1a;
  border: 1px solid #2a2f3a;
  color: #ccc;
}
.room-browse-btn:hover { background: #2a2f3a; color: #fff; }

.room-divider {
  text-align: center;
  margin: 16px 0 8px 0;
  position: relative;
  color: #444;
  font-size: 10px;
  letter-spacing: 2px;
}
.room-divider::before,
.room-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: #222;
}
.room-divider::before { left: 0; }
.room-divider::after  { right: 0; }

/* Room browser */
.room-browser-tabs {
  display: flex;
  padding: 0 22px;
  border-bottom: 1px solid #222;
  flex-shrink: 0;
}
.room-browser-tab {
  flex: 1;
  background: none;
  border: none;
  color: #666;
  padding: 12px 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  border-bottom: 2px solid transparent;
  transition: .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.room-browser-tab:hover { color: #ccc; }
.room-browser-tab.active {
  color: #4fc3f7;
  border-bottom-color: #4fc3f7;
}

.room-browser-body {
  padding: 16px 22px 22px 22px;
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
  max-height: 55vh;
}

.room-card {
  background: #0a0b0f;
  border: 1px solid #2a2f3a;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: .2s;
  display: flex;
  align-items: center;
  gap: 12px;
}
.room-card:hover {
  border-color: #4fc3f7;
  background: #0f1520;
  transform: translateY(-1px);
}
.room-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #4fc3f7;
  flex-shrink: 0;
}
.room-card.locked .room-card-icon { color: #f5b544; }

.room-card-info {
  flex: 1;
  min-width: 0;
}
.room-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.room-card-meta {
  font-size: 11px;
  color: #666;
  margin-top: 2px;
  display: flex;
  gap: 8px;
}
.room-card-meta .dot { color: #333; }

.room-empty {
  text-align: center;
  padding: 40px 20px;
  color: #555;
  font-size: 13px;
}
.room-empty i {
  font-size: 32px;
  color: #333;
  display: block;
  margin-bottom: 12px;
}