:root{--paper:#f5f5f0;--ink:#262b24;--muted:#92958b;--line:#e9e9e1;--green:#a9d16c;--deep:#567c3f;--white:#fff;--primary-gradient:linear-gradient(135deg, #d869a8 0%, #8757bc 50%, #3caea3 100%);--surface-card:#1e1b2e;--surface-card-alt:#252038;--surface-border:#38324f;--focus-outline:#d869a8;--mono:'DM Mono',monospace;--sans:'DM Sans',sans-serif;--display:'Manrope',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px}.app-shell{min-height: 100vh; min-height: 100dvh;display:grid;grid-template-columns:228px minmax(450px,1fr) 265px;max-width:1600px;margin:auto;background:#fbfbf8;box-shadow:0 0 50px #3a40240b}.sidebar{background:#f5f5f0;border-right:1px solid var(--line);padding:28px 16px 17px;display:flex;flex-direction:column;min-height:100vh}.brand{display:flex;align-items:center;gap:11px;font:800 20px var(--display);letter-spacing:-1px;color:var(--ink);text-decoration:none;padding:0 11px}.brand-dot,.title-period{color:#8eb95a}.brand-mark{width:26px;height:26px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-8deg)}.brand-mark i{display:block;background:#9ec96a;border-radius:5px 5px 2px 5px}.brand-mark i:nth-child(2){background:#bfdc92;border-radius:5px 5px 5px 2px}.brand-mark i:nth-child(3){background:#c8df9e;border-radius:5px 2px 5px 5px}.brand-mark i:nth-child(4){background:#77a84c;border-radius:2px 5px 5px 5px}.workspace-label,.rail-section-label,.section-kicker{font:500 9px var(--mono);letter-spacing:1.25px;color:#a1a397}.workspace-label{margin:59px 11px 13px}.room-link{width:100%;border:0;background:transparent;text-align:left;padding:11px 11px;border-radius:7px;color:#6d7168;font:500 12px var(--sans);display:flex;align-items:center;gap:8px;margin-bottom:3px;cursor:pointer}.room-link.active{background:#e9eddf;color:#36412f}.room-hash{font:500 17px var(--mono);color:#9cac87}.room-count{margin-left:auto;background:#fff;border-radius:5px;min-width:22px;text-align:center;padding:2px;font:10px var(--mono);color:#728366}.room-link.muted{color:#a2a49b}.room-link.muted .room-hash{color:#c2c3ba}.lock{margin-left:auto}.sidebar-bottom{margin-top:auto}.cooldown-card{background:#eceee6;border:1px solid #e5e8dd;border-radius:9px;padding:14px 13px 13px;margin:0 2px 22px}.cooldown-top{display:flex;gap:8px;align-items:center;font-size:10px;color:#7a8071}.cooldown-icon{font-size:16px;color:#93aa73}.cooldown-value{font:600 24px var(--display);letter-spacing:-1px;margin-top:10px}.cooldown-value small{font:400 10px var(--sans);color:#92968a;letter-spacing:0}.cooldown-card p{font-size:10px;line-height:1.5;color:#8a8f83;margin:3px 0 12px}.cooldown-track{height:3px;background:#dce2d1;border-radius:9px}.cooldown-track span{display:block;width:100%;height:100%;background:#a2c776;border-radius:9px}.profile-row{border-top:1px solid #e6e7df;padding:15px 4px 0;display:flex;align-items:center;gap:9px}.avatar{width:33px;height:33px;display:grid;place-items:center;border-radius:11px;font:600 13px var(--display);color:#4d633b;background:#d6f2a5}.profile-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.profile-copy strong{font-size:11px}.profile-copy span{font-size:9px;color:#a0a296}.dots{margin-left:auto;border:0;background:none;color:#a3a59a;font-size:18px}.main-pane{min-width:0}.topbar{height:70px;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{display:flex;gap:10px;align-items:center;font-size:11px;color:#a3a49a}.breadcrumb b{font-weight:400;color:#d4d5cc}.breadcrumb strong{font-weight:600;color:#50554a}.top-actions{display:flex;align-items:center;gap:14px}.secure-label{font:9px var(--mono);letter-spacing:.7px;color:#8c9481;display:flex;gap:7px;align-items:center}.secure-dot,.live-label span,.activity-live .live-pulse{width:6px;height:6px;background:#8fba5b;border-radius:50%}.icon-button{border:0;background:none;color:#9b9e93;font-size:17px}.invite-button{background:#30392c;color:white;border:0;border-radius:6px;padding:9px 12px;font:500 10px var(--sans);cursor:pointer}.invite-button span{font-size:15px;padding-right:4px}.room-content{max-width:790px;margin:0 auto;padding:49px 48px 24px}.room-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:36px}.eyebrow{display:flex;align-items:center;gap:8px;font:9px var(--mono);color:#98a08e;letter-spacing:1.1px}.live-pulse{width:6px;height:6px;background:#95bd67;border-radius:50%;box-shadow:0 0 0 3px #95bd671c}h1,h2,p{margin-top:0}h1{font:700 clamp(32px,4vw,42px) var(--display);letter-spacing:-2.1px;margin:14px 0 4px}h1 .title-period{font-size:46px}.subheading{font-size:12px;color:#9a9d93;margin:0}.people-pill{border:1px solid #e8e9e1;border-radius:30px;background:#fff;padding:8px 12px;font-size:10px;color:#7e8377;display:flex;gap:7px;align-items:center;margin-bottom:4px}.people-icon{color:#8eaa6e;font-size:13px}.presence-panel,.activity-panel{border:1px solid #e9eae3;border-radius:9px;background:#fff}.presence-panel{padding:23px 23px 21px;min-height:239px}.section-title-row,.activity-header{display:flex;align-items:center;justify-content:space-between}.section-kicker{font-size:8px;letter-spacing:1.3px}.section-title-row h2,.activity-header h2{font:600 17px var(--display);letter-spacing:-.5px;margin:6px 0 0}.heading-count{font:10px var(--mono);color:#9ba28e;margin-left:3px}.live-label{font:9px var(--mono);letter-spacing:.7px;color:#8d9f7c;display:flex;align-items:center;gap:7px}.people-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:25px}.empty-state{width:100%;display:flex;align-items:center;flex-direction:column;padding:6px 0 0;color:#888d82}.empty-state strong{font:500 11px var(--sans);margin-top:6px;color:#777d71}.empty-state p{font-size:10px;color:#a7a99f;margin:4px 0 0}.empty-art{width:70px;height:57px;position:relative;display:grid;place-items:center}.empty-art span{font-size:31px;color:#d4e7b8;z-index:1}.empty-art i{position:absolute;width:6px;height:6px;border-radius:50%;background:#e6eed8}.empty-art i:nth-child(2){left:8px;top:17px}.empty-art i:nth-child(3){right:11px;top:11px;width:4px;height:4px}.empty-art i:nth-child(4){right:13px;bottom:9px;width:5px;height:5px}.person-card{width:100px;display:flex;flex-direction:column;align-items:center;gap:8px;animation:pop .28s ease-out}.person-avatar{position:relative;width:53px;height:53px;border-radius:17px;display:grid;place-items:center;font:600 19px var(--display);color:#526b3b}.person-avatar:after{content:'';position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border:2px solid white;border-radius:50%;background:#87b750}.person-name{max-width:100%;font-size:10px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person-state{font:8px var(--mono);color:#a1a599;margin-top:-6px}.activity-panel{margin-top:15px;overflow:hidden}.activity-header{padding:20px 22px 16px}.activity-header h2{font-size:16px}.activity-live{display:flex;gap:7px;align-items:center;font-size:9px;color:#9a9d92}.activity-live .live-pulse{width:5px;height:5px}.feed{padding:0 22px;min-height:85px;max-height:210px;overflow:auto}.feed-empty{height:77px;display:flex;align-items:center;justify-content:center;gap:9px;color:#b0b1a8;font-size:10px}.feed-sparkle{color:#b6cf91;font-size:16px}.feed-item{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid #f2f2ed;animation:pop .2s ease-out}.feed-avatar{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;font-size:10px;color:#566746;flex:none}.feed-copy{font-size:10px;color:#71766c;line-height:1.5;flex:1}.feed-copy strong{font-weight:600;color:#42483e}.feed-copy p{margin:3px 0 0;color:#555b51;overflow-wrap:anywhere}.feed-time{font:8px var(--mono);color:#b2b4aa;white-space:nowrap}.composer{height:45px;margin:8px 14px 13px;border:1px solid #ededE7;border-radius:6px;display:flex;align-items:center;padding:0 9px;gap:8px}.composer-plus{color:#a9ae9f;font-size:18px}.composer input{border:0;outline:none;background:transparent;flex:1;font:10px var(--sans);color:#4a5045;min-width:0}.composer input::placeholder{color:#b4b6ad}.composer button{border:0;background:#30392c;color:#fff;border-radius:5px;width:27px;height:27px;font-size:15px;cursor:pointer}.composer button:disabled{background:#e5e7df;color:#a5a99c;cursor:default}.room-footer{display:flex;justify-content:space-between;padding:19px 3px;font-size:9px;color:#abadA3}.room-footer span:last-child{display:flex;align-items:center;gap:6px}.room-footer i{width:5px;height:5px;background:#a2c776;border-radius:50%}.right-rail{border-left:1px solid var(--line);padding:27px 20px;position:relative}.rail-top{display:flex;justify-content:space-between;align-items:center;color:#999d90;font:9px var(--mono);letter-spacing:1px}.rail-top button{background:none;border:0;color:#a5a79d;font-size:16px}.note-card{margin-top:25px;background:#f0f3e9;border:1px solid #e8eddf;border-radius:8px;padding:15px 13px;display:flex;gap:10px}.note-icon{color:#8fae67;font-size:17px;line-height:1}.note-card strong{font:600 10px var(--display);color:#4b5941}.note-card p{font-size:9px;color:#848b79;line-height:1.65;margin:6px 0 0}.rail-divider{height:1px;background:#e9eae3;margin:24px 0}.rail-section-label{margin-bottom:15px}.how-item{display:flex;gap:12px;margin:15px 0}.how-number{font:9px var(--mono);color:#a6bd8c;padding-top:2px}.how-item p{font-size:10px;color:#858a80;line-height:1.6;margin:0}.rail-footer{position:absolute;bottom:24px;left:20px;right:20px;display:flex;align-items:center;gap:10px;font-size:9px;color:#a2a49a}.rail-avatars{display:flex}.rail-avatars i{width:21px;height:21px;border-radius:7px;background:#e1edce;border:2px solid #fbfbf8;display:grid;place-items:center;font-style:normal;font-size:10px;color:#759154;margin-right:-5px}.rail-avatars i:nth-child(2){background:#f3e9d0}.rail-avatars i:nth-child(3){background:#e9e0f4}.modal-backdrop{position:fixed;inset:0;background:#252a2278;backdrop-filter:blur(4px);display:grid;place-items:center;z-index:10;padding:20px;opacity:1;transition:opacity .2s}.modal-backdrop.hidden{opacity:0;pointer-events:none}.join-card{background:#fff;width:min(100%,390px);padding:33px 36px 28px;border-radius:12px;box-shadow:0 24px 90px #151a1538;display:flex;flex-direction:column;animation:pop .25s ease-out}.modal-mark{margin-bottom:22px}.join-card h2{font:700 30px/1.15 var(--display);letter-spacing:-1.4px;margin:10px 0}.join-card>p{font-size:11px;color:#888d82;line-height:1.6;margin:3px 0 22px}.join-card label{font:9px var(--mono);letter-spacing:.8px;color:#8a8e82;margin-bottom:7px}.join-card input{height:42px;border:1px solid #e4e6dd;border-radius:6px;padding:0 11px;font:12px var(--sans);outline:none}.join-card input:focus{border-color:#d869a8;box-shadow:0 0 0 3px rgba(216,105,168,0.25)}.join-button{height:43px;margin-top:12px;border:0;border-radius:6px;background:var(--primary-gradient);color:#fff;font:500 11px var(--sans);cursor:pointer}.join-button span{padding-left:5px}.join-card small{text-align:center;color:#a4a69c;font-size:9px;margin-top:13px}.toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,12px);background:#252038;color:#f0ecf4;border:1px solid #4f3f63;font-size:11px;padding:10px 15px;border-radius:7px;opacity:0;pointer-events:none;transition:.2s;z-index:20;box-shadow:0 14px 40px rgba(0,0,0,0.45)}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1100px){.app-shell{grid-template-columns:205px minmax(400px,1fr)}.right-rail{display:none}.room-content{padding:42px 38px 22px}}@media(max-width:700px){.app-shell{display:block}.sidebar{min-height:auto;height:62px;padding:0 17px;flex-direction:row;align-items:center;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:18px}.workspace-label,.room-link,.cooldown-card{display:none}.sidebar-bottom{margin:0 0 0 auto}.profile-row{border:0;padding:0}.profile-copy,.dots{display:none}.avatar{width:31px;height:31px}.topbar{height:53px;padding:0 18px}.breadcrumb{font-size:10px}.secure-label,.icon-button{display:none}.invite-button{padding:8px 10px}.room-content{padding:34px 17px 20px}.room-heading{margin-bottom:25px;align-items:start;gap:8px}.eyebrow{font-size:8px}h1{font-size:32px}.subheading{font-size:11px}.people-pill{font-size:9px;padding:7px 9px;white-space:nowrap;margin-top:18px}.presence-panel{padding:18px 16px;min-height:230px}.activity-header{padding:17px 16px 13px}.feed{padding:0 16px}.composer{margin-left:10px;margin-right:10px}.room-footer{font-size:8px}.join-card{padding:29px 25px}}

button,input{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d869a8;outline-offset:3px}
button{touch-action:manipulation}
@media(max-width:420px){.topbar{padding:0 12px}.top-actions{gap:7px}.invite-button{font-size:9px;padding:8px}.privacy-button{font-size:0;padding:7px}.privacy-button::after{content:'DMs';font-size:9px}.room-heading{flex-wrap:wrap}.people-pill{margin-top:0}.room-footer{gap:10px;align-items:flex-start}.room-footer span:last-child{white-space:nowrap}}
/* motion preserved */
.notification-wrap{position:relative}.notification-button{position:relative;cursor:pointer;font-size:20px}.notification-button>span{position:absolute;top:-5px;right:-8px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--primary-gradient);box-shadow:0 2px 8px rgba(216,105,168,0.4);color:#fff;font:9px var(--mono);display:grid;place-items:center}.notification-item{width:100%;display:flex;align-items:flex-start;gap:10px;text-align:left;padding:10px 7px;border:0;border-top:1px solid #352e4a;background:transparent;color:#ded6e7;font:11px var(--sans);cursor:pointer}.notification-icon{color:#d869a8;font-size:16px}.notification-item small{display:block;color:#a79cb5;font:9px var(--mono);margin-top:4px}.contact-copy strong small{color:#d869a8;font:8px var(--mono);letter-spacing:.5px}.contact-row .contact-quiet{padding:6px 8px}


/* ==========================================================================
   APP-EXCLUSIVE FEATURES (ACTIVE ONLY INSIDE NATIVE ANDROID APP)
   ========================================================================== */

/* 1. Hide Install Banner ONLY inside App */
body.is-native-app #home-install-card,
body.is-standalone-native #home-install-card {
  display: none !important;
}

