/* Video fills the viewport; account and creation controls sit on the video. */
.channel-feed{height:100dvh;overflow:hidden;background:#000}
.channel-feed .stage,.channel-feed .screen{position:absolute;inset:0;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:#000}
.channel-feed .player{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;touch-action:pinch-zoom}
.channel-feed video{object-fit:contain;width:100%;height:100%;cursor:pointer}
.channel-feed .profile{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:3}
.channel-feed button:not(.admin button):not(.watch){min-height:44px;padding:8px 14px;border:1px solid #ffffff70;border-radius:999px;background:#171717d9;color:#fff;font:600 .95rem var(--ui);cursor:pointer}
.channel-feed button:focus-visible,.channel-feed a:focus-visible,.channel-feed video:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.channel-feed button:disabled{opacity:.4;cursor:default}
#profile{display:flex;align-items:center;gap:8px}
#profile svg{fill:none;stroke:currentColor;stroke-width:1.8}
#profile-menu{position:absolute;right:0;top:54px;min-width:220px;padding:10px;background:#181818f5;color:white;border:1px solid #ffffff50;border-radius:14px;box-shadow:0 4px 24px #0008}
#profile-menu a,#profile-menu button{display:block;color:white;text-align:left;padding:12px;width:100%;box-sizing:border-box;text-decoration:none}
#profile-menu [hidden],.channel-feed [hidden]{display:none!important}
.channel-feed #create-open{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:2;font-size:2rem;width:56px;height:56px;padding:0}
.channel-feed .status{background:#0009;padding:24px;pointer-events:none}
.channel-feed dialog{width:min(760px,calc(100% - 24px));max-height:85dvh;border:2px solid var(--fg);border-radius:18px;background:var(--cream);color:var(--fg);padding:24px;overscroll-behavior:contain}
.channel-feed dialog::backdrop{background:#000b}
.channel-feed #details-close{float:right}
.channel-feed dialog main{padding:0;clear:both}
#describe{flex-wrap:wrap}
#describe .image-picker,#describe .hint,#image-previews{flex-basis:100%}
#image-previews{display:flex;gap:12px;flex-wrap:wrap}
.image-preview{width:180px;display:grid;gap:8px}
.image-preview img{width:180px;height:110px;object-fit:contain;background:#ddd;border-radius:8px}
.image-preview select{max-width:100%}

/* Leave the picture tappable, with legible information clear of device insets. */
.channel-info{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:64px max(20px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));color:#fff;background:linear-gradient(transparent,#000b);pointer-events:none;opacity:1;transition:opacity .35s}
.channel-info.faded{opacity:0}
.channel-info h1{font:600 clamp(1.25rem,3vw,2rem)/1.2 var(--ui);margin:0 0 8px;text-transform:none;overflow-wrap:anywhere}
.channel-info p{font:400 1rem/1.4 var(--ui);margin:0;max-width:640px;overflow-wrap:anywhere}
.screen:has(#create-open:not([hidden])) .channel-info{padding-bottom:calc(88px + env(safe-area-inset-bottom))}
@media(max-width:600px){.channel-feed dialog{box-sizing:border-box;padding:16px}.channel-info p{font-size:.9rem}}
@media(max-height:450px){.channel-info{padding-top:20px}.channel-info p{font-size:.85rem;max-width:70%}}
@media(prefers-reduced-motion:reduce){.channel-info{transition:none}}