/* Generated by tools/generate/port_app_prototype.py from workbench/html-prototype (shared/side-panel.css, shared/integrations-panel.css, automations/automations.css),
 * scoped to .app-frame. Do not edit; change the prototype and run the port again. */

/* ---- shared/side-panel.css ---- */
/* The side panels the rail opens (Browser, Files; Oliver, 27 Oct 2026): each slides in from the right,
 * detached and slightly rounded, its top level with the sidebar's and its card's foot level with the
 * chat bar's, and the chat moves left to make room. One is open at a time (shared/side-panel.js).
 * Closed, a panel is out of view and out of reach. */
.app-frame .side-panel { grid-row: 2; grid-column: 3; justify-self: end; align-self: stretch; display: flex; flex-direction: column; min-height: 0;
  width: var(--panel-width); margin: var(--panel-top) var(--panel-gap) var(--panel-bottom) 0;
  transform: translateX(calc(100% + 96px)); opacity: 0; visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
.app-frame .side-panel[data-open] { transform: none; opacity: 1; visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), visibility 0s; }

/* The chat keeps its own column beside an open panel, its conversation and bar centred in what is left. */
.app-frame [data-layout="sent"] .chat { transition: padding-right var(--dur-slow) var(--ease-out); }
.app-frame [data-layout="sent"][data-panel-open] .chat { padding-right: calc(var(--panel-width) + 2 * var(--panel-gap)); }

/* The card: the panel itself. */
.app-frame .panel-card { display: flex; flex: 1; flex-direction: column; min-height: 0; overflow: hidden;
  border-radius: var(--panel-radius); background: var(--panel-ground); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-floating); }
.app-frame .side-panel .icon-button { width: 30px; height: 30px; color: var(--text-body); }
.app-frame .side-panel .icon-button svg { width: 15px; height: 15px; stroke-width: 1.5; }
.app-frame .side-panel .icon-button:disabled { color: var(--text-dim); opacity: 0.45; cursor: default; background: none; }
.app-frame .side-panel button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.app-frame .side-panel [hidden] { display: none; }

/* The rail's mark for an open panel shows it is open. */
.app-frame .mark[aria-expanded="true"] { background: var(--control-pressed); }

.app-frame {
  --panel-width: min(716px, calc(100% - 460px));
  --panel-gap: 24px;
  --panel-top: 0px;          /* level with the sidebar's top */
  --panel-bottom: 44px;      /* the card's foot level with the chat bar's */
  --panel-radius: 12px;
  --panel-ground: #131313;   /* a step above the window, below the sidebar panel */
  --panel-field: #1b1b1b;
}

@media (prefers-reduced-motion: reduce) {
  .app-frame .side-panel, .app-frame .side-panel[data-open], .app-frame [data-layout="sent"] .chat { transition: none; }
}

/* Said in the panels' place when shared/panels.html could not be read. */
.app-frame .panels-unread { grid-row: 2; grid-column: 3; align-self: end; justify-self: end; margin: 0 var(--panel-gap) var(--panel-bottom) 0; color: var(--danger); font-size: var(--text-xs); }

/* ---- shared/integrations-panel.css ---- */
/* Integrations (Oliver, 27 Oct 2026): Integrations on the rail slides out a panel of the integrations
 * already connected, with ways on to the Integrations page and to Automations (which still needs
 * designing). The connected rows read as the app's connector state: the service's mark, its name, the
 * account it is connected as, and a Connected pill. Shell: side-panel.css. */
.app-frame .int-head { display: flex; align-items: center; gap: 10px; flex-shrink: 0; height: 52px; padding: 0 8px 0 16px; border-bottom: 1px solid var(--border); }
.app-frame .int-title { margin: 0; color: var(--text); font-size: var(--text-md); font-weight: 500; }
.app-frame .int-count { color: var(--text-dim); font-size: var(--text-sm); }
.app-frame .int-head .icon-button { margin-left: auto; }

.app-frame .int-body { display: flex; flex: 1; flex-direction: column; gap: 22px; min-height: 0; overflow-y: auto; padding: 18px 16px; }
.app-frame .int-group :is(h3, .h3) { margin: 0 0 8px; padding: 0 4px; color: var(--text-dim); font-size: var(--text-xs); font-weight: 500; }
.app-frame .int-list, .app-frame .int-links { margin: 0; padding: 0; list-style: none; border-radius: 10px; background: var(--panel-ground); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.app-frame .int-list li + li, .app-frame .int-links li + li { border-top: 1px solid var(--border); }
.app-frame .int-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; }
.app-frame .int-mark { display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; background: var(--panel-active); box-shadow: inset 0 0 0 1px var(--border); }
.app-frame .int-mark img, .app-frame .int-mark .mark-mono { width: 16px; height: 16px; }
.app-frame .int-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.app-frame .int-name { color: var(--text); font-size: var(--text-md); }
.app-frame .int-account { overflow: hidden; color: var(--text-dim); font-size: var(--text-xs); white-space: nowrap; text-overflow: ellipsis; }
.app-frame .int-pill { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 22px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-body); font-size: var(--text-xs); font-weight: 500; }
.app-frame .int-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }

.app-frame .int-link { display: flex; align-items: center; gap: 12px; width: 100%; height: 52px; padding: 0 16px; border: 0; background: none;
  color: var(--text); font: 400 var(--text-md) var(--font); text-align: left; cursor: pointer; transition: background var(--motion); }
