/*
 * styles.css — Web UI stylesheet (spec Tasks 1.2 / 10.1 / 11.1 / 12.1,
 *  Req 1.4 / 8 / 9.1 / 10 / 11).
 *
 * Palette-driven by design: EVERY color below is read from a `--color-*` CSS
 * custom property, NEVER a hard-coded hex (the only exception is pure white/
 * black scaffolding on the QR image, which must be true monochrome to scan).
 * A Theme is applied at runtime by setting those NINE custom properties on
 * `document.documentElement` via the CSSOM (theme.js `applyPalette`), which is
 * NOT an inline <style> element, so it stays CSP-legal under style-src 'self'.
 * The nine names are EXACTLY the ones design Property 26 asserts — one per
 * THEME_CATALOG palette key: --color-background, --color-surface,
 * --color-accent, --color-button, --color-badge, --color-statusInfo,
 * --color-statusSuccess, --color-statusWarning, --color-statusError — so a
 * `theme` frame's palette maps 1:1 onto them.
 *
 * The :root fallbacks are a neutral light default only — the bootstrap colors
 * shown before the committed Theme's palette is applied; a palette set on
 * documentElement overrides them wholesale.
 *
 * Visual direction: a clean, modern, CHAT-FIRST builder — a calm single main
 * column with a persistent slim top header, generous spacing, rounded surfaces,
 * the conversation/activity front-and-centre, and the preview as a secondary
 * panel that slides in beside the column on wide viewports and folds into the
 * single column on a phone. The SAME layout collapses gracefully to one column
 * at 360px (Req 11.1/11.2) — driven by media queries + the shell's
 * data-single-column attribute, no separate mobile stylesheet.
 */

:root {
  /* The nine palette custom properties (design Property 26 names). Neutral
     light bootstrap defaults; overwritten by a committed Theme's palette. */
  --color-background: #ffffff;
  --color-surface: #f5f6f8;
  --color-accent: #2563eb;
  --color-button: #2563eb;
  --color-badge: #e2e8f0;
  --color-statusInfo: #2563eb;
  --color-statusSuccess: #16a34a;
  --color-statusWarning: #d97706;
  --color-statusError: #dc2626;

  /* Neutral text/foreground derived tokens. These are structural (not part of
     the themeable palette) but still reference palette vars so a dark palette
     reads correctly: text uses accent-neutral surfaces. */
  --space: 1rem;
  --radius: 0.75rem;
  --radius-sm: 0.5rem;
  --touch: 2.75rem; /* >=44px touch target (Req 11.3) */
  --header-h: 3.5rem;
  --maxw: 52rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background-color: var(--color-background);
  color: var(--color-accent);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  /* Room for notches / rounded corners on phones (mobile-command-center). */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* The app root fills the viewport so the shell can lay itself out. */
#app,
[data-app-root] {
  display: block;
  min-height: 100vh;
}

.app-shell {
  display: block;
  width: 100%;
  min-height: 100vh;
}


/* ===================================================================== *
 * The workspace shell — the FIVE real Workspace_Experience geometries    *
 * (Tasks 10.1 / 12.1, Req 8.3, 11.1; platform Req 27.2, 27.4, 27.8)      *
 *                                                                        *
 * views/layout.js renders one container per region named in the ACTIVE    *
 * layout descriptor and marks the shell with data-experience,             *
 * data-orientation, data-regions and, per container, data-region /        *
 * data-role / data-size. THIS file turns those attributes into the actual *
 * geometry, so each experience is a genuinely different arrangement:      *
 *                                                                        *
 *   kiro-style / custom  : two columns — left (activity + compose +       *
 *                          files) and right (preview).                    *
 *   vibe-first           : one conversation-forward column with the       *
 *                          compose surface foregrounded (emphasis) and    *
 *                          the preview a collapsed aside beneath it.      *
 *   technical-workbench  : an IDE cockpit — pinned header, left sidebar   *
 *                          (file/tool panel), large central editor area   *
 *                          (preview), and a bottom dock spanning under    *
 *                          both holding compose + the Activity_Stream.    *
 *   mobile-command-center: one stacked, touch-operable column.            *
 *                                                                        *
 * Every geometry is palette-driven (only --color-* custom properties) and *
 * every one collapses to a single column at <=720px and cannot overflow   *
 * horizontally at 360px (border-box + min-width:0 + max-width:100%).      *
 * ===================================================================== */

.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  /* No experience may scroll the page sideways on a phone (Req 11.2). */
  overflow-x: hidden;
}

