:root {
  color-scheme: dark;
  --bg: #1f1f23;
  --bg-subtle: #222227;
  --surface: #25252a;
  --surface-raised: #2a2a30;
  --surface-hover: #34343b;
  --surface-pressed: #3f3f47;
  --border: #3a3a42;
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-strong: #4c4c56;
  --accent: #5b7cfa;
  --accent-light: #93a9ff;
  --accent-solid: #4a68dd;
  --accent-solid-hover: #506bd8;
  --accent-rgb: 91, 124, 250;
  --text: #e8e8eb;
  --text-dim: #b0afba;
  --muted: #90909b;
  --green: #46d18b;
  --red: #f0736e;
  --yellow: #e0b341;
  --blue: #58a6ff;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --content-width: 720px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.45);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 280px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 50% -14rem, rgba(var(--accent-rgb), 0.14), transparent 32rem),
    var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
textarea {
  font: inherit;
}

button,
summary {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button {
  min-height: 44px;
}

button:disabled,
textarea:disabled,
input:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

:focus-visible {
  outline: 3px solid rgba(var(--accent-rgb), 0.72);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  letter-spacing: -0.025em;
}

h1 {
  margin-bottom: 10px;
  font-size: clamp(1.55rem, 7vw, 2rem);
  line-height: 1.12;
}

h2 {
  margin-bottom: 8px;
  font-size: 1.15rem;
  line-height: 1.25;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.noscript-card {
  position: fixed;
  z-index: 1000;
  inset: 16px 16px auto;
  padding: 14px 16px;
  border: 1px solid rgba(240, 115, 110, 0.4);
  border-radius: var(--radius);
  background: #392729;
  color: var(--text);
  text-align: center;
}

.centered-view {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding:
    max(28px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

.brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.brand-lockup img,
.brand-mark img,
.empty-state img {
  display: block;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(var(--accent-rgb), 0.28));
}

.brand-lockup-large {
  max-width: 390px;
  align-items: flex-start;
}

.brand-lockup-large h1 {
  margin-bottom: 0;
}

.brand-mark {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.eyebrow {
  margin-bottom: 6px;
  color: var(--accent-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.supporting-copy {
  max-width: 34rem;
  margin-bottom: 24px;
  color: var(--text-dim);
}

.loading-line {
  width: min(100%, 390px);
  height: 3px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.14);
}

.loading-line span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  animation: loading-slide 1.2s var(--ease) infinite;
}

#loadingView .supporting-copy {
  width: min(100%, 390px);
  margin-top: 12px;
  margin-bottom: 0;
}

.pair-card,
.state-card {
  width: min(100%, 440px);
  padding: 26px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: rgba(37, 37, 42, 0.94);
  box-shadow: var(--shadow-lg);
}

.pair-card > .eyebrow,
.pair-card > h1,
.pair-card > .supporting-copy,
.state-card {
  text-align: center;
}

.field-group {
  margin-top: 18px;
}

.field-group label {
  display: block;
  margin-bottom: 7px;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
}

.field-group input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

#pairCode {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
}

.field-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.14);
}

.field-group input::placeholder,
.composer textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

.field-hint,
.privacy-note,
.account-meta,
.composer-hint,
.composer-error,
.form-error {
  font-size: 0.76rem;
  line-height: 1.45;
}

.field-hint {
  margin: 7px 0 0;
  color: var(--muted);
}

.form-error,
.composer-error {
  margin: 10px 0 0;
  color: #ff9c98;
}

.form-error[data-tone="info"] {
  color: var(--text-dim);
}

.privacy-note {
  margin: 18px auto 0;
  color: var(--muted);
  text-align: center;
}

.primary-button,
.secondary-button,
.danger-button,
.send-button,
.text-button,
.menu-button,
.suggestion-button,
.reply-option {
  border-radius: var(--radius-sm);
  font-weight: 650;
  cursor: pointer;
  transition: background 140ms var(--ease), border-color 140ms var(--ease), color 140ms var(--ease), transform 100ms var(--ease);
}

.primary-button,
.secondary-button,
.danger-button {
  min-height: 46px;
  padding: 11px 16px;
}

.primary-button {
  width: 100%;
  margin-top: 18px;
  border: 1px solid transparent;
  background: var(--accent-solid);
  color: #fff;
}

.secondary-button {
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
  color: var(--text);
}

.danger-button {
  border: 1px solid rgba(240, 115, 110, 0.42);
  background: rgba(240, 115, 110, 0.1);
  color: #ff9c98;
}

.state-card .primary-button {
  max-width: 220px;
}

.state-symbol {
  display: grid;
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  place-items: center;
  border: 1px solid rgba(224, 179, 65, 0.36);
  border-radius: 50%;
  background: rgba(224, 179, 65, 0.1);
  color: var(--yellow);
  font-size: 1.5rem;
  font-weight: 700;
}

.app-shell {
  display: flex;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  flex-direction: column;
}

.app-header {
  position: sticky;
  z-index: 30;
  top: 0;
  padding:
    max(10px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    10px
    max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid var(--border-soft);
  background: rgba(31, 31, 35, 0.9);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.app-header-inner {
  display: flex;
  width: min(100%, var(--content-width));
  margin: 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.product-name {
  font-size: 1rem;
  font-weight: 720;
  letter-spacing: -0.015em;
}

.connection-label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.connection-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--yellow);
}

.connection-label[data-state="online"] .connection-dot {
  background: var(--green);
}

.connection-label[data-state="offline"] .connection-dot,
.connection-label[data-state="error"] .connection-dot {
  background: var(--red);
}

.account-menu {
  position: relative;
  flex: none;
}

.account-menu > summary {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu[open] > summary {
  border-color: rgba(var(--accent-rgb), 0.45);
  color: var(--accent-light);
}

.account-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  width: min(278px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.account-device {
  margin-bottom: 3px;
  font-size: 0.9rem;
  font-weight: 700;
}

.account-meta {
  margin-bottom: 12px;
  color: var(--muted);
}

.menu-button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  text-align: left;
}

.menu-button + .menu-button {
  border-top: 1px solid var(--border-soft);
}

.menu-button-danger {
  color: #ff9c98;
}

.connection-banner {
  position: sticky;
  z-index: 20;
  top: calc(65px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(224, 179, 65, 0.25);
  background: rgba(62, 51, 24, 0.96);
  color: #f0dda6;
  font-size: 0.78rem;
}

.connection-banner > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.connection-banner span {
  color: #c9bb92;
}

.text-button {
  min-height: 40px;
  flex: none;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: inherit;
}

.conversation {
  display: flex;
  width: min(100%, var(--content-width));
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  margin: 0 auto;
  padding: 24px max(16px, env(safe-area-inset-right)) 30px max(16px, env(safe-area-inset-left));
}

.empty-state {
  display: flex;
  min-height: min(620px, 62vh);
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 34px 0;
  text-align: center;
}

.empty-state img {
  margin-bottom: 22px;
}

.empty-state h1 {
  margin-bottom: 10px;
}

.empty-state > p:not(.eyebrow) {
  max-width: 30rem;
  margin-bottom: 22px;
  color: var(--text-dim);
}

.suggestion-list {
  display: grid;
  width: min(100%, 520px);
  gap: 9px;
}

.suggestion-button {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  text-align: left;
}

.task-card,
.input-request,
.artifacts,
.activity-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.task-card {
  padding: 18px;
}

.task-card-copy h1 {
  margin-bottom: 7px;
  font-size: 1.25rem;
}

.task-card-copy > p:last-child {
  margin-bottom: 0;
  color: var(--text-dim);
}

.task-card[data-state="failed"] {
  border-color: rgba(240, 115, 110, 0.35);
}

.task-card[data-state="needs_input"] {
  border-color: rgba(224, 179, 65, 0.4);
}

.task-card[data-state="completed"] {
  border-color: rgba(70, 209, 139, 0.3);
}

.task-progress {
  height: 4px;
  margin-top: 16px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.13);
}

.task-progress span {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  animation: task-progress 1.35s var(--ease) infinite;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.task-actions:empty {
  display: none;
}

.thread {
  min-width: 0;
}

.message-list,
.activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.message {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.message[data-role="user"] {
  justify-content: flex-end;
}

.message-avatar {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-raised);
  color: var(--accent-light);
  font-size: 0.7rem;
  font-weight: 800;
}

.message-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-bubble {
  max-width: min(86%, 560px);
  padding: 11px 13px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  border-bottom-left-radius: 5px;
  background: var(--surface-raised);
  color: var(--text);
  overflow-wrap: anywhere;
}

.message[data-role="user"] .message-bubble {
  border-color: rgba(var(--accent-rgb), 0.32);
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 14px;
  background: rgba(var(--accent-rgb), 0.15);
}

.message-content {
  min-width: 0;
}

.message-content > :first-child {
  margin-top: 0;
}

.message-content > :last-child {
  margin-bottom: 0;
}

.message-content p {
  margin: 0 0 0.72em;
  white-space: pre-wrap;
}

.message-content h3,
.message-content h4,
.message-content h5 {
  margin: 0.9em 0 0.38em;
  color: var(--text-strong, var(--text));
  font-size: 0.96rem;
  line-height: 1.3;
}

.message-content ul,
.message-content ol {
  margin: 0.5em 0 0.72em;
  padding-left: 1.3em;
}

.message-content li + li {
  margin-top: 0.28em;
}

.message-content code {
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.22);
  padding: 0.08em 0.32em;
  color: #dfe3ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}

.message-content pre {
  max-width: 100%;
  margin: 0.65em 0 0.8em;
  overflow-x: auto;
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 11px;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

.message-content pre code {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.78rem;
}

.message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 7px;
}

.message-meta {
  display: block;
  color: var(--muted);
  font-size: 0.68rem;
}

.message-copy {
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  padding: 7px 8px;
  color: var(--muted);
  font-size: 0.68rem;
}

.message-copy:focus-visible,
.message-copy:hover {
  color: var(--text);
}

.input-request {
  padding: 17px;
  border-color: rgba(224, 179, 65, 0.42);
  background: linear-gradient(145deg, rgba(224, 179, 65, 0.09), var(--surface) 58%);
}

.input-request .eyebrow {
  color: #ebca6d;
}

.input-request > p:not(.eyebrow) {
  margin-bottom: 14px;
  color: var(--text-dim);
}

.reply-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reply-option {
  min-height: 44px;
  padding: 9px 13px;
  border: 1px solid rgba(224, 179, 65, 0.36);
  background: rgba(224, 179, 65, 0.08);
  color: #f0dda6;
}

.artifacts {
  padding: 16px;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.section-heading h2,
.section-heading p {
  margin-bottom: 0;
}

.section-heading > span {
  color: var(--muted);
  font-size: 0.75rem;
}

.artifact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.artifact-link {
  display: block;
  min-height: 96px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}

.artifact-link img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 240px;
  object-fit: cover;
}

.activity-panel {
  overflow: clip;
}

.activity-panel > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}

.activity-panel > summary::-webkit-details-marker {
  display: none;
}

.activity-panel > summary > span:first-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.activity-panel summary strong {
  font-size: 0.88rem;
}

.activity-panel summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.disclosure-label {
  color: var(--accent-light);
  font-size: 0.75rem;
  font-weight: 650;
}

.activity-panel[open] .disclosure-label {
  color: var(--muted);
}

.activity-list {
  max-height: 360px;
  overflow-y: auto;
  border-top: 1px solid var(--border-soft);
  overscroll-behavior: contain;
}

.activity-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 15px;
  color: var(--text-dim);
  font-size: 0.76rem;
}

.activity-item + .activity-item {
  border-top: 1px solid var(--border-soft);
}

.activity-time {
  color: var(--muted);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
}

.activity-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.activity-item[data-kind="error"] .activity-text {
  color: #ff9c98;
}

.activity-item[data-kind="result"] .activity-text {
  color: #91e4b8;
}

.activity-item[data-kind="tool"] .activity-text {
  color: #b9c7ff;
}

.composer-shell {
  position: sticky;
  z-index: 25;
  bottom: 0;
  margin-top: auto;
  padding:
    10px
    max(14px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
  border-top: 1px solid var(--border-soft);
  background: rgba(31, 31, 35, 0.92);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.composer,
.composer-meta {
  width: min(100%, var(--content-width));
  margin: 0 auto;
}

.composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.composer:focus-within {
  border-color: rgba(var(--accent-rgb), 0.65);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.13), var(--shadow-sm);
}

.composer textarea {
  width: 100%;
  min-height: 40px;
  max-height: 160px;
  flex: 1;
  resize: none;
  padding: 8px 0 6px;
  overflow-y: auto;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.45;
}

.send-button {
  min-width: 62px;
  min-height: 44px;
  flex: none;
  padding: 9px 13px;
  border: 1px solid transparent;
  background: var(--accent-solid);
  color: #fff;
}

.composer-meta {
  min-height: 21px;
  padding: 5px 5px 0;
}

.composer-hint,
.composer-error {
  margin: 0;
  text-align: center;
}

.composer-hint {
  color: var(--muted);
}

.confirm-dialog {
  width: min(calc(100% - 32px), 420px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(5px);
}

.dialog-content {
  padding: 22px;
}

.dialog-content > p:not(.eyebrow) {
  color: var(--text-dim);
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 20px;
}

.toast {
  position: fixed;
  z-index: 100;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(92px, calc(78px + env(safe-area-inset-bottom)));
  left: max(16px, env(safe-area-inset-left));
  width: fit-content;
  max-width: min(420px, calc(100% - 32px));
  margin: 0 auto;
  padding: 11px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-pressed);
  color: var(--text);
  box-shadow: var(--shadow-lg);
  font-size: 0.82rem;
  font-weight: 650;
  text-align: center;
}

@media (hover: hover) {
  .primary-button:hover:not(:disabled),
  .send-button:hover:not(:disabled) {
    background: var(--accent-solid-hover);
  }

  .secondary-button:hover:not(:disabled),
  .suggestion-button:hover:not(:disabled),
  .account-menu > summary:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: var(--surface-hover);
    color: var(--text);
  }

  .danger-button:hover:not(:disabled) {
    background: rgba(240, 115, 110, 0.17);
  }

  .reply-option:hover:not(:disabled) {
    border-color: rgba(224, 179, 65, 0.62);
    background: rgba(224, 179, 65, 0.14);
  }

  .menu-button:hover:not(:disabled) {
    background: var(--surface-hover);
  }
}

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.danger-button:active:not(:disabled),
.send-button:active:not(:disabled),
.suggestion-button:active:not(:disabled),
.reply-option:active:not(:disabled) {
  transform: scale(0.98);
}

@media (min-width: 640px) {
  .pair-card,
  .state-card {
    padding: 34px;
  }

  .conversation {
    padding-top: 34px;
    padding-bottom: 42px;
  }

  .suggestion-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .suggestion-button {
    text-align: center;
  }

  .task-card {
    padding: 21px;
  }

  .artifact-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 380px) {
  .task-actions,
  .dialog-actions {
    grid-template-columns: 1fr;
  }

  .task-actions {
    display: grid;
  }

  .task-actions button,
  .dialog-actions button {
    width: 100%;
  }

  .account-menu > summary {
    width: 44px;
    overflow: hidden;
    color: transparent;
  }

  .account-menu > summary::after {
    content: "•••";
    margin-left: -37px;
    color: var(--text-dim);
    letter-spacing: 0.08em;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@keyframes loading-slide {
  from { transform: translateX(-110%); }
  to { transform: translateX(260%); }
}

@keyframes task-progress {
  from { transform: translateX(-120%); }
  to { transform: translateX(310%); }
}

/* ── Chat | Build ───────────────────────────────────────────────────────────
   Chat is the default: it answers as text in seconds. Build is the engineer
   that writes files and runs commands. An explicit door matters because intent
   detection is sometimes wrong, and being wrong in the Build direction means a
   long silent run rather than a quick answer. */
.mode-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.mode-switch {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 999px;
  background: var(--surface-2, #12151c);
}
.mode-switch button {
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #8b94a7);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.mode-switch button[aria-checked="true"] {
  background: var(--accent, #4f6bed);
  color: #fff;
}
.mode-reset {
  padding: 6px 12px;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #8b94a7);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

/* ── Library ───────────────────────────────────────────────────────────────
   A full-height view rather than a section inside the conversation: a shelf
   that scrolls away with the chat is a shelf nobody opens. */
.header-button {
  padding: 6px 12px;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 999px;
  background: transparent;
  color: var(--text, #e8ecf4);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.library-filters {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
}
.library-filters button {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #8b94a7);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.library-filters button[aria-checked="true"] {
  border-color: transparent;
  background: var(--accent, #4f6bed);
  color: #fff;
}
.library-body { flex: 1; overflow-y: auto; padding: 0 16px 24px; }
.library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.library-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 12px;
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 14px;
  background: var(--surface-2, #12151c);
  color: var(--text, #e8ecf4);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.library-glyph {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  background: var(--surface, #171b23);
  font-size: 22px;
  color: var(--accent, #4f6bed);
}
/* Same box as the glyph, so a card does not jump when its poster arrives. */
.library-poster {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface, #171b23);
}
.library-name { font-size: 13px; word-break: break-word; }
.library-meta { font-size: 11px; color: var(--muted, #8b94a7); }
.library-empty, .library-truncated, .library-error {
  padding: 16px 4px;
  color: var(--muted, #8b94a7);
  font-size: 13px;
  text-align: center;
}
.library-error { color: var(--danger, #ff6b6b); }

.library-sheet {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .55);
  z-index: 40;
}
.library-sheet-inner {
  width: 100%;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: var(--surface, #171b23);
  /* position: the close button is absolute and would otherwise anchor to the
     full-viewport scrim rather than to this panel.
     max-height + overflow: the sheet now carries a player above the buttons,
     so without a scroll bound "Save to phone" can sit below the screen edge
     with no way to reach it. */
  position: relative;
  max-height: 88dvh;
  overflow-y: auto;
}
.library-sheet-inner h2 { margin: 0 36px 4px 0; font-size: 16px; word-break: break-word; }
.library-sheet-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 0; border-radius: 999px;
  background: var(--surface-2, #12151c);
  color: var(--muted, #8b94a7);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.library-sheet-meta { margin: 0 0 12px; color: var(--muted, #8b94a7); font-size: 12px; }
.library-sheet-note { margin: 10px 0 0; color: var(--muted, #8b94a7); font-size: 11px; }
.library-sheet-error { margin: 10px 0 0; color: var(--danger, #ff6b6b); font-size: 12px; }
.library-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.library-progress { width: 100%; margin-top: 12px; }
.library-player { width: 100%; max-height: 46dvh; margin-top: 12px; border-radius: 10px; background: #000; }

@media (min-width: 520px) {
  .library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.library-audio { width: 100%; margin-top: 12px; }
/* Bounded height as well as width: a tall portrait still would otherwise push
   Save to phone off the bottom of the sheet. */
.library-image {
  display: block; width: 100%; max-height: 46dvh; object-fit: contain;
  margin-top: 12px; border-radius: 10px; background: var(--bg-subtle);
}

/* ── Project picker ─────────────────────────────────────────────────────────
   Only tokens that really exist in :root. The Library block above reaches for
   --line, --surface-2 and --danger, none of which are defined, so each one
   silently falls back to a hard-coded colour from a different palette. */
.project-list { display: flex; flex-direction: column; gap: 8px; }

.project-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-raised); color: var(--text);
  transition: background 140ms var(--ease), border-color 140ms var(--ease);
}
.project-row:hover { background: var(--surface-hover); }
.project-row:active { background: var(--surface-pressed); }

/* Selection is [aria-checked], matching the library filters and the Chat|Build
   switch. There is no .active or .selected class anywhere in this stylesheet.
   A tint rather than a fill: these rows carry dimmed secondary text, and the
   solid --accent-light the filter chips use leaves that line unreadable. */
.project-row[aria-checked="true"] {
  border-color: var(--accent);
  background: rgba(var(--accent-rgb), 0.14);
}
.project-row[aria-checked="true"]:hover { background: rgba(var(--accent-rgb), 0.2); }

.project-row[disabled] { opacity: 0.55; cursor: not-allowed; }
.project-row[disabled]:hover { background: var(--surface-raised); }

.project-row-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.project-row-name {
  font-weight: 600; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-row-meta { font-size: 12.5px; color: var(--text-dim); }
.project-row-missing { color: var(--red); }
/* --accent-light, not --accent: this sits on the tinted active row, where the
   solid accent measures 3.75:1 against 11px uppercase text. */
.project-row-badge {
  flex: none; font-size: 11px; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--accent-light);
}

/* The Library sheet declares neither of these, so its close button anchors to
   the viewport and a long sheet cannot be scrolled. Both are fixed here rather
   than inherited. */
.project-confirm-inner { position: relative; max-height: 80dvh; overflow-y: auto; }

/* Keep the wrapping text clear of the absolutely-positioned close button —
   without this the second line runs underneath it. */
.project-confirm-inner > h2,
.project-confirm-inner > p { padding-right: 52px; }