/* ../webview/src/styles/tokens.css */
:root {
  --buncss-light: ;
  --buncss-dark: initial;
  color-scheme: dark;
  --fw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fw-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fw-text-2xs: 10px;
  --fw-text-xs: 11px;
  --fw-text-sm: 12px;
  --fw-text: 13px;
  --fw-text-lg: 15px;
  --fw-text-field: var(--fw-text);
  --fw-leading: 1.55;
  --fw-leading-tight: 1.4;
  --fw-s1: 4px;
  --fw-s2: 8px;
  --fw-s3: 12px;
  --fw-s4: 16px;
  --fw-s5: 24px;
  --fw-s6: 32px;
  --fw-diff-line-number-width: 4ch;
  --fw-diff-marker-width: 2ch;
  --fw-row-meta-space: calc(var(--fw-text-2xs) * var(--fw-leading)  + var(--fw-s1));
  --fw-measure: 46rem;
  --fw-pane-inset: var(--fw-s3);
  --fw-column-inset: max(var(--fw-pane-inset), (100% - var(--fw-measure)) / 2);
  --fw-workflow-measure: 60rem;
  --fw-workflow-inset: max(var(--fw-pane-inset), (100% - var(--fw-workflow-measure)) / 2);
  --fw-workspace-width: 28rem;
  --fw-table-cell-max: 24rem;
  --fw-measure-min: 36rem;
  --fw-gutter: 26px;
  --fw-marker-x: 13px;
  --fw-image-preview-width: 400px;
  --fw-image-preview-height: min(240px, calc(100dvh / 3));
  --fw-radius-sm: 4px;
  --fw-radius: 6px;
  --fw-radius-lg: 8px;
  --fw-radius-xl: 22px;
  --fw-radius-pill: 999px;
  --fw-blur-light: 8px;
  --fw-motion-fast: .12s;
  --fw-motion: .15s;
  --fw-motion-slow: .24s;
  --fw-ease: cubic-bezier(.2, .7, .2, 1);
  --fw-z-popover: 20;
  --fw-z-tooltip: 30;
  --fw-z-sheet: 40;
  --fw-z-toast: 50;
  --fw-bg: #1c1b19;
  --fw-fg: #cfcbc3;
  --fw-fg-muted: #9b968c;
  --fw-fg-prose: color-mix(in srgb, var(--fw-fg) 65%, white);
  --fw-bg-raised: color-mix(in srgb, var(--fw-fg) 6%, transparent);
  --fw-bg-raised-strong: color-mix(in srgb, var(--fw-fg) 10%, transparent);
  --fw-press: color-mix(in srgb, var(--fw-fg) 14%, transparent);
  --fw-hairline: color-mix(in srgb, var(--fw-fg) 16%, transparent);
  --fw-rail: color-mix(in srgb, var(--fw-fg) 11%, transparent);
  --fw-accent: #0078d4;
  --fw-accent-hover: #026ec1;
  --fw-accent-fg: #fff;
  --fw-selection-bg: color-mix(in srgb, var(--fw-accent) 80%, black);
  --fw-selection-fg: var(--fw-accent-fg);
  --fw-scrollbar-thumb: color-mix(in srgb, var(--fw-fg-muted) 45%, transparent);
  --fw-scrollbar-track: transparent;
  --fw-scroll-fade: var(--fw-s3);
  --fw-secondary: #33312d;
  --fw-secondary-hover: #3e3c37;
  --fw-secondary-fg: var(--fw-fg);
  --fw-focus: #0078d4;
  --fw-link: #4daafc;
  --fw-link-active: #4daafc;
  --fw-error: #f85149;
  --fw-warning: #cca700;
  --fw-success: #89d185;
  --fw-qr-ground: #fff;
  --fw-qr-ink: #000;
  --fw-info: #3794ff;
  --fw-purple: #b180d7;
  --fw-teal: #4cc4cc;
  --fw-orange: #d18616;
  --fw-phase-name: var(--fw-purple);
  --fw-agent-name: var(--fw-teal);
  --fw-user-accent: var(--fw-accent);
  --fw-session-message: var(--fw-info);
  --fw-tool-name: color-mix(in srgb, #ffe2a9 72%, var(--fw-fg-muted));
  --fw-input-bg: #262523;
  --fw-input-glass: color-mix(in srgb, var(--fw-input-bg) 80%, transparent);
  --fw-input-backdrop-dark: blur(var(--fw-blur-light)) brightness(.3);
  --fw-input-backdrop-light: blur(var(--fw-blur-light)) brightness(1.2) contrast(.6);
  --fw-input-backdrop: var(--fw-input-backdrop-dark);
  --fw-input-fg: var(--fw-fg);
  --fw-input-border: #3d3b36;
  --fw-menu-bg: #232220;
  --fw-menu-border: #3d3b36;
  --fw-list-hover: #2d2c29;
  --fw-list-active-bg: var(--fw-bg-raised-strong);
  --fw-list-active-fg: var(--fw-fg);
  --fw-hover-bg: #242321;
  --fw-hover-fg: var(--fw-fg);
  --fw-hover-border: #46443e;
  --fw-shadow-popover: 0 4px 14px #00000047;
  --fw-shadow-tooltip: 0 2px 8px #0000003d;
  --fw-shadow-sheet: 0 12px 40px #00000073;
  --fw-scrim: #00000073;
  --fw-code-bg: #2b2a27;
  --fw-diff-add-bg: #9ccc2c33;
  --fw-diff-del-bg: #f003;
  --fw-diff-add-standard-bg: #2ea04352;
  --fw-diff-del-standard-bg: #da363352;
  --fw-chat-code-keyword: #7fb4f5;
  --fw-chat-code-string: #d9a66e;
  --fw-chat-code-number: #b5cea8;
  --fw-chat-code-function: #dcdcaa;
  --fw-chat-code-type: #4ec9b0;
}

@media (pointer: coarse) {
  :root {
    --fw-text-field: max(var(--fw-text), 16px);
  }
}

/* ../webview/phone/host-theme.css */
:root {
  --fw-text-2xs: 11px;
  --fw-text-xs: 12px;
  --fw-text-sm: 13px;
  --fw-text: 15px;
  --fw-text-lg: 17px;
}

html, body {
  background: var(--fw-bg);
  overflow: hidden;
  overscroll-behavior: none;
  height: 100%;
  margin: 0;
}

#root {
  padding-bottom: var(--fw-keyboard-inset, 0px);
  box-sizing: border-box;
  height: 100%;
}

