/* Phone layouts use existing Loop routes and controls. Desktop styles stay intact. */
.mobile-feed-tabs,.mobile-inbox-links,.profile-mobile-links{display:none}
.video-frame .center-play{inset:50% auto auto 50%;transform:translate(-50%,-50%);width:76px;height:76px;min-height:44px;border-radius:50%;background:#08080b55;pointer-events:auto;z-index:3;padding:12px}
.video-frame .center-play svg{width:50px;height:50px}
@media(max-width:600px){
 :root{--mobile-bottom:calc(64px + env(safe-area-inset-bottom,0px));--mobile-top:calc(58px + env(safe-area-inset-top,0px))}
 .sidebar,.collapsed .sidebar,.top-tools,.feed-label,.feed-arrows{display:none}
 .layout,.collapsed .layout,.with-drawer .layout{margin:0;padding-top:var(--mobile-top);min-height:100dvh;padding-bottom:var(--mobile-bottom)}
 .mobile-header{position:fixed;inset:0 0 auto;display:flex;gap:8px;align-items:center;justify-content:space-between;height:var(--mobile-top);padding:env(safe-area-inset-top,0px) 12px 0;background:var(--surface);color:var(--text);z-index:35;border-bottom:1px solid var(--line)}
 .mobile-header>a{flex-shrink:0}.mobile-header .mobile-logo{width:66px;height:48px;object-fit:contain}
 .mobile-header button{min-width:44px;min-height:44px;display:grid;place-items:center;padding:8px;border-radius:12px;background:transparent;color:inherit}
 .mobile-header svg{width:23px;height:23px}.mobile-header .mobile-account{font-size:13px;letter-spacing:0;margin-left:auto;padding:12px}
 .mobile-header.feed-header{background:#101014;color:#fff;border:0;gap:0;padding-left:4px;padding-right:4px}
 .feed-header>.mobile-logo-link,.feed-header>.mobile-account{display:none}
 .mobile-feed-tabs{display:flex;align-items:center;gap:18px;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1;white-space:nowrap;height:100%}
 .mobile-header:not(.feed-header) .mobile-feed-tabs{display:none}
 .mobile-feed-tabs a{height:100%;display:flex;align-items:center;position:relative;font-size:15px;font-weight:700;color:#b9b6c2;flex-shrink:0;text-decoration:none}
 .mobile-feed-tabs a[aria-current=page]{color:#fff}.mobile-feed-tabs a[aria-current=page]:after{content:'';height:3px;border-radius:3px;position:absolute;bottom:5px;left:20%;right:20%;background:var(--accent)}
 .mobile-header .mobile-search{flex:0 0 44px}.mobile-header .mobile-menu{flex:0 0 44px}
 .mobile-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;inset:auto 0 0;height:var(--mobile-bottom);padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px));background:var(--surface);color:var(--muted);border-top:1px solid var(--line);z-index:50;align-items:center}
 .mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;font-size:11px;font-weight:700;padding:4px 0;border-radius:10px}
 .mobile-nav svg{width:25px;height:25px}.mobile-nav .active{color:var(--accent)}
 .mobile-nav button[data-nav=upload]{width:54px;min-width:0;height:44px;min-height:44px;justify-self:center;font-size:0;gap:0;background:var(--accent);color:#fff;border-radius:12px;box-shadow:4px 0 0 #ad8cf6,-4px 0 0 #4eced5}
 body:has(.feed) .mobile-nav{background:#101014;color:#c4c1cc;border-color:#ffffff24}body:has(.feed) .mobile-nav .active{color:#fff}
 body:has(.feed) .layout{padding-bottom:0}
 .feed,.feed-item{height:calc(100dvh - var(--mobile-top) - var(--mobile-bottom));background:#08080b}
 .feed{overscroll-behavior-y:contain}.feed-item,.with-drawer .feed-item{display:block;position:relative;padding:0;gap:0}
 .video-frame,.with-drawer .video-frame,.has-live-strip .video-frame{height:100%;width:100%;max-width:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
 .video-frame video{object-fit:contain;background:#08080b}.video-frame:after{inset:48% 0 0;background:linear-gradient(transparent,#08080bf2)}
 .video-copy{left:16px;right:78px;bottom:24px}.video-copy .creator{font-size:18px;margin-bottom:8px}.video-copy p{font-size:13px;line-height:1.45;max-height:5.8em;overflow:auto;margin-bottom:10px;scrollbar-width:thin}.music{font-size:11px}.video-time{font-size:10px}
 .video-top{top:10px;left:12px;right:12px}.video-top button{min-width:40px;min-height:40px;padding:10px}.demo-pill{top:60px;left:12px}
 .actions,.with-drawer .actions{position:absolute;right:10px;bottom:24px;width:52px;max-height:calc(100% - 80px);overflow-y:auto;scrollbar-width:none;padding:5px 0 8px;gap:13px;z-index:5}
 .actions>*{flex-shrink:0}.actions .action{font-size:10px;letter-spacing:0;gap:3px;color:#fff;min-width:44px}.actions .action>span,.actions .follow-face .avatar{width:44px;height:44px;border-radius:50%;background:#22212a88;border-color:#ffffff18}.actions .action svg{width:25px;height:25px}.actions .sound-action{font-size:9px}.actions .sound-action svg{width:42px;height:42px;padding:10px}.follow-face em{left:14px}.actions .follow-face{margin-bottom:6px}
 .social-live-strip{position:static;margin:0;padding:10px 12px;max-width:none;background:var(--surface);justify-content:flex-start}.has-live-strip .feed-item{padding-top:0}.has-live-strip .feed{height:calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - 100px)}.has-live-strip .feed-item{height:100%}
 .page{padding:24px 16px 28px;min-width:0}.page h1{font-size:28px}.page-eyebrow{font-size:10px}.page input,.page textarea,.modal input,.modal textarea,.feature-dialog input,.feature-dialog textarea,.drawer input,.drawer textarea{font-size:16px!important}
 .profile-page .profile-head{display:flex;flex-direction:row-reverse;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:nowrap}.profile-head>.avatar{flex-shrink:0;width:84px;height:84px;border-radius:50%}.profile-head>div{flex:1}.profile-head h1{font-size:25px}.profile-head h2{font-size:15px}.profile-head>div>button,.profile-head>div>button[data-social]{margin:4px 5px 4px 0;min-height:40px;padding:9px 12px;font-size:12px}
 .profile-page .stats{gap:24px;margin:18px 0}.profile-page .stats button,.profile-page .stats span{display:flex;flex-direction:column;gap:5px;font-size:12px}.profile-page .stats b{font-size:19px;margin:0}.tabs{overflow-x:auto;gap:12px;white-space:nowrap;scrollbar-width:none;margin:22px 0 16px}.tabs button{min-height:48px;font-size:13px;padding:12px 8px;flex-shrink:0}
 .profile-page .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-left:-16px;margin-right:-16px}.profile-page .thumb{border-radius:0;aspect-ratio:3/4;box-shadow:none}.profile-page .tile h4,.profile-page .tile p{display:none}.thumb img{width:100%;height:100%;object-fit:cover}.profile-page .thumb span{bottom:6px;left:4px;font-size:10px;padding:3px 4px}
 .enhanced-chat,.enhanced-messages .enhanced-chat{grid-template-columns:1fr;gap:18px}.conversation-list{max-height:30dvh;border:1px solid var(--line);border-radius:14px}.conversation{min-height:72px;padding:16px}.conversation small{font-size:12px}.message-tools{gap:12px}.message-tools button{min-height:44px}.bubble{font-size:14px;max-width:94%}.bubble .message-tools button{min-height:36px}
 .mobile-inbox-links,.profile-mobile-links{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.mobile-inbox-links a,.profile-mobile-links a{padding:12px 14px;min-height:44px;border:1px solid var(--line);border-radius:14px;font-size:13px;background:var(--surface);font-weight:600}
 .conversation-list{display:block}.conversation{width:100%;max-width:none;min-width:0;border:0;border-bottom:1px solid var(--line);border-radius:0}[data-new-chat]{display:grid;gap:10px;margin-bottom:16px}[data-new-chat]>button{justify-self:start;min-height:44px;padding:10px 20px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
 .drawer,.message-drawer{inset:auto 0 0;width:100%;height:min(76dvh,760px);max-height:calc(100dvh - 20px);padding:20px 16px calc(16px + env(safe-area-inset-bottom,0px));border:1px solid var(--line);border-bottom:0;border-radius:24px 24px 0 0;z-index:55;box-shadow:0 -15px 60px #0005}
 .drawer header{padding-bottom:14px;gap:12px}.drawer h2{font-size:19px}.panel-controls{gap:10px}.panel-controls button{width:44px;height:44px}.drawer [data-full-comment]{flex-shrink:0}.drawer .comments-list{min-height:0;overscroll-behavior:contain}.drawer [data-thread]{overflow:auto}.enhanced-messages{width:100%}
 .shade{padding:0;align-items:end;backdrop-filter:blur(4px)}.modal{width:100%;max-height:90dvh;border-radius:24px 24px 0 0;padding:26px 20px calc(24px + env(safe-area-inset-bottom,0px))}.modal>.close{width:44px;height:44px;right:12px;top:12px}.modal h2{padding-right:38px;font-size:24px}.share-options{gap:12px;justify-content:flex-start}.share-options button{flex:1 0 70px;min-height:80px}.share-option-label{font-size:11px}.copy-row button{min-height:44px}
 .feature-dialog,#social-dialog{width:100%;max-width:100%;max-height:90dvh;margin:auto 0 0;border-radius:24px 24px 0 0;padding:24px 18px calc(24px + env(safe-area-inset-bottom,0px))}.feature-dialog::backdrop,#social-dialog::backdrop{background:#08081099}
 .studio-menu .nav-item{justify-content:flex-start;min-height:48px;gap:14px}.drawer-restore{bottom:calc(var(--mobile-bottom) + 14px)}#toast{bottom:calc(var(--mobile-bottom) + 14px);max-width:calc(100vw - 24px);width:max-content}
}
@media(max-width:600px) and (max-height:700px){.actions,.with-drawer .actions{gap:4px;bottom:18px}.actions .action>span,.actions .follow-face .avatar{width:36px;height:36px}.actions .sound-action svg{width:34px;height:34px}.actions .action{font-size:9px}.video-copy{bottom:20px}.video-copy p{max-height:4.35em}.mobile-feed-tabs{gap:14px}}

/* Bound the entire action column, including its labels, to the usable video height. */
.feed-item>.actions{
 --rail-height:min(580px,calc(100dvh - 116px));
 --rail-icon:clamp(26px,calc((var(--rail-height) - 196px)/8),44px);
 height:var(--rail-height);max-height:100%;min-height:0;
 width:54px;flex:0 0 54px;padding:8px 0;gap:6px;justify-content:space-between;
 overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;
}
.feed-item>.actions>*{flex-shrink:0}
.feed-item>.actions .action{min-height:44px;min-width:44px;gap:3px;font-size:10px;line-height:12px;letter-spacing:0}
.feed-item>.actions .action>span,.feed-item>.actions .follow-face .avatar{width:var(--rail-icon);height:var(--rail-icon)}
.feed-item>.actions .action strong{font-size:10px;line-height:12px}
.feed-item>.actions .action svg{width:min(24px,calc(var(--rail-icon) - 10px));height:min(24px,calc(var(--rail-icon) - 10px))}
.feed-item>.actions .follow-face{min-height:44px;margin:0;padding-bottom:10px;display:grid;place-items:center}
.feed-item>.actions .follow-face em{left:50%;transform:translateX(-50%);bottom:0}
.feed-item>.actions .sound-action{min-height:44px;font-size:10px;line-height:12px;gap:4px}
.feed-item>.actions .sound-action svg{width:var(--rail-icon);height:var(--rail-icon);padding:8px}
@media(min-width:601px){.has-live-strip .feed-item>.actions{--rail-height:min(580px,calc(100dvh - 190px))}}
@media(min-width:601px) and (max-height:560px){.feed-item>.actions{gap:2px;padding:4px 0}}
@media(max-width:600px){
 .feed-item>.actions,.with-drawer .feed-item>.actions{
  --rail-height:min(560px,calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - 80px));
  max-height:calc(100% - 80px);bottom:24px;right:8px;
 }
 .has-live-strip .feed-item>.actions{--rail-height:min(560px,calc(100dvh - var(--mobile-top) - var(--mobile-bottom) - 180px))}
}

/* The mobile feed is one viewport; only its snap container scrolls. */
@media(max-width:600px){
 html:has(.feed){height:100%;overflow:hidden;overscroll-behavior:none}
 body:has(.feed){position:fixed;inset:0;height:100dvh;overflow:hidden;overscroll-behavior:none}
 body:has(.feed) .layout{position:absolute;inset:0;min-height:0;padding:0;overflow:hidden}
 body:has(.feed) .feed{position:absolute;inset:0 0 var(--mobile-bottom);height:auto;overscroll-behavior:none;-webkit-overflow-scrolling:touch}
 body:has(.feed) .feed-item{height:100%;padding:0}
 body:has(.feed) .video-frame{height:100%;border-radius:0}
 .video-frame video{object-fit:cover}.video-frame video.landscape{object-fit:contain}
 .mobile-header.feed-header{background:linear-gradient(#08080ba6,transparent);border:0}
 body:has(.feed) .video-top{top:calc(var(--mobile-top) + 8px)}
 body:has(.feed) .demo-pill{top:calc(var(--mobile-top) + 58px)}
 body:has(.feed) .feed-item>.actions{--rail-height:min(560px,calc(100dvh - var(--mobile-bottom) - var(--mobile-top) - 80px))}
 body.has-live-strip:has(.feed) .social-live-strip{position:absolute;top:var(--mobile-top);left:0;right:0;height:90px;margin:0;z-index:20;background:#08080b99}
 body.has-live-strip:has(.feed) .video-top{top:calc(var(--mobile-top) + 98px)}
 body.has-live-strip:has(.feed) .demo-pill{top:calc(var(--mobile-top) + 148px)}
 body.has-live-strip:has(.feed) .feed-item>.actions{--rail-height:min(560px,calc(100dvh - var(--mobile-bottom) - var(--mobile-top) - 170px))}
}