/* The pinned top-bar region — always visible, full-width, at 360px too. */
.shell__header {
  position: sticky;
  top: 0;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-badge);
}

/* The body is the REGION GRID. The default (two-column) template is the
   kiro-style/custom arrangement; each experience overrides it below. */
.shell__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--space);
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: var(--space);
}

/* A region container: one per descriptor region, whatever it is named. */
.shell__region {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.shell__region[hidden] {
  display: none;
}

/* Honor the descriptor's DECLARED region order even for an arbitrary persisted
   `custom` arrangement (Req 27.4): the layout view mirrors each body region's
   declared index onto data-index. */
.shell__region[data-index="0"] { order: 0; }
.shell__region[data-index="1"] { order: 1; }
.shell__region[data-index="2"] { order: 2; }
.shell__region[data-index="3"] { order: 3; }
.shell__region[data-index="4"] { order: 4; }
.shell__region[data-index="5"] { order: 5; }

/* The primary body-region slot. */
.shell__main {
  min-width: 0; /* allow the column to shrink below content width (no overflow) */
  display: flex;
  flex-direction: column;
  gap: var(--space);
  width: 100%;
}

/* The secondary body-region slot — a side panel on wide viewports. */
.shell__panel {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: sticky;
  top: calc(var(--header-h) + var(--space));
  align-self: start;
  max-height: calc(100vh - var(--header-h) - 2 * var(--space));
  overflow: auto;
}

.shell__panel[hidden] {
  display: none;
}

/* A surface wrapper inside a region. `data-size` is the descriptor's sizing,
   `data-emphasis` its foregrounding, `data-collapsed` its collapse state. */
.shell__surface {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* A surface the descriptor marks visible:false stays mounted but unrendered. */
.shell__surface[hidden] {
  display: none;
}

.shell__surface[data-size="flex"] {
  flex: 1 1 auto;
  min-height: 0;
}

.shell__surface[data-size="auto"] {
  flex: 0 0 auto;
}

/* A collapsed surface shows ONLY its toggle, so it is always still reachable. */
.shell__surface[data-collapsed="true"] {
  flex: 0 0 auto;
}

.shell__surface > [hidden] {
  display: none;
}

/* emphasis:'primary' (vibe-first's compose) — foregrounded, not just first. */
.shell__surface[data-emphasis="primary"] {
  order: -1;
  padding: var(--space);
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  background-color: var(--color-surface);
}

/* The collapse toggle: touch-sized (Req 11.3) and palette-driven. */
.shell__collapse-toggle {
  align-self: flex-start;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0.35rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent);
  background-color: var(--color-badge);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.shell__collapse-toggle[hidden] {
  display: none;
}

/* The compose surface: confirms sit above the prompt so an approval is
   front-and-centre while the compose box stays anchored at the bottom flow. */
.shell__compose {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.shell__attribution {
  margin: 0;
  padding: 0.5rem var(--space);
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-badge);
}

.shell__attribution[hidden] {
  display: none;
}


/* --------------------------------------------------------------------- *
 * kiro-style + custom: two columns — conversation left, preview right.   *
 * --------------------------------------------------------------------- */

.shell[data-experience="kiro-style"] .shell__body,
.shell[data-experience="custom"] .shell__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  align-items: start;
}

.shell[data-experience="kiro-style"] .shell__region[data-region="left"],
.shell[data-experience="custom"] .shell__region[data-region="left"] {
  grid-column: 1;
}

.shell[data-experience="kiro-style"] .shell__region[data-region="right"],
.shell[data-experience="custom"] .shell__region[data-region="right"] {
  grid-column: 2;
}


/* --------------------------------------------------------------------- *
 * vibe-first: ONE conversation-forward column, compose foregrounded, the *
 * preview a collapsed aside beneath it.                                  *
 * --------------------------------------------------------------------- */

.shell[data-experience="vibe-first"] .shell__body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "aside";
  max-width: 58rem;
}

