/* ── Responsive Multi-Session Tiling Dashboard ────────────────────────── */

.dashboard-nav-entry,
.dashboard-topbar-btn,
.session-tile-btn,
.dashboard-view {
  display: none;
}

@media (min-width: 0px) {
  /* Sidebar "Dashboard" Home entry */
  .dashboard-nav-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    width: calc(100% - 16px);
    margin: 8px 8px 2px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition:
      background 0.15s ease,
      border-color 0.15s ease,
      color 0.15s ease;
  }

  .dashboard-nav-entry:hover {
    background: var(--bg-input);
    color: var(--text-bright);
  }

  .dashboard-nav-entry.active {
    background: rgb(88 101 242 / 0.15);
    border-color: var(--accent);
    color: var(--text-bright);
  }

  .dashboard-nav-icon {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgb(88 101 242 / 0.16);
    color: var(--accent);
    flex: none;
  }

  .dashboard-nav-icon svg {
    width: 17px;
    height: 17px;
  }

  .dashboard-nav-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .dashboard-nav-text strong {
    font-size: 13.5px;
    font-weight: 650;
    color: var(--text-bright);
    line-height: 1.2;
  }

  .dashboard-nav-text small {
    font-size: 11px;
    color: var(--text-dim);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dashboard-nav-count {
    flex: none;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
  }

  .dashboard-nav-count[hidden] {
    display: none;
  }

  /* Topbar Dashboard quick toggle */
  .dashboard-topbar-btn {
    display: grid;
  }

  .app.life-mode .dashboard-topbar-btn,
  .app.life-mode .dashboard-nav-entry {
    display: none;
  }

  /* Settings → Dashboard off: no way in, and rows no longer look draggable. */
  .app.dashboard-off .dashboard-topbar-btn,
  .app.dashboard-off .dashboard-nav-entry,
  .app.dashboard-off .session-tile-btn {
    display: none;
  }

  .app.dashboard-off .session-item {
    cursor: pointer;
  }

  /* Draggable session items & tile button in sidebar */
  .session-item {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
  }

  .session-item:active {
    cursor: grabbing;
  }

  .session-item.dragging {
    opacity: 0.45;
  }

  /* Tiled sessions: a short accent rail, not a full-height box shadow that
     fights the row's rounded corners. */
  .session-item.in-dashboard::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
  }

  /* Borderless, like every other button: state is the icon colour alone. */
  .session-tile-btn {
    display: grid;
    flex: none;
    width: 36px;
    height: 44px;
    background: transparent;
    color: var(--text-dim);
    opacity: 0.5;
  }

  .session-item:hover .session-tile-btn,
  .session-tile-btn.active {
    opacity: 1;
  }

  .session-tile-btn.active {
    color: var(--accent);
    background: transparent;
  }

  .session-tile-btn svg {
    width: 17px;
    height: 17px;
  }

  /* When Dashboard is active, hide single-session chrome inside .main. The
     text-selection layers (fixed, shared with the panes) stay: hidden, a
     pane's selection had no quote/copy pill, highlight or handles. */
  .app.dashboard-active
    .main
    > :not(#dashboard-view, #selection-actions, #sel-highlight-boxes, #custom-selection-overlay) {
    display: none !important;
  }

  .app.dashboard-active #dashboard-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100%;
    background: var(--bg-dark);
  }

  /* Dashboard top toolbar — follows DESIGN.md 52px header & 44x44px borderless icon buttons */
  .dashboard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 52px;
    padding: 0 12px 0 8px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex: none;
  }

  .dashboard-toolbar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .dashboard-Menu-btn,
  .dashboard-icon-action {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: var(--text-2);
    display: grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 160ms ease, color 160ms ease;
  }

  .dashboard-Menu-btn:hover,
  .dashboard-icon-action:hover {
    background: var(--bg-hover);
    color: var(--text-bright);
  }

  .dashboard-Menu-btn:focus-visible,
  .dashboard-icon-action:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
  }

  .dashboard-icon-action[hidden] {
    display: none;
  }

  .dashboard-Menu-btn {
    display: none;
  }

  .app.drawer-collapsed .dashboard-Menu-btn {
    display: grid;
  }

  .dashboard-heading-stack {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
  }

  .dashboard-heading-stack h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    color: var(--text-bright);
    white-space: nowrap;
    line-height: 1.2;
  }

  .dashboard-toolbar-sub {
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
  }

  /* The right end grows as much as the host readings do, so the layout
     switcher keeps its place between the title and the right edge. */
  .dashboard-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    flex: 1 1 0;
    min-width: 0;
  }

  /* The drawer's host readings, in the room between the title and the layout
     switcher: each a value over its label, as many as fit (system-metrics.js
     drops them from the end); none when nothing fits. Its own size never
     depends on what it shows, so a sample repaints only this strip. */
  .dashboard-host-metrics {
    display: flex;
    align-items: center;
    column-gap: 14px;
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
    overflow: hidden;
    contain: layout paint;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    user-select: none;
    -webkit-user-select: none;
  }

  .dashboard-host-metrics[data-shown='0'] {
    border-left-color: transparent;
  }

  .dashboard-host-metric {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 1px;
    line-height: 1.2;
    white-space: nowrap;
  }

  .dashboard-host-metric strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-bright);
  }

  .dashboard-host-metric span {
    font-size: 11px;
  }

  /* Dark capsule selector with circular/pill selection ring per DESIGN.md */
  .dashboard-layout-presets {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-alt);
    gap: 3px;
  }

  .dashboard-layout-presets[hidden] {
    display: none;
  }

  .dashboard-preset-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 44px;
    height: 36px;
    padding: 0 12px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  }

  .dashboard-preset-btn:hover {
    color: var(--text-bright);
    background: var(--bg-hover);
  }

  .dashboard-preset-btn.active {
    background: var(--bg-input);
    color: var(--text-bright);
    border-color: var(--text);
  }

  .dashboard-preset-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  .dashboard-preset-btn svg {
    width: 15px;
    height: 15px;
  }

  /* Dashboard main stage */
  .dashboard-stage {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  .dashboard-stage.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -6px;
  }

  .dashboard-drop-preview {
    position: absolute;
    z-index: 60;
    border: 2px dashed var(--accent);
    border-radius: 10px;
    background: rgb(88 101 242 / 0.16);
    backdrop-filter: blur(2px);
    display: grid;
    place-items: center;
    pointer-events: none;
    transition:
      left 0.22s cubic-bezier(0.22, 1.32, 0.36, 1),
      top 0.22s cubic-bezier(0.22, 1.32, 0.36, 1),
      width 0.22s cubic-bezier(0.22, 1.32, 0.36, 1),
      height 0.22s cubic-bezier(0.22, 1.32, 0.36, 1);
  }

  .dashboard-drop-preview[hidden] {
    display: none;
  }

  .dashboard-drop-preview span {
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.38);
  }

  /* Empty state */
  .dashboard-empty {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 24px;
  }

  .dashboard-empty[hidden] {
    display: none;
  }

  .dashboard-empty-card {
    max-width: 520px;
    width: 100%;
    padding: 28px 24px;
    border: 1px dashed var(--border);
    border-radius: 14px;
    background: var(--bg);
    text-align: center;
  }

  .dashboard-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 12px;
    background: rgb(88 101 242 / 0.15);
    color: var(--accent);
    display: grid;
    place-items: center;
  }

  .dashboard-empty-icon svg {
    width: 28px;
    height: 28px;
  }

  .dashboard-empty-card h3 {
    margin: 0 0 8px;
    font-size: 17px;
    color: var(--text-bright);
  }

  .dashboard-empty-card p {
    margin: 0 0 18px;
    color: var(--text-dim);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .dashboard-quick-picks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .dashboard-quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-alt);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .dashboard-quick-chip:hover {
    border-color: var(--accent);
    background: var(--bg-input);
    color: var(--text-bright);
  }

  .dashboard-quick-chip .hash {
    font-size: 15px;
    padding: 0;
  }

  .dashboard-quick-chip .add-tag {
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 600;
  }

  /* Tiled Grid, Groups & Panes (2D horizontal + vertical) */
  .dashboard-grid {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: stretch;
    overflow: auto;
    background: var(--bg-dark);
  }

  .dashboard-grid[hidden] {
    display: none;
  }

  .dashboard-group {
    flex: 1 1 0px;
    min-width: 140px;
    min-height: 95px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--bg-dark);
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .dashboard-grid.spring-bouncing .dashboard-group,
  .dashboard-grid.spring-bouncing .dashboard-pane,
  .dashboard-grid.resizing-active .dashboard-group,
  .dashboard-grid.resizing-active .dashboard-pane {
    min-width: 44px;
    min-height: 44px;
  }

  .dashboard-group.spring-expanded-target,
  .dashboard-pane.spring-expanded-target {
    z-index: 25;
  }

  .dashboard-group.spring-compressed-target,
  .dashboard-pane.spring-compressed-target {
    z-index: 20;
  }

  .dashboard-group-column {
    flex-direction: column;
  }

  .dashboard-group-row {
    flex-direction: row;
  }

  .dashboard-pane {
    position: relative;
    flex: 1 1 0px;
    min-width: 140px;
    min-height: 95px;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Its size comes from the layout, never its content. Not a size
       container: WebKit then restyles the whole pane, transcript included, on
       every size change (73ms a splitter step with nine panes on the iPad;
       31ms without). Nothing in a pane is a container: the size steps are
       classes set by paneSizeObserver (.pane-short, .pane-w460 … .pane-w170). */
    contain: size layout;
  }

  /* Compact density adaptations for 6–12 concurrent session panes */
  .dashboard-grid.density-compact .dashboard-pane-header {
    height: 36px;
    padding: 0 6px 0 9px;
  }

  .dashboard-grid.density-compact .pane-session-name {
    font-size: 12.5px;
  }

  .dashboard-grid.density-compact .dashboard-pane-actions .icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .dashboard-grid.density-compact .dashboard-pane-actions .icon-btn svg {
    width: 15px;
    height: 15px;
  }

  .dashboard-grid.density-compact .dashboard-group,
  .dashboard-grid.density-compact .dashboard-pane {
    min-width: 85px;
    min-height: 65px;
  }

  .dashboard-grid.density-compact .dashboard-pane-messages {
    padding: 6px 2px 4px;
    font-size: 13px;
  }

  .dashboard-grid.density-compact .dashboard-pane-composer-wrap {
    padding: 0 6px 6px;
  }

  .dashboard-grid.density-compact .dashboard-pane-composer textarea {
    padding: 5px 3px;
    font-size: 12.5px;
  }

  .dashboard-grid.density-ultra .dashboard-group,
  .dashboard-grid.density-ultra .dashboard-pane {
    min-width: 55px;
    min-height: 48px;
  }

  .dashboard-grid.density-ultra .dashboard-pane-header {
    height: 32px;
    padding: 0 4px 0 8px;
  }

  .dashboard-grid.density-ultra .pane-session-name {
    font-size: 12px;
  }

  .dashboard-grid.density-ultra .dashboard-pane-messages {
    padding: 4px 2px 2px;
    font-size: 12.5px;
  }

  .dashboard-pane.dragging-pane {
    opacity: 0.55;
  }

  /* The pane holding the input wears a colored frame that fades over from the
     pane it left; typing in it adds a soft glow. Drawn above the content so
     the header and card cannot cover it. */
  .dashboard-pane::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 30;
    pointer-events: none;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 0 transparent;
    transition:
      border-color 300ms ease,
      box-shadow 300ms ease;
  }

  .dashboard-grid:not([data-pane-count='1']) .dashboard-pane.composer-active::after {
    border-color: var(--accent);
  }

  .dashboard-grid:not([data-pane-count='1']) .dashboard-pane.composer-active.pane-focused::after {
    box-shadow: inset 0 0 14px 0 color-mix(in srgb, var(--accent) 35%, transparent);
  }

  /* A session picked from the list while the Dashboard is open flashes its
     pane: an accent wash and a ring that pulse twice and fade, so the eye
     finds where it landed. */
  .dashboard-pane.pane-locating::after {
    animation: pane-locate 1.1s ease-out;
  }

  @keyframes pane-locate {
    0% {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 22%, transparent);
      box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent) 55%, transparent);
    }
    35% {
      background: color-mix(in srgb, var(--accent) 4%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
    }
    55% {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent) 40%, transparent);
    }
    100% {
      background: transparent;
      box-shadow: inset 0 0 0 0 transparent;
    }
  }

  /* Zoom: one pane fills the stage inside the Dashboard. The rest keep their
     places in the model and come back where they were. */
  .dashboard-grid.has-zoom .dashboard-group:not(.zoom-path),
  .dashboard-grid.has-zoom .dashboard-pane:not(.zoom-path),
  .dashboard-grid.has-zoom .dashboard-splitter {
    display: none;
  }

  .dashboard-grid.has-zoom .zoom-path {
    flex: 1 1 0px !important;
  }

  /* Mid-flight the pane is drawn over its neighbours and nothing clips it. */
  .dashboard-grid.zoom-moving {
    overflow: hidden;
  }

  .dashboard-grid.zoom-moving .zoom-path {
    position: relative;
    z-index: 40;
    overflow: visible;
  }

  .dashboard-grid.zoom-moving .dashboard-pane.zoom-path {
    overflow: hidden;
    box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
  }

  /* Pinching: the outline shows where the pane lands on release, without the
     drop wash and blur, so the pane under it stays sharp. */
  .dashboard-drop-preview.pinch-target {
    background: transparent;
    backdrop-filter: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .dashboard-pane::after {
      transition: none;
    }

    .dashboard-pane.pane-locating::after {
      animation: none;
      border-color: var(--accent);
    }
  }

  /* iPadOS / iOS WebKit: keep input font-size >= 16px on touch devices so Safari
     never auto-zooms or scrolls the viewport when focusing a pane textarea */
  @media (pointer: coarse) {
    .dashboard-pane-composer textarea,
    .dashboard-grid.density-compact .dashboard-pane-composer textarea {
      font-size: 16px;
    }
  }

  /* 120Hz+ zero-lag splitter resizing & inertial spring bounce: disable transitions and sub-tree hit-testing while dragging/bouncing */
  .dashboard-grid.resizing-active,
  .dashboard-grid.resizing-active .dashboard-group,
  .dashboard-grid.resizing-active .dashboard-pane,
  .dashboard-grid.spring-bouncing,
  .dashboard-grid.spring-bouncing .dashboard-group,
  .dashboard-grid.spring-bouncing .dashboard-pane {
    transition: none !important;
  }

  /* Nothing under a moving splitter takes taps or starts a selection: one
     cover over the grid while the splitter holds the pointer, not
     pointer-events / user-select on the panes, which are inherited and
     restyled every transcript node (65ms in WebKit on nine panes) at the
     start and end of each drag. Not during the release bounce: the cover
     would sit over the splitters too, and a splitter can be caught again
     mid-bounce. */
  .dashboard-grid.resizing-active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 50;
  }

  .dashboard-pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 44px;
    min-width: 0;
    overflow: hidden;
    padding: 0 4px 0 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: none;
    flex: none;
  }

  .dashboard-pane-header:active {
    cursor: grabbing;
  }

  /* A running session spins next to its name (before it, so a narrow title
     cannot ellipsize it away) and runs a light bar along the header's foot. */
  .dashboard-pane-title .work-spinner {
    width: 13px;
    height: 13px;
    flex: none;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--text-2) 25%, transparent);
    border-top-color: var(--accent);
    animation: spin 0.7s linear infinite;
  }

  .dashboard-pane-title .work-spinner[hidden] {
    display: none;
  }

  /* Finished while you were looking elsewhere: the session list's unread dot,
     in the spinner's place. A dot, not a spinner, so the two read apart even
     without motion. */
  .dashboard-pane-title .unread-dot {
    width: 9px;
    height: 9px;
    margin: 0 2px;
    flex: none;
    border-radius: 50%;
    background: var(--tool);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--tool) 25%, transparent);
  }

  .dashboard-pane-title .unread-dot[hidden] {
    display: none;
  }

  .dashboard-pane.pane-busy .dashboard-pane-header {
    position: relative;
  }

  .dashboard-pane.pane-busy .dashboard-pane-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--accent), transparent) no-repeat;
    background-size: 40% 100%;
    animation: pane-busy-bar 1.4s ease-in-out infinite;
  }

  @keyframes pane-busy-bar {
    from {
      background-position: -60% 0;
    }
    to {
      background-position: 160% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dashboard-pane-title .work-spinner {
      animation-duration: 2.4s;
    }

    .dashboard-pane.pane-busy .dashboard-pane-header::after {
      animation: none;
      background: var(--accent);
    }
  }

  .dashboard-pane-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 650;
    color: var(--text-bright);
  }

  .dashboard-pane-title .hash {
    font-size: 17px;
    padding: 0;
  }

  .pane-session-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    padding: 2px 5px;
    margin-left: -4px;
    border-radius: 6px;
    cursor: text;
  }

  .pane-session-name:hover,
  .pane-session-name:focus-visible {
    background: var(--bg-input);
    outline: none;
  }

  .dashboard-pane-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
  }

  /* 38x38px borderless outline-icon buttons inside pane headers so all session
     controls (Status, Usage, Model, Thinking, ⋯, Split, Expand, Close) fit cleanly */
  .dashboard-pane-actions .icon-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--text-2);
  }

  .dashboard-pane-actions .icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-bright);
  }

  .dashboard-pane-actions .icon-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
  }

  .dashboard-pane-actions .icon-btn svg {
    width: 16px;
    height: 16px;
  }

  /* On narrower panes (< 460px), hide secondary direct buttons so Model / Thinking /
     ⋯ / × stay clear; the pane's ⋯ menu then shows Status and Usage in their place */
  /* Width steps are classes from paneSizeObserver (the header's content
     width), not container queries: see the note on .dashboard-pane. */
  .dashboard-pane.pane-w460 .dashboard-pane-actions .pane-status-btn,
  .dashboard-pane.pane-w460 .dashboard-pane-actions .pane-usage-btn,
  .dashboard-pane.pane-w460 .dashboard-pane-actions .pane-split-dir-btn,
  .dashboard-pane.pane-w460 .dashboard-pane-actions .pane-expand-btn {
    display: none;
  }

  /* Per-pane Thinking button level colors & indicator dot (matching #btn-thinking) */
  .pane-thinking-btn {
    position: relative;
  }

  .pane-thinking-btn[data-level='minimal'],
  .pane-thinking-btn[data-level='low'] {
    color: #a5b4fc;
  }

  .pane-thinking-btn[data-level='medium'],
  .pane-thinking-btn[data-level='high'],
  .pane-thinking-btn[data-level='xhigh'],
  .pane-thinking-btn[data-level='max'] {
    color: var(--thinking);
  }

  .pane-thinking-btn[data-level='high']::after,
  .pane-thinking-btn[data-level='xhigh']::after,
  .pane-thinking-btn[data-level='max']::after {
    content: '';
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--thinking);
    box-shadow: 0 0 6px var(--thinking);
  }

  /* Per-pane ⋯ overflow menu anchored inside the pane right under the header */
  .pane-menu-scrim {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 44;
    background: transparent;
  }

  .pane-more-menu {
    position: absolute;
    top: 46px;
    right: 6px;
    z-index: 45;
    max-height: calc(100% - 54px);
    overflow-y: auto;
    /* The pane clips its overflow: a narrow pane's menu fits inside it. */
    min-width: min(232px, calc(100% - 12px));
    max-width: calc(100% - 12px);
  }

  .pane-more-menu.is-narrow .mi-cmd {
    display: none;
  }

  .pane-more-menu.is-narrow .mi-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Per-pane BTW mode rules (matching .app.btw-active) */
  .dashboard-pane.pane-btw-active .dashboard-pane-typing,
  .dashboard-pane.pane-btw-active .pane-jump-live,
  .dashboard-pane.pane-btw-active .prompt-pin-clip,
  .dashboard-pane.pane-btw-active .pane-hot-keywords {
    display: none !important;
  }

  /* Per-pane Quote preview remove button (matching #quote-preview-remove) */
  .pane-quote-remove {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      transform 0.1s ease;
  }

  .pane-quote-remove:hover,
  .pane-quote-remove:active {
    background: rgba(255, 255, 255, 0.14);
    color: var(--text-bright);
    transform: scale(1.08);
  }

  :root[data-theme='light'] .pane-quote-remove:hover,
  :root[data-theme='light'] .pane-quote-remove:active {
    background: rgb(45 43 38 / 0.045);
  }

  .dashboard-pane-messages {
    flex: 1 1 0px;
    min-width: 0;
    min-height: 0;
    padding: 10px 4px 6px;
    touch-action: pan-y;
    will-change: scroll-position;
    transform: translateZ(0);
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Anchor the floating button to the transcript, not a guessed composer height.
     The basis is 0px, never `flex: 1`'s 0%: when iOS WebKit relaid a pane out
     and took its height as indefinite, a 0% basis fell back to the content (a
     long transcript, thousands of px) and the shrink, shared by basis, crushed
     the input card to a ~20px sliver of its bottom edge (iPhone recordings
     2026-10-27, after a pane hop and with the keyboard up; the same sliver
     reproduces in WebKit with flex-basis: auto). */
  .dashboard-pane-transcript {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 0px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }

  /* A short pane (vertical split, 2x2 grid) with an image attached: the card
     drops its shortcut chips and the compression hint, and the transcript
     keeps room for a few lines and Jump to present. */
  .dashboard-pane-transcript {
    min-height: min(30%, 96px);
  }

  /* Only with something attached: an empty card keeps its shortcut chips in a
     short pane (they went missing from every stacked pane, 2026-10-22). */
  .dashboard-pane.pane-short .dashboard-pane-dock:has(.pane-attachments .chip) .pane-hot-keywords,
  .dashboard-pane.pane-short .pane-compression-hint {
    display: none;
  }

  .pane-jump-live,
  .pane-jump-live.visible {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    min-height: 44px;
    max-width: calc(100% - 16px);
    margin: 0;
  }

  .dashboard-pane-composer-wrap {
    min-width: 0;
    overflow: hidden;
    padding: 0 8px 8px;
  }

  /* Floating composer: one input card for the whole Dashboard. Each pane's
     dock holds its typing line, BTW switch and composer; only the pane last
     touched (.composer-active) shows the composer, as a card in its own row
     under the transcript: the transcript shrinks instead of scrolling behind
     it. The others keep just the typing line. */
  .dashboard-pane-dock {
    display: flex;
    flex-direction: column;
    flex: none;
    min-width: 0;
  }

  .dashboard-pane:not(.composer-active) .dashboard-pane-dock > .pane-btw-pending-row,
  .dashboard-pane:not(.composer-active) .dashboard-pane-dock > .dashboard-pane-composer-wrap {
    display: none;
  }

  .dashboard-pane-dock.is-floating,
  .dashboard-dock-ghost {
    margin: 2px 8px 8px;
    justify-content: flex-end;
    /* A pane squeezed to its minimum keeps the input row, not the chips. */
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-top: 4px;
    border-radius: 14px;
    background: var(--bg-alt);
    box-shadow:
      0 0 0 1px var(--border),
      0 6px 20px rgb(0 0 0 / 0.28);
  }

  .dashboard-pane-dock.is-floating .dashboard-pane-composer-wrap,
  .dashboard-dock-ghost .dashboard-pane-composer-wrap {
    padding: 0 6px 6px;
  }

  .dashboard-dock-ghost {
    position: fixed;
    margin: 0;
    z-index: 80;
    pointer-events: none;
    transform-origin: 0 0;
    will-change: transform;
  }

  /* Keyboard up: the panes stay exactly where they were (the shell keeps its
     full height and the keyboard covers whatever is below it). Only a card
     the keyboard would cover moves, lifted just above the keyboard by
     syncKeyboardLift(), over its own transcript or the pane above. */
  html.keyboard-shell .app.dashboard-active {
    height: 100dvh;
  }

  .dashboard-pane-dock.is-floating {
    translate: 0 calc(-1 * var(--kb-lift, 0px));
    transition: translate 0.22s cubic-bezier(0.25, 0.8, 0.3, 1);
  }

  .dashboard-pane.kb-lifted,
  .dashboard-group:has(.dashboard-pane.kb-lifted) {
    overflow: visible;
    z-index: 40;
  }

  /* Hidden while its copy flies in, but still focusable: a tap that opens the
     keyboard focuses this card before the copy lands. */
  .dashboard-pane-dock.dock-arriving {
    opacity: 0;
  }

  /* Narrow card: the text box gets the room (paste stays on long-press) and
     the placeholder stays on one line instead of wrapping into a squiggle. */
  .dashboard-pane-composer textarea::placeholder {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dashboard-pane.pane-w240 .dashboard-pane-composer .pane-paste-btn {
    display: none;
  }

  .dashboard-pane-composer {
    min-width: 0;
    overflow: hidden;
  }

  .dashboard-pane-composer textarea {
    flex: 1 1 0px;
    width: 0;
    min-width: 0;
    background: none;
    border: 0;
    padding: 8px 4px;
    color: var(--text-bright);
    font: inherit;
    font-size: 14px;
    line-height: 1.35;
    resize: none;
    max-height: 140px;
    outline: none;
  }

  /* Draggable Splitters between groups & panes (Horizontal + Vertical)
     Keep visual bar slim (10px) while expanding the invisible finger hit-zone
     to 28px via ::before and providing a 44px pill handle in the center. */
  .dashboard-splitter {
    position: relative;
    flex: none;
    background: var(--bg-dark);
    display: grid;
    place-items: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    z-index: 30;
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: background 0.15s ease;
  }

  /* Invisible 28px touch hit-target expansion along the entire splitter length */
  .dashboard-splitter::before {
    content: '';
    position: absolute;
    z-index: 1;
  }

  .dashboard-splitter.splitter-vertical {
    width: 10px;
    cursor: col-resize;
  }

  .dashboard-splitter.splitter-vertical::before {
    top: 0;
    bottom: 0;
    left: -9px;
    right: -9px;
  }

  .dashboard-splitter.splitter-horizontal {
    height: 10px;
    width: 100%;
    cursor: row-resize;
  }

  .dashboard-splitter.splitter-horizontal::before {
    left: 0;
    right: 0;
    top: -9px;
    bottom: -9px;
  }

  .dashboard-splitter:hover,
  .dashboard-splitter.dragging,
  .dashboard-splitter:focus-visible {
    background: rgb(88 101 242 / 0.35);
    outline: none;
  }

  /* Grab-friendly pill handle (like iPadOS Split View divider pill) */
  .dashboard-splitter-grip {
    position: relative;
    z-index: 2;
    border-radius: 999px;
    background: var(--text-2);
    opacity: 0.65;
    box-shadow: 0 0 0 3px rgb(0 0 0 / 0.22);
    transition:
      opacity 0.15s ease,
      background 0.15s ease,
      transform 0.15s ease,
      width 0.15s ease,
      height 0.15s ease;
  }

  .dashboard-splitter.splitter-vertical .dashboard-splitter-grip {
    width: 4px;
    height: 40px;
  }

  .dashboard-splitter.splitter-horizontal .dashboard-splitter-grip {
    width: 40px;
    height: 4px;
  }

  @media (pointer: coarse) {
    .dashboard-splitter.splitter-vertical {
      width: 12px;
    }

    .dashboard-splitter.splitter-vertical::before {
      left: -12px;
      right: -12px;
    }

    .dashboard-splitter.splitter-horizontal {
      height: 12px;
    }

    .dashboard-splitter.splitter-horizontal::before {
      top: -12px;
      bottom: -12px;
    }

    .dashboard-splitter.splitter-vertical .dashboard-splitter-grip {
      width: 5px;
      height: 44px;
    }

    .dashboard-splitter.splitter-horizontal .dashboard-splitter-grip {
      width: 44px;
      height: 5px;
    }
  }

  .dashboard-splitter.splitter-vertical:hover .dashboard-splitter-grip,
  .dashboard-splitter.splitter-vertical.dragging .dashboard-splitter-grip,
  .dashboard-splitter.splitter-vertical.impact-bounce .dashboard-splitter-grip {
    opacity: 1;
    height: 58px;
    background: var(--accent);
    transform: scaleX(1.35);
    box-shadow: 0 0 12px var(--accent);
  }

  .dashboard-splitter.splitter-horizontal:hover .dashboard-splitter-grip,
  .dashboard-splitter.splitter-horizontal.dragging .dashboard-splitter-grip,
  .dashboard-splitter.splitter-horizontal.impact-bounce .dashboard-splitter-grip {
    opacity: 1;
    width: 58px;
    background: var(--accent);
    transform: scaleY(1.35);
    box-shadow: 0 0 12px var(--accent);
  }

  .dashboard-splitter.impact-bounce {
    background: rgb(88 101 242 / 0.42);
  }

  /* Tablet touch-drag ghost */
  .dashboard-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    pointer-events: none;
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.4);
  }

  /* Active touch/pointer drag isolation: prevent underlying containers from stealing pointer events */
  body.dashboard-pointer-dragging,
  body.dashboard-pointer-dragging * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  body.dashboard-pointer-dragging .dashboard-stage,
  body.dashboard-pointer-dragging .dashboard-pane,
  body.dashboard-pointer-dragging .dashboard-pane-messages,
  body.dashboard-pointer-dragging .dashboard-pane-composer,
  body.dashboard-pointer-dragging .dashboard-pane-header,
  body.dashboard-pointer-dragging .dashboard-splitter,
  body.dashboard-pointer-dragging .dashboard-pane-jump {
    pointer-events: none !important;
  }

  body.dashboard-pointer-dragging .session-list,
  body.dashboard-pointer-dragging #session-list,
  body.dashboard-pointer-dragging .drawer {
    overflow: hidden !important;
    touch-action: none !important;
    pointer-events: none !important;
  }
}