/* 2. Video Call Button ONLY inside App */
#dm-video-call {
  display: none !important;
}
body.is-native-app #dm-video-call {
  display: inline-flex !important;
}

/* 3. Instagram / WhatsApp-style Pull-to-Refresh Animation ONLY inside App */
.app-refresh-indicator {
  display: none;
}
body.is-native-app .app-refresh-indicator {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-70px) scale(0.9);
  background: rgba(19, 20, 31, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 99999;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
}
body.is-native-app .app-refresh-indicator.is-refreshing {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
.app-refresh-indicator .refresh-spinner-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.15);
  border-top-color: #6366f1;
  border-right-color: #ec4899;
  border-bottom-color: #a855f7;
  animation: appRefreshRotate 0.75s linear infinite;
}
.app-refresh-indicator .refresh-text {
  font-size: 12px;
  font-weight: 600;
  color: #f1f5f9;
  letter-spacing: 0.2px;
}
@keyframes appRefreshRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 4. Video Call Overlay Screen (App Exclusive Experience) */
.video-call-screen {
  position: fixed;
  inset: 0;
  background: #0b0c13;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.video-call-screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
}
.video-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0e0f17;
  overflow: hidden;
}
.remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #12131d;
}
.local-video-box {
  position: absolute;
  top: max(20px, env(safe-area-inset-top, 20px) + 55px);
  right: 18px;
  width: 110px;
  height: 155px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 0 2px rgba(255, 255, 255, 0.25);
  z-index: 15;
  background: #1c1d2c;
  transition: transform 0.2s ease;
  touch-action: none;
}
.local-video-box:active {
  transform: scale(0.98);
}
.local-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1);
}
.local-video-tag {
  position: absolute;
  bottom: 6px;
  left: 6px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  padding: 2px 7px;
  border-radius: 6px;
}
.video-topbar {
  position: relative;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top, 16px)) 20px 16px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}
.video-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 8px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
.video-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: videoDotPulse 1.8s infinite ease-in-out;
}
@keyframes videoDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}
.video-min-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.video-dock {
  position: relative;
  z-index: 25;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  padding: 24px 20px max(34px, env(safe-area-inset-bottom, 34px));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
}
.video-dock-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #fff;
  cursor: pointer;
  justify-content: center;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.15s, background-color 0.15s;
}
.video-dock-btn:active {
  transform: scale(0.92);
}
.video-dock-btn.is-muted {
  background: #ef4444;
  border-color: #ef4444;
}
.video-dock-btn small {
  font-size: 9px;
  line-height: 1;
  color: #e2e8f0;
}
.video-dock-btn .v-icon {
  font-size: 20px;
  line-height: 1;
}
.video-dock-end {
  background: #ef4444 !important;
  border-color: #f87171 !important;
  transform: scale(1.08);
}
.video-dock-end:active {
  transform: scale(0.98) !important;
}

/* ==========================================================================
   3D APP ICON & BRANDING
   ========================================================================== */
.brand-mark {
  width: 32px;
  height: 32px;
  display: inline-block;
  background: url('/icons/talkme-192.png') no-repeat center / contain !important;
  border-radius: 9px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 10px rgba(216, 105, 168, 0.35);
  transform: none !important;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.brand-mark:hover {
  transform: scale(1.08) rotate(2deg) !important;
}
.brand-mark i {
  display: none !important;
}
.modal-mark {
  display: flex;
  justify-content: center;
}
.modal-mark .brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 24px rgba(216, 105, 168, 0.45);
}
.install-app-icon img {
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 16px rgba(216, 105, 168, 0.3);
}