.shell[data-experience="vibe-first"] .shell__region[data-region="main"] {
  grid-area: main;
}

.shell[data-experience="vibe-first"] .shell__region[data-region="aside"] {
  grid-area: aside;
  position: static;
  max-height: none;
  overflow: visible;
}

.shell[data-experience="vibe-first"] .shell__surface[data-emphasis="primary"] {
  /* The compose box is the loudest thing on the surface here. */
  padding: calc(var(--space) * 1.25);
  border-width: 2px;
  border-radius: var(--radius);
  background-color: var(--color-surface);
}


/* --------------------------------------------------------------------- *
 * technical-workbench: the IDE cockpit (Req 27.8) — a real developer     *
 * geometry, not the chat shell. Pinned header (above), left sidebar for  *
 * the file/tool panel, a large central editor area for the preview, and  *
 * a bottom dock spanning under BOTH holding compose + Activity_Stream.   *
 * Original, clean-room layout; theme-able like every other experience    *
 * (colors are palette variables only, Req 29).                          *
 * --------------------------------------------------------------------- */

.shell[data-experience="technical-workbench"] .shell__body {
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(11rem, 0.55fr);
  grid-template-areas:
    "sidebar editor"
    "dock dock";
  max-width: none;
  height: calc(100vh - var(--header-h));
  gap: 1px;
  padding: 0;
  /* The 1px gaps read as pane seams in the active palette. */
  background-color: var(--color-badge);
}

.shell[data-experience="technical-workbench"] .shell__region {
  padding: 0.5rem;
  gap: 0.5rem;
  overflow: auto;
  background-color: var(--color-background);
}

.shell[data-experience="technical-workbench"] .shell__region[data-region="sidebar"] {
  grid-area: sidebar;
  position: static;
  max-height: none;
  background-color: var(--color-surface);
}

.shell[data-experience="technical-workbench"] .shell__region[data-region="editor"] {
  grid-area: editor;
  position: static;
  max-height: none;
}

.shell[data-experience="technical-workbench"] .shell__region[data-region="dock"] {
  grid-area: dock;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-badge);
}


/* --------------------------------------------------------------------- *
 * mobile-command-center: one stacked, touch-operable column.             *
 * --------------------------------------------------------------------- */

.shell[data-experience="mobile-command-center"] .shell__body,
.shell[data-orientation="vertical"] .shell__body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  max-width: 44rem;
  height: auto;
  padding: 0.75rem;
  gap: 0.75rem;
}

.shell[data-experience="mobile-command-center"] .shell__region[data-region="stack"] {
  grid-column: 1;
  position: static;
  max-height: none;
  overflow: visible;
}

.shell[data-experience="mobile-command-center"] .shell__collapse-toggle {
  align-self: stretch;
  text-align: left;
}

/* A top-bar region a descriptor leaves empty takes no space (a layout that
   positions no Session_Header at all must not show a stray 1px bar). */
.shell__header:empty {
  display: none;
  border-bottom: 0;
}

/*
 * Single-column collapse: the mobile-command-center experience AND any
 * phone-width viewport render the SAME shell as one calm touch column, with the
 * preview folded into the flow (Req 11.1, 11.2). The layout view sets
 * data-single-column="true"; the media query below catches narrow viewports for
 * the other experiences too, so every layout collapses gracefully on a phone.
 */
.shell[data-single-column="true"] .shell__body {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  height: auto;
}

.shell[data-single-column="true"] .shell__panel {
  position: static;
  max-height: none;
}

/* Every experience — including the workbench grid — becomes ONE column on a
   phone-width viewport (Req 11.1, 11.2). Same shell, no separate stylesheet. */
