:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; background:#10110f; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; overflow:hidden; background:#10110f; color:#faf8f2; }
button, input { font:inherit; }
button { color:inherit; cursor:pointer; }
.app { min-height:100svh; position:relative; isolation:isolate; overflow:hidden; }
.scene, .scene video, .fallback, .fallback-picture, .fallback-picture img, .vignette { position:absolute; inset:0; width:100%; height:100%; }
.scene { background:#12130f; z-index:-2; }
.scene video, .fallback, .fallback-picture img { object-fit:cover; object-position:center center; }
.scene video { opacity:0; transform:translateZ(0); transition:opacity .35s cubic-bezier(.25,1,.5,1); will-change:opacity; }
.scene video.is-visible { opacity:1; }
.scene video.is-top { z-index:2; }
.fallback, .fallback-picture img { filter:saturate(.86) brightness(.73); transform:scale(1.012); }

@media (max-width: 768px), (orientation: portrait) {
  #journey-video,
  #rain-video,
  .fallback,
  .fallback-picture img,
  #scene-video[data-kind="rain"],
  #scene-video.is-rain {
    object-position: 65% center;
  }
}
.vignette { z-index:-1; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.44),transparent 36%,transparent 70%,rgba(0,0,0,.36)),linear-gradient(0deg,rgba(1,3,2,.86) 0%,rgba(4,5,4,.44) 26%,transparent 62%),linear-gradient(180deg,rgba(0,0,0,.28),transparent 22%); }
.brand { position:absolute; top:clamp(25px,4vw,46px); left:clamp(23px,5vw,76px); display:flex; align-items:center; gap:14px; }
.brand-text { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.brand-name { font-size:clamp(17px,1.65vw,25px); letter-spacing:.055em; font-weight:500; line-height:1.15; color:#faedd6; }
.crest { width:44px; height:44px; display:grid; place-items:center; border:2px solid #d9ab53; border-radius:50%; background:#163d2d; overflow:hidden; box-shadow:0 0 0 3px rgba(218,174,91,.24); flex-shrink:0; }
.crest img { width:100%; height:100%; object-fit:cover; display:block; }
.intro { position:absolute; inset:0; display:grid; align-content:center; justify-items:center; text-align:center; background:radial-gradient(ellipse at 50% 43%,rgba(35,23,11,.08),rgba(0,0,0,.48) 70%),linear-gradient(90deg,rgba(0,0,0,.23),transparent 45%,rgba(0,0,0,.28)); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); transition:none; }
.intro:before { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 38%,rgba(0,0,0,.2)); pointer-events:none; }
.intro > * { position:relative; z-index:1; }
.intro-active .brand, .intro-active .top-nav-actions, .intro-active .playlist-toggle, .intro-active .replay, .intro-active .fullscreen-btn { opacity:0; pointer-events:none; }
.intro-active .player, .intro-active .desktop-recent-chats { display:none!important; }
.intro.is-starting { background:radial-gradient(ellipse at 50% 50%,rgba(26,32,24,.97) 0%,rgba(11,13,10,.99) 70%,#060705 100%); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
.intro.is-unblurring { background:transparent; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); opacity:0; pointer-events:none; transition:background 1s ease,backdrop-filter 1s ease,-webkit-backdrop-filter 1s ease,opacity 1s ease; }
.intro.is-unblurring .welcome-copy { display:none; }
.intro.is-hidden { opacity:0; visibility:hidden; pointer-events:none; }
.welcome-copy { position:absolute; inset:0; animation:welcome-reveal 1.25s cubic-bezier(.2,.8,.2,1) both; }.welcome-copy .start-button { position:absolute; top:78.5%; left:50%; width:min(380px,43vw); height:76px; transform:translate(-50%,-50%); border:0; border-radius:999px; background:transparent; color:transparent; box-shadow:none; }.welcome-copy .start-button span { color:transparent; }.welcome-copy .start-button:hover { transform:translate(-50%,-50%); background:rgba(255,255,255,.04); }.welcome-copy .start-button:focus-visible { outline:2px solid #fff; outline-offset:5px; }.intro.is-starting .welcome-copy { display:none; }

/* Enhanced High-Contrast KSRTC Journey Loading Screen */
.journey-loading { display:none; justify-items:center; text-align:center; position:relative; z-index:10; width:min(440px,92vw); margin:0 auto; }
.intro.is-starting .journey-loading { display:grid; animation:loading-appear .5s cubic-bezier(.2,.8,.2,1) both; }
.intro.is-unblurring .journey-loading { display:grid; opacity:1; }
@keyframes loading-appear{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* Kerala Horizon */
.kerala-horizon { width:min(360px,86vw); height:72px; position:relative; overflow:hidden; margin-bottom:-10px; }
.horizon-sky { position:absolute; inset:0; background:linear-gradient(180deg,rgba(220,130,40,.45) 0%,rgba(245,190,80,.32) 45%,rgba(22,55,36,.55) 85%,transparent 100%); border-radius:10px 10px 0 0; }
.horizon-hills { position:absolute; bottom:11px; left:0; width:100%; height:30px; background:radial-gradient(ellipse at 20% 100%,#1e4d35 0%,transparent 60%),radial-gradient(ellipse at 78% 100%,#2b6345 0%,transparent 65%); opacity:.95; }
.horizon-road { position:absolute; bottom:0; left:0; width:100%; height:14px; background:linear-gradient(180deg,#1c1d1a 0%,#10110e 100%); border-top:1px solid rgba(245,205,120,.35); display:flex; align-items:center; justify-content:center; }
.horizon-road:after { content:''; width:85%; height:2px; background:repeating-linear-gradient(90deg,#f5c871 0,#f5c871 18px,transparent 18px,transparent 32px); box-shadow:0 0 6px rgba(245,200,113,.7); }
.palm { position:absolute; bottom:11px; width:3px; background:#173827; transform-origin:bottom center; }
.palm:before { content:'✦'; position:absolute; top:-16px; left:-12px; font-size:26px; color:#265e40; transform:scaleX(2) scaleY(1.15); filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)); }
.palm.p1 { left:35px; height:46px; transform:rotate(-4deg); }
.palm.p2 { left:85px; height:32px; transform:rotate(3deg); opacity:.85; }
.palm.p3 { right:80px; height:38px; transform:rotate(-3deg); opacity:.9; }
.palm.p4 { right:30px; height:50px; transform:rotate(5deg); }

/* The Prominent KSRTC Aana Vandi Bus */
.bus-start { width:224px; height:122px; position:relative; border-radius:20px 20px 8px 8px; background:linear-gradient(180deg,#fbf2dc 0%,#faecc7 45%,#d9a032 45.5%,#8f1c14 47%,#b3261b 80%,#7d150e 100%); border:2.5px solid #fff5dc; box-shadow:0 20px 48px rgba(0,0,0,.85),0 0 28px rgba(220,160,45,.25); animation:bus-engine-rev .18s ease-in-out infinite alternate; }
@keyframes bus-engine-rev { 0%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-2px) rotate(0.35deg)} 100%{transform:translateY(1px) rotate(-0.35deg)} }
.bus-roof-rack { position:absolute; top:-8px; left:28px; right:28px; height:7px; border:2px solid #ecd8b5; border-bottom:none; border-radius:4px 4px 0 0; background:repeating-linear-gradient(90deg,transparent,transparent 18px,#ecd8b5 18px,#ecd8b5 20px); }
.bus-dest-board { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:164px; height:17px; border-radius:3px; background:#08110b; border:1.5px solid #e0aa3e; color:#ffe083; font-size:9px; font-weight:700; letter-spacing:.16em; display:flex; align-items:center; justify-content:center; text-shadow:0 0 10px rgba(255,224,131,.95),0 0 2px #fff; box-shadow:inset 0 0 8px #000,0 0 12px rgba(224,170,62,.4); }
.windshield { position:absolute; top:30px; left:16px; right:16px; height:38px; background:linear-gradient(180deg,#0d2118 0%,#163628 100%); border:2px solid #28543f; border-radius:5px; overflow:hidden; box-shadow:inset 0 3px 8px rgba(0,0,0,.8); display:flex; align-items:flex-end; justify-content:center; }
.windshield:before { content:''; position:absolute; top:0; left:0; width:100%; height:50%; background:linear-gradient(135deg,rgba(255,255,255,.28) 0%,transparent 60%); }
.route-board { background:#ba281e; color:#fff5d1; font-size:8.5px; font-weight:700; padding:2px 9px; border-radius:3px; border:1px solid #f2c76d; letter-spacing:.1em; margin-bottom:4px; box-shadow:0 2px 6px rgba(0,0,0,.8); }
.wiper { position:absolute; bottom:2px; width:24px; height:2px; background:#000; transform-origin:bottom left; }
.wiper.left { left:28px; transform:rotate(-25deg); }
.wiper.right { right:44px; transform:rotate(-25deg); }
.bus-grill { position:absolute; bottom:19px; left:50%; transform:translateX(-50%); width:68px; height:20px; border-radius:4px; background:#0d0e0c; border:1.5px solid rgba(245,220,150,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:inset 0 2px 5px #000,0 2px 6px rgba(0,0,0,.5); }
.bus-crest-mini { width:11px; height:11px; border-radius:50%; background:#e0aa3e; border:1.5px solid #fff; box-shadow:0 0 8px rgba(224,170,62,.9); margin-bottom:2px; }
.grill-slats { width:50px; height:6px; background:repeating-linear-gradient(180deg,#333,#333 1.5px,#080808 1.5px,#080808 3px); }
.bus-light { position:absolute; bottom:21px; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle,#ffffff 25%,#fff1a8 60%,#e5ad3c 100%); border:2px solid #ffffff; box-shadow:0 0 24px 6px rgba(255,240,160,.98),0 0 50px 14px rgba(240,185,75,.6); animation:light-flicker 1.6s ease-in-out infinite alternate; }
@keyframes light-flicker { 0%{opacity:.94;filter:brightness(1)} 50%{opacity:1;filter:brightness(1.3)} 100%{opacity:.97;filter:brightness(1.15)} }
.bus-light.left { left:17px; }
.bus-light.right { right:17px; }
.bus-light .light-beam { position:absolute; top:14px; left:-14px; width:44px; height:40px; background:radial-gradient(ellipse at 50% 0%,rgba(255,240,170,.45) 0%,transparent 70%); pointer-events:none; border-radius:50%; }
.bus-bumper { position:absolute; bottom:5px; left:12px; right:12px; height:10px; background:linear-gradient(180deg,#f0f0f0 0%,#cecece 45%,#888 50%,#555 100%); border-radius:5px; border:1.5px solid #fff; box-shadow:0 4px 10px rgba(0,0,0,.8); }
.wheel { position:absolute; bottom:-14px; width:27px; height:27px; border-radius:50%; background:#181818; border:4px solid #080808; box-shadow:0 5px 12px rgba(0,0,0,.9); }
.wheel:after { content:''; position:absolute; inset:5px; border-radius:50%; background:#888; border:1px solid #444; }
.wheel.left { left:27px; }
.wheel.right { right:27px; }

/* Engine Acoustic Waves */
.engine-lines { height:24px; display:flex; gap:8px; align-items:flex-end; margin:22px 0 12px; }
.engine-lines i { width:3.5px; border-radius:3px; background:linear-gradient(180deg,#ffe08a,#d49528); box-shadow:0 0 10px rgba(245,200,100,.85); animation:engine-wave .5s ease-in-out infinite alternate; }
.engine-lines i:nth-child(1) { height:9px; animation-delay:.1s; }
.engine-lines i:nth-child(2) { height:22px; animation-delay:.25s; }
.engine-lines i:nth-child(3) { height:14px; animation-delay:.05s; }
.engine-lines i:nth-child(4) { height:24px; animation-delay:.35s; }
.engine-lines i:nth-child(5) { height:11px; animation-delay:.18s; }
@keyframes engine-wave { to { height:5px; opacity:.4; } }

/* Themed Headings & Progress Bar (8.45s) */
.journey-loading .eyebrow { letter-spacing:.24em; font-size:10.5px; font-weight:700; color:#f5c871; margin:0; text-transform:uppercase; text-shadow:0 0 12px rgba(245,200,113,.6); }
.journey-loading h2 { margin:10px 0 18px; font:600 clamp(27px,3.4vw,38px)/1.1 'Playfair Display',serif; color:#fff2dd; letter-spacing:.02em; text-shadow:0 3px 20px rgba(0,0,0,.9),0 0 10px rgba(255,230,180,.2); }
.loading-track { width:min(320px,82vw); height:6px; background:rgba(15,18,14,.85); border:1.5px solid rgba(240,195,100,.5); overflow:hidden; border-radius:99px; box-shadow:inset 0 2px 4px rgba(0,0,0,.9),0 0 16px rgba(225,175,75,.3); position:relative; }
.loading-track span { display:block; width:var(--loading-progress, 0%); height:100%; border-radius:99px; background:linear-gradient(90deg,#c48c2c 0%,#ffd768 75%,#ffffff 100%); box-shadow:0 0 20px 3px rgba(255,215,105,.95),0 0 6px #ffffff; will-change:width; }
@keyframes journey-load { 0%{width:0%} 100%{width:100%} }
.loading-note { margin:14px 0 0; color:rgba(255,240,215,.85); font-size:12.5px; letter-spacing:.08em; text-shadow:0 1px 6px rgba(0,0,0,.8); }
.board-now-btn { margin:16px 0 0; display:inline-flex; align-items:center; gap:8px; padding:9px 20px; font-size:12.5px; font-weight:500; letter-spacing:.06em; color:#fff2dd; background:rgba(240,195,107,.16); border:1px solid rgba(240,195,107,.45); border-radius:99px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.4); transition:background .2s,border-color .2s,transform .2s; }
.board-now-btn span { color:#f5c871; transition:transform .2s; }
.board-now-btn:hover { background:rgba(240,195,107,.26); border-color:rgba(240,195,107,.75); transform:translateY(-1px); }
.board-now-btn:hover span { transform:translateX(3px); }
.board-now-btn:active { transform:scale(.97); }
.player { position:absolute; left:50%; bottom:clamp(20px,5vh,63px); transform:translateX(-50%); width:min(540px,calc(100vw - 30px)); display:flex; flex-direction:column; }
@keyframes ui-blur-in { 0% { opacity:0; filter:blur(14px); } 100% { opacity:1; filter:blur(0); } }
@keyframes player-blur-in { 0% { opacity:0; filter:blur(14px); transform:translate(-50%,12px); } 100% { opacity:1; filter:blur(0); transform:translate(-50%,0); } }
.brand.ui-blur-in, .replay.ui-blur-in, .playlist-toggle.ui-blur-in, .top-nav-actions.ui-blur-in, .fullscreen-btn.ui-blur-in { animation:ui-blur-in 1s cubic-bezier(.16,1,.3,1) forwards; }
.player.ui-blur-in { animation:player-blur-in 1s cubic-bezier(.16,1,.3,1) forwards; }
.now-playing { order:1; display:flex; gap:25px; align-items:center; padding:0 15px; }
.album-art { position:relative; flex:0 0 102px; width:102px; height:102px; border-radius:7px; overflow:hidden; background:#454239; box-shadow:0 5px 22px rgba(0,0,0,.36); }.album-art > img{width:100%;height:100%;object-fit:cover;display:block;}
.player-logo-badge { position:absolute; top:5px; right:5px; width:25px; height:25px; border-radius:50%; overflow:hidden; border:1.5px solid #d9ab53; background:#163d2d; box-shadow:0 2px 8px rgba(0,0,0,.6); display:grid; place-items:center; z-index:2; pointer-events:none; }
.player-logo-badge img { width:100%; height:100%; object-fit:cover; display:block; }
.track-meta { min-width:0; flex:1; }.track-title { font-size:21px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.track-artist { font-size:14px; color:rgba(255,255,255,.74); margin:7px 0 15px; }
.live-indicator-badge { display:inline-flex; align-items:center; gap:6px; padding:2.5px 8.5px; border-radius:99px; background:rgba(14,46,32,.72); border:1px solid rgba(52,211,153,.42); box-shadow:0 3px 12px rgba(0,0,0,.42),inset 0 1px 1px rgba(255,255,255,.12); color:#a7f3d0; font-size:11px; font-weight:500; letter-spacing:.02em; white-space:nowrap; flex-shrink:0; user-select:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.live-dot-wrap { position:relative; display:inline-flex; align-items:center; justify-content:center; width:8px; height:8px; flex-shrink:0; }
.live-dot { position:relative; width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 6px #10b981; flex-shrink:0; z-index:1; }
.live-dot-ping { position:absolute; inset:-1px; border-radius:50%; background:rgba(16,185,129,.75); animation:live-radar-ping 2s cubic-bezier(0,0,.2,1) infinite; pointer-events:none; z-index:0; }
.live-indicator-badge .live-count { font-weight:600; color:#ecfdf5; font-variant-numeric:tabular-nums; font-size:11.5px; }
.live-indicator-badge .live-label { color:rgba(209,250,229,.88); font-size:10.5px; font-weight:500; text-transform:lowercase; }
@keyframes live-radar-ping { 0% { transform:scale(.9); opacity:.9; } 70%,100% { transform:scale(2.5); opacity:0; } }

/* Brand Sub-Row: Live Counter & Minimalist White Volume Button */
.brand-sub-row {
  display: flex;
  align-items: center;
  gap: 7px;
  position: relative;
  z-index: 50;
}

.song-volume-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.song-volume-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: #ffffff;
  transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.song-volume-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
  transform: scale(1.08);
}

.song-volume-btn:active {
  transform: scale(0.92);
}

.song-volume-btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.32);
  border-color: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.55);
}

.song-volume-btn .song-vol-icon {
  display: none;
}

.song-volume-btn[data-state="high"] .song-vol-icon-high,
.song-volume-btn:not([data-state]) .song-vol-icon-high {
  display: block;
}

.song-volume-btn[data-state="med"] .song-vol-icon-med {
  display: block;
}

.song-volume-btn[data-state="mute"] .song-vol-icon-mute {
  display: block;
}

/* Minimalist White Volume Popover */
.song-volume-popover {
  position: absolute;
  left: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(16, 20, 18, 0.9);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 3.5px 9px 3.5px 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65), 0 0 1px rgba(255, 255, 255, 0.2);
  z-index: 100;
  white-space: nowrap;
  animation: songVolPop .2s cubic-bezier(0.16, 1, 0.3, 1);
}

.song-volume-popover[hidden] {
  display: none !important;
}

@keyframes songVolPop {
  from {
    opacity: 0;
    transform: translateY(-50%) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.song-volume-slider {
  appearance: none;
  -webkit-appearance: none;
  width: 78px;
  height: 3.5px;
  border-radius: 99px;
  outline: none;
  background: linear-gradient(90deg, #ffffff 0%, #ffffff var(--progress, 82%), rgba(255, 255, 255, 0.28) var(--progress, 82%), rgba(255, 255, 255, 0.28) 100%);
  cursor: pointer;
  margin: 0;
}

.song-volume-slider::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease;
}

.song-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.25);
  box-shadow: 0 0 12px rgba(255, 255, 255, 1);
}

.song-volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  cursor: pointer;
}

.song-volume-val {
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  min-width: 27px;
  user-select: none;
  letter-spacing: -0.01em;
}

@media (max-width: 640px) {
  .song-volume-popover {
    left: 0;
    top: calc(100% + 6px);
    transform: none;
  }
  @keyframes songVolPop {
    from {
      opacity: 0;
      transform: translateY(-4px) scale(0.95);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}
.progress { appearance:none; width:100%; height:3px; border-radius:100px; outline:none; background:linear-gradient(90deg,#f7f2e9 0%,#f7f2e9 var(--progress,0%),rgba(255,255,255,.28) var(--progress,0%),rgba(255,255,255,.28) 100%); }.progress::-webkit-slider-thumb { appearance:none; width:10px;height:10px;border-radius:50%;background:#f7f2e9; }.progress::-moz-range-thumb{width:10px;height:10px;border:0;border-radius:50%;background:#f7f2e9}
.time-row { display:flex; justify-content:space-between; margin-top:7px; font-size:12px; color:rgba(255,255,255,.77); }
.controls { order:2; display:flex; align-items:center; justify-content:center; gap:18px; margin:20px 0 30px; }
.sound-bars { order:3; display:flex; flex-direction:row; align-items:center; gap:10px; margin:0 15px; width:calc(100% - 30px); box-sizing:border-box; }
.bus-sound-bar { flex:1; min-width:0; display:flex; align-items:center; gap:8px; margin:0; padding:5px 11px; border-radius:99px; background:rgba(18,20,16,.72); border:1px solid rgba(240,195,107,.25); box-shadow:0 4px 16px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-sizing:border-box; }
.bus-sound-toggle { display:inline-flex; align-items:center; gap:5px; background:transparent; border:none; color:#f5eedf; font-size:11px; font-weight:500; letter-spacing:.02em; padding:3px 5px; border-radius:99px; cursor:pointer; white-space:nowrap; transition:color .2s,background .2s,opacity .2s; }
.bus-sound-toggle:hover { background:rgba(255,255,255,.08); color:#f5c871; }
.bus-sound-toggle.is-muted { color:rgba(255,255,255,.45); }
.bus-sound-toggle.is-muted svg { opacity:.45; }
.bus-sound-toggle svg { width:14px; height:14px; fill:currentColor; flex-shrink:0; transition:transform .2s ease; }
.bus-sound-toggle:hover svg { transform:scale(1.08); }
.bus-sound-slider-wrap { flex:1; min-width:35px; display:flex; align-items:center; }
.bus-sound-slider { appearance:none; -webkit-appearance:none; width:100%; height:3.5px; border-radius:99px; outline:none; background:linear-gradient(90deg,#f5c871 0%,#f5c871 var(--bus-volume,25%),rgba(255,255,255,.2) var(--bus-volume,25%),rgba(255,255,255,.2) 100%); cursor:pointer; }
.bus-sound-slider::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:#f5c871; box-shadow:0 0 6px rgba(245,200,113,.6); cursor:pointer; transition:transform .15s; }
.bus-sound-slider::-webkit-slider-thumb:hover { transform:scale(1.25); }
.bus-sound-slider::-moz-range-thumb { width:11px; height:11px; border-radius:50%; border:none; background:#f5c871; box-shadow:0 0 6px rgba(245,200,113,.6); cursor:pointer; }
.bus-sound-value { font-size:10.5px; font-variant-numeric:tabular-nums; color:rgba(255,240,215,.75); min-width:26px; text-align:right; }
.rain-sound-bar { margin:0; border-color:rgba(114,187,248,.32); box-shadow:0 4px 16px rgba(0,0,0,.45),0 0 14px rgba(114,187,248,.18); opacity:1; filter:none; transition:opacity .35s cubic-bezier(.2,0,.2,1),border-color .35s ease,box-shadow .35s ease,filter .35s ease; }
.rain-sound-bar.is-disabled { opacity:0.35; filter:grayscale(0.65); border-color:rgba(255,255,255,.1); box-shadow:0 2px 8px rgba(0,0,0,.25); cursor:not-allowed; }
.rain-sound-bar.is-disabled .rain-sound-toggle,
.rain-sound-bar.is-disabled .rain-sound-slider { cursor:not-allowed; pointer-events:none; }
.rain-sound-toggle:hover { color:#8ecdfa; }
.rain-sound-slider { background:linear-gradient(90deg,#72bbf8 0%,#72bbf8 var(--rain-volume,80%),rgba(255,255,255,.2) var(--rain-volume,80%),rgba(255,255,255,.2) 100%); }
.rain-sound-slider::-webkit-slider-thumb { background:#72bbf8; box-shadow:0 0 7px rgba(114,187,248,.8); }
.rain-sound-slider::-moz-range-thumb { background:#72bbf8; box-shadow:0 0 7px rgba(114,187,248,.8); }
.rain-sound-value { color:rgba(215,235,255,.85); }
.circle-action { position:relative; display:grid; place-items:center; flex:0 0 68px; width:68px; height:68px; aspect-ratio:1; padding:0; border-radius:50%; border:1.5px solid rgba(240,230,215,.35); background:radial-gradient(circle at 45% 35%,rgba(52,48,42,.78) 0%,rgba(18,17,15,.92) 100%); color:#faedd6; box-shadow:0 8px 24px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.15); transition:transform .2s cubic-bezier(.2,0,.2,1),background .25s ease,border-color .25s ease,box-shadow .25s ease,color .25s ease; }
.circle-action:hover { transform:translateY(-2px); border-color:rgba(255,245,230,.65); background:radial-gradient(circle at 45% 35%,rgba(62,58,52,.85) 0%,rgba(24,23,20,.95) 100%); box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 1px 1px rgba(255,255,255,.22); }
.circle-action:active,.play:active { transform:translateY(0) scale(.96); }
.circle-action:disabled { opacity:.32; cursor:not-allowed; transform:none; }
.circle-action.is-pressed,.circle-action.is-stopping { border-color:#f0c36b; background:radial-gradient(circle at 45% 35%,rgba(68,52,28,.9) 0%,rgba(26,20,10,.96) 100%); box-shadow:0 0 22px rgba(240,195,107,.5),inset 0 0 14px rgba(240,195,107,.28),0 8px 24px rgba(0,0,0,.5); color:#f5c871; }
.circle-action.is-pressed .icon svg,.circle-action.is-stopping .icon svg { filter:drop-shadow(0 0 5px rgba(240,195,107,.7)); }
.circle-action.is-pressed small,.circle-action.is-stopping small { color:#f5c871; text-shadow:0 0 8px rgba(240,195,107,.65); }
.circle-action.rain-action.active { border-color:#72bbf8; background:radial-gradient(circle at 45% 35%,rgba(30,55,80,.9) 0%,rgba(12,22,34,.96) 100%); box-shadow:0 0 24px rgba(114,187,248,.6),inset 0 0 14px rgba(114,187,248,.3),0 8px 24px rgba(0,0,0,.5); color:#8ecdfa; }
.circle-action.rain-action.active .icon svg { filter:drop-shadow(0 0 6px rgba(114,187,248,.75)); }
.circle-action.rain-action.active small { color:#9bd6fc; text-shadow:0 0 8px rgba(114,187,248,.65); }
.circle-action .icon { display:grid; place-items:center; line-height:1; }
.circle-action .icon svg { width:28px; height:28px; color:inherit; fill:currentColor; stroke:none; transition:filter .2s ease; }
.circle-action .icon svg [stroke] { fill:none; stroke:currentColor; }
.circle-action .icon-pressed { display:none; }
.circle-action.is-pressed .icon-normal { display:none; }
.circle-action.is-pressed .icon-pressed { display:block; }
.rain-action .icon-rain-active { display:none; }
.rain-action .icon-rain-slash { display:block; }
.rain-action.active .icon-rain-active { display:block; }
.rain-action.active .icon-rain-slash { display:none; }
.circle-action small { position:absolute; top:calc(100% + 9px); left:50%; transform:translateX(-50%); font-size:11px; font-weight:500; letter-spacing:.015em; white-space:nowrap; color:#f5eedf; text-shadow:0 1px 4px #000; transition:color .25s ease,text-shadow .25s ease; }
/* Apple-Style Clean Media Controls (Play / Pause, Previous, Next) */
.transport, .play {
  border: 0;
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.transport {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  background: rgba(26, 28, 24, 0.72);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  color: #f7eedf;
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  transition: transform .18s cubic-bezier(.2, 0, .2, 1), background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.transport svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
  stroke: none;
  transition: transform .15s ease;
}
.transport:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(38, 42, 34, 0.88);
  border-color: rgba(255, 255, 255, 0.44);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.22);
}
.transport:active {
  transform: scale(0.92);
  background: rgba(48, 52, 44, 0.92);
}
.play {
  display: grid;
  place-items: center;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.95);
  background-color: #ffffff;
  background: #ffffff;
  color: #1a1b1e;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.46), 0 2px 6px rgba(0, 0, 0, 0.22), inset 0 1px 1px #ffffff;
  transition: transform .18s cubic-bezier(.2, 0, .2, 1), box-shadow .22s ease;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.play svg {
  fill: currentColor;
  stroke: none;
  transition: transform .15s ease;
}
.play .icon-play {
  display: block;
  width: 28px;
  height: 28px;
  margin-left: 3px;
}
.play .icon-pause {
  display: none;
  width: 25px;
  height: 25px;
  margin-left: 0;
}
.play.is-playing .icon-play {
  display: none;
}
.play.is-playing .icon-pause {
  display: block;
}
.play:hover {
  transform: translateY(-2px) scale(1.04) translateZ(0);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.54), 0 0 22px rgba(255, 255, 255, 0.35);
}
.play:active {
  transform: scale(0.93) translateZ(0) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.replay { border:0; }
.toast { position:absolute; bottom:18px; left:50%; transform:translate(-50%,20px); opacity:0; background:rgba(12,14,11,.92); border:1px solid rgba(245,200,113,.4); color:#fff3de; border-radius:99px; padding:10px 18px; font-size:12.5px; font-weight:500; letter-spacing:.02em; box-shadow:0 8px 24px rgba(0,0,0,.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:.3s; pointer-events:none; z-index:99; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.insta-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:20px; animation:apple-fade-in .2s ease-out both; }
.insta-modal[hidden] { display:none!important; }
.insta-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.insta-modal-card { position:relative; z-index:1; width:min(280px,calc(100vw - 44px)); background:rgba(32,32,36,.82); backdrop-filter:blur(30px) saturate(190%); -webkit-backdrop-filter:blur(30px) saturate(190%); border:0.5px solid rgba(255,255,255,.16); border-radius:18px; padding:20px 18px 16px; text-align:center; box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 1px rgba(255,255,255,.25); font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','DM Sans',sans-serif; animation:apple-scale-up .25s cubic-bezier(.16,1,.3,1) both; }
.insta-modal-title { margin:0 0 6px; font-family:inherit; font-size:16.5px; font-weight:600; letter-spacing:-.015em; color:#fff; }
.insta-modal-desc { margin:0 0 18px; font-size:13px; line-height:1.38; color:rgba(235,235,245,.68); font-weight:400; letter-spacing:-.01em; }
.insta-modal-buttons { display:flex; flex-direction:column; gap:8px; }
.insta-modal-btn { width:100%; height:38px; padding:0 14px; border-radius:10px; font-family:inherit; font-size:13.5px; letter-spacing:-.01em; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border:none; transition:opacity .15s ease,background .15s ease,transform .12s ease; -webkit-tap-highlight-color:transparent; }
.insta-modal-btn:active { transform:scale(.98); }
.insta-modal-btn.primary { background:#0a84ff; color:#fff; font-weight:600; }
.insta-modal-btn.primary:hover { opacity:.92; }
.insta-modal-btn.secondary { background:rgba(255,255,255,.08); color:rgba(235,235,245,.85); font-weight:400; }
.insta-modal-btn.secondary:hover { background:rgba(255,255,255,.12); }
@keyframes apple-fade-in { from { opacity:0; } to { opacity:1; } }
@keyframes apple-scale-up { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@media(max-width:700px){.brand{top:22px;left:20px}.crest{width:35px;height:35px}.player-logo-badge{width:20px;height:20px;top:4px;right:4px}.player{bottom:24px}.now-playing{gap:14px;padding:0 3px}.album-art{flex-basis:76px;width:76px;height:76px}.track-title{font-size:17px}.track-artist{margin:5px 0 10px}.controls{gap:7px;margin:24px 0 26px}.sound-bars{margin:0 4px;width:calc(100% - 8px);gap:8px}.circle-action{flex-basis:48px;width:48px;height:48px}.circle-action .icon svg{width:22px;height:22px}.circle-action small{font-size:0}.circle-action small:after{font-size:10px}.stop-action small:after{content:'Stop'}.rain-action small:after{content:'Rain Off'}.rain-action.active small:after{content:'Rain On'}.icon svg{width:19px;height:19px}.play{flex-basis:64px;width:64px;height:64px}.play svg{width:25px;height:25px}.play .icon-play{width:25px;height:25px;margin-left:2px}.play .icon-pause{width:22px;height:22px;margin-left:0}.transport{flex-basis:36px;width:36px;height:36px}.transport svg{width:18px;height:18px}.welcome-copy .start-button{top:78%;width:72vw;height:68px}.intro h1, .welcome-heading{font-size:45px}}
@media(max-width:390px){.controls{gap:3px}.circle-action{width:48px;height:48px}.play{width:57px;height:57px}.play .icon-play{width:22px;height:22px;margin-left:2px}.play .icon-pause{width:19px;height:19px;margin-left:0}.now-playing{padding:0}.album-art{flex-basis:68px;width:68px;height:68px}}

/* Code-built welcome composition */
.welcome-copy{position:relative;inset:auto;display:grid;justify-items:center;animation:welcome-reveal 1.25s cubic-bezier(.2,.8,.2,1) both}
.intro-seal{display:grid;place-items:center;width:116px;height:116px;margin-bottom:25px;border:3px double rgba(242,203,103,.95);border-radius:50%;background:radial-gradient(circle,#bf392b 0 46%,#17593f 47% 59%,#c99b39 60% 63%,#98372b 64%);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.intro-seal span{font:600 53px/1 serif;color:#fff3ca;text-shadow:0 1px 3px #53150f}.intro-seal i{position:absolute;margin-top:77px;font:600 8px/1 'DM Sans',sans-serif;letter-spacing:.22em;color:#fff0b6;font-style:normal}
.intro-title{margin:0!important;font:600 clamp(39px,5.1vw,72px)/1 'Playfair Display',serif!important;letter-spacing:.095em;color:#f7e6c8!important;text-shadow:0 3px 20px #000}.intro-tagline,.intro-subtitle{margin:18px 0 0!important;font-size:13px!important;letter-spacing:.37em;color:rgba(255,244,222,.82)!important}.intro-tagline b{font-size:10px;margin:0 8px;color:#e1b45f}.intro-rule{display:block;width:68px;height:1px;margin:27px 0 28px;background:#f0d5a1}.welcome-copy h1, .welcome-heading{margin:0;font:500 clamp(29px,3vw,42px)/1 'Playfair Display',serif;color:#f7ddb4;text-shadow:0 2px 14px #000}.intro-subtitle{margin-top:14px!important;font-size:12px!important}
.welcome-copy .start-button{position:static;transform:none;margin-top:38px;min-width:330px;height:auto;padding:17px 24px 17px 29px;border:1px solid #f6e5bd;border-radius:999px;background:rgba(8,7,4,.18);color:#f7e8c9;box-shadow:inset 0 1px rgba(255,255,255,.2),0 8px 20px rgba(0,0,0,.22)}.welcome-copy .start-button span{color:#f7e8c9}.welcome-copy .start-button:hover{transform:translateY(-2px);background:rgba(255,237,199,.12)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}
.welcome-about-link{display:inline-block;margin-top:18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,230,200,.6);text-decoration:none;transition:color .2s,opacity .2s;font-family:'DM Sans',-apple-system,sans-serif;font-weight:500}
.welcome-about-link:hover{color:#f7e6c8;text-decoration:underline;text-underline-offset:3px}
.drawer-about-link{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:rgba(216,168,82,.88);text-decoration:none;font-weight:500;padding:6px 12px;border-radius:6px;background:rgba(216,168,82,.08);transition:all .2s;margin-left:auto}
.drawer-about-link:hover{color:#f7e6c8;background:rgba(216,168,82,.16)}
@media(max-width:700px){.intro-seal{width:92px;height:92px;margin-bottom:20px}.intro-seal span{font-size:42px}.intro-seal i{margin-top:62px;font-size:7px}.intro-title{font-size:36px!important}.intro-tagline{font-size:9px!important;letter-spacing:.25em}.welcome-copy .start-button{min-width:0;width:min(300px,78vw)}}

.intro-seal{overflow:hidden;border:3px solid rgba(242,203,103,.95);background:#183d2d}.intro-seal img{width:100%;height:100%;object-fit:cover;object-position:center}

@media(max-width:560px){
  .intro{padding:24px 20px;align-content:center}
  .welcome-copy{width:100%;max-width:360px}
  .intro-seal{width:82px;height:82px;margin-bottom:18px}
  .intro-title{font-size:clamp(28px,9.5vw,36px)!important;letter-spacing:.065em}
  .intro-tagline{max-width:290px;font-size:9px!important;line-height:1.8;letter-spacing:.19em}
  .intro-tagline b{margin:0 4px}
  .intro-rule{margin:22px 0 23px}
  .welcome-copy h1, .welcome-heading{font-size:clamp(27px,8vw,35px)}
  .intro-subtitle{font-size:10px!important;letter-spacing:.26em}
  .welcome-copy .start-button{width:100%;min-height:58px;margin-top:30px;padding:15px 20px;font-size:11px}
  .kerala-horizon{width:280px;height:52px}
  .bus-start{width:168px;height:92px}
  .bus-dest-board{width:122px;height:13px;font-size:7px}
  .windshield{top:21px;height:28px}
  .bus-light{width:12px;height:12px;bottom:15px}
  .bus-grill{bottom:14px;width:50px;height:15px}
  .bus-bumper{height:7px;bottom:3px}
  .wheel{width:20px;height:20px;bottom:-10px}
  .journey-loading h2{font-size:24px;margin:8px 0 14px}
  .loading-track{width:min(250px,76vw)}
  .loading-note{font-size:11px}
}

/* Phone-only player composition; desktop layout remains unchanged. */
@media(max-width:560px){
  .app{min-height:100dvh}
  .player{bottom:max(18px,env(safe-area-inset-bottom));width:min(340px,calc(100vw - 28px))}
  .now-playing{order:1;gap:12px;padding:0 2px}
  .album-art{flex-basis:68px;width:68px;height:68px}
  .track-title{font-size:16px}.track-artist{font-size:12px;margin:4px 0 9px}.time-row{font-size:10px}
  .sound-bars{order:2;display:flex;flex-direction:column;gap:6px;margin:8px 2px 0;width:100%}
  .sound-bars .bus-sound-bar{width:100%;margin:0;padding:4px 10px;gap:8px}
  .sound-bars .bus-sound-toggle{font-size:10px;padding:3px 6px;gap:5px}
  .sound-bars .bus-sound-toggle svg{width:14px;height:14px}
  .sound-bars .bus-sound-value{font-size:9.5px;min-width:24px}
  .controls{order:3;display:grid;grid-template-columns:repeat(4,50px);grid-template-rows:72px 68px;justify-content:center;align-items:center;column-gap:14px;row-gap:7px;margin:14px 0 4px}
  .circle-action{flex-basis:50px;width:50px;height:50px}
  .circle-action small{top:calc(100% + 6px);font-size:9px}
  .circle-action small:after{font-size:0}.stop-action small:after,.rain-action small:after{content:none}
  .stop-action{grid-column:1;grid-row:1}.controls #horn{grid-column:2;grid-row:1}.rain-action{grid-column:3;grid-row:1}.controls #bell{grid-column:4;grid-row:1}
  .previous{grid-column:1;grid-row:2;justify-self:end}.play{grid-column:2 / span 2;grid-row:2;justify-self:center;flex-basis:64px;width:64px;height:64px}.controls #next{grid-column:4;grid-row:2;justify-self:start}
  .transport{flex-basis:38px;width:38px;height:38px}.transport svg{width:21px;height:21px}
}
@media(max-width:360px){
  .player{width:calc(100vw - 20px)}
  .controls{grid-template-columns:repeat(4,46px);column-gap:10px}
  .circle-action{flex-basis:46px;width:46px;height:46px}.circle-action .icon svg{width:20px;height:20px}
  .album-art{flex-basis:62px;width:62px;height:62px}.track-title{font-size:15px}
}
@media(max-width:560px) and (max-height:680px){
  .player{bottom:10px}.album-art{flex-basis:59px;width:59px;height:59px}.track-artist{margin:3px 0 6px}.controls{margin-top:13px;grid-template-rows:67px 61px}.play{flex-basis:58px;width:58px;height:58px}
}

/* ==========================================================================
   Apple-Style Top Bar Actions (Fullscreen on Left, Refresh in Middle, Songs on Right)
   ========================================================================== */
.top-nav-actions {
  position: fixed;
  top: clamp(23px, 4vw, 44px);
  right: clamp(20px, 4vw, 50px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Apple-style Circular Buttons (Fullscreen & Refresh) */
.top-action-btn,
.replay-btn,
.replay,
.fullscreen-btn {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  background: rgba(26, 28, 24, 0.72);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  color: #faf8f2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.top-action-btn[hidden],
.replay-btn[hidden],
.replay[hidden],
.fullscreen-btn[hidden] {
  display: none !important;
}
.top-action-btn:hover,
.replay-btn:hover,
.replay:hover,
.fullscreen-btn:hover {
  background: rgba(38, 42, 34, 0.88);
  border-color: rgba(255, 255, 255, 0.44);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.22);
  color: #f5c871;
}
.top-action-btn:active,
.replay-btn:active,
.replay:active,
.fullscreen-btn:active {
  transform: scale(0.94);
}
.top-action-btn svg,
.replay svg,
.fullscreen-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
}

/* Apple Fullscreen Toggle on/off icon states */
.fullscreen-btn .icon-fs-exit {
  display: none;
}
.fullscreen-btn .icon-fs-enter {
  display: block;
}
.fullscreen-btn.is-active .icon-fs-enter {
  display: none;
}
.fullscreen-btn.is-active .icon-fs-exit {
  display: block;
}
.fullscreen-btn.is-active {
  color: #f5c871;
  border-color: rgba(245, 200, 113, 0.5);
  background: rgba(45, 40, 30, 0.88);
}

/* Apple Refresh hover spin */
.replay-btn svg,
.replay svg {
  transition: transform .35s ease;
}
.replay-btn:hover svg,
.replay:hover svg {
  transform: rotate(-60deg);
}

/* Apple-style Songs Button (to the right) */
.playlist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px 0 12px;
  border-radius: 999px;
  background: rgba(26, 28, 24, 0.72);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  color: #faf8f2;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.playlist-toggle:hover {
  background: rgba(38, 42, 34, 0.88);
  border-color: rgba(255, 255, 255, 0.44);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.22);
}
.playlist-toggle:active {
  transform: scale(0.96);
}
.playlist-hamburger-icon {
  flex-shrink: 0;
  transition: transform .2s ease;
}
.playlist-toggle:hover .playlist-hamburger-icon {
  transform: scale(1.08);
}
.playlist-btn-label {
  letter-spacing: .01em;
  font-weight: 500;
}

/* Playlist Drawer Overlay & Layout */
.playlist-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  pointer-events: auto;
}
.playlist-drawer-wrap[hidden] {
  display: none !important;
}
.playlist-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity .32s cubic-bezier(0.16, 1, 0.3, 1);
}
.playlist-drawer-wrap.is-open .playlist-backdrop {
  opacity: 1;
}

.playlist-drawer {
  position: relative;
  z-index: 2;
  width: min(420px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  margin: 16px;
  border-radius: 22px;
  background: rgba(26, 26, 30, 0.88);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(calc(100% + 28px));
  transition: transform .36s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'DM Sans', sans-serif;
}
.playlist-drawer-wrap.is-open .playlist-drawer {
  transform: translateX(0);
}

.playlist-drag-handle {
  display: none;
  width: 36px;
  height: 4.5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.3);
  margin: 10px auto 2px;
  flex-shrink: 0;
}

.playlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 12px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.playlist-header-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.playlist-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.playlist-subtitle {
  font-size: 12px;
  color: rgba(235, 235, 245, 0.55);
  font-weight: 500;
}
.playlist-close-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.playlist-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: scale(1.06);
}
.playlist-close-btn:active {
  transform: scale(0.94);
}

.playlist-header-right {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.playlist-header-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'DM Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 5px 10px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(235, 235, 245, 0.85);
  transition: all 0.15s ease;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  line-height: 1;
}

.playlist-header-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

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

.playlist-header-pill.whats-new-pill {
  background: rgba(245, 200, 113, 0.12);
  border-color: rgba(245, 200, 113, 0.35);
  color: #fde047;
}

.playlist-header-pill.whats-new-pill:hover {
  background: rgba(245, 200, 113, 0.24);
  border-color: rgba(245, 200, 113, 0.55);
  color: #ffffff;
}

.playlist-header-pill.about-pill {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
  color: rgba(235, 235, 245, 0.8);
}

.playlist-header-pill.about-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.playlist-search-wrap {
  position: relative;
  padding: 10px 18px 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.playlist-search-wrap .search-icon {
  position: absolute;
  left: 28px;
  color: rgba(235, 235, 245, 0.45);
  pointer-events: none;
}
.playlist-search-input {
  width: 100%;
  height: 34px;
  padding: 0 30px 0 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.playlist-search-input::placeholder {
  color: rgba(235, 235, 245, 0.42);
}
.playlist-search-input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #0a84ff;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.24);
}
.playlist-search-clear {
  position: absolute;
  right: 28px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  border: none;
  font-size: 10px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.playlist-search-clear:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* YouTube Autocomplete Suggestions Bar */
.playlist-suggestions-container {
  padding: 0 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  animation: fadeInSuggestions .15s ease;
}
@keyframes fadeInSuggestions {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.playlist-suggestions-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(235, 235, 245, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-left: 2px;
}
.playlist-suggestions-label svg {
  color: #0a84ff;
}
.playlist-suggestions-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}
.playlist-suggestions-chips::-webkit-scrollbar {
  display: none;
}
.search-suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s ease;
  flex-shrink: 0;
}
.search-suggest-chip:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  transform: translateY(-1px);
}
.search-suggest-chip:active {
  transform: scale(0.96);
}
.search-suggest-chip svg {
  color: rgba(235, 235, 245, 0.6);
  flex-shrink: 0;
}

/* Playlist Section Headers (Curated vs YouTube) */
.playlist-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(235, 235, 245, 0.55);
}
.playlist-section-header .section-count {
  font-size: 9.5px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 6px;
  border-radius: 8px;
  color: #fff;
}
.yt-section-header {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
}
.yt-header-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f87171;
}
.yt-badge-pill {
  font-size: 9px;
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
  border: 0.5px solid rgba(239, 68, 68, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 700;
}

/* YouTube Item Duration & Play Pills */
.yt-item-duration {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 3px;
  border-radius: 3px;
  line-height: 1;
}
.yt-play-pill {
  font-size: 11px;
  font-weight: 600;
  color: #0a84ff;
  background: rgba(10, 132, 255, 0.12);
  border: 0.5px solid rgba(10, 132, 255, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: all .15s ease;
}
.playlist-item:hover .yt-play-pill {
  background: #0a84ff;
  color: #fff;
}

/* Song Item Action Buttons */
.item-actions,
.yt-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}
.item-play-next-btn,
.yt-next-pill {
  font-size: 10px;
  font-weight: 600;
  color: rgba(235, 235, 245, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.item-play-next-btn:hover,
.yt-next-pill:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}
.item-play-next-btn:active,
.yt-next-pill:active {
  transform: scale(0.96);
}

.yt-add-global-pill {
  font-size: 10px;
  font-weight: 700;
  color: #f5c871;
  background: rgba(245, 200, 113, 0.12);
  border: 0.5px solid rgba(245, 200, 113, 0.38);
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.yt-add-global-pill:hover {
  background: rgba(245, 200, 113, 0.25);
  border-color: #f5c871;
  color: #fff;
  transform: translateY(-1px);
}
.yt-add-global-pill.is-added {
  color: #86efac;
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  pointer-events: none;
}
.community-badge {
  font-size: 9px;
  font-weight: 700;
  color: #f5c871;
  background: rgba(245, 200, 113, 0.15);
  border: 0.5px solid rgba(245, 200, 113, 0.3);
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
}

.item-delete-global-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 0.5px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  cursor: pointer;
  padding: 0;
  transition: all .15s ease;
  flex-shrink: 0;
}
.item-delete-global-btn:hover {
  background: rgba(239, 68, 68, 0.32);
  border-color: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
}
.item-delete-global-btn:active {
  transform: scale(0.92);
}


/* YouTube Live Search Loading & Empty states */
.yt-searching-state,
.yt-empty-state {
  padding: 16px 18px;
  text-align: center;
  font-size: 12px;
  color: rgba(235, 235, 245, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.spinner-dot {
  width: 13px;
  height: 13px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: #0a84ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Direct YouTube Video Link Card */
.yt-direct-card {
  margin: 6px 16px 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(18, 20, 26, 0.95) 100%);
  border: 1px solid rgba(239, 68, 68, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
}
.yt-direct-thumb-wrap {
  position: relative;
  width: 54px;
  height: 38px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #000;
}
.yt-direct-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-direct-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.yt-direct-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f87171;
  letter-spacing: 0.05em;
}
.yt-direct-title {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-direct-artist {
  font-size: 10.5px;
  color: rgba(235, 235, 245, 0.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.yt-direct-play-btn {
  background: #ef4444;
  color: #fff;
  border: none;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .12s, background .12s;
}
.yt-direct-play-btn:hover {
  background: #dc2626;
  transform: scale(1.04);
}

.playlist-now-playing-banner {
  margin: 4px 16px 10px;
  padding: 7px 11px;
  border-radius: 12px;
  background: rgba(10, 132, 255, 0.12);
  border: 0.5px solid rgba(10, 132, 255, 0.28);
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.now-playing-pill {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0a84ff;
  background: rgba(10, 132, 255, 0.2);
  padding: 3px 6px;
  border-radius: 5px;
  flex-shrink: 0;
}
.now-playing-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.now-playing-title {
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.now-playing-artist {
  font-size: 10.5px;
  color: rgba(235, 235, 245, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-jump-btn {
  font-size: 11px;
  font-weight: 500;
  color: #0a84ff;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  transition: background .12s;
}
.drawer-jump-btn:hover {
  background: rgba(10, 132, 255, 0.16);
}

/* Scrollable Song Items */
.playlist-items-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 10px 20px;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.playlist-items-scroll::-webkit-scrollbar {
  width: 5px;
}
.playlist-items-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.playlist-items-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 99px;
}
.playlist-items-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}

.playlist-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 9px;
  border-radius: 11px;
  background: transparent;
  border: 0.5px solid transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .14s ease, transform .1s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.playlist-item:hover {
  background: rgba(255, 255, 255, 0.07);
}
.playlist-item:active {
  transform: scale(0.985);
  background: rgba(255, 255, 255, 0.11);
}
.item-index {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.38);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.item-thumb-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #25262a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.item-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.item-eq-bars {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  align-items: flex-end;
  justify-content: center;
  gap: 2.5px;
  padding-bottom: 9px;
}
.item-eq-bars i {
  width: 2.5px;
  background: #0a84ff;
  border-radius: 1px;
}
.playlist-item.is-current .item-eq-bars {
  display: flex;
}
.playlist-item.is-current.is-playing .item-eq-bars i {
  animation: apple-eq-bounce 0.65s ease-in-out infinite alternate;
}
.playlist-item.is-current.is-playing .item-eq-bars i:nth-child(1) { height: 7px; }
.playlist-item.is-current.is-playing .item-eq-bars i:nth-child(2) { height: 16px; animation-delay: 0.18s; }
.playlist-item.is-current.is-playing .item-eq-bars i:nth-child(3) { height: 11px; animation-delay: 0.36s; }
.playlist-item.is-current:not(.is-playing) .item-eq-bars i:nth-child(1) { height: 5px; }
.playlist-item.is-current:not(.is-playing) .item-eq-bars i:nth-child(2) { height: 10px; }
.playlist-item.is-current:not(.is-playing) .item-eq-bars i:nth-child(3) { height: 6px; }

@keyframes apple-eq-bounce {
  from { transform: scaleY(0.35); }
  to { transform: scaleY(1); }
}

.item-meta {
  flex: 1;
  min-width: 0;
}
.item-title {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.item-artist {
  font-size: 11px;
  color: rgba(235, 235, 245, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  line-height: 1.25;
}
.playlist-item.is-current {
  background: rgba(10, 132, 255, 0.16);
  border-color: rgba(10, 132, 255, 0.35);
}
.playlist-item.is-current .item-index {
  color: #0a84ff;
  font-weight: 700;
}
.playlist-item.is-current .item-title {
  color: #64b5f6;
  font-weight: 600;
}
.playlist-empty-state {
  padding: 40px 20px;
  text-align: center;
  color: rgba(235, 235, 245, 0.5);
  font-size: 13px;
}

/* Responsive adjustments for Laptop vs Phone */
@media (max-width: 700px) {
  .top-nav-actions {
    top: 20px;
    right: 18px;
    gap: 7px;
  }
  .top-action-btn,
  .replay-btn,
  .replay,
  .fullscreen-btn {
    width: 34px;
    height: 34px;
  }
  .top-action-btn svg,
  .replay-btn svg,
  .replay svg,
  .fullscreen-btn svg {
    width: 14px;
    height: 14px;
  }
  .playlist-toggle {
    height: 34px;
    padding: 0 12px 0 10px;
    gap: 6px;
    font-size: 12px;
  }
  .chat-toggle .chat-unread-dot {
    bottom: 4.5px;
    right: 7px;
    width: 6.5px;
    height: 6.5px;
  }
}
@media (max-width: 640px) {
  .playlist-drawer-wrap {
    align-items: flex-end;
  }
  .playlist-drawer {
    width: 100%;
    height: auto;
    max-height: 84vh;
    max-height: 84dvh;
    margin: 0;
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    transform: translateY(105%);
  }
  .playlist-drawer-wrap.is-open .playlist-drawer {
    transform: translateY(0);
  }
  .chat-drawer {
    height: 88vh !important;
    height: 88dvh !important;
    max-height: 88dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .chat-messages-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .chat-msg-media-wrap,
  .chat-msg-media-img {
    max-width: 140px !important;
    max-height: 100px !important;
  }
  .chat-msg-gif-wrap,
  .chat-msg-gif-img {
    max-width: 135px !important;
    max-height: 95px !important;
  }
  .chat-shelf-drawer {
    max-height: 185px !important;
  }
  .chat-shelf-drawer.chat-gif-drawer {
    max-height: 295px !important;
  }
  .chat-emoji-grid {
    max-height: 130px !important;
  }
  .chat-gif-grid {
    height: 186px !important;
    max-height: 186px !important;
    gap: 7px !important;
  }
  .chat-gif-item {
    height: 82px !important;
  }
  .chat-message-input,
  .chat-gif-search-input,
  .chat-username-input {
    font-size: 16px !important; /* Prevents iOS Safari auto-zoom distortion */
  }
  .playlist-drag-handle {
    display: block;
  }
  .playlist-header {
    padding: 8px 18px 10px;
  }
  .playlist-title {
    font-size: 17px;
  }
  .playlist-search-wrap {
    padding: 8px 16px 8px;
  }
  .playlist-items-scroll {
    padding: 4px 10px max(18px, env(safe-area-inset-bottom));
  }
}
@media (max-width: 380px) {
  .playlist-btn-label {
    display: none;
  }
  .playlist-toggle {
    padding: 6px 9px;
  }
  .chat-toggle .chat-unread-dot {
    bottom: 4px;
    right: 5px;
    width: 6px;
    height: 6px;
  }
}

/* ==========================================================================
   Passenger Live Chat Toggle (Green Glow Aura & Pulsating Dot at Bottom Right)
   ========================================================================== */
.chat-unread-dot {
  position: absolute;
  bottom: 5.5px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 
    0 0 0 1.5px rgba(20, 22, 18, 0.95),
    0 0 6px #22c55e,
    0 0 13px rgba(34, 197, 94, 0.85);
  pointer-events: none;
  z-index: 4;
  animation: chatDotPulsate 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.chat-unread-dot[hidden] {
  display: none !important;
}

@keyframes chatDotPulsate {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
    box-shadow: 
      0 0 0 1.5px rgba(20, 22, 18, 0.95),
      0 0 6px #22c55e,
      0 0 12px rgba(34, 197, 94, 0.65);
  }
  50% {
    transform: scale(1.35);
    opacity: 1;
    box-shadow: 
      0 0 0 1.5px rgba(20, 22, 18, 0.95),
      0 0 10px #4ade80,
      0 0 20px rgba(34, 197, 94, 0.95);
  }
}

.chat-toggle {
  position: relative;
  border-color: rgba(34, 197, 94, 0.45) !important;
  box-shadow: 
    0 0 10px rgba(34, 197, 94, 0.28),
    0 4px 18px rgba(0, 0, 0, 0.4),
    inset 0 0 6px rgba(34, 197, 94, 0.16),
    inset 0 1px 1px rgba(255, 255, 255, 0.14) !important;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease !important;
}

.chat-toggle:hover {
  background: rgba(26, 38, 28, 0.88) !important;
  border-color: rgba(74, 222, 128, 0.72) !important;
  box-shadow: 
    0 0 18px rgba(34, 197, 94, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.55),
    inset 0 0 8px rgba(34, 197, 94, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.22) !important;
  transform: translateY(-1px);
}

.chat-toggle:active {
  transform: scale(0.96);
}

.chat-toggle .chat-toggle-icon {
  color: #86efac;
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.45));
  transition: transform .2s ease, color .2s ease, filter .2s ease;
}

.chat-toggle:hover .chat-toggle-icon {
  color: #bbf7d0;
  transform: scale(1.08);
  filter: drop-shadow(0 0 7px rgba(34, 197, 94, 0.8));
}

/* Breathing Glow effect when new chat arrives */
@keyframes chatGlowBreathing {
  0% {
    border-color: rgba(34, 197, 94, 0.42);
    box-shadow: 
      0 0 8px rgba(34, 197, 94, 0.3),
      0 4px 18px rgba(0, 0, 0, 0.4),
      inset 0 0 5px rgba(34, 197, 94, 0.14);
    transform: scale(1);
  }
  50% {
    border-color: rgba(74, 222, 128, 0.95);
    box-shadow: 
      0 0 22px rgba(34, 197, 94, 0.9),
      0 0 38px rgba(34, 197, 94, 0.48),
      0 6px 24px rgba(0, 0, 0, 0.55),
      inset 0 0 10px rgba(34, 197, 94, 0.35);
    transform: scale(1.036);
  }
  100% {
    border-color: rgba(34, 197, 94, 0.42);
    box-shadow: 
      0 0 8px rgba(34, 197, 94, 0.3),
      0 4px 18px rgba(0, 0, 0, 0.4),
      inset 0 0 5px rgba(34, 197, 94, 0.14);
    transform: scale(1);
  }
}

@keyframes chatIconPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

.chat-toggle.is-breathing {
  animation: chatGlowBreathing 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite !important;
}

.chat-toggle.is-breathing .chat-toggle-icon {
  color: #4ade80;
  filter: drop-shadow(0 0 9px rgba(34, 197, 94, 0.95));
  animation: chatIconPulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Chat Drawer Container */
.chat-drawer {
  background: #11141a;
  border-color: rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
}

/* Scenic Header matching Mockup */
.chat-header {
  position: relative;
  z-index: 60;
  min-height: auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: visible !important;
  background: #12151b;
  flex-shrink: 0;
}
.chat-header-bg-art {
  position: absolute;
  inset: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
  background: url('../assets/images/chat-header-scenic.jpg?v=3') no-repeat right 50% / cover;
  pointer-events: none;
  z-index: 0;
}
.chat-header-bg-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(18, 21, 27, 0.94) 0%, rgba(18, 21, 27, 0.65) 45%, rgba(18, 21, 27, 0.2) 100%),
              linear-gradient(to bottom, rgba(18, 21, 27, 0.1) 0%, rgba(18, 21, 27, 0.7) 100%);
  pointer-events: none;
}
.chat-header-left {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.chat-header-bus-badge {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(26, 30, 38, 0.92);
  border: 1px solid rgba(245, 200, 113, 0.4);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}
.chat-header-bus-badge svg {
  filter: drop-shadow(0 0 6px rgba(245, 200, 113, 0.5));
}
.chat-header-titles {
  display: flex;
  flex-direction: column;
}
.chat-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.chat-title-highlight {
  color: #f5c871;
  font-weight: 800;
}
.chat-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 2px;
}
.chat-live-count {
  font-weight: 700;
  color: #f8fafc;
}
.chat-live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e, 0 0 14px rgba(34, 197, 94, 0.6);
  flex-shrink: 0;
  animation: live-pulse-subtle 2s infinite ease-in-out;
}
@keyframes live-pulse-subtle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.85; }
}
.chat-header-right-actions {
  position: relative;
  z-index: 65;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-header-circle-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(18, 21, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: rgba(255, 255, 255, 0.85);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: all .18s ease;
}
.chat-header-circle-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.06);
}
.chat-header-circle-btn:active {
  transform: scale(0.94);
}

.chat-mute-btn {
  position: relative;
  flex-shrink: 0;
}

.chat-mute-btn svg {
  display: block;
}

.chat-mute-btn .chat-mute-icon-off {
  display: none !important;
}

.chat-mute-btn.is-muted {
  color: #f87171 !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
  background: rgba(239, 68, 68, 0.16) !important;
}

.chat-mute-btn.is-muted:hover {
  color: #fca5a5 !important;
  border-color: rgba(239, 68, 68, 0.65) !important;
  background: rgba(239, 68, 68, 0.25) !important;
}

.chat-mute-btn.is-muted .chat-mute-icon-on {
  display: none !important;
}

.chat-mute-btn.is-muted .chat-mute-icon-off {
  display: block !important;
}

/* Apple-Style Chat Options Dropdown Menu */
.chat-options-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 40px;
  min-width: 215px;
  background: rgba(22, 26, 36, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08);
  padding: 6px;
  z-index: 99999 !important;
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: chatMenuPop .18s cubic-bezier(0.16, 1, 0.3, 1);
}

.chat-options-menu[hidden] {
  display: none !important;
}

@keyframes chatMenuPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.chat-options-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #e5e7eb;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.chat-options-item:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.chat-options-item:active {
  background: rgba(255, 255, 255, 0.18);
}

.chat-options-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .chat-options-menu {
    right: 0;
    min-width: 200px;
  }
}

/* User Profile Capsule Bar matching Mockup */
.chat-user-bar {
  position: relative;
  z-index: 5;
  padding: 10px 16px 8px;
  background: #11141a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.chat-user-capsule {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #191c24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px 6px 4px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: border-color .2s;
}
.chat-user-capsule:focus-within {
  border-color: rgba(56, 189, 248, 0.45);
}
.chat-user-icon-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #252a36;
  color: rgba(255, 255, 255, 0.75);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.chat-username-field-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
.chat-username-input {
  width: 100%;
  height: 28px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-weight: 600;
  font-size: 13.5px;
  padding: 0 4px;
  outline: none;
  font-family: inherit;
}
.chat-username-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
.chat-verified-badge {
  margin-left: 4px;
  margin-right: 4px;
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}
.chat-verified-badge[hidden] {
  display: none !important;
}
.verified-tick-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}
.chat-gender-selector {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #12151b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 2px 3px;
  flex-shrink: 0;
}
.chat-gender-pill {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .16s ease;
  padding: 0;
}
.chat-gender-pill:hover {
  color: #ffffff;
}
.chat-gender-pill.is-active[data-gender="M"] {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.65);
}
.chat-gender-pill.is-active[data-gender="F"] {
  background: #db2777;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(219, 39, 119, 0.65);
}

.chat-messages-container {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 18px;
  scroll-behavior: smooth;
  box-sizing: border-box;
}
.chat-messages-container::-webkit-scrollbar {
  width: 5px;
}
.chat-messages-container::-webkit-scrollbar-track {
  background: transparent;
}
.chat-messages-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 99px;
}

.chat-empty-state {
  margin: auto;
  text-align: center;
  padding: 30px 16px;
  color: rgba(255, 255, 255, 0.6);
  user-select: none;
}
.chat-empty-icon {
  display: block;
  font-size: 32px;
  margin-bottom: 10px;
}
.chat-empty-state p {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: #f7e8c9;
}
.chat-empty-state small {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
  display: block;
  max-width: 250px;
  margin: 0 auto;
}

.chat-system-note {
  position: relative;
  margin: 10px 16px 2px;
  padding: 10px 34px 10px 13px;
  border-radius: 12px;
  background: rgba(245, 200, 113, 0.08);
  border-left: 3.5px solid #f5c871;
  border-top: 1px solid rgba(245, 200, 113, 0.16);
  border-right: 1px solid rgba(245, 200, 113, 0.16);
  border-bottom: 1px solid rgba(245, 200, 113, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
  box-sizing: border-box;
  transition: opacity .2s ease, transform .2s ease;
}
.chat-system-note[hidden] {
  display: none !important;
}
.chat-system-note-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(245, 200, 113, 0.28);
  background: rgba(30, 26, 20, 0.65);
  color: rgba(245, 200, 113, 0.85);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: all .18s ease;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.chat-system-note-close:hover {
  background: rgba(245, 200, 113, 0.25);
  color: #fff;
  border-color: rgba(245, 200, 113, 0.6);
  transform: scale(1.08);
}
.chat-system-note-close:active {
  transform: scale(0.92);
}
.chat-system-note-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #f7e8c9;
  margin-bottom: 4px;
}
.chat-system-note-body p {
  margin: 2px 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}

/* Pinned Chat Card */
.chat-pinned-card {
  margin: 6px 16px 2px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.08);
  border-left: 3.5px solid #38bdf8;
  border-top: 1px solid rgba(56, 189, 248, 0.22);
  border-right: 1px solid rgba(56, 189, 248, 0.22);
  border-bottom: 1px solid rgba(56, 189, 248, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-shrink: 0;
  box-sizing: border-box;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.chat-pinned-card:hover {
  background: rgba(56, 189, 248, 0.13);
}
.chat-pinned-card[hidden] {
  display: none !important;
}
.chat-pinned-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.chat-pinned-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #38bdf8;
  text-transform: uppercase;
}
.chat-pinned-tag svg {
  width: 11px;
  height: 11px;
}
.chat-unpin-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 2px 7px;
  cursor: pointer;
  transition: all .15s;
}
.chat-unpin-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fca5a5;
}
.chat-unpin-btn[hidden] {
  display: none !important;
}
.chat-pinned-body {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.9);
}
.chat-pinned-sender {
  font-weight: 600;
  margin-right: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.chat-pinned-text {
  color: #f3efe6;
  word-break: break-word;
}

/* ==========================================================================
   Apple-Style Chat Message Rows with Song Thumbnail & Interactive Actions
   ========================================================================== */
.chat-msg-row,
.chat-msg {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  position: relative;
  animation: chat-fade-up .22s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: transform .2s ease, opacity .2s ease;
  box-sizing: border-box;
}
@keyframes chat-fade-up {
  from { opacity: 0; transform: translateY(7px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Avatar Wrap displaying the song thumbnail playing in passenger's player */
.chat-avatar-wrap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  background: #1c2028;
  margin-top: 2px;
  position: relative;
}
.chat-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Right Message Column */
.chat-msg-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.chat-msg-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  width: 100%;
}
.chat-msg-sender {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chat-gender-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  border-radius: 4px;
  padding: 1.5px 5.5px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.chat-gender-tag.gender-m {
  background: #1e3a8a;
  color: #93c5fd;
  border: 0.5px solid rgba(96, 165, 250, 0.4);
}
.chat-gender-tag.gender-f {
  background: #831843;
  color: #f472b6;
  border: 0.5px solid rgba(244, 114, 182, 0.4);
}
.chat-msg-time {
  font-size: 11px;
  color: #64748b;
  margin-left: auto;
  font-weight: 400;
  white-space: nowrap;
}

/* Chat Speech Bubble */
.chat-msg-bubble {
  background: #20242c;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 15px;
  padding: 10px 14px;
  color: #f1f5f9;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
  max-width: 92%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  position: relative;
  transition: outline .2s ease, box-shadow .2s ease, transform .15s ease;
}

/* Female passenger subtle rose tint matching mockup */
.chat-msg-row.is-gender-f .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(136, 19, 55, 0.35) 0%, #20242c 100%);
  border-color: rgba(225, 29, 72, 0.25);
}

/* User's own message styling */
.chat-msg-row.is-me .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, #20242c 100%);
  border-color: rgba(56, 189, 248, 0.28);
}

/* ==========================================================================
   OFFICIAL ADMIN VIP MESSAGE SKIN & RADIANT GLOW
   ========================================================================== */

/* 1. Admin Avatar Halo & Floating Crown */
.chat-msg-row.is-admin-msg .chat-avatar-wrap {
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 2px #f59e0b, 0 0 16px rgba(245, 158, 11, 0.7);
  animation: admin-avatar-pulse 3s ease-in-out infinite alternate;
}
.chat-msg-row.is-admin-msg .chat-avatar-wrap::after {
  content: "👑";
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.9));
  transform: rotate(12deg);
  animation: admin-crown-tilt 3s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes admin-avatar-pulse {
  0% { box-shadow: 0 0 0 2px #f59e0b, 0 0 12px rgba(245, 158, 11, 0.5); }
  100% { box-shadow: 0 0 0 2.5px #fbbf24, 0 0 22px rgba(251, 191, 36, 0.85); }
}

@keyframes admin-crown-tilt {
  0% { transform: rotate(8deg) scale(0.98); }
  100% { transform: rotate(16deg) scale(1.08); }
}

/* 2. Admin Sender Name & Official Tag */
.chat-admin-sender-name {
  background: linear-gradient(135deg, #fffbeb 0%, #fde047 35%, #f59e0b 70%, #d97706 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.4));
}
.chat-admin-pill-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1.5px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  color: #1a0f00;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
  line-height: 1.2;
}

/* 3. Special Admin Message Bubble: Luxury Amber-Gold Obsidian Background, Glowing Edge & Aura */
.chat-msg-row.is-admin-msg .chat-msg-bubble {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(180, 83, 9, 0.22) 28%, rgba(20, 24, 33, 0.98) 65%, rgba(245, 158, 11, 0.16) 100%);
  border: 1.5px solid rgba(251, 191, 36, 0.75);
  border-left: 4.5px solid #f59e0b;
  border-radius: 6px 18px 18px 18px;
  box-shadow:
    0 6px 26px -2px rgba(245, 158, 11, 0.45),
    0 0 22px rgba(251, 191, 36, 0.26),
    inset 0 1px 1px rgba(255, 255, 255, 0.35),
    inset 0 -1px 3px rgba(245, 158, 11, 0.22);
  position: relative;
  overflow: hidden;
  animation: admin-bubble-aura 3s ease-in-out infinite alternate;
}

/* Shimmering Gold Top Accent Line */
.chat-msg-row.is-admin-msg .chat-msg-bubble::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #f59e0b 0%, #fef08a 40%, #f59e0b 80%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}

@keyframes admin-bubble-aura {
  0% {
    box-shadow:
      0 6px 20px -2px rgba(245, 158, 11, 0.38),
      0 0 14px rgba(251, 191, 36, 0.2),
      inset 0 1px 1px rgba(255, 255, 255, 0.3);
    border-color: rgba(251, 191, 36, 0.65);
  }
  100% {
    box-shadow:
      0 8px 32px -1px rgba(245, 158, 11, 0.65),
      0 0 28px rgba(251, 191, 36, 0.45),
      inset 0 1px 2px rgba(255, 255, 255, 0.52);
    border-color: rgba(254, 240, 138, 0.95);
  }
}

/* 4. Official Notice Banner inside Admin Bubble */
.chat-admin-bubble-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  margin-bottom: 7px;
  background: rgba(245, 158, 11, 0.16);
  border: 0.5px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fde047;
  text-transform: uppercase;
}
.chat-admin-banner-shield {
  font-size: 12px;
  line-height: 1;
}
.chat-admin-banner-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-admin-banner-sparkle {
  color: #fbbf24;
  font-size: 11px;
  animation: admin-sparkle 2s ease-in-out infinite alternate;
}
@keyframes admin-sparkle {
  0% { opacity: 0.5; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* 5. Admin Message Text: High clarity, warm contrast */
.chat-msg-row.is-admin-msg .chat-msg-text {
  color: #fffef7;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* 6. Admin Action Pills */
.chat-msg-row.is-admin-msg .chat-pill-btn {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: #fde68a;
}
.chat-msg-row.is-admin-msg .chat-pill-btn:hover {
  background: rgba(245, 158, 11, 0.25);
  border-color: rgba(245, 158, 11, 0.55);
  color: #ffffff;
}

/* 7. Live Song Popping Banner for Admin */
.chat-pop-bubble.is-admin-pop {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.35) 0%, rgba(20, 24, 33, 0.98) 100%) !important;
  border-color: rgba(251, 191, 36, 0.85) !important;
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.45), 0 0 20px rgba(251, 191, 36, 0.35) !important;
}

.chat-msg-row.is-highlighted .chat-msg-bubble,
.chat-msg.is-highlighted .chat-msg-bubble {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  animation: highlight-pulse 1.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes highlight-pulse {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.8); }
  60% { box-shadow: 0 0 0 10px rgba(56, 189, 248, 0); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

.chat-msg-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: #f1f5f9;
}

/* Quoted Reply inside Message Bubble */
.chat-reply-quote {
  display: flex;
  align-items: stretch;
  gap: 7px;
  margin-bottom: 6px;
  padding: 4px 8px 4px 6px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.35);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: background .18s ease, transform .15s ease;
  user-select: none;
}
.chat-reply-quote:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-0.5px);
}
.chat-reply-quote-bar {
  width: 2.5px;
  border-radius: 2px;
  background: #38bdf8;
  flex-shrink: 0;
}
.chat-reply-quote-content {
  flex: 1;
  min-width: 0;
}
.chat-reply-quote-name {
  font-size: 10.5px;
  font-weight: 700;
  color: #38bdf8;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-reply-quote-text {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action Pills Row under Message Bubble */
.chat-msg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.chat-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 3.5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  transition: all .16s ease;
  user-select: none;
  line-height: 1.2;
}
.chat-pill-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-0.5px);
}
.chat-pill-btn:active {
  transform: scale(0.95);
}
.chat-pill-btn.chat-like-btn.has-liked {
  background: rgba(244, 63, 94, 0.22);
  border-color: rgba(244, 63, 94, 0.55);
  color: #fecdd3;
  box-shadow: 0 0 10px rgba(244, 63, 94, 0.25);
}
.chat-pill-count {
  font-size: 11.5px;
  font-weight: 600;
}
.chat-admin-actions {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: 3px;
}
.is-admin-mode .chat-admin-actions {
  display: inline-flex;
}
.chat-admin-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  transition: all .15s;
}
.chat-admin-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transform: scale(1.08);
}
.chat-admin-action-btn.chat-pin-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.5);
  color: #38bdf8;
}
.chat-admin-action-btn.chat-pin-btn.is-pinned {
  background: rgba(56, 189, 248, 0.35);
  border-color: rgba(56, 189, 248, 0.8);
  color: #38bdf8;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}
.chat-admin-action-btn.chat-delete-btn:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #f87171;
}
.chat-admin-action-btn.chat-views-btn {
  width: auto;
  min-width: 30px;
  height: 24px;
  border-radius: 12px;
  padding: 0 7px;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.28);
  color: #38bdf8;
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-admin-action-btn.chat-views-btn:hover {
  background: rgba(56, 189, 248, 0.24);
  border-color: rgba(56, 189, 248, 0.6);
  color: #7dd3fc;
  box-shadow: 0 0 10px rgba(56, 189, 248, 0.25);
  transform: scale(1.05);
}
.chat-admin-action-btn.chat-views-btn svg {
  flex-shrink: 0;
}
.chat-views-count {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
}

.chat-pinned-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chat-pinned-views-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  cursor: pointer;
  transition: all 0.15s ease;
}
.chat-pinned-views-btn:hover {
  background: rgba(56, 189, 248, 0.28);
  border-color: rgba(56, 189, 248, 0.65);
  color: #7dd3fc;
}

/* Apple-Style Reply Preview Bar */
.chat-reply-bar {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(20, 24, 30, 0.96);
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  animation: reply-bar-in .2s cubic-bezier(0.16, 1, 0.3, 1) both;
  flex-shrink: 0;
}
.chat-reply-bar[hidden] {
  display: none !important;
}
@keyframes reply-bar-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.chat-reply-bar-accent {
  width: 3px;
  height: 28px;
  border-radius: 2px;
  background: #38bdf8;
  flex-shrink: 0;
}
.chat-reply-bar-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-reply-bar-title {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-reply-bar-snippet {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-reply-cancel-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all .16s ease;
  flex-shrink: 0;
}
.chat-reply-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: scale(1.08);
}

/* Apple-Style Chat Input Pill & Capsule matching Mockup */
.chat-input-form {
  position: relative;
  z-index: 20;
  padding: 10px 14px max(12px, env(safe-area-inset-bottom));
  background: #11141a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-sizing: border-box;
}
.chat-input-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1e26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  height: 48px;
  padding: 0 5px 0 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: border-color .2s;
  box-sizing: border-box;
}
.chat-input-pill:focus-within {
  border-color: rgba(244, 63, 94, 0.5);
}
.chat-input-icon-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0 4px;
  transition: color .18s, transform .16s;
  flex-shrink: 0;
}
.chat-input-icon-btn:hover {
  color: #ffffff;
  transform: scale(1.08);
}
.chat-gif-badge {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  line-height: 1;
}
.chat-message-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 13.5px;
  padding: 0 4px;
  outline: none;
  font-family: inherit;
}
.chat-message-input::placeholder {
  color: #64748b;
}
.chat-send-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  border: none;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.5);
  transition: transform .18s ease, filter .18s ease;
  padding: 0;
}
.chat-send-btn:hover {
  transform: scale(1.06);
  filter: brightness(1.1);
}
.chat-send-btn:active {
  transform: scale(0.92);
}
.chat-send-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: scale(0.96);
  filter: grayscale(0.2);
}

/* Apple-Style Quick Reaction Chips Row */
.chat-quick-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-quick-chips::-webkit-scrollbar {
  display: none;
}
.chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 7px 14px;
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all .16s ease;
  user-select: none;
  flex-shrink: 0;
}
.chat-chip:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-1px);
}
.chat-chip:active {
  transform: scale(0.95);
}

/* ==========================================================================
   Apple-Style Shelf Drawers: Emoji Picker, GIF Search & Media Attachment
   ========================================================================== */
.chat-shelf-drawer {
  position: relative;
  z-index: 30;
  background: #141720;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  animation: shelf-slide-in .18s cubic-bezier(0.16, 1, 0.3, 1) both;
  max-height: 200px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.5);
}
.chat-shelf-drawer.chat-gif-drawer {
  max-height: 320px;
}
.chat-shelf-drawer[hidden] {
  display: none !important;
}
@keyframes shelf-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 5px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  gap: 8px;
  flex-shrink: 0;
}
.chat-shelf-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: -0.01em;
}
.chat-shelf-title-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat-gif-count-badge {
  font-size: 10px;
  font-weight: 700;
  color: #f43f5e;
  background: rgba(244, 63, 94, 0.15);
  border: 0.5px solid rgba(244, 63, 94, 0.35);
  padding: 1.5px 7px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  user-select: none;
}
.chat-giphy-powered {
  font-size: 8.5px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  padding: 1.5px 6px;
  border-radius: 999px;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  line-height: 1.2;
}
.chat-giphy-powered strong {
  color: #f43f5e;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.chat-shelf-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.chat-shelf-kb-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 0.5px solid rgba(56, 189, 248, 0.3);
  border-radius: 999px;
  padding: 2.5px 8px;
  cursor: pointer;
  transition: all .15s ease;
  line-height: 1.2;
}
.chat-shelf-kb-btn:hover {
  background: rgba(56, 189, 248, 0.22);
  color: #fff;
}
.chat-shelf-close-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all .16s ease;
}
.chat-shelf-close-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  transform: scale(1.08);
}

/* --- Emoji Drawer Styles --- */
.chat-emoji-cats {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chat-emoji-cats::-webkit-scrollbar {
  display: none;
}
.chat-emoji-cat-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 15px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
  flex-shrink: 0;
}
.chat-emoji-cat-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.chat-emoji-cat-btn.is-active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.chat-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 3px;
  padding: 6px 10px 8px;
  overflow-y: auto;
  max-height: 145px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.chat-emoji-grid::-webkit-scrollbar {
  width: 4px;
}
.chat-emoji-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 99px;
}
.chat-emoji-item {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-size: 21px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
  padding: 0;
  user-select: none;
}
.chat-emoji-item:hover {
  background: rgba(255, 255, 255, 0.14);
  transform: scale(1.2);
}
.chat-emoji-item:active {
  transform: scale(0.92);
}

/* --- GIF Drawer Styles --- */
.chat-gif-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  padding: 6px 12px 4px;
}
.chat-gif-search-icon {
  position: absolute;
  left: 22px;
  color: #64748b;
  pointer-events: none;
}
.chat-gif-search-input {
  width: 100%;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-size: 13px;
  padding: 0 28px 0 32px;
  outline: none;
  transition: border-color .18s, background .18s;
  box-sizing: border-box;
}
.chat-gif-search-input:focus {
  border-color: rgba(244, 63, 94, 0.55);
  background: rgba(255, 255, 255, 0.12);
}
.chat-gif-search-input::placeholder {
  color: #64748b;
}
.chat-gif-clear-btn {
  position: absolute;
  right: 22px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}

.chat-gif-cat-pills {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding: 3px 12px 5px;
  scrollbar-width: none;
  flex-shrink: 0;
  -webkit-overflow-scrolling: touch;
}
.chat-gif-cat-pills::-webkit-scrollbar {
  display: none;
}
.chat-gif-cat-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 2.5px 8px;
  font-size: 10.5px;
  font-weight: 600;
  color: #94a3b8;
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s ease;
  user-select: none;
  flex-shrink: 0;
}
.chat-gif-cat-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}
.chat-gif-cat-pill.is-active {
  background: rgba(244, 63, 94, 0.25);
  border-color: rgba(244, 63, 94, 0.6);
  color: #fecdd3;
}

.chat-gif-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 6px 12px 10px;
  overflow-y: auto;
  height: 196px;
  max-height: 196px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.chat-gif-grid::-webkit-scrollbar {
  width: 4px;
}
.chat-gif-grid::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 99px;
}
.chat-gif-item {
  position: relative;
  height: 86px;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  overflow: hidden;
  background: #1e222b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease;
  user-select: none;
  display: flex;
}
.chat-gif-item:hover {
  transform: scale(1.02);
  border-color: rgba(244, 63, 94, 0.5);
  z-index: 2;
}
.chat-gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-gif-item-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2px 5px;
  font-size: 9.5px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.chat-gif-loading {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 34px 12px;
  color: #94a3b8;
  font-size: 11.5px;
  user-select: none;
  text-align: center;
}
.chat-gif-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid rgba(244, 63, 94, 0.2);
  border-top-color: #f43f5e;
  border-radius: 50%;
  animation: gif-spinner 0.75s linear infinite;
}
@keyframes gif-spinner {
  to { transform: rotate(360deg); }
}

/* --- Attachment Preview Bar --- */
.chat-attachment-bar {
  position: relative;
  z-index: 28;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(20, 24, 32, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  animation: shelf-slide-in .18s ease both;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.45);
}
.chat-attachment-bar[hidden] {
  display: none !important;
}
.chat-attachment-preview-box {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: #11141a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  flex-shrink: 0;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease;
}
.chat-attachment-preview-box:hover {
  transform: scale(1.06);
  border-color: rgba(255, 255, 255, 0.4);
}
.chat-attachment-preview-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-attachment-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  background: rgba(0, 0, 0, 0.75);
  color: #f5c871;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 3px;
  letter-spacing: 0.03em;
}
.chat-attachment-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.chat-attachment-name {
  font-size: 12px;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-attachment-hint {
  font-size: 10.5px;
  color: #94a3b8;
  margin-top: 1px;
}
.chat-attachment-remove-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  font-size: 11px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: all .16s ease;
  flex-shrink: 0;
}
.chat-attachment-remove-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #fff;
  transform: scale(1.1);
}

/* --- Media Inside Chat Messages --- */
.chat-msg-media-wrap {
  margin-top: 4px;
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
  max-width: 165px;
  max-height: 120px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
  display: block;
}
.chat-msg-media-wrap:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.chat-msg-media-img {
  width: auto;
  max-width: 165px;
  height: auto;
  max-height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 9px;
}
.chat-msg-gif-wrap {
  border-color: rgba(244, 63, 94, 0.4);
  max-width: 155px;
  max-height: 110px;
}
.chat-msg-gif-img {
  max-width: 155px;
  max-height: 110px;
  object-fit: cover;
}
.chat-msg-gif-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 8px;
  font-weight: 800;
  padding: 1px 4.5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  pointer-events: none;
  border: 0.5px solid rgba(255, 255, 255, 0.2);
}

/* Media-only message bubble: compact sticker style */
.chat-msg-bubble.is-media-only {
  padding: 3px !important;
  background: rgba(22, 26, 34, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  border-radius: 13px !important;
  width: fit-content;
}
.chat-msg-bubble.is-media-only .chat-msg-media-wrap {
  margin-top: 0;
  border: none;
}

/* --- Apple-Style Lightbox Modal --- */
.chat-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100100 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: lightbox-fade .2s ease both;
}
.chat-lightbox[hidden] {
  display: none !important;
}
@keyframes lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.chat-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 8, 12, 0.88);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}
.chat-lightbox-dialog {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 680px);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: lightbox-zoom .24s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes lightbox-zoom {
  from { transform: scale(0.88); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.chat-lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}
.chat-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(30, 34, 42, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transition: transform .18s ease, background .18s ease;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
}
.chat-lightbox-close:hover {
  transform: scale(1.1);
  background: rgba(244, 63, 94, 0.85);
}
@media (max-width: 640px) {
  .chat-lightbox {
    padding: 12px;
  }
  .chat-lightbox-dialog {
    max-width: 96vw;
    max-height: 88vh;
  }
  .chat-lightbox-img {
    max-height: 84vh;
  }
  .chat-lightbox-close {
    top: -12px;
    right: -8px;
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

/* ==========================================================================
   Apple-Style Pop-up Message Balloon (Floats on top of the song slider)
   ========================================================================== */
.slider-balloon-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.chat-slider-balloon {
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%) translateY(5px) scale(0.88);
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .26s cubic-bezier(0.34, 1.56, 0.64, 1);
  width: max-content;
  max-width: min(340px, calc(100vw - 80px));
}
.chat-slider-balloon[hidden] {
  display: none !important;
}
.chat-slider-balloon.is-popping {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events: auto;
}
.chat-slider-balloon.is-leaving {
  opacity: 0;
  transform: translateX(-50%) translateY(4px) scale(0.92);
  transition: opacity .22s ease, transform .22s ease;
}

.chat-balloon-bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4.5px 12px 4.5px 9px;
  background: rgba(20, 22, 26, 0.94);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.72), inset 0 1px 1px rgba(255, 255, 255, 0.16);
  cursor: pointer;
  user-select: none;
  max-width: 100%;
  box-sizing: border-box;
  transition: transform .15s ease, background .2s ease;
}
.chat-balloon-bubble:hover {
  transform: scale(1.03);
  background: rgba(28, 30, 36, 0.98);
  border-color: rgba(255, 255, 255, 0.36);
}
.chat-balloon-bubble:active {
  transform: scale(0.96);
}

.chat-balloon-tail {
  position: absolute;
  bottom: -4.5px;
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 5px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: rgba(20, 22, 26, 0.96);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.chat-balloon-icon {
  font-size: 11.5px;
  line-height: 1;
  flex-shrink: 0;
}
.chat-balloon-sender {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.chat-pop-reply-tag {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
  margin-left: 2px;
}
.chat-balloon-sep {
  opacity: 0.45;
  color: #fff;
  font-size: 11px;
  flex-shrink: 0;
}
.chat-balloon-text {
  font-size: 11.5px;
  color: #f3efe6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

@media (max-width: 700px) {
  .chat-slider-balloon {
    max-width: min(280px, calc(100vw - 60px));
  }
  .chat-balloon-text {
    max-width: 130px;
  }
}
@media (max-width: 390px) {
  .chat-slider-balloon {
    max-width: min(230px, calc(100vw - 40px));
  }
  .chat-balloon-text {
    max-width: 95px;
  }
}

/* ==========================================================================
   Desktop Live Chat Overlay (Bottom-Left Corner on Computer)
   Low opacity, no background, recent 5 chats, shows for 5s on new message
   ========================================================================== */
.desktop-recent-chats {
  display: none;
}

@media (min-width: 601px) {
  /* On computer, hide the popping balloon on top of the song slider */
  .chat-slider-balloon {
    display: none !important;
  }

  .desktop-recent-chats {
    position: absolute;
    left: clamp(20px, 3.5vw, 44px);
    bottom: clamp(105px, 18vh, 185px);
    max-width: clamp(210px, 21vw, 290px);
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 35;
    pointer-events: auto;
    user-select: none;
    cursor: pointer;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
  }

  .desktop-recent-chats.is-visible {
    opacity: 0.5;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .desktop-recent-chats.is-visible.is-fading {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
  }

  .desktop-recent-chats.is-visible:hover {
    opacity: 0.9 !important;
  }

  .desktop-chat-item {
    display: flex;
    align-items: baseline;
    gap: 6.5px;
    font-size: 13.5px;
    line-height: 1.35;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #f8fafc;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.98), 0 0 14px rgba(0, 0, 0, 0.9);
    transition: opacity .2s ease, transform .2s ease;
    word-break: break-word;
  }

  .desktop-chat-item:hover {
    opacity: 1;
    color: #ffffff;
    transform: translateX(3px);
  }

  .desktop-chat-sender {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.01em;
    flex-shrink: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.98);
  }

  .desktop-chat-sender.is-me,
  .desktop-chat-item.is-me .desktop-chat-sender {
    color: #38bdf8 !important;
    font-weight: 800;
  }

  .desktop-chat-text {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: rgba(248, 250, 252, 0.92);
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.98);
  }
}

/* ==========================================================================
   Apple-Style "What's New" Dialog Box
   Minimal, professional, frosted-glass sheet popping up on loading finish
   ========================================================================== */
.whats-new-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: appleFadeIn 0.22s ease-out both;
  user-select: none;
}

.whats-new-modal[hidden] {
  display: none !important;
}

.whats-new-modal.is-closing {
  animation: appleFadeOut 0.18s ease-in forwards;
}

.whats-new-modal.is-closing .whats-new-card {
  animation: appleScaleDown 0.18s ease-in forwards;
}

.whats-new-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

.whats-new-card {
  position: relative;
  z-index: 2;
  width: min(460px, calc(100vw - 32px));
  max-height: min(86vh, 670px);
  display: flex;
  flex-direction: column;
  background: rgba(26, 28, 34, 0.85);
  backdrop-filter: blur(40px) saturate(190%);
  -webkit-backdrop-filter: blur(40px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  padding: 22px 20px 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 1px rgba(255, 255, 255, 0.3);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'DM Sans', sans-serif;
  animation: appleScaleUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-sizing: border-box;
}

.whats-new-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.12);
  color: rgba(235, 235, 245, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 3;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.whats-new-close-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  transform: scale(1.06);
}

.whats-new-close-btn:active {
  transform: scale(0.92);
}

.whats-new-header {
  padding-right: 30px;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.whats-new-title {
  margin: 0;
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
  line-height: 1.35;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.whats-new-title strong {
  font-weight: 700;
  color: #ffffff;
}

.whats-new-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(235, 235, 245, 0.68);
  font-weight: 400;
}

.whats-new-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
  flex: 1;
  min-height: 0;
}

.whats-new-body::-webkit-scrollbar {
  width: 4px;
}
.whats-new-body::-webkit-scrollbar-track {
  background: transparent;
}
.whats-new-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.whats-new-section {
  background: rgba(255, 255, 255, 0.04);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  padding: 10px 12px;
  transition: background 0.15s ease;
}

.whats-new-section:hover {
  background: rgba(255, 255, 255, 0.065);
}

.whats-new-sec-title {
  margin: 0 0 6px;
  font-size: 12.8px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.whats-new-sec-title strong {
  font-weight: 700;
  color: #ffffff;
}

.whats-new-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4.5px;
}

.whats-new-list li {
  position: relative;
  padding-left: 14px;
  font-size: 12.2px;
  line-height: 1.45;
  color: rgba(235, 235, 245, 0.82);
  font-weight: 400;
}

.whats-new-list li::before {
  content: '•';
  position: absolute;
  left: 3px;
  color: rgba(235, 235, 245, 0.45);
  font-size: 12px;
  line-height: 1.45;
}

.whats-new-list li strong {
  font-weight: 600;
  color: #ffffff;
}

.whats-new-footer-note {
  background: linear-gradient(135deg, rgba(245, 200, 113, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%);
  border: 0.5px solid rgba(245, 200, 113, 0.22);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}

.whats-new-footer-note p {
  margin: 0;
  font-size: 12.2px;
  line-height: 1.45;
  color: rgba(255, 248, 232, 0.88);
}

.whats-new-footer-note p + p {
  margin-top: 3px;
}

.whats-new-footer-note strong {
  color: #fce7b0;
  font-weight: 600;
}

.whats-new-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
}

.whats-new-dont-show-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.15s ease;
}

.whats-new-dont-show-wrap:hover {
  color: #ffffff;
}

.whats-new-dont-show-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

.whats-new-dont-show-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
  color: #ffffff;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.whats-new-dont-show-box svg {
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.whats-new-dont-show-checkbox:checked + .whats-new-dont-show-box {
  background: #0a84ff;
  border-color: #0a84ff;
}

.whats-new-dont-show-checkbox:checked + .whats-new-dont-show-box svg {
  opacity: 1;
  transform: scale(1);
}

.whats-new-dont-show-wrap:hover .whats-new-dont-show-box {
  border-color: rgba(255, 255, 255, 0.6);
}

.whats-new-action-btn {
  height: 38px;
  padding: 0 22px;
  min-width: 105px;
  border-radius: 11px;
  background: #0a84ff;
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.whats-new-action-btn:hover {
  background: #0077ed;
  box-shadow: 0 6px 18px rgba(10, 132, 255, 0.45);
  transform: translateY(-1px);
}

.whats-new-action-btn:active {
  transform: scale(0.98);
}

button.drawer-whats-new-link {
  font-family: inherit;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@keyframes appleFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes appleFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes appleScaleUp {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes appleScaleDown {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.94); }
}

@media (max-width: 480px) {
  .whats-new-card {
    width: 100%;
    padding: 18px 15px 15px;
    border-radius: 18px;
    max-height: 88vh;
  }
  .whats-new-title {
    font-size: 16px;
  }
  .whats-new-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding-top: 8px;
  }
  .whats-new-action-btn {
    width: 100%;
    height: 40px;
  }
  .whats-new-dont-show-wrap {
    justify-content: center;
    font-size: 13px;
  }
}

/* ==========================================================================
   Apple-Style Global Song Add Confirmation Modal
   ========================================================================== */
.global-add-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  padding: 18px;
  animation: appleFadeIn 0.2s ease-out both;
  user-select: none;
}

.global-add-modal[hidden] {
  display: none !important;
}

.global-add-modal.is-closing {
  animation: appleFadeOut 0.16s ease-in forwards;
}

.global-add-modal.is-closing .global-add-card {
  animation: appleScaleDown 0.16s ease-in forwards;
}

.global-add-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
}

.global-add-card {
  position: relative;
  z-index: 2;
  width: min(340px, calc(100vw - 36px));
  background: rgba(30, 32, 38, 0.88);
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  border: 0.5px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  padding: 22px 20px 18px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 1px rgba(255, 255, 255, 0.25);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'DM Sans', sans-serif;
  animation: appleScaleUp 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
  box-sizing: border-box;
}

.global-add-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 200, 113, 0.25) 0%, rgba(245, 200, 113, 0.05) 100%);
  border: 1px solid rgba(245, 200, 113, 0.4);
  font-size: 22px;
  margin-bottom: 12px;
  box-shadow: 0 0 20px rgba(245, 200, 113, 0.2);
}

.global-add-title {
  margin: 0 0 12px;
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: #ffffff;
  line-height: 1.3;
}

.global-add-song-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 12px;
  text-align: left;
}

.global-add-thumb-wrap {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  flex-shrink: 0;
}

.global-add-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.global-add-song-info {
  flex: 1;
  min-width: 0;
}

.global-add-song-title {
  font-size: 12.5px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.global-add-song-artist {
  font-size: 11px;
  color: rgba(235, 235, 245, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.global-add-desc {
  margin: 0 0 18px;
  font-size: 12.2px;
  line-height: 1.45;
  color: rgba(235, 235, 245, 0.72);
  text-align: center;
}

.global-add-desc strong {
  color: #ffffff;
  font-weight: 600;
}

.global-add-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.global-add-btn {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: -0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.global-add-btn:active {
  transform: scale(0.98);
}

.global-add-btn.confirm {
  background: #0a84ff;
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(10, 132, 255, 0.35);
}

.global-add-btn.confirm:hover {
  background: #0077ed;
  transform: translateY(-1px);
}

.global-add-btn.cancel {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(235, 235, 245, 0.85);
  font-weight: 500;
}

.global-add-btn.cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

/* ==========================================================================
   Apple-Style Admin Message Views Modal
   ========================================================================== */
.chat-views-modal {
  position: fixed;
  inset: 0;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.chat-views-modal[hidden] {
  display: none !important;
}

.chat-views-modal.is-closing {
  animation: appleFadeOut 0.18s ease forwards;
}

.chat-views-modal.is-closing .chat-views-card {
  animation: appleScaleDown 0.18s ease forwards;
}

.chat-views-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  animation: appleFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.chat-views-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: rgba(24, 27, 34, 0.88);
  backdrop-filter: blur(35px) saturate(190%);
  -webkit-backdrop-filter: blur(35px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06);
  border-radius: 22px;
  color: #ffffff;
  overflow: hidden;
  animation: appleScaleUp 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.chat-views-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 3;
}

.chat-views-close-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.chat-views-header {
  padding: 18px 20px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-views-icon-badge {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #38bdf8;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.chat-views-header-text {
  flex: 1;
  min-width: 0;
}

.chat-views-title {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.2px;
}

.chat-views-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.chat-views-quote {
  margin: 12px 18px 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.chat-views-quote-bar {
  width: 3px;
  border-radius: 3px;
  background: #38bdf8;
  flex-shrink: 0;
}

.chat-views-quote-body {
  overflow: hidden;
  flex: 1;
}

.chat-views-quote-author {
  font-size: 11.5px;
  font-weight: 600;
  color: #38bdf8;
  margin-bottom: 2px;
}

.chat-views-quote-text {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-views-list-container {
  padding: 8px 18px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.chat-views-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 8px;
  padding: 0 2px;
}

.chat-views-total-badge {
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.chat-views-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 250px;
  overflow-y: auto;
  padding-right: 4px;
}

.chat-views-list::-webkit-scrollbar {
  width: 5px;
}

.chat-views-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.chat-viewer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  transition: background 0.15s ease;
}

.chat-viewer-row:hover {
  background: rgba(255, 255, 255, 0.065);
}

.chat-viewer-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #0b0f19;
  flex-shrink: 0;
}

.chat-viewer-col {
  flex: 1;
  min-width: 0;
}

.chat-viewer-name-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.chat-viewer-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-viewer-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
  margin-top: 2px;
}

.chat-views-empty {
  text-align: center;
  padding: 28px 12px;
}

.chat-views-empty-icon {
  font-size: 30px;
  display: block;
  margin-bottom: 8px;
  opacity: 0.6;
}

.chat-views-empty-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.chat-views-empty-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.4;
}

.chat-views-actions {
  padding: 12px 18px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-views-action-btn {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  background: #0a84ff;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-views-action-btn:hover {
  background: #0071e3;
  transform: scale(0.99);
}