.shoulder-controls{position:absolute;left:max(10px,env(safe-area-inset-left));top:82px;z-index:12;max-width:calc(100% - 100px);pointer-events:none}
.shoulder-controls[hidden],.shoulder-controls [hidden]{display:none!important}
.shoulder-controls button{pointer-events:auto;touch-action:manipulation;font-family:inherit;cursor:pointer}
.shoulder-controls .camera-toggle{display:flex;align-items:center;gap:5px;border:1px solid #ac935a;border-radius:28px;background:#0c242bee;color:#f4dfae;padding:3px 12px 3px 3px;min-height:48px;box-shadow:0 3px 12px #0008;font-size:12px;font-weight:600}
.camera-toggle img{width:42px;height:42px;object-fit:contain}
.camera-tray{pointer-events:auto;width:188px;box-sizing:border-box;margin-top:6px;padding:12px;background:linear-gradient(145deg,#183e45fa,#091c27fc);border:1px solid #b49a60;border-radius:12px;box-shadow:0 8px 22px #0009,inset 0 0 0 3px #d4b56e12;color:#f3dfb3;max-height:calc(100dvh - 250px);overflow:auto}
.camera-tray strong{font-family:Georgia,serif;font-size:17px;font-weight:normal}.camera-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.shoulder-controls .camera-grid button{min-width:44px;min-height:44px;border:1px solid #998451;border-radius:8px;background:linear-gradient(#31525b,#122c37);color:#f4dfae;font-size:22px;padding:5px}.camera-grid button:last-child{grid-column:span 2;font-size:13px}.camera-tray p{font-size:11px;line-height:1.4;color:#c1d2cf;margin:10px 0 0}.shoulder-controls button:focus-visible{outline:3px solid #fff1bd;outline-offset:3px}.shoulder-controls button:hover{filter:brightness(1.15)}
@media(max-width:600px){.shoulder-controls{left:7px;top:78px}.camera-tray{width:168px;padding:9px}.shoulder-controls .camera-toggle{padding-right:9px;font-size:11px}.camera-toggle img{width:38px;height:38px}}
@media(max-height:500px){.shoulder-controls{top:64px}.camera-tray{max-height:calc(100dvh - 170px)}}
@media(prefers-reduced-motion:no-preference){.camera-toggle,.camera-grid button{transition:filter .15s,background-color .15s}}
/* Compact touch tray: two rows beside the medallion, never a tall sheet. */
@media(max-width:600px),(max-height:500px) and (pointer:coarse){
 .shoulder-controls{display:flex;align-items:flex-start;gap:5px;left:max(7px,env(safe-area-inset-left));top:76px;max-width:calc(100% - 76px)}
 .shoulder-controls .camera-toggle{flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:2px;justify-content:center;border-radius:50%}
 .camera-toggle img{width:38px;height:38px}.camera-toggle span{display:none}
 .camera-tray{width:204px;max-width:calc(100vw - 132px);margin:0;padding:5px;max-height:none;overflow:visible;border-radius:10px}
 .camera-tray>strong,.camera-tray>p{display:none}
 .camera-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:0}
 .shoulder-controls .camera-grid button{min-width:0;width:100%;min-height:44px;height:44px;padding:0;font-size:20px;border-radius:7px}
 .shoulder-controls .camera-grid button:last-child{grid-column:span 2;font-size:12px}
}
.camera-caption{display:none}.camera-symbol{display:block}
@media(max-width:600px),(max-height:500px){
 .shoulder-controls{top:auto;bottom:calc(var(--camera-chat-inset,54px) + 5px);left:max(6px,env(safe-area-inset-left));right:max(6px,env(safe-area-inset-right));width:auto;max-width:none;display:flex;align-items:center;gap:4px}
 .shoulder-controls[data-open='true']{padding:4px;border:1px solid #b59a5e;border-radius:14px;background:linear-gradient(135deg,#1b434aef,#081f2af5);box-shadow:inset 0 0 0 3px #ddc18512,0 -3px 14px #0006}
 .shoulder-controls .camera-toggle{flex:0 0 44px;width:44px;height:48px;min-height:44px;padding:0;border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;gap:0}
 .camera-toggle img{width:40px;height:40px}.camera-toggle span{display:none}
 .shoulder-controls[data-open='true'] .camera-toggle:after{content:'Hide';color:#f2d998;font-size:10px}
 .camera-tray{flex:1;min-width:0;width:auto;max-width:none;height:88px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:#ad955c transparent}
 .camera-tray>strong,.camera-tray>p{display:none}
 .camera-grid{display:grid;grid-template-columns:repeat(7,minmax(40px,1fr));gap:3px;margin:0;min-width:298px;height:84px}
 .shoulder-controls .camera-grid button,.shoulder-controls .camera-grid button:last-child{grid-column:auto;width:100%;height:84px;min-height:44px;min-width:40px;padding:3px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:22px;border:1px solid #a68c55;border-radius:10px;background:linear-gradient(#234d58,#0b2935);box-shadow:inset 0 1px #f9df9a40,inset 0 -2px 5px #0006}
 .camera-symbol{width:34px;height:34px;display:grid;place-items:center;border:1px solid #c5a55a;border-radius:50%;background:radial-gradient(circle,#2d6770,#122b37);color:#ffe2a0;text-shadow:0 1px 3px #000;box-shadow:0 1px 3px #0008}
 .camera-caption{display:block;font-size:10px;color:#f1ddaf;line-height:1.1}
}

.shoulder-controls button:disabled{opacity:.38;cursor:default;}

/* Camera selection remains reachable before shoulder view is enabled. */
.camera-view-label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#f3dfb3}
.camera-view-label select{width:100%;min-height:44px;max-width:100%;font:inherit;color:#f3dfb3;background:#102f3c;border:1px solid #ac935a;border-radius:7px;padding:6px}
@media(max-width:600px),(max-height:500px){
 .shoulder-controls .camera-toggle{height:60px}
 .shoulder-controls .camera-toggle span{display:block;font-size:10px;color:#f2d998}
 .shoulder-controls[data-open='true'] .camera-toggle:after{content:none}
 .camera-tray{height:auto;max-height:calc(100dvh - 160px);overflow:auto}
 .camera-view-label{padding:3px}
 .camera-grid{margin-top:4px}
}

@media(max-width:600px),(max-height:500px){.camera-grid{min-width:0;grid-template-columns:repeat(4,minmax(0,1fr));height:auto}.shoulder-controls .camera-grid button,.shoulder-controls .camera-grid button:last-child{height:64px;min-width:0}.camera-tray{overflow-x:hidden}}
@media(max-width:600px),(max-height:500px){
 .shoulder-controls:not([data-open='true']){top:82px;bottom:auto;right:auto;width:auto}
}