/* ==========================================================================
   CALL AUDIO ROUTE SELECTOR (EARPIECE / SPEAKER / BLUETOOTH)
   ========================================================================== */
/* ==========================================================================
   CALL AUDIO ROUTE SELECTOR (EARPIECE / SPEAKER / BLUETOOTH)
   TALKme Signature Dark-Purple / Neon Glassmorphism
   ========================================================================== */
.audio-route-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  max-width: min(92vw, 390px) !important;
  width: 100% !important;
  margin: auto !important;
  border-radius: 28px !important;
  overflow: visible !important;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: none !important;
}
.audio-route-dialog::backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  background: rgba(8, 5, 18, 0.82) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}
.audio-route-card {
  background: linear-gradient(165deg, rgba(28, 18, 48, 0.96) 0%, rgba(16, 12, 28, 0.98) 100%) !important;
  border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 28px !important;
  padding: 24px 20px 22px !important;
  color: #f1f5f9 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  max-height: 85dvh !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 30px rgba(168, 85, 247, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  contain: layout style;
}
.audio-route-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 2px;
}
.audio-route-header-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.audio-route-header h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #ffffff 40%, #c084fc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.audio-route-header-subtitle {
  font-size: 11px;
  color: #c084fc;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.audio-route-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  color: #cbd5e1;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  touch-action: manipulation;
}
.audio-route-close-btn:hover {
  background: rgba(236, 72, 153, 0.2);
  border-color: #ec4899;
  color: #fff;
  transform: rotate(90deg) scale(1.08);
}
.audio-route-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.audio-route-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid rgba(168, 85, 247, 0.18);
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  touch-action: manipulation;
  overflow: hidden;
}
.audio-route-option:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.2);
}
.audio-route-option:active {
  transform: scale(0.98);
}
.audio-route-option.is-active,
.audio-route-option.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.28) 0%, rgba(236, 72, 153, 0.28) 100%) !important;
  border-color: #ec4899 !important;
  color: #fff !important;
  box-shadow: 0 0 24px rgba(236, 72, 153, 0.35), inset 0 0 16px rgba(168, 85, 247, 0.22) !important;
}
.audio-route-option .route-icon,
.audio-route-option .route-icon-badge {
  font-size: 22px;
  line-height: 1;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.audio-route-option.is-active .route-icon,
.audio-route-option.active .route-icon,
.audio-route-option.is-active .route-icon-badge,
.audio-route-option.active .route-icon-badge {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 16px rgba(236, 72, 153, 0.5);
}
.audio-route-option .route-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audio-route-option .route-copy strong,
.audio-route-option .route-name {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  line-height: 1.25;
}
.audio-route-option .route-copy small,
.audio-route-option .route-desc {
  font-size: 12px;
  color: #a1a1aa;
  font-weight: 500;
  line-height: 1.2;
}
.audio-route-option.is-active .route-copy small,
.audio-route-option.active .route-copy small,
.audio-route-option.is-active .route-desc,
.audio-route-option.active .route-desc {
  color: #fce7f3;
}
.audio-route-option .route-check,
.audio-route-option .route-check-indicator {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
}
.audio-route-option.is-active .route-check,
.audio-route-option.active .route-check,
.audio-route-option.is-active .route-check-indicator,
.audio-route-option.active .route-check-indicator {
  border-color: transparent;
  background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  color: #fff;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.6);
  font-size: 13px;
  font-weight: 900;
}

/* --- Voice Call Controls & Audio Device Menu Layout Fix (Anti-Overlap) --- */
.voice-call-bar {
  min-height: 48px !important;
  padding: 8px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  box-sizing: border-box !important;
}

.voice-call-bar > span {
  flex: 1 1 150px !important;
  min-width: 0 !important;
  word-break: break-word !important;
}

.voice-call-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  flex-shrink: 0 !important;
  justify-content: flex-end !important;
}

.voice-call-actions button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  touch-action: manipulation !important;
}

@media (max-width: 600px) {
  .call-screen-actions {
    display: flex !important;
    justify-content: center !important;
    gap: clamp(12px, 3.5vw, 24px) !important;
    margin-top: 36px !important;
    width: 100% !important;
    max-width: 360px !important;
    box-sizing: border-box !important;
  }
  .call-screen-actions button {
    width: clamp(52px, 14vw, 68px) !important;
    height: clamp(52px, 14vw, 68px) !important;
    font-size: clamp(18px, 4.5vw, 24px) !important;
    flex-shrink: 0 !important;
  }
  .call-screen-action-labels {
    display: flex !important;
    justify-content: space-around !important;
    width: 100% !important;
    max-width: 360px !important;
    gap: 0 !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
  }
  .call-screen-action-labels span {
    flex: 1 !important;
    text-align: center !important;
    font-size: 10px !important;
  }
}

/* --- 60Hz - 120Hz Unified GPU Hardware Acceleration (App & Web) --- */
* {
  -webkit-tap-highlight-color: transparent;
}

button,
a,
input[type="button"],
input[type="submit"],
.room-link,
.profile-trigger,
.bottom-nav button,
.gift-select-item,
.exclusive-badge-chip,
.gift-times-card,
.voice-card-btn,
.music-track-item,
.story-tap-zone,
[role="button"] {
  touch-action: manipulation;
}

