/* ==========================================================================
   TABLET STYLESHEET — scoped under body[data-device="tablet"].
   Loaded alongside styles.css and mobile.css.
   - Portrait (768–1099):   single panel + workspace tab bar (mobile-style)
   - Landscape (1100–1365): two columns chat | companion + slide-in drawer
   ========================================================================== */

/* ---------- TABLET LANDSCAPE (1100-1365) -------------------------------- */

body[data-device="tablet"][data-orientation="landscape"] #workspace {
  grid-template-columns: minmax(0, 1.2fr) 6px minmax(0, 1fr);
  grid-template-rows: 1fr;
  grid-template-areas: "chat split1 companion";
  gap: 12px 0;
  padding: 10px;
  height: calc(100vh - 56px);
}

body[data-device="tablet"][data-orientation="landscape"] #col-splitter-2 {
  display: none;
}

body[data-device="tablet"][data-orientation="landscape"] #workspace-tab-bar {
  display: none;
}

/* Drawer overlays the right edge over the companion column. */
body[data-device="tablet"][data-orientation="landscape"] #secondary-column {
  position: fixed;
  top: 56px;
  right: 0;
  bottom: 0;
  width: min(420px, 60vw);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  background: var(--panel-bg, #0d1117);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
}
body[data-device="tablet"][data-orientation="landscape"] #secondary-column.is-open {
  transform: translateX(0);
}

body[data-device="tablet"][data-orientation="landscape"] .secondary-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 44px;
  height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  z-index: 51;
}

/* ---------- HEADER COMPRESSION (both orientations) ---------------------- */

/* The tablet header stays in normal flow (unlike mobile, which fixes it), so
   the studio stage must size to the space BELOW it. Single token keeps the
   height and the stage's calc() in lockstep. */
body[data-device="tablet"] {
  --app-header-h: 56px;
}

body[data-device="tablet"] #top-bar {
  padding: 8px 12px;
  height: var(--app-header-h, 56px);
  box-sizing: border-box;
}

body[data-device="tablet"] #top-bar .subtitle { display: none; }
body[data-device="tablet"] #top-bar h1 { font-size: 16px; }

/* ---------- TOUCH TARGETS — Apple HIG 44x44 minimum -------------------- */

body[data-device="tablet"] .workspace-tab-button,
body[data-device="tablet"] .secondary-tab-button,
body[data-device="tablet"] #top-bar button,
body[data-device="tablet"] .user-trigger {
  min-height: 44px;
  min-width: 44px;
}

body[data-device="tablet"] .workspace-tab-bar,
body[data-device="tablet"] .secondary-tab-bar {
  padding: 6px 10px;
  gap: 6px;
}

/* ---------- COL SPLITTER (landscape only) ------------------------------ */

body[data-device="tablet"][data-orientation="landscape"] .col-splitter {
  display: block;
  width: 12px;
  margin: 0 2px;
}

/* ---------- TABLET PORTRAIT (768-1099) ---------------------------------- */
/* Reuses the mobile single-panel pattern via .is-mobile-primary so JS at
   app.js:setWorkspacePanel needs only one new branch. */

body[data-device="tablet"][data-orientation="portrait"] #workspace {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
  gap: 0 !important;
  padding: 0 !important;
  padding-top: 96px !important; /* 56px tablet header + 40px tab bar */
  height: 100vh !important; /* fallback */
  height: 100dvh !important;
  overflow: hidden !important;
}

body[data-device="tablet"][data-orientation="portrait"] #left-pane,
body[data-device="tablet"][data-orientation="portrait"] #secondary-column {
  display: contents;
}

body[data-device="tablet"][data-orientation="portrait"] .panel {
  min-height: 0;
  flex-shrink: 0;
  border-radius: 10px;
}

body[data-device="tablet"][data-orientation="portrait"] .panel.is-mobile-primary {
  flex: 1;
  order: -1;
  display: flex !important;
  flex-direction: column;
  min-height: 0 !important;
  overflow: hidden;
}

body[data-device="tablet"][data-orientation="portrait"] .panel:not(.is-mobile-primary) {
  display: none !important;
}

body[data-device="tablet"][data-orientation="portrait"] #agent-panel.is-secondary-active:not(.is-mobile-primary) {
  display: flex !important;
  order: 1;
  flex: 0 0 clamp(240px, 34vh, 420px);
  min-height: 240px !important;
  max-height: 44vh;
  overflow: hidden;
}

body[data-device="tablet"][data-orientation="portrait"] #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #secondary-column {
  display: none !important;
}

body[data-device="tablet"][data-orientation="portrait"] #workspace:has(#workspace-tab-bar [data-workspace-panel="agent"].is-active):has(#secondary-tab-bar [data-secondary-tab="companion"].is-active) #agent-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

