/* v0.5.101: phone/tablet layout. Desktop rules and waveform/audio logic are retained. */
.mobile-workspace-nav {display:none}
.mobile-workspace-nav[hidden] {display:none!important}
.mobile-library-help {display:none}

@media (max-width:1050px) {
  html {scroll-padding-top:90px}
  #app main {padding:10px;min-width:0}
  #app .app-header {position:relative}
  #app .brand-row {height:auto;min-height:60px;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px}
  #app .brand-lockup {max-width:100%;align-items:center}
  #app .brand-descriptor {display:none}
  #app .station-tools {flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}
  #app .menu-strip {flex-wrap:wrap;gap:4px;padding:4px 8px}
  #app .menu-btn {min-height:44px;padding:10px 12px;flex-shrink:0}
  #app .menu-spacer {min-width:0}
  #app .page-toolbar {flex-wrap:wrap;gap:10px}
  #app .app-view,#app .spl-panel,#app .form-grid>*,#app .two-col>* {min-width:0}
  #app :is(input,select,textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]) {
    min-height:44px;min-width:0;max-width:100%;font-size:16px;
  }
  #app :is(.spl-btn,.log-mini-btn,.mini-media,.wave-more-btn,.window-close) {
    min-height:44px;min-width:44px;height:auto;font-size:13px;touch-action:manipulation;
  }
  #app .window-close {width:44px;height:44px;flex:0 0 44px}
  #app .date-nav .spl-btn.square.vt-day-nav {width:44px;height:44px;min-height:44px;min-width:44px;flex:0 0 44px}
  #app .date-nav {gap:8px;flex-wrap:wrap;min-width:0}
  #app .date-nav input[type="date"] {width:170px;max-width:100%;flex:1 1 150px}
  #app .hour-picker-label {min-width:0;margin-left:0}
  #app .hour-select {min-width:90px}
  #app .panel-caption {height:auto;min-height:44px;gap:8px;padding:8px 10px;flex-wrap:wrap}
  #app .caption-meta {max-width:100%;white-space:normal;overflow-wrap:anywhere}

  /* The original panels stay mounted: changing the visible pane never stops audio. */
  #app .mobile-workspace-nav {
    display:flex;flex-wrap:wrap;gap:6px 8px;position:sticky;top:0;z-index:20;
    padding:8px 0;background:#0b1424;scroll-margin-top:0;
  }
  #app .mobile-workspace-nav button {flex:1;min-width:0;min-height:44px}
  #app .mobile-workspace-status {flex:0 0 100%;min-width:0;font-size:11px;line-height:1.35;color:#fff;overflow-wrap:anywhere}
  #app .mobile-workspace-status:empty {display:none}
  #app .mobile-workspace-nav button[aria-pressed="true"] {
    background:linear-gradient(180deg,#368ffc,#116fdc);border-color:#347cdb;color:#fff;
  }
  #app #logEditorLayout {grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
  #app #logEditorLayout[data-mobile-pane="log"] > #logRightWorkspace {display:none}
  #app #logEditorLayout[data-mobile-pane="right"] > .log-editor-panel {display:none}
  #app :is(.log-editor-panel,.log-library-panel,.log-right-workspace,.log-vt-workspace) {height:auto;min-height:0}
  #app .log-editor-list {flex:0 1 auto;max-height:62vh;max-height:62dvh;min-height:180px;overflow:auto;overscroll-behavior-y:contain}
  #app .log-library-list {flex:0 1 auto;max-height:65vh;max-height:65dvh;min-height:160px;overflow:auto;overscroll-behavior-y:contain}
  #app .log-editor-header,#app .log-edit-row {grid-template-columns:94px 110px minmax(0,1fr) 54px 192px}
  #app .log-edit-buttons {gap:4px;flex-wrap:nowrap;padding:4px 0}
  #app .log-edit-buttons .log-mini-btn {width:44px;height:44px;flex:0 0 44px;padding:0}
  #app .log-button-spacer {width:44px;flex:0 0 44px}
  #app .log-hour-tools {flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;min-width:0}
  #app .log-hour-tools .caption-meta {flex-basis:100%;text-align:left}
  #app .log-hour-tools .log-vt-jump-btn {height:44px;width:44px;min-width:44px;min-height:44px}
  #app .log-hour-tools .record-vt-btn {height:auto;min-height:44px;font-size:13px;padding:8px 12px}
  #app .log-editor-footer {gap:10px;flex-wrap:wrap;padding:10px}
  #app .log-editor-status {white-space:normal;overflow-wrap:anywhere}
  #app .log-editor-actions {display:flex;gap:8px;margin-left:auto}
  #app .log-library-browser {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:10px}
  #app .log-library-search-field {grid-column:1/-1;grid-row:2}
  #app .log-library-row {gap:10px;padding:10px}
  #app .log-library-actions {flex-wrap:wrap;gap:6px}
  #app .log-library-row .log-library-actions :is(.log-library-play,.log-library-wave) {
    width:44px!important;min-width:44px!important;height:44px!important;min-height:44px;flex:0 0 44px;
  }
  #app .log-library-row .spl-btn {min-height:44px;font-size:13px;padding:8px 12px}
  #app .desktop-library-help {display:none}
  #app .mobile-library-help {display:inline}

  /* Allow the page to scroll through all three lanes; no fixed-height clipping. */
  #app #logVtPanelHost {height:auto;min-height:0;overflow:visible;flex:0 0 auto}
  #app .log-vt-workspace .tracker-panel {height:auto;min-height:0;overflow:visible}
  #app .log-vt-workspace #tracker {--vt-equal-wave-height:80px;height:auto;overflow:visible}
  #app .log-vt-workspace .tracker-titlebar {position:relative;min-height:44px;height:auto;padding:8px;gap:8px;flex-wrap:wrap}
  #app .log-vt-workspace .tracker-titlebar strong {font-size:14px;overflow-wrap:anywhere}
  #app .log-vt-workspace .vt-main-layout,#app .log-vt-workspace .vt-wave-column {display:block;height:auto;overflow:visible}
  #app .log-vt-workspace .wave-lane {margin:8px}
  #app .lane-head {grid-template-columns:minmax(0,1fr) 44px;min-height:48px;padding:4px;gap:0 4px}
  #app .lane-head>span {grid-column:1;grid-row:1;font-size:10px}
  #app .lane-head>strong {grid-column:1;grid-row:2;font-size:12px}
  #app .lane-head>.mini-media {grid-column:2;grid-row:1/3;width:44px;height:44px}
  #app :is(.out-wave-tools,.in-wave-tools,.vt-wave-tools,.lane-meta,.record-status-line) {height:auto;max-height:none;min-height:28px;white-space:normal;flex-wrap:wrap;gap:6px;padding:6px 8px}
  #app .out-wave-tools {flex-direction:row;align-items:center}
  #app .out-wave-tools .muted {white-space:normal}
  #app .vt-action-bar {flex-wrap:wrap;gap:8px;padding:10px;position:sticky;bottom:0;z-index:10;background:#182c46;border-radius:0 0 12px 12px}
  #app .vt-action-bar .record-actions {display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px}
  #app .vt-action-bar .spl-btn {flex:1 1 auto;min-width:0;min-height:44px}
  #app .vt-action-bar .record-actions .spl-btn {flex:1 1 90px}
  #app .preview-actions {flex-wrap:wrap;gap:8px}
  #app .preview-actions .spl-btn {flex:1 1 140px;white-space:normal}
  #app .vt-settings-dialog .device-selectors label {grid-template-columns:minmax(0,1fr)}
  #app .vt-settings-dialog .vt-bed-controls {grid-template-columns:minmax(0,1fr)}
  #app .vt-settings-dialog :is(.device-row select,.vt-bed-controls select,.vt-bed-file input) {height:auto;min-height:44px}
  #app :is(input[type="checkbox"],input[type="radio"]) {width:20px;height:20px;min-width:20px;flex-shrink:0}
  #app input[type="range"] {min-height:36px;max-width:100%}
  #app .vt-bed-volume {height:auto;min-height:44px}

  /* Dialogs fit the visual viewport and keep their own contents scrollable. */
  #app .modal-shade {padding:8px;overflow:auto;align-items:center}
  #app .modal-card,#app #teamUserModal .team-user-dialog {
    width:min(760px,100%);max-width:100%;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);
  }
  #app .vt-settings-dialog {width:min(500px,calc(100% - 16px));max-width:500px;max-height:calc(100dvh - 16px)}
  #app .modal-titlebar {min-height:52px}
  #app .modal-titlebar>span:first-child {white-space:normal;overflow-wrap:anywhere}
  #app .modal-actions {flex-wrap:wrap;gap:8px}
  #app .modal-actions .spl-btn {min-height:44px;flex:1 1 110px;white-space:normal}
  #app .form-grid label,#app .field-help {overflow-wrap:anywhere;min-width:0}
  #app #teamUserModal .team-user-form {min-height:0}
  #app #teamUserModal .team-edit-actions {flex-shrink:0}
  #app :is(.hour-check-grid label,.day-check-grid label,.check-line,.mic-enhance-control) {min-height:44px}
  #app #libraryWaveWindow {
    left:8px!important;top:8px!important;width:calc(100% - 16px);max-width:none;
    max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);
  }
  #app .library-wave-inner {min-height:0;overscroll-behavior:contain}
  #app .library-wave-set button,#app .library-wave-zoom button {height:44px;min-height:44px}
  #app .library-wave-transport {flex-wrap:wrap}
  #app .library-wave-footer {flex-wrap:wrap}
  #app .library-wave-footer .spl-btn {flex:1 1 auto}
  #app :is(.billing-grid,.admin-grid) {grid-template-columns:minmax(0,1fr)}
  #app :is(.billing-user-row,.admin-row) {grid-template-columns:minmax(0,1fr);gap:10px}
  #app :is(.billing-station-row,.billing-team-toolbar) {flex-wrap:wrap;align-items:stretch}
  #app :is(.billing-user-actions,.billing-station-actions,.admin-row .row-actions) {flex-wrap:wrap;justify-content:flex-start;gap:8px}
  #app :is(.billing-user-row,.billing-station-row,.admin-row) :is(strong,span) {overflow-wrap:anywhere;white-space:normal}
  #app .billing-team-toolbar label {min-width:0;flex:1 1 200px}
  #app .billing-team-toolbar select {min-width:0;max-width:100%}
  #app .whmcs-form {flex-wrap:wrap;min-width:0}
  #app .whmcs-form>* {min-width:0;max-width:100%}
  #app .app-legal {padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  #app .brand-row {padding-top:max(10px,env(safe-area-inset-top,0px));padding-left:max(12px,env(safe-area-inset-left,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
  #app .vt-action-bar {padding-bottom:max(10px,env(safe-area-inset-bottom,0px))}
  #app .modal-shade {top:var(--vt-mobile-viewport-top,0px);bottom:auto;height:var(--vt-mobile-viewport-height,100dvh)}
  #app .modal-card,#app #teamUserModal .team-user-dialog {max-height:calc(var(--vt-mobile-viewport-height,100dvh) - 16px)}
  #app .vt-settings-dialog {top:calc(var(--vt-mobile-viewport-top,0px) + 8px);bottom:auto;margin:0 auto;max-height:calc(var(--vt-mobile-viewport-height,100dvh) - 16px)}
  #app #libraryWaveWindow {top:calc(var(--vt-mobile-viewport-top,0px) + 8px)!important;max-height:calc(var(--vt-mobile-viewport-height,100dvh) - 16px)}
}

