/* ============================================
   MODERN RADYO CHAT - Complete Design Override
   Dark Glassmorphism + Neon Accent Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Rajdhani:wght@400;500;600;700&display=swap');

:root {
  --bg-deep:       #080c14;
  --bg-mid:        #0d1220;
  --bg-panel:      #111827;
  --glass-bg:      rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.08);
  --accent:        #00d4ff;
  --accent2:       #7c3aed;
  --accent-glow:   rgba(0,212,255,0.18);
  --accent2-glow:  rgba(124,58,237,0.18);
  --text-primary:  #f0f6ff;
  --text-secondary:#8b9cc5;
  --text-dim:      #4a5568;
  --success:       #10b981;
  --danger:        #ef4444;
  --warning:       #f59e0b;
  --border-radius: 14px;
  --border-radius-sm: 8px;
  --shadow-accent:  0 0 30px rgba(0,212,255,0.12);
  --transition:    0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ---- RESET & BASE ---- */
html, body {
  background: var(--bg-deep) !important;
  font-family: 'Outfit', sans-serif !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
}

/* Animated background grid */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.025) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

#external_wrap {
  background: var(--bg-deep) !important;
  position: relative;
  z-index: 1;
}

/* ============================================
   CHAT AREA - FULL MODERN REDESIGN
   ============================================ */

/* Header */
#header {
  background: rgba(8,12,20,0.95) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  height: 56px !important;
  padding: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

#inner_header {
  background: none !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 16px !important;
}

/* Main chat container */
.background_chat {
  background: var(--bg-panel) !important;
  box-shadow: none !important;
}

#container_chat {
  background: var(--bg-mid) !important;
}

#wrap_chat {
  background: transparent !important;
}

/* Chat messages area */
#warp_show_chat {
  background: transparent !important;
}

#container_show_chat {
  background: transparent !important;
}

#inside_wrap_chat {
  background: transparent !important;
}

#show_chat {
  background: var(--bg-mid) !important;
  padding: 8px 0 !important;
}

/* Individual chat messages */
.chat_wrap_content {
  transition: background var(--transition) !important;
}
.chat_wrap_content:hover {
  background: rgba(0,212,255,0.03) !important;
}

.log1 { background: transparent !important; }
.log2 { background: rgba(255,255,255,0.01) !important; }

/* Chat avatar */
.chat_avatar_wrap, .chat_avatar_wrap2 {
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* Chat usernames by rank */
.admin { color: #ff6eb4 !important; }
.sadmin { color: #ff4444 !important; }
.modo { color: #4da6ff !important; }
.vip { color: #c084fc !important; }
.user { color: #4ade80 !important; }
.guest { color: #fb923c !important; }

/* Message type highlights */
.me {
  background: rgba(0,212,255,0.06) !important;
  border-left: 2px solid rgba(0,212,255,0.4) !important;
  margin: 1px 0 !important;
  padding: 3px 3px 6px 12px !important;
  border-radius: 0 0 0 0 !important;
}
.global {
  background: rgba(239,68,68,0.08) !important;
  border-left: 2px solid rgba(239,68,68,0.5) !important;
  padding: 3px 3px 6px 12px !important;
}
.private {
  background: rgba(16,185,129,0.08) !important;
  border-left: 2px solid rgba(16,185,129,0.4) !important;
  padding: 3px 3px 6px 12px !important;
}
.seen {
  background: rgba(124,58,237,0.08) !important;
  border-left: 2px solid rgba(124,58,237,0.4) !important;
  padding: 3px 3px 6px 12px !important;
}

/* Timestamps */
.datechat { color: var(--text-dim) !important; font-size: 11px !important; }
.logs_date { color: var(--text-dim) !important; font-size: 11px !important; }

/* ============================================
   FOOTER / MENU BAR
   ============================================ */

#wrap_footer {
  background: transparent !important;
}

.background_menu_footer {
  background: rgba(8,12,20,0.95) !important;
  border-top: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

#menu_container {
  padding: 0 8px !important;
}

#my_menu {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  height: 100% !important;
}

.box_menu {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: var(--border-radius-sm) !important;
  transition: all var(--transition) !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
}
.box_menu:hover {
  background: rgba(0,212,255,0.1) !important;
  border-color: rgba(0,212,255,0.3) !important;
  color: var(--accent) !important;
}

/* Menu dropdown */
.menu_drop {
  background: rgba(8,12,20,0.97) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
  padding: 6px !important;
  min-width: 180px !important;
}

.menu_drop li {
  border-radius: var(--border-radius-sm) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-family: 'Outfit', sans-serif !important;
  transition: all var(--transition) !important;
  color: var(--text-secondary) !important;
  border: none !important;
}
.menu_drop li.bottom_separator, .menu_drop li.top_separator {
  border: none !important;
}
.menu_drop li:hover, .hover_element:hover {
  background: rgba(0,212,255,0.1) !important;
  color: var(--text-primary) !important;
}
.menu_drop li i { margin-right: 8px !important; width: 16px !important; }

/* Logout special */
.logout_button { color: #fca5a5 !important; }
.logout_button:hover { background: rgba(239,68,68,0.12) !important; color: #fca5a5 !important; }

/* ============================================
   RADIO PLAYER - MODERN REDESIGN
   ============================================ */

#container_player {
  background: linear-gradient(135deg, rgba(13,18,32,0.98) 0%, rgba(8,12,20,0.98) 100%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), var(--shadow-accent) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Animated wave bar at top of player */
#container_player::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2), var(--accent));
  background-size: 200% 100%;
  animation: wave-bar 3s linear infinite;
}
@keyframes wave-bar {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

#player_header {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 12px 16px 4px !important;
}

.close_player {
  color: var(--text-dim) !important;
  font-size: 16px !important;
  transition: color var(--transition) !important;
  cursor: pointer !important;
}
.close_player:hover { color: var(--danger) !important; }

#player_content {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 20px 20px !important;
}

#playbtn {
  cursor: pointer !important;
  transition: all var(--transition) !important;
}

#control_button {
  width: 50px !important;
  height: 50px !important;
  background: linear-gradient(135deg, var(--accent), #0088aa) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: #000 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(0,212,255,0.3) !important;
  transition: all var(--transition) !important;
}
#control_button:hover {
  transform: scale(1.08) !important;
  box-shadow: 0 6px 28px rgba(0,212,255,0.45) !important;
}

/* Volume icon in bottom bar */
#player_content .box_menu {
  background: rgba(0,212,255,0.07) !important;
  border-color: rgba(0,212,255,0.18) !important;
}
#player_content .box_menu:hover {
  background: rgba(0,212,255,0.15) !important;
}

/* Player inside menu bar */
#my_menu #player_content {
  padding: 4px 0 !important;
  gap: 6px !important;
}
#my_menu #control_button {
  width: 34px !important;
  height: 34px !important;
  font-size: 14px !important;
}