body[data-device="tablet"][data-orientation="portrait"].conversation-mode-active #agent-panel {
  display: flex !important;
  order: 1;
  flex: 0 0 clamp(220px, 30vh, 360px);
  min-height: 220px !important;
  max-height: 38vh;
  overflow: hidden;
}

body[data-device="tablet"][data-orientation="portrait"] .col-splitter,
body[data-device="tablet"][data-orientation="portrait"] #col-splitter-2,
body[data-device="tablet"][data-orientation="portrait"] .secondary-drawer-toggle {
  display: none !important;
}

body[data-device="tablet"][data-orientation="portrait"] .workspace-tab-bar {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  z-index: 199;
  display: flex;
  height: 40px;
  padding: 4px 10px;
  gap: 4px;
  background: var(--bg-color, #0b1020);
  box-sizing: border-box;
}

/* Studio shell overrides the legacy tablet single-panel tab stack. The header
   is in flow, so the workspace fills the viewport MINUS the header height (no
   100dvh overflow) and only needs a small breathing-room top padding rather
   than a header-sized one. */
body[data-device="tablet"] #workspace.studio-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "studio-stage" !important;
  gap: 0 !important;
  padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  height: calc(100dvh - var(--app-header-h, 56px)) !important;
  overflow: hidden !important;
}

body[data-device="tablet"] #workspace.studio-shell .studio-module-stage {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  /* Stretch the active module to fill the stage vertically. */
  grid-template-rows: minmax(0, 1fr) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: 10px !important;
  min-height: 0 !important;
}

body[data-device="tablet"][data-orientation="landscape"] #workspace.studio-shell {
  grid-template-columns: 224px minmax(0, 1fr) !important;
  grid-template-areas: "studio-sidebar studio-stage" !important;
  padding: 10px !important;
}

body[data-device="tablet"][data-orientation="landscape"] #workspace.studio-shell[data-studio-layout="split"] .studio-module-stage,
body[data-device="tablet"][data-orientation="landscape"] #workspace.studio-shell[data-studio-layout="grid"] .studio-module-stage {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Portrait split: stack the two panels vertically (top / bottom) instead of side-by-side. */
body[data-device="tablet"][data-orientation="portrait"] #workspace.studio-shell[data-studio-layout="split"] .studio-module-stage {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

body[data-device="tablet"] #workspace.studio-shell .studio-module-panel {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body[data-device="tablet"] #workspace.studio-shell .studio-module-panel.hidden {
  display: none !important;
}

/* ── Voice module fills the stage on tablet-portrait (single-panel) ──────── */
body[data-device="tablet"][data-orientation="portrait"] #workspace.studio-shell #voice-panel .voice-panel-body,
body[data-device="tablet"][data-orientation="portrait"] #workspace.studio-shell #voice-panel .voice-panel-overlay-anchor {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

body[data-device="tablet"][data-orientation="portrait"] #workspace.studio-shell #voice-panel .conversation-overlay {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
}

/* ── Companion (agent) module fills the stage on tablet-portrait ─────────── */
body[data-device="tablet"][data-orientation="portrait"] #workspace.studio-shell #agent-panel.is-emphasized .agent-active-display,
body[data-device="tablet"][data-orientation="portrait"] #workspace.studio-shell #agent-panel.is-emphasized .agent-console-render {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* ── Neutralize the legacy conversation-mode docking strip under the shell ──
   The bottom-strip height + display rules predate the studio shell. Inside the
   shell, the agent panel is a proper grid module whose size is controlled by
   the stage layout — not by conversation mode. Remove the height cap for all
   states; only hide the panel in focus layout when it is not the active module
   (split/grid layouts must keep non-emphasized companion visible as a peer panel). */
body[data-device="tablet"][data-orientation="portrait"].conversation-mode-active #workspace.studio-shell #agent-panel {
  min-height: 0 !important;
  max-height: none !important;
}
body[data-device="tablet"][data-orientation="portrait"].conversation-mode-active #workspace.studio-shell[data-studio-layout="focus"] #agent-panel:not(.is-emphasized) {
  display: none !important;
}
body[data-device="tablet"][data-orientation="portrait"].conversation-mode-active #workspace.studio-shell #agent-panel.is-emphasized {
  order: 0;
  flex: 1 1 auto !important;
}

/* Touch targets: bump the voice overlay header controls above the 44px minimum
   on tablets too (they are 26px on desktop). */
body[data-device="tablet"] .conv-overlay-iconbtn {
  width: 40px !important;
  height: 40px !important;
  font-size: 16px !important;
}