#root .client {
  height: 100%;
}

html.ios-installed, html.ios-installed body, html.ios-installed #root {
  height: 100lvh;
}

.scan-overlay {
  position: fixed;
  z-index: var(--fw-z-sheet);
  display: flex;
  justify-content: flex-end;
  align-items:  center;
  gap: var(--fw-s4);
  padding: var(--fw-s5);
  padding-bottom: calc(var(--fw-s5)  + env(safe-area-inset-bottom, 0px));
  background: var(--fw-bg);
  color: var(--fw-fg);
  flex-direction: column;
  inset: 0;
}

.scan-overlay video {
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  inset: 0;
}

.scan-hint {
  position: relative;
  padding: var(--fw-s2) var(--fw-s3);
  border-radius: var(--fw-radius);
  background: var(--fw-scrim);
  color: var(--fw-accent-fg);
  font-size: var(--fw-text-sm);
  text-align: center;
  margin: 0;
}

.scan-cancel {
  position: relative;
  padding: var(--fw-s2) var(--fw-s5);
  border-radius: var(--fw-radius-pill);
  background: var(--fw-secondary);
  color: var(--fw-secondary-fg);
  font: inherit;
  border: none;
}

/* app/bootstrap.css */
body {
  font-family: var(--fw-font);
  font-size: var(--fw-text);
  line-height: var(--fw-leading);
  color: var(--fw-fg);
}

.boot {
  box-sizing: border-box;
  display: flex;
  gap: var(--fw-s4);
  padding: calc(var(--fw-s6)  + env(safe-area-inset-top, 0px)) var(--fw-s5) calc(var(--fw-s5)  + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  flex-direction: column;
  width: min(28rem, 100%);
  max-height: 100%;
  margin: 0 auto;
}

.boot h1 {
  font-size: var(--fw-text-lg);
  font-weight: 600;
  line-height: var(--fw-leading-tight);
  margin: 0;
}

.boot p {
  color: var(--fw-fg-muted);
  margin: 0;
}

.boot code {
  font-family: var(--fw-font-mono);
  font-size: var(--fw-text-sm);
  color: var(--fw-fg);
}

.boot label {
  display: flex;
  gap: var(--fw-s1);
  font-size: var(--fw-text-sm);
  color: var(--fw-fg-muted);
  flex-direction: column;
}

.boot input {
  box-sizing: border-box;
  padding: var(--fw-s2) var(--fw-s3);
  border: 1px solid var(--fw-input-border);
  border-radius: var(--fw-radius);
  background: var(--fw-input-bg);
  color: var(--fw-input-fg);
  font: inherit;
  font-size: var(--fw-text-field);
  width: 100%;
  min-height: 44px;
}

.boot form {
  display: flex;
  gap: var(--fw-s2);
}

.boot button {
  padding: var(--fw-s2) var(--fw-s4);
  border-radius: var(--fw-radius);
  background: var(--fw-secondary);
  color: var(--fw-secondary-fg);
  font: inherit;
  border: none;
  min-height: 44px;
  font-weight: 500;
}

.boot button.primary {
  background: var(--fw-accent);
  color: var(--fw-accent-fg);
}

.boot button:focus-visible {
  outline: 2px solid var(--fw-focus);
  outline-offset: 2px;
}

.boot input:focus-visible {
  outline: 2px solid var(--fw-focus);
  outline-offset: 2px;
}

.boot button:disabled {
  opacity: .5;
}

.boot .status:empty {
  display: none;
}

.boot .status.warn {
  color: var(--fw-warning);
}