/* === MODERN RED/BLACK PLAYER THEME === */
 :root {
   --bg-color: #000000;
   /* Deep Charcoal Black */
   --bg-card: #121212;
   /* Slightly lighter card/element background */
   --text-primary: #ffffff;
   /* Pure White text */
   --text-secondary: #b3b3b3;
   /* Light Grey text */

   --accent-primary: #ff3b3b;
   --accent-red: #ff3b3b;
   --accent-glow: rgba(255, 59, 59, 0.4);
   --accent-secondary: #8e0000;
   --gradient-accent: linear-gradient(135deg, #ff4141, #8e0000);

   --glass-bg: rgba(20, 0, 0, 0.9);
   --border-color: rgba(255, 59, 59, 0.3);

   /* Clean, minimal shadows */
   --shadow-out: 0 4px 12px rgba(0, 0, 0, 0.6);
   --shadow-in: inset 0 2px 4px rgba(0, 0, 0, 0.7), inset 0 -2px 4px rgba(30, 30, 30, 0.5);
   --shadow-float: 0 10px 30px rgba(255, 59, 59, 0.2);

   /* Glow Effects */
   --glow-red: 0 0 10px rgba(255, 59, 59, 0.6);
 }

 /* Base & Reset */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Inter', sans-serif;
   -webkit-tap-highlight-color: transparent;
 }

 body {
   overflow: visible;
   touch-action: none;
   background: var(--bg-color);
   color: var(--text-primary);
   /* 1. Metallic Background GIF */
   background-image: url('bg.gif');
   background-size: cover;
   background-attachment: fixed;
   background-position: center;
   padding-bottom: 70px;
   /* Space for the bottom navigation bar */
 }

 /* --- SCROLLBAR STYLING (New: Permanent Scroller Thumb for Library/Chat) --- */
 body::-webkit-scrollbar,
 .chat-msgs::-webkit-scrollbar,
 .online-list::-webkit-scrollbar,
 #songListContainer::-webkit-scrollbar {
   width: 8px;
   height: 8px;
 }

 .library-content::-webkit-scrollbar,
 #playlistsContainer::-webkit-scrollbar {
   display: none;
 }

 .library-content,
 #playlistsContainer {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }


 body::-webkit-scrollbar-thumb,
 .chat-msgs::-webkit-scrollbar-thumb,
 .online-list::-webkit-scrollbar-thumb,
 #songListContainer::-webkit-scrollbar-thumb {
   background-color: var(--accent-primary);
   border-radius: 4px;
   border: 2px solid var(--bg-color);
 }


 body::-webkit-scrollbar-track,
 .chat-msgs::-webkit-scrollbar-track,
 .online-list::-webkit-scrollbar-track,
 #songListContainer::-webkit-scrollbar-track {
   background: var(--bg-card);
 }


 /* --- END SCROLLBAR STYLING --- */


 /* Overlay for better readability over GIF */
 body::before {
   content: '';
   position: fixed;
   inset: 0;
   background: rgba(18, 18, 18, 0.9);
   /* Deep Charcoal overlay */
   z-index: -1;
 }

 /* Clean Style Buttons */
 button {
   background: var(--bg-card);
   border: none;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--text-secondary);
   cursor: pointer;
   transition: all 0.2s ease;
   box-shadow: var(--shadow-out);
   font-weight: 600;
   border: 1px solid var(--border-color);
   /* Subtle blue edge */
 }

 /* Ensure icon color is right inside buttons */
 button svg {
   color: var(--text-secondary);
   transition: color 0.2s ease;
 }

 button:active {
   box-shadow: var(--shadow-in);
   transform: scale(0.95);
   background: #2a2a2a;
   /* Darken slightly on press */
 }

 button:focus {
   outline: none;
 }

 /* Top Controls - Systematic Arrangement */
 .top-controls {
   position: fixed;
   /* Changed to fixed to float over content */
   top: 0;
   /* Align to top */
   left: 0;
   right: -8px;
   padding: 1rem 1.5rem;
   /* Increased padding for better visibility */
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 20;
   /* Increased Z-index to sit above overlays */
   background: var(--glass-bg);
   /* Use glass background */
   backdrop-filter: blur(8px);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
 }

 .top-controls button {
   /* Responsive sizing for header controls */
   width: 36px;
   height: 36px;
   border-radius: 50%;
   font-size: 1rem;
   background: var(--bg-card);
   /* Use card background for explicit controls */
   border: 1px solid rgba(255, 255, 255, 0.1);

   @media (min-width: 640px) {
     width: 40px;
     height: 40px;
     font-size: 1.1rem;
   }
 }

 /* Profile Pic in Header */
 #profilePicHeader {
   width: 36px;
   /* Smaller default size */
   height: 36px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid var(--accent-primary);
   box-shadow: var(--glow-blue);
   cursor: pointer;
   transition: transform 0.2s;

   @media (min-width: 640px) {
     width: 40px;
     height: 40px;
   }
 }

 #profilePicHeader:active {
   transform: scale(0.95);
 }


 .top-controls button.active-state {
   color: var(--accent-primary);
   box-shadow: var(--shadow-in);
   border-color: var(--accent-primary);
 }

 .top-controls button.active-state svg {
   color: var(--accent-primary);
 }

 /* Online User Count Badge */
 #onlineUsersBtn {
   position: relative;
 }

 #emojiBtnPlayer {
   /* Ensure it matches header button sizes */
   padding: 0.5rem;
   width: 40px;
   height: 40px;
 }


 #onlineUsersBtn span {
   position: absolute;
   top: -2px;
   right: -2px;
   background: var(--text-primary);
   border: 3px solid var(--accent-primary);
   color: var(--bg-color);
   width: 16px;
   height: 16px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.6rem;
   font-weight: bold;
   box-shadow: var(--glow-blue);
   /* Subtle blue glow */
 }

 /* Top Right Grouping */
 .top-control-group {
   display: flex;
   gap: 0.75rem;
   align-items: center;
 }

 /* Room ID Display (Central placement change for requirement 1) */
 #roomIdDisplay {
   /* Moved to be inline with other controls or below the track info, keeping styles */
   background: rgba(30, 30, 30, 0.8);
   backdrop-filter: blur(5px);
   padding: 0.5rem 1rem;
   border-radius: 12px;
   font-size: 0.9rem;
   font-weight: 700;
   color: var(--accent-primary);
   border: 1px solid var(--border-color);
   box-shadow: none;
   cursor: pointer;
   z-index: 60;
   white-space: nowrap;
   display: inline-block;
   margin: 0;
   /* Compact style for inline display */
 }

 /* Player Container */
 .player-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: calc(100vh - 70px);
   padding: 1rem 1rem 15px 1rem;
   padding-top: 4.5rem;
   position: relative;
   transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s ease, border-radius 0.6s ease;
   will-change: transform, filter;

   @media (min-height: 800px) {
     padding-top: 6rem;
   }

   @media (min-width: 640px) {
     padding: 2rem 2.5rem 80px 2.5rem;
     padding-top: 6rem;
   }
 }

 @media (max-width: 400px) {
   .player-container {
     padding-top: 3.5rem;
     padding-bottom: 90px;
   }

   .top-nav-header-v2 {
     padding: 1rem 1rem 0 1rem !important;
     margin-bottom: 0.5rem !important;
   }

   .header-icon-btn {
     padding: 6px !important;
   }

   .circular-player-v2 {
     --glow-size: 160px;
     --player-ring-size: 260px;
     --album-art-size: 180px;
     margin-bottom: 0.5rem !important;
   }

   .sk-album {
     --album-art-size: 180px;
     margin-bottom: 1.5rem !important;
   }

   .track-title-v2 {
     font-size: 1.5rem !important;
   }

   .artist-name-v2 {
     font-size: 0.75rem !important;
     margin-bottom: 0.25rem !important;
   }

   .player-action-btn-v2 {
     width: 42px !important;
     height: 42px !important;
   }

   .control-circle-btn-v2 {
     width: 44px !important;
     height: 44px !important;
   }

   .main-play-btn-v2 {
     width: 64px !important;
     height: 54px !important;
   }

   .track-info-v2 {
     margin-bottom: 0.75rem !important;
     padding-left: 1.25rem !important;
     padding-right: 1.25rem !important;
   }

   .controls-v2 {
     margin-bottom: 1rem !important;
     padding-left: 1.25rem !important;
     padding-right: 1.25rem !important;
   }

   .progress-bar-wrap-v2 {
     margin-bottom: 0.5rem !important;
   }
 }

 @media (max-width: 350px) {
   .player-container {
     padding-top: 3rem;
   }

   .circular-player-v2 {
     --glow-size: 140px;
     --player-ring-size: 220px;
     --album-art-size: 150px;
   }

   .sk-album {
     --album-art-size: 150px;
   }

   .track-title-v2 {
     font-size: 1.25rem !important;
   }

   .control-circle-btn-v2 {
     width: 38px !important;
     height: 38px !important;
   }

   .main-play-btn-v2 {
     width: 58px !important;
     height: 48px !important;
   }
 }

 @media (max-height: 750px) {
   .track-info-v2 {
     margin-bottom: 0.75rem !important;
   }

   .controls-v2 {
     margin-bottom: 1rem !important;
   }

   .circular-player-v2 {
     --player-ring-size: 260px;
     --album-art-size: 180px;
     --glow-size: 160px;
     margin-bottom: 0.5rem !important;
   }

   .sk-album {
     --album-art-size: 180px;
   }

   .top-nav-header-v2 {
     padding-top: 1rem !important;
     margin-bottom: 0.5rem !important;
   }

   .player-container {
     padding-top: 3.5rem !important;
   }

   .track-title-v2 {
     font-size: 1.6rem !important;
   }
 }

 @media (max-height: 700px) {
   .track-info-v2 {
     margin-bottom: 0.5rem !important;
   }

   .controls-v2 {
     margin-bottom: 0.5rem !important;
   }

   .circular-player-v2 {
     --player-ring-size: 220px;
     --album-art-size: 150px;
     --glow-size: 140px;
     margin-bottom: 0.25rem !important;
   }

   .sk-album {
     --album-art-size: 150px;
   }
 }

 body.has-overlay .player-container {
   transform: scale(0.92);
   filter: brightness(0.6) blur(4px);
   border-radius: 40px;
   overflow: hidden;
 }

 /* Album Art */
 .album-art {
   margin: 0;
   border-radius: 50%;
   overflow: visible;
   position: relative;
   background: var(--bg-card);
   /* Shadow updated to Pink */
   box-shadow: none;
   border: none;
   z-index: 10;
   transition: transform 0.4s ease;
 }

 .album-art-inner {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   /* Circle */
   overflow: hidden;
   /* Clip image to circle */
   touch-action: none;
 }




 .album-art img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .album-art.rotate {
   /* Rotation removed per user request */
   box-shadow: var(--shadow-float), 0 0 20px rgba(0, 191, 255, 0.6);

 }

 /* Circular Progress Ring */
 .progress-ring {
   position: absolute;

   transform: translate(-50%, -50%) scaleX(-1);
   z-index: 5;
   pointer-events: auto;
   /* Enable clicks */
   cursor: pointer;
 }

 .progress-ring__circle-bg {
   stroke: rgba(255, 255, 255, 0.1);
   stroke-width: 8;
   fill: transparent;
 }

 .progress-ring__circle {
   transition: stroke-dashoffset 0.1s linear;
   /* Smooth linear update */
   transform: rotate(0deg);
   transform-origin: 50% 50%;
   stroke: var(--accent-primary);
   stroke-width: 8;
   fill: transparent;
   filter: drop-shadow(0 0 8px var(--accent-primary));
 }

 /* Play/Pause Icon on Cover */
 #playPauseBtnOnCover {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scaleX(-1);
   z-index: 15;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(5px);
   box-shadow: var(--shadow-out);
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
 }

 #playPauseBtnOnCover svg {
   color: var(--text-primary);
   font-size: 1.8rem;
   transition: color 0.2s ease;
 }

 #playPauseBtnOnCover:hover {
   background-color: rgba(0, 0, 0, 0.8);
   box-shadow: var(--shadow-float);
 }

 #playPauseBtnOnCover:active {
   transform: translate(-50%, -50%) scale(0.95);
   box-shadow: var(--shadow-in);
 }

 /* Star Rating on Cover */
 .star-rating-on-cover {
   position: absolute;
   top: 10px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 2px;
   z-index: 15;
   background: rgba(0, 0, 0, 0.6);
   backdrop-filter: blur(5px);
   padding: 4px 8px;
   border-radius: 12px;
   box-shadow: var(--shadow-out);
   border: 1px solid rgba(255, 255, 255, 0.1);
 }

 .star-rating-on-cover .star {
   color: #ffd700;
   /* Gold color for stars */
   font-size: 1rem;
 }

 /* Like Button on Cover */
 #likeBtnOnCover {
   position: absolute;
   right: 83px;
   z-index: 15;
   width: 45px;
   height: 43px;
   border-radius: 50%;
   background-color: #00bfff;
   /* Changed to transparent */
   box-shadow: none;
   /* Removed shadow by default */
   border: none;
   /* Removed border by default */
   backdrop-filter: none;
 }

 /* Like Button on Cover when Liked */
 #likeBtnOnCover.liked {
   background: #00bfff;
   /* Pink/Red background */
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 191, 255, 0.6);
   border: 2px solid var(--text-primary);
 }

 #likeBtnOnCover svg {
   color: var(--text-primary);
   fill: transparent;
   transition: all 0.2s;
 }

 #likeBtnOnCover.liked svg {
   fill: var(--text-primary);
 }

 #likeBtnOnCover:active {
   transform: scale(0.9);
 }

 /* Heart Burst Effect */
 .heart-burst {
   position: absolute;
   top: 0;
   left: 0;
   right: -8px;
   bottom: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   z-index: 20;
 }

 .heart-burst svg {
   position: absolute;
   width: 100px;
   height: 100px;
   fill: #ff0000;
   animation: heartScale 0.8s ease-out forwards;
   opacity: 0;
 }

 @keyframes heartScale {
   0% {
     transform: scale(0);
     opacity: 1;
   }

   50% {
     transform: scale(1.5);
     opacity: 1;
   }

   100% {
     transform: scale(2.5);
     opacity: 0;
   }
 }


 /* Track Info */
 .track-info {
   text-align: center;
   margin-bottom: 0rem;
   /* Adjusted for Room ID below */
 }

 .track-info .track-title {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   color: var(--text-primary);
 }

 .track-info .artist-name {
   font-size: 0.9rem;
   color: var(--accent-primary);
   font-weight: 500;
   letter-spacing: 0.5px;
   text-transform: uppercase;
 }

 /* Duo Profile Container (Goal 5) */
 #duoProfileContainer {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100px;
   /* Reduced width for inline */
   height: 40px;
   z-index: 10;
 }

 .duo-profile-pic {
   width: 35px;
   /* Smaller for inline */
   height: 35px;
   border-radius: 50%;
   object-fit: cover;
   border: none;
   box-shadow: none;
   transition: opacity 0.3s ease;
   z-index: 2;
   background: var(--bg-card);
   /* Ensure bg if image fails first */
   overflow: hidden;
   /* Ensure round shape strictly */
 }


 /* The glowing wire connector (SVG) */

 #glowingWire #wireHeart path {
   fill: #00bfff;
   filter: drop-shadow(0 0 6px rgba(0, 191, 255, 0.6));
   transform-origin: center;
   transform-box: fill-box;
   /* IMPORTANT for SVG transform origin */
   animation: wireHeartPulse 1.6s ease-in-out infinite;
 }

 @keyframes wireHeartPulse {
   0% {
     transform: scale(0.96);
   }

   50% {
     transform: scale(1.12);
   }

   100% {
     transform: scale(0.96);
   }
 }

 #wireHeart {
   /* opacity handled by parent SVG or specific logic if needed */
   opacity: 1;
   transition: opacity .18s ease;
 }

 #glowingWire {
   position: absolute;
   width: 100%;
   height: 100%;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.5s ease;
   z-index: 1;
 }

 /* Target ONLY the wire line for drawing animation */
 #wirePath {
   stroke: var(--accent-primary);
   stroke-width: 2;
   fill: none;
   filter: drop-shadow(0 0 2px var(--accent-primary));
   stroke-dasharray: 60;
   /* Distance from 20 to 80 is 60 */
   stroke-dashoffset: 60;
   animation: drawLine 2s ease-out 1 forwards;
   opacity: 1;
 }

 /* When the fixed class is added, ensure it stays visible */
 .glowing-wire-fixed #wirePath {
   animation: none;
   stroke-dashoffset: 0;
   opacity: 1;
 }

 @keyframes drawLine {
   from {
     stroke-dashoffset: 60;
   }

   to {
     stroke-dashoffset: 0;
   }
 }


 /* Progress Container */
 .progress-container {
   background: #2a2a2a;
   /* Darker rail */
   height: 6px;
   border-radius: 10px;
   margin: 1rem 0;
   cursor: pointer;
   width: 85%;
   max-width: 400px;
   overflow: visible;
   touch-action: none;
   position: relative;
 }

 .progress-bar {
   height: 100%;
   width: 0%;
   background: var(--gradient-accent);
   border-radius: 10px;
   position: relative;
   transition: width 0.1s linear;
   box-shadow: var(--glow-blue);
   /* Subtle blue glow for progress */
 }

 .progress-bar::after {
   content: '';
   position: absolute;
   right: -8px;
   top: 50%;
   transform: translateY(-50%);
   width: 16px;
   height: 16px;
   background: var(--text-primary);
   border: 3px solid var(--accent-primary);
   /* Blue knob */
   border-radius: 50%;
   box-shadow: var(--glow-blue);
 }

 .time-display {
   display: flex;
   justify-content: space-between;
   font-size: 0.85rem;
   color: var(--text-secondary);
   margin-bottom: 2rem;
   width: 85%;
   max-width: 400px;
   font-weight: 600;
 }

 /* Main Controls */
 .controls {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1.5rem;
   margin-bottom: 2rem;
 }

 .controls button {
   /* Responsive sizing for controls */
   width: 50px;
   height: 50px;
   border-radius: 50%;
   font-size: 1.2rem;
   background: var(--bg-card);
   color: var(--text-secondary);

   @media (min-width: 640px) {
     width: 60px;
     height: 60px;
     font-size: 1.4rem;
   }
 }

 .controls button svg {
   color: var(--text-secondary);
 }

 .controls .play-btn {
   background: var(--gradient-accent);
   color: var(--bg-color);
   /* Dark text on bright button */
   font-size: 1.8rem;
   width: 70px;
   height: 70px;
   box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
   border: none;

   @media (min-width: 640px) {
     font-size: 2rem;
     width: 75px;
     height: 75px;
   }
 }

 .controls .play-btn svg {
   color: var(--bg-color);
 }

 .controls .play-btn:active {
   box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.4);
   transform: scale(0.95);
 }

 /* Control Buttons sizing for Like/Emoji */
 .controls .control-btn {
   width: 40px;
   height: 40px;
   font-size: 1rem;
 }

 /* Listen Modal Overlay (New Element) */
 .listen-modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(15px);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.4s ease, visibility 0.4s ease;
 }

 .listen-modal-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 /* Redesigned Listen Together Modal (V2) */
 .listen-modal-card-v2 {
   background: #121212;
   padding: 2.5rem 2rem;
   border-radius: 35px;
   width: 92%;
   max-width: 380px;
   box-shadow: 0 0 30px rgba(255, 59, 59, 0.15), 0 15px 50px rgba(0, 0, 0, 0.8);
   border: 1px solid rgba(255, 59, 59, 0.4);
   text-align: center;
   position: relative;
   transform: scale(0.8) translateY(20px);
   transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .listen-modal-overlay.active .listen-modal-card-v2 {
   transform: scale(1) translateY(0);
 }

 /* Close Button V2 */
 .modal-close-btn-v2 {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 36px;
   height: 36px;
   background: rgba(255, 255, 255, 0.05);
   border: none;
   border-radius: 50%;
   color: #999;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
 }

 .modal-close-btn-v2:hover {
   background: rgba(255, 255, 255, 0.15);
   color: white;
   transform: scale(1.1);
 }

 .btn-create-room-v2 {
   width: 100%;
   height: 60px;
   background: linear-gradient(180deg, #ff4b4b 0%, #e60000 100%);
   color: white;
   border: none;
   border-radius: 20px;
   font-size: 1.1rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 20px rgba(230, 0, 0, 0.3), 0 0 20px rgba(255, 75, 75, 0.2);
   cursor: pointer;
   transition: all 0.2s;
 }

 .btn-create-room-v2:active {
   transform: scale(0.97);
   box-shadow: 0 5px 10px rgba(230, 0, 0, 0.4);
 }

 .btn-join-room-v2 {
   width: 100%;
   height: 60px;
   background: #1a1a1a;
   color: white;
   border: 1px solid #333;
   border-radius: 20px;
   font-size: 1.1rem;
   font-weight: 700;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
 }

 .btn-join-room-v2:hover {
   background: #252525;
   border-color: #444;
 }

 .btn-join-room-v2:active {
   transform: scale(0.97);
 }

 /* Recent Rooms List */
 .recent-room-item {
   display: flex;
   align-items: center;
   padding: 10px;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   border-radius: 12px;
   cursor: pointer;
   transition: all 0.2s;
 }

 .recent-room-item:hover {
   background: rgba(255, 255, 255, 0.05);
 }

 .room-icon-box {
   width: 44px;
   height: 44px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
   color: #ccc;
 }

 .room-info {
   flex: 1;
   display: flex;
   flex-direction: column;
   text-align: left;
 }

 .room-name {
   color: white;
   font-size: 1rem;
   font-weight: 500;
 }

 .room-id-small {
   color: #666;
   font-size: 0.75rem;
   font-family: 'Outfit', sans-serif;
   letter-spacing: 1px;
 }

 .room-item-end {
   opacity: 0.6;
 }

 /* FIX: Ensure SVG size is reasonable */
 .modal-close-btn svg {
   width: 20px;
   height: 20px;
   color: white;
 }

 /* Sidebar / Menu Drawer (Adjusted to full screen overlay and slide from bottom) */
 .menu-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.65);
   backdrop-filter: blur(12px);
   z-index: 500;
   /* Increased to stay above everything else */
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   transform: translateX(0);
   /* Default is here */
 }

 .menu-overlay.active {
   opacity: 1;
   pointer-events: all;
   transform: translateX(0);
 }

 /* Specific handling for sliding out to Home */
 .menu-overlay.exit-to-home {
   opacity: 0;
   transform: translateX(100%);
   pointer-events: none;
 }

 .menu-drawer {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   width: 100%;
   /* Changed to full width */
   max-width: none;
   /* Removed max-width */
   background: var(--bg-color);
   transform: translateX(100%);
   /* Slide up from bottom */
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
   box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
   padding: 2rem 1.5rem 80px 1.5rem;
   /* Add padding for bottom nav */
   border-top: 2px solid var(--accent-primary);
   border-right: none;
   /* Removed right border */
 }

 /* Make the settings card responsive and centered for desktop-like view */
 .menu-settings-content {
   max-width: 400px;
   margin: 0 auto;
   padding-bottom: 0;
   /* Handled by drawer padding */
 }

 .menu-overlay.active .menu-drawer {
   transform: translateX(0);
 }

 /* Header adjusted to support "Back" button for settings */
 .menu-header {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1.5rem;
   padding-bottom: 1rem;
   border-bottom: 1px solid var(--border-color);
 }

 .menu-title {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.5rem;
   color: var(--accent-primary);
   font-weight: 700;
 }

 /* Main Content container for Menu items */
 .library-content {
   /* Renamed from menu-main-content */
   transition: opacity 0.3s ease;
   flex: 1;
   overflow-y: auto;
   /* This now has the custom scrollbar applied */
 }

 /* --- SNOW EFFECT --- */
 #snow-container {
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   /* Fade out snowflakes at the bottom */
   -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
   mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
 }

 /* Frozen Mist Effect */
 #snow-container::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: -8px;
   height: 30vh;
   /* Mist covers top 30% */
   background: linear-gradient(to bottom, rgba(200, 230, 255, 0.05), transparent);
   filter: blur(20px);
   pointer-events: none;
   z-index: -1;
 }

 .snowflake {
   position: absolute;
   top: -30px;
   color: white;
   opacity: 0.3;
   pointer-events: none;
   animation-name: snowFall, snowSway, snowSpin;
   animation-timing-function: linear, ease-in-out, linear;
   animation-iteration-count: infinite, infinite, infinite;
   animation-play-state: running, running, running;
   z-index: 0;
   /* Soft look */
   filter: blur(0.5px);
 }

 @keyframes snowSpin {
   0% {
     transform: rotate(0deg);
   }

   100% {
     transform: rotate(360deg);
   }
 }

 @keyframes snowFall {
   0% {
     top: -10%;
   }

   100% {
     top: 110%;
   }
 }

 @keyframes snowSway {

   0%,
   100% {
     transform: translateX(0);
   }

   50% {
     transform: translateX(30px);
     /* Reduced sway for subtlety */
   }
 }



 /* Playlists container needs explicit overflow/touch-action for drag scrolling */
 #playlistsContainer {
   overflow-y: auto;
   touch-action: pan-y;
   /* Enables vertical swipe scrolling */
 }


 /* Settings Content container for Settings view */
 .profile-and-utility-content {
   /* Renamed from menu-settings-content */
   transition: opacity 0.3s ease;
   opacity: 0;
   pointer-events: none;
   /* ADJUSTED POSITIONING FOR FULL SCREEN OVERLAY */
   position: absolute;
   top: 7rem;
   left: 0;
   right: -8px;
   bottom: 0;
   overflow-y: auto;
   padding: 0 1.5rem;
   /* Re-added horizontal padding */
   margin-top: 0;
   overflow-x: hidden;
   /* Prevent horizontal scroll during slide */
 }

 /* CLASS FOR ABSOLUTE POSITIONING DURING ANIMATION */
 .settings-anim-fix {
   position: absolute;
   top: 0;
   left: 1.5rem;
   right: 1.5rem;
   width: auto;
   z-index: 10;
   pointer-events: none;
   /* Prevent clicks specific during anim */
 }

 .profile-and-utility-content.active {
   opacity: 1;
   pointer-events: all;
 }

 .menu-section-title {
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--accent-primary);
   margin: 1.5rem 0 0.5rem;
   font-weight: 700;
   padding-left: 1rem;
 }

 /* ANDROID STYLE LIST ITEM */
 .menu-item-btn,
 .playlist-link,
 .collapsible-header {
   width: 100%;
   display: flex;
   align-items: center;
   padding: 1rem;
   border-radius: 0;
   font-size: 1rem;
   gap: 1rem;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   color: var(--text-primary);
   margin-bottom: 0;
   text-decoration: none;
   box-shadow: none;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   /* Separator */
   position: relative;
   overflow: visible;
   touch-action: none;
   font-weight: 500;
   transition: background 0.2s;
 }

 .menu-item-btn:active,
 .playlist-link:active,
 .collapsible-header:active {
   transform: none;
   background: rgba(255, 255, 255, 0.05);
 }

 /* Icon styling fix */
 .menu-item-btn svg,
 .playlist-link img,
 .collapsible-header svg {
   color: var(--text-secondary);
 }

 .menu-item-btn:hover,
 .playlist-link:hover {
   background: rgba(255, 255, 255, 0.02);
 }

 .collapsible-header {
   cursor: pointer;
   justify-content: space-between;
   font-weight: 600;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   color: var(--text-primary);
   box-shadow: none;
   border: none;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   margin-bottom: 0;
   border-radius: 0;
   padding: 1rem;
 }

 .collapsible-header.open {
   background: #2a2a2a;
   /* Keep same background for removed content */
   border-color: var(--border-color);
 }

 .collapsible-header.open svg:last-child {
   transform: rotate(0deg);
   /* Reset rotation */
 }

 .playlist-group {
   margin-bottom: 1rem;
   /* Space between groups */
 }

 /* REMOVED .playlist-content styles as per user request (no nested song list) */

 .playlist-link img {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   /* Changed to square/rounded corners for track covers */
   object-fit: cover;
   border: 2px solid var(--accent-primary);
 }

 /* Fix alignment for bottom links */
 .menu-link-fix {
   width: 100%;
   margin-left: 0;
   box-shadow: var(--shadow-out);
   background: var(--bg-card);
   display: flex;
   align-items: center;
   padding: 0.8rem 1rem;
   border-radius: 12px;
   font-size: 1rem;
   gap: 1rem;
   margin-bottom: 0.8rem;
 }

 .menu-link-fix:active {
   transform: scale(0.98);
   box-shadow: var(--shadow-in);
 }

 /* Web View Overlay (Adjusted to slide up from bottom) */
 .web-overlay {
   position: fixed;
   inset: 0;
   background: var(--bg-color);
   z-index: 200;
   display: flex;
   flex-direction: column;
   transform: translateY(100%);
   /* Slide up from bottom */
   transition: transform 0.4s ease;
 }

 .web-overlay.active {
   transform: translateY(0);
 }

 .web-header {
   padding: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: var(--bg-card);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }

 .web-header h3 {
   font-weight: 700;
   color: var(--text-primary);
 }

 .web-iframe-container {
   flex: 1;
   background: #000;
   padding-bottom: 70px;
   /* Space for bottom nav */
 }

 iframe {
   width: 100%;
   height: 100%;
   border: none;
 }

 /* Search Overlay (Fade + Scale) */
 .search-overlay {
   position: fixed;
   inset: 0;
   background: var(--bg-color);
   z-index: 220;
   display: flex;
   flex-direction: column;
   opacity: 0;
   visibility: hidden;
   transform: scale(1.05);
   transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
     visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
     transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .search-overlay.active {
   opacity: 1;
   visibility: visible;
   transform: scale(1);
 }

 /* Song List Overlay (Slide Right-to-Left) */
 .song-list-overlay {
   position: fixed;
   inset: 0;
   background: var(--bg-color);
   z-index: 550;
   display: flex;
   flex-direction: column;
   transform: translateX(100%);
   opacity: 0;
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
 }

 .song-list-overlay.active {
   transform: translateX(0);
   opacity: 1;
 }

 /* Search Result Item */
 .search-result-item {
   display: flex;
   align-items: center;
   padding: 0.8rem;
   background: var(--bg-card);
   border-radius: 12px;
   margin-bottom: 0.5rem;
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   border: 1px solid var(--border-color);
 }

 .search-result-item:hover {
   background: #2a2a2a;
 }

 .search-result-item img {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   margin-right: 1rem;
   object-fit: cover;
 }

 /* Song List Item */
 .song-list-item {
   display: flex;
   align-items: center;
   padding: 0.8rem;
   background: var(--bg-card);
   border-radius: 12px;
   margin-bottom: 0.5rem;
   cursor: pointer;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
   transition: all 0.2s ease;
 }

 .song-list-item:active {
   box-shadow: var(--shadow-in);
   transform: scale(0.98);
 }

 .song-list-item.active {
   background: var(--text-primary);
   border: 3px solid var(--accent-primary);
   color: var(--bg-color);
   box-shadow: var(--glow-blue);
 }

 .song-list-item.active .text-xs {
   color: var(--bg-color) !important;
   opacity: 0.8;
 }

 .song-list-item img {
   width: 40px;
   height: 40px;
   border-radius: 8px;
   margin-right: 1rem;
   object-fit: cover;
 }

 /* New Button Style for List Toggle */
 #listToggleBtn {
   width: 35px;
   /* Adjusted width for better touch target */
   height: 35px;
   /* Adjusted height to match new width */
   border-radius: 50%;
   color: var(--text-secondary);
   font-size: 1.1rem;
   margin-left: 0.75rem;
   box-shadow: var(--shadow-out);
   background: var(--bg-card);
 }

 #listToggleBtn svg {
   color: var(--accent-primary);
 }

 #listToggleBtn:active {
   box-shadow: var(--shadow-in);
 }


 /* --- SCROLL TO TOP BUTTON STYLE --- */
 #scrollToTopBtn {
   position: absolute;
   bottom: 80px;
   /* Adjusted to be above bottom nav */
   right: 20px;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: var(--text-primary);
   border: 3px solid var(--accent-primary);
   color: var(--bg-color);
   font-size: 1.5rem;
   display: none;
   align-items: center;
   justify-content: center;
   box-shadow: var(--glow-blue);
   z-index: 230;
   opacity: 0;
   transition: opacity 0.3s, transform 0.3s;
   border: none;
 }

 #scrollToTopBtn:active {
   box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2);
   transform: scale(0.95);
 }



 .user-profile-preview {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   margin: 0 auto 1rem;
   border: 3px solid var(--accent-primary);
   object-fit: cover;
 }

 /* FIX 1: Ensure Log Out button is full width and visible */
 .logout-btn {
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   color: #ff4d4d;
   /* Red Text */
   width: 100%;
   padding: 1rem;
   margin-top: 2rem;
   box-shadow: none;
   border: 1px solid #ff4d4d;
   border-radius: 12px;
   /* Rounded pill */
   margin-bottom: 2rem;
   position: relative;
   z-index: 10;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 0.9rem;
 }

 .logout-btn:active {
   background: rgba(255, 77, 77, 0.1);
 }

 /* Online Users */
 .online-users-overlay {
   position: fixed;
   bottom: 0;
   left: 0;
   right: -8px;
   background: var(--bg-card);
   border-top-left-radius: 24px;
   border-top-right-radius: 24px;
   padding: 1.5rem;
   z-index: 150;
   transform: translateY(100%);
   transition: transform 0.3s ease;
   box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.5);
   max-height: 60vh;
   display: flex;
   flex-direction: column;
   border-top: 2px solid var(--accent-primary);
 }

 .online-users-overlay.active {
   transform: translateY(0);
 }

 .online-list {
   overflow-y: auto;
   margin-top: 1rem;
   flex: 1;
 }

 .user-item {
   display: flex;
   align-items: center;
   padding: 0.8rem 1rem;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   cursor: pointer;
   color: var(--text-primary);
   transition: all 0.2s ease;
   border-radius: 12px;
   margin-bottom: 2px;
 }

 .user-item:hover {
   background: rgba(255, 255, 255, 0.08);
   transform: translateX(4px);
 }

 .user-item .online-user-avatar,
 .user-item img {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   margin-right: 1rem;
   object-fit: cover;
   border: 2px solid var(--accent-primary);
   box-shadow: 0 0 8px rgba(0, 191, 255, 0.3);
 }

 .user-item button {
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   box-shadow: none;
   border: none;
 }

 .user-item button svg {
   color: var(--text-secondary);
   transition: color 0.2s;
 }

 .user-item button:hover svg {
   color: var(--accent-primary);
 }


 /* Sign Up */
 .signup-overlay {
   position: fixed;
   inset: 0;
   background: var(--bg-color);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 1rem;
 }

 .manual-login-bg {
   background-image: url('pics2/login2.webp') !important;
   background-size: cover;
   background-position: center;
 }

 .signup-card {
   width: 100%;
   height: 100%;
   max-width: none;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   border: none;
   box-shadow: none;
   padding: 2rem 1.5rem;
   /* Keep some padding for safe area */
   border-radius: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* Center content vertically */
   text-align: center;
 }

 .signup-card input,
 .signup-card textarea {
   width: 100%;
   padding: 1rem;
   border-radius: 12px;
   background: #2a2a2a;
   border: 1px solid #444444;
   margin: 0.5rem 0 1rem 0;
   color: var(--text-primary);
   outline: none;
 }

 .signup-card input:focus,
 .signup-card textarea:focus {
   border-color: var(--accent-primary);
 }

 /* Animations for Page Transitions */
 @keyframes slideInRight {
   from {
     transform: translateX(100%);
     opacity: 1;
   }

   to {
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slideOutLeft {
   from {
     transform: translateX(0);
     opacity: 1;
   }

   to {
     transform: translateX(-100%);
     opacity: 0;
   }
 }

 @keyframes slideInLeft {
   from {
     transform: translateX(-100%);
     opacity: 0;
   }

   to {
     transform: translateX(0);
     opacity: 1;
   }
 }

 @keyframes slideOutRight {
   from {
     transform: translateX(0);
     opacity: 1;
   }

   to {
     transform: translateX(100%);
     opacity: 0;
   }
 }

 .anim-slide-in-right {
   animation: slideInRight 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }

 .anim-slide-out-left {
   animation: slideOutLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }

 .anim-slide-in-left {
   animation: slideInLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }

 .anim-slide-out-right {
   animation: slideOutRight 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
 }

 @keyframes fadeOut {
   from {
     opacity: 1;
   }

   to {
     opacity: 0;
   }
 }

 .anim-fade-out {
   animation: fadeOut 0.4s ease forwards;
 }

 /* Step 1 Specific: Manual Login Background & Positioning */
 #step1 {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   z-index: 20;
   /* Use the specific background requested */
   background-image: url('pics2/login2.webp');
   background-size: cover;
   background-position: center;
   /* Ensure it starts off-screen or hidden via class, but when active allows animation */
 }

 /* Ensure Step 0 allows absolute positioning behavior if needed,
   or at least doesn't conflict.
   Currently .signup-card is flex. */

 /* Manual Login Background Class - DEPRECATED/REMOVED in favor of #step1 ID style */
 /* .manual-login-bg { ... } */

 .avatar-option {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   cursor: pointer;
   border: 2px solid transparent;
   transition: transform 0.2s;
 }

 .avatar-option.selected {
   border-color: var(--accent-primary);
   transform: scale(1.1);
   box-shadow: var(--glow-blue);
 }


 /* Google Button Styling */
 .google-btn {
   background: rgba(0, 0, 0, 0.6);
   /* Dark semi-transparent */
   color: white;
   transition: all 0.2s;
   border: 1px solid rgba(255, 255, 255, 0.2);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
   backdrop-filter: blur(5px);
   border-radius: 30px;
   /* Fully rounded */
 }

 .google-btn:hover {
   background: rgba(0, 0, 0, 0.8);
   border-color: rgba(255, 255, 255, 0.4);
 }

 .google-btn:active {
   background: rgba(0, 0, 0, 0.9);
   transform: scale(0.98);
 }

 /* NEW LOGIN STYLES */
 .signup-overlay-bg {
   background: url('pics2/bg.png') no-repeat center center fixed;
   background-size: cover;
 }

 /* Specific container for the initial login screen - darker/transparent */
 .login-intro-container {
   width: 100%;
   max-width: 400px;
   text-align: center;
   padding: 2rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   /* Push content to bottom primarily */
   min-height: 80vh;
   /* Occupy most of screen */
 }

 .login-title {
   font-family: 'Inter', sans-serif;
   /* Clean font */
   font-size: 3.5rem;
   font-weight: 300;
   color: #fff;
   margin-bottom: 0.5rem;
   letter-spacing: -1px;
   background: linear-gradient(to bottom, #fff 50%, #a78bfa 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 .login-subtitle {
   font-family: 'Inter', sans-serif;
   font-size: 1.1rem;
   color: #d1d5db;
   margin-bottom: 3rem;
   font-weight: 300;
   position: relative;
   display: inline-block;
 }

 /* Wavy underline simulation for "starts" logic if possible, simplified for now to text style */

 .btn-manual-login {
   background: linear-gradient(135deg, #8b5cf6, #ec4899);
   /* Purple to Pink/Violet gradient */
   color: white;
   width: 100%;
   padding: 1rem;
   border-radius: 30px;
   font-weight: 600;
   font-size: 1.1rem;
   border: none;
   box-shadow: none;
   /* Removed glow */
   margin-bottom: 1rem;
   transition: transform 0.2s;
 }

 .btn-manual-login:hover {
   transform: translateY(-2px);
 }

 .btn-manual-login:active {
   transform: scale(0.98);
 }


 /* Chat & Emoji Floating */
 .chat-overlay {
   position: fixed;
   inset: 0;
   background: #151313;
   z-index: 1200;
   transform: translateY(100%);
   opacity: 0;
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
   display: flex;
   flex-direction: column;
   padding-bottom: env(safe-area-inset-bottom, 0);
 }

 .chat-overlay.active {
   transform: translateY(0);
   opacity: 1;
 }

 .chat-header-new {
   padding: 1.25rem 1rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
 }

 .back-btn-chat {
   background: transparent;
   border: none;
   box-shadow: none;
   padding: 0;
   width: auto;
   height: auto;
   color: white;
 }

 .chat-title-new {
   flex: 1;
   font-size: 1.25rem;
   font-weight: 700;
   color: white;
   margin-bottom: 0;
 }

 .clear-chat-btn {
   background: rgba(255, 255, 255, 0.05);
   border: none;
   box-shadow: none;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   color: #ff3b3b;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s;
 }

 .clear-chat-btn:hover {
   background: rgba(255, 255, 255, 0.15);
   color: white;
   transform: scale(1.1);
 }

 .chat-msgs {
   flex: 1;
   overflow-y: auto;
   padding: 1rem 1.25rem;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   background: #151313;
 }

 .date-separator {
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 1rem 0;
 }

 .date-separator span {
   background: #262323;
   color: #8e8e93;
   font-size: 0.75rem;
   padding: 0.4rem 1.2rem;
   border-radius: 20px;
   font-weight: 500;
 }

 .msg-group-v3 {
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
   max-width: 90%;
 }

 .msg-group-v3.self {
   align-self: flex-end;
   align-items: flex-end;
 }

 .msg-group-v3.other {
   align-self: flex-start;
   align-items: flex-start;
 }

 .msg-name-tag-v3 {
   font-size: 10px;
   font-weight: 500;
   color: #8e8e93;
   margin-bottom: 4px;
   width: 100%;
 }

 .msg-group-v3.other .msg-name-tag-v3 {
   padding-left: 44px;
 }

 .msg-group-v3.self .msg-name-tag-v3 {
   padding-right: 44px;
   text-align: right;
 }

 .msg-middle-row {
   display: flex;
   gap: 8px;
   align-items: flex-start;
   /* This aligns photo with bubble top/text */
 }

 .msg-avatar-v3 {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   border: 1.5px solid rgba(255, 255, 255, 0.1);
   cursor: pointer;
   flex-shrink: 0;
 }

 .msg-bubble-v3 {
   padding: 10px 14px;
   border-radius: 18px;
   font-size: 0.95rem;
   line-height: 1.4;
   word-wrap: break-word;
   max-width: 100%;
 }

 .msg-group-v3.self .msg-bubble-v3 {
   background: #fb7145;
   box-shadow: 0 4px 15px rgba(251, 113, 69, 0.2);
   color: white;
   border-bottom-right-radius: 4px;
 }

 .msg-group-v3.other .msg-bubble-v3 {
   background: #262323;
   color: white;
   border-bottom-left-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .msg-meta-v3 {
   font-size: 0.7rem;
   color: #8e8e93;
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 4px;
 }

 .msg-group-v3.other .msg-meta-v3 {
   padding-left: 44px;
 }

 .msg-group-v3.self .msg-meta-v3 {
   padding-right: 44px;
   flex-direction: row-reverse;
 }

 .msg-bubble {
   padding: 10px 14px;
   border-radius: 18px;
   font-size: 0.95rem;
   line-height: 1.4;
   position: relative;
   word-wrap: break-word;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }

 .msg-group.self .msg-bubble {
   background: #fb7145;
   box-shadow: 0 4px 15px rgba(251, 113, 69, 0.2);
   color: white;
   border-bottom-right-radius: 4px;
 }

 .msg-group.other .msg-bubble {
   background: #262323;
   color: white;
   border-bottom-left-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.05);
 }

 .msg-meta {
   font-size: 0.7rem;
   color: #8e8e93;
   display: flex;
   align-items: center;
   gap: 4px;
   margin-top: 2px;
   font-weight: 500;
 }

 .msg-group.self .msg-meta {
   flex-direction: row-reverse;
 }


 .chat-input-container-new {
   padding: 1.25rem 1rem 1.75rem 1rem;
   display: flex;
   gap: 1rem;
   align-items: center;
   background: #151313;
   border-top: 1px solid rgba(255, 255, 255, 0.03);
 }

 .chat-input-wrapper {
   flex: 1;
   background: #252323;
   border-radius: 12px;
   padding: 0.25rem 1.25rem;
   display: flex;
   align-items: center;
   gap: 0.75rem;
   border: none;
   min-height: 56px;
 }

 .chat-input-wrapper input {
   flex: 1;
   background: transparent;
   border: none;
   outline: none;
   color: white;
   padding: 0.6rem 0;
   font-size: 0.95rem;
 }

 .chat-input-wrapper input::placeholder {
   color: #8e8e93;
 }

 .attachment-btn {
   background: transparent;
   border: none;
   box-shadow: none;
   color: #8e8e93;
   padding: 0.5rem;
   border-radius: 50%;
   width: auto;
   height: auto;
 }

 .send-btn-new {
   background: #fb7145;
   border: none;
   width: 56px;
   height: 56px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   flex-shrink: 0;
   box-shadow: 0 4px 15px rgba(251, 113, 69, 0.2);
 }

 .send-btn-new:active {
   transform: scale(0.9);
 }

 .msg-avatar {
   width: 24px;
   height: 24px;
   border-radius: 50%;
   margin-bottom: 4px;
   border: 1px solid rgba(255, 255, 255, 0.1);
 }

 /* Floating Notification Bubbles */
 .floating-msg-bubble {
   position: fixed;
   background: rgba(38, 35, 35, 0.95);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-left: 4px solid #fb7145;
   padding: 12px 16px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   z-index: 2000;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
   max-width: 300px;
   cursor: pointer;
   animation: notifyPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 @keyframes notifyPop {
   from {
     transform: translateX(-100%) scale(0.9);
     opacity: 0;
   }

   to {
     transform: translateX(0) scale(1);
     opacity: 1;
   }
 }

 .floating-msg-avatar {
   width: 40px;
   height: 40px;
   border-radius: 12px;
   object-fit: cover;
   border: 1.5px solid rgba(251, 113, 69, 0.3);
 }

 .floating-msg-content {
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }

 .floating-msg-content span:last-child {
   font-size: 0.85rem;
   color: #fff;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   opacity: 0.9;
 }



 /* FIX 2: External Profile Overlay */
 .profile-overlay {
   position: fixed;
   inset: 0;
   /* Ensure it sits above chat (z-index 120) and top controls (z-index 20) */
   background: rgba(10, 10, 10, 0.85);
   backdrop-filter: blur(15px);
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transform: translateY(20px);
   transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease, visibility 0.4s;
 }

 .profile-overlay.active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
 }

 .profile-card {
   background: var(--bg-card);
   padding: 2rem;
   border-radius: 12px;
   width: 90%;
   max-width: 350px;
   box-shadow: var(--shadow-float);
   text-align: center;
   position: relative;
   z-index: 501;
 }

 .profile-photo {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   object-fit: cover;
   margin: 0 auto 1rem;
   border: 4px solid var(--accent-primary);
   box-shadow: var(--glow-blue);
 }

 .profile-info {
   text-align: left;
   margin-top: 1.5rem;
 }

 .profile-info div {
   margin-bottom: 0.75rem;
   padding: 0.5rem 0;
   border-bottom: 1px solid var(--border-color);
 }

 .profile-info .label {
   font-size: 0.75rem;
   font-weight: 700;
   color: var(--accent-primary);
   text-transform: uppercase;
   letter-spacing: 1px;
   display: block;
   margin-bottom: 0.25rem;
 }

 .profile-info .value {
   font-size: 1rem;
   color: var(--text-primary);
   font-weight: 500;
 }

 .profile-info .content-list {
   list-style: none;
   padding-left: 0;
   margin-top: 0.5rem;
   max-height: 100px;
   /* Limit height for small card */
   overflow-y: auto;
   border: 1px solid #2a2a2a;
   padding: 0.5rem;
   border-radius: 8px;
   font-size: 0.9rem;
   color: var(--text-secondary);
 }

 .profile-info .content-list li {
   margin-bottom: 0.25rem;
   border-bottom: 1px dotted rgba(255, 255, 255, 0.1);
   padding-bottom: 0.25rem;
 }


 /* Cropper Modal Styles */
 .crop-modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.9);
   z-index: 1010;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .crop-modal-content {
   background: var(--bg-card);
   padding: 1rem;
   border-radius: 12px;
   width: 90%;
   max-width: 400px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
   border: 1px solid var(--accent-primary);
 }

 .img-container {
   max-height: 70vh;
   overflow: visible;
   touch-action: none;
   margin-bottom: 1rem;
   background: #2a2a2a;
 }

 .img-container img {
   max-width: 100%;
   display: block;
 }

 .crop-modal-content button {
   background: var(--bg-color);
   box-shadow: var(--shadow-out);
   color: var(--text-primary);
 }

 .crop-modal-content button:last-child {
   background: var(--text-primary);
   border: 3px solid var(--accent-primary);
   color: var(--bg-color);
   font-weight: 700;
   box-shadow: var(--glow-blue);
 }

 /* File Input Style */
 .file-input-wrapper {
   position: relative;
   overflow: visible;
   touch-action: none;
   display: inline-block;
   width: 100%;
   margin-bottom: 10px;
 }

 /* This makes the file input invisible and positioned on top of the button to capture the click */
 .file-input-wrapper input[type="file"] {
   position: absolute;
   top: 0;
   left: 0;
   right: -8px;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
   opacity: 0;
   cursor: pointer;
   z-index: 10;
   display: block;
 }

 .file-btn {
   background: #2a2a2a;
   color: var(--text-primary);
   padding: 0.75rem;
   border-radius: 12px;
   display: block;
   width: 100%;
   text-align: center;
   font-weight: 600;
   box-shadow: var(--shadow-out);
 }

 /* Floating Emoji Animation for PNGs */
 @keyframes floatingEmoji {
   0% {
     opacity: 0;
     transform: translateY(0) scale(0.3) rotate(0deg);
   }

   10% {
     opacity: 1;
     transform: translateY(-20px) scale(1) rotate(5deg);
   }

   50% {
     transform: translateY(-50vh) scale(1.2) rotate(-5deg);
   }

   100% {
     opacity: 0;
     transform: translateY(-100vh) scale(1.5) rotate(360deg);
   }
 }

 .floating-emoji {
   position: fixed;
   animation: floatingEmoji 4s ease-out forwards;
   pointer-events: none;
   z-index: 200;
   width: 40px;
   /* size for PNGs */
   height: 40px;
   bottom: 0;
 }

 .floating-emoji img {
   width: 100%;
   height: 100%;
 }


 /* Utility Classes */
 .hidden {
   display: none !important;
 }

 .visually-hidden {
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s;
 }

 /* --- NEW LOADER STYLES (Music App Animation) --- */

 /* Container for the new loader */
 .music-loader-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 /* Pulsing circle and music note */
 .pulse-circle {
   position: relative;
   width: 80px;
   height: 80px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
 }

 /* The outer pulsing ring */
 .pulse-circle::before,
 .pulse-circle::after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   border: 3px solid var(--accent-primary);
   opacity: 0;
   animation: pulse 2.5s infinite ease-out;
   box-shadow: 0 0 10px var(--accent-primary);
 }

 .pulse-circle::after {
   animation-delay: 1.25s;
 }

 /* Keyframe for the pulsing ring effect */
 @keyframes pulse {
   0% {
     transform: scale(0.7);
     opacity: 0.8;
   }

   100% {
     transform: scale(1.5);
     opacity: 0;
   }
 }

 /* Music Note Icon Styling (center of the pulse) */
 .pulse-circle svg {
   z-index: 10;
   width: 48px;
   height: 48px;
   color: var(--accent-primary);
   /* Electric Blue Note */
   fill: var(--accent-primary);
   /* Fill the note for visibility */
   transition: transform 0.3s ease;
   animation: bounceNote 1.5s infinite alternate ease-in-out;
   filter: drop-shadow(0 0 5px rgba(0, 191, 255, 0.8));
 }

 /* Keyframe for the gentle bouncing/floating note */
 @keyframes bounceNote {
   from {
     transform: translateY(-8px);
   }

   to {
     transform: translateY(8px);
   }
 }

 /* Loader text (now used for the dynamic loading message) */
 .loader-text {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--text-secondary);
   animation: loadingDots 1.5s steps(3, end) infinite;
 }

 /* Keyframe for loading dots effect */
 @keyframes loadingDots {
   0% {
     content: "Raihi.";
   }

   33% {
     content: "Raihi..";
   }

   66% {
     content: "Raihi...";
   }

   100% {
     content: "Raihi";
   }
 }

 /* Set the initial content for the CSS animation */
 .loader-text::before {
   content: "Loading....";
 }

 /* Make sure the text is visible */
 #loader {
   pointer-events: all;
   transition: opacity 0.5s ease-out;
 }

 #loader.opacity-0 {
   pointer-events: none;
 }

 /* --- Bottom Navigation Bar --- */
 .bottom-nav {
   position: fixed;
   bottom: 0;
   left: 0;
   right: -8px;
   height: 70px;
   background: var(--glass-bg);
   backdrop-filter: blur(10px);
   z-index: 250;
   display: flex;
   justify-content: space-around;
   align-items: center;
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.6);
 }

 .nav-button {
   position: relative;
   /* Added for notification badge */
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 5px 0;
   color: var(--text-secondary);
   font-size: 0.7rem;
   font-weight: 500;
   transition: color 0.3s ease;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   box-shadow: none;
   border: none;
   height: 100%;
   border-radius: 0;
 }

 /* Chat Notification Badge Style */
 #chatNotificationBadge {
   position: absolute;
   top: 8px;
   right: 15px;
   background: #00bfff;
   color: white;
   border-radius: 50%;
   width: 10px;
   height: 10px;
   display: none;
   /* Controlled by JS */
   box-shadow: 0 0 5px #00bfff;
 }

 .nav-button:active {
   transform: scale(0.95);
   background: rgba(0, 191, 255, 0.05);
   box-shadow: none;
 }

 .nav-button.active,
 .nav-button:hover {
   color: var(--accent-primary);
   text-shadow: var(--glow-blue);
 }

 .nav-icon {
   width: 24px;
   height: 24px;
   margin-bottom: 2px;
   transition: transform 0.2s;
 }

 .nav-button.active .nav-icon {
   color: var(--accent-primary);
   filter: drop-shadow(0 0 3px var(--accent-primary));
   /* Added pulse animation for active button */
   animation: nav-pulse 1.5s infinite alternate;
 }

 @keyframes nav-pulse {
   from {
     transform: scale(1);
     opacity: 1;
   }

   to {
     transform: scale(1.1);
     opacity: 0.8;
   }
 }

 /* Original pulse-icon name kept below to avoid breaking existing elements */
 @keyframes pulse-icon {
   from {
     transform: scale(1);
     opacity: 1;
   }

   to {
     transform: scale(1.1);
     opacity: 0.8;
   }
 }

 .loaded-bar {
   height: 100%;
   width: 0%;
   background: rgba(255, 255, 255, 0.3);
   position: absolute;
   top: 0;
   left: 0;
   border-radius: 10px;
   z-index: 1;
   pointer-events: none;
   transition: width 0.2s linear;
 }

 .progress-bar {
   z-index: 2;
 }

 /* Fixes for Progress Ring */
 .progress-ring {
   transform: scaleX(-1) !important;
 }

 .progress-ring__circle-bg {
   stroke-dasharray: 408.4 816.8 !important;
   stroke-linecap: round !important;
 }

 /* Added round linecap */
 .progress-ring__circle {
   stroke-linecap: round !important;
 }

 .progress-ring__circle {
   transform: rotate(0deg) !important;
   stroke-linecap: round !important;
 }

 /* Like Button Override */
 #likeBtnOnCover {
   background: transparent !important;
 }

 #likeBtnOnCover.liked {
   background: transparent !important;
   box-shadow: none !important;
   border: none !important;
 }

 #likeBtnOnCover.liked svg {
   fill: #ff0000 !important;
   color: #ff0000 !important;
 }

 /* NEW DUO PROFILE STYLES */
 #duoProfileContainer {
   width: auto !important;
   height: auto !important;
   margin: 0 !important;
   display: flex !important;
 }

 #duoProfileContainer.visually-hidden {
   display: none !important;
   opacity: 0;
 }

 #wireVisible {
   transition: stroke-dashoffset 2s ease-in-out, opacity 0.3s ease;
   stroke-dasharray: 200;
   stroke-dashoffset: 200;
 }

 #duoProfileContainer.active #wireVisible {
   stroke-dashoffset: 0;
   opacity: 1;
 }

 #wireHeartIcon {
   transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
   opacity: 0;
   transform: scale(0);
 }

 #duoProfileContainer.active #wireHeartIcon {
   opacity: 1;
   transform: scale(1);
 }


 /* --- NEW GRID PLAYLIST DESIGN (User Request: 3 items per line, then wrap) --- */
 #playlistsContainer {
   display: grid !important;
   grid-template-columns: repeat(3, 1fr) !important;
   /* 3 items per line */
   gap: 1rem;
   /* Space between items */
   padding: 0.5rem 0.5rem 2rem 0.5rem;
   width: 100%;
   overflow-y: visible;
   overflow-x: hidden;
   /* Reset flex properties to be safe */
   flex-direction: variable !important;
   flex-wrap: wrap !important;
 }

 .playlist-card {
   width: 100% !important;
   background: transparent !important;
   border: none !important;
   padding: 12px 5px !important;
   display: flex;
   flex-direction: column;
   align-items: center;
   cursor: pointer;
   overflow: visible !important;
   text-decoration: none;
   box-shadow: none !important;
 }

 .playlist-card:active {
   transform: scale(0.96);
 }

 .playlist-folder-body {
   position: relative;
   width: 100%;
   aspect-ratio: 1.2/1;
   background: var(--accent-primary);
   border-radius: 0 10px 10px 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
 }

 .playlist-folder-body::before {
   content: '';
   position: absolute;
   top: -10px;
   left: 0;
   width: 45%;
   height: 10px;
   background: inherit;
   border-radius: 6px 6px 0 0;
   filter: brightness(0.9);
 }

 .folder-photo-peek {
   position: absolute;
   top: -10px;
   left: 8%;
   width: 84%;
   height: 90%;
   background: #1a1a1a;
   border-radius: 6px;
   overflow: hidden;
   transform: rotate(-3deg);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 1;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
   border: 2px solid rgba(255, 255, 255, 0.8);
 }

 .folder-photo-peek img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0.9;
   transition: transform 0.4s;
 }

 .folder-front {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 75%;
   background: inherit;
   filter: brightness(1.1);
   border-radius: 0 0 10px 10px;
   z-index: 2;
   padding: 8px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   border-top: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 -2px 10px rgba(0, 0, 0, 0.2);
 }

 .playlist-card:hover .playlist-folder-body {
   transform: translateY(-8px);
 }

 .playlist-card:hover .folder-photo-peek {
   transform: rotate(0deg) translateY(-20px);
   z-index: 5;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
   border-color: #fff;
 }

 .playlist-card:hover .folder-photo-peek img {
   transform: scale(1.1);
   opacity: 1;
 }

 .folder-name {
   display: block;
   font-size: 0.75rem;
   font-weight: 800;
   color: white;
   text-align: left;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
   margin-bottom: 2px;
   font-family: 'Outfit', sans-serif;
 }

 .folder-count {
   display: block;
   font-size: 0.6rem;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.85);
   text-align: left;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }


 /* Mobile Adjustments if needed, but grid usually handles it well */
 @media (max-width: 640px) {
   #playlistsContainer {
     gap: 0.75rem;
   }
 }

 #roomIdDisplay.hidden {
   display: none !important;
 }

 /* --- LANDING PAGE (New Feature) --- */
 #landingPage {
   position: fixed;
   inset: 0;
   z-index: 9000;
   background-image: url('pics2/start.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
   padding: 0;
   text-align: left;
   font-family: 'Inter', sans-serif;
 }

 .landing-content {
   width: 100%;
   padding: 2rem 1.5rem 3rem 1.5rem;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
   border-top-left-radius: 30px;
   border-top-right-radius: 30px;
   display: flex;
   flex-direction: column;
   gap: 1rem;
 }

 .landing-title {
   font-size: 2.2rem;
   font-weight: 700;
   color: #ffffff;
   line-height: 1.1;
   margin-bottom: 0.5rem;
 }

 .landing-subtitle {
   font-size: 1rem;
   color: #d1d5db;
   /* Gray-300 */
   margin-bottom: 1.5rem;
   font-weight: 400;
   line-height: 1.5;
 }

 .landing-btn {
   width: 100%;
   padding: 1.2rem;
   background-color: #8b165f;
   /* Deep pink/magenta */
   color: white;
   font-size: 1.2rem;
   font-weight: 700;
   border-radius: 50px;
   /* Pillow shape */
   border: none;
   box-shadow: 0 4px 15px rgba(139, 22, 95, 0.4);
   cursor: pointer;
   transition: transform 0.2s, background-color 0.2s;
 }

 .landing-btn:active {
   transform: scale(0.98);
   background-color: #70124c;
 }

 /* Animation Class */
 #landingPage {
   transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
 }

 .slide-out-left {
   transform: translateX(-100%);
   opacity: 1;
   /* Keep opacity 1 to show what's behind clearly if we want a slide effect, or 0 if fading too */
   pointer-events: none;
 }

 /* SETTINGS MODE OVERRIDES */
 .menu-drawer.settings-mode {
   border-top: none !important;
   padding-top: 35px !important;
   /* Reduced top gap */
   padding-left: 0 !important;
   /* Reduced side gaps */
   padding-right: 0 !important;
 }

 /* Show header in settings mode */
 .menu-drawer.settings-mode .menu-header {
   display: flex !important;
 }

 /* Fix Top Gap in Settings Mode */
 .menu-drawer.settings-mode .profile-and-utility-content {
   top: 0 !important;
   padding-top: 0 !important;
   position: relative !important;
   /* Switch to relative to stack naturally */
   padding-left: 0 !important;
   padding-right: 0 !important;
 }

 /* === v2 THEME OVERRIDES === */

 .top-nav-header-v2 {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   z-index: 100;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   padding: 1.5rem 1.5rem;
 }

 .circular-player-v2 {
   position: relative;
   width: 100%;
   height: 380px;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .outer-glow-red-v2 {
   position: absolute;
   width: var(--glow-size, 250px);
   height: var(--glow-size, 250px);
   background: var(--accent-red);
   border-radius: 50%;
   filter: blur(120px);
   opacity: 0.6;
   pointer-events: none;
 }

 .waveform-ring-v2 {
   position: absolute;
   width: var(--player-ring-size, 340px);
   height: var(--player-ring-size, 340px);
   z-index: 2;
 }

 .waveform-svg-v2 {
   width: 100%;
   height: 100%;
 }

 .waveform-path-v2 {
   stroke-dasharray: 4 2;
   stroke-linecap: round;
   filter: drop-shadow(0 0 8px var(--accent-red));
   animation: rotateWave 30s linear infinite;
 }

 .album-art-wrap-v2 {
   position: relative;
   z-index: 10;
 }

 .album-art-v2 {
   width: var(--album-art-size, 240px);
   height: var(--album-art-size, 240px);
   border-radius: 50%;
   border: 8px solid #000;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
   overflow: hidden;
 }

 .album-center-hole-v2 {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: calc(var(--album-art-size, 240px) * 0.18);
   height: calc(var(--album-art-size, 240px) * 0.18);
   background: #000;
   border-radius: 50%;
   border: calc(var(--album-art-size, 240px) * 0.025) solid #1a1a1a;
   z-index: 20;
 }

 .player-action-btn-v2 {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: #121212;
   border: 1px solid #222;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   color: white;
   transition: all 0.2s;
 }

 .track-info-v2 {
   margin-bottom: 2rem;
 }

 .artist-name-v2 {
   color: #aaaaaa;
   font-size: 0.85rem;
   font-weight: 600;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   margin-bottom: 0.5rem;
 }

 .track-title-v2 {
   color: #ffffff;
   font-size: 2.5rem;
   font-weight: 900;
   line-height: 1.1;
   text-transform: uppercase;
 }

 .controls-v2 {
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: 0 1.5rem;
   margin-bottom: 2.5rem;
 }

 .control-circle-btn-v2 {
   width: 58px;
   height: 58px;
   border-radius: 50%;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   border: 1px solid #2a2a2a;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   cursor: pointer;
   margin-right: 10px;
   margin-left: 10px;
 }

 .main-play-btn-v2 {
   width: 85px;
   height: 70px;
   border-radius: 50%;
   background: linear-gradient(135deg, #ff4141 0%, #8e0000 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 0 30px var(--accent-glow);
   border: none;
   cursor: pointer;
 }

 .seek-bar-container-v2 {
   margin-top: 15px;
   width: 100%;
   height: 5px;
   background: #1a1a1a;
   border-radius: 3px;
   position: relative;
   cursor: pointer;
 }

 .seek-bar-fill-v2 {
   position: absolute;
   left: 0;
   top: 0;
   height: 100%;
   background: var(--accent-red);
   border-radius: 3px;
 }

 .seek-knob-v2 {
   position: absolute;
   right: -7px;
   top: 50%;
   transform: translateY(-50%);
   width: 14px;
   height: 14px;
   background: white;
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }

 .bottom-nav-container-v2 {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 0 16px 16px 16px;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   pointer-events: none;
 }

 .bottom-nav-v2 {
   background: #111111;
   height: 76px;
   border-radius: 48px;
   display: flex;
   justify-content: space-around;
   align-items: center;
   padding: 0 20px;
   box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
   border: 1px solid #1a1a1a;
   pointer-events: auto;
 }

 .nav-btn-v2 {
   position: relative;
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   color: #555;
   transition: all 0.3s;
   background: #151313;
   border-bottom: 1px solid rgba(255, 255, 255, 0.03);
   border: none;
   box-shadow: none;
   cursor: pointer;
 }

 .nav-btn-v2.active {
   color: var(--accent-red);
 }

 .nav-label-v2 {
   font-size: 11px;
   font-weight: 600;
   margin-top: 4px;
 }

 .nav-badge-v2 {
   position: absolute;
   top: -2px;
   right: -2px;
   width: 10px;
   height: 10px;
   background: var(--accent-red);
   border-radius: 50%;
   display: none;
   box-shadow: 0 0 8px var(--accent-glow);
 }

 .opacity-0 {
   opacity: 0 !important;
   pointer-events: none;
 }

 /* Added Header and Room UI Styles */
 .header-icon-btn {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 12px;
   padding: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
   position: relative;
 }

 #onlineCountBadge {
   background: #00bfff;
   color: #000;
   font-size: 10px;
   font-weight: 800;
   min-width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 4px;
   border: 2px solid #1a1a1a;
   position: absolute;
   top: -8px;
   right: -8px;
   box-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
   z-index: 10;
 }

 .header-icon-btn:hover {
   background: rgba(255, 255, 255, 0.1);
   transform: translateY(-2px);
   border-color: rgba(255, 255, 255, 0.2);
 }

 .header-icon-btn:active {
   transform: scale(0.95);
 }

 #roomIdDisplay {
   animation: slideDown 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 @keyframes slideDown {
   from {
     transform: translateY(-20px);
     opacity: 0;
   }

   to {
     transform: translateY(0);
     opacity: 1;
   }
 }

 /* --- Lyrics & Title Fixes --- */
 .track-title-wrapper {
   display: block;
   position: relative;
   margin-bottom: 5px;
 }

 .track-title-v2 {
   display: inline;
   font-size: 26px !important;
   font-weight: 900 !important;
   line-height: 1.1 !important;
   text-transform: uppercase;
 }

 @media (min-width: 640px) {
   .track-title-v2 {
     font-size: 40px !important;
   }
 }

 #lyricsOverlay {
   backdrop-filter: blur(20px);
 }

 #likeBtnOnCover {
   background: #121212 !important;
   border: 1px solid #222 !important;
   position: relative !important;
   right: auto !important;
   width: 52px !important;
   height: 52px !important;
 }

 #likeBtnOnCover.liked {
   background: var(--accent-red) !important;
   border: none !important;
   box-shadow: 0 4px 15px rgba(255, 59, 59, 0.4) !important;
 }

 /* --- Skeleton Loader & Shimmer Animation --- */
 .skeleton-shimmer {
   background: #1a1a1a;
   background-image: linear-gradient(90deg,
       #1a1a1a 0px,
       #2a2a2a 40px,
       #1a1a1a 80px);
   background-size: 600px 100%;
   animation: shimmer 1.8s infinite linear;
   border-radius: 8px;
 }

 @keyframes shimmer {
   0% {
     background-position: -600px 0;
   }

   100% {
     background-position: 600px 0;
   }
 }

 #playerSkeleton {
   position: absolute;
   inset: 0;
   background: #121212;
   z-index: 40;
   padding: 24px;
   padding-top: 100px;
   display: flex;
   flex-direction: column;
   pointer-events: none;
   transition: opacity 0.5s ease-out, visibility 0.5s;
 }

 #playerSkeleton.hidden {
   opacity: 0;
   visibility: hidden;
 }

 .sk-circle {
   border-radius: 50%;
 }

 .sk-bar {
   height: 12px;
   margin-bottom: 12px;
 }

 .sk-title {
   height: 32px;
   margin-bottom: 16px;
   width: 80%;
 }

 .sk-subtitle {
   height: 16px;
   margin-bottom: 24px;
   width: 40%;
 }

 .sk-album {
   width: var(--album-art-size, 240px);
   height: var(--album-art-size, 240px);
   margin: 0 auto 32px;
 }

 .sk-controls {
   height: 60px;
   margin-bottom: 24px;
   width: 100%;
 }

 .sk-nav {
   height: 44px;
   margin-bottom: 24px;
   width: 100%;
 }

 .sk-action {
   width: 40px;
   height: 40px;
 }

 .sk-seek {
   height: 6px;
   width: 100%;
   margin-bottom: 16px;
 }


 /* --- Navigation Page Transitions (REFINED) --- */
 .anim-slide-in-right {
   animation: slideInRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

 .anim-slide-out-right {
   animation: slideOutRight 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 }

 @keyframes slideInRight {
   from {
     transform: translateX(100%);
   }

   to {
     transform: translateX(0);
   }
 }

 @keyframes slideOutRight {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(100%);
   }
 }

 .anim-fade-out {
   animation: fadeOut 0.4s ease forwards;
 }

 @keyframes fadeOut {
   from {
     opacity: 1;
   }

   to {
     opacity: 0;
   }
 }

 /* Helper to prevent scroll during transitions */
 body.no-scroll {
   overflow: hidden !important;
 }

 /* Settings Page Cleanup */
 .menu-drawer.settings-mode .menu-header {
   display: none !important;
 }

 .menu-drawer.settings-mode {
   padding-top: 1rem !important;
 }

 #menuCloseButton {
   margin: 0 !important;
 }

 /* --- ROOM MEMBERS CARDS --- */
 .room-members-card {
   background: #121212;
   padding: 1.5rem;
   border-radius: 24px;
   width: 92%;
   max-width: 400px;
   border: 1px solid rgba(255, 59, 59, 0.3);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 59, 59, 0.1);
   transform: scale(0.9);
   transition: transform 0.3s ease;
 }

 .listen-modal-overlay.active .room-members-card {
   transform: scale(1);
 }

 .member-card-item {
   background: #1a1a1a;
   border-radius: 20px;
   padding: 1.25rem;
   margin-bottom: 1rem;
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: transform 0.2s ease;
 }

 .member-card-item:hover {
   border-color: rgba(255, 59, 59, 0.4);
 }

 .member-card-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   margin-bottom: 1rem;
 }

 .member-card-avatar {
   width: 54px;
   height: 54px;
   border-radius: 50%;
   object-fit: cover;
   border: 2px solid #ff3b3b;
   box-shadow: 0 0 10px rgba(255, 59, 59, 0.3);
 }

 .member-card-name {
   font-weight: 700;
   color: white;
   font-size: 1.1rem;
 }

 .member-card-tag {
   font-size: 0.7rem;
   background: #ff3b3b;
   color: white;
   padding: 2px 8px;
   border-radius: 10px;
   text-transform: uppercase;
   font-weight: 800;
 }

 .member-card-bio {
   font-size: 0.85rem;
   color: #b3b3b3;
   line-height: 1.5;
   background: rgba(255, 255, 255, 0.03);
   padding: 10px 12px;
   border-radius: 12px;
   margin-bottom: 0.75rem;
   font-style: italic;
 }

 .member-card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 0.75rem;
   color: #666;
   padding-top: 0.5rem;
   border-top: 1px solid rgba(255, 255, 255, 0.05);
 }

 .member-dob-label {
   color: #ff3b3b;
   font-weight: 600;
   margin-right: 4px;
 }