/* ============================================
   PANELS (sidebar panels)
   ============================================ */

.panels {
  background: rgba(8,12,20,0.97) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Panel headers */
.panel_head {
  background: rgba(0,212,255,0.05) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  padding: 14px 18px !important;
  color: var(--text-primary) !important;
}

/* User list in panels */
.open_user {
  border-radius: var(--border-radius-sm) !important;
  transition: all var(--transition) !important;
}
.open_user:hover {
  background: rgba(0,212,255,0.07) !important;
}

.user_separator {
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* ============================================
   INPUT / SEND BAR
   ============================================ */

#input_wrap, .input_wrap {
  background: rgba(8,12,20,0.8) !important;
  border-top: 1px solid var(--glass-border) !important;
  padding: 10px !important;
}

#chat_text, textarea#chat_text {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--text-primary) !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  resize: none !important;
  transition: all var(--transition) !important;
}
#chat_text:focus {
  border-color: var(--accent) !important;
  background: rgba(0,212,255,0.04) !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.1) !important;
  outline: none !important;
}
#chat_text::placeholder {
  color: var(--text-dim) !important;
}

/* Send button */
#submit_button {
  background: linear-gradient(135deg, var(--accent), #0099cc) !important;
  color: #000 !important;
  font-weight: 700 !important;
  font-family: 'Outfit', sans-serif !important;
  border-radius: var(--border-radius-sm) !important;
  border: none !important;
  cursor: pointer !important;
  transition: all var(--transition) !important;
  box-shadow: 0 4px 16px rgba(0,212,255,0.25) !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}
#submit_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(0,212,255,0.4) !important;
}

/* Icon bar (emoticons, images etc) */
.icon_bar i { color: var(--text-secondary) !important; transition: color var(--transition) !important; }
.icon_bar i:hover { color: var(--accent) !important; }

/* Room topic */
#room_topic {
  background: rgba(8,12,20,0.9) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 8px 16px !important;
}
.topic {
  color: var(--text-secondary) !important;
  border: none !important;
  background: none !important;
  font-size: 13px !important;
}

/* ============================================
   BUTTONS GLOBAL
   ============================================ */