@media (max-width: 720px) {
  .shell__body {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem;
  }
  .shell__panel {
    position: static;
    max-height: none;
  }
  .shell[data-experience] .shell__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: auto;
    height: auto;
    max-width: 100%;
    padding: 0.75rem;
    gap: 0.75rem;
  }
  .shell[data-experience] .shell__region[data-region] {
    grid-area: auto;
    grid-column: 1;
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* ===================================================================== *
 * Session_Header — the slim top bar (Task 12.1, Req 10, 11.3, 11.4)     *
 * ===================================================================== */

.session-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  min-height: var(--header-h);
  padding: 0.4rem var(--space);
  width: 100%;
}

.session-header__brand {
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-accent);
  white-space: nowrap;
}

/* The Work_Mode switch group — a segmented control of touch-sized buttons.
   ALWAYS visible, including at 360px (Req 11.4). */
.session-header__modes {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: 999px;
}

.session-header__mode {
  min-height: 2.25rem; /* comfortable touch target within the slim bar */
  min-width: 2.75rem;
  padding: 0.35rem 0.9rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent);
  background-color: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
}

.session-header__mode[data-active="true"] {
  color: var(--color-background);
  background-color: var(--color-button);
}

.session-header__context {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.session-header__experience,
.session-header__theme {
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  color: var(--color-statusInfo);
  background-color: var(--color-badge);
  border-radius: 999px;
  white-space: nowrap;
}

.session-header__experience[hidden],
.session-header__theme[hidden] {
  display: none;
}


/* ===================================================================== *
 * Workspace controls — experience + theme selectors (Tasks 10.1/11.1)  *
 * ===================================================================== */

.workspace-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.workspace-controls__experience,
.workspace-controls__theme {
  min-height: 2.25rem;
  padding: 0.3rem 0.5rem;
  font: inherit;
  color: var(--color-accent);
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
}

.workspace-controls__apply,
.workspace-controls__cancel {
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem;
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.workspace-controls__apply {
  color: var(--color-background);
  background-color: var(--color-button);
}

.workspace-controls__cancel {
  color: var(--color-accent);
  background-color: var(--color-badge);
}

.workspace-controls__apply[hidden],
.workspace-controls__cancel[hidden] {
  display: none;
}


/* ===================================================================== *
 * Projects gate — the create-project entry point between login/builder  *
 * ===================================================================== */

.projects-gate {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space);
}

.projects-gate[hidden] {
  display: none;
}

.projects {
  display: block;
  width: 100%;
}

.projects__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: var(--space);
  background-color: var(--color-surface);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius);
}

.projects__category,
.projects__origin,
.projects__description,
.projects__template,
.projects__repo,
.projects__source {
  width: 100%;
  min-height: var(--touch);
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--color-accent);
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
}

.projects__submit {
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-background);
  background-color: var(--color-button);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.projects__notice {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-statusWarning);
}

.projects__notice[hidden] {
  display: none;
}


/* ===================================================================== *
 * Prompt / compose (Task 3.2, Req 2.1 / 2.5 / 11.3)                     *
 * ===================================================================== */

.prompt {
  display: block;
  width: 100%;
}

.prompt__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  padding: 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius);
}

.prompt__input {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.75rem;
  font: inherit;
  color: var(--color-accent);
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.prompt__input:disabled {
  opacity: 0.6;
}

.prompt__submit {
  align-self: flex-end;
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0.6rem 1.5rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-background);
  background-color: var(--color-button);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.prompt__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.prompt__indicator {
  align-self: flex-start;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background-color: var(--color-badge);
  color: var(--color-statusInfo);
  font-size: 0.9rem;
}

.prompt__notice {
  margin: 0.5rem 0 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-statusWarning);
}


/* ===================================================================== *
 * Activity_Stream (Task 4.3)                                            *
 * ===================================================================== */

.activity {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-height: 12rem;
  padding: 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}

.activity__item {
  margin: 0;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  color: var(--color-accent);
}

.activity__status {
  padding: 0.3rem 0.6rem;
  color: var(--color-statusInfo);
}

