/* TEMO PLAY v238 hotfix: mic meter, profile avatars, section links, player chrome, passkey UI */

/* Profile: main avatar circular, edit preview square for every account. */
#profileModal #profileAvatar,
#profileModal .profile-avatar{
  border-radius:50%!important;
  aspect-ratio:1/1!important;
  overflow:hidden!important;
}
#profileModal #profileAvatar img,
#profileModal .profile-avatar img{
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;
}
#profileModal .temo-avatar-picker{
  border-radius:20px!important;
  overflow:visible!important;
}
#profileModal #profileAvatarPreview{
  border-radius:17px!important;
  overflow:hidden!important;
}
#profileModal #profileAvatarPreview img{
  width:100%!important;height:100%!important;object-fit:cover!important;border-radius:17px!important;
}

/* Keep View More fully inside the mobile viewport. */
.content-section,
.content-section .section-title{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
.content-section .section-title{
  width:100%!important;
  flex-wrap:nowrap!important;
  overflow:hidden!important;
}
.content-section .section-title>.v238-section-label{
  min-width:0!important;
  flex:1 1 auto!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.content-section .section-title>.more-link{
  flex:0 0 auto!important;
  max-width:42vw!important;
  margin-inline-start:8px!important;
  margin-inline-end:2px!important;
  padding-inline:2px!important;
  overflow:visible!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
}
@media(max-width:520px){
  .content-section{padding-inline:14px!important;overflow:hidden!important}
  .content-section .section-title{font-size:.98rem!important;gap:5px!important}
  .content-section .section-title>.more-link{font-size:10px!important;letter-spacing:-.15px!important;max-width:39vw!important}
}

/* Film mode: header slides up and bottom navigation slides down. */
body.v238-player-active>header,
body.v238-player-active header.tp-header{
  transform:translateY(-125%)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.v238-player-active #bottomTabbar,
body.v238-player-active .bottom-tabbar{
  transform:translateY(calc(145% + env(safe-area-inset-bottom)))!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body>header,body header.tp-header,body #bottomTabbar,body .bottom-tabbar{
  transition:transform .5s cubic-bezier(.22,.75,.22,1),opacity .36s ease,visibility .36s step-end!important;
}
body:not(.v238-player-active)>header,
body:not(.v238-player-active) header.tp-header,
body:not(.v238-player-active) #bottomTabbar,
body:not(.v238-player-active) .bottom-tabbar{
  visibility:visible;
  transition:transform .5s cubic-bezier(.22,.75,.22,1),opacity .36s ease,visibility 0s step-start!important;
}

/* Restored v230-style microphone diagnostic widget. */
.wwme-dock{overflow:visible!important}
.wwme-dock-head{position:relative!important;z-index:4!important;overflow:visible!important}
.wwme-mic-test-v238{
  --mic-level:0;
  --mic-ring:#60a5fa;
  appearance:none;-webkit-appearance:none;
  position:relative;flex:0 0 auto;
  width:54px;height:54px;min-width:54px;min-height:54px;
  margin:0 3px;padding:0;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  border:1px solid rgba(96,165,250,.3);
  background:linear-gradient(180deg,rgba(11,17,30,.98),rgba(6,11,21,.94));
  box-shadow:0 10px 20px rgba(0,0,0,.34),0 0 16px rgba(34,211,238,.18);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  cursor:pointer;z-index:12;color:#fff;overflow:hidden;
}
.wwme-mic-test-v238.is-on{display:flex}
.wwme-mic-test-v238.checking{--mic-ring:#f59e0b;border-color:rgba(245,158,11,.58);box-shadow:0 10px 20px rgba(0,0,0,.34),0 0 19px rgba(245,158,11,.3)}
.wwme-mic-test-v238.ok{--mic-ring:#22c55e;border-color:rgba(34,197,94,.58);box-shadow:0 10px 20px rgba(0,0,0,.34),0 0 20px rgba(34,197,94,.31)}
.wwme-mic-test-v238.silent{--mic-ring:#ef4444;border-color:rgba(239,68,68,.64);box-shadow:0 10px 20px rgba(0,0,0,.34),0 0 21px rgba(239,68,68,.34)}
.wwme-mic-test-v238 .v238-mic-ring{
  position:relative;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at center,rgba(8,12,24,.98) 0 57%,transparent 58%),
    conic-gradient(from -90deg,var(--mic-ring) 0 calc(var(--mic-level)*1%),rgba(255,255,255,.08) calc(var(--mic-level)*1%) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 10px rgba(0,0,0,.24);
}
.wwme-mic-test-v238 .v238-mic-ring:before{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.16),transparent 42%),rgba(4,9,18,.86);
}
.wwme-mic-test-v238 .v238-mic-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.wwme-mic-test-v238 .v238-mic-icon{font-size:10px}
.wwme-mic-test-v238 .v238-mic-pct{font:900 10px/1 'Orbitron','Cairo',system-ui,sans-serif;color:#fff}
.wwme-mic-test-v238 .v238-mic-state{font:800 5.7px/1 'Cairo',system-ui,sans-serif;color:#a7bad1;letter-spacing:.25px}
.wwme-mic-test-v238 .v238-mic-copy,.wwme-mic-test-v238 .v238-mic-badge{display:none}
.wwme-mic-test-v238.expanded{
  position:absolute;inset-inline-end:72px;top:-104px;width:124px;height:auto;min-height:142px;
  padding:9px 8px 10px;display:flex;flex-direction:column;gap:7px;overflow:visible;border-radius:24px;
}
.wwme-mic-test-v238.expanded:after{
  content:"";position:absolute;bottom:-7px;inset-inline-end:24px;width:16px;height:16px;
  background:linear-gradient(180deg,rgba(8,13,24,.98),rgba(6,11,21,.94));
  border-inline-end:1px solid rgba(96,165,250,.2);border-bottom:1px solid rgba(96,165,250,.2);
  transform:rotate(45deg);border-bottom-right-radius:4px;
}
.wwme-mic-test-v238.expanded .v238-mic-ring{width:78px;height:78px}
.wwme-mic-test-v238.expanded .v238-mic-icon{font-size:14px}
.wwme-mic-test-v238.expanded .v238-mic-pct{font-size:14px}
.wwme-mic-test-v238.expanded .v238-mic-state{font-size:8px}
.wwme-mic-test-v238.expanded .v238-mic-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px}
.wwme-mic-test-v238.expanded .v238-mic-copy b{font:900 10px/1.25 'Cairo',system-ui,sans-serif;color:#f8fafc}
.wwme-mic-test-v238.expanded .v238-mic-copy small{font:700 8px/1.4 'Cairo',system-ui,sans-serif;color:#97a7bf;max-width:92px}
.wwme-mic-test-v238.expanded .v238-mic-badge{display:inline-flex;padding:4px 9px;border-radius:999px;font:900 9px/1 'Cairo',system-ui,sans-serif;background:rgba(255,255,255,.08)}
.wwme-mic-test-v238.checking .v238-mic-badge{color:#fde68a;background:rgba(245,158,11,.16)}
.wwme-mic-test-v238.ok .v238-mic-badge{color:#86efac;background:rgba(34,197,94,.16)}
.wwme-mic-test-v238.silent .v238-mic-badge{color:#fecaca;background:rgba(239,68,68,.18)}
@media(max-width:620px){
  .wwme-mic-test-v238{width:50px;height:50px;min-width:50px;min-height:50px}
  .wwme-mic-test-v238 .v238-mic-ring{width:42px;height:42px}
  .wwme-mic-test-v238 .v238-mic-pct{font-size:9px}
  .wwme-mic-test-v238.expanded{inset-inline-end:62px;top:-98px;width:112px;min-height:132px;padding:8px 7px 9px}
  .wwme-mic-test-v238.expanded .v238-mic-ring{width:70px;height:70px}
  .wwme-mic-test-v238.expanded .v238-mic-pct{font-size:12px}
}

/* Passkey status area. */
#v236AdminAuth .v238-passkey-state{
  margin:10px 0 2px;padding:9px 11px;border-radius:12px;border:1px solid rgba(34,211,238,.22);
  background:rgba(5,12,28,.62);color:#b9c9e6;font:700 11px/1.6 'Cairo',system-ui,sans-serif;text-align:center;
}
#v236AdminAuth .v238-passkey-state.ok{border-color:rgba(34,197,94,.42);color:#9af0b4}
#v236AdminAuth .v238-passkey-state.warn{border-color:rgba(245,158,11,.42);color:#fde68a}