@media (max-width:700px) {
  #app main {padding:8px}
  #app .brand-row {flex-direction:column;align-items:stretch}
  #app .brand-lockup {flex-wrap:wrap;gap:8px}
  #app .station-tools {width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto}
  #app .station-tools .compact-label {display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;min-width:0}
  #app #stationSelect {width:100%;min-width:0}
  #app .vt-server-state {grid-column:1/-1;font-size:12px;white-space:normal}
  #app .menu-spacer {display:none}
  #app .menu-btn {flex:1 0 auto;font-size:12px;padding:8px 10px}
  #app .page-toolbar {align-items:stretch;flex-direction:column}
  #app .log-page-toolbar h1 {font-size:20px}
  #app .log-page-toolbar p {display:none}
  #app .hour-picker-label {width:100%;display:flex;align-items:center;gap:8px}
  #app .hour-picker-label select {flex:1;min-width:0}
  #app .log-hour-caption {align-items:center}
  #app .log-hour-tools {width:100%;margin-left:0}
  #app .log-hour-tools .record-vt-btn {flex:1}
  #app .log-editor-header {display:none}
  #app .log-edit-row {
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"time type" "copy copy" "length actions";
    gap:2px 8px;padding:8px;min-width:0;
  }
  #app .log-edit-cell {padding:2px 0}
  #app .log-edit-time {grid-area:time;font-size:12px;min-width:0}
  #app .log-edit-type {grid-area:type;display:flex;justify-content:flex-end;padding:0}
  #app .log-edit-type .log-type-text {display:inline;font-size:10px;white-space:normal;text-overflow:clip}
  #app .log-edit-copy {grid-area:copy;padding:4px 0}
  #app .log-edit-copy strong {font-size:14px}
  #app .log-edit-copy :is(strong,span) {white-space:normal;overflow-wrap:anywhere}
  #app .log-edit-length {grid-area:length;display:block;font-size:12px}
  #app .log-edit-buttons {grid-area:actions;padding:0}
  #app .log-drag {display:none}
  #app .log-editor-footer {display:flex;flex-direction:column;align-items:stretch}
  #app .log-editor-actions {margin:0}
  #app .log-editor-actions .spl-btn {flex:1}
  #app .log-library-row {grid-template-columns:minmax(0,1fr)}
  #app .log-library-row :is(strong,span) {white-space:normal;overflow-wrap:anywhere}
  #app .log-library-actions {justify-content:flex-end}
  #app .login-view {padding:16px;min-height:100vh;min-height:100dvh;gap:18px}
  #app .login-body {padding:20px}
  #app .login-brand {padding:10px}
  #app .login-window {max-width:100%}
  #app :is(.two-col,.form-grid,.library-wave-fields,.user-new-station-row) {grid-template-columns:minmax(0,1fr)}
  #app .full-field {grid-column:1/-1}
  #app #teamUserModal :is(.team-edit-fields,.team-spl-credential-fields,.team-permission-grid) {grid-template-columns:minmax(0,1fr)}
  #app #teamUserModal .team-edit-heading {flex-wrap:wrap}
  #app #teamUserModal .team-schedule summary {flex-wrap:wrap}
  #app #teamUserModal .team-schedule-summary {max-width:100%;white-space:normal;text-align:left}
  #app #teamUserModal .team-schedule-content .hour-check-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .hour-check-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  #app .billing-station-create {flex-wrap:wrap}
  #app .billing-station-create input {flex:1 1 100%}
  #app .billing-station-create button {width:100%}
  #app .studio-inline-content {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #app .studio-inline-song {grid-column:1/-1;border-right:0;border-bottom:1px solid #2a405a;padding:8px}
  #app .studio-inline-state {min-width:0;padding:8px}
  #app .studio-inline-extra>span {max-width:100%}
}