/* GPU Compositor layers for overlays, dialogs, cards, and floating chrome */
.modal-backdrop,
.join-card,
.incoming-call-screen,
.video-call-screen,
.audio-route-card,
.audio-route-modal-card,
.dm-thread,
.dm-sidebar,
.toast,
.app-refresh-indicator,
.user-profile-card,
.gift-picker-card,
.gift-celebration-card,
.bottom-nav {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* GPU-Accelerated Optimized Glassmorphism (Optimal 12px-14px blur + rich gradient) */
.modal-backdrop,
body.is-native-app .modal-backdrop {
  background: rgba(14, 11, 24, 0.78) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.incoming-call-screen,
body.is-native-app .incoming-call-screen {
  background: radial-gradient(circle at center, rgba(30, 27, 46, 0.94) 0%, rgba(12, 13, 20, 0.96) 100%) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.audio-route-card,
.audio-route-modal-card,
body.is-native-app .audio-route-modal-card {
  background: linear-gradient(145deg, rgba(30, 25, 45, 0.94), rgba(20, 18, 30, 0.96)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Smooth 120Hz momentum scrolling & overscroll containment */
.feed,
.people-grid,
.profile-menu,
.profile-collapsible-body,
.gift-items-grid,
.profile-badges-grid,
.profile-gifts-grid,
.music-search-results,
.hp-modal-card,
.user-profile-card,
.notification-popover,
.moment-rail {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* Dedicated high-performance DM chat scrolling (no smooth scroll jank, GPU-accelerated) */
.dm-messages,
.dm-messages-container {
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  scroll-behavior: auto !important;
}

.dm-row {
  content-visibility: visible !important;
  contain: none !important;
}

/* Layout containment for smooth 60fps-120fps scrolling */
.people-grid,
.feed,
.profile-badges-grid,
.profile-gifts-grid,
.gift-items-grid,
.voice-cards-grid,
.music-player-panel {
  contain: layout style paint;
}

/* Off-screen rendering optimization for long lists */
.dm-line,
.feed-item,
.gift-select-item,
.gift-times-card,
.exclusive-badge-chip,
.music-track-item,
.notification-item,
.contact-row:not(.actions-revealed),
.moment-person {
  content-visibility: auto;
  contain-intrinsic-size: 0 76px;
}

/* Google Authentication & Auth Divider */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 10px 0 8px;
  text-align: center;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e8eae1;
}
.auth-divider span {
  padding: 0 8px;
  font: 500 8.5px var(--mono);
  color: #9ea296;
  letter-spacing: 0.9px;
  text-transform: uppercase;
}
/* Google Authentication, Phone Auth & Auth Group */
.auth-social-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  margin: 2px 0 6px;
}
.join-card .google-auth-button,
.google-auth-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: 0 12px !important;
  background: #252038 !important;
  color: #f5eff8 !important;
  border: 1px solid #3e3656 !important;
  border-radius: 7px !important;
  font: 500 11px/1.2 var(--sans, 'DM Sans', sans-serif) !important;
  letter-spacing: 0.1px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.join-card .google-auth-button:hover,
.google-auth-button:hover {
  background: #2e2846 !important;
  border-color: #554a75 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
.join-card .google-auth-button:active,
.google-auth-button:active {
  transform: scale(0.99) !important;
  background: #352d50 !important;
}
.join-card .google-auth-button:focus-visible,
.google-auth-button:focus-visible {
  outline: none !important;
  border-color: #d869a8 !important;
  box-shadow: 0 0 0 2px rgba(216, 105, 168, 0.28) !important;
}
.join-card .google-auth-button .google-icon,
.google-auth-button .google-icon {
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  max-width: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}
.google-gis-container {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.join-card .phone-auth-button,
.phone-auth-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 5px !important;
  width: auto !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  margin: 2px auto 0 !important;
  padding: 2px 8px !important;
  background: transparent !important;
  color: #a79cb5 !important;
  border: none !important;
  border-radius: 4px !important;
  font: 500 10px var(--sans, 'DM Sans', sans-serif) !important;
  letter-spacing: 0.15px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color 0.15s ease, background 0.15s ease !important;
}
.join-card .phone-auth-button:hover,
.phone-auth-button:hover {
  color: #d869a8 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}
.join-card .phone-auth-button:focus-visible,
.phone-auth-button:focus-visible {
  outline: 2px solid #d869a8 !important;
  outline-offset: 1px !important;
}
.join-card .phone-auth-button svg,
.phone-auth-button svg {
  width: 11px !important;
  height: 11px !important;
  min-width: 11px !important;
  max-width: 11px !important;
  min-height: 11px !important;
  max-height: 11px !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  opacity: 0.9 !important;
}
:root[data-theme="light"] .join-card .google-auth-button,
:root[data-theme="light"] .google-auth-button {
  background: #ffffff !important;
  color: #2c3328 !important;
  border: 1px solid #dce2d5 !important;
  box-shadow: 0 1px 2px rgba(40, 50, 35, 0.04) !important;
}
:root[data-theme="light"] .join-card .google-auth-button:hover,
:root[data-theme="light"] .google-auth-button:hover {
  background: #f6f8f2 !important;
  border-color: #cbd2c3 !important;
  color: #1e241b !important;
  box-shadow: 0 2px 5px rgba(40, 50, 35, 0.08) !important;
}
:root[data-theme="light"] .join-card .google-auth-button:active,
:root[data-theme="light"] .google-auth-button:active {
  background: #edf1e6 !important;
}
:root[data-theme="light"] .join-card .phone-auth-button,
:root[data-theme="light"] .phone-auth-button {
  color: #616e5a !important;
}
:root[data-theme="light"] .join-card .phone-auth-button:hover,
:root[data-theme="light"] .phone-auth-button:hover {
  color: #273122 !important;
  background: rgba(0, 0, 0, 0.04) !important;
}
.phone-otp-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.phone-otp-row input {
  flex: 1;
}
.phone-otp-row button {
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  font: 500 11px var(--sans);
  cursor: pointer;
}
#recaptcha-container {
  margin: 8px 0;
}

/* ==========================================================================
   v1.9.0 Profile Custom Photo & Bio in Profile & Preferences Menu
   ========================================================================== */
.profile-photo-custom-section {
  padding: 12px 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}
.profile-photo-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.profile-photo-preview-wrap {
  flex-shrink: 0;
}
.profile-photo-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #252038;
  border: 2px solid #8b5cf6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 20px;
  color: #fff;
}
.profile-photo-circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-photo-controls {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-photo-label {
  font: 600 10px var(--mono, monospace);
  color: #a79cb5;
  letter-spacing: 0.5px;
}
.profile-photo-buttons {
  display: flex;
  gap: 8px;
}
.btn-photo-upload, .btn-photo-remove {
  padding: 6px 12px;
  border-radius: 6px;
  font: 500 11px var(--sans, sans-serif);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #2d2440;
  color: #f3eef8;
  transition: 0.15s;
}
.btn-photo-upload:hover {
  background: #3c3057;
}
.btn-photo-remove {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.btn-photo-remove:hover {
  background: rgba(239, 68, 68, 0.25);
}
#profile-menu-photo-status, #profile-menu-bio-status {
  font-size: 11px;
  margin-top: 6px;
  color: #c084fc;
}

.profile-bio-section {
  padding: 10px 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 10px;
}
.profile-bio-section label {
  display: block;
  font: 600 10px var(--mono, monospace);
  color: #a79cb5;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}
.profile-bio-section textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 8px 10px;
  font: 12px/1.4 var(--sans, sans-serif);
  color: #f3eef8;
  resize: vertical;
  outline: none;
}
.profile-bio-section textarea:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.25);
}
.profile-bio-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.btn-save-bio {
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--primary-gradient, linear-gradient(135deg, #a855f7, #ec4899));
  border: none;
  color: #fff;
  font: 600 11px var(--sans, sans-serif);
  cursor: pointer;
  transition: transform 0.1s;
}
.btn-save-bio:active {
  transform: scale(0.97);
}
.bio-char-count {
  font: 10px var(--mono, monospace);
  color: #8b7f9f;
}

/* ==========================================================================
   Instagram-Style Stories: Vibrant Gradient Ring & Pulse
   ========================================================================== */
.dm-online-avatar.has-active-story {
  position: relative !important;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
  padding: 2.5px !important;
  border-radius: 14px !important;
  border: none !important;
  box-shadow: 0 0 0 2px #13141f, 0 0 14px rgba(220, 39, 67, 0.5) !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.dm-online-avatar.has-active-story:hover {
  transform: scale(1.1) !important;
}
.dm-online-avatar.has-active-story .dm-online-inner,
.dm-online-avatar.has-active-story > span:not(i) {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  background: #1c182b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ==========================================================================
   Instagram-Style Story Creator Modal Sheet
   ========================================================================== */
dialog.story-creator-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: rgba(10, 8, 16, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: none !important;
  z-index: 10000 !important;
  box-sizing: border-box !important;
}
dialog.story-creator-modal:not([open]) {
  display: none !important;
}
dialog.story-creator-modal[open], dialog.story-creator-modal.open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
dialog.story-creator-modal::backdrop {
  background: rgba(10, 8, 16, 0.8) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}
.story-creator-sheet {
  width: min(92vw, 440px);
  max-height: 90vh;
  background: #181424;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(139, 92, 246, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalPopIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalPopIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.story-creator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.story-creator-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-creator-badge {
  font: 700 9px var(--mono, monospace);
  padding: 2px 7px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ec4899, #a855f7);
  color: #fff;
  letter-spacing: 0.5px;
}
.story-creator-header h3 {
  font: 700 17px var(--display, sans-serif);
  color: #fff;
  margin: 0;
}
.story-creator-close {
  background: none;
  border: none;
  font-size: 26px;
  color: #a79cb5;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.story-creator-close:hover {
  color: #fff;
}
.story-creator-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}
.story-preview-area {
  position: relative;
  width: 100%;
  height: 240px;
  background: #110e1a;
  border-radius: 14px;
  border: 1px dashed rgba(168, 85, 247, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.story-empty-prompt {
  text-align: center;
  color: #9d93b0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.story-camera-icon {
  font-size: 32px;
}
.story-empty-prompt strong {
  font: 600 13px var(--sans, sans-serif);
  color: #e2d9f3;
}
.story-empty-prompt p {
  font-size: 11px;
  margin: 0;
}
.story-media-preview {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.story-text-canvas {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  font: 700 18px var(--display, sans-serif);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.story-text-canvas.theme-purple { background: linear-gradient(135deg, #3b0764, #1e1b4b); }
.story-text-canvas.theme-sunset { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.story-text-canvas.theme-aurora { background: linear-gradient(135deg, #06b6d4, #8b5cf6); }
.story-text-canvas.theme-midnight { background: linear-gradient(135deg, #0f172a, #1e3a8a); }
.story-text-canvas.theme-emerald { background: linear-gradient(135deg, #047857, #10b981); }

.story-preview-remove {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.story-tool-tabs {
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
}
.story-tool-tab {
  flex: 1;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: #a79cb5;
  font: 600 12px var(--sans, sans-serif);
  border-radius: 8px;
  cursor: pointer;
  transition: 0.15s;
}
.story-tool-tab.active {
  background: #2a223f;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.story-color-palette {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-color-palette .color-label {
  font: 600 11px var(--mono, monospace);
  color: #a79cb5;
}
.story-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s;
}
.story-color-swatch:hover, .story-color-swatch.active {
  transform: scale(1.2);
  border-color: #fff;
}
.story-color-swatch.swatch-purple { background: linear-gradient(135deg, #3b0764, #1e1b4b); }
.story-color-swatch.swatch-sunset { background: linear-gradient(135deg, #f43f5e, #fb923c); }
.story-color-swatch.swatch-aurora { background: linear-gradient(135deg, #06b6d4, #8b5cf6); }
.story-color-swatch.swatch-midnight { background: linear-gradient(135deg, #0f172a, #1e3a8a); }
.story-color-swatch.swatch-emerald { background: linear-gradient(135deg, #047857, #10b981); }

.story-caption-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.story-caption-wrap textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  font: 13px/1.4 var(--sans, sans-serif);
  color: #f3eef8;
  resize: none;
  outline: none;
}
.story-caption-wrap textarea:focus {
  border-color: #a855f7;
}
.story-media-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.btn-attach-story-media {
  padding: 7px 14px;
  border-radius: 8px;
  background: #252038;
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #e5dcf4;
  font: 600 11px var(--sans, sans-serif);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-attach-story-media:hover {
  background: #352b50;
}
.story-file-name {
  font-size: 11px;
  color: #a79cb5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-creator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.story-ttl-notice {
  font: 10px var(--mono, monospace);
  color: #8b7f9f;
}
.story-creator-actions {
  display: flex;
  gap: 8px;
}
.btn-post-story {
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: #fff;
  border: none;
  font: 700 12px var(--sans, sans-serif);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
  transition: transform 0.15s;
}
.btn-post-story:hover {
  transform: translateY(-1px);
}
.btn-post-story:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.btn-story-cancel {
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #c4b5fd;
  font: 600 12px var(--sans, sans-serif);
  cursor: pointer;
  transition: 0.15s;
}
.btn-story-cancel:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ==========================================================================
   Instagram-Style Full-Screen Story Viewer Modal
   ========================================================================== */
dialog.story-viewer-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  background: #000 !important;
  display: none !important;
  z-index: 20000 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
dialog.story-viewer-modal:not([open]) {
  display: none !important;
}
dialog.story-viewer-modal[open], dialog.story-viewer-modal.open {
  display: block !important;
}
.story-viewer-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #1b162a 0%, #06050a 100%);
  opacity: 0.95;
}
.story-viewer-container {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  user-select: none;
}
.story-progress-bar-container {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  display: flex;
  gap: 5px;
  z-index: 2100;
}
.story-progress-track {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}
.story-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  border-radius: 2px;
  transition: width 0.05s linear;
}
.story-viewer-header {
  position: absolute;
  top: 24px;
  left: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2100;
  pointer-events: auto;
}
.story-viewer-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.story-viewer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #252038;
  border: 1.5px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
}
.story-viewer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story-viewer-meta {
  display: flex;
  flex-direction: column;
}
.story-viewer-meta strong {
  font: 700 13px var(--sans, sans-serif);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.story-viewer-meta span {
  font: 11px var(--mono, monospace);
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.story-viewer-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.story-delete-trigger {
  background: rgba(0, 0, 0, 0.4);
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
}
.story-viewer-close {
  background: none;
  border: none;
  font-size: 32px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.story-viewer-content {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.story-tap-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2050;
  cursor: pointer;
}
.story-tap-zone.tap-left {
  left: 0;
  width: 35%;
}
.story-tap-zone.tap-right {
  right: 0;
  width: 65%;
}
.story-viewer-media-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-viewer-media-wrap img, .story-viewer-media-wrap video {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.story-viewer-text-slide {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  box-sizing: border-box;
  text-align: center;
  font: 700 24px/1.3 var(--display, sans-serif);
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.story-viewer-caption-bar {
  position: absolute;
  bottom: 80px;
  left: 16px;
  right: 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  padding: 10px 14px;
  border-radius: 12px;
  z-index: 2100;
}
.story-viewer-caption-bar p {
  margin: 0;
  color: #fff;
  font: 500 13px/1.4 var(--sans, sans-serif);
}
.story-viewer-footer {
  position: absolute;
  bottom: 16px;
  left: 14px;
  right: 14px;
  z-index: 2100;
}
.story-reply-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  padding: 6px 14px;
}
.story-reply-box input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font: 13px var(--sans, sans-serif);
}
.story-reply-box input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.story-reply-box button {
  background: var(--primary-gradient, #a855f7);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 14px;
}

.dm-self-story-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #a855f7;
  color: #fff;
  border: 2px solid #1a1626;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  z-index: 2;
}
.dm-self-story-badge:hover {
  transform: scale(1.15);
  background: #c084fc;
}
.profile-photo-circle-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Chat Media Aspect Ratio (No Zooming or Cropping) */
.chat-media-wrap {
  margin: 6px 0;
  border-radius: 12px;
  overflow: hidden;
  max-width: min(360px, 100%);
  display: inline-block;
  background: rgba(0, 0, 0, 0.2);
}
.chat-media-img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 320px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.chat-media-img:hover {
  opacity: 0.95;
  transform: scale(1.01);
}
.chat-media-video {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 320px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  background: #000;
}

/* Full-Screen Image Viewer Modal */
dialog.image-viewer-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(10, 8, 16, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  display: none !important;
  z-index: 25000 !important;
  box-sizing: border-box !important;
}
dialog.image-viewer-modal:not([open]) {
  display: none !important;
}
dialog.image-viewer-modal[open], dialog.image-viewer-modal.open {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
dialog.image-viewer-modal::backdrop {
  background: rgba(10, 8, 16, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* ==========================================================================
   v1.9.8: MOBILE KEYBOARD SCROLLING & AUTH CARD RESPONSIVENESS
   ========================================================================== */
#join-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 24px 16px 160px 16px !important;
  background: rgba(10, 8, 18, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#join-modal.hidden {
  display: none !important;
}

#auth-form.join-card {
  margin: auto !important;
  width: min(100%, 420px) !important;
  max-height: none !important;
  overflow: visible !important;
  background: linear-gradient(135deg, rgba(28, 22, 48, 0.96), rgba(18, 14, 32, 0.98)) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(168, 85, 247, 0.15) !important;
  padding: 28px 24px 28px !important;
  box-sizing: border-box !important;
}

/* Glowing Segmented Toggle Tabs */
.auth-segmented-tabs {
  display: flex !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 14px 0 10px 0 !important;
  padding: 4px !important;
  background: rgba(16, 12, 28, 0.75) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

.auth-tab-btn {
  flex: 1 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: #a79cb5 !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
}

.auth-tab-btn:hover {
  color: #f5eff8 !important;
}

.auth-tab-btn.active {
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 14px rgba(168, 85, 247, 0.45) !important;
}

/* Prominent Neon Guest Access Button */
.guest-trial-btn {
  width: 100% !important;
  margin: 6px 0 12px 0 !important;
  padding: 10px 14px !important;
  background: linear-gradient(135deg, rgba(37, 24, 66, 0.88), rgba(24, 16, 46, 0.94)) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.guest-trial-btn:hover {
  border-color: #c084fc !important;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.4) !important;
  transform: translateY(-1px) !important;
}

.guest-btn-badge {
  display: inline-block !important;
  font: 700 8.5px var(--mono) !important;
  letter-spacing: 0.8px !important;
  color: #38bdf8 !important;
  background: rgba(56, 189, 248, 0.15) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  width: fit-content !important;
}

.guest-btn-main {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.guest-btn-icon {
  font-size: 20px !important;
  line-height: 1 !important;
}

.guest-btn-text {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.guest-btn-text strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #f3e8ff !important;
  letter-spacing: 0.2px !important;
}

.guest-btn-text small {
  font-size: 10px !important;
  color: #c084fc !important;
}

.guest-btn-arrow {
  font-size: 16px !important;
  color: #a855f7 !important;
  font-weight: 700 !important;
}

/* ==========================================================================
   STICKY GUEST COUNTDOWN BANNER
   ========================================================================== */
.guest-countdown-banner {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 16px !important;
  background: linear-gradient(90deg, #4c1d95, #701a75) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(216, 180, 254, 0.35) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

.guest-countdown-banner[hidden] {
  display: none !important;
}

.guest-banner-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.guest-banner-pulsar {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #facc15 !important;
  box-shadow: 0 0 10px #facc15 !important;
  animation: pulse-ring 1.8s infinite !important;
}

.guest-banner-txt {
  font-size: 12px !important;
  color: #faf5ff !important;
  font-weight: 500 !important;
}

.guest-banner-txt strong {
  color: #fde047 !important;
  font-family: var(--mono) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.btn-guest-upgrade {
  background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4) !important;
  transition: transform 0.15s !important;
}

.btn-guest-upgrade:hover {
  transform: scale(1.04) !important;
}

/* ==========================================================================
   UPSELL & ONBOARDING SPOTLIGHT MODALS
   ========================================================================== */
.guest-upsell-dialog,
.onboarding-tour-dialog,
.guest-expired-dialog {
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
}

.guest-upsell-content,
.onboarding-tour-content,
.guest-expired-content {
  width: min(92vw, 420px) !important;
  margin: auto !important;
  background: linear-gradient(135deg, rgba(26, 18, 46, 0.98), rgba(16, 11, 30, 0.99)) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.8), 0 0 35px rgba(168, 85, 247, 0.25) !important;
  padding: 26px 22px !important;
  color: #f5eff8 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.upsell-badge,
.tour-badge {
  display: inline-block !important;
  font: 700 9px var(--mono) !important;
  letter-spacing: 1px !important;
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.18) !important;
  padding: 3px 10px !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
}

.guest-upsell-content h2,
.onboarding-tour-content h2,
.guest-expired-content h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  margin: 0 0 8px 0 !important;
  color: #ffffff !important;
}

.guest-upsell-content p,
.onboarding-tour-content p,
.guest-expired-content p {
  font-size: 12px !important;
  color: #c4b5fd !important;
  line-height: 1.5 !important;
  margin: 0 0 16px 0 !important;
}

.upsell-perks {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.upsell-perks li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 12px !important;
  color: #f3e8ff !important;
  background: rgba(36, 26, 62, 0.6) !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
}

.perk-icon {
  font-size: 16px !important;
}

.upsell-actions,
.tour-actions {
  display: flex !important;
  gap: 10px !important;
  width: 100% !important;
}

.btn-upsell-primary,
.btn-tour-next {
  flex: 1 !important;
  padding: 11px 16px !important;
  background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.45) !important;
  transition: transform 0.15s !important;
}

.btn-upsell-primary:hover,
.btn-tour-next:hover {
  transform: translateY(-1px) !important;
}

.btn-upsell-secondary,
.btn-tour-prev {
  padding: 11px 16px !important;
  background: rgba(36, 26, 62, 0.7) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.tour-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 12px !important;
}

.btn-tour-skip {
  background: transparent !important;
  border: none !important;
  color: #9333ea !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

.tour-icon-halo {
  font-size: 42px !important;
  margin: 8px auto 14px !important;
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.35) 0%, rgba(168, 85, 247, 0.05) 70%) !important;
  border: 1px solid rgba(168, 85, 247, 0.4) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.3) !important;
}

.tour-dots {
  display: flex !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 16px 0 !important;
}

.tour-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(168, 85, 247, 0.3) !important;
  transition: all 0.2s ease !important;
}

.tour-dot.active {
  width: 22px !important;
  border-radius: 4px !important;
  background: #a855f7 !important;
  box-shadow: 0 0 8px #a855f7 !important;
}

.expired-icon {
  font-size: 46px !important;
  margin-bottom: 12px !important;
}

/* ==========================================================================
   TOPBAR & NOTIFICATION POPOVER ROOT-LEVEL OVERLAY
   ========================================================================== */
.topbar {
  position: relative;
  z-index: 30;
}

body.dm-open .topbar,
body.dm-open .sidebar {
  display: none !important;
}

#dm-panel:not(.hidden) {
  z-index: 10000 !important;
}

.notification-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999998 !important;
  background: rgba(10, 8, 20, 0.65) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  transition: opacity 0.2s ease !important;
}

.notification-backdrop[hidden] {
  display: none !important;
}

@keyframes notifSlideDown {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.notification-popover {
  position: fixed !important;
  z-index: 999999 !important;
  top: max(60px, calc(env(safe-area-inset-top, 0px) + 52px)) !important;
  right: max(14px, env(safe-area-inset-right, 14px)) !important;
  width: min(370px, calc(100vw - 28px)) !important;
  max-height: min(76vh, 560px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  background: linear-gradient(145deg, rgba(22, 16, 40, 0.97) 0%, rgba(13, 10, 24, 0.98) 100%) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.85), 0 0 35px rgba(168, 85, 247, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: #f0ecf4 !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  animation: notifSlideDown 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

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

.notification-heading {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 12px !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.16) !important;
  background: transparent !important;
}

.notification-heading strong {
  font: 800 15px/1.2 var(--display) !important;
  background: linear-gradient(135deg, #ffffff 0%, #e9d5ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.notification-heading div {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

#clear-notifications {
  background: rgba(239, 68, 68, 0.12) !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  color: #fca5a5 !important;
  font: 600 10px var(--sans) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#clear-notifications:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

#push-test-button {
  background: rgba(168, 85, 247, 0.14) !important;
  border: 1px solid rgba(168, 85, 247, 0.32) !important;
  color: #e9d5ff !important;
  font: 600 10px var(--sans) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#push-test-button:hover:not(:disabled) {
  background: rgba(168, 85, 247, 0.28) !important;
  color: #fff !important;
}

#push-enable-button {
  background: linear-gradient(135deg, #a855f7, #6366f1) !important;
  border: 0 !important;
  color: #fff !important;
  font: 600 10px var(--sans) !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(168, 85, 247, 0.35) !important;
  transition: all 0.15s ease !important;
}

#push-enable-button:hover:not(:disabled) {
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
}

.notification-heading button:disabled {
  opacity: 0.4 !important;
  cursor: default !important;
  pointer-events: none !important;
}

.notification-sound-setting {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 9px 12px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(168, 85, 247, 0.16) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  font-size: 11px !important;
  color: #ded6e7 !important;
}

.notification-sound-setting button {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.25)) !important;
  border: 1px solid rgba(34, 197, 94, 0.45) !important;
  color: #86efac !important;
  font: 700 10px var(--mono) !important;
  padding: 4px 11px !important;
  border-radius: 20px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.notification-sound-setting button:hover {
  filter: brightness(1.12) !important;
}

.notification-friend-requests {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(168, 85, 247, 0.08)) !important;
  border: 1px solid rgba(236, 72, 153, 0.28) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin-bottom: 12px !important;
}

.notification-friend-requests-heading {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font: 700 11px var(--mono) !important;
  color: #f472b6 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.notification-friend-requests-heading span {
  background: rgba(236, 72, 153, 0.2) !important;
  color: #fbcfe8 !important;
  padding: 2px 7px !important;
  border-radius: 10px !important;
  font-size: 9px !important;
}

.notification-request-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.notification-request-row:last-child {
  border-bottom: 0 !important;
}

.notification-request-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(168, 85, 247, 0.25) !important;
  display: grid !important;
  place-items: center !important;
  font: 600 12px var(--sans) !important;
  color: #f5eff8 !important;
}

.notification-request-copy {
  flex: 1 !important;
  min-width: 0 !important;
}

.notification-request-copy strong {
  display: block !important;
  font: 600 12px var(--sans) !important;
  color: #f8fafc !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.notification-request-copy small {
  display: block !important;
  font: 10px var(--mono) !important;
  color: #a79cb5 !important;
}

.notification-request-row button {
  padding: 5px 11px !important;
  border-radius: 8px !important;
  font: 600 10px var(--sans) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.notification-request-row button:not(.notification-request-ignore) {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 0 !important;
  color: #fff !important;
}

.notification-request-row button.notification-request-ignore {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #cbd5e1 !important;
}

.notification-item {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-align: left !important;
  padding: 12px 13px !important;
  margin-bottom: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  border: 1px solid rgba(168, 85, 247, 0.18) !important;
  border-radius: 14px !important;
  color: #f5eff8 !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  box-sizing: border-box !important;
}

.notification-item:hover {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(216, 105, 168, 0.12)) !important;
  border-color: rgba(216, 105, 168, 0.45) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.notification-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(216, 105, 168, 0.18)) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 17px !important;
  color: #f472b6 !important;
  flex-shrink: 0 !important;
}

.notification-copy {
  flex: 1 !important;
  min-width: 0 !important;
}

.notification-copy strong {
  font: 600 12.5px/1.35 var(--sans) !important;
  color: #f8fafc !important;
  display: block !important;
  margin-bottom: 3px !important;
  overflow-wrap: anywhere !important;
}

.notification-copy small {
  font: 10px/1.4 var(--mono) !important;
  color: #c4b5d0 !important;
  display: block !important;
}

.notification-copy small time {
  color: #a78bfa !important;
  margin-left: 4px !important;
}

.notification-item b {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  padding: 4px 10px !important;
  border-radius: 8px !important;
  background: rgba(168, 85, 247, 0.18) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  color: #e9d5ff !important;
  font: 600 10px var(--sans) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.notification-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 34px 16px !important;
  text-align: center !important;
  gap: 8px !important;
}

.notification-empty span {
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(216, 105, 168, 0.15)) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 22px !important;
  color: #d8b4fe !important;
  margin-bottom: 4px !important;
}

.notification-empty strong {
  font: 700 13px var(--display) !important;
  color: #f5eff8 !important;
}

.notification-empty small {
  font: 11px/1.45 var(--sans) !important;
  color: #a79cb5 !important;
  max-width: 230px !important;
}

.push-app-only-note {
  font-size: 10px !important;
  line-height: 1.45 !important;
  color: #948aa5 !important;
  margin: 12px 0 0 0 !important;
  padding: 8px 10px !important;
  background: rgba(168, 85, 247, 0.06) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(168, 85, 247, 0.16) !important;
}

/* ==========================================================================
   30-SECOND PRIVACY BLUR FOR OFFLINE PEER MESSAGES
   ========================================================================== */
.dm-line.offline-message {
  opacity: 0.72 !important;
  transition: opacity 0.3s ease, filter 0.3s ease !important;
}

.dm-line.offline-message p,
.dm-line.offline-message .dm-media,
.dm-line.offline-message .dm-voice-note,
.dm-line.offline-message .dm-gift-card {
  filter: blur(6px) !important;
  -webkit-filter: blur(6px) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none !important;
  transition: filter 0.3s ease !important;
}

/* Enhanced Offline Media Privacy (30-Second Cooldown) */
.dm-line.offline-message .chat-media-wrap {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  pointer-events: none !important;
}

.dm-line.offline-message .chat-media-img,
.dm-line.offline-message .chat-media-video {
  filter: blur(18px) !important;
  -webkit-filter: blur(18px) !important;
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  transition: filter 0.4s ease !important;
}

.dm-line.offline-message .chat-media-privacy-badge {
  display: flex !important;
}

.chat-media-privacy-badge {
  display: none;
  position: absolute;
  inset: 0;
  margin: auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: 90%;
  height: fit-content;
  padding: 8px 14px;
  background: rgba(18, 14, 28, 0.9);
  border: 1px solid rgba(255, 60, 172, 0.45);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.65);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  z-index: 5;
  pointer-events: none;
  backdrop-filter: blur(4px);
}

.dm-line.offline-message .chat-pdf-card .chat-pdf-link {
  display: none !important;
}

.dm-line.offline-message .chat-file-locked-placeholder {
  display: flex !important;
}

.chat-file-locked-placeholder {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(25, 20, 38, 0.9);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  font-size: 12px;
  color: #bbb;
  font-weight: 500;
}

.dm-line:not(.offline-message) p,
.dm-line:not(.offline-message) .dm-media,
.dm-line:not(.offline-message) .dm-voice-note,
.dm-line:not(.offline-message) .dm-gift-card,
.dm-line:not(.offline-message) .chat-media-img {
  filter: none !important;
  -webkit-filter: none !important;
  user-select: auto !important;
  -webkit-user-select: auto !important;
  pointer-events: auto !important;
  transition: filter 0.4s ease !important;
}

/* ==========================================================================
   PUBLIC TALK LOUNGE: TYPING INDICATOR, REACTIONS, TICKER & STREAK RECOVERY
   ========================================================================== */
.lounge-typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin: 0 0 8px 0;
  background: rgba(26, 20, 42, 0.9);
  border: 1px solid rgba(139, 92, 246, 0.35);
  border-radius: 20px;
  font-size: 11.5px;
  color: #e9d5ff;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  width: fit-content;
}

.lounge-typing-indicator.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lounge-typing-avatars {
  display: flex;
  align-items: center;
  margin-right: 2px;
}

.lounge-typing-chip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: #120e1c;
  margin-left: -5px;
  border: 1.5px solid #1a142a;
}

.lounge-typing-chip:first-child {
  margin-left: 0;
}

.lounge-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}

.lounge-typing-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c084fc;
  animation: typingDotPulse 1.4s infinite ease-in-out;
}

.lounge-typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.lounge-typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingDotPulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1.2); opacity: 1; }
}


/* ==========================================================================
   STATIONARY REACTION MICRO-INTERACTIONS & FIXED HIGH-CONTRAST COUNTERS
   ========================================================================== */

@keyframes scaleBounce {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); }
  65% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.reaction-popping {
  animation: scaleBounce 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}

.lounge-reactions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  margin-bottom: 6px;
  position: relative;
  z-index: 10;
}

.lounge-reactions-label {
  font-size: 11px;
  font-weight: 800;
  color: #9c90af;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.lounge-quick-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lounge-reaction-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(30, 24, 48, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 14.5px;
  cursor: pointer;
  transition: all 0.18s ease;
  outline: none;
  user-select: none;
  position: relative;
}

.lounge-reaction-btn:hover {
  background: rgba(139, 92, 246, 0.32);
  border-color: rgba(139, 92, 246, 0.65);
  transform: translateY(-1px);
}
.lounge-reaction-btn:active {
  transform: translateY(0);
}

.reaction-counter,
.reaction-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  color: #ffffff;
  font-family: var(--mono, monospace);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  white-space: nowrap;
  margin-left: 3px;
  flex-shrink: 0;
}

@keyframes badgePopAnim {
  0% { transform: scale(1); }
  45% { transform: scale(1.36); }
  100% { transform: scale(1); }
}

.badge-pop {
  animation: badgePopAnim 220ms cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Fluid & Engaging Floating Reaction Bubble (Rises directly from clicked icon) */
.live-reaction-bubble {
  position: fixed !important;
  z-index: 999999 !important;
  pointer-events: none !important;
  user-select: none !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  line-height: 1 !important;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.45) 0%, rgba(168, 85, 247, 0.48) 45%, rgba(236, 72, 153, 0.35) 80%, rgba(24, 16, 42, 0.25) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 24px rgba(168, 85, 247, 0.5), 0 0 16px rgba(236, 72, 153, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.6) !important;
  will-change: transform, opacity !important;
  animation: reactionBubbleFloat 850ms cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;
}

@keyframes reactionBubbleFloat {
  0% {
    transform: translate3d(var(--bubble-x, 0px), var(--bubble-y, 0px), 0) scale(0.25) rotate(0deg);
    opacity: 0;
  }
  15% {
    transform: translate3d(var(--bubble-x, 0px), calc(var(--bubble-y, 0px) - 20px), 0) scale(1.32) rotate(var(--bubble-rot, 0deg));
    opacity: 1;
  }
  35% {
    transform: translate3d(calc(var(--bubble-x, 0px) + var(--bubble-drift-mid, 0px)), calc(var(--bubble-y, 0px) - 52px), 0) scale(1.05) rotate(calc(var(--bubble-rot, 0deg) * -0.5));
    opacity: 0.98;
  }
  75% {
    transform: translate3d(calc(var(--bubble-x, 0px) + var(--bubble-drift-end, 0px)), calc(var(--bubble-y, 0px) - 98px), 0) scale(0.95);
    opacity: 0.9;
  }
  100% {
    transform: translate3d(calc(var(--bubble-x, 0px) + var(--bubble-drift-end, 0px)), calc(var(--bubble-y, 0px) - 128px), 0) scale(0.7);
    opacity: 0;
  }
}

/* 1. Voice Lounge Reactions Dock (Spacious, beautifully framed, stationary micro-interactions) */
.voice-reactions-dock {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 20px !important;
  margin: 16px 0 14px 0 !important;
  background: linear-gradient(135deg, rgba(28, 20, 46, 0.96), rgba(18, 14, 30, 0.98)) !important;
  border: 1px solid rgba(139, 92, 246, 0.35) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.reactions-dock-label {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 1.2px !important;
  color: #c084fc !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  user-select: none !important;
}
.reactions-dock-label::before {
  content: '✨';
  font-size: 12px;
}

.reactions-buttons-row {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  overflow: visible !important;
  scrollbar-width: none !important;
}
.reactions-buttons-row::-webkit-scrollbar {
  display: none !important;
}

.btn-voice-reaction {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  background: rgba(45, 34, 72, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 999px !important;
  padding: 5px 10px !important;
  min-width: 48px !important;
  height: 38px !important;
  color: #ffffff !important;
  cursor: pointer !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.15s, border-color 0.15s !important;
  user-select: none !important;
  outline: none !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
}

.btn-voice-reaction .reaction-emoji {
  font-size: 17px !important;
  line-height: 1 !important;
  display: inline-block !important;
}

.btn-voice-reaction .reaction-count-badge,
.reaction-count-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #a855f7, #ec4899) !important;
  color: #ffffff !important;
  font-family: var(--mono, monospace) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  margin-left: 2px !important;
  flex-shrink: 0 !important;
  border: none !important;
}

.btn-voice-reaction:hover {
  background: rgba(139, 92, 246, 0.35) !important;
  border-color: rgba(139, 92, 246, 0.65) !important;
  transform: scale(1.08) !important;
}

.btn-voice-reaction:active,
.btn-voice-reaction.reaction-popping {
  transform: scale(1.22) !important;
  background: rgba(139, 92, 246, 0.5) !important;
  border-color: rgba(236, 72, 153, 0.75) !important;
}

@media (max-width: 480px) {
  .reactions-buttons-row {
    gap: 5px !important;
  }
  .btn-voice-reaction {
    padding: 4px 7px !important;
    min-width: 42px !important;
    height: 34px !important;
    gap: 3px !important;
  }
  .btn-voice-reaction .reaction-emoji {
    font-size: 15px !important;
  }
  .btn-voice-reaction .reaction-count-badge {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    padding: 0 4px !important;
  }
}

/* Eliminate floating particle overlays */
.floating-reaction-container,
.floating-reaction-item,
.floating-reaction,
.voice-reactions-stage {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  animation: none !important;
}

/* 2. Dynamic Mock User Simulation & Seamless Real-User Replacement Animations */
@keyframes mockSwapOut {
  0% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(5px);
  }
}

@keyframes mockSwapIn {
  0% {
    opacity: 0;
    transform: scale(0.88);
    filter: blur(5px);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    box-shadow: none;
  }
}

.mock-swapping-out {
  animation: mockSwapOut 220ms cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none !important;
}

.mock-swapping-in {
  animation: mockSwapIn 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.person-card.is-mock,
.voice-user-bubble.is-mock,
.moment-person.is-mock {
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}


.lounge-toast-ticker {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin: 0 0 10px 0;
  background: linear-gradient(135deg, rgba(30, 20, 50, 0.9), rgba(15, 10, 30, 0.95));
  border: 1px solid rgba(255, 60, 172, 0.35);
  border-radius: 20px;
  font-size: 11.5px;
  color: #f5eff8;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: fit-content;
}

.lounge-toast-ticker.active {
  opacity: 1;
  transform: translateY(0);
}

.ticker-pulse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  animation: tickerPulse 2s infinite ease-in-out;
}

@keyframes tickerPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 2px #ec4899); }
  50% { transform: scale(1.25); filter: drop-shadow(0 0 8px #ec4899); }
}

/* Streak Recovery UI - Spacious & Accessible */
.streak-recovery-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(24, 18, 38, 0.85);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 14px;
}

.streak-recovery-info {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: #ddd;
}

.streak-recovery-shield {
  font-size: 28px;
  line-height: 1;
}

.streak-recovery-info strong {
  display: block;
  color: #fde68a;
  font-size: 15px;
  margin-bottom: 2px;
}

.streak-recovery-info p {
  margin: 3px 0 0;
  color: #b0a4c5;
  font-size: 13px;
}

.streak-recover-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  min-height: 42px;
}

.streak-recover-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

.streak-recover-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ==========================================================================
   STUDIO AUDIO NOW PLAYING & PROGRESS BAR
   ========================================================================== */
.music-track-art-wrapper {
  position: relative !important;
  width: 62px !important;
  height: 62px !important;
  flex-shrink: 0 !important;
}

.voice-music-album-art {
  width: 62px !important;
  height: 62px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 4px 18px rgba(168, 85, 247, 0.35) !important;
  display: block !important;
}

.music-progress-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.music-time-txt {
  font: 600 10px var(--mono) !important;
  color: #c4b5fd !important;
  min-width: 34px !important;
}

.music-progress-track {
  flex: 1 !important;
  height: 6px !important;
  background: rgba(36, 26, 62, 0.8) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  position: relative !important;
}

.music-progress-fill {
  height: 100% !important;
  background: linear-gradient(90deg, #a855f7, #ec4899) !important;
  border-radius: 4px !important;
  transition: width 0.15s linear !important;
}





/* ==========================================================================
   FULL-SCREEN PRIVATE CALL OVERLAY & 6-BUTTON CONTROL BAR (ISSUE 4 FIX)
   ========================================================================== */
.incoming-call-screen,
.call-fullscreen-overlay,
#call-modal,
#incoming-call-screen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  height: 100dvh !important;
  width: 100vw !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)) !important;
  background: radial-gradient(circle at 50% 28%, #281a42 0%, #151025 55%, #090712 100%) !important;
  color: #f5f3ff !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

body.is-native-app .incoming-call-screen.hidden,
body.is-native-app .incoming-call-screen[hidden],
body.is-native-app section.incoming-call-screen.hidden,
body.is-native-app section.incoming-call-screen[hidden],
section.incoming-call-screen.hidden,
section.incoming-call-screen[hidden],
.incoming-call-screen.hidden,
.incoming-call-screen[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.call-screen-topbar {
  width: 100% !important;
  max-width: 460px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 4px 6px !important;
  box-sizing: border-box !important;
  z-index: 3 !important;
}

.call-screen-top-min-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  color: #e2e8f0 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.call-screen-top-min-btn:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: scale(1.08) !important;
}

.incoming-call-person {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: auto 0 !important;
  padding: 12px 10px !important;
  box-sizing: border-box !important;
}

.incoming-call-avatar-wrap {
  position: relative !important;
  margin: 0 auto 16px !important;
  display: grid !important;
  place-items: center !important;
}

.incoming-call-avatar {
  width: clamp(108px, 28vw, 140px) !important;
  height: clamp(108px, 28vw, 140px) !important;
  border-radius: 50% !important;
  border: 4px solid rgba(216, 105, 168, 0.45) !important;
  background: linear-gradient(145deg, #d869a8, #8757bc) !important;
  box-shadow: 0 0 0 12px rgba(216, 105, 168, 0.16), 0 0 50px rgba(216, 105, 168, 0.38) !important;
  color: #ffffff !important;
  font: 700 clamp(40px, 9.5vw, 54px) var(--display, sans-serif) !important;
  display: grid !important;
  place-items: center !important;
  animation: incoming-avatar-pulse 2.2s ease-out infinite !important;
  overflow: hidden !important;
}

.incoming-call-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.incoming-call-label {
  color: #38bdf8 !important;
  font-family: var(--mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.incoming-call-person h2 {
  margin: 6px 0 8px !important;
  color: #ffffff !important;
  font-size: clamp(24px, 6vw, 34px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

.incoming-call-person p {
  margin: 0 !important;
  color: #cbd5e1 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  max-width: 320px !important;
}

.call-screen-timer-wrap {
  margin-top: 12px !important;
  min-height: 32px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.call-screen-timer {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 16px !important;
  border-radius: 999px !important;
  background: rgba(16, 185, 129, 0.12) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #6ee7b7 !important;
  font-family: var(--mono, monospace) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
}

/* Incoming Ringing Actions */
.incoming-call-actions-group {
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
  z-index: 3 !important;
}

.incoming-call-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 58px !important;
  margin-top: 12px !important;
}

.incoming-call-actions button {
  width: 66px !important;
  height: 66px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  font-size: 26px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
  transition: transform 0.16s ease, filter 0.16s ease !important;
}

.incoming-call-actions button:hover {
  transform: scale(1.08) !important;
}

.incoming-call-decline {
  background: #dc2626 !important;
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.5) !important;
}

.incoming-call-answer {
  background: #059669 !important;
  box-shadow: 0 8px 24px rgba(5, 150, 105, 0.5) !important;
  transform: rotate(-20deg) !important;
}

.incoming-call-answer:hover {
  transform: rotate(-20deg) scale(1.08) !important;
}

.incoming-call-action-labels {
  display: flex !important;
  justify-content: center !important;
  gap: 82px !important;
  margin-top: 10px !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Active In-Call Bottom Control Bar (6 Buttons) */
.call-screen-active-bar {
  width: 100% !important;
  max-width: 480px !important;
  margin: 0 auto !important;
  padding: 10px 4px !important;
  box-sizing: border-box !important;
  z-index: 100000 !important;
}

.call-screen-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: clamp(8px, 2.6vw, 16px) !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.call-action-col {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  width: clamp(48px, 13vw, 62px) !important;
  flex-shrink: 0 !important;
}

.call-action-btn {
  width: clamp(48px, 13vw, 58px) !important;
  height: clamp(48px, 13vw, 58px) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #ffffff !important;
  font-size: clamp(20px, 5vw, 24px) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.call-action-btn:hover {
  transform: translateY(-2px) scale(1.06) !important;
  background: rgba(255, 255, 255, 0.18) !important;
}

.call-action-btn:active {
  transform: scale(0.94) !important;
}

.call-action-btn.is-muted {
  background: rgba(239, 68, 68, 0.3) !important;
  border-color: rgba(239, 68, 68, 0.75) !important;
  color: #fca5a5 !important;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.45) !important;
}

.call-action-btn.is-active,
.call-action-btn.active {
  background: rgba(168, 85, 247, 0.3) !important;
  border-color: rgba(168, 85, 247, 0.8) !important;
  color: #f3e8ff !important;
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.5) !important;
}

.call-action-btn-gift {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.25)) !important;
  border-color: rgba(244, 114, 182, 0.45) !important;
}

.call-screen-end {
  background: #dc2626 !important;
  border-color: #ef4444 !important;
  box-shadow: 0 6px 20px rgba(220, 38, 38, 0.5) !important;
}

.call-screen-end:hover {
  background: #b91c1c !important;
  transform: translateY(-2px) scale(1.06) !important;
}

.call-action-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #cbd5e1 !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
}

/* Floating PiP Call Bubble (Accessible over chats and lounges) */
.call-mini-player {
  position: fixed !important;
  z-index: 100002 !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  max-width: min(390px, calc(100vw - 24px)) !important;
  padding: 10px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(168, 85, 247, 0.38) !important;
  background: linear-gradient(135deg, rgba(32, 26, 48, 0.95), rgba(18, 15, 30, 0.98)) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  color: #f0ecf4 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 0 20px rgba(168, 85, 247, 0.2) !important;
  animation: incoming-call-appear 0.2s ease-out !important;
}

body.is-native-app .call-mini-player.hidden,
body.is-native-app .call-mini-player[hidden],
body.is-native-app aside.call-mini-player.hidden,
body.is-native-app aside.call-mini-player[hidden],
aside.call-mini-player.hidden,
aside.call-mini-player[hidden],
.call-mini-player.hidden,
.call-mini-player[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}


/* Explicit visibility & pointer-events fixes for incoming and active call states */
.incoming-call-screen:not(.hidden):not([hidden]),
.call-fullscreen-overlay:not(.hidden):not([hidden]),
#call-modal:not(.hidden):not([hidden]) {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.is-native-app .call-fullscreen-overlay.hidden,
body.is-native-app .call-fullscreen-overlay[hidden],
body.is-native-app #call-modal.hidden,
body.is-native-app #call-modal[hidden],
.call-fullscreen-overlay.hidden,
.call-fullscreen-overlay[hidden],
#call-modal.hidden,
#call-modal[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.call-mini-player:not(.hidden):not([hidden]) {
  display: flex !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.call-screen-active-bar:not(.hidden):not([hidden]) {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.incoming-call-actions-group:not(.hidden):not([hidden]) {
  display: block !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.call-screen-active-bar.hidden,
.call-screen-active-bar[hidden],
div.call-screen-active-bar.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.incoming-call-actions-group.hidden,
.incoming-call-actions-group[hidden],
div.incoming-call-actions-group[hidden] {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.incoming-call-screen.hidden,
.incoming-call-screen[hidden],
section.incoming-call-screen.hidden {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.incoming-call-actions-group {
  position: relative !important;
  z-index: 100001 !important;
  pointer-events: auto !important;
}

.incoming-call-actions {
  pointer-events: auto !important;
}

.incoming-call-actions button {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 100002 !important;
}

.call-screen-top-min-btn {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  position: relative !important;
  z-index: 100002 !important;
}

/* ==========================================================================
   VOICE LOUNGE YOUTUBE MUSIC SEARCH & RESULTS (DARK-NEON THEME)
   ========================================================================== */
.voice-music-search-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 12px 0 8px !important;
  box-sizing: border-box !important;
}

.voice-music-search-row input {
  flex: 1 !important;
  background: rgba(18, 14, 28, 0.85) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  border-radius: 12px !important;
  color: #f5f3ff !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.voice-music-search-row input:focus {
  border-color: #a855f7 !important;
  box-shadow: 0 0 16px rgba(168, 85, 247, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}

.btn-music-search {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.btn-music-search:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.6) !important;
}

.btn-music-search:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

.voice-music-presets {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  margin-bottom: 10px !important;
}

.btn-music-chip {
  background: rgba(30, 24, 46, 0.75) !important;
  border: 1px solid rgba(168, 85, 247, 0.25) !important;
  border-radius: 999px !important;
  color: #e9d5ff !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.btn-music-chip:hover {
  background: rgba(168, 85, 247, 0.25) !important;
  border-color: #a855f7 !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3) !important;
  transform: translateY(-1px) !important;
}

.voice-music-results {
  background: rgba(17, 13, 27, 0.96) !important;
  border: 1px solid rgba(168, 85, 247, 0.45) !important;
  border-radius: 14px !important;
  padding: 10px !important;
  margin: 8px 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 25px rgba(168, 85, 247, 0.2) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  max-height: 290px !important;
  overflow-y: auto !important;
}

.voice-music-results-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #c4b5fd !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(168, 85, 247, 0.2) !important;
  margin-bottom: 8px !important;
}

.voice-music-results-header .btn-music-close {
  background: transparent !important;
  border: 0 !important;
  color: #94a3b8 !important;
  font-size: 18px !important;
  cursor: pointer !important;
  padding: 0 4px !important;
}

.voice-music-results-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.music-result-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 10px !important;
  background: rgba(26, 20, 42, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.music-result-item:hover {
  background: rgba(168, 85, 247, 0.2) !important;
  border-color: rgba(168, 85, 247, 0.5) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.25) !important;
  transform: translateX(2px) !important;
}

.music-result-item .music-thumb {
  width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.music-result-item .music-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.music-result-item .music-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #f1f5f9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.music-result-item .music-channel {
  font-size: 11px !important;
  color: #a78bfa !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.btn-music-play-track {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}

.btn-music-play-track:hover {
  transform: scale(1.06) !important;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.6) !important;
}