.activity__reconnect {
  min-height: var(--touch);
  padding: 0.5rem 1rem;
  font: inherit;
  color: var(--color-background);
  background-color: var(--color-button);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Diff markers: the +/- prefix is textual DATA (Req 3.4); color is additive. */
.activity__diff-line--added {
  color: var(--color-statusSuccess);
}

.activity__diff-line--removed {
  color: var(--color-statusError);
}


/* ===================================================================== *
 * Preview_Pane (Task 5.3, Req 4.1–4.6, 4.10, 4.11)                      *
 * ===================================================================== */

.preview {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius);
}

.preview__frame {
  width: 100%;
  min-height: 20rem;
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
}

.preview__loading,
.preview__status {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: var(--color-statusInfo);
}

.preview__cause {
  margin: 0;
  padding: 0.25rem 0.75rem;
  color: var(--color-statusWarning);
}

.preview__url-error {
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: var(--color-statusError);
}

.preview__restart {
  min-height: var(--touch);
  padding: 0.5rem 1rem;
  color: var(--color-background);
  background-color: var(--color-button);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.preview__mobile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.preview__mobile-hint {
  margin: 0;
  color: var(--color-accent);
}

.preview__mobile-url {
  user-select: all;
  word-break: break-all;
  padding: 0.25rem 0.5rem;
  background-color: var(--color-background);
  color: var(--color-accent);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
}

.preview__mobile-qr {
  width: 12rem;
  height: 12rem;
  max-width: 100%;
  /* The QR must be true monochrome on white to scan reliably; this is not a
     themeable surface color. */
  background-color: #ffffff;
  image-rendering: pixelated;
}


/* ===================================================================== *
 * Confirm approvals (Task 6.1, Req 5.1 / 5.3 / 11.3)                    *
 * ===================================================================== */

.confirm {
  display: block;
  width: 100%;
}

.confirm[hidden] {
  display: none;
}

.confirm__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.confirm__card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-statusWarning);
  border-radius: var(--radius);
}

.confirm__command {
  margin: 0;
  font-weight: 600;
  color: var(--color-accent);
  word-break: break-word;
}

.confirm__reason {
  margin: 0;
  color: var(--color-statusInfo);
  word-break: break-word;
}

.confirm__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.confirm__approve,
.confirm__deny {
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0.6rem 1.25rem;
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.confirm__approve {
  color: var(--color-background);
  background-color: var(--color-button);
}

.confirm__deny {
  color: var(--color-background);
  background-color: var(--color-statusError);
}


/* ===================================================================== *
 * File/tool panel surface (Req 27.2, 27.8)                              *
 * The fifth builder surface: the files the agent touched this session   *
 * (derived from the Activity_Stream's real diff frames) plus the tool    *
 * activity, and the selected file's latest change. Palette-driven.      *
 * ===================================================================== */

.file-panel {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius);
}

.file-panel__heading {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.file-panel__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-statusInfo);
}

.file-panel__empty[hidden] {
  display: none;
}

.file-panel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.file-panel__list[hidden] {
  display: none;
}

.file-panel__file {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.file-panel__file-button {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--touch);
  padding: 0.35rem 0.6rem;
  font: inherit;
  text-align: left;
  overflow-wrap: anywhere;
  color: var(--color-accent);
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.file-panel__file-button[aria-pressed="true"] {
  border-color: var(--color-accent);
  background-color: var(--color-badge);
}

.file-panel__file-meta {
  flex: 0 0 auto;
  font-size: 0.75rem;
  color: var(--color-statusInfo);
}

.file-panel__detail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.file-panel__detail-path {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
  color: var(--color-accent);
}

.file-panel__detail-notice,
.file-panel__detail-hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-statusWarning);
}

.file-panel__diff {
  margin: 0;
  padding: 0.5rem;
  max-width: 100%;
  max-height: 18rem;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
}