.sub_button {
  background: rgba(255,255,255,0.06) !important;
  color: var(--text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  font-family: 'Outfit', sans-serif !important;
  transition: all var(--transition) !important;
  cursor: pointer !important;
}
.sub_button:hover, .hover_element:hover {
  background: rgba(0,212,255,0.1) !important;
  border-color: rgba(0,212,255,0.3) !important;
  color: var(--text-primary) !important;
}
.selected_element {
  background: linear-gradient(135deg, var(--accent), #0099cc) !important;
  color: #000 !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.4); }

/* ============================================
   EMOTICON & COLOR PICKER
   ============================================ */

#main_emoticon {
  background: rgba(8,12,20,0.97) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
}

/* ============================================
   LOGOUT / MODAL BOXES
   ============================================ */

#logout_box, .panels {
  border-radius: var(--border-radius) !important;
}

/* ============================================
   NOTIFICATION / PRIVATE COUNT
   ============================================ */

#private_count {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
  border: 2px solid var(--bg-deep) !important;
  border-radius: 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 700px) {
  #content_login_left {
    border-right: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
  }
  #content_login_right {
    border-left: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius) !important;
  }
  #container_login {
    padding: 12px !important;
  }
  #content_login_left, #content_login_right {
    padding: 32px 24px !important;
  }
  #content_login_left::after {
    left: 24px !important;
  }
}

/* ============================================
   REGISTRATION PANEL
   ============================================ */

#registration_wrap {
  background: rgba(8,12,20,0.97) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6) !important;
}

/* ============================================
   SYSTEM MESSAGES & ALERTS
   ============================================ */

.system { color: var(--text-dim) !important; }
.error { color: #fca5a5 !important; }
.success { color: #6ee7b7 !important; }

.my_notice {
  background: rgba(0,212,255,0.1) !important;
  border-radius: 6px !important;
  color: var(--text-primary) !important;
  border: 1px solid rgba(0,212,255,0.2) !important;
}

/* ============================================
   SPECIAL: NOW PLAYING TICKER
   ============================================ */

.now_playing_bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: rgba(0,212,255,0.05);
  border-top: 1px solid rgba(0,212,255,0.1);
  font-size: 12px;
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  overflow: hidden;
}

.now_playing_label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.now_playing_title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-secondary);
}

/* Radio wave animation for play button area */
@keyframes radiowave {
  0% { box-shadow: 0 0 0 0 rgba(0,212,255,0.4); }
  70% { box-shadow: 0 0 0 12px rgba(0,212,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,212,255,0); }
}
#control_button.fa-pause {
  animation: radiowave 2s infinite !important;
}

/* ============================================
   PANEL ENHANCEMENTS
   ============================================ */

.panelthree {
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Input fields in panels */
.panel_element input[type="text"],
.panel_element input[type="password"],
.panel_element textarea {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  color: #f0f6ff !important;
  font-family: 'Outfit', sans-serif !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1) !important;
}
.panel_element input[type="text"]:focus,
.panel_element input[type="password"]:focus,
.panel_element textarea:focus {
  border-color: #00d4ff !important;
  background: rgba(0,212,255,0.05) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.1) !important;
}

/* Panel buttons */
.button_half, .profile_button_full {
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
  padding: 9px 0 !important;
  transition: all 0.22s !important;
}

/* Chat user list panel */
#container_user {
  background: rgba(8,12,20,0.95) !important;
}
#container_user li {
  border-radius: 8px !important;
  transition: all 0.18s !important;
  font-family: 'Outfit', sans-serif !important;
}

/* Input bar area */
#input_text_wrap {
  background: rgba(13,18,32,0.9) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* Color picker modernization */
.color_box {
  border-radius: 4px !important;
  transition: transform 0.15s !important;
  cursor: pointer !important;
}
.color_box:hover {
  transform: scale(1.2) !important;
}

/* Room buttons */
.roombutton {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  transition: all 0.22s !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 13px !important;
}
.roombutton:hover, .roombutton.selected_element {
  background: rgba(0,212,255,0.1) !important;
  border-color: rgba(0,212,255,0.3) !important;
}

/* Active room */
.room_active {
  background: rgba(0,212,255,0.12) !important;
  border-color: rgba(0,212,255,0.4) !important;
  color: #00d4ff !important;
}

/* Nowplaying animation in footer - ensure waveup keyframe exists */
@keyframes waveup {
  0%, 100% { transform: scaleY(1); opacity: 0.7; }
  50% { transform: scaleY(0.3); opacity: 1; }
}

/* Link colors */
a { color: #00d4ff !important; }
a:hover { color: #7c3aed !important; }

/* Topic bar */
#room_topic {
  font-size: 13px !important;
  background: rgba(8,12,20,0.8) !important;
}

/* Input_top area if orientation == 1 */
#input_top {
  background: rgba(8,12,20,0.85) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}