/* Small-screen chrome only. Grid, groups, weights, splitters and panes use
   the exact desktop layout rules above; never replace them with stacked cards. */
@media (max-width: 767px), (max-height: 499px) and (pointer: coarse) {
  .dashboard-toolbar { height: 52px; min-height: 52px; flex-wrap: nowrap; gap: 4px; padding: 0 8px; }
  .dashboard-toolbar-title { flex: 1 1 0; }
  .app.dashboard-active #dashboard-view { padding-top: env(safe-area-inset-top); padding-bottom: 0; box-sizing: border-box; }
  .dashboard-Menu-btn { display: grid; }
  .dashboard-layout-presets { flex: 0 0 auto; max-width: calc(100% - 52px); margin-left: auto; overflow-x: auto; }
  /* No room for host readings on a phone; the drawer still has them. */
  .dashboard-host-metrics { display: none; }
  .dashboard-toolbar-actions { flex: none; }
  .dashboard-heading-stack h2 { font-size: 15px; }
  .session-tile-btn { min-width: 44px; min-height: 44px; }
}

/* Shared narrow-pane sizing, including desktop panes resized to phone widths.
   The header stays one row: the title gives way (ellipsis) and the icons drop
   into the ⋯ menu, which itself never leaves, so every action stays reachable.
   (Wrapping them to a second row put them under the 44px header's clip.) */
.dashboard-grid .dashboard-pane-header { min-height: 44px; }
.dashboard-pane-actions { flex: none; }
.pane-session-name { min-width: 0; }
.dashboard-pane.pane-w300 .dashboard-pane-actions .pane-model-btn,
.dashboard-pane.pane-w300 .dashboard-pane-actions .pane-thinking-btn,
.dashboard-pane.pane-w300 .dashboard-pane-actions .pane-split-dir-btn,
.dashboard-pane.pane-w300 .dashboard-pane-actions .pane-expand-btn {
  display: none;
}
.dashboard-pane.pane-w220 .dashboard-pane-title .provider-badge {
  display: none;
}
.dashboard-pane.pane-w170 .dashboard-pane-actions .pane-close-btn {
  display: none;
}