/* v0.5.102: compact header and expandable Studio Monitor. */
@media (max-width:1050px) {
  #app .brand-row {gap:6px;min-height:0;padding-top:8px;padding-bottom:6px}
  #app .brand-lockup {gap:8px;flex-wrap:nowrap}
  #app .brand-lockup .header-wordmark {width:160px!important;max-width:55vw!important;height:auto!important}
  #app .brand-lockup .app-version {font-size:10px;padding:3px 6px;line-height:1.4}
  #app .station-tools {display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 8px;width:100%;margin:0}
  #app #stationLogoBtn {grid-column:1;grid-row:1;width:44px!important;height:44px!important;min-width:44px;padding:3px!important;margin:0}
  #app #stationLogoBtn .station-logo-square {width:36px!important;height:36px!important}
  #app #stationPickerWrap {grid-column:2;grid-row:1;display:flex;align-items:center;gap:8px;font-size:12px;margin:0;min-width:0}
  #app #stationSelect {flex:1;min-width:0;width:100%;height:44px;padding:6px 8px}
  #app #vtServerState {grid-column:1/-1;grid-row:2;font-size:11px;line-height:1.3;margin:0}
  #app #adminPanelLabel {grid-column:1/-1;font-size:12px}
  #app .menu-strip {gap:0;padding:0 8px;min-height:44px}
  #app .menu-btn {padding:8px 10px;font-size:12px;min-height:44px}
}

