/* Unified responsive cleanup (portrait/mobile first) */
@media (max-width: 980px), (orientation: portrait) {
  html,
  body {
    overflow-x: hidden;
  }

  .shell,
  .shell.sidebar-collapsed {
    position: relative;
    min-height: 100dvh;
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-width: 340px;
    z-index: 120;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 10px 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(0);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .shell.sidebar-collapsed .sidebar {
    transform: translateX(calc(-100% - 8px));
    opacity: 0;
    pointer-events: none;
  }

  .main-shell {
    min-height: 100dvh;
    width: 100%;
  }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    padding: 10px 12px;
    gap: 8px;
  }

  .topbar-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .topbar-actions .sidebar-toggle-btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .topbar-actions .status-chip {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  .page-host {
    padding: 10px;
    overflow-x: hidden;
  }

  .row-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .row-actions .btn {
    flex: 1 1 calc(50% - 8px);
    min-width: 120px;
  }

  .accounts-layout,
  .commands-layout,
  .plugins-layout,
  .macros-layout,
  .dashboard-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .accounts-table-card {
    height: auto;
    max-height: min(70dvh, 760px);
  }

  .dashboard-selected-card,
  .dashboard-window-pane,
  .dashboard-map-pane,
  .account-grid-card {
    min-width: 0;
  }

  .account-grid {
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  }

  .card,
  .settings-card,
  .proxy-section,
  .command-settings-panel .dark-box {
    min-width: 0;
  }
}

@media (max-width: 760px) and (orientation: portrait) {
  .topbar h1 {
    font-size: clamp(18px, 5.2vw, 22px);
  }

  .topbar p {
    font-size: 12px;
  }

  .runtime-engine-top {
    width: 100%;
    justify-content: space-between;
  }

  .runtime-engine-top select {
    min-width: 0;
    width: 100%;
  }

  .accounts-bulk-actions {
    padding: 10px;
  }

  .account-table-head,
  .account-row {
    min-width: 580px;
  }
}

/* Macro builder: usable touch UX on portrait/mobile */
@media (max-width: 980px), (orientation: portrait) {
  .builder {
    overflow: hidden;
  }

  .builder-shell {
    min-height: 100dvh;
    height: 100dvh;
  }

  .builder-topbar {
    position: sticky;
    top: 0;
    z-index: 200;
    padding: 8px;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .builder-title {
    font-size: 21px;
  }

  .builder-pill {
    font-size: 11px;
    padding: 3px 6px;
  }

  .builder-top-actions {
    margin-left: auto;
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    justify-content: flex-end;
    flex: 0 0 auto;
  }

  .builder-top-actions .btn,
  .builder-topbar > .btn,
  .builder-pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .builder-body {
    height: calc(100dvh - 96px);
  }

  .builder-center {
    min-height: 0;
    height: 100%;
  }

  .builder-canvas {
    min-height: 0;
    height: 100%;
  }

  .builder-canvas-head {
    flex-wrap: wrap;
  }

  .builder-canvas-head .row-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .builder-canvas-head .row-actions .btn {
    flex: 0 0 auto;
    min-width: 0;
  }

  .builder-left,
  .builder-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: min(92vw, 380px);
    max-width: 380px;
    z-index: 40;
    border-top: 1px solid var(--line);
    box-shadow: 0 0 26px rgba(0, 0, 0, 0.6);
    background: rgba(17, 24, 34, 0.98);
  }

  .builder-left {
    left: 0;
    right: auto;
    border-left: 0;
    border-right: 1px solid rgba(175, 190, 212, 0.2);
  }

  .builder-right {
    right: 0;
    left: auto;
    border-right: 0;
    border-left: 1px solid rgba(175, 190, 212, 0.2);
  }

  .builder-scroll {
    padding: 10px 10px calc(88px + env(safe-area-inset-bottom));
  }

  .builder-right input {
    margin: 8px 10px calc(10px + env(safe-area-inset-bottom));
    width: calc(100% - 20px);
  }
}

@media (max-width: 560px) {
  .builder-topbar {
    padding: 6px;
  }

  .builder-title {
    font-size: 18px;
  }

  .builder-body {
    height: calc(100dvh - 86px);
  }
}

/* Resolution/ratio mode hooks from app.js (portrait, tall, landscape, wide) */
html[data-ui-mode="portrait"] .topbar,
html[data-ui-mode="tall"] .topbar {
  align-items: flex-start;
}

html[data-ui-mode="portrait"] .topbar-actions,
html[data-ui-mode="tall"] .topbar-actions {
  width: 100%;
}

html[data-ui-mode="tall"] .page-host {
  padding-bottom: 20px;
}

html[data-ui-mode="tall"] .builder-body {
  height: calc(100dvh - 104px);
}

html[data-ui-mode="wide"] .builder-topbar {
  padding-left: 10px;
  padding-right: 10px;
}

/* Keep desktop-like horizontal shell for landscape/wide even when browser zoom reduces CSS width */
html[data-ui-mode="landscape"] .shell,
html[data-ui-mode="wide"] .shell {
  grid-template-columns: 258px minmax(0, 1fr);
  min-height: 100vh;
}

html[data-ui-mode="landscape"] .sidebar,
html[data-ui-mode="wide"] .sidebar {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  max-width: none;
  z-index: auto;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px 12px 16px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  box-shadow: none;
}

html[data-ui-mode="landscape"] .nav-block,
html[data-ui-mode="wide"] .nav-block {
  display: grid;
  gap: 3px;
  overflow: visible;
  padding-bottom: 0;
}

html[data-ui-mode="landscape"] .nav-item,
html[data-ui-mode="wide"] .nav-item {
  white-space: normal;
  flex: initial;
}

html[data-ui-mode="landscape"] .topbar-actions,
html[data-ui-mode="wide"] .topbar-actions {
  width: auto;
  display: flex;
  grid-template-columns: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

html[data-ui-mode="landscape"] .topbar-actions .sidebar-toggle-btn,
html[data-ui-mode="wide"] .topbar-actions .sidebar-toggle-btn,
html[data-ui-mode="landscape"] .topbar-actions .status-chip,
html[data-ui-mode="wide"] .topbar-actions .status-chip {
  grid-column: auto;
  width: auto;
}

html[data-ui-mode="landscape"] .main-shell,
html[data-ui-mode="wide"] .main-shell {
  min-height: 100vh;
}

html[data-ui-mode="landscape"] .shell.sidebar-collapsed,
html[data-ui-mode="wide"] .shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

html[data-ui-mode="landscape"] .shell.sidebar-collapsed .sidebar,
html[data-ui-mode="wide"] .shell.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding: 0;
  gap: 0;
  border-right-color: transparent;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Force desktop builder layout for landscape/wide at any browser zoom */
html[data-ui-mode="landscape"] .builder-topbar,
html[data-ui-mode="wide"] .builder-topbar {
  flex-wrap: nowrap;
  align-items: center;
  overflow-x: auto;
}

html[data-ui-mode="landscape"] .builder-top-actions,
html[data-ui-mode="wide"] .builder-top-actions {
  margin-left: auto;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

html[data-ui-mode="landscape"] .builder-topbar > .btn,
html[data-ui-mode="wide"] .builder-topbar > .btn,
html[data-ui-mode="landscape"] .builder-top-actions .btn,
html[data-ui-mode="wide"] .builder-top-actions .btn,
html[data-ui-mode="landscape"] .builder-pill,
html[data-ui-mode="wide"] .builder-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

html[data-ui-mode="landscape"] .builder-shell,
html[data-ui-mode="wide"] .builder-shell {
  min-height: 100vh;
  height: 100vh;
}

html[data-ui-mode="landscape"] .builder-body,
html[data-ui-mode="wide"] .builder-body {
  display: block;
  height: 100%;
  overflow: hidden;
}

html[data-ui-mode="landscape"] .builder-body,
html[data-ui-mode="wide"] .builder-body {
  display: flex !important;
  flex-direction: row !important;
  height: 100% !important;
  overflow: hidden !important;
}

html[data-ui-mode="landscape"] .builder-center,
html[data-ui-mode="wide"] .builder-center {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
}

html[data-ui-mode="landscape"] .builder-left,
html[data-ui-mode="wide"] .builder-left {
  position: relative !important;
  flex: 0 0 320px !important;
  width: 320px !important;
  max-width: 380px !important;
  height: 100% !important;
  left: auto !important;
  top: auto !important;
  bottom: auto !important;
  border-right: 1px solid rgba(175, 190, 212, 0.2) !important;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-ui-mode="landscape"] .builder-right,
html[data-ui-mode="wide"] .builder-right {
  position: relative !important;
  flex: 0 0 340px !important;
  width: 340px !important;
  max-width: 380px !important;
  height: 100% !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  border-left: 1px solid rgba(175, 190, 212, 0.2) !important;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.3) !important;
}

html[data-ui-mode="landscape"] .builder-left:not(.hidden-panel),
html[data-ui-mode="landscape"] .builder-right:not(.hidden-panel),
html[data-ui-mode="wide"] .builder-left:not(.hidden-panel),
html[data-ui-mode="wide"] .builder-right:not(.hidden-panel) {
  max-height: none;
}

html[data-ui-mode="landscape"] .builder-canvas,
html[data-ui-mode="wide"] .builder-canvas {
  min-height: 0;
  height: 100%;
}