/* Final viewer layout, isolated from statistics and older component rules. */
.viewer .stage{width:100%;grid-template-columns:minmax(0,1fr)}
.viewer .video-area{width:100%;min-width:0;min-height:0;overflow:hidden}
.viewer .video-area iframe{position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);display:block;border:0;max-width:100%;max-height:100%;margin:0}
@media(max-width:760px),(max-height:500px){
 .viewer .stage{height:100dvh;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}
 .viewer .viewer-header{display:flex;flex-wrap:nowrap;gap:4px;min-height:48px;padding:env(safe-area-inset-top,0px) max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px))}
 .viewer .viewer-header .brand{font-size:20px;flex:0 0 auto;margin-right:auto}
 .viewer .viewer-header .brand-line,.viewer .viewer-header .brand-label,.viewer .viewer-header .stats-link{display:none}
 .viewer .viewer-header #playbackControls{display:flex;flex:0 0 auto;flex-wrap:nowrap;gap:2px;margin:0}
 .viewer .viewer-header #playVideo,.viewer .viewer-header #soundToggle,.viewer .viewer-header #retryVideo{position:relative;display:block;flex:0 0 40px;width:40px;min-width:40px;height:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:8px;background:transparent;font-size:0;line-height:0;letter-spacing:0;white-space:nowrap;overflow:hidden}
 .viewer .viewer-header #fullscreen{flex:0 0 40px;width:40px;min-width:40px;height:44px;min-height:44px;padding:0;border:0;line-height:1}
 .viewer .viewer-header #retryVideo::after{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;line-height:1}
 .viewer .viewer-header #playVideo:hover,.viewer .viewer-header #soundToggle:hover,.viewer .viewer-header #retryVideo:hover{background:#ffffff0a}
 .viewer .viewer-footer{flex-wrap:nowrap;min-height:48px;padding:2px max(6px,env(safe-area-inset-right,0px)) max(2px,env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px))}
}

/* Keep eight stations and playback controls inside narrow screens. */
.viewer .radio-choice[data-station="skonto"] img{background:#171e19}
.viewer .viewer-footer .radio-player{min-width:0}
@media(max-width:1100px){.viewer .radio-info{display:none}}
@media(max-width:600px){
 .viewer .viewer-footer .radio-player{flex:1 1 auto;gap:8px;max-width:100%}
 .viewer .radio-switcher{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:3px;flex:1 1 auto;max-width:270px}
 .viewer .radio-choice{min-width:0;padding:3px;min-height:44px}
 .viewer #radioToggle{flex-shrink:0;margin-left:0}
 .viewer .viewer-footer .audience-button{flex-shrink:0}
}
@media(max-width:350px){.viewer .radio-visualizer{display:none}}

/* One compact radio toolbar on desktop and mobile. */
.viewer .radio-info{display:none}
.viewer .viewer-footer .radio-player{border:0;background:transparent;border-radius:0;padding:0}
.viewer #radioToggle{position:relative;display:block;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:50%;background:radial-gradient(circle,var(--accent) 0 17px,transparent 17.5px);color:#18210c;font-size:0;line-height:0;touch-action:manipulation}
.viewer #radioToggle::after{content:'';position:absolute;display:block;top:50%;left:50%;margin:0;width:13px;height:16px;background:currentColor;clip-path:polygon(8% 0,100% 50%,8% 100%);transform:translate(-50%,-50%) translateX(1px)}
.viewer #radioToggle[data-action="stop"]::after{width:12px;height:14px;clip-path:none;transform:translate(-50%,-50%);background:linear-gradient(to right,currentColor 0 33%,transparent 33% 67%,currentColor 67% 100%);border-radius:1px}
.viewer #radioToggle:hover{filter:brightness(1.08)}
.viewer #radioToggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* Mobile stations: icons only, in one swipeable row. */
@media(max-width:760px),(max-height:500px){
 .viewer .viewer-footer .radio-player{flex:1 1 auto;min-width:0;max-width:100%;gap:3px}
 .viewer .radio-switcher{display:flex;flex:1 1 auto;min-width:0;max-width:none;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .viewer .radio-switcher::-webkit-scrollbar{display:none}
 .viewer .radio-choice{flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:3px;gap:0}
 .viewer .radio-choice span{display:none}
 .viewer .radio-choice img{width:36px;height:36px;object-fit:contain}
 .viewer .radio-visualizer{display:flex;flex:0 0 18px;width:18px;height:30px;margin:0}
 .viewer #radioToggle{flex:0 0 44px;margin:0}
 .viewer .viewer-footer .audience-button{flex-shrink:0;margin-left:0}
}

.radio-actions{display:flex;align-items:center;justify-content:center;gap:3px;flex:0 0 auto}
@media(max-width:760px),(max-height:500px){
 .viewer .viewer-footer .radio-player{flex-wrap:wrap;justify-content:center;row-gap:0}
 .viewer .radio-switcher{flex:1 0 100%;width:100%;max-width:100%}
 .viewer .radio-actions{flex:0 0 auto;gap:8px;min-height:44px}
 .viewer .viewer-header .audience-button{flex:0 0 auto;min-width:40px;min-height:44px;padding:2px;gap:3px;margin:0}
 .viewer .viewer-header .audience-button .mini-flags,.viewer .viewer-header .audience-button>span:last-child{display:none}
 .viewer .viewer-header .audience-button>span:nth-child(2){font-size:0}
 .viewer .viewer-header .audience-button b{font-size:12px}
 .viewer .viewer-header .audience-button .people-icon{font-size:20px}
}
@media(max-width:380px){
 .viewer .viewer-header{gap:2px}
 .viewer .viewer-header .brand{font-size:18px}
 .viewer .viewer-header #playbackControls{gap:0}
 .viewer .viewer-header #playVideo,.viewer .viewer-header #soundToggle,.viewer .viewer-header #retryVideo,.viewer .viewer-header #fullscreen{flex-basis:36px;width:36px;min-width:36px}
}

/* Center the station row when it fits; keep its start reachable when scrolling. */
@media(max-width:760px),(max-height:500px){
 .viewer .radio-switcher::before,.viewer .radio-switcher::after{content:'';flex:1 0 0px}
}

/* Archive and city controls stay together above the camera. */
.viewer .archive-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.viewer .archive-tools .camera-archive-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 13px;border:1px solid #647166;border-radius:8px;color:var(--accent);background:#131b1b;font:600 14px/1.2 system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.viewer .archive-tools .camera-archive-link:hover{background:#28302e}
@media(max-width:1200px),(max-height:500px){
 .viewer .archive-tools{position:absolute;top:calc(100% + 8px);right:max(12px,env(safe-area-inset-right,0px));z-index:31;gap:6px}
 .viewer .archive-tools .stendeCitiesToggle,.viewer .archive-tools .camera-archive-link{width:auto;min-width:0;min-height:44px;height:44px;padding:8px 12px;font:600 12px/1.2 system-ui,sans-serif;background:#131b1bea;box-shadow:0 2px 8px #0003}
}