/* StormTube vertical mobile v5 — original floating chat and one-tap sound.
   The landscape ingest never requires a second "chat mode". */
.st-vertical-sideactions #st-vertical-chat-toggle{display:none}
.st-vertical-chat-login{cursor:pointer}
@media(max-width:740px){
  /* Keep the video immersive regardless of source aspect ratio or letterboxing. */
  body.vertical-watching .st-vertical-page,
  body.vertical-watching .st-vertical-layout,
  body.vertical-watching .st-vertical-view{height:100dvh;overflow:hidden}
  .st-vertical-page .st-vertical-stage{
    height:100dvh!important;max-height:none!important;width:100vw;
    border:0;border-radius:0;aspect-ratio:auto!important;background:#06080d;
  }
  .st-vertical-page .st-vertical-stage>video{
    position:absolute;inset:0!important;width:100%;height:100%!important;
    object-fit:contain!important;background:#05070b;transform:none!important;
  }
  .st-vertical-page .st-vertical-landscape-details,
  .st-vertical-page .st-vertical-meta,
  .st-vertical-page .st-vertical-stage-actions{display:none!important}
  .st-vertical-stage-top{
    padding:12px 11px;gap:7px;
    top:env(safe-area-inset-top,0px);
  }
  .st-vertical-identity strong{font-size:13px;max-width:38vw}
  .st-vertical-page .st-vertical-overlay-bottom{
    left:0;right:0;bottom:env(safe-area-inset-bottom,0px);
    padding:9px 71px 16px 13px;z-index:6;
    pointer-events:none;
  }
  .st-vertical-page .st-vertical-overlay-compose{
    display:flex;align-items:center;gap:8px;pointer-events:auto;
  }
  .st-vertical-overlay-compose input{
    background:rgba(20,24,32,.62);border:1px solid #aab8bf4d;
    color:#fff;min-height:46px;font-size:13px;
    backdrop-filter:blur(12px);
  }
  .st-vertical-overlay-compose input::placeholder{color:#d0d3d7}
  .st-vertical-overlay-compose button[type=submit]{
    width:44px;min-width:44px;height:44px;min-height:44px;
    background:#58ee95;color:#062016;cursor:pointer;
  }
  /* Specificity must beat the legacy .st-vertical-overlay-compose button
     (39px green circular send control): this is a full-width login pill. */
  .st-vertical-page .st-vertical-overlay-compose button.st-vertical-chat-login{
    display:flex;flex:1 1 auto;align-items:center;justify-content:space-between;
    gap:12px;box-sizing:border-box;position:relative;
    width:100%;min-width:0;max-width:100%;height:auto;min-height:46px;
    padding:11px 15px;margin:0;aspect-ratio:auto;
    border-radius:999px;border:1px solid rgba(192,212,198,.4);
    color:#f2fff5;background:rgba(22,27,33,.8);
    font-family:inherit;font-size:13px;font-weight:650;line-height:1.4;
    text-align:left;white-space:nowrap;
    backdrop-filter:blur(12px);cursor:pointer;
  }
  .st-vertical-page .st-vertical-overlay-compose button.st-vertical-chat-login:focus-visible{
    outline:2px solid #79ffad;outline-offset:2px;
  }
  .st-vertical-page .st-vertical-chat-login span{
    flex:0 0 auto;color:#67f6a0;font-size:19px;line-height:1;
  }
  .st-vertical-page .st-vertical-sideactions{
    right:9px;bottom:calc(126px + env(safe-area-inset-bottom,0px));
    gap:12px;z-index:6;
  }
  .st-vertical-page .st-vertical-sideactions button,
  .st-vertical-page .st-vertical-sideactions a{
    width:44px;min-height:44px;font-size:23px;
    border:1px solid rgba(235,255,241,.21);
    background:rgba(13,18,22,.69);
    backdrop-filter:blur(9px);
  }
  .st-vertical-page .st-vertical-sideactions #st-vertical-chat-toggle{
    display:flex;cursor:pointer;
  }
  .st-vertical-page .st-vertical-sideactions #st-vertical-chat-toggle[aria-pressed=false]{
    background:#355244ed;color:#96eeb7;border-color:#6eaa80;
  }
  .st-vertical-sideactions small{
    font-size:9px;max-width:58px;line-height:1.1;
    overflow:hidden;text-overflow:ellipsis;
  }
  .st-vertical-page .st-vertical-float-chat{
    display:flex;flex-direction:column;justify-content:flex-end;
    position:absolute;z-index:5;
    left:12px;right:72px;
    bottom:calc(94px + env(safe-area-inset-bottom,0px));
    max-height:min(35dvh,294px);gap:5px;
    overflow:hidden;pointer-events:none;
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 100%);
  }
  .st-vertical-page.st-vertical-chat-muted .st-vertical-float-chat{display:none!important}
  .st-vertical-float-chat .st-vertical-chat-line{
    display:flex;align-items:flex-start;flex:0 0 auto;gap:7px;
    width:fit-content;max-width:100%;
    font-size:12px;line-height:1.32;
    padding:5px 8px 5px 5px;
    background:rgba(15,19,25,.42);
    border:1px solid rgba(255,255,255,.09);
    border-radius:13px;
    color:#f8fff9;text-shadow:0 1px 3px #000b;
    backdrop-filter:blur(4px);
    animation:st-vertical-chat-life 23s linear 1 both;
  }
  .st-vertical-float-chat .st-vertical-chat-line .avatar{
    width:23px;height:23px;flex:0 0 23px;
  }
  .st-vertical-float-chat .st-vertical-chat-line b{
    color:#86f6b3;font-size:12px;
  }
  .st-vertical-float-chat .st-vertical-chat-text{
    font-size:12px;color:#f6faf6;overflow-wrap:anywhere;
  }
  .st-vertical-page .st-vertical-chat-panel{display:none!important}
  .st-vertical-page .st-vertical-sound-prompt{display:none!important}
  .st-vertical-stage:fullscreen .st-vertical-overlay-bottom{bottom:env(safe-area-inset-bottom,0px)}
  @media(max-height:610px){
    .st-vertical-page .st-vertical-float-chat{max-height:25dvh}
    .st-vertical-page .st-vertical-sideactions{gap:6px}
  }
}
@media(max-width:360px){
 .st-vertical-page .st-vertical-sideactions button,
 .st-vertical-page .st-vertical-sideactions a{width:40px;min-height:40px}
 .st-vertical-page .st-vertical-overlay-bottom{padding-right:59px}
 .st-vertical-page .st-vertical-float-chat{right:62px}
}
@media(prefers-reduced-transparency:reduce){
 .st-vertical-float-chat .st-vertical-chat-line{background:#1d2529d9}
 .st-vertical-chat-login{background:#1b242ada}
}

@keyframes st-vertical-chat-life{
  0%{opacity:0;transform:translateY(5px)}
  4%,70%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-5px)}
}
@media(prefers-reduced-motion:reduce){
 .st-vertical-float-chat .st-vertical-chat-line{animation:none!important}
}