/* v0.5.103: one compact now-playing row on every screen. */
#app #studioMonitorBar {margin-bottom:12px}
#app #studioMonitorBar .studio-simple-content {display:flex;align-items:center;gap:12px;padding:10px 12px;min-width:0}
#app #studioMonitorBar .studio-simple-song {display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
#app #studioMonitorBar .studio-simple-label {font-size:10px;line-height:1.3;font-weight:700;letter-spacing:.06em;color:#fff}
#app #studioMonitorBar #studioNowPlaying {font-size:14px;line-height:1.35;color:#fff;white-space:normal;overflow-wrap:anywhere}
#app #studioMonitorBar #studioNowArtist {font-size:12px;line-height:1.35;color:#fff;white-space:normal;overflow-wrap:anywhere;opacity:1}
#app #studioMonitorBar #studioAutoToggle {flex:0 0 auto;min-width:64px;width:auto;min-height:44px;height:auto;padding:8px 10px;font-size:12px;margin:0}

/* v0.5.104: native track progress and explicit automation states. */
#app #studioProgressTrack {height:4px;background:#243b56}
#app #studioProgressFill {display:block;height:100%;background:#59a9ff;transition:width .35s linear}
#app #studioAutoToggle.is-on {background:#198447;border-color:#35ae68;color:#fff}
#app #studioAutoToggle.is-on:hover:not(:disabled) {background:#209d55;border-color:#49c47c;color:#fff}
#app #studioAutoToggle.is-off {background:#b8323c;border-color:#e15c65;color:#fff}
#app #studioAutoToggle.is-off:hover:not(:disabled) {background:#d03c47;border-color:#f27880;color:#fff}

#app .vt-dry-option {display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:12px;color:#fff;white-space:nowrap;cursor:pointer}
#app .vt-dry-option input {width:18px;height:18px;accent-color:#368ffc;margin:0}
#app .record-actions {flex-wrap:wrap}

/* v0.5.106: let the caption contain its full touch-sized Close button. */
@media (max-width:1050px) {
  #app .log-vt-workspace > .log-vt-caption {flex:0 0 auto;height:auto;min-height:60px;box-sizing:border-box;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 10px}
  #app .log-vt-caption #closeLogVt {flex:0 0 auto;min-height:44px;height:auto;line-height:1.2;padding:8px 12px;white-space:nowrap;margin-left:auto}
}