.camera-bar{position:absolute;top:24px;left:346px;right:324px;max-width:570px;padding:12px 14px;z-index:3;background:#0b1421e8}
.has-camera-bar .view-label{display:none}
.camera-heading{display:flex;align-items:center;gap:10px;min-width:0}
.camera-heading strong{font:500 11px var(--display);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.camera-heading>button{font-size:10px;color:var(--mint);white-space:nowrap;padding:5px 0 5px 8px}
.camera-modes{display:flex;gap:5px;margin-top:10px}
.camera-modes button{min-height:36px;flex:1;font-size:11px;padding:7px 10px;border:1px solid var(--line);border-radius:5px;background:#06101b;white-space:nowrap}
.camera-modes button.active{background:#62e2d01c;color:var(--mint);border-color:#62e2d060}
.camera-modes #reset-camera{flex:0 0 auto;font-size:9px;color:#b0c3d7;background:transparent}
.camera-bar p{font-size:10px;line-height:1.55;color:#96a9bf;margin:9px 0 0}
.object-camera-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:16px}
.object-camera-actions button{display:flex;align-items:center;justify-content:space-between;gap:5px;padding:10px 8px;min-height:40px;border:1px solid #62e2d043;border-radius:5px;background:#62e2d00d;color:var(--mint);font-size:10px;text-align:left}
.object-camera-actions button.active{background:#62e2d022;border-color:#62e2d0aa}
.object-camera-actions button:disabled,.camera-modes button:disabled{cursor:not-allowed}
@media(min-width:801px) and (max-width:1200px){.camera-bar{left:342px;right:310px;padding:10px;min-width:240px}.camera-heading .eyebrow{display:none}.camera-modes{flex-wrap:wrap}.camera-modes #reset-camera{flex:1}.camera-bar p{font-size:9px}}
@media(min-width:801px) and (max-width:1000px){.camera-bar{left:342px;right:24px;max-width:none}.has-camera-bar .detail-panel{--detail-top:max(184px,var(--camera-bar-clearance,184px));top:var(--detail-top);bottom:calc(var(--bottom-inset) + var(--timebar-height) + 22px);max-height:calc(100% - var(--detail-top) - var(--bottom-inset) - var(--timebar-height) - 22px)}}
/* In the narrow desktop layout, the top-right toolbar would sit under the
   wider camera bar. Use the clear strip beside the detail sheet instead. */
@media(min-width:801px) and (max-width:1000px){
 .has-camera-bar .scene-toolbar{top:auto;bottom:calc(var(--bottom-inset) + var(--timebar-height) + 22px);left:342px;right:auto;flex-direction:row;align-items:center}
 .has-camera-bar .scene-toolbar span{height:22px;width:1px;margin:0 3px}
}
@media(max-width:800px){
 .camera-bar{top:12px;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));max-width:none;padding:10px 12px;z-index:3}
 .camera-heading .eyebrow{display:none}
 .camera-heading strong{font-size:11px}
 .camera-heading>button{min-height:44px;padding:3px 0 3px 8px}
 .camera-modes{gap:4px;margin-top:4px}
 .camera-modes button{min-height:44px;font-size:10px;padding:7px}
 .camera-modes #reset-camera{font-size:9px;padding:7px}
 .camera-bar p{font-size:9px;line-height:1.4;margin-top:7px}
 .object-camera-actions button{min-height:44px;font-size:11px}
 .has-camera-bar .detail-panel{top:auto;max-height:min(54%,calc(100% - var(--detail-bottom) - var(--camera-bar-clearance,160px)))}
 .detail-panel .telemetry-grid{position:static;width:auto;grid-template-columns:1fr 1fr}
}
@media(max-width:360px){.camera-bar{padding:8px 10px}.camera-heading strong{font-size:10px}.camera-modes button{padding:6px;font-size:9px}.camera-bar p{font-size:8px}.camera-modes #reset-camera{font-size:8px}}
/* The compact row keeps Details reachable even after a camera mode hides the
   detail sheet. All five actions retain 44px touch targets at 320px width. */
@media(max-width:800px) and (max-height:560px){
 .camera-bar{top:6px;padding:6px 8px;display:flex;gap:5px;align-items:center}
 .camera-bar p,.camera-heading strong,.camera-heading .eyebrow{display:none}
 .camera-heading{display:contents}
 .camera-heading>button{flex:0 0 44px;min-width:44px;max-width:44px;min-height:44px;white-space:normal;padding:0 2px;font-size:9px;line-height:1.2}
 .camera-modes{order:-1;flex:1;min-width:0;margin:0;gap:4px}
 .camera-modes button{min-width:0;min-height:44px;font-size:9px;padding:6px 4px}
 .camera-modes #reset-camera{flex:1;font-size:8px;padding:6px 4px}
 .has-camera-bar .detail-panel{top:auto;max-height:calc(100% - var(--detail-bottom) - var(--camera-bar-clearance,76px))}
}