/* Template editor: desktop and touch layouts share the same controls. */
:root { --mixer-height: 184px; --mixer-handle: 40px; }
body { --mixer-visible: calc(var(--mixer-height) + var(--mixer-handle)); }
body.mixer-collapsed { --mixer-visible: var(--mixer-handle); }
body { padding-bottom:calc(var(--mixer-visible) + env(safe-area-inset-bottom) + 16px); }
.toolbar { flex-wrap:wrap;gap:10px;height:auto;min-height:70px; }
.toolbar-spacer { flex:1; }
.template-control { min-width:230px; }
.template-control select { flex:1;min-width:0 !important; }
.mixer-dock { height:calc(var(--mixer-height) + env(safe-area-inset-bottom));padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;overflow-x:auto;overscroll-behavior-x:contain; }
.channel-strip { flex:0 0 88px;width:88px;gap:3px; }
.channel-label { font-size:12px;margin:0; }
.fader-track { min-height:78px; }
input[type=range].fader { width:86px;height:28px;padding:0;border:none;background:linear-gradient(to bottom,transparent 11px,#41494a 11px,#41494a 17px,transparent 17px);touch-action:none; }
input[type=range].fader::-webkit-slider-thumb { width:20px;height:32px;border-radius:5px; }
.mute-btn { width:40px;min-height:30px; }
button,input,select { touch-action:manipulation; }
button:focus-visible,select:focus-visible,input:focus-visible { outline:2px solid #83d9ba;outline-offset:2px; }
.bar-card { min-width:0; }
.bar-card select,.bar-card input { min-width:0; }
.file-modal-box { width:min(640px,calc(100vw - 24px));max-height:85dvh;overflow:auto; }
#newFileName { min-width:0; }
@media(max-width:768px) {
 :root { --mixer-height:156px; }
 .toolbar { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:10px 12px; }
 #btnMenu { grid-column:span 1;margin:0 !important;min-height:40px; }
 .toolbar-logo { grid-column:span 5;height:38px;max-width:210px;justify-self:start; }
 .toolbar .template-control { grid-column:1/-1;min-width:0; }
 .toolbar .control-group:not(.template-control) { grid-column:span 2;min-width:0;flex-direction:column;align-items:stretch;gap:4px; }
 .toolbar .control-group label { font-size:12px;white-space:nowrap; }
 .toolbar .template-control label { font-size:13px; }
 .toolbar .control-group input,.toolbar .control-group select { width:100% !important;min-width:0 !important;min-height:38px; }
 .toolbar .template-control select { min-height:42px; }
 .toolbar .btn-group { display:flex;gap:4px; }
 .toolbar .btn-group button { flex:1;min-height:38px; }
 .toolbar-spacer { display:none; }
 #btnGenerate,#btnStop,#btnAddBar { grid-column:span 2;min-height:42px;padding:6px;font-size:14px;white-space:nowrap; }
 .bar-grid { padding:12px !important;gap:12px !important;grid-template-columns:1fr !important; }
 .bar-card { padding:10px; }
 .bar-card select,.bar-ts-input { min-height:38px;font-size:13px; }
 .beat-container { grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:6px !important; }
 .bar-card[data-beats="3"] .beat-container,.bar-card[data-beats="6"] .beat-container { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
 .beat-box { min-width:0;height:58px !important; }
 .beat-input { width:100%;font-size:15px !important;padding:3px; }
 .beat-delete-btn { min-width:26px;min-height:24px; }
 .bar-card .delete-btn { pointer-events:auto;min-width:30px;min-height:30px;right:4px !important;top:4px !important;opacity:1 !important; }
 .seg-row { padding-right:30px; }
 .mixer-dock { gap:8px;padding-left:10px;padding-right:10px; }
 .channel-strip { flex:0 1 86px;min-width:62px;gap:2px; }
 .fader-track { min-height:68px; }
 input[type=range].fader { width:68px; }
 .channel-label { font-size:11px; }
 .mute-btn { min-height:30px; }
 #chordPicker { position:fixed;left:12px !important;right:12px;top:auto !important;bottom:calc(var(--mixer-visible) + env(safe-area-inset-bottom) + 8px);width:auto;max-height:calc(100dvh - var(--mixer-visible) - 36px);overflow-y:auto; }
 .cp-btn { min-height:40px;display:flex;align-items:center;justify-content:center; }
 .sidebar { max-width:85vw; }
 .file-item { gap:8px; }
 .file-info { min-width:0; }
 .file-name { overflow-wrap:anywhere; }
 .file-modal-box input { font-size:16px; }
}
@media(max-width:360px) {
 .toolbar { padding:8px;gap:6px; }
 .bar-grid { padding:8px !important; }
}

.mixer-panel { position:fixed;bottom:0;left:0;right:0;z-index:999;background:#181818;box-shadow:0 -3px 16px #0008;border-top:1px solid #3b4647;transform:translateY(0);transition:transform .22s ease; }
.mixer-toggle { display:block;width:100%;height:var(--mixer-handle);min-height:40px;border:0;border-radius:0;background:#242b2c;color:#cce8df;font-size:13px;cursor:pointer; }
.mixer-dock { position:static;border:0;box-shadow:none; }
.mixer-collapsed .mixer-panel { transform:translateY(var(--mixer-height)); }
.mixer-collapsed .mixer-toggle { height:calc(var(--mixer-handle) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom); }
.mixer-collapsed .mixer-dock { height:var(--mixer-height); }
.cache-notice { position:fixed;left:16px;right:16px;bottom:calc(var(--mixer-visible) + env(safe-area-inset-bottom) + 12px);z-index:1100;padding:12px;background:#3b3022;color:#ffe4b8;border-radius:8px;font-size:13px; }
@media(prefers-reduced-motion:reduce) { .mixer-panel { transition:none; } }