/* Logged-in vertical chat emoji drawer — does not replace the live video. */
@media(max-width:740px){
 .st-vertical-page .st-vertical-overlay-compose .st-vertical-emoji-button{
  flex:0 0 38px;width:38px;min-width:38px;max-width:38px;
  height:42px;min-height:42px;padding:0;border:1px solid rgba(216,242,220,.35);
  border-radius:50%;background:rgba(33,40,43,.88);color:#f3fff5;
  font-size:24px;font-weight:500;line-height:1;
  backdrop-filter:blur(8px);
 }
 .st-vertical-page .st-vertical-emoji-picker:not([hidden]){
  position:absolute;display:flex;flex-direction:column;
  bottom:calc(100% + 6px);left:12px;right:70px;
  padding:12px;max-height:min(39dvh,290px);
  border:1px solid #9cc9a155;border-radius:16px;
  background:rgba(19,25,28,.94);color:#eaffed;
  box-shadow:0 8px 26px #0009;
  z-index:12;backdrop-filter:blur(14px);
  pointer-events:auto;
 }
 .st-vertical-emoji-picker[hidden]{display:none!important}
 .st-vertical-emoji-picker>strong{font-size:12px;margin-bottom:8px}
 .st-vertical-emoji-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px;overflow-y:auto;overscroll-behavior:contain;min-height:0;
 }
 .st-vertical-page .st-vertical-emoji-grid button{
  width:100%;height:38px;min-height:38px;max-width:none;
  padding:3px;border-radius:8px;
  border:0;background:#1d2d29aa;color:#fff;
  font-size:23px;line-height:1;
 }
 .st-vertical-emoji-grid button img{max-width:30px;max-height:30px;object-fit:contain}
 .st-vertical-emoji-grid button:focus-visible{
  outline:2px solid #66f9a6;outline-offset:1px;
 }
}