@my-life-buddies/cli 0.1.2

package/dist/web/app.css

@@ -0,0 +1,508 @@
+@layer reset, base, shell, debugger, simulator, overlays, responsive;
+
+@layer reset {
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { min-height: 100%; margin: 0; overflow-x: clip; }
+  button, input, textarea, select { font: inherit; }
+  button, select, textarea { border: 0; }
+  button { color: inherit; cursor: pointer; }
+  button:disabled { cursor: not-allowed; }
+  [hidden] { display: none !important; }
+}
+
+@layer base {
+  :root {
+    background: var(--color-paper);
+    color: var(--color-ink);
+    font-family: var(--font-body);
+  }
+
+  body {
+    min-width: 20rem;
+    min-height: 100dvh;
+    background: var(--color-paper);
+    color: var(--color-ink);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  h1, h2, h3, h4, p { min-width: 0; text-wrap: pretty; }
+  h1, h2, h3, h4 { font-family: var(--font-display); }
+  svg { display: block; }
+  :focus { outline: none; }
+  :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  .skip-link {
+    position: fixed;
+    inset: 0.5rem auto auto 0.5rem;
+    z-index: var(--z-toast);
+    transform: translateY(-160%);
+    min-height: var(--control-height);
+    display: flex;
+    align-items: center;
+    padding-inline: var(--space-md);
+    border-radius: var(--radius-sm);
+    background: var(--color-ink-strong);
+    color: var(--color-paper-raised);
+    text-decoration: none;
+  }
+
+  .skip-link:focus { transform: none; }
+}
+
+@layer shell {
+  .app-shell { min-height: 100dvh; }
+
+  .sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: var(--z-sticky);
+    width: 14.25rem;
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-md);
+    border-inline-end: var(--rule-hair) solid var(--color-rule);
+    background: var(--color-paper-raised);
+  }
+
+  .brand {
+    min-height: 3.5rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding-inline: var(--space-xs);
+    color: var(--color-ink-strong);
+  }
+
+  .brand-mark {
+    width: 2.25rem;
+    height: 2.25rem;
+    display: block;
+    flex: none;
+    object-fit: contain;
+  }
+
+  .brand-name { font-size: var(--text-base); font-weight: 600; letter-spacing: -0.02em; }
+  .sidebar-section { margin-block-start: var(--space-xl); }
+
+  .sidebar-label,
+  .eyebrow {
+    margin: 0;
+    color: var(--color-muted);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+  }
+
+  .sidebar-label { padding-inline: var(--space-sm); }
+
+  .debug-tabs {
+    display: grid;
+    gap: var(--space-2xs);
+    margin-block-start: var(--space-sm);
+  }
+
+  .debug-tabs button {
+    min-height: 2.875rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding-inline: var(--space-sm);
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--color-ink-soft);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    text-align: start;
+    transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
+  }
+
+  .debug-tabs button svg,
+  .simulator-device svg {
+    width: 1.125rem;
+    height: 1.125rem;
+    flex: none;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.7;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .debug-tabs button[aria-selected="true"] {
+    background: var(--color-accent-soft);
+    color: var(--color-accent);
+  }
+
+  .simulator-device {
+    min-height: 2.875rem;
+    display: flex;
+    align-items: center;
+    gap: var(--space-sm);
+    padding-inline: var(--space-sm);
+    border: var(--rule-hair) solid var(--color-rule);
+    border-radius: var(--radius-sm);
+    background: var(--color-paper-raised);
+    color: var(--color-ink-soft);
+    font-size: var(--text-sm);
+    font-weight: 500;
+  }
+
+  .application { min-height: 100dvh; margin-inline-start: 14.25rem; }
+
+  .topbar {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: var(--z-raised);
+    min-height: 4.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-lg);
+    padding: var(--space-sm) var(--page-gutter);
+    border-block-end: var(--rule-hair) solid var(--color-rule);
+    background: var(--color-paper-raised);
+  }
+
+  .project-heading { min-width: 0; display: flex; align-items: baseline; }
+  .project-heading h1 {
+    margin: 0;
+    overflow: hidden;
+    color: var(--color-ink-strong);
+    font-size: var(--text-sm);
+    font-weight: 600;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .topbar-actions { display: flex; align-items: center; gap: var(--space-xs); }
+  .connection-state {
+    min-height: 2.5rem;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-xs);
+    padding-inline: var(--space-sm);
+    color: var(--color-ink-soft);
+    font-size: var(--text-xs);
+    white-space: nowrap;
+  }
+
+  .connection-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--color-muted); }
+  .connection-state[data-phase="ready"] .connection-dot { background: var(--color-success); }
+  .connection-state[data-phase="starting"] .connection-dot,
+  .connection-state[data-phase="stopping"] .connection-dot { background: var(--color-warning); }
+  .connection-state[data-phase="failed"] .connection-dot { background: var(--color-error); }
+
+  .button {
+    min-height: var(--control-height);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--space-lg);
+    border: var(--rule-hair) solid transparent;
+    border-radius: var(--radius-sm);
+    font-size: var(--text-sm);
+    font-weight: 500;
+    transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-short) var(--ease-out);
+  }
+
+  .button-primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
+  .button-primary[data-action="stop"] { border-color: var(--color-error); background: var(--color-error-soft); color: var(--color-error); }
+  .button:disabled { opacity: 0.5; }
+  .button[data-state="loading"] { opacity: 0.68; }
+  .button[data-state="error"] { border-color: var(--color-error); }
+  .button[data-state="success"] { border-color: var(--color-success); }
+
+  .workspace {
+    min-height: calc(100dvh - 4.5rem);
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(22rem, 27rem);
+    background: var(--color-paper);
+  }
+}
+
+@layer debugger {
+  .debugger { min-width: 0; min-height: 0; background: var(--color-paper); }
+
+  .run-strip {
+    padding: var(--space-xl) var(--page-gutter) 0;
+    border-block-end: var(--rule-hair) solid var(--color-rule);
+  }
+
+  .run-heading { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-lg); }
+  .run-identity { min-width: 0; flex: 1 1 10rem; }
+  .run-title-line { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-xs); }
+  .run-title-line h2 {
+    margin: 0;
+    overflow: hidden;
+    color: var(--color-ink-strong);
+    font-size: clamp(1.375rem, 1.8vw, 2rem);
+    font-weight: 600;
+    letter-spacing: -0.035em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .status-pill {
+    flex: none;
+    padding: 0.3125rem var(--space-sm);
+    border-radius: var(--radius-pill);
+    background: var(--color-paper-soft);
+    color: var(--color-ink-soft);
+    font-size: 0.6875rem;
+    font-weight: 500;
+  }
+
+  .status-pill[data-status="running"],
+  .status-pill[data-status="pending"],
+  .status-pill[data-status="accepted"] { background: var(--color-warning-soft); color: var(--color-warning); }
+  .status-pill[data-status="completed"] { background: var(--color-success-soft); color: var(--color-success); }
+  .status-pill[data-status="failed"] { background: var(--color-error-soft); color: var(--color-error); }
+
+  .run-reference { display: flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-xs); color: var(--color-ink-soft); font-size: var(--text-xs); }
+  #run-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: all; }
+  #copy-run-id { flex: none; min-height: 2.75rem; font-size: var(--text-xs); }
+  .run-controls { display: grid; gap: var(--space-xs); flex: 0 1 21rem; min-width: 0; }
+  .run-picker-label { color: var(--color-ink-soft); font-size: var(--text-xs); }
+  .run-navigation { display: flex; align-items: stretch; gap: var(--space-xs); }
+  .run-step { flex: none; width: 2.75rem; min-height: 2.75rem; background: transparent; border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); }
+  .run-step:enabled:hover { background: var(--color-paper-soft); border-color: var(--color-ink); }
+  .run-step:enabled:active { background: var(--color-rule); }
+  .run-step:disabled { color: var(--color-muted); border-color: var(--color-rule); }
+  .run-follow { justify-self: end; display: flex; align-items: center; gap: var(--space-xs); min-height: 2.75rem; color: var(--color-ink-soft); font-size: var(--text-xs); cursor: pointer; }
+  .run-follow input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-ink); }
+  .run-picker {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+    min-height: max(2.75rem, var(--control-height));
+    padding: var(--space-sm) 2rem var(--space-sm) var(--space-sm);
+    border: var(--rule-hair) solid var(--color-rule-strong);
+    border-radius: var(--radius-sm);
+    background: var(--color-paper-raised);
+    color: var(--color-ink);
+    font-size: var(--text-xs);
+  }
+
+  .run-picker:disabled { color: var(--color-muted); }
+  .run-picker:enabled:hover { border-color: var(--color-ink); }
+  .run-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); margin: var(--space-xl) 0 0; }
+  .run-metrics div { min-width: 0; padding: var(--space-md) 0 var(--space-lg); border-block-start: var(--rule-hair) solid var(--color-rule); }
+  .run-metrics dt { margin-block-end: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
+  .run-metrics dd { margin: 0; overflow: hidden; color: var(--color-ink-strong); font-family: var(--font-mono); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; }
+
+  .debug-panels { min-width: 0; }
+  .debug-panel { min-height: 31rem; padding: var(--space-xl) var(--page-gutter) var(--space-3xl); }
+  .section-heading { display: flex; align-items: start; justify-content: space-between; gap: var(--space-xl); padding-block-end: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
+  .section-heading h3, .environment-note h3 { margin: 0; color: var(--color-ink-strong); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.025em; }
+  .section-heading p { max-width: 40rem; margin: var(--space-xs) 0 0; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.6; }
+  .source-label { color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
+  .panel-intro { max-width: 44rem; margin: var(--space-lg) 0; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.65; }
+
+  .overview-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(13rem, 0.55fr); gap: var(--space-2xl); }
+  .run-summary { min-width: 0; }
+  .environment-note { padding-inline-start: var(--space-xl); border-inline-start: var(--rule-hair) solid var(--color-rule); }
+  .environment-note h3 { margin-block: var(--space-xs) var(--space-lg); font-size: var(--text-lg); }
+  .environment-note dl { margin: 0; }
+  .environment-note dl div { display: grid; grid-template-columns: minmax(5rem, 0.55fr) minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
+  .environment-note dt { color: var(--color-muted); font-size: var(--text-xs); }
+  .environment-note dd { margin: 0; overflow-wrap: anywhere; font-size: var(--text-xs); text-align: end; }
+
+  .empty-state { min-height: 18rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-xs); }
+  .empty-glyph { width: 2rem; height: 2rem; display: grid; place-items: center; margin-block-end: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: 50%; color: var(--color-ink-soft); }
+  .empty-state h4 { margin: 0; font-size: var(--text-md); font-weight: 600; }
+  .empty-state p { max-width: 30rem; margin: 0; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.65; }
+
+  .waterfall { display: grid; gap: var(--space-md); margin-block-start: var(--space-xl); padding-block-end: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
+  .waterfall-row { display: grid; grid-template-columns: 6rem minmax(5rem, 1fr) 4.5rem; align-items: center; gap: var(--space-md); font-size: var(--text-xs); }
+  .waterfall-track { height: 0.375rem; overflow: hidden; border-radius: var(--radius-pill); background: var(--color-paper-soft); }
+  .waterfall-fill { display: block; height: 100%; min-width: var(--space-2xs); transform-origin: left; border-radius: inherit; background: var(--color-ink); }
+  .waterfall-row strong { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; text-align: end; }
+  .run-summary-copy { margin: var(--space-lg) 0 0; color: var(--color-ink-soft); font-size: var(--text-sm); line-height: 1.65; }
+
+  .timeline { max-width: 50rem; margin: var(--space-xl) 0 0; padding: 0; list-style: none; }
+  .timeline-item { position: relative; display: grid; grid-template-columns: 5.75rem 1rem minmax(0, 1fr); gap: var(--space-sm); min-height: 4.5rem; }
+  .timeline-item:not(:last-child)::after { position: absolute; inset: 1.25rem auto 0 6.25rem; width: var(--rule-hair); background: var(--color-rule); content: ""; }
+  .timeline-time { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.6875rem; text-align: end; }
+  .timeline-dot { position: relative; z-index: var(--z-base); width: 0.5rem; height: 0.5rem; margin: var(--space-2xs); border-radius: 50%; background: var(--color-paper-raised); box-shadow: 0 0 0 var(--rule-hair) var(--color-rule-strong); }
+  .timeline-copy strong { display: block; margin-block-end: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; }
+  .timeline-copy p { margin: 0; color: var(--color-muted); font-size: var(--text-xs); }
+  .timeline-empty { padding: var(--space-xl) 0; color: var(--color-muted); font-size: var(--text-sm); }
+
+  .context-list, .protocol-log { max-width: 54rem; border-block-start: var(--rule-hair) solid var(--color-rule); }
+  .context-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: var(--space-lg); padding-block: var(--space-lg); border-block-end: var(--rule-hair) solid var(--color-rule); }
+  .context-role { color: var(--color-ink-strong); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; }
+  .context-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: var(--text-sm); line-height: 1.65; }
+  .context-time { color: var(--color-muted); font-family: var(--font-mono); font-size: 0.625rem; }
+
+  .protocol-log { margin-block-start: var(--space-xl); font-family: var(--font-mono); }
+  .protocol-row { display: grid; grid-template-columns: 5rem 6rem minmax(0, 1fr) auto; gap: var(--space-sm); padding-block: var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); font-size: 0.6875rem; line-height: 1.5; }
+  .protocol-time, .protocol-channel { color: var(--color-muted); }
+  .protocol-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .protocol-duration { color: var(--color-ink-soft); }
+  .runtime-log-text { grid-column: 1 / -1; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--color-ink); }
+  .text-button, .error-banner button { min-height: var(--control-height); padding: var(--space-xs); background: transparent; color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; }
+}
+
+@layer simulator {
+  .simulator-area {
+    min-width: 0;
+    min-height: calc(100dvh - 4.5rem);
+    max-height: calc(100dvh - 4.5rem);
+    position: sticky;
+    inset-block-start: 4.5rem;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    padding: var(--space-xl) var(--space-lg) var(--space-md);
+    border-inline-start: var(--rule-hair) solid var(--color-rule);
+    background: var(--color-paper-soft);
+  }
+
+  .simulator-caption { min-height: var(--control-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
+  .simulator-caption h2 { margin: 0; color: var(--color-ink-strong); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; }
+
+  .device-stage { min-height: 0; display: grid; place-items: center; padding-block: var(--space-md) var(--space-xs); container-type: size; }
+  .phone { --phone-width: min(22rem, 90cqw, 45cqh); width: var(--phone-width); aspect-ratio: 415 / 843; container-type: inline-size; }
+  .phone iphone-16-max { --width: var(--phone-width); display: block; width: 100%; filter: drop-shadow(var(--shadow-phone)); }
+  .phone-screen { position: relative; width: 100%; height: 100%; display: grid; grid-template-rows: 10.6024cqw minmax(0, 1fr) auto; padding: 11.0843cqw 0 0; overflow: clip; background: var(--color-phone-paper); color: var(--color-phone-ink); font-family: var(--font-body); }
+
+  .chat-navigation { position: relative; display: flex; align-items: center; justify-content: center; padding: 0 19.2771cqw; background: var(--color-phone-paper); color: var(--color-phone-ink); }
+  .back-chevron, .chat-widgets, .chat-more { position: absolute; inset-block-start: 50%; width: 8.1928cqw; height: 8.1928cqw; display: grid; place-items: center; padding: 0; transform: translateY(-50%); background: transparent; }
+  .back-chevron { inset-inline-start: 1.4458cqw; }
+  .chat-navigation-actions { position: absolute; inset-block: 0; inset-inline-end: 1.4458cqw; display: flex; align-items: center; }
+  .chat-navigation-actions .chat-widgets, .chat-navigation-actions .chat-more { position: relative; inset: auto; transform: none; }
+  .back-chevron svg { width: 4.3373cqw; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
+  .chat-widgets svg { width: 5.0602cqw; fill: none; stroke: currentColor; stroke-width: 2; }
+  .chat-more svg { width: 5.0602cqw; fill: currentColor; stroke: none; }
+  .buddy-identity { min-width: 0; }
+  .chat-navigation h3 { margin: 0; overflow: hidden; font-size: 3.3735cqw; font-weight: 600; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
+
+  .chat-messages { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 2.8916cqw 3.8554cqw 4.8193cqw; background: var(--color-phone-paper); color: var(--color-phone-ink); scrollbar-width: none; }
+  .chat-messages::-webkit-scrollbar { display: none; }
+  .chat-empty { min-height: 100%; display: block; }
+  .chat-date { align-self: center; margin: 0 0 2.8916cqw; color: var(--color-phone-muted); font-size: 2.6506cqw; }
+  .message-row { width: 100%; display: flex; align-items: flex-start; gap: 2.4096cqw; }
+  .message-row + .message-row, .chat-date + .chat-date, .message-row + .chat-date { margin-block-start: 3.8554cqw; }
+  .message-row[data-role="user"] { justify-content: flex-end; }
+  .message-content { max-width: calc(100% - 17.8313cqw); }
+  .message-row[data-role="user"] .message-content { max-width: 75%; }
+  .message-bubble { padding: 2.6506cqw 3.8554cqw; border-radius: 3.8554cqw; background: var(--color-phone-surface); color: var(--color-phone-ink); white-space: pre-wrap; word-break: break-word; font-size: 3.3735cqw; line-height: 1.5; }
+  .message-row[data-role="user"] .message-bubble { background: var(--color-phone-ink); color: var(--color-phone-paper); }
+  .message-avatar { width: 7.7108cqw; height: 7.7108cqw; display: grid; flex: none; place-items: center; border-radius: 50%; background: color-mix(in oklch, var(--color-phone-accent) 9%, var(--color-phone-surface)); color: color-mix(in oklch, var(--color-phone-ink) 64%, var(--color-phone-muted)); font-size: 2.4096cqw; font-weight: 700; }
+  .replying-indicator { display: inline-flex; align-items: center; gap: 0.9639cqw; min-height: 4.3373cqw; padding: 2.1687cqw 3.3735cqw; border-radius: 3.8554cqw; background: var(--color-phone-surface); }
+  .replying-indicator i { width: 1.4458cqw; height: 1.4458cqw; border-radius: 50%; background: color-mix(in oklch, var(--color-phone-ink) 65%, var(--color-phone-paper)); animation: breathe 1.1s var(--ease-in-out) infinite; }
+  .replying-indicator i:nth-child(2) { animation-delay: 140ms; }
+  .replying-indicator i:nth-child(3) { animation-delay: 280ms; }
+
+  .composer { display: grid; grid-template-columns: 7.7108cqw minmax(0, 1fr) 7.7108cqw 7.7108cqw; align-items: center; gap: 0.4819cqw; margin: 1.9277cqw 2.8916cqw 5.7831cqw; padding: 0.9639cqw 1.2048cqw; border-radius: 3.8554cqw; background: var(--color-phone-surface); }
+  .composer textarea { width: 100%; min-height: 7.7108cqw; max-height: 22.1687cqw; resize: none; padding: 1.9277cqw 0.9639cqw; outline: 2px solid transparent; background: transparent; color: var(--color-phone-ink); font-size: 3.1325cqw; line-height: 1.35; }
+  .composer textarea::placeholder { color: var(--color-phone-muted); }
+  .composer textarea:disabled { opacity: 0.55; }
+  .composer textarea[aria-invalid="true"] { outline-color: var(--color-error); }
+  .composer textarea[data-state="success"] { outline-color: var(--color-success); }
+  .composer-tool { width: 7.7108cqw; height: 7.7108cqw; display: grid; place-items: center; padding: 0; background: transparent; color: var(--color-phone-ink); }
+  .composer-tool svg { width: 5.0602cqw; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
+  .send-button, .stop-button { width: 7.7108cqw; height: 7.7108cqw; display: grid; place-items: center; border-radius: 50%; background: var(--color-phone-ink); color: var(--color-phone-paper); }
+  .send-button:disabled { opacity: 0.18; }
+  .send-button svg { width: 4.3373cqw; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+  .stop-button span { width: 1.9277cqw; height: 1.9277cqw; border-radius: var(--radius-xs); background: var(--color-phone-paper); }
+  .home-indicator { position: absolute; inset: auto 50% 1.6867cqw auto; width: 32.2892cqw; height: 0.9639cqw; transform: translateX(50%); border-radius: var(--radius-pill); background: var(--color-phone-ink); opacity: 0.88; }
+  .keyboard-hint { margin: var(--space-xs) 0 0; color: var(--color-muted); font-size: 0.6875rem; text-align: center; }
+  kbd { font-family: var(--font-body); font-size: 0.625rem; }
+}
+
+@layer overlays {
+  .pairing-qr { width: min(16rem, 100%); height: auto; flex-shrink: 0; border-radius: var(--radius-sm); background: white; }
+  .pairing-panel { position: fixed; z-index: var(--z-modal); inset: 5.25rem var(--space-lg) auto auto; width: min(24rem, calc(100% - 2rem)); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-lg); background: var(--color-paper-raised); box-shadow: var(--shadow-whisper); animation: panel-in var(--dur-short) var(--ease-out) both; }
+  .pairing-panel .eyebrow { margin-block-end: var(--space-xs); }
+  .pairing-panel h2 { margin: 0; font-size: var(--text-md); font-weight: 600; }
+  .icon-button { width: var(--control-height); height: var(--control-height); display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-sm); background: var(--color-paper-raised); }
+  .icon-button svg { width: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
+  .pairing-body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: var(--space-lg); }
+  .pairing-placeholder { width: 5.5rem; height: 5.5rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule-strong); background: var(--color-paper-raised); }
+  .pairing-placeholder span { border: 0.375rem solid var(--color-ink-strong); }
+  .pairing-placeholder span:nth-child(4) { border-width: 0.1875rem 0.4375rem 0.4375rem 0.1875rem; }
+  .pairing-status { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: 600; }
+  .pairing-hint { margin: 0; color: var(--color-ink-soft); font-size: var(--text-xs); line-height: 1.55; }
+  .pairing-code { margin: var(--space-xs) 0 0; font-family: var(--font-mono); font-size: var(--text-md); letter-spacing: 0.1em; }
+  .pairing-link { display: block; max-width: 100%; margin-block-start: var(--space-xs); overflow: hidden; color: var(--color-ink-soft); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
+
+  .error-banner, .toast { position: fixed; z-index: var(--z-toast); inset-block-end: var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); border-radius: var(--radius-sm); box-shadow: var(--shadow-whisper); }
+  .error-banner { inset-inline-start: 50%; transform: translateX(-50%); width: min(35rem, calc(100% - 2rem)); justify-content: space-between; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-error); background: var(--color-paper-raised); font-size: var(--text-xs); }
+  .toast { inset-inline-end: var(--space-lg); max-width: min(22rem, calc(100% - 2rem)); padding: var(--space-sm) var(--space-md); background: var(--color-ink-strong); color: var(--color-paper-raised); font-size: var(--text-xs); }
+
+  @keyframes panel-in { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; transform: none; } }
+  @keyframes breathe { 0%, 100% { opacity: 0.28; transform: scale(0.78); } 50% { opacity: 1; transform: scale(1); } }
+}
+
+@layer responsive {
+  @media (hover: hover) and (pointer: fine) {
+    .debug-tabs button:not([aria-selected="true"]):hover, .simulator-device:hover { background: var(--color-paper-raised); color: var(--color-ink-strong); }
+    .button-primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
+    .button:not(.button-primary):hover:not(:disabled) { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent); }
+    .debug-tabs button:not([aria-selected="true"]):hover, .simulator-device:hover, .button:hover:not(:disabled), .icon-button:hover { transform: translateY(-1px); }
+  }
+
+  .debug-tabs button:active, .simulator-device:active, .button:active:not(:disabled), .icon-button:active { transform: translateY(1px); }
+
+  @media (max-width: 78rem) {
+    .workspace { grid-template-columns: minmax(0, 1fr); }
+    .simulator-area { min-height: 45rem; max-height: none; position: static; border-block-start: var(--rule-hair) solid var(--color-rule); border-inline-start: 0; }
+    .phone { --phone-width: min(21rem, 84cqw, 42cqh); }
+  }
+
+  @media (max-width: 58rem) {
+    .sidebar { position: sticky; inset: 0 0 auto; width: auto; height: auto; flex-direction: row; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-md); border-inline-end: 0; border-block-end: var(--rule-hair) solid var(--color-rule); }
+    .brand { min-height: 3rem; padding: 0; }
+    .brand-mark { width: 2rem; height: 2rem; }
+    .brand-name, .sidebar-label { display: none; }
+    .sidebar-section { min-width: 0; margin: 0; flex: 1; }
+    .debug-tabs { display: flex; gap: var(--space-2xs); margin: 0; overflow-x: auto; scrollbar-width: none; }
+    .debug-tabs::-webkit-scrollbar { display: none; }
+    .debug-tabs button { min-height: 2.5rem; flex: none; padding-inline: var(--space-sm); }
+    .debug-tabs button svg { display: none; }
+    .application { margin-inline-start: 0; }
+    .topbar { inset-block-start: 4rem; }
+    .overview-grid { grid-template-columns: minmax(0, 1fr); }
+    .environment-note { padding-block-start: var(--space-lg); padding-inline-start: 0; border-block-start: var(--rule-hair) solid var(--color-rule); border-inline-start: 0; }
+  }
+
+  @media (max-width: 40rem) {
+    .topbar { align-items: flex-start; padding-block: var(--space-md); }
+    .project-heading { display: grid; }
+    .topbar-actions { flex: none; }
+    .connection-state { display: none; }
+    .button { min-height: 2.5rem; padding-inline: var(--space-md); font-size: var(--text-xs); }
+    .run-heading { align-items: stretch; flex-direction: column; }
+    .run-identity, .run-controls { flex: auto; }
+    .run-picker { width: 100%; }
+    .run-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .debug-panel { padding-block-end: var(--space-2xl); }
+    .section-heading { display: grid; gap: var(--space-sm); }
+    .context-row { grid-template-columns: 4rem minmax(0, 1fr); }
+    .context-time { grid-column: 2; }
+    .protocol-row { grid-template-columns: 4rem minmax(0, 1fr) auto; }
+    .protocol-channel { display: none; }
+    .pairing-body { grid-template-columns: minmax(0, 1fr); }
+  }
+
+  @media (pointer: coarse) {
+    .debug-tabs button, .simulator-device, .button, .icon-button, .text-button { min-height: 3rem; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation-duration: 120ms !important; animation-iteration-count: 1 !important; transition-duration: 120ms !important; }
+  }
+}