web/space.css

/* Space-only overrides: one model, and a layout that survives a phone.
 *
 * Written against the shipped classes rather than the source, because this file
 * ships next to a built bundle. Every selector below hangs off something stable:
 * a title attribute, a data-testid, or the literal Tailwind class in the markup.
 */

/* ── one model ─────────────────────────────────────────────────────────────
 * This Space serves exactly one model on its own GPU, so the picker offers a
 * choice that does not exist, and the "bring an OpenRouter key" prompt offers
 * one that costs money. Both are hidden rather than deleted: the app keeps
 * working, it just stops advertising alternatives.
 */
button[title="Choose model & params"],
div:has(> input[data-testid="welcome-key"]) {
  display: none !important;
}

/* ── phone layout ──────────────────────────────────────────────────────────
 * The desktop layout is two panes side by side, and the right one is
 * `w-[46%] min-w-[380px]` — on a 390px screen that alone is wider than the
 * viewport, so the chat gets squeezed to nothing. Below 860px the two panes
 * stack instead, each scrolling on its own.
 */
@media (max-width: 860px) {
  /* the row that holds chat + workspace */
  div.flex-1.min-h-0.flex {
    flex-direction: column;
  }

  /* chat pane */
  section.flex-1.min-w-0 {
    flex: 1 1 58%;
    min-height: 0;
  }

  /* workspace pane: full width, and the divider moves from left edge to top */
  section[class*="min-w-[380px]"] {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 42%;
    min-height: 0;
    border-left: 0 !important;
    border-top: 2px solid var(--color-ink);
  }

  /* margins tuned for a 1400px window waste a third of a 390px one */
  section.flex-1.min-w-0 > div.overflow-y-auto {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    padding-top: 1.1rem;
  }

  /* chrome rows: let them scroll sideways instead of clipping their buttons */
  header.h-11,
  section[class*="min-w-[380px]"] > div:first-child {
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  header.h-11::-webkit-scrollbar,
  section[class*="min-w-[380px]"] > div:first-child::-webkit-scrollbar {
    display: none;
  }

  /* the agent's own hero/landing block is sized for a wide column */
  .max-w-2xl {
    max-width: 100%;
  }


  /* the top bar is a single row of short labels; letting "pi agent" and the
     project name wrap turns an 44px-high bar into a 60px one and still clips */
  header.h-11 {
    white-space: nowrap;
  }
  header.h-11 > * {
    flex-shrink: 0;
  }

  /* the workspace's 160px file column plus a preview does not fit on a phone.
     The preview is the point of that pane, so the file list steps aside; the
     Code tab still shows what the agent wrote. */
  section[class*="min-w-[380px]"] div.w-40 {
    display: none;
  }

  /* with the pane only ~40vh tall, the framed preview needs its padding back */
  section[class*="min-w-[380px]"] div.p-4 {
    padding: 0.5rem 0.5rem 0.25rem;
  }

  /* the theme switch sits where the status line ends up on a narrow screen */
  #pi-theme-toggle {
    bottom: 34px;
    opacity: 0.75;
  }
}

/* Coarse pointers: the bracket buttons are 11–12px text with no padding, which
 * is a fine mouse target and a poor thumb one. */
@media (pointer: coarse) {
  .btn-bracket {
    padding: 4px 2px;
  }
}