.file-panel__diff-line {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.file-panel__diff-line[data-marker="+"] {
  color: var(--color-statusSuccess);
}

.file-panel__diff-line[data-marker="-"] {
  color: var(--color-statusError);
}

.file-panel__diff-marker {
  display: inline-block;
  width: 1ch;
  font-weight: 700;
}

.file-panel__tool {
  font-size: 0.85rem;
  overflow-wrap: anywhere;
  color: var(--color-accent);
}


/* Narrow-phone tuning (Req 11.2): at 360px the primary column must not scroll
   horizontally. Everything above is border-box + width:100% + min-width:0, so
   nothing overflows; here we just tighten spacing and let the mode switch wrap. */
@media (max-width: 400px) {
  .shell__body {
    padding: 0.6rem;
    gap: 0.6rem;
  }
  .session-header {
    padding: 0.4rem 0.6rem;
    gap: 0.5rem;
  }
  .session-header__context {
    margin-left: 0;
    width: 100%;
  }
}



/* ===================================================================== *
 * Settings surfaces (Tasks 14 / 15.1, Req 12–15, 11.3)                  *
 *                                                                       *
 * Palette-driven like the rest of the shell — every color reads a       *
 * --color-* custom property, never a literal. Controls a user taps are  *
 * touch-sized (min-height: var(--touch)) so the settings surfaces are   *
 * operable on a phone (Req 11.3). Shown/hidden by the router (app.js).  *
 * ===================================================================== */

.shell__settings-toggle {
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0.35rem 0.9rem;
  margin-left: auto;
  font: inherit;
  font-weight: 600;
  color: var(--color-accent);
  background-color: var(--color-badge);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.settings {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--space);
  display: flex;
  flex-direction: column;
  gap: var(--space);
}

.settings[hidden] {
  display: none;
}

.settings__section {
  padding: var(--space);
  background-color: var(--color-surface);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.settings__heading {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-accent);
}

.settings__subheading {
  margin: 0.4rem 0 0.2rem;
  font-size: 0.95rem;
  color: var(--color-accent);
}

.settings__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.settings__field {
  display: block;
  width: 100%;
}

.settings__active,
.settings__outcome,
.settings__notice {
  margin: 0;
  color: var(--color-accent);
}

.settings__notice {
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-statusWarning);
}

.settings__notice[hidden] {
  display: none;
}

.settings__select,
.settings__input,
.settings__textarea,
.settings__connector-secret {
  width: 100%;
  min-height: var(--touch);
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--color-accent);
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
}

.settings__textarea {
  min-height: 5rem;
  resize: vertical;
}

.settings__button {
  min-height: var(--touch);
  min-width: var(--touch);
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: var(--color-background);
  background-color: var(--color-button);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.settings__button--small {
  min-width: auto;
  padding: 0.4rem 0.75rem;
  color: var(--color-accent);
  background-color: var(--color-badge);
}

.settings__button:disabled {
  opacity: 0.6;
  cursor: default;
}

.settings__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.settings__list-item {
  padding: 0.4rem 0.6rem;
  background-color: var(--color-background);
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  word-break: break-word;
}

.settings__connectors {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.settings__connector {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  border: 1px solid var(--color-badge);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
}

.settings__connector-name {
  font-weight: 600;
  color: var(--color-accent);
  min-width: 6rem;
}

.settings__connector-secret {
  flex: 1 1 8rem;
  min-width: 0;
}

.settings__connector-bound {
  font-size: 0.85rem;
  color: var(--color-statusWarning);
}

.settings__connector-bound[data-bound="true"] {
  color: var(--color-statusSuccess);
}

.settings__memory-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings__memory-text {
  flex: 1 1 auto;
  min-width: 0;
}

.settings__share-url {
  cursor: text;
}

.settings__share-url[hidden] {
  display: none;
}

/* Narrow-phone tuning (Req 11.2): the settings column must not scroll
   horizontally at 360px. All controls are width:100% / min-width:0, so nothing
   overflows; connector rows stack their controls. */
@media (max-width: 400px) {
  .settings {
    padding: 0.6rem;
    gap: 0.6rem;
  }
  .settings__connector {
    flex-direction: column;
    align-items: stretch;
  }
  .settings__connector-name {
    min-width: 0;
  }
}