/* Showduino Studio 3 — professional DAW shell + dedicated touch layout */
:root {
  --studio-bg: #0b0f13;
  --studio-surface: #121820;
  --studio-surface-2: #18212b;
  --studio-surface-3: #202b36;
  --studio-border: #2d3a46;
  --studio-text: #eef4f6;
  --studio-muted: #8fa0ac;
  --studio-accent: #00e6c3;
  --studio-danger: #ff4b55;
  --studio-topbar: 58px;
  --studio-sidebar: 224px;
  --studio-radius: 8px;
}

html, body { background: var(--studio-bg); }
body { overflow: hidden; }
.app-container { background: var(--studio-bg); color: var(--studio-text); }

/* ---------- Desktop application shell ---------- */
@media (min-width: 901px) {
  .app-container { display: grid; grid-template-columns: var(--studio-sidebar) minmax(0,1fr); grid-template-rows: 1fr; height: 100dvh; min-height: 0; }
  .sidebar { width: var(--studio-sidebar); min-width: var(--studio-sidebar); height: 100dvh; max-height: none; border: 0; border-right: 1px solid var(--studio-border); background: #0f151b; overflow: hidden; }
  .sidebar-header { min-height: 72px; display: grid; place-items: center; padding: 14px 12px; border-color: var(--studio-border); }
  .logo { margin: 0; font-size: 20px; letter-spacing: -.02em; text-shadow: none; }
  .sidebar-nav { overflow-y: auto; }
  .sidebar-nav li { padding: 13px 16px; border-color: rgba(255,255,255,.05); font-size: 13px; color: #b7c3cc; }
  .sidebar-nav li.active { background: rgba(0,230,195,.12); color: var(--studio-accent); box-shadow: inset 3px 0 0 var(--studio-accent); }
  .sidebar-nav li:hover { background: rgba(255,255,255,.045); color: #fff; }
  .main-content { height: 100dvh; min-height: 0; overflow: hidden; }
  .top-bar { min-height: var(--studio-topbar); padding: 8px 12px; flex-wrap: nowrap; gap: 10px; background: #10161c; border-color: var(--studio-border); }
  .top-bar > div { min-width: 0; }
  .workspace { padding: 8px; overflow: hidden; min-height: 0; }
  .bottom-dock { position: fixed; z-index: 30; left: var(--studio-sidebar); right: 0; bottom: 0; background:#0e141a; border-color:var(--studio-border); }
  .bottom-dock.collapsed { height: 32px; }
  .timeline-editor { min-height: 0 !important; height: calc(100dvh - 108px) !important; border: 1px solid var(--studio-border); border-radius: var(--studio-radius); overflow: hidden !important; box-shadow: 0 14px 45px rgba(0,0,0,.25); }
  .timeline-main { min-height: 0; }
  .timeline-editor .tl-left { width: 220px !important; min-width: 220px !important; }
  .timeline-editor .tl-inspector { width: 300px !important; min-width: 300px !important; }
}

/* Professional toolbar */
.timeline-editor .tl-toolbar {
  min-height: 48px;
  padding: 7px 8px !important;
  gap: 5px !important;
  background: #151d25 !important;
  border-color: var(--studio-border) !important;
  scrollbar-width: thin;
}
.timeline-editor .btn-toolbar {
  min-height: 32px;
  padding: 5px 9px !important;
  background: #202a34 !important;
  border: 1px solid #354553 !important;
  border-radius: 5px !important;
  color: #e6edf1 !important;
  font-size: 11px !important;
}
.timeline-editor .btn-toolbar:hover { background:#293744 !important; border-color:var(--studio-accent) !important; color:var(--studio-accent) !important; }
#tl-timecode { color:var(--studio-accent)!important; background:#080c10!important; border:1px solid #26333d; font-variant-numeric: tabular-nums; }
.timeline-editor .tl-right { background:#0c1116; min-width:0; }
.timeline-editor .tl-ruler { background:#161e26!important; border-color:var(--studio-border)!important; }
.timeline-editor .tl-marker-track { background:#11171d!important; border-color:var(--studio-border)!important; }
.timeline-editor .tl-canvas-scroll { background:#0b1015; overscroll-behavior:contain; }
.timeline-editor .tl-left { background:#111820!important; border-color:var(--studio-border)!important; }
.timeline-editor .tl-track-header { background:#151d25!important; border-color:var(--studio-border)!important; }
.timeline-editor .tl-track-row { background-color:#0e141a!important; }
.timeline-editor .tl-inspector { background:#111820!important; border-left:1px solid var(--studio-border)!important; }

/* ---------- Tablet ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  body { overflow:hidden; }
  .app-container { height:100dvh; min-height:0; display:flex; flex-direction:row; }
  .sidebar { width:72px; min-width:72px; height:100dvh; max-height:none; overflow:hidden; border:0; border-right:1px solid var(--studio-border); background:#10161c; }
  .sidebar-header { padding:12px 4px; }
  .logo { font-size:0; }
  .logo::before { content:'S'; font-size:24px; color:var(--studio-accent); }
  .sidebar-nav li { font-size:0; min-height:52px; padding:0; display:grid; place-items:center; border-color:rgba(255,255,255,.05); }
  .sidebar-nav li::first-letter { font-size:0; }
  .sidebar-nav li[data-panel="timeline-editor"]::after { content:'TL'; font-size:11px; }
  .sidebar-nav li[data-panel="playback"]::after { content:'▶'; font-size:16px; }
  .sidebar-nav li[data-panel="audio-manager"]::after { content:'♫'; font-size:18px; }
  .sidebar-nav li[data-panel="hauntsync"]::after { content:'☁'; font-size:18px; }
  .sidebar-nav li[data-panel="connect"]::after { content:'↥'; font-size:18px; }
  .sidebar-nav li[data-panel="settings"]::after { content:'⚙'; font-size:17px; }
  .sidebar-nav li[data-panel="help"]::after { content:'?'; font-size:17px; }
  .main-content { height:100dvh; }
  .top-bar { min-height:54px; padding:6px 8px; flex-wrap:nowrap; overflow-x:auto; }
  .workspace { padding:6px; overflow:hidden; }
  .bottom-dock { display:none; }
  .timeline-editor { height:calc(100dvh - 70px)!important; min-height:0!important; border:1px solid var(--studio-border); border-radius:6px; }
  .timeline-editor .tl-left { width:180px!important; min-width:180px!important; }
  .timeline-editor .tl-inspector { display:none!important; }
}

/* ---------- Phone: dedicated companion editor ---------- */
@media (max-width: 600px) {
  html, body { width:100%; height:100%; overflow:hidden; }
  body { padding:0; background:#080c10; }
  .app-container { position:relative; display:block; width:100%; height:100dvh; min-height:0; overflow:hidden; }

  /* Off-canvas app menu */
  .sidebar {
    position:fixed; z-index:1000; inset:0 auto 0 0;
    width:min(82vw,320px); height:100dvh; max-height:none;
    transform:translateX(-105%); transition:transform .22s ease;
    background:#10171e; border:0; border-right:1px solid var(--studio-border);
    box-shadow:20px 0 50px rgba(0,0,0,.45); overflow-y:auto;
  }
  body.studio-menu-open .sidebar { transform:translateX(0); }
  body.studio-menu-open::after { content:''; position:fixed; z-index:900; inset:0; background:rgba(0,0,0,.58); }
  .sidebar-header { padding:22px 18px 14px; text-align:left; border-color:var(--studio-border); }
  .logo { margin:0; font-size:20px; text-shadow:none; }
  .sidebar-nav li { padding:15px 18px; font-size:14px; border-color:rgba(255,255,255,.06); }
  .sidebar-nav li.active { background:rgba(0,230,195,.12); color:var(--studio-accent); box-shadow:inset 3px 0 0 var(--studio-accent); }

  .main-content { width:100%; height:100dvh; min-height:0; overflow:hidden; display:flex; flex-direction:column; }
  .top-bar {
    min-height:56px; height:auto; flex:0 0 auto;
    padding:7px 8px; display:grid; grid-template-columns:auto minmax(0,1fr) auto;
    gap:7px; align-items:center; background:#10161c; border-color:var(--studio-border);
  }
  .top-bar > div { width:auto!important; min-width:0; }
  .top-bar > div:first-child { grid-column:1; }
  .top-bar .back-to-menu-btn { display:none; }
  .top-bar .connection-status { display:none; }
  .show-info { grid-column:2; grid-row:1; justify-content:center!important; min-width:0; }
  .show-info .show-name { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; }
  .show-info .save-icon { font-size:16px; }
  .studio-project-actions { grid-column:3; grid-row:1; width:auto!important; display:flex!important; justify-content:flex-end; }
  .studio-project-actions > *:not(.studio-deploy-btn) { display:none!important; }
  .studio-deploy-btn { min-height:36px!important; padding:6px 9px!important; font-size:0!important; }
  .studio-deploy-btn::after { content:'↥'; font-size:18px; }
  .transport-controls, .system-info { display:none!important; }

  .workspace { flex:1 1 auto; min-height:0; padding:0; overflow:hidden; background:#080c10; }
  .workspace > * { height:100%; }
  .bottom-dock { display:none!important; }

  /* Timeline is the app, not a squeezed desktop pane */
  .timeline-editor { height:100%!important; min-height:0!important; width:100%!important; overflow:hidden!important; border:0!important; border-radius:0!important; background:#0a0f14!important; }
  .timeline-editor .tl-toolbar {
    order:2; flex:0 0 auto; width:100%; min-height:46px; max-height:92px;
    overflow-x:auto!important; overflow-y:hidden!important; flex-wrap:nowrap!important;
    padding:6px!important; gap:4px!important; scrollbar-width:none;
    border-top:1px solid var(--studio-border)!important; border-bottom:1px solid var(--studio-border)!important;
  }
  .timeline-editor .tl-toolbar::-webkit-scrollbar { display:none; }
  .timeline-editor .tl-toolbar > div { flex-wrap:nowrap!important; flex-shrink:0; }
  .timeline-editor .tl-toolbar > div:first-child { display:none!important; }
  .timeline-editor .tl-toolbar > div[style*="width:1px"] { display:none!important; }
  .timeline-editor .btn-toolbar { min-width:42px; min-height:38px; padding:7px 9px!important; font-size:10px!important; touch-action:manipulation; }
  #tl-timecode { order:-1; margin:0!important; min-width:102px!important; min-height:38px; display:grid; place-items:center; font-size:13px!important; }

  .timeline-main { order:1; flex:1 1 auto!important; min-height:0; width:100%; display:block!important; position:relative; overflow:hidden!important; }
  .timeline-editor .tl-right { position:absolute!important; inset:0!important; width:100%!important; height:100%!important; display:flex!important; min-width:0!important; }
  .timeline-editor .tl-left {
    position:absolute!important; z-index:40; inset:0 auto 0 0; width:min(80vw,300px)!important; min-width:0!important; height:100%;
    transform:translateX(-105%); transition:transform .2s ease; box-shadow:16px 0 40px rgba(0,0,0,.55);
  }
  body.studio-library-open .timeline-editor .tl-left { transform:translateX(0); }
  .timeline-editor .tl-inspector {
    display:block!important; position:absolute!important; z-index:45; inset:auto 0 0 0!important;
    width:100%!important; min-width:0!important; height:min(52vh,440px)!important; max-height:52vh!important;
    transform:translateY(105%); transition:transform .2s ease; box-shadow:0 -18px 45px rgba(0,0,0,.55);
    border-left:0!important; border-top:1px solid var(--studio-border)!important;
  }
  body.studio-inspector-open .timeline-editor .tl-inspector { transform:translateY(0); }

  .timeline-editor .tl-ruler { height:34px!important; min-height:34px; }
  .timeline-editor .tl-marker-track { height:30px!important; min-height:30px; }
  .timeline-editor .tl-canvas-scroll { -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y; }
  .timeline-editor .tl-canvas { min-height:100%; }
  .timeline-editor .tl-track-row { min-height:68px!important; }
  .timeline-editor .tl-clip { min-height:44px; border-radius:6px!important; }

  /* Fixed mobile command strip */
  .studio-mobile-bar {
    position:fixed; z-index:800; left:0; right:0; bottom:0;
    height:58px; padding:6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
    background:rgba(12,17,22,.97); border-top:1px solid var(--studio-border); backdrop-filter:blur(12px);
  }
  .studio-mobile-bar button {
    border:1px solid #30404d; border-radius:8px; background:#17212a; color:#dce7eb;
    font-size:11px; font-weight:700; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-width:0; touch-action:manipulation;
  }
  .studio-mobile-bar button .mobile-icon { font-size:17px; line-height:1; }
  .studio-mobile-bar button.mobile-play { background:var(--studio-accent); color:#06110f; border-color:var(--studio-accent); }
  .studio-mobile-bar button.active { color:var(--studio-accent); border-color:var(--studio-accent); }

  /* Leave room for the command strip */
  .workspace { padding-bottom:58px; }

  /* Drawer overlay for library / inspector */
  body.studio-library-open .workspace::after,
  body.studio-inspector-open .workspace::after { content:''; position:absolute; z-index:35; inset:0 0 58px 0; background:rgba(0,0,0,.38); pointer-events:none; }

  /* Make non-timeline panels readable on phone */
  .workspace > :not(.timeline-editor) { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px; }
}

@media (max-width: 380px) {
  .studio-mobile-bar button { font-size:9px; }
  .timeline-editor .btn-toolbar { padding-inline:7px!important; }
}