.app-frame .int-link:hover { background: var(--control-hover); }
.app-frame .int-link:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.app-frame .int-link svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: var(--text-body); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.app-frame .int-link span { flex: 1; }
.app-frame .int-link small { color: var(--text-dim); font-size: var(--text-xs); }
.app-frame .int-link .int-go { width: 12px; height: 12px; stroke: var(--text-dim); }
.app-frame .int-note { margin: 0; padding: 0 4px; color: var(--text-dim); font-size: var(--text-xs); }
.app-frame .int-note[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .app-frame .int-link { transition: none; } }

/* ---- automations/automations.css ---- */
/* The Automations page (Oliver, 27 Oct 2026: "design the Automations screen next"). Its model and words are
 * the app's (features/automations, modules/automations): agents propose automations in a chat and the person
 * turns them on; each run is a turn with the same agents in the same chat. Waiting for you comes first,
 * because nothing happens until it is answered. Opening a tile slides its detail in as a side panel. */
.app-frame .window[data-layout="page"] { grid-template-columns: var(--sidebar-inset) var(--sidebar-width) minmax(0, 1fr) 0 var(--panel-gap); }
/* The page names itself in its heading, so the title bar does not repeat it. */
.app-frame [data-layout="page"] .title { display: none; }
.app-frame [data-layout="page"] .status { grid-column: 3 / 6; margin-right: 29px; }

.app-frame .page-main { grid-row: 2; grid-column: 3; min-width: 0; min-height: 0; overflow-y: auto; padding: 18px 32px 44px;
  transition: padding-right var(--dur-slow) var(--ease-out); }
.app-frame [data-layout="page"][data-panel-open] .page-main { padding-right: calc(var(--panel-width) + 2 * var(--panel-gap)); }
.app-frame .page-inner { max-width: 1040px; }

/* The head: what the page is, the two views, and New automation. */
.app-frame .ap-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.app-frame .ap-head :is(h1, .h1) { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.25; }
.app-frame .ap-head p { margin: 6px 0 0; max-width: 56ch; color: var(--text-dim); font-size: var(--text-md); line-height: 1.5; }
.app-frame .ap-controls { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.app-frame .ap-views { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); }
.app-frame .ap-view { height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--text-dim); font: 500 var(--text-sm) var(--font); cursor: pointer; }
.app-frame .ap-view[aria-selected="true"] { background: var(--panel-active); color: var(--text); }
.app-frame .ap-new { height: 32px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--chip); color: var(--chip-text); font: 500 var(--text-sm) var(--font); cursor: pointer; }
.app-frame .ap-new:hover { background: var(--chip-hover); }
.app-frame .ap-view:focus-visible, .app-frame .ap-new:focus-visible, .app-frame .ap-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.app-frame .ap-quiet { color: var(--text-dim); font-size: var(--text-sm); }
.app-frame .ap-note { margin: 0 0 22px; color: var(--text-dim); font-size: var(--text-sm); }
.app-frame .ap-group + .ap-group { margin-top: 34px; }
.app-frame .ap-group :is(h2, .h2) { margin: 0 0 12px; color: var(--text-body); font-size: var(--text-sm); font-weight: 500; }
.app-frame .ap-group :is(h2, .h2) span { color: var(--text-dim); font-weight: 400; }

/* Tiles: landscape, as the Rooms page's; name, when, who, state. */
.app-frame .ap-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.app-frame .ap-tile { display: flex; flex-direction: column; gap: 6px; width: 100%; height: 138px; padding: 16px 16px 14px; border: 0; border-radius: 12px;
  background: var(--panel); box-shadow: inset 0 0 0 1px var(--border); color: var(--text); text-align: left; cursor: pointer;
  transition: background var(--motion), box-shadow var(--motion); }
.app-frame .ap-tile:hover { background: var(--panel-active); }
.app-frame .ap-tile[aria-current="true"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent); }
.app-frame .ap-tile[data-state="proposed"] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus) 35%, var(--border)); }
.app-frame .ap-tile-name { font-size: var(--text-md); font-weight: 500; line-height: 1.35; }
.app-frame .ap-tile-when { color: var(--text-dim); font-size: var(--text-sm); }
.app-frame .ap-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.app-frame .ap-who { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-body); font-size: var(--text-sm); }
.app-frame .ap-who .mark { width: 15px; height: 15px; }
.app-frame .ap-who-names { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* State: On is green, Waiting for you blue, Not running amber, Paused and Done quiet. */
.app-frame .ap-state { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 22px; padding: 0 9px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-body); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; }
.app-frame .ap-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.app-frame .ap-state[data-state="enabled"] i { background: var(--success); }
.app-frame .ap-state[data-state="proposed"] i { background: var(--focus); }
.app-frame .ap-state[data-state="cannot"] { color: var(--warning); }
.app-frame .ap-state[data-state="cannot"] i { background: var(--warning); }

/* Nothing yet, and the Reminders view. */
.app-frame .ap-empty { display: grid; justify-items: center; gap: 8px; padding: 80px 24px; text-align: center; }
.app-frame .ap-empty :is(h2, .h2) { margin: 0; font-size: var(--text-lg); font-weight: 500; }
.app-frame .ap-empty p { margin: 0 0 8px; color: var(--text-dim); font-size: var(--text-md); }
.app-frame [hidden] { display: none !important; }

.app-frame { --text-lg: 15px; }

@media (prefers-reduced-motion: reduce) { .app-frame .page-main, .app-frame .ap-tile { transition: none; } }