:root {
  --ink: #0d1110;
  --ink-2: #151b19;
  --ink-3: #1d2522;
  --paper: #eee8d9;
  --paper-dim: #bdb7a8;
  --signal: #f5a623;
  --signal-hot: #ffc45b;
  --mint: #72d7ad;
  --danger: #ff735c;
  --line: rgba(238, 232, 217, 0.13);
  --text-muted: #9aa49e;
  --text-faint: #7f8b84;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--ink); }

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

button, textarea, select { font: inherit; }
button {
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
  transform-origin: center;
}
button:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 760px);
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 18px) 18px calc(var(--safe-bottom) + 22px);
}

.card-head, .composer-foot, .receipt-card, footer {
  display: flex;
  align-items: center;
}

.card-kicker,
.pairing-card p, .receipt-card p, .receipt-card span, footer { margin: 0; }

.card-kicker {
  color: var(--signal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.command-card, .pairing-card, .recovery-setup-card, .telemetry, .dashboard-detail {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(238, 232, 217, 0.16);
  border-radius: 22px 7px 22px 7px;
  background: linear-gradient(145deg, rgba(29, 37, 34, 0.96), rgba(19, 25, 23, 0.94));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
}

.command-card::before, .pairing-card::before, .recovery-setup-card::before, .telemetry::before, .dashboard-detail::before {
  position: absolute; top: 0; left: 0; width: 68px; height: 2px;
  background: var(--signal); content: "";
}

.command-card { margin-top: 16px; padding: 23px 21px; }
.card-head { justify-content: space-between; gap: 14px; margin-bottom: 17px; }
h2 { margin: 6px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }

.target-badge {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px;
  color: #b3bbb6; font-size: 11px; letter-spacing: 0.04em;
}
.target-badge span { width: 6px; height: 6px; border-radius: 2px; background: var(--mint); }

textarea {
  display: block;
  width: 100%;
  min-height: 154px;
  resize: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  padding: 19px 0;
  background: transparent;
  color: var(--paper);
  caret-color: var(--signal);
  font-size: 16px;
  line-height: 1.65;
}
textarea::placeholder { color: #7f8a84; }
textarea:focus { border-color: rgba(245, 166, 35, 0.42); }

.task-image-uploader {
  margin-top: 10px;
  border: 1px solid rgba(238,232,217,.1);
  border-radius: 14px 5px 14px 5px;
  padding: 10px;
  background: linear-gradient(120deg, rgba(245,166,35,.045), rgba(3,7,6,.2) 48%);
}
.task-image-toolbar { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.task-image-copy { display: grid; min-width: 0; gap: 3px; }
.task-image-copy span { color: #a8b0ab; font-size: 11px; font-weight: 750; letter-spacing: .1em; }
.task-image-copy small {
  min-width: 0; color: var(--text-faint); font: 11px/1.35 "SF Mono", Menlo, monospace;
  overflow-wrap: anywhere; white-space: normal;
}
.task-image-add {
  display: flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: 6px;
  border: 1px solid rgba(245,166,35,.25); border-radius: 11px 4px 11px 4px; padding: 0 11px;
  background: rgba(245,166,35,.075); color: #d7ad5e; font-size: 11px; font-weight: 720;
  transition: transform 110ms ease, border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}
.task-image-add .ui-icon { width: 15px; height: 15px; }
.task-image-add:active { transform: scale(.96); border-color: rgba(245,166,35,.42); background: rgba(245,166,35,.14); }
.task-image-add:disabled { cursor: wait; opacity: .48; }
.task-image-preview {
  display: flex; height: 88px; min-width: 0; align-items: center; gap: 8px; overflow-x: auto; overflow-y: hidden;
  margin-top: 9px; padding: 6px 2px; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.task-image-preview::-webkit-scrollbar { display: none; }
.task-image-item {
  position: relative; width: 76px; height: 76px; flex: 0 0 76px; overflow: hidden;
  border: 1px solid rgba(238,232,217,.14); border-radius: 12px 4px 12px 4px;
  background: #080c0a; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); scroll-snap-align: start;
}
.task-image-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.task-image-item::after {
  position: absolute; right: 0; bottom: 0; left: 0; height: 25px; pointer-events: none;
  background: linear-gradient(transparent, rgba(3,6,5,.86)); content: "";
}
.task-image-item-name {
  position: absolute; z-index: 1; right: 5px; bottom: 4px; left: 5px; overflow: hidden;
  color: #d5d3c9; font-size: 9px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap;
}
.task-image-remove {
  position: absolute; z-index: 2; top: 0; right: 0; display: grid; width: 44px; height: 44px; place-items: center;
  border: 0; padding: 0; background: transparent; color: #f2eadd;
}
.task-image-remove::before {
  position: absolute; width: 28px; height: 28px; border: 1px solid rgba(238,232,217,.2); border-radius: 50%;
  background: rgba(9,13,11,.86); box-shadow: 0 4px 12px rgba(0,0,0,.28); content: "";
}
.task-image-remove .ui-icon { position: relative; width: 12px; height: 12px; stroke-width: 2.2; }
.task-image-remove:active::before { background: rgba(255,115,92,.3); }
.task-image-remove:disabled { cursor: wait; opacity: .38; }

.project-picker, .agent-picker { min-width: 0; margin: 17px 0 0; border: 0; padding: 0; }
.project-picker legend, .agent-picker legend {
  margin-bottom: 10px;
  color: #858f89;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
}
.project-select-native-shell {
  position: relative; display: grid; min-height: 62px; grid-template-columns: 34px minmax(0,1fr) 16px;
  align-items: center; gap: 11px; border: 1px solid rgba(238,232,217,.12);
  border-radius: 12px 4px 12px 4px; padding: 0 13px 0 11px;
  background: linear-gradient(110deg, rgba(245,166,35,.055), rgba(9,13,12,.4) 42%); color: var(--signal);
}
.project-select-native-shell > .ui-icon { width: 18px; height: 18px; }
.project-select-native-shell .select-chevron { width: 14px; height: 14px; color: #727b76; pointer-events: none; }
.project-select-native-shell select {
  width: 100%; min-width: 0; min-height: 60px; border: 0; outline: 0; padding: 0;
  appearance: none; background: transparent; color: #d5d0c3; font-size: 13px; font-weight: 630;
}
.project-select-native-shell select option { background: #151b19; color: var(--paper); }
.project-select-shell {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 34px minmax(0,1fr) 16px;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  border: 1px solid rgba(238,232,217,.12);
  border-radius: 12px 4px 12px 4px;
  padding: 8px 13px 8px 10px;
  background: linear-gradient(110deg, rgba(245,166,35,.055), rgba(9,13,12,.4) 42%);
  color: inherit;
  text-align: left;
  transition: transform 110ms ease, border-color 160ms ease, background 160ms ease;
}
.project-select-shell:active { transform: scale(.982); border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.09); }
.project-select-shell.is-open { border-color: rgba(245,166,35,.36); background: rgba(245,166,35,.1); }
.project-select-icon {
  position: relative; display: grid; width: 34px; height: 34px; place-items: center;
  border: 1px solid rgba(245,166,35,.24); border-radius: 10px 3px 10px 3px;
  background: rgba(245,166,35,.075); color: var(--signal);
}
.project-select-icon::after {
  position: absolute; right: 4px; bottom: 4px; width: 5px; height: 5px;
  border: 1px solid #17130b; border-radius: 50%; background: var(--mint); content: "";
  box-shadow: 0 0 8px rgba(114,215,173,.45);
}
.project-select-icon .ui-icon { width: 18px; height: 18px; }
.project-select-copy { display: block; min-width: 0; }
.project-select-copy strong, .project-select-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-select-copy strong { color: #d8d4c8; font-size: 13px; font-weight: 680; }
.project-select-copy small { margin-top: 4px; color: var(--text-faint); font: 11px/1.35 "SF Mono", Menlo, monospace; }
.project-select-shell .select-chevron {
  width: 14px; height: 14px; color: #727b76; pointer-events: none;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), color 160ms ease;
}
.project-select-shell.is-open .select-chevron { transform: rotate(180deg); color: var(--signal); }
.project-picker > p, .agent-picker > p { margin: 9px 1px 0; color: var(--text-faint); font-size: 11px; line-height: 1.6; }

.agent-picker { min-width: 0; margin: 17px 0 0; border: 0; padding: 0; }
.agent-picker legend {
  margin-bottom: 10px;
  color: #858f89;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .1em;
}
.agent-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid rgba(238,232,217,.1);
  border-radius: 13px 4px 13px 4px;
  padding: 7px;
  background: rgba(9,13,12,.38);
}
.agent-option {
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  gap: 9px;
  border: 1px solid transparent;
  border-radius: 10px 3px 10px 3px;
  padding: 9px;
  background: rgba(238,232,217,.025);
  color: #7b8580;
  cursor: pointer;
  transition: transform 110ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.agent-option input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.agent-option:has(input:checked), .agent-option.is-selected {
  border-color: rgba(245,166,35,.36);
  background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(245,166,35,.055));
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(245,166,35,.035);
}
.agent-option:active { transform: scale(.965); background: rgba(245,166,35,.13); }
.agent-mark {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid rgba(238,232,217,.15);
  border-radius: 9px 3px 9px 3px;
  color: #929c96;
  font: 750 12px/1 "SF Mono", Menlo, monospace;
}
.agent-option:has(input:checked) .agent-mark, .agent-option.is-selected .agent-mark { border-color: rgba(245,166,35,.5); color: var(--signal); }
.agent-option input:focus-visible + .agent-mark { outline: 2px solid var(--signal); outline-offset: 2px; }
.agent-mark.is-inbox { font-size: 22px; line-height: .5; }
.agent-option > span:last-child { min-width: 0; }
.agent-option strong, .agent-option small { display: block; }
.agent-option strong { color: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; }
.agent-option small { margin-top: 3px; color: var(--text-faint); font-size: 11px; line-height: 1.35; white-space: nowrap; }
.composer-foot { justify-content: space-between; padding: 13px 1px 15px; color: var(--text-faint); font-size: 11px; }
.privacy-note { display: flex; align-items: center; gap: 6px; }
.privacy-note i {
  display: inline-block; width: 7px; height: 7px; border: 1px solid var(--mint);
  border-radius: 50% 50% 3px 3px; box-shadow: inset 0 -2px 0 rgba(114, 215, 173, 0.2);
}
.counter b { color: #9da49f; font-weight: 500; }

.send-button {
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 13px 4px 13px 4px;
  padding: 0 17px 0 20px;
  background: var(--signal);
  color: #17130b;
  box-shadow: 0 10px 28px rgba(245, 166, 35, 0.16);
  cursor: pointer;
  font-weight: 750;
  letter-spacing: 0.04em;
  font-size: 16px;
  transition: transform 110ms ease, background 110ms ease, box-shadow 110ms ease, opacity 160ms ease;
}
.send-button:active { transform: translateY(2px) scale(0.975); background: var(--signal-hot); box-shadow: 0 3px 9px rgba(245,166,35,.12), inset 0 2px 4px rgba(83,49,0,.18); }
.send-button:disabled { cursor: wait; opacity: 0.52; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ui-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.send-arrow { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(13,17,16,.34); border-radius: 50%; }
.send-arrow .ui-icon { width: 16px; height: 16px; }

.pairing-card { padding: 25px 22px; }
.pairing-card > p:not(.card-kicker) { margin-top: 12px; color: #9ba29e; font-size: 13px; line-height: 1.7; }
.pair-button {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  border: 1px solid rgba(245, 166, 35, 0.42);
  border-radius: 12px 4px 12px 4px;
  padding: 0 16px;
  background: rgba(245, 166, 35, 0.1);
  color: var(--signal-hot);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
}
.pair-button:active:not(:disabled) { transform: translateY(1px) scale(.98); background: rgba(245,166,35,.18); }
.pair-button .ui-icon { width: 17px; height: 17px; }
.pair-button:disabled { opacity: .5; cursor: wait; }
.pairing-code-panel {
  margin-top: 20px;
  border: 1px solid rgba(114, 215, 173, .24);
  border-radius: 14px 4px 14px 4px;
  padding: 17px 16px 15px;
  background: linear-gradient(120deg, rgba(114, 215, 173, .08), rgba(13, 17, 16, .28));
  animation: slide-up 240ms ease both;
}
.pairing-code-label { color: #87a99a; font: 700 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .13em; }
.pairing-code-panel strong {
  display: block;
  margin-top: 12px;
  color: var(--paper);
  font-family: "SF Mono", Menlo, monospace;
  font-size: clamp(28px, 9vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-shadow: 0 0 22px rgba(114, 215, 173, .14);
}
.pairing-code-panel p { margin: 12px 0 0; color: #89958e; font-size: 13px; line-height: 1.6; }
.pairing-code-panel button { min-height: 44px; margin-top: 8px; border: 0; padding: 5px 0; background: transparent; color: var(--signal); font-size: 13px; }
.recovery-restore {
  display: grid;
  gap: 11px;
  margin-top: 21px;
  border-top: 1px solid var(--line);
  padding-top: 19px;
}
.recovery-restore > div { display: grid; gap: 4px; }
.recovery-restore > div span { color: var(--text-faint); font-size: 11px; }
.recovery-restore > div strong { color: #d8d3c6; font-size: 14px; font-weight: 650; }
.recovery-restore button {
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(114,215,173,.3);
  border-radius: 11px 4px 11px 4px;
  background: rgba(114,215,173,.08);
  color: var(--mint);
  font-size: 14px;
  font-weight: 700;
  transition: transform 110ms ease, background 110ms ease, box-shadow 110ms ease;
}
.recovery-restore button:active:not(:disabled) { transform: scale(.97); background: rgba(114,215,173,.16); box-shadow: inset 0 2px 5px rgba(0,0,0,.22); }
.recovery-restore button:disabled { opacity: .5; }
.recovery-restore > p { margin: 0 !important; color: var(--text-faint) !important; font-size: 11px !important; line-height: 1.6 !important; }
.pairing-steps { display: grid; gap: 8px; margin-top: 20px; }
.pairing-steps span { padding: 12px; border: 1px solid var(--line); border-radius: 9px; color: #b6bdb8; font-size: 13px; }
.pairing-steps b { display: inline-grid; width: 20px; height: 20px; margin-right: 8px; place-items: center; border-radius: 5px; background: rgba(245,166,35,.14); color: var(--signal); }

.recovery-setup-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 14px;
  margin-top: 12px;
  padding: 19px;
  border-color: rgba(114,215,173,.2);
}
.recovery-setup-card::before { background: var(--mint); }
.recovery-setup-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(114,215,173,.28);
  border-radius: 14px 4px 14px 4px;
  background: rgba(114,215,173,.07);
  color: var(--mint);
}
.recovery-setup-icon .ui-icon { width: 23px; height: 23px; }
.recovery-setup-copy h2 { font-size: 18px; }
.recovery-setup-copy > p:not(.card-kicker) { margin: 8px 0 0; color: #939d97; font-size: 12px; line-height: 1.6; }
.recovery-setup-copy > button {
  min-height: 46px;
  margin-top: 13px;
  border: 1px solid rgba(114,215,173,.3);
  border-radius: 10px 3px 10px 3px;
  padding: 0 14px;
  background: rgba(114,215,173,.09);
  color: var(--mint);
  font-size: 13px;
  font-weight: 700;
  transition: transform 110ms ease, background 110ms ease;
}
.recovery-setup-copy > button:active:not(:disabled) { transform: scale(.97); background: rgba(114,215,173,.18); }
.recovery-setup-copy > button:disabled { opacity: .5; }
.recovery-setup-copy > span { display: block; margin-top: 9px; color: var(--text-faint); font-size: 11px; line-height: 1.55; }

.receipt-card {
  gap: 12px;
  margin-top: 12px;
  padding: 14px 15px;
  border: 1px solid rgba(114, 215, 173, 0.2);
  border-radius: 12px;
  background: rgba(114, 215, 173, 0.055);
  animation: slide-up 280ms ease both;
}
.receipt-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(114,215,173,.45); border-radius: 50%; color: var(--mint); }
.receipt-icon .ui-icon { width: 17px; height: 17px; stroke-width: 2; }
.receipt-card p { color: #d7e5dd; font-size: 14px; font-weight: 650; }
.receipt-card span { display: block; margin-top: 4px; color: #7d8c84; font-size: 11px; }

.telemetry { margin-top: 0; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metric-card {
  position: relative; min-width: 0; color: var(--paper);
  transition: transform 110ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.metric-card:active { transform: scale(.97); }

.task-history-entry {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 38px minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid rgba(238,232,217,.1);
  border-radius: 11px 3px 11px 3px;
  padding: 10px 12px;
  background: rgba(238,232,217,.025);
  color: var(--paper);
  text-align: left;
  transition: transform 110ms ease, border-color 110ms ease, background 110ms ease;
}
.task-live-summary, .task-attention-reason {
  display: grid; gap: 5px; margin: 12px 0 0; border-left: 2px solid var(--mint);
  padding: 2px 0 2px 10px;
}
.task-live-summary span { color: var(--mint); font-size: 11px; font-weight: 750; letter-spacing: .07em; }
.task-live-summary strong { color: #cbd8d1; font-size: 11px; font-weight: 600; line-height: 1.55; }
.task-attention-reason { border-left-color: var(--danger); color: #d6aaa2; font-size: 11px; line-height: 1.6; }
.task-live-detail { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.task-live-detail > .task-detail-label { display: block; margin-bottom: 9px; color: var(--mint); }
.task-history-entry:active { transform: scale(.975); border-color: rgba(245,166,35,.28); background: rgba(245,166,35,.075); }
.task-history-entry.is-active { border-color: rgba(245,166,35,.26); background: linear-gradient(90deg, rgba(245,166,35,.1), rgba(245,166,35,.025)); }
.task-history-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(245,166,35,.22); border-radius: 50%; color: var(--signal); }
.task-history-icon .ui-icon { width: 18px; height: 18px; }
.task-history-copy { min-width: 0; }
.task-history-copy strong { display: block; color: #ddd7c9; font-size: 13px; font-weight: 680; }
.task-history-copy small { display: block; overflow: hidden; margin-top: 4px; color: var(--text-faint); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.task-history-total { display: flex; align-items: baseline; gap: 3px; color: var(--signal); }
.task-history-total b { font-family: "SF Mono", Menlo, monospace; font-size: 17px; font-weight: 550; }
.task-history-total small { color: var(--text-faint); font-size: 11px; }
.task-history-arrow { width: 15px; height: 15px; color: #59635d; }
.task-history-entry.is-active .task-history-arrow { color: var(--signal); }
.web-app-entry { margin-top: 8px; }
.web-app-entry .task-history-icon { border-color: rgba(114,215,173,.24); color: var(--mint); }
.web-app-entry .task-history-total { color: var(--mint); }
.web-app-entry.is-active { border-color: rgba(114,215,173,.28); background: linear-gradient(90deg, rgba(114,215,173,.095), rgba(114,215,173,.02)); }
.web-app-entry.is-active .task-history-arrow { color: var(--mint); }
.project-entry { margin-top: 8px; }
.project-entry .task-history-icon { border-color: rgba(112,155,255,.25); color: #8aa9ee; }
.project-entry .task-history-total { color: #8aa9ee; }
.project-entry.is-active { border-color: rgba(112,155,255,.27); background: linear-gradient(90deg, rgba(112,155,255,.09), rgba(112,155,255,.018)); }
.project-entry.is-active .task-history-arrow { color: #8aa9ee; }

.dashboard-detail { margin-top: 14px; padding: 22px 18px 18px; animation: slide-up 240ms ease both; }
.dashboard-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dashboard-detail-head h2 { margin-top: 5px; }
.dashboard-detail-head > button {
  display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: rgba(13,17,16,.35);
  color: #858e89; line-height: 1;
}
.dashboard-detail-head > button:active { transform: scale(.88); background: rgba(245,166,35,.1); color: var(--signal); }
.dashboard-detail-head > button .ui-icon { width: 15px; height: 15px; }
.dashboard-sync { margin: 9px 0 15px; color: var(--text-faint); font-size: 11px; line-height: 1.5; }
.attention-list-toolbar {
  display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 2px 10px; border-bottom: 1px solid rgba(238,232,217,.07); padding: 0 2px 9px;
}
.attention-list-toolbar[hidden] { display: none; }
.attention-list-toolbar > span {
  color: #77827c; font-size: 11px; font-weight: 650; letter-spacing: .035em;
}
.attention-list-toolbar > span b { color: #aab4ae; font: 650 12px/1 "SF Mono", Menlo, monospace; }
.attention-list-toolbar > button {
  display: inline-flex; min-height: 36px; align-items: center; gap: 6px; border: 1px solid rgba(217,102,91,.22);
  border-radius: 13px 5px 13px 5px; padding: 0 11px; background: rgba(159,59,51,.075);
  color: #c98b82; font-size: 11px; font-weight: 720; letter-spacing: .03em;
}
.attention-list-toolbar > button .ui-icon { width: 14px; height: 14px; }
.attention-list-toolbar > button:active {
  transform: scale(.96); border-color: rgba(217,102,91,.42); background: rgba(159,59,51,.16); color: #efaaa0;
}
.dashboard-list { display: grid; gap: 9px; }
.dashboard-project-overview {
  display: grid; min-width: 0; min-height: 52px; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 10px; border: 1px solid rgba(120,157,241,.14);
  border-radius: 15px 5px 15px 5px; padding: 8px 9px;
  background:
    radial-gradient(circle at 0 50%, rgba(120,157,241,.075), transparent 46%),
    rgba(12,17,17,.68); box-shadow: inset 2px 0 rgba(120,157,241,.36);
}
.dashboard-project-overview-copy {
  display: grid; min-width: 0; grid-template-columns: 30px minmax(0,1fr); align-items: center; gap: 8px;
}
.dashboard-project-overview-icon {
  display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(120,157,241,.22);
  border-radius: 9px 3px 9px 3px; background: rgba(120,157,241,.07); color: #8faeea;
}
.dashboard-project-overview-icon .ui-icon { width: 15px; height: 15px; }
.dashboard-project-overview-copy > span:last-child { display: grid; min-width: 0; gap: 3px; }
.dashboard-project-overview-copy strong {
  overflow: hidden; color: #d9dedf; font-size: 11px; font-weight: 740; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-project-overview-copy small {
  overflow: hidden; color: #718078; font-size: 9px; text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-engine-summary { display: flex; align-items: stretch; gap: 4px; }
.dashboard-engine-chip {
  --engine-rgb: 120,157,241;
  display: grid; min-width: 63px; grid-template-columns: 20px auto; align-items: center; gap: 1px 5px;
  border: 1px solid rgba(var(--engine-rgb),.14); border-radius: 9px 3px 9px 3px;
  padding: 5px 6px; background: rgba(var(--engine-rgb),.035); color: rgb(var(--engine-rgb));
}
.dashboard-engine-chip.engine-claude { --engine-rgb: 245,166,35; }
.dashboard-engine-chip > em {
  display: grid; width: 20px; height: 20px; grid-row: 1 / 3; place-items: center;
  border: 1px solid rgba(var(--engine-rgb),.2); border-radius: 6px 2px 6px 2px;
  background: rgba(var(--engine-rgb),.07); font: normal 760 7px/1 "SF Mono", Menlo, monospace;
}
.dashboard-engine-chip > span:nth-child(2) { color: #76827c; font-size: 8px; white-space: nowrap; }
.dashboard-engine-quota {
  --quota-used: 0%;
  display: block; min-width: 26px; overflow: hidden; border-radius: 99px; padding: 2px 4px;
  background: linear-gradient(90deg, rgba(var(--engine-rgb),.17) var(--quota-used), rgba(var(--engine-rgb),.04) var(--quota-used));
  color: rgb(var(--engine-rgb)); font: 720 8px/1 "SF Mono", Menlo, monospace; text-align: center; white-space: nowrap;
}
.dashboard-engine-quota.is-high { color: #efb05a; }
.dashboard-engine-quota.is-critical { color: #ff806d; }
.dashboard-engine-quota.is-stale { opacity: .72; }
.dashboard-engine-quota.is-unavailable { --quota-used: 0%; color: #66716b; }
.dashboard-project-group {
  --project-rgb: 120,157,241;
  position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(var(--project-rgb),.17);
  border-radius: 18px 6px 18px 6px;
  background: linear-gradient(150deg, rgba(20,27,28,.9), rgba(9,13,12,.92));
  box-shadow: inset 0 1px rgba(255,255,255,.018), 0 10px 28px rgba(0,0,0,.14);
}
.dashboard-project-group::before {
  position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 2px;
  background: rgba(var(--project-rgb),.7); box-shadow: 0 0 14px rgba(var(--project-rgb),.2); content: "";
}
.dashboard-project-group.is-pinned { --project-rgb: 245,166,35; }
.dashboard-project-toggle {
  display: grid; width: 100%; min-height: 69px; grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center; gap: 10px; border: 0; border-bottom: 1px solid rgba(var(--project-rgb),.12);
  padding: 10px 11px 10px 12px; background:
    linear-gradient(100deg, rgba(var(--project-rgb),.09), rgba(var(--project-rgb),.018) 68%, transparent);
  color: inherit; text-align: left; transition: background 150ms ease;
}
.dashboard-project-group.is-collapsed .dashboard-project-toggle { border-bottom-color: transparent; }
.dashboard-project-toggle:active { background: rgba(var(--project-rgb),.12); }
.dashboard-project-folder-icon {
  display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(var(--project-rgb),.26);
  border-radius: 12px 4px 12px 4px; background: rgba(var(--project-rgb),.08); color: rgb(var(--project-rgb));
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.dashboard-project-folder-icon .ui-icon { width: 18px; height: 18px; }
.dashboard-project-copy { display: grid; min-width: 0; gap: 5px; }
.dashboard-project-title { display: flex; min-width: 0; align-items: center; gap: 6px; }
.dashboard-project-title strong {
  overflow: hidden; color: #e1e5e3; font-size: 13px; font-weight: 720; line-height: 1.3;
  text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-project-title em {
  flex: 0 0 auto; border: 1px solid rgba(var(--project-rgb),.24); border-radius: 99px;
  padding: 2px 5px; background: rgba(var(--project-rgb),.07); color: rgb(var(--project-rgb));
  font: normal 720 8px/1 "SF Mono", Menlo, monospace; letter-spacing: .05em;
}
.dashboard-project-copy > small {
  overflow: hidden; color: #71807b; font: 9px/1.35 "SF Mono", Menlo, monospace;
  text-overflow: ellipsis; white-space: nowrap;
}
.dashboard-project-side { display: flex; align-items: center; gap: 7px; }
.dashboard-project-engines { display: flex; align-items: center; gap: 3px; }
.dashboard-project-engines i {
  display: grid; width: 21px; height: 19px; place-items: center; border: 1px solid rgba(120,157,241,.18);
  border-radius: 6px 2px 6px 2px; background: rgba(120,157,241,.045); color: #839ed5;
  font: normal 720 7px/1 "SF Mono", Menlo, monospace;
}
.dashboard-project-engines i.engine-claude { border-color: rgba(245,166,35,.18); background: rgba(245,166,35,.045); color: #b98f47; }
.dashboard-project-engines i.engine-other { border-color: rgba(129,143,135,.16); background: rgba(129,143,135,.035); color: #7d8982; }
.dashboard-project-count { display: grid; justify-items: end; gap: 1px; }
.dashboard-project-count b { color: rgb(var(--project-rgb)); font: 650 13px/1 "SF Mono", Menlo, monospace; }
.dashboard-project-count small { color: #718078; font-size: 8px; white-space: nowrap; }
.dashboard-project-chevron {
  width: 14px; height: 14px; color: rgba(var(--project-rgb),.72);
  transition: transform 210ms cubic-bezier(.2,.8,.2,1);
}
.dashboard-project-toggle[aria-expanded="true"] .dashboard-project-chevron { transform: rotate(180deg); }
.dashboard-project-items { display: grid; min-width: 0; gap: 1px; background: rgba(238,232,217,.055); }
.dashboard-project-empty {
  display: grid; min-height: 76px; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px;
  border: 1px dashed rgba(120,157,241,.16); border-radius: 15px 5px 15px 5px; padding: 12px 13px;
  background: rgba(120,157,241,.025); color: #75837c;
}
.dashboard-project-empty > .ui-icon { width: 23px; height: 23px; color: #6f89bc; }
.dashboard-project-empty > span { display: grid; min-width: 0; gap: 4px; }
.dashboard-project-empty strong { color: #aeb9b4; font-size: 12px; font-weight: 680; }
.dashboard-project-empty small { color: #708078; font-size: 10px; line-height: 1.45; }
.interaction-card {
  --interaction-rgb: 120,157,241;
  position: relative; overflow: hidden; border: 1px solid rgba(var(--interaction-rgb),.23);
  border-radius: 18px 5px 18px 5px; padding: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(var(--interaction-rgb),.12), transparent 34%),
    linear-gradient(155deg, rgba(18,26,23,.98), rgba(9,13,12,.98));
  box-shadow: inset 3px 0 rgba(var(--interaction-rgb),.68), 0 16px 42px rgba(0,0,0,.2);
}
.interaction-card.state-submitting,
.interaction-card.state-accepted { --interaction-rgb: 114,215,173; }
.interaction-card > header {
  display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 11px;
}
.interaction-source-mark {
  display: grid; width: 40px; height: 40px; place-items: center;
  border: 1px solid rgba(var(--interaction-rgb),.32); border-radius: 13px 4px 13px 4px;
  background: rgba(var(--interaction-rgb),.09); color: rgb(var(--interaction-rgb));
  font: 760 11px/1 "SF Mono", Menlo, monospace;
}
.interaction-card > header > div { min-width: 0; }
.interaction-card > header strong {
  display: block; overflow: hidden; color: #ebe5d8; font-size: 14px; font-weight: 740;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.interaction-card > header small {
  display: block; overflow: hidden; margin-top: 4px; color: #77847d;
  font: 10px/1.4 "SF Mono", Menlo, monospace; text-overflow: ellipsis; white-space: nowrap;
}
.interaction-status {
  border: 1px solid rgba(var(--interaction-rgb),.28); border-radius: 99px; padding: 6px 8px;
  background: rgba(var(--interaction-rgb),.08); color: rgb(var(--interaction-rgb));
  font-size: 10px; font-weight: 780; white-space: nowrap;
}
.interaction-prompt {
  margin: 14px 0 0; border-left: 2px solid rgba(var(--interaction-rgb),.72);
  padding: 2px 0 2px 11px; color: #d4d2c8; font-size: 13px; font-weight: 620;
  line-height: 1.65; white-space: pre-wrap;
}
.interaction-context {
  margin-top: 11px; border: 1px solid rgba(238,232,217,.09); border-radius: 10px 3px 10px 3px;
  background: rgba(1,5,4,.24);
}
.interaction-context summary { padding: 9px 10px; color: #7f9087; font-size: 10px; font-weight: 680; }
.interaction-context p,
.interaction-context pre {
  overflow: auto; max-height: 280px; margin: 0; border: 0; border-top: 1px solid rgba(238,232,217,.08);
  padding: 10px; background: transparent; color: #9da7a1; font-size: 11px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.interaction-context pre { font-family: "SF Mono", Menlo, monospace; }
.interaction-context a { display: inline-block; margin-top: 7px; color: #b9d9c8; font-weight: 720; text-decoration: none; }
.interaction-risk {
  margin: 11px 0 0; border: 1px solid rgba(255,115,92,.22); border-radius: 10px 3px 10px 3px;
  padding: 9px 10px; background: rgba(255,115,92,.07); color: #e3a39a;
  font-size: 11px; font-weight: 680; line-height: 1.55;
}
.interaction-card.has-broad-git-stage { --interaction-rgb: 255,115,92; }
.interaction-dismiss {
  width: 100%; margin-top: 10px; border: 1px solid rgba(238,232,217,.1);
  border-radius: 9px 3px 9px 3px; padding: 9px 10px; background: rgba(238,232,217,.025);
  color: #9da7a1; font-size: 11px; font-weight: 680;
}
.interaction-form { margin-top: 14px; }
.interaction-form fieldset { display: grid; gap: 13px; min-width: 0; margin: 0; border: 0; padding: 0; }
.interaction-field {
  display: grid; gap: 8px; border-top: 1px solid rgba(238,232,217,.08); padding-top: 12px;
}
.interaction-field:first-child { border-top: 0; padding-top: 0; }
.interaction-field-label { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: start; gap: 8px; }
.interaction-field-label > span { color: rgb(var(--interaction-rgb)); font: 700 9px/1.7 "SF Mono", Menlo, monospace; letter-spacing: .08em; }
.interaction-field-label > strong { color: #d9d6cc; font-size: 12px; font-weight: 680; line-height: 1.55; }
.interaction-field-description { margin: -2px 0 0 33px; color: #79857e; font-size: 10px; line-height: 1.5; }
.interaction-choices { display: grid; gap: 7px; }
.interaction-choices.is-binary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.interaction-choice-wrap { display: grid; gap: 5px; min-width: 0; }
.interaction-choice {
  display: grid; min-height: 45px; grid-template-columns: 18px minmax(0,1fr); align-items: center; gap: 9px;
  border: 1px solid rgba(238,232,217,.11); border-radius: 11px 3px 11px 3px; padding: 9px 10px;
  background: rgba(238,232,217,.025); color: #d9d6cc;
  transition: border-color 120ms ease, background 120ms ease, transform 90ms ease;
}
.interaction-choice:has(input:checked) {
  border-color: rgba(var(--interaction-rgb),.48); background: rgba(var(--interaction-rgb),.12);
  box-shadow: inset 2px 0 rgba(var(--interaction-rgb),.65);
}
.interaction-choice:active { transform: scale(.985); }
.interaction-choice input { width: 17px; height: 17px; margin: 0; accent-color: rgb(var(--interaction-rgb)); }
.interaction-choice span { min-width: 0; }
.interaction-choice strong { display: block; color: inherit; font-size: 12px; font-weight: 690; line-height: 1.4; }
.interaction-choice small { display: block; margin-top: 3px; color: #77827c; font-size: 10px; line-height: 1.4; }
.interaction-choice-preview {
  margin: -1px 2px 2px 28px; border-left: 1px solid rgba(var(--interaction-rgb),.2);
  padding-left: 9px; color: #7d8a83;
}
.interaction-choice-preview summary { cursor: pointer; font-size: 10px; font-weight: 680; }
.interaction-choice-preview pre {
  max-height: 180px; overflow: auto; margin: 7px 0 0; border-radius: 7px;
  padding: 9px; background: rgba(0,0,0,.18); color: #aeb7b1;
  font: 10px/1.5 "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
}
.interaction-text,
.interaction-other {
  width: 100%; min-height: 72px; resize: vertical; border: 1px solid rgba(238,232,217,.13);
  border-radius: 11px 3px 11px 3px; padding: 10px 11px; background: rgba(1,5,4,.58);
  color: #e2ddd1; font-size: 16px; line-height: 1.5;
}
.interaction-other { min-height: 56px; margin-top: 1px; }
.interaction-text[data-secret="true"] { -webkit-text-security: disc; }
.interaction-text:focus,
.interaction-other:focus { border-color: rgba(var(--interaction-rgb),.48); box-shadow: 0 0 0 2px rgba(var(--interaction-rgb),.06); }
.interaction-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.interaction-actions span { color: #6f7b75; font-size: 10px; line-height: 1.45; }
.interaction-actions button {
  min-height: 42px; flex: 0 0 auto; border: 1px solid rgba(var(--interaction-rgb),.4);
  border-radius: 11px 3px 11px 3px; padding: 0 15px; background: rgba(var(--interaction-rgb),.15);
  color: rgb(var(--interaction-rgb)); font-size: 12px; font-weight: 780;
}
.interaction-actions button:active:not(:disabled) { transform: scale(.97); background: rgba(var(--interaction-rgb),.23); }
.interaction-actions button:disabled { opacity: .55; }
.interaction-alternatives { display: flex; justify-content: flex-end; gap: 8px; margin-top: -4px; }
.interaction-alternatives button {
  min-height: 36px; border: 1px solid rgba(238,232,217,.1); border-radius: 9px 3px 9px 3px;
  padding: 0 11px; background: rgba(238,232,217,.025); color: #8e9892;
  font-size: 10px; font-weight: 680;
}
.interaction-alternatives button:first-child { border-color: rgba(255,115,92,.16); color: #c28b82; }
.interaction-open-thread {
  display: flex; min-height: 40px; width: 100%; align-items: center; justify-content: space-between;
  margin-top: 12px; border: 1px solid rgba(var(--interaction-rgb),.16);
  border-radius: 10px 3px 10px 3px; padding: 0 11px; background: rgba(var(--interaction-rgb),.045);
  color: rgb(var(--interaction-rgb)); font-size: 11px; font-weight: 700;
}
.interaction-open-thread .ui-icon { width: 14px; height: 14px; }
.interaction-open-thread:active { transform: scale(.985); background: rgba(var(--interaction-rgb),.1); }
.interaction-receipt { margin: 10px 1px 0; color: #77847d; font-size: 10px; line-height: 1.5; }
.interaction-receipt.is-error { color: #d69a8f; }
.interaction-card fieldset:disabled { opacity: .68; }
.remote-control-card {
  --control-rgb: 114,215,173;
  position: relative; overflow: hidden; border: 1px solid rgba(var(--control-rgb),.19);
  border-radius: 18px 5px 18px 5px; padding: 15px;
  background:
    linear-gradient(rgba(var(--control-rgb),.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--control-rgb),.018) 1px, transparent 1px),
    radial-gradient(circle at 100% 0, rgba(var(--control-rgb),.11), transparent 38%),
    #0d1411;
  background-size: 18px 18px, 18px 18px, auto, auto;
  box-shadow: inset 3px 0 rgba(var(--control-rgb),.45), 0 15px 38px rgba(0,0,0,.16);
}
.remote-control-card.is-desktop { --control-rgb: 120,157,241; }
.remote-control-card.state-permission,
.remote-control-card.state-menu,
.remote-control-card.state-error,
.remote-control-card.state-new_case { --control-rgb: 245,166,35; }
.remote-control-card > header {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px;
}
.remote-control-mark {
  display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(var(--control-rgb),.29);
  border-radius: 13px 4px 13px 4px; background: rgba(var(--control-rgb),.09); color: rgb(var(--control-rgb));
  font: 720 14px/1 "SF Mono", Menlo, monospace; box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.remote-control-card > header > div { min-width: 0; }
.remote-control-card > header strong { display: block; overflow: hidden; color: #e7e2d6; font-size: 14px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.remote-control-card > header small { display: block; overflow: hidden; margin-top: 4px; color: #77837c; font: 10px/1.4 "SF Mono", Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.remote-control-state {
  border: 1px solid rgba(var(--control-rgb),.25); border-radius: 99px; padding: 6px 8px;
  background: rgba(var(--control-rgb),.075); color: rgb(var(--control-rgb)); font-size: 10px; font-weight: 760; white-space: nowrap;
}
.remote-control-question {
  margin: 13px 0 0; border-left: 2px solid rgba(var(--control-rgb),.66); padding: 3px 0 3px 10px;
  color: #c8c9c1; font-size: 12px; font-weight: 610; line-height: 1.6;
}
.remote-control-options { display: grid; gap: 7px; margin-top: 12px; }
.remote-control-options button {
  width: 100%; min-height: 44px; border: 1px solid rgba(var(--control-rgb),.25); border-radius: 11px 3px 11px 3px;
  padding: 9px 11px; background: rgba(var(--control-rgb),.085); color: #e2d8c2; font-size: 12px; font-weight: 680; line-height: 1.45; text-align: left;
}
.remote-control-options button:active { transform: scale(.985); background: rgba(var(--control-rgb),.16); }
.remote-control-terminal { margin-top: 12px; border: 1px solid rgba(114,215,173,.13); border-radius: 11px 3px 11px 3px; background: rgba(2,7,5,.72); }
.remote-control-terminal summary { padding: 10px 11px; color: #87a496; font: 650 10px/1.3 "SF Mono", Menlo, monospace; cursor: pointer; }
.remote-control-terminal pre {
  overflow: auto; max-height: 330px; margin: 0; border-top: 1px solid rgba(114,215,173,.1); padding: 11px;
  color: #a9c3b6; font: 10px/1.55 "SF Mono", Menlo, monospace; white-space: pre; -webkit-overflow-scrolling: touch;
}
.remote-control-keyboard { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; margin-top: 12px; }
.remote-control-keyboard button {
  min-width: 0; min-height: 38px; border: 1px solid rgba(238,232,217,.11); border-radius: 9px 3px 9px 3px;
  padding: 0 3px; background: rgba(238,232,217,.035); color: #9aa49e; font: 650 10px/1 "SF Mono", Menlo, monospace;
}
.remote-control-keyboard button:nth-last-child(-n+2) { color: rgb(var(--control-rgb)); }
.remote-control-keyboard button:active { transform: translateY(1px); border-color: rgba(var(--control-rgb),.32); background: rgba(var(--control-rgb),.1); }
.remote-control-composer { display: grid; grid-template-columns: minmax(0,1fr) 58px; align-items: stretch; gap: 7px; margin-top: 8px; }
.remote-control-composer textarea {
  min-height: 52px; resize: vertical; border: 1px solid rgba(238,232,217,.12); border-radius: 11px 3px 11px 3px;
  padding: 9px 10px; background: rgba(1,5,4,.58); color: #ddd8cc; font-size: 16px; line-height: 1.45;
}
.remote-control-composer textarea:focus { border-color: rgba(var(--control-rgb),.4); box-shadow: 0 0 0 2px rgba(var(--control-rgb),.05); }
.remote-control-composer button {
  border: 1px solid rgba(var(--control-rgb),.34); border-radius: 11px 3px 11px 3px;
  background: rgba(var(--control-rgb),.14); color: rgb(var(--control-rgb)); font-size: 12px; font-weight: 760;
}
.remote-control-composer button:disabled { opacity: .45; }
.remote-control-receipt { margin: 9px 1px 0; color: #6f7e76; font-size: 10px; line-height: 1.45; }
.remote-control-receipt.is-error { color: #cf8f82; }
.needs-conversation-swipe {
  position: relative; overflow: hidden; border-radius: 11px 3px 11px 3px;
  background: #6f2925;
  touch-action: pan-y;
}
.needs-conversation-swipe.is-static { background: transparent; }
.needs-conversation-delete {
  position: absolute; z-index: 1; inset: 0 0 0 auto; display: grid; width: 78px;
  grid-template-rows: auto auto; place-content: center; place-items: center; gap: 4px;
  border: 0; padding: 0; background: linear-gradient(145deg, #8e342d, #6f2925);
  color: #fff1ed; font: 720 11px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 120ms ease, visibility 0s linear 120ms, background 120ms ease;
}
.needs-conversation-swipe.is-open .needs-conversation-delete,
.needs-conversation-swipe.is-swiping .needs-conversation-delete {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s;
}
.needs-conversation-delete .ui-icon { width: 19px; height: 19px; }
.needs-conversation-delete:active { background: #a94339; }
.needs-conversation-row {
  position: relative; z-index: 2;
  display: grid;
  width: 100%;
  min-height: 92px;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  border: 1px solid rgba(238,232,217,.09);
  border-radius: 11px 3px 11px 3px;
  padding: 14px 13px 13px 12px;
  background: #111714;
  color: inherit;
  font: inherit;
  text-align: left;
  transform: translate3d(var(--needs-swipe-x, 0), 0, 0);
  transition: transform 190ms cubic-bezier(.2,.8,.2,1), border-color 150ms ease, background 150ms ease;
}
.needs-conversation-swipe.is-open .needs-conversation-row { --needs-swipe-x: -78px; }
.needs-conversation-swipe.is-swiping .needs-conversation-row { transition: none; }
.needs-conversation-row.is-unread {
  border-color: rgba(103,158,255,.2);
  background: linear-gradient(90deg, #172035, #121a17 42%, #111714 100%);
}
.needs-conversation-row:active { background: #17201c; }
.needs-conversation-row.is-pressing,
.needs-conversation-row.is-activating {
  border-color: rgba(114,215,173,.42);
  background: linear-gradient(90deg, #1b3028, #17201c 55%, #121916);
  box-shadow: inset 3px 0 rgba(114,215,173,.8), 0 0 0 1px rgba(114,215,173,.08);
}
.needs-conversation-row.is-pressing {
  transform: translate3d(var(--needs-swipe-x, 0), 0, 0) scale(.985);
  transition-duration: 70ms;
}
.needs-conversation-dot {
  width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; opacity: 0;
  background: #68a2ff; box-shadow: 0 0 9px rgba(104,162,255,.65);
}
.needs-conversation-row.is-unread .needs-conversation-dot { opacity: 1; }
.needs-conversation-row.is-task-list .needs-conversation-dot {
  opacity: 1; background: var(--mint);
  box-shadow: 0 0 0 4px rgba(114,215,173,.07), 0 0 11px rgba(114,215,173,.48);
}
.needs-conversation-row.is-followed.is-unread .needs-conversation-dot {
  opacity: 1; background: #68a2ff;
  box-shadow: 0 0 0 4px rgba(104,162,255,.07), 0 0 11px rgba(104,162,255,.65);
}
.needs-conversation-row.is-followed.is-needs-attention .needs-conversation-dot {
  opacity: 1; background: var(--danger);
  box-shadow: 0 0 0 4px rgba(255,115,92,.07), 0 0 11px rgba(255,115,92,.58);
}
.needs-conversation-row.is-task-list.state-stale .needs-conversation-dot {
  background: var(--signal-hot); box-shadow: 0 0 10px rgba(245,166,35,.42);
}
.needs-conversation-row.is-task-list.state-failed .needs-conversation-dot,
.needs-conversation-row.is-task-list.state-cancelled .needs-conversation-dot {
  background: var(--danger); box-shadow: 0 0 10px rgba(255,115,92,.4);
}
.needs-conversation-copy { display: grid; min-width: 0; gap: 7px; }
.needs-conversation-head { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; }
.needs-conversation-head strong {
  min-width: 0; overflow: hidden; color: #e7e3d9; font-size: 14px; font-weight: 680;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.needs-conversation-head time { flex: 0 0 auto; color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.needs-conversation-row.is-unread .needs-conversation-head time { color: #7d9dcc; }
.needs-conversation-summary {
  display: -webkit-box; overflow: hidden; color: #9da7a1; font-size: 12px; line-height: 1.55;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.needs-conversation-row.is-unread .needs-conversation-summary { color: #b5bdb8; }
.needs-conversation-meta { display: flex; min-width: 0; align-items: center; gap: 10px; color: var(--text-faint); font-size: 11px; line-height: 1.4; }
.needs-conversation-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.needs-conversation-meta span:first-child { flex: 0 0 auto; color: #77837c; }
.needs-conversation-meta > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
.needs-conversation-action {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; margin-left: auto;
  color: #80a9ea; font-weight: 700; letter-spacing: .02em;
}
.needs-conversation-action .ui-icon { width: 12px; height: 12px; }
.needs-conversation-row.is-unread .needs-conversation-meta span:first-child { color: #78a7ee; }
.needs-conversation-row.is-task-list .needs-conversation-meta span:first-child { color: #79bca0; }
.needs-conversation-row.is-task-list .needs-conversation-action { color: #8fb8ee; }
.needs-conversation-row.is-followed .needs-conversation-meta span:first-child { color: #c89a4d; }
.needs-conversation-row.is-followed .needs-conversation-action { color: #d8ad60; }
.dashboard-item {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(238,232,217,.11);
  border-radius: 12px 4px 12px 4px;
  padding: 16px 15px 15px;
  background: rgba(10,14,13,.42);
}
.dashboard-item.has-conversation { transition: transform 130ms ease, border-color 160ms ease, background 160ms ease; }
.dashboard-item.has-conversation:active { transform: scale(.985); border-color: rgba(120,157,241,.25); background-color: rgba(20,29,25,.94); }
.dashboard-item.has-conversation > :not(.task-card-open) { position: relative; z-index: 2; pointer-events: none; }
.dashboard-item.has-conversation button:not(.task-card-open),
.dashboard-item.has-conversation a,
.dashboard-item.has-conversation input,
.dashboard-item.has-conversation textarea,
.dashboard-item.has-conversation select,
.dashboard-item.has-conversation summary { pointer-events: auto; }
.task-card-open { position: absolute; z-index: 1; inset: 0; width: 100%; border: 0; border-radius: inherit; padding: 0; background: transparent; cursor: pointer; }
.task-card-open:focus-visible { outline: 2px solid rgba(120,157,241,.62); outline-offset: -3px; }
.dashboard-item::before { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #4a544f; content: ""; }
.dashboard-item.is-needs::before { background: var(--danger); box-shadow: 0 0 14px rgba(255,115,92,.3); }
.dashboard-item.is-task::before { background: var(--signal); }
.dashboard-item.is-web::before { background: var(--mint); box-shadow: 0 0 14px rgba(114,215,173,.2); }
.dashboard-item.is-web.is-offline::before { background: var(--danger); box-shadow: none; }
.dashboard-item.project-card::before { background: #789df1; box-shadow: 0 0 14px rgba(120,157,241,.18); }
.dashboard-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.dashboard-item-head strong { min-width: 0; color: #e8e2d4; font-size: 15px; font-weight: 650; line-height: 1.45; }
.dashboard-item-badge { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px; color: #aeb7b1; font-size: 11px; }
.dashboard-item-badge.state-working { color: var(--mint); border-color: rgba(114,215,173,.22); }
.dashboard-item-badge.state-needs_you { color: #ff9c8b; border-color: rgba(255,115,92,.25); }
.dashboard-item-badge.state-stale { color: var(--signal-hot); border-color: rgba(245,166,35,.25); }
.dashboard-item p { margin: 10px 0 0; color: #a1aaa4; font-size: 13px; line-height: 1.65; white-space: pre-wrap; }
.dashboard-item .task-summary { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.dashboard-item.is-expanded .task-summary { -webkit-line-clamp: 3; }
.dashboard-item-meta { display: flex; flex-wrap: wrap; gap: 6px 11px; margin-top: 11px; color: var(--text-faint); font-size: 11px; line-height: 1.45; }
.agent-work-card { padding: 18px 15px 15px; }
.agent-work-card::after {
  position: absolute; top: 0; right: 0; width: 72px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(114,215,173,.45)); content: "";
}
.agent-mission, .agent-latest { margin-top: 13px; }
.agent-mission > span, .agent-latest > span {
  display: block; color: var(--text-faint); font-size: 11px; font-weight: 760; letter-spacing: .08em;
}
.agent-mission > .markdown-body { margin-top: 6px; color: #b2bbb5; font-size: 12px; line-height: 1.62; }
.agent-latest {
  border-left: 2px solid var(--mint); border-radius: 0 8px 8px 0; padding: 11px 12px;
  background: linear-gradient(90deg, rgba(114,215,173,.065), rgba(114,215,173,.012));
}
.agent-work-card.is-needs .agent-latest { border-left-color: var(--danger); background: linear-gradient(90deg, rgba(255,115,92,.075), transparent); }
.agent-latest > .markdown-body { margin-top: 6px; color: #d0d5d0; font-size: 13px; line-height: 1.65; }
.agent-runtime-panel {
  display: grid; gap: 9px; margin-top: 12px; border: 1px solid rgba(114,215,173,.14);
  border-radius: 10px 3px 10px 3px; padding: 12px; background: rgba(7,13,11,.55);
}
.agent-runtime-workflow + .agent-runtime-workflow,
.agent-runtime-bash { border-top: 1px solid rgba(238,232,217,.08); padding-top: 10px; }
.agent-runtime-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.agent-runtime-head strong { min-width: 0; overflow: hidden; color: #e4eadf; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-head span { flex: 0 0 auto; color: var(--mint); font-size: 10px; font-weight: 720; }
.agent-runtime-meta { margin-top: 5px; color: #9ca7a0; font-size: 11px; line-height: 1.5; }
.agent-runtime-workflow > p { margin-top: 7px; color: #aeb7b1; font-size: 12px; line-height: 1.55; }
.agent-runtime-phases { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.agent-runtime-phases span {
  border: 1px solid rgba(238,232,217,.09); border-radius: 999px; padding: 3px 8px;
  color: #727d76; font-size: 10px;
}
.agent-runtime-phases span.is-current { border-color: rgba(114,215,173,.3); background: rgba(114,215,173,.08); color: var(--mint); }
.agent-runtime-bash > strong { display: block; color: #bdc6c0; font-size: 11px; font-weight: 740; }
.agent-runtime-bash > div {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; margin-top: 8px;
  border-left: 2px solid var(--signal); padding-left: 9px;
}
.agent-runtime-bash span { overflow: hidden; color: #d0d5d0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.agent-runtime-bash time { color: #89958e; font-family: "SF Mono", Menlo, monospace; font-size: 10px; }
.agent-runtime-bash small { grid-column: 1 / -1; overflow: hidden; color: #7f8a84; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.agent-text-toggle {
  display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between;
  margin-top: 13px; border: 1px solid rgba(238,232,217,.09); border-radius: 9px 3px 9px 3px;
  padding: 0 12px; background: rgba(238,232,217,.025); color: #aeb7b1; font-size: 11px; font-weight: 650;
}
.agent-text-toggle .ui-icon { width: 15px; height: 15px; color: var(--mint); transition: transform 180ms ease; }
.agent-text-toggle[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.agent-text-toggle:active { transform: scale(.98); background: rgba(114,215,173,.06); }
.agent-text-panel { margin-top: 10px; animation: detail-open 200ms ease both; }
.agent-text-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agent-text-row { border: 1px solid rgba(238,232,217,.075); border-radius: 9px 3px 9px 3px; padding: 10px 11px; background: rgba(13,17,16,.42); }
.agent-text-row.role-user { border-color: rgba(245,166,35,.13); background: rgba(245,166,35,.035); }
.agent-text-row.role-assistant { border-color: rgba(114,215,173,.13); }
.agent-text-row.role-tool { opacity: .76; }
.agent-text-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agent-text-meta strong { color: #a3ada7; font-size: 11px; font-weight: 750; letter-spacing: .05em; }
.agent-text-row.role-user .agent-text-meta strong { color: var(--signal); }
.agent-text-row.role-assistant .agent-text-meta strong { color: var(--mint); }
.agent-text-meta time { color: var(--text-faint); font-family: "SF Mono", Menlo, monospace; font-size: 11px; }
.agent-text-row > .markdown-body { margin-top: 6px; overflow-wrap: anywhere; color: #b8c0bb; font-size: 12px; line-height: 1.62; }
.agent-text-row.role-tool > .markdown-body { color: #9ba59f; font-family: "SF Mono", Menlo, monospace; font-size: 11px; }
.agent-text-empty { margin: 0 !important; border: 1px dashed rgba(238,232,217,.1); border-radius: 8px; padding: 12px; color: #727d76 !important; font-size: 11px !important; }
.agent-compose {
  width: 100%; min-height: 46px; margin-top: 10px; border: 1px solid rgba(245,166,35,.2);
  border-radius: 9px 3px 9px 3px; background: rgba(245,166,35,.06); color: #cba65f;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.agent-compose:active { transform: scale(.98); background: rgba(245,166,35,.1); }
.task-chat-cue {
  display: flex; min-height: 37px; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; border-top: 1px solid rgba(238,232,217,.075); padding-top: 10px;
}
.task-chat-cue > span, .task-chat-cue > strong { display: inline-flex; align-items: center; gap: 7px; }
.task-chat-cue > span { color: #75827b; font-size: 11px; }
.task-chat-cue > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(114,215,173,.07), 0 0 11px rgba(114,215,173,.48); animation: live-breathe 1.8s ease-in-out infinite; }
.task-chat-cue > strong { color: #8eaae2; font-size: 11px; font-weight: 720; }
.task-chat-cue .ui-icon { width: 13px; height: 13px; }
.task-detail-toggle {
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  border: 1px solid rgba(238,232,217,.1);
  border-radius: 10px 3px 10px 3px;
  padding: 0 13px;
  background: rgba(238,232,217,.035);
  color: #c1bcae;
  font-size: 12px;
  font-weight: 650;
  transition: transform 110ms ease, border-color 110ms ease, background 110ms ease;
}
.task-detail-toggle .ui-icon { width: 16px; height: 16px; color: var(--signal); transition: transform 180ms ease; }
.task-detail-toggle[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.task-detail-toggle:active { transform: scale(.975); border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.08); }
.task-expanded { display: grid; gap: 12px; margin-top: 13px; animation: detail-open 200ms ease both; }
.task-facts, .task-order-facts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.task-facts > div, .task-order-facts > div {
  min-width: 0;
  border: 1px solid rgba(238,232,217,.08);
  border-radius: 9px 3px 9px 3px;
  padding: 10px;
  background: rgba(13,17,16,.35);
}
.task-facts span, .task-order-facts span { display: block; color: var(--text-faint); font-size: 11px; }
.task-facts strong, .task-order-facts strong { display: block; margin-top: 5px; overflow: hidden; color: #c9c4b7; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.task-detail-block, .task-execution, .task-activity { border-top: 1px solid rgba(238,232,217,.09); padding-top: 12px; }
.task-detail-block.is-primary { border-left: 2px solid var(--signal); border-top: 0; padding: 11px 0 11px 12px; background: linear-gradient(90deg, rgba(245,166,35,.06), transparent 70%); }
.task-detail-label, .task-execution-head > span, .task-checks > span { color: #939e98; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.task-detail-block > .markdown-body, .task-execution .task-detail-block > .markdown-body { margin-top: 7px; color: #c2c8c3; font-size: 13px; line-height: 1.7; }
.task-execution { display: grid; gap: 11px; }
.task-execution-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.task-execution-head strong { color: var(--mint); font-size: 11px; font-weight: 650; text-align: right; }
.task-execution.is-empty .task-execution-head strong { color: var(--signal); }
.task-execution-empty { margin: 0 !important; border: 1px dashed rgba(245,166,35,.18); border-radius: 9px; padding: 12px; background: rgba(245,166,35,.035); color: #a79b81 !important; }
.task-checks ul, .task-activity ol { margin: 8px 0 0; padding: 0; list-style: none; }
.task-checks li { position: relative; padding: 5px 0 5px 16px; color: #abb3ae; font-size: 12px; line-height: 1.55; }
.task-checks li::before { position: absolute; top: 12px; left: 1px; width: 6px; height: 6px; border: 1px solid var(--mint); border-radius: 2px; content: ""; }
.task-activity li { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-bottom: 1px solid rgba(238,232,217,.06); padding: 9px 0; }
.task-activity li:last-child { border-bottom: 0; }
.task-activity li strong { color: #aeb6b0; font-size: 12px; font-weight: 550; }
.task-activity li span { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.dashboard-actions {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 7px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid rgba(238,232,217,.08);
}
.dashboard-actions button {
  min-height: 44px;
  border: 1px solid rgba(245,166,35,.2);
  border-radius: 8px 3px 8px 3px;
  padding: 0 9px;
  background: rgba(245,166,35,.065);
  color: #c8a45e;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .02em;
}
.dashboard-actions button:active:not(:disabled) { transform: translateY(1px) scale(.955); filter: brightness(1.25); box-shadow: inset 0 2px 5px rgba(0,0,0,.2); }
.dashboard-actions button:nth-child(2) { border-color: rgba(114,215,173,.2); background: rgba(114,215,173,.055); color: #8bc9ae; }
.dashboard-actions button.is-danger { border-color: rgba(255,115,92,.15); background: transparent; color: #8e665f; }
.dashboard-actions button:disabled { opacity: .38; }
.project-folder-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 1px 0 4px; border: 1px solid rgba(120,157,241,.12); border-radius: 10px 3px 10px 3px;
  padding: 10px 11px; background: linear-gradient(90deg, rgba(120,157,241,.055), rgba(120,157,241,.01));
}
.project-folder-toolbar > p { display: grid; gap: 3px; margin: 0; }
.project-folder-toolbar > p strong { color: #b9c9eb; font-size: 11px; font-weight: 700; }
.project-folder-toolbar > p span { color: #82909a; font-size: 11px; line-height: 1.35; }
.project-folder-toolbar > div { display: flex; flex: 0 0 auto; gap: 5px; }
.project-folder-toolbar button {
  min-height: 30px; border: 1px solid rgba(120,157,241,.16); border-radius: 6px 2px 6px 2px;
  padding: 0 9px; background: rgba(120,157,241,.045); color: #96afe0; font-size: 11px; font-weight: 650;
}
.project-folder-toolbar button:active { transform: scale(.94); background: rgba(120,157,241,.13); }
.project-card {
  padding: 0; border-color: rgba(120,157,241,.16);
  background: linear-gradient(145deg, rgba(21,29,38,.78), rgba(8,12,13,.72));
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.project-card::before { width: 3px; background: #789df1; box-shadow: 0 0 18px rgba(120,157,241,.26); }
.project-card.is-project-expanded { border-color: rgba(120,157,241,.3); background: rgba(8,12,14,.82); }
.project-card.is-pinned {
  border-color: rgba(245,166,35,.34);
  background:
    radial-gradient(circle at 88% 12%, rgba(245,166,35,.11), transparent 30%),
    linear-gradient(145deg, rgba(40,31,17,.86), rgba(12,14,13,.78));
  box-shadow: inset 0 1px rgba(255,216,142,.035), 0 8px 24px rgba(0,0,0,.13);
}
.project-card.is-pinned::before { background: var(--signal); box-shadow: 0 0 20px rgba(245,166,35,.32); }
.project-card.is-pinned.is-project-expanded { border-color: rgba(245,166,35,.46); background: rgba(16,14,10,.88); }
.project-folder-toggle {
  display: grid; width: 100%; min-height: 76px; grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center; gap: 11px; border: 0; padding: 13px 64px 13px 15px;
  background: linear-gradient(90deg, rgba(120,157,241,.09), rgba(120,157,241,.018));
  color: inherit; text-align: left; transition: background 160ms ease;
}
.project-folder-toggle:active { background: rgba(120,157,241,.14); }
.project-card.is-pinned .project-folder-toggle {
  background: linear-gradient(90deg, rgba(245,166,35,.115), rgba(245,166,35,.018) 72%);
}
.project-card.is-pinned .project-folder-toggle:active { background: rgba(245,166,35,.14); }
.project-folder-icon {
  position: relative; display: grid; width: 42px; height: 42px; place-items: center;
  border: 1px solid rgba(132,171,255,.28); border-radius: 11px 3px 11px 3px;
  background: linear-gradient(145deg, rgba(120,157,241,.17), rgba(120,157,241,.055));
  color: #a6c0f8; box-shadow: inset 0 1px rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.14);
}
.project-folder-icon::after {
  position: absolute; right: 6px; bottom: 6px; width: 4px; height: 4px; border-radius: 50%;
  background: #72d7ad; box-shadow: 0 0 7px rgba(114,215,173,.65); content: "";
}
.project-folder-icon .ui-icon { width: 20px; height: 20px; }
.project-card.is-pinned .project-folder-icon {
  border-color: rgba(245,166,35,.4); background: linear-gradient(145deg, rgba(245,166,35,.2), rgba(245,166,35,.065));
  color: #f2bd65; box-shadow: inset 0 1px rgba(255,255,255,.05), 0 8px 20px rgba(87,53,5,.16);
}
.project-card.is-pinned .project-folder-icon::after { background: var(--signal-hot); box-shadow: 0 0 8px rgba(245,166,35,.72); }
.project-folder-copy { min-width: 0; }
.project-folder-title { display: flex; min-width: 0; align-items: center; gap: 7px; }
.project-folder-title > strong {
  display: block; overflow: hidden; color: #e3e8ed; font-size: 14px; font-weight: 690;
  line-height: 1.35; text-overflow: ellipsis; white-space: nowrap;
}
.project-folder-title > em {
  flex: 0 0 auto; border: 1px solid rgba(245,166,35,.3); border-radius: 99px; padding: 3px 5px;
  background: rgba(245,166,35,.1); color: #e9b45b; font: normal 760 11px/1 "SF Mono", Menlo, monospace;
  letter-spacing: .05em;
}
.project-path {
  display: block; overflow: hidden; margin: 5px 0 0 !important; color: #71808d !important;
  font-family: "SF Mono", Menlo, monospace; font-size: 11px !important; line-height: 1.4 !important;
  text-overflow: ellipsis; white-space: nowrap !important;
}
.project-folder-side { display: flex; min-width: 48px; align-items: center; justify-content: flex-end; gap: 9px; }
.project-folder-count { display: grid; justify-items: end; gap: 1px; }
.project-folder-count b { color: #9ab4ec; font-family: "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 570; }
.project-folder-count small { color: #82909a; font-size: 11px; white-space: nowrap; }
.project-folder-chevron { width: 15px; height: 15px; color: #7389b8; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.project-folder-toggle[aria-expanded="true"] .project-folder-chevron { transform: rotate(180deg); }
.project-card.is-pinned .project-path { color: #8d7958 !important; }
.project-card.is-pinned .project-folder-count b { color: #e2b461; }
.project-card.is-pinned .project-folder-count small { color: #826f51; }
.project-card.is-pinned .project-folder-chevron { color: #a8874e; }
.project-pin-button {
  position: absolute; z-index: 2; top: 16px; right: 10px; display: grid; width: 44px; height: 44px;
  place-items: center; border: 1px solid rgba(120,157,241,.18); border-radius: 12px 4px 12px 4px;
  background: rgba(120,157,241,.045); color: #7088b9;
  transition: transform 120ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.project-pin-button .ui-icon { width: 16px; height: 16px; }
.project-pin-button:active { transform: scale(.88) rotate(-5deg); background: rgba(120,157,241,.12); }
.project-pin-button.is-active {
  border-color: rgba(245,166,35,.44); background: linear-gradient(145deg, rgba(245,166,35,.22), rgba(245,166,35,.08));
  color: var(--signal-hot); box-shadow: inset 0 1px rgba(255,255,255,.05), 0 0 18px rgba(245,166,35,.12);
}
.project-folder-content {
  padding: 0 13px 14px 15px; border-top: 1px solid rgba(120,157,241,.12);
  background: linear-gradient(180deg, rgba(2,7,10,.26), rgba(2,7,10,.05)); animation: detail-open 210ms ease both;
}
.project-card.is-pinned .project-folder-content {
  border-top-color: rgba(245,166,35,.14);
  background: linear-gradient(180deg, rgba(39,26,6,.16), rgba(5,7,7,.05));
}
.project-folder-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 2px 9px 43px; color: #84929b; font-size: 11px; line-height: 1.4;
}
.project-folder-meta span:first-child { color: #829bd0; font-weight: 700; }
.project-threads {
  position: relative; margin-left: 0; border: 1px solid rgba(238,232,217,.075);
  border-radius: 10px 3px 10px 3px; padding: 11px 10px 9px;
  background: rgba(3,7,8,.48); box-shadow: inset 0 1px rgba(255,255,255,.018);
}
.project-threads-label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 8px; }
.project-threads-label strong { color: #aeb9bd; font-size: 11px; font-weight: 760; letter-spacing: .08em; }
.project-threads-label span { color: #7d8a91; font-size: 11px; }
.project-threads ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.project-thread-row { position: relative; display: block; min-width: 0; }
.project-thread-open {
  position: relative; display: block; width: 100%; min-width: 0; border: 1px solid rgba(238,232,217,.065);
  border-radius: 8px 2px 8px 2px; padding: 9px 27px 9px 10px;
  background: rgba(238,232,217,.022); color: inherit; text-align: left;
  transition: transform 110ms ease, border-color 110ms ease, background 110ms ease;
}
.project-thread-open > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-thread-open > strong { display: block; margin-top: 6px; overflow: hidden; color: #d1d5d1; font-size: 11px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.project-thread-open > p {
  display: -webkit-box; overflow: hidden; margin-top: 4px !important; color: #85918a !important;
  font-size: 11px !important; line-height: 1.55 !important; white-space: normal !important;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.project-thread-open:active { transform: translateX(3px); border-color: rgba(120,157,241,.2); background: rgba(120,157,241,.06); }
.thread-open-arrow { position: absolute; top: 50%; right: 8px; width: 12px; height: 12px; color: #596760; transform: translateY(-50%); }
.thread-engine { border: 1px solid rgba(238,232,217,.1); border-radius: 99px; padding: 3px 6px; color: #a0aaa4; font-size: 11px; }
.thread-engine.engine-codex { border-color: rgba(120,157,241,.2); color: #94b1f0; }
.thread-engine.engine-claude { border-color: rgba(245,166,35,.2); color: #d0a85d; }
.project-threads time { color: var(--text-faint); font-family: "SF Mono", Menlo, monospace; font-size: 11px; }
.project-compose {
  display: grid; width: 100%; min-height: 54px; grid-template-columns: 30px minmax(0,1fr) 15px;
  align-items: center; gap: 10px; margin: 0 0 11px; border: 1px solid rgba(120,157,241,.28);
  border-radius: 10px 3px 10px 3px; padding: 8px 11px;
  background: linear-gradient(100deg, rgba(120,157,241,.12), rgba(120,157,241,.035));
  color: #a5bcf0; text-align: left; box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.project-compose:active { transform: scale(.98); background: rgba(120,157,241,.13); }
.project-compose-mark {
  display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(120,157,241,.3);
  border-radius: 9px 3px 9px 3px; background: rgba(120,157,241,.1); color: #b3c9f7;
  font: 400 19px/1 "SF Mono", Menlo, monospace;
}
.project-compose-copy { display: grid; min-width: 0; gap: 3px; }
.project-compose-copy strong { color: #bcccf0; font-size: 11px; font-weight: 720; }
.project-compose-copy small { overflow: hidden; color: #8396bf; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-compose > .ui-icon { width: 14px; height: 14px; color: #6f89bc; }
.web-app-card { padding: 18px 15px 16px; }
.web-app-card .dashboard-item-badge.state-online { color: var(--mint); border-color: rgba(114,215,173,.24); }
.web-app-card .dashboard-item-badge.state-offline { color: #ff9c8b; border-color: rgba(255,115,92,.25); }
.web-sections { display: grid; gap: 13px; margin-top: 15px; }
.web-section { border-top: 1px solid rgba(238,232,217,.09); padding-top: 12px; }
.web-section > h3 { margin: 0 0 9px; color: #939e98; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.web-section-items { display: grid; gap: 8px; }
.web-content-item { min-width: 0; border: 1px solid rgba(238,232,217,.075); border-radius: 9px 3px 9px 3px; padding: 11px; background: rgba(13,17,16,.34); }
.web-content-label { display: block; color: var(--text-faint); font-size: 11px; letter-spacing: .04em; }
.web-content-value { display: block; margin-top: 5px; overflow-wrap: anywhere; color: #ded9cb; font-size: 14px; font-weight: 650; line-height: 1.45; }
.web-content-detail, .web-content-text { margin: 6px 0 0 !important; color: #a8b0aa !important; font-size: 12px !important; line-height: 1.65 !important; }
.web-progress-track { overflow: hidden; height: 5px; margin-top: 10px; border-radius: 99px; background: rgba(238,232,217,.08); }
.web-progress-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f9f7e, var(--mint)); box-shadow: 0 0 10px rgba(114,215,173,.22); }
.web-list { display: grid; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.web-list li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 3px 10px; border-bottom: 1px solid rgba(238,232,217,.055); padding: 7px 0; }
.web-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.web-list strong { overflow-wrap: anywhere; color: #c8cec9; font-size: 12px; font-weight: 620; }
.web-list small { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.web-list p { grid-column: 1 / -1; margin: 0 !important; color: #858f89 !important; font-size: 11px !important; line-height: 1.5 !important; }
.web-actions { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin-top: 15px; border-top: 1px solid rgba(238,232,217,.09); padding-top: 13px; }
.web-actions button { min-height: 46px; border: 1px solid rgba(114,215,173,.18); border-radius: 9px 3px 9px 3px; padding: 0 11px; background: rgba(114,215,173,.055); color: #9ed0ba; font-size: 12px; font-weight: 680; }
.web-actions button.is-primary { border-color: rgba(245,166,35,.28); background: rgba(245,166,35,.09); color: #e1b767; }
.web-actions button.is-danger { border-color: rgba(255,115,92,.2); background: rgba(255,115,92,.045); color: #b8796e; }
.web-actions button:active:not(:disabled) { transform: scale(.97); filter: brightness(1.2); }
.web-actions button:disabled { opacity: .4; }
.preview-card { overflow: hidden; }
.preview-card::after {
  position: absolute; top: -34px; right: -34px; width: 100px; height: 100px;
  border: 1px solid rgba(114,215,173,.08); border-radius: 50%;
  box-shadow: inset 0 0 32px rgba(114,215,173,.025); content: ""; pointer-events: none;
}
.preview-card.is-offline::after { border-color: rgba(255,115,92,.07); box-shadow: none; }
.preview-open {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  min-height: 48px; margin-top: 16px; border: 1px solid rgba(114,215,173,.22);
  border-radius: 10px 3px 10px 3px; padding: 0 13px;
  background: linear-gradient(100deg, rgba(114,215,173,.09), rgba(114,215,173,.025));
  color: #a7d8c1; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-decoration: none;
}
.preview-open .ui-icon { width: 16px; height: 16px; color: var(--mint); }
.preview-open:active:not(.is-disabled) { transform: scale(.98); filter: brightness(1.15); }
.preview-open.is-disabled { border-color: rgba(255,115,92,.1); background: rgba(255,115,92,.025); color: #776f69; }
.preview-open.is-disabled .ui-icon { color: #655f5a; }
.dashboard-empty { padding: 27px 8px; border-top: 1px solid var(--line); color: #758079; font-size: 13px; line-height: 1.7; text-align: center; }
.dashboard-readonly { margin: 15px 0 0; color: var(--text-faint); font-size: 11px; line-height: 1.55; letter-spacing: .02em; text-align: center; }

/* Safe Markdown: app.js/markdown.js only create these nodes; raw HTML is always text. */
.markdown-body { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.markdown-body > :first-child { margin-top: 0 !important; }
.markdown-body > :last-child { margin-bottom: 0 !important; }
.markdown-body p { margin: 8px 0 0; color: inherit; font: inherit; line-height: inherit; white-space: pre-wrap; }
.markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5 {
  margin: 14px 0 7px; color: #e6e0d3; font-family: "Avenir Next", Avenir, sans-serif;
  font-weight: 720; line-height: 1.35; letter-spacing: -.01em;
}
.markdown-body h2 { font-size: 1.2em; }
.markdown-body h3 { font-size: 1.1em; }
.markdown-body h4, .markdown-body h5 { font-size: 1em; color: #cdd2cd; }
.markdown-body strong { color: #e4dfd2; font-weight: 720; }
.markdown-body em { color: #d5c9ae; }
.markdown-body s { color: #778079; }
.markdown-body a { color: #8eb4ff; text-decoration-color: rgba(142,180,255,.42); text-underline-offset: 2px; }
.markdown-link-disabled { color: #778079; text-decoration: line-through; }
.markdown-body code {
  border: 1px solid rgba(238,232,217,.11); border-radius: 4px; padding: .12em .34em;
  background: rgba(0,0,0,.28); color: #efc674; font-family: "SF Mono", Menlo, monospace; font-size: .88em;
}
.markdown-body pre {
  overflow-x: auto; max-width: 100%; margin: 10px 0 0; border: 1px solid rgba(238,232,217,.1);
  border-radius: 9px 3px 9px 3px; padding: 12px; background: rgba(4,7,6,.65); -webkit-overflow-scrolling: touch;
}
.markdown-body pre code { border: 0; padding: 0; background: transparent; color: #c2d3c9; font-size: 11px; line-height: 1.7; white-space: pre; }
.markdown-body pre code[data-language]::before { display: block; margin-bottom: 8px; color: var(--text-faint); content: attr(data-language); font-size: 11px; letter-spacing: .07em; text-transform: uppercase; }
.markdown-body ul, .markdown-body ol { margin: 8px 0 0; padding-left: 1.35em; }
.markdown-body li { margin: 4px 0; padding-left: .15em; }
.markdown-body li::marker { color: var(--signal); }
.markdown-body blockquote { margin: 9px 0 0; border-left: 2px solid #789df1; padding: 3px 0 3px 10px; color: #a9b7d4; white-space: pre-wrap; }
.markdown-body hr { height: 1px; margin: 12px 0; border: 0; background: rgba(238,232,217,.11); }
.markdown-table-wrap { overflow-x: auto; max-width: 100%; margin-top: 10px; -webkit-overflow-scrolling: touch; }
.markdown-body table { min-width: 100%; border-collapse: collapse; color: #c4cbc6; font-size: 11px; }
.markdown-body th, .markdown-body td { border: 1px solid rgba(238,232,217,.1); padding: 7px 8px; text-align: left; white-space: nowrap; }
.markdown-body th { background: rgba(238,232,217,.045); color: #ddd8cb; font-weight: 700; }
.markdown-task-item { display: flex; align-items: flex-start; gap: 7px; list-style: none; }
.markdown-check { display: inline-grid; width: 14px; height: 14px; flex: 0 0 14px; place-items: center; margin-top: .18em; border: 1px solid #68736c; border-radius: 3px; color: var(--ink); font-size: 9px; line-height: 1; }
.markdown-check.is-done { border-color: var(--mint); background: var(--mint); }
.markdown-compact > h2, .markdown-compact > h3, .markdown-compact > h4, .markdown-compact > h5 { margin-top: 10px; }

/* Task state changes use the same deliberate bottom-sheet language as workspace routing. */
body.task-confirm-open { position: fixed; inset: 0; width: 100%; overflow: hidden; }
.task-confirm-modal {
  --confirm-accent: var(--signal);
  --confirm-accent-rgb: 245,166,35;
  position: fixed; z-index: 60; inset: 0; display: grid; align-items: end; overflow: hidden;
}
.task-confirm-modal[data-tone="success"] { --confirm-accent: var(--mint); --confirm-accent-rgb: 114,215,173; }
.task-confirm-modal[data-tone="danger"] { --confirm-accent: var(--danger); --confirm-accent-rgb: 255,115,92; }
.task-confirm-backdrop {
  position: absolute; inset: 0; border: 0; background: rgba(2,5,4,.76);
  backdrop-filter: blur(8px) saturate(.78); animation: switcher-fade 180ms ease both;
}
.task-confirm-sheet {
  position: relative; display: grid; width: min(100%, 760px); justify-self: center; overflow: hidden;
  border: 1px solid rgba(238,232,217,.16); border-bottom: 0; border-radius: 26px 7px 0 0;
  padding: 9px 18px max(18px, calc(var(--safe-bottom) + 10px));
  background:
    radial-gradient(circle at 91% -10%, rgba(var(--confirm-accent-rgb),.17), transparent 38%),
    linear-gradient(155deg, #1b231f, #0e1412 58%, #090d0c);
  box-shadow: 0 -28px 84px rgba(0,0,0,.62); animation: task-confirm-rise 250ms cubic-bezier(.2,.8,.2,1) both;
}
.task-confirm-sheet::before {
  position: absolute; top: 0; left: 25px; width: 78px; height: 2px;
  background: linear-gradient(90deg, var(--confirm-accent), rgba(var(--confirm-accent-rgb),0)); content: "";
}
.task-confirm-handle { width: 38px; height: 4px; margin: 0 auto 15px; border-radius: 99px; background: rgba(238,232,217,.2); }
.task-confirm-lead { display: grid; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 13px; }
.task-confirm-mark {
  display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(var(--confirm-accent-rgb),.32);
  border-radius: 14px 4px 14px 4px; background: rgba(var(--confirm-accent-rgb),.095); color: var(--confirm-accent);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 10px 30px rgba(0,0,0,.16);
}
.task-confirm-mark .ui-icon { width: 21px; height: 21px; stroke-width: 2; }
.task-confirm-lead p { margin: 0; color: var(--confirm-accent); font: 760 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .13em; }
.task-confirm-lead h2 { margin: 6px 0 0; color: #eee8db; font-family: "Songti SC", "STSong", serif; font-size: 22px; font-weight: 650; }
.task-confirm-description {
  margin: 16px 0 0; border-top: 1px solid rgba(238,232,217,.075); padding-top: 13px;
  color: #939d97; font-size: 12px; line-height: 1.65;
}
.task-confirm-context {
  display: grid; gap: 5px; margin-top: 13px; border: 1px solid rgba(238,232,217,.09);
  border-radius: 12px 4px 12px 4px; padding: 11px 12px; background: rgba(3,7,6,.28);
}
.task-confirm-context span { color: var(--confirm-accent); font: 700 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .07em; }
.task-confirm-context strong { overflow: hidden; color: #d8d5ca; font-size: 13px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.task-confirm-actions { display: grid; grid-template-columns: 1fr 1.16fr; gap: 8px; margin-top: 15px; }
.task-confirm-actions button {
  min-height: 50px; border: 1px solid rgba(238,232,217,.11); border-radius: 12px 4px 12px 4px;
  background: rgba(238,232,217,.035); color: #9ba49f; font-size: 12px; font-weight: 700;
  transition: transform 110ms ease, background 130ms ease, border-color 130ms ease;
}
.task-confirm-actions button:active { transform: scale(.965); background: rgba(238,232,217,.075); }
.task-confirm-actions #taskConfirmProceed {
  border-color: rgba(var(--confirm-accent-rgb),.34); background: rgba(var(--confirm-accent-rgb),.12);
  color: var(--confirm-accent); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.task-confirm-actions #taskConfirmProceed:active { background: rgba(var(--confirm-accent-rgb),.21); }

/* Tapping an attention task opens a compact handling surface; the list itself stays concise. */
body.needs-action-open { position: fixed; inset: 0; width: 100%; overflow: hidden; }
.needs-action-modal {
  position: fixed; z-index: 55; inset: 0; display: grid; align-items: end; overflow: hidden;
}
.needs-action-backdrop {
  position: absolute; inset: 0; border: 0; background: rgba(2,5,4,.74);
  backdrop-filter: blur(8px) saturate(.8); animation: switcher-fade 180ms ease both;
}
.needs-action-sheet {
  position: relative; display: grid; width: min(100%, 760px); justify-self: center; overflow: hidden;
  border: 1px solid rgba(238,232,217,.16); border-bottom: 0; border-radius: 26px 7px 0 0;
  padding: 9px 18px max(18px, calc(var(--safe-bottom) + 10px));
  background:
    radial-gradient(circle at 90% -8%, rgba(120,157,241,.2), transparent 39%),
    radial-gradient(circle at 2% 86%, rgba(114,215,173,.06), transparent 29%),
    linear-gradient(155deg, #1b231f, #0e1412 58%, #090d0c);
  box-shadow: 0 -28px 84px rgba(0,0,0,.62); animation: needs-action-rise 250ms cubic-bezier(.2,.8,.2,1) both;
}
.needs-action-sheet::before {
  position: absolute; top: 0; left: 25px; width: 78px; height: 2px;
  background: linear-gradient(90deg, #789df1, rgba(120,157,241,0)); content: "";
}
.needs-action-handle { width: 38px; height: 4px; margin: 0 auto 10px; border-radius: 99px; background: rgba(238,232,217,.2); }
.needs-action-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.needs-action-head p { margin: 0; color: #86a8f2; font: 760 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .13em; }
.needs-action-head h2 { margin: 6px 0 0; color: #eee8db; font-family: "Songti SC", "STSong", serif; font-size: 22px; font-weight: 650; }
.needs-action-head > button {
  display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center;
  border: 1px solid rgba(238,232,217,.14); border-radius: 50%; background: rgba(238,232,217,.045); color: #929b96;
}
.needs-action-head > button .ui-icon { width: 15px; height: 15px; }
.needs-action-summary {
  display: -webkit-box; overflow: hidden; margin: 15px 0 0; border-top: 1px solid rgba(238,232,217,.075);
  padding-top: 13px; color: #a3aca7; font-size: 12px; line-height: 1.65;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
.needs-action-context {
  display: grid; gap: 5px; margin-top: 13px; border: 1px solid rgba(120,157,241,.16);
  border-radius: 12px 4px 12px 4px; padding: 11px 12px; background: rgba(3,7,6,.29);
}
.needs-action-context span { color: #86a8f2; font: 700 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .07em; }
.needs-action-context strong { overflow: hidden; color: #d8d5ca; font-size: 13px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.needs-action-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 15px; }
.needs-action-actions button {
  min-height: 50px; border: 1px solid rgba(238,232,217,.11); border-radius: 12px 4px 12px 4px;
  background: rgba(238,232,217,.035); color: #aeb5b1; font-size: 12px; font-weight: 720;
  transition: transform 110ms ease, background 130ms ease, border-color 130ms ease, opacity 130ms ease;
}
.needs-action-actions button:active { transform: scale(.965); }
.needs-action-actions button:disabled { opacity: .46; }
.needs-action-actions .is-primary {
  display: grid; grid-column: 1 / -1; min-height: 60px; align-content: center; gap: 4px;
  border-color: rgba(120,157,241,.34); background: linear-gradient(100deg, rgba(120,157,241,.17), rgba(120,157,241,.08));
  color: #a8c1f4; text-align: left; padding: 10px 14px;
}
.needs-action-actions .is-primary span { font-size: 14px; }
.needs-action-actions .is-primary small { color: #7e8eac; font-size: 10px; font-weight: 560; }
.needs-action-actions .is-done { border-color: rgba(114,215,173,.24); color: #89d8b7; }
.needs-action-actions .is-done[data-needs-action-close],
.needs-action-actions .is-danger { grid-column: 1 / -1; }
.needs-action-actions .is-danger { border-color: rgba(255,115,92,.24); color: #e99182; }

/* The workspace chooser is product UI, not an iOS-native select popover. */
body.project-picker-open { position: fixed; inset: 0; width: 100%; overflow: hidden; }
.project-picker-modal {
  position: fixed; z-index: 45; inset: 0; display: grid; align-items: end; overflow: hidden;
}
.project-picker-backdrop {
  position: absolute; inset: 0; border: 0; background: rgba(2,5,4,.72);
  backdrop-filter: blur(7px) saturate(.8); animation: switcher-fade 180ms ease both;
}
.project-picker-sheet {
  position: relative; display: grid; width: min(100%, 760px); max-height: min(80dvh, 670px);
  grid-template-rows: auto auto auto minmax(0,1fr) auto; justify-self: center; overflow: hidden;
  border: 1px solid rgba(238,232,217,.15); border-bottom: 0; border-radius: 26px 7px 0 0;
  padding: 9px 0 max(10px, var(--safe-bottom)); background:
    radial-gradient(circle at 88% -6%, rgba(245,166,35,.16), transparent 35%),
    radial-gradient(circle at 4% 78%, rgba(114,215,173,.055), transparent 27%),
    linear-gradient(155deg, #1b231f, #0e1412 56%, #090d0c);
  box-shadow: 0 -26px 80px rgba(0,0,0,.58); animation: project-picker-rise 260ms cubic-bezier(.2,.8,.2,1) both;
}
.project-picker-sheet::before {
  position: absolute; top: 0; left: 24px; width: 72px; height: 2px;
  background: linear-gradient(90deg, var(--signal), rgba(245,166,35,0)); content: "";
}
.project-picker-handle { width: 38px; height: 4px; margin: 0 auto 9px; border-radius: 99px; background: rgba(238,232,217,.2); }
.project-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 18px 9px; }
.project-picker-head p { margin: 0; color: #d79a34; font: 760 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .12em; }
.project-picker-head h2 { margin: 6px 0 0; color: #eee8db; font-family: "Songti SC", "STSong", serif; font-size: 21px; font-weight: 650; }
.project-picker-head > button {
  display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center;
  border: 1px solid rgba(238,232,217,.14); border-radius: 50%; background: rgba(238,232,217,.045); color: #929b96;
}
.project-picker-head > button:active { transform: scale(.9); background: rgba(238,232,217,.1); }
.project-picker-head > button .ui-icon { width: 14px; height: 14px; }
.project-picker-description {
  margin: 0; border-top: 1px solid rgba(238,232,217,.07); border-bottom: 1px solid rgba(238,232,217,.07);
  padding: 11px 18px; background: rgba(3,7,6,.2); color: var(--text-muted); font-size: 12px; line-height: 1.6;
}
.project-picker-list {
  display: grid; align-content: start; gap: 8px; overflow-x: hidden; overflow-y: auto; min-height: 190px;
  padding: 13px 14px 16px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.project-picker-group-label {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 1px 4px 0;
}
.project-picker-group-label:not(:first-child) { margin-top: 8px; padding-top: 13px; border-top: 1px solid rgba(238,232,217,.07); }
.project-picker-group-label span { color: #a0aaa4; font-size: 11px; font-weight: 760; letter-spacing: .07em; }
.project-picker-group-label small { color: var(--text-faint); font: 11px/1.2 "SF Mono", Menlo, monospace; }
.project-picker-option {
  position: relative; display: grid; width: 100%; min-height: 70px; grid-template-columns: 42px minmax(0,1fr) 28px;
  align-items: center; gap: 11px; overflow: hidden; border: 1px solid rgba(238,232,217,.1);
  border-radius: 13px 4px 13px 4px; padding: 10px; background: rgba(238,232,217,.025); color: inherit; text-align: left;
  transition: transform 110ms ease, border-color 160ms ease, background 160ms ease;
}
.project-picker-option::before {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: transparent; content: "";
}
.project-picker-option:active { transform: scale(.982); border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.075); }
.project-picker-option.is-selected {
  border-color: rgba(245,166,35,.38); background: linear-gradient(105deg, rgba(245,166,35,.12), rgba(245,166,35,.035) 70%);
  box-shadow: inset 0 0 0 1px rgba(245,166,35,.035);
}
.project-picker-option.is-pinned:not(.is-selected) {
  border-color: rgba(245,166,35,.2); background: linear-gradient(105deg, rgba(245,166,35,.07), rgba(245,166,35,.015) 72%);
}
.project-picker-option.is-pinned::before { background: rgba(245,166,35,.72); }
.project-picker-option.is-selected::before { background: var(--signal); box-shadow: 0 0 14px rgba(245,166,35,.28); }
.project-choice-mark {
  position: relative; display: grid; width: 42px; height: 42px; place-items: center;
  border: 1px solid rgba(238,232,217,.13); border-radius: 12px 4px 12px 4px;
  background: rgba(238,232,217,.035); color: #748078;
}
.project-choice-mark .ui-icon { width: 20px; height: 20px; }
.project-picker-option.is-isolated .project-choice-mark {
  border-color: rgba(245,166,35,.29); background: rgba(245,166,35,.08); color: var(--signal);
}
.project-picker-option.is-pinned .project-choice-mark {
  border-color: rgba(245,166,35,.27); background: rgba(245,166,35,.075); color: #d7a64f;
}
.project-picker-option.is-isolated .project-choice-mark::after {
  position: absolute; right: 4px; bottom: 4px; display: grid; width: 12px; height: 12px; place-items: center;
  border: 1px solid #101512; border-radius: 50%; background: var(--mint); color: #0c1712;
  content: "+"; font: 800 10px/1 "SF Mono", Menlo, monospace;
}
.project-choice-copy { display: block; min-width: 0; }
.project-choice-title { display: flex; min-width: 0; align-items: center; gap: 7px; }
.project-choice-title strong { overflow: hidden; color: #d8ddd8; font-size: 12px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.project-choice-title em {
  flex: 0 0 auto; border: 1px solid rgba(114,215,173,.21); border-radius: 99px; padding: 3px 5px;
  background: rgba(114,215,173,.055); color: #96cbb3; font: normal 700 11px/1 "SF Mono", Menlo, monospace;
}
.project-choice-title em.is-pinned {
  border-color: rgba(245,166,35,.28); background: rgba(245,166,35,.08); color: #d7a64f;
}
.project-choice-copy > small { display: block; overflow: hidden; margin-top: 6px; color: var(--text-faint); font: 11px/1.4 "SF Mono", Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.project-choice-check {
  display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(238,232,217,.11);
  border-radius: 50%; color: transparent; opacity: .58;
}
.project-choice-check .ui-icon { width: 13px; height: 13px; stroke-width: 2.4; }
.project-picker-option.is-selected .project-choice-check {
  border-color: var(--signal); background: var(--signal); color: #17130b; opacity: 1;
  box-shadow: 0 0 16px rgba(245,166,35,.2);
}
.project-picker-empty { margin: 2px 3px 0; color: var(--text-faint); font-size: 11px; line-height: 1.6; }
.project-picker-safety {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 14px;
  border-top: 1px solid rgba(238,232,217,.075); padding: 12px 4px 5px; background: #090d0c;
  box-shadow: 0 -12px 22px rgba(9,13,12,.96);
}
.project-picker-safety > i {
  width: 8px; height: 8px; flex: 0 0 8px; border-radius: 2px; background: var(--mint);
  box-shadow: 0 0 12px rgba(114,215,173,.38); transform: rotate(45deg);
}
.project-picker-safety span { display: block; min-width: 0; }
.project-picker-safety strong, .project-picker-safety small { display: block; }
.project-picker-safety strong { color: #acd0bf; font-size: 11px; font-weight: 720; }
.project-picker-safety small { margin-top: 3px; color: var(--text-faint); font-size: 11px; line-height: 1.4; }

/* Conversation reading room: a full-screen, resumable original session. */
body.conversation-open { position: fixed; inset: 0; width: 100%; height: 100dvh; overflow: hidden; }
.conversation-view {
  position: fixed; z-index: 30; inset: 0; display: grid; grid-template-rows: auto auto minmax(0,1fr) auto;
  width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; background:
    radial-gradient(circle at 100% 0, rgba(120,157,241,.13), transparent 32%),
    radial-gradient(circle at 0 90%, rgba(114,215,173,.07), transparent 28%),
    linear-gradient(155deg, #121816 0%, #0b0f0e 52%, #080b0a 100%);
  color: var(--paper); animation: conversation-enter 260ms cubic-bezier(.2,.8,.2,1) both;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
  isolation: isolate; -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.conversation-view.is-swiping { transition: none; }
/* 三行，每样东西各拿满整宽：上行返回与操作，中行标题，末行项目与路径。
   引擎徽标、思考深度和关注三个控件本就占满一行，标题和路径再挤进去
   只剩一条窄缝——谁都读不清。 */
.conversation-header {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 44px minmax(0,1fr); grid-template-rows: auto auto auto;
  align-items: center; gap: 5px 12px; min-height: calc(var(--safe-top) + 118px);
  border-bottom: 1px solid rgba(238,232,217,.1); padding: calc(var(--safe-top) + 12px) 17px 12px;
  background: #0c110f;
}
.conversation-back {
  display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(238,232,217,.24);
  border-radius: 50%; background: rgba(238,232,217,.075); color: #e2ded3;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 6px 18px rgba(0,0,0,.16);
}
.conversation-back:active { transform: scale(.91); border-color: rgba(120,157,241,.35); color: #a8c0f7; }
.conversation-back .ui-icon { width: 18px; height: 18px; }
.conversation-meta {
  display: flex; min-width: 0; align-items: baseline; gap: 8px;
  grid-column: 1 / -1; grid-row: 3; margin: 0;
}
.conversation-meta > #conversationProject {
  flex: 0 1 auto; overflow: hidden; color: #8fa9de; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase;
}
/* 路径先让位：项目名短且固定，路径长且可以从中间截。 */
.conversation-meta > #conversationPath {
  min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--text-faint);
  font-family: "SF Mono", Menlo, monospace; font-size: 11px; line-height: 1.35;
  text-overflow: ellipsis; white-space: nowrap;
}
.conversation-meta > #conversationPath::before { margin-right: 8px; content: "·"; }
.conversation-heading {
  display: flex; min-width: 0; align-items: center; gap: 7px;
  grid-column: 1 / -1; grid-row: 2;
  margin: 0 -8px; border: 1px solid transparent; border-radius: 10px 3px 10px 3px;
  padding: 4px 8px; background: transparent; color: inherit; text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 110ms ease;
}
.conversation-heading:active, .conversation-heading[aria-expanded="true"] {
  border-color: rgba(120,157,241,.18); background: rgba(120,157,241,.07);
}
.conversation-heading:active { transform: scale(.98); }
.conversation-heading .ui-icon { width: 13px; height: 13px; flex: 0 0 13px; color: #789df1; transition: transform 180ms ease; }
.conversation-heading[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
.conversation-heading h1 {
  overflow: hidden; min-width: 0; margin: 0; color: #ede7da;
  font-family: "Songti SC", "STSong", serif; font-size: 18px; font-weight: 650;
  line-height: 1.25; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap;
}
.conversation-header-actions {
  display: flex; min-width: 0; align-items: center; justify-self: end; gap: 6px;
}
.conversation-engine {
  border: 1px solid rgba(120,157,241,.25); border-radius: 99px; padding: 6px 8px;
  color: #acc4f7; font: 650 11px/1 "SF Mono", Menlo, monospace; white-space: nowrap;
}
.conversation-view.engine-claude .conversation-engine { border-color: rgba(245,166,35,.27); color: #e0b667; }
.conversation-view[data-live-state="working"] .conversation-engine {
  display: inline-flex; align-items: center; gap: 6px; padding-left: 7px;
  border-color: rgba(114,215,173,.32); background: rgba(114,215,173,.055); color: #a6d9c2;
}
.conversation-view[data-live-state="working"] .conversation-engine::before {
  box-sizing: border-box; width: 10px; height: 10px; flex: 0 0 10px;
  border: 1.5px solid rgba(114,215,173,.24); border-top-color: var(--mint); border-radius: 50%;
  content: ""; animation: conversation-working-spin 780ms linear infinite;
}
.conversation-view.engine-claude[data-live-state="working"] .conversation-engine {
  border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.055); color: #e0b667;
}
.conversation-view.engine-claude[data-live-state="working"] .conversation-engine::before {
  border-color: rgba(245,166,35,.22); border-top-color: var(--signal);
}
/* 思考深度：头部的胶囊只报「现在多深」，点开才是改档位的抽屉。 */
.conversation-effort {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  border: 1px solid rgba(238,232,217,.13); border-radius: 99px; padding: 6px 9px 6px 7px;
  background: rgba(238,232,217,.035); color: #a4aeb6;
  font: 650 11px/1 "SF Mono", Menlo, monospace; white-space: nowrap;
  transition: transform 110ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.conversation-effort .ui-icon { width: 13px; height: 13px; stroke-width: 2.1; }
.conversation-effort:active { transform: scale(.93); }
.conversation-effort[aria-expanded="true"] {
  border-color: rgba(120,157,241,.36); background: rgba(120,157,241,.11); color: #becdf0;
}
/* 主人改过、但那一轮还没跑起来：虚线边框 + 慢呼吸，明确区分「已定」与「已生效」。 */
.conversation-effort.is-pending {
  border-style: dashed; border-color: rgba(245,166,35,.4);
  background: rgba(245,166,35,.07); color: #dcb069;
  animation: effort-pending-pulse 2.4s ease-in-out infinite;
}
@keyframes effort-pending-pulse { 50% { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .conversation-effort.is-pending { animation: none; } }

.effort-sheet { position: absolute; z-index: 41; inset: 0; display: grid; align-items: end; overflow: hidden; }
.effort-sheet-panel {
  position: relative; display: grid; max-height: min(80dvh, 700px);
  grid-template-rows: auto auto auto minmax(0,1fr); overflow: hidden;
  border: 1px solid rgba(238,232,217,.14); border-bottom: 0; border-radius: 24px 7px 0 0;
  padding: 9px 0 max(9px, var(--safe-bottom));
  background:
    radial-gradient(circle at 100% 0, rgba(120,157,241,.14), transparent 34%),
    linear-gradient(155deg, #18201d, #0d1211 58%, #0a0e0d);
  box-shadow: 0 -24px 70px rgba(0,0,0,.48);
  animation: switcher-rise 240ms cubic-bezier(.2,.8,.2,1) both;
}
.effort-sheet-note {
  margin: 0; border-top: 1px solid rgba(238,232,217,.075);
  border-bottom: 1px solid rgba(238,232,217,.075); padding: 10px 18px;
  background: rgba(3,7,7,.24); color: var(--text-faint); font-size: 11px; line-height: 1.5;
}
.effort-sheet-levels {
  display: grid; gap: 7px; overflow-y: auto; padding: 13px 17px 4px;
  -webkit-overflow-scrolling: touch;
}
.effort-level {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  border: 1px solid rgba(238,232,217,.1); border-radius: 13px 4px 13px 4px;
  padding: 12px 13px; background: rgba(238,232,217,.025); color: #a0aaa4; text-align: left;
  transition: transform 110ms ease, border-color 150ms ease, background 150ms ease;
}
.effort-level:active { transform: scale(.985); }
/* 档位名是引擎原文，用等宽字体和引擎徽标保持同一套视觉语言。 */
.effort-level strong {
  color: #d5dcd8; font: 650 13px/1 "SF Mono", Menlo, monospace; letter-spacing: .02em;
}
.effort-level small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11px; line-height: 1.4; }
.effort-level-bars { display: flex; align-items: flex-end; gap: 2px; width: 22px; height: 20px; }
.effort-level-bars i {
  flex: 1; border-radius: 1.5px; background: rgba(238,232,217,.14);
}
.effort-level.is-current {
  border-color: rgba(120,157,241,.36); background: rgba(120,157,241,.1);
}
.effort-level.is-current strong { color: #cdd9f5; }
.effort-level.is-current .effort-level-bars i.is-on { background: #8fb0f2; }
.effort-level .effort-level-bars i.is-on { background: rgba(238,232,217,.42); }
.effort-level-mark { color: #8fb0f2; font-size: 11px; font-weight: 700; }
/* 主人点了、但这条链路跑不了的那一档：认得出是他选的，又不冒充当前档。 */
.effort-level.is-chosen { border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.05); }
.effort-level-mark.is-muted { color: #c09a55; font-weight: 650; }
.effort-level[disabled] { opacity: .5; }

.conversation-follow-toggle {
  display: grid; width: 42px; height: 42px; flex: 0 0 42px; grid-template-rows: 17px auto;
  place-content: center; place-items: center; gap: 2px; border: 1px solid rgba(238,232,217,.13);
  border-radius: 12px 4px 12px 4px; padding: 3px 0 2px; background: rgba(238,232,217,.035);
  color: #838d87; font-size: 9px; font-weight: 720; line-height: 1;
  transition: transform 110ms ease, border-color 150ms ease, background 150ms ease, color 150ms ease;
}
.conversation-follow-toggle .ui-icon { width: 16px; height: 16px; fill: none; }
.conversation-follow-toggle:active { transform: scale(.92); }
.conversation-follow-toggle.is-active {
  border-color: rgba(245,166,35,.38); background: linear-gradient(145deg, rgba(245,166,35,.18), rgba(245,166,35,.055));
  color: #e0b667; box-shadow: inset 0 1px rgba(255,255,255,.035), 0 0 18px rgba(245,166,35,.06);
}
.conversation-follow-toggle.is-active .ui-icon { fill: rgba(245,166,35,.2); }
.conversation-follow-toggle.is-unavailable { opacity: .42; }
.conversation-scroll {
  position: relative; z-index: 1; overflow-x: hidden; overflow-y: auto; min-height: 0;
  padding: 20px max(15px, calc((100vw - 760px) / 2 + 18px)) 30px;
  overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
}
.conversation-intro {
  display: grid; grid-template-columns: 52px 1fr; gap: 14px; max-width: 760px; margin: 0 auto 18px;
  border: 1px solid rgba(238,232,217,.11); border-radius: 17px 5px 17px 5px; padding: 17px;
  background: linear-gradient(135deg, rgba(29,37,34,.9), rgba(15,21,19,.68));
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
}
.conversation-intro-mark {
  display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(120,157,241,.32);
  border-radius: 15px 4px 15px 4px; background: rgba(120,157,241,.08); color: #a8c0f7;
  font: 750 17px/1 "SF Mono", Menlo, monospace;
}
.engine-claude .conversation-intro-mark { border-color: rgba(245,166,35,.34); background: rgba(245,166,35,.08); color: var(--signal); }
.conversation-intro div { min-width: 0; }
.conversation-intro p { margin: 1px 0 0; color: var(--text-faint); font: 750 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .1em; }
.conversation-intro strong { display: block; overflow: hidden; margin-top: 8px; color: #dfd9cc; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-intro div > span { display: block; margin-top: 6px; color: var(--text-muted); font-size: 12px; line-height: 1.55; }
.conversation-latest-prompt {
  position: relative; z-index: 2; width: min(calc(100% - 30px), 760px); max-height: min(42dvh, 360px);
  overflow-x: hidden; overflow-y: auto; margin: 10px auto; border: 1px solid rgba(245,166,35,.17);
  border-radius: 5px 15px 5px 15px; background: linear-gradient(110deg, rgba(54,42,20,.54), rgba(20,24,20,.72));
  box-shadow: inset 3px 0 rgba(245,166,35,.42), 0 10px 28px rgba(0,0,0,.1);
  overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
}
.conversation-latest-prompt[hidden] { display: none; }
.conversation-latest-prompt > button {
  display: block; width: 100%; border: 0; padding: 12px 14px 13px; background: transparent;
  color: inherit; text-align: left; -webkit-tap-highlight-color: transparent;
}
.conversation-latest-prompt > button:not(:disabled):active { background: rgba(245,166,35,.045); }
.conversation-latest-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conversation-latest-prompt.is-expanded .conversation-latest-prompt-head {
  position: sticky; z-index: 1; top: -12px; margin: -12px -14px 0; padding: 12px 14px 8px;
  background: linear-gradient(110deg, #302817, #171b17);
}
#conversationLatestPromptLabel {
  color: #ca9e54; font: 740 10px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .1em;
}
.conversation-latest-prompt-action {
  display: inline-flex; align-items: center; gap: 4px; color: #b99351; font-size: 10px; font-weight: 680;
}
.conversation-latest-prompt-action[hidden] { display: none; }
.conversation-latest-prompt-action .ui-icon { width: 12px; height: 12px; transition: transform 180ms ease; }
.conversation-latest-prompt.is-expanded .conversation-latest-prompt-action .ui-icon { transform: rotate(180deg); }
.conversation-latest-prompt-copy {
  display: block; overflow-wrap: anywhere; margin-top: 8px; color: #ddd6c7; font-size: 13px;
  line-height: 1.58; white-space: pre-wrap;
}
.conversation-latest-prompt.is-collapsible:not(.is-expanded) .conversation-latest-prompt-copy {
  display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
}
.conversation-live {
  position: relative; overflow: hidden; max-width: 760px; margin: -5px auto 18px;
  border: 1px solid rgba(114,215,173,.16); border-radius: 5px 15px 5px 15px;
  padding: 13px 14px 12px; background: linear-gradient(100deg, rgba(22,48,38,.74), rgba(15,25,21,.78));
  box-shadow: inset 3px 0 rgba(114,215,173,.5);
}
.conversation-live::after {
  position: absolute; top: 0; right: -12%; width: 44%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(114,215,173,.6), transparent); content: "";
}
.conversation-live-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.conversation-live-state { display: inline-flex; align-items: center; gap: 8px; color: #91d1b3; font-size: 11px; letter-spacing: .03em; }
.conversation-live-state i { width: 7px; height: 7px; border-radius: 50%; background: #6d7972; box-shadow: 0 0 0 4px rgba(109,121,114,.06); }
.conversation-view[data-live-state="working"] .conversation-live-state i { background: var(--mint); box-shadow: 0 0 0 4px rgba(114,215,173,.08), 0 0 12px rgba(114,215,173,.55); animation: live-breathe 1.8s ease-in-out infinite; }
.conversation-live-state b { font-weight: 780; }
.conversation-live time { color: var(--text-faint); font: 11px/1.2 "SF Mono", Menlo, monospace; }
.conversation-live > p { margin: 9px 0 0; color: #c7d4cd; font-size: 13px; line-height: 1.58; }
.conversation-live-sync { display: block; margin-top: 7px; color: #63726a; font-size: 11px; }
.conversation-view[data-live-state="needs-you"] .conversation-live,
.conversation-view[data-live-state="failed"] .conversation-live { border-color: rgba(255,115,92,.2); background: linear-gradient(100deg, rgba(58,30,26,.64), rgba(24,20,18,.78)); box-shadow: inset 3px 0 rgba(255,115,92,.58); }
.conversation-view[data-live-state="needs-you"] .conversation-live-state,
.conversation-view[data-live-state="failed"] .conversation-live-state { color: #e4a69b; }
.conversation-view[data-live-state="needs-you"] .conversation-live-state i,
.conversation-view[data-live-state="failed"] .conversation-live-state i { background: var(--danger); box-shadow: 0 0 0 4px rgba(255,115,92,.08), 0 0 12px rgba(255,115,92,.45); }
.conversation-view[data-live-state="done"] .conversation-live,
.conversation-view[data-live-state="cancelled"] .conversation-live { opacity: .84; }
.load-earlier {
  display: grid; width: min(100%, 440px); min-height: 49px; margin: 0 auto 18px; place-items: center;
  border: 1px solid rgba(120,157,241,.18); border-radius: 12px 4px 12px 4px;
  background: rgba(120,157,241,.045); color: #a8b9de;
}
.load-earlier span { font-size: 11px; font-weight: 680; }
.load-earlier small { margin-top: -5px; color: var(--text-faint); font-size: 11px; }
.load-earlier:disabled { opacity: .48; }
.conversation-loading { display: grid; grid-template-columns: repeat(3,6px); justify-content: center; gap: 6px; padding: 36px 0; color: var(--text-faint); }
.conversation-loading span { width: 6px; height: 6px; border-radius: 50%; background: #789df1; animation: loading-dot 1.1s ease-in-out infinite; }
.conversation-loading span:nth-child(2) { animation-delay: 120ms; }
.conversation-loading span:nth-child(3) { animation-delay: 240ms; }
.conversation-loading p { grid-column: 1 / -1; margin: 9px -100px 0; font-size: 11px; text-align: center; }
.conversation-messages { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; padding: 0; list-style: none; }
.conversation-interactions {
  display: grid; max-width: 760px; gap: 10px; margin: 18px auto 0;
  border-top: 1px solid rgba(245,166,35,.14); padding-top: 15px;
}
.conversation-interactions[hidden] { display: none; }
.conversation-interactions > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 2px 1px; }
.conversation-interactions > header span { color: var(--signal); font: 740 9px/1.2 "SF Mono",Menlo,monospace; letter-spacing: .12em; }
.conversation-interactions > header strong { color: #d9d4c8; font-size: 12px; font-weight: 680; }
.conversation-interactions .interaction-card { width: 100%; }

/* 排队消息：还没轮到的那几条。视觉上比真实消息轻一档——它们还没被 AI 看见。 */
.conversation-queue {
  display: grid; max-width: 760px; gap: 8px; margin: 16px auto 0;
  border-top: 1px dashed rgba(238,232,217,.16); padding-top: 14px;
}
.conversation-queue[hidden] { display: none; }
.conversation-queue > header {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 0 2px;
}
.conversation-queue > header span {
  color: #7f8b93; font: 740 9px/1.2 "SF Mono",Menlo,monospace; letter-spacing: .12em;
}
.conversation-queue > header strong { color: #d9d4c8; font-size: 12px; font-weight: 680; }
.conversation-queue > header small { flex: 1 0 100%; color: var(--text-faint); font-size: 11px; }
.queued-message {
  display: grid; grid-template-columns: 20px 1fr auto; align-items: start; gap: 10px;
  border: 1px dashed rgba(238,232,217,.16); border-radius: 12px;
  padding: 10px 11px; background: rgba(25,33,30,.5);
}
.queued-message.state-failed { border-color: rgba(214,106,84,.42); background: rgba(48,28,24,.5); }
.queued-message-position {
  min-width: 20px; height: 20px; border-radius: 999px; background: rgba(238,232,217,.09);
  color: #9aa7ae; font: 680 10px/20px "SF Mono",Menlo,monospace; text-align: center;
}
.queued-message p {
  margin: 0; color: #cdd4d0; font-size: 13px; line-height: 1.45;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.queued-message small { display: block; margin-top: 4px; color: var(--text-faint); font-size: 11px; }
.queued-message.state-failed small { color: #e0947f; }
.queued-message-cancel, .queued-message-clear {
  border: 1px solid rgba(238,232,217,.16); border-radius: 999px; padding: 5px 11px;
  background: transparent; color: #9aa7ae; font-size: 11px; font-weight: 620;
}
.queued-message-cancel:disabled { opacity: .45; }
.queued-message-clear { justify-self: end; margin-top: 2px; }
/* 排队时发送键换成中性色：按下去不是「现在就跑」，而是「排到后面」。 */
.conversation-composer.is-queueing .conversation-send-button {
  background: rgba(238,232,217,.18); color: #e4e0d6;
}
.conversation-message { display: flex; min-width: 0; animation: message-enter 230ms ease both; }
.conversation-message.is-refresh-update { animation: none; }
.conversation-message > article { width: min(90%, 660px); border: 1px solid rgba(238,232,217,.1); border-radius: 4px 15px 15px 15px; padding: 13px 14px; background: rgba(25,33,30,.78); box-shadow: 0 9px 28px rgba(0,0,0,.12); }
.conversation-message.role-user { justify-content: flex-end; }
.conversation-message.role-user > article { width: min(86%, 610px); border-color: rgba(245,166,35,.18); border-radius: 15px 4px 15px 15px; background: linear-gradient(135deg, rgba(73,51,18,.65), rgba(42,34,21,.72)); }
.conversation-message.is-pending > article { border-style: dashed; opacity: .76; }
.conversation-message.is-pending time { color: #b7914f; }
.conversation-message.is-sent time { color: #77a98f; }
.conversation-message article > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.conversation-message article > div:first-child strong { color: #9bbafa; font-size: 11px; font-weight: 780; letter-spacing: .05em; }
.engine-claude .conversation-message.role-assistant article > div:first-child strong { color: #d7ae61; }
.conversation-message.role-user article > div:first-child strong { color: var(--signal); }
.conversation-message time { color: var(--text-faint); font-family: "SF Mono", Menlo, monospace; font-size: 11px; }
.conversation-message article > .markdown-body { color: #d1d7d2; font-size: 14px; line-height: 1.75; }
.conversation-message.role-user article > .markdown-body { color: #e1dacb; }
.conversation-message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.conversation-message-attachment {
  display: grid; min-width: 0; max-width: 100%; grid-template-columns: 25px minmax(0,1fr);
  align-items: center; gap: 7px; border: 1px solid rgba(238,232,217,.12);
  border-radius: 9px 3px 9px 3px; padding: 6px 8px; background: rgba(5,9,8,.22);
}
.conversation-message-attachment > .ui-icon { width: 16px; height: 16px; color: #9ab1e4; }
.conversation-message-attachment.is-image > .ui-icon { color: #d7a957; }
.conversation-message-attachment > span { display: grid; min-width: 0; gap: 2px; }
.conversation-message-attachment strong,
.conversation-message-attachment small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-message-attachment strong { color: #d8d5cb; font-size: 10px; font-weight: 680; }
.conversation-message-attachment small { color: var(--text-faint); font: 9px/1.2 "SF Mono", Menlo, monospace; }
.conversation-message.has-preview > article { width: min(100%, 660px); }
.conversation-running-tasks {
  max-width: 760px; margin: 18px auto 0; border-top: 1px solid rgba(238,232,217,.08);
  padding-top: 10px;
}
.conversation-running-tasks details { border-radius: 12px 4px 12px 4px; }
.conversation-running-tasks summary {
  display: grid; min-height: 48px; grid-template-columns: 30px minmax(0,1fr) auto 16px;
  align-items: center; gap: 8px; border-radius: 12px 4px 12px 4px; padding: 0 11px 0 8px;
  color: #9ebbf4; cursor: pointer; list-style: none; transition: background 160ms ease,color 160ms ease;
}
.conversation-running-tasks summary::-webkit-details-marker { display: none; }
.conversation-running-tasks summary:active { background: rgba(120,157,241,.06); color: #bfd0f4; }
.conversation-running-tasks summary:focus-visible { outline: 2px solid rgba(120,157,241,.55); outline-offset: 2px; }
.conversation-running-mark {
  display: grid; width: 30px; height: 30px; place-items: center; color: var(--signal);
  font-size: 25px; line-height: 1; text-shadow: 0 0 14px rgba(245,166,35,.28);
  animation: conversation-working-spin 2.8s linear infinite;
}
.conversation-running-tasks summary strong { font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.conversation-running-hint { color: var(--text-faint); font-size: 10px; }
.conversation-running-chevron {
  width: 15px; height: 15px; color: #667a9f;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1),color 160ms ease;
}
.conversation-running-tasks details[open] .conversation-running-chevron { transform: rotate(180deg); color: #9ebbf4; }
.conversation-running-list { display: grid; gap: 8px; padding: 2px 8px 10px 46px; }
.conversation-runtime-overview { display: flex; flex-wrap: wrap; gap: 6px; }
.conversation-runtime-overview span {
  border: 1px solid rgba(238,232,217,.09); border-radius: 999px; padding: 4px 8px;
  background: rgba(238,232,217,.025); color: #87938c; font: 600 9px/1.2 "SF Mono",Menlo,monospace;
}
.conversation-runtime-overview .kind-agent { border-color: rgba(120,157,241,.2); color: #a9c0ed; }
.conversation-runtime-overview .kind-workflow { border-color: rgba(114,215,173,.2); color: #9fcbb7; }
.conversation-runtime-overview .kind-shell { border-color: rgba(245,166,35,.2); color: #c9a45f; }
.conversation-running-task {
  overflow: hidden; border: 1px solid rgba(120,157,241,.11); border-radius: 9px 3px 9px 3px;
  padding: 10px 11px; background: linear-gradient(110deg,rgba(34,44,62,.48),rgba(15,21,19,.5));
  box-shadow: inset 2px 0 rgba(245,166,35,.36);
}
.conversation-running-task.kind-agent { box-shadow: inset 2px 0 rgba(120,157,241,.5); }
.conversation-running-task.kind-workflow { box-shadow: inset 2px 0 rgba(114,215,173,.5); }
.conversation-running-task.kind-shell { box-shadow: inset 2px 0 rgba(245,166,35,.5); }
.conversation-running-task.kind-agent .conversation-running-state i { background: #789df1; box-shadow: 0 0 0 3px rgba(120,157,241,.08),0 0 10px rgba(120,157,241,.4); }
.conversation-running-task.kind-workflow .conversation-running-state i { background: var(--mint); box-shadow: 0 0 0 3px rgba(114,215,173,.08),0 0 10px rgba(114,215,173,.4); }
.conversation-running-task > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conversation-running-state { display: inline-flex; align-items: center; gap: 6px; color: #a9c0ed; font-size: 9px; }
.conversation-running-state i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 3px rgba(245,166,35,.08),0 0 10px rgba(245,166,35,.4);
  animation: live-breathe 1.8s ease-in-out infinite;
}
.conversation-running-task time { color: var(--text-faint); font: 9px/1.2 "SF Mono",Menlo,monospace; }
.conversation-running-task > strong {
  display: block; overflow: hidden; margin-top: 7px; color: #d2d7d3; font-size: 11px;
  font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap;
}
.conversation-running-task > p {
  display: -webkit-box; overflow: hidden; margin: 6px 0 0; color: #89958e; font: 9px/1.55 "SF Mono",Menlo,monospace;
  overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
}
.conversation-running-task > small { display: block; margin-top: 6px; color: #59655f; font: 8px/1.2 "SF Mono",Menlo,monospace; }
.conversation-running-task.is-syncing { border-style: dashed; opacity: .72; }
.conversation-running-task.is-syncing > strong { margin-top: 0; }
.conversation-runtime-more { margin: 0; color: #66736c; font-size: 10px; text-align: center; }
.conversation-runtime-activity {
  overflow: hidden; border: 1px solid rgba(238,232,217,.075); border-radius: 9px 3px 9px 3px;
  background: rgba(7,13,11,.45);
}
.conversation-runtime-activity > div {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid rgba(238,232,217,.065); padding: 9px 10px;
}
.conversation-runtime-activity > div strong { color: #a7b0aa; font-size: 10px; letter-spacing: .04em; }
.conversation-runtime-activity > div span { color: #59655f; font: 9px/1.2 "SF Mono",Menlo,monospace; }
.conversation-runtime-activity ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.conversation-runtime-activity li { padding: 9px 10px; }
.conversation-runtime-activity li + li { border-top: 1px solid rgba(238,232,217,.055); }
.conversation-runtime-activity li > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.conversation-runtime-activity li strong { color: #c9a45f; font: 650 9px/1.2 "SF Mono",Menlo,monospace; }
.conversation-runtime-activity li time { color: #59655f; font: 9px/1.2 "SF Mono",Menlo,monospace; }
.conversation-runtime-activity li p {
  display: -webkit-box; overflow: hidden; margin: 5px 0 0; color: #87928c;
  font: 9px/1.55 "SF Mono",Menlo,monospace; overflow-wrap: anywhere;
  -webkit-box-orient: vertical; -webkit-line-clamp: 3;
}
@media (max-width: 430px) {
  .conversation-running-hint { display: none; }
  .conversation-running-tasks summary { grid-template-columns: 30px minmax(0,1fr) 16px; }
  .conversation-running-list { padding-left: 38px; }
}
.conversation-file-preview {
  overflow: hidden; margin-top: 12px; border: 1px solid rgba(238,232,217,.12);
  border-radius: 13px 5px 13px 5px; background: #0d1411; box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.conversation-file-preview-head {
  display: grid; min-height: 50px; grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center; gap: 9px; border-bottom: 1px solid rgba(238,232,217,.09); padding: 6px 6px 6px 9px;
  background: linear-gradient(100deg,rgba(245,166,35,.08),rgba(18,25,21,.94));
}
.conversation-file-preview-mark {
  display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(245,166,35,.2);
  border-radius: 10px 3px 10px 3px; background: rgba(245,166,35,.07); color: #d9ae5c;
  font: 760 8px/1 "SF Mono",Menlo,monospace; letter-spacing: .04em;
}
.conversation-file-preview.is-image .conversation-file-preview-mark { border-color: rgba(120,157,241,.25); background: rgba(120,157,241,.09); color: #a9c0f2; }
.conversation-file-preview.is-video .conversation-file-preview-mark,
.conversation-file-preview.is-audio .conversation-file-preview-mark { border-color: rgba(114,215,173,.23); background: rgba(114,215,173,.08); color: #9ed6bf; }
.conversation-file-preview.is-pdf .conversation-file-preview-mark { border-color: rgba(255,115,92,.22); background: rgba(255,115,92,.08); color: #e2a097; }
.conversation-file-preview.is-word .conversation-file-preview-mark { border-color: rgba(120,157,241,.28); background: rgba(120,157,241,.1); color: #b4c9f3; }
.conversation-file-preview.is-excel .conversation-file-preview-mark { border-color: rgba(114,215,173,.26); background: rgba(114,215,173,.09); color: #a4dcc5; }
.conversation-file-preview.is-powerpoint .conversation-file-preview-mark { border-color: rgba(245,166,35,.28); background: rgba(245,166,35,.1); color: #e6bd70; }
.conversation-file-preview-head > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.conversation-file-preview-head strong { overflow: hidden; color: #d8d4ca; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-file-preview-head small { overflow: hidden; color: #727e77; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-file-preview-head button {
  display: inline-flex; min-height: 44px; align-items: center; gap: 4px; border: 0; border-radius: 10px 3px 10px 3px;
  padding: 0 8px; background: rgba(238,232,217,.035); color: #a69b80; font-size: 9px;
}
.conversation-file-preview-head button:active { transform: scale(.96); background: rgba(245,166,35,.1); color: #e0b563; }
.conversation-file-preview-head button:disabled { opacity: .46; }
.conversation-file-preview-head button .ui-icon { width: 11px; height: 11px; }
.conversation-file-preview-body { min-height: 104px; background: #111814; }
.conversation-file-preview-stage { overflow: hidden; width: 100%; background: #0a100d; }
.conversation-file-preview-stage.is-html > iframe { display: block; width: 100%; height: min(48svh,380px); border: 0; background: #f7f4ec; }
.conversation-file-preview-stage.is-pdf { height: min(48svh,380px); min-height: 190px; }
.conversation-file-preview-stage.is-text { max-height: min(46svh,340px); overflow: auto; background: #f6f2e8; color: #252b27; }
.conversation-file-preview-stage.is-text > pre { min-height: 120px; margin: 0; padding: 16px; color: #26312b; font: 11px/1.68 "SF Mono",Menlo,monospace; overflow-wrap: anywhere; white-space: pre-wrap; }
.conversation-file-preview-stage.is-text > .markdown-body { padding: 16px; color: #252b27; font-size: 13px; line-height: 1.7; }
.conversation-file-preview-stage.is-text > .markdown-body :first-child { margin-top: 0; }
.conversation-file-preview-stage.is-image { display: grid; min-height: 150px; max-height: min(54svh,420px); place-items: center; background: repeating-conic-gradient(#151d19 0 25%,#111713 0 50%) 50% / 18px 18px; }
.conversation-file-preview-stage.is-image[role="button"] { cursor: zoom-in; outline: 0; }
.conversation-file-preview-stage.is-image[role="button"]:focus-visible { box-shadow: inset 0 0 0 2px rgba(120,157,241,.7); }
.conversation-file-preview-stage.is-image > img { display: block; width: 100%; max-height: min(54svh,420px); object-fit: contain; transition: transform 180ms ease,filter 180ms ease; }
.conversation-file-preview-stage.is-image[role="button"]:active > img { transform: scale(.992); filter: brightness(.92); }
.conversation-file-preview-stage.is-video { background: #050706; }
.conversation-file-preview-stage.is-video > video { display: block; width: 100%; max-height: min(52svh,400px); background: #050706; }
.conversation-file-preview-stage.is-audio { padding: 18px 14px; background: radial-gradient(circle at 12% 20%,rgba(114,215,173,.11),transparent 42%),#101713; }
.conversation-file-preview-stage.is-audio > audio { display: block; width: 100%; }
.pdf-canvas-preview {
  position: relative; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain;
  background: #242824; color: #d9d8d1; scrollbar-color: rgba(238,232,217,.24) transparent;
}
.pdf-canvas-preview:focus-visible { outline: 2px solid rgba(120,157,241,.75); outline-offset: -2px; }
.pdf-canvas-preview-summary {
  position: sticky; z-index: 2; top: 0; min-height: 30px; padding: 8px 12px;
  background: rgba(16,21,18,.92); box-shadow: 0 1px rgba(238,232,217,.09); color: #b7beb9;
  font: 650 9px/1.4 "SF Mono",Menlo,monospace; text-align: center; backdrop-filter: blur(14px);
}
.pdf-canvas-preview-pages { display: grid; gap: 12px; width: min(100%,900px); margin: 0 auto; padding: 12px; }
.pdf-canvas-preview-page {
  position: relative; overflow: hidden; width: 100%; background: #fff; color: #5b625e;
  box-shadow: 0 8px 26px rgba(0,0,0,.28);
}
.pdf-canvas-preview-page > canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; background: #fff; }
.pdf-canvas-preview-loading { position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; }
.pdf-canvas-preview-page > small {
  position: absolute; z-index: 1; right: 7px; bottom: 7px; border-radius: 99px; padding: 4px 7px;
  background: rgba(18,23,20,.78); color: #e6e5df; font: 650 8px/1 "SF Mono",Menlo,monospace;
}
.pdf-canvas-preview-page.is-rendered > small { opacity: .62; }
.pdf-canvas-preview-page.is-error { background: #f3ece9; color: #9a5148; }
.pdf-canvas-preview.is-compact .pdf-canvas-preview-pages { gap: 8px; padding: 8px; }
.conversation-file-preview-placeholder { display: grid; min-height: 104px; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 12px; padding: 15px; background: radial-gradient(circle at 9% 15%,rgba(245,166,35,.08),transparent 36%),#111814; }
.conversation-file-preview-placeholder > .transfer-thumb { width: 42px; height: 42px; }
.conversation-file-preview-placeholder > span { display: grid; min-width: 0; gap: 5px; }
.conversation-file-preview-placeholder strong { color: #c5cbc6; font-size: 11px; }
.conversation-file-preview-placeholder small { color: #718079; font-size: 9px; line-height: 1.5; }
.conversation-file-preview.is-waiting { border-style: dashed; }
.conversation-tool { width: 100%; border: 1px solid rgba(114,215,173,.09); border-radius: 9px 3px 9px 3px; background: rgba(8,12,11,.48); }
.conversation-tool summary { display: grid; min-height: 42px; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 0 11px; cursor: pointer; list-style: none; }
.conversation-tool summary::-webkit-details-marker { display: none; }
.conversation-tool summary > span { border: 1px solid rgba(114,215,173,.18); border-radius: 3px; padding: 4px 6px; color: #86bba4; font: 750 11px/1 "SF Mono", Menlo, monospace; }
.conversation-tool summary strong { overflow: hidden; color: #9ba8a1; font-size: 11px; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.conversation-tool > .markdown-body { border-top: 1px solid rgba(238,232,217,.07); padding: 10px 12px; color: #9aa69f; font: 11px/1.65 "SF Mono", Menlo, monospace; }
.conversation-bash-group { animation: message-enter 230ms ease both; }
.conversation-bash-tool-group {
  border-color: rgba(114,215,173,.16);
  background: linear-gradient(100deg, rgba(16,35,28,.66), rgba(8,12,11,.5));
  box-shadow: inset 3px 0 rgba(114,215,173,.28);
}
.conversation-bash-tool-group summary { grid-template-columns: auto minmax(0,1fr) auto 14px; }
.conversation-bash-tool-group summary > span {
  border-color: rgba(114,215,173,.28); background: rgba(114,215,173,.07); color: #9ad0b8;
}
.conversation-bash-tool-group summary strong { color: #b6c5bd; }
.conversation-bash-chevron {
  width: 14px; height: 14px; color: #71877c;
  transition: transform 180ms cubic-bezier(.2,.8,.2,1), color 160ms ease;
}
.conversation-bash-tool-group[open] .conversation-bash-chevron { transform: rotate(180deg); color: var(--mint); }
.conversation-message.is-bash-group-member { margin-left: 10px; }
.conversation-message.is-bash-group-member .conversation-tool { border-left-color: rgba(114,215,173,.2); }
.conversation-new { position: sticky; bottom: 8px; display: block; margin: 14px auto 0; border: 1px solid rgba(120,157,241,.28); border-radius: 99px; padding: 10px 14px; background: rgba(23,32,29,.94); color: #b4c8f2; font-size: 11px; box-shadow: 0 8px 26px rgba(0,0,0,.3); }
.conversation-composer {
  position: relative; z-index: 3; border-top: 1px solid rgba(238,232,217,.1);
  padding: 6px max(12px, calc((100vw - 760px) / 2 + 18px)) max(4px, var(--safe-bottom));
  background: #0c110f; box-shadow: 0 -12px 34px rgba(0,0,0,.2), 0 40px 0 #0c110f;
}
.conversation-context { display: none; }
.conversation-context span { display: flex; align-items: center; gap: 6px; color: #adbee1; font-size: 11px; font-weight: 720; letter-spacing: .03em; }
.conversation-context i { width: 6px; height: 6px; border-radius: 50%; background: #789df1; box-shadow: 0 0 12px rgba(120,157,241,.7); }
.engine-claude .conversation-context i { background: var(--signal); box-shadow: 0 0 12px rgba(245,166,35,.55); }
.conversation-context small { overflow: hidden; color: var(--text-faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-attachment-preview {
  display: flex; max-width: 760px; min-width: 0; min-height: 70px; align-items: center; gap: 8px;
  overflow-x: auto; overflow-y: hidden; margin: 0 auto 7px; padding: 2px 1px 4px;
  overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.conversation-attachment-preview[hidden] { display: none; }
.conversation-attachment-preview::-webkit-scrollbar { display: none; }
.conversation-attachment-item {
  position: relative; display: grid; width: 174px; height: 64px; flex: 0 0 174px;
  grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 9px; overflow: hidden;
  border: 1px solid rgba(238,232,217,.13); border-radius: 13px 4px 13px 4px; padding: 7px 39px 7px 7px;
  background: linear-gradient(120deg, rgba(120,157,241,.09), rgba(9,14,12,.8));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018); scroll-snap-align: start;
}
.conversation-attachment-thumb,
.conversation-attachment-file-mark {
  display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden;
  border-radius: 9px 3px 9px 3px; background: rgba(120,157,241,.1); color: #9eb7ee;
}
.conversation-attachment-thumb { object-fit: cover; }
.conversation-attachment-file-mark {
  font: 800 9px/1 "SF Mono", Menlo, monospace; letter-spacing: .04em; text-transform: uppercase;
}
.conversation-attachment-copy { display: grid; min-width: 0; gap: 4px; }
.conversation-attachment-copy strong,
.conversation-attachment-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-attachment-copy strong { color: #d9d8cf; font-size: 10px; font-weight: 690; }
.conversation-attachment-copy small { color: var(--text-faint); font: 9px/1.2 "SF Mono", Menlo, monospace; }
.conversation-attachment-remove {
  position: absolute; top: 0; right: 0; display: grid; width: 44px; height: 44px; place-items: center;
  border: 0; padding: 0; background: transparent; color: #c9d1cc;
}
.conversation-attachment-remove::before {
  position: absolute; width: 25px; height: 25px; border: 1px solid rgba(238,232,217,.14);
  border-radius: 50%; background: rgba(8,13,11,.88); content: "";
}
.conversation-attachment-remove .ui-icon { position: relative; width: 11px; height: 11px; }
.conversation-attachment-remove:active::before { background: rgba(255,115,92,.28); }
.conversation-attachment-remove:disabled { opacity: .4; }
.conversation-input-shell {
  display: grid; max-width: 760px; grid-template-columns: 46px minmax(0,1fr) 46px;
  align-items: end; gap: 8px; margin: auto;
}
.conversation-attachment-picker { position: relative; width: 46px; height: 46px; }
.conversation-attachment-button,
.conversation-send-button { display: grid; width: 46px; height: 46px; place-items: center; border: 0; }
.conversation-attachment-button {
  border: 1px solid rgba(238,232,217,.13); border-radius: 4px 14px 4px 14px;
  background: rgba(238,232,217,.045); color: #9aa7a0;
}
.conversation-attachment-button[aria-expanded="true"] {
  border-color: rgba(120,157,241,.35); background: rgba(120,157,241,.12); color: #a9bff0;
}
.conversation-attachment-menu {
  position: absolute; z-index: 12; bottom: 56px; left: 0; display: grid;
  width: min(278px, calc(100vw - 24px)); gap: 5px; border: 1px solid rgba(238,232,217,.15);
  border-radius: 17px 5px 17px 5px; padding: 7px;
  background: linear-gradient(145deg, rgba(28,37,33,.99), rgba(10,15,13,.99));
  box-shadow: 0 18px 48px rgba(0,0,0,.48);
}
.conversation-attachment-menu[hidden] { display: none; }
.conversation-attachment-menu > button {
  display: grid; min-height: 56px; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px;
  border: 0; border-radius: 11px 3px 11px 3px; padding: 7px 10px; text-align: left;
  background: rgba(238,232,217,.035); color: #b8c0bb;
}
.conversation-attachment-menu > button:active { background: rgba(120,157,241,.13); transform: scale(.985); }
.conversation-attachment-menu > button > .ui-icon { width: 19px; height: 19px; color: #8ea9e3; }
.conversation-attachment-menu > button span { display: grid; gap: 3px; }
.conversation-attachment-menu > button strong { color: #ddd9cf; font-size: 12px; font-weight: 700; }
.conversation-attachment-menu > button small { color: var(--text-faint); font-size: 10px; }
.conversation-input-shell textarea {
  min-height: 46px; max-height: 132px; resize: none; border: 1px solid rgba(238,232,217,.13);
  border-radius: 13px 4px 13px 4px; padding: 11px 12px; background: rgba(238,232,217,.04);
  color: var(--paper); font-size: 16px; line-height: 1.5;
}
.conversation-input-shell textarea:focus { border-color: rgba(120,157,241,.38); }
.conversation-composer.is-awaiting-interaction .conversation-input-shell textarea {
  border-color: rgba(245,166,35,.14); background: rgba(245,166,35,.025); color: #756d5f;
}
.conversation-send-button { border-radius: 14px 4px 14px 4px; background: #789df1; color: #0c1110; }
.engine-claude .conversation-send-button { background: var(--signal); }
.conversation-attachment-button:active,
.conversation-send-button:active { transform: scale(.93); }
.conversation-attachment-button:disabled,
.conversation-send-button:disabled { opacity: .45; }
.conversation-attachment-button .ui-icon,
.conversation-send-button .ui-icon { width: 18px; height: 18px; stroke-width: 2.2; }
.conversation-composer > p {
  overflow: hidden; max-width: 760px; margin: 0 auto 5px; color: var(--text-faint);
  font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap;
}

.conversation-switcher {
  position: absolute; z-index: 40; inset: 0; display: grid; align-items: end; overflow: hidden;
}
.conversation-switcher-backdrop {
  position: absolute; inset: 0; border: 0; background: rgba(2,5,5,.68); backdrop-filter: blur(5px);
  animation: switcher-fade 180ms ease both;
}
.conversation-switcher-sheet {
  position: relative; display: grid; max-height: min(76dvh, 690px); grid-template-rows: auto auto auto auto minmax(0,1fr);
  overflow: hidden; border: 1px solid rgba(238,232,217,.14); border-bottom: 0;
  border-radius: 24px 7px 0 0; padding: 9px 0 max(5px, var(--safe-bottom));
  background:
    radial-gradient(circle at 100% 0, rgba(120,157,241,.14), transparent 34%),
    linear-gradient(155deg, #18201d, #0d1211 58%, #0a0e0d);
  box-shadow: 0 -24px 70px rgba(0,0,0,.48); animation: switcher-rise 240ms cubic-bezier(.2,.8,.2,1) both;
}
.conversation-switcher-handle { width: 38px; height: 4px; margin: 0 auto 8px; border-radius: 99px; background: rgba(238,232,217,.2); }
.conversation-switcher-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 3px 17px 12px; }
.conversation-switcher-head p { margin: 0; color: #8da8df; font: 760 11px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .1em; }
.conversation-switcher-head h2 { margin: 5px 0 0; color: #eee8db; font-family: "Songti SC", "STSong", serif; font-size: 20px; font-weight: 650; }
.conversation-switcher-head > button {
  display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border: 1px solid rgba(238,232,217,.13);
  border-radius: 50%; background: rgba(238,232,217,.04); color: #89948e;
}
.conversation-switcher-head > button:active { transform: scale(.9); background: rgba(238,232,217,.09); }
.conversation-switcher-head > button .ui-icon { width: 14px; height: 14px; }
.conversation-switcher-projects {
  display: flex; gap: 7px; overflow-x: auto; padding: 1px 17px 11px; scrollbar-width: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.conversation-switcher-projects::-webkit-scrollbar { display: none; }
.conversation-switcher-project-tab {
  display: grid; min-width: max-content; grid-template-columns: 15px auto auto; align-items: center; gap: 6px;
  scroll-snap-align: start; border: 1px solid rgba(238,232,217,.1); border-radius: 10px 3px 10px 3px;
  padding: 9px 10px; background: rgba(238,232,217,.025); color: #a0aaa4; font-size: 11px;
}
.conversation-switcher-project-tab .ui-icon { width: 14px; height: 14px; color: #6f7e87; }
.conversation-switcher-project-tab small {
  display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 99px;
  background: rgba(238,232,217,.06); color: var(--text-faint); font: 650 11px/1 "SF Mono", Menlo, monospace;
}
.conversation-switcher-project-tab.is-active {
  border-color: rgba(120,157,241,.34); background: rgba(120,157,241,.11); color: #becdf0;
  box-shadow: inset 0 0 0 1px rgba(120,157,241,.05);
}
.conversation-switcher-project-tab.is-active .ui-icon { color: #93b2f4; }
.conversation-switcher-project-tab.is-active small { background: rgba(120,157,241,.18); color: #abc1ef; }
.conversation-switcher-project-tab.is-pinned:not(.is-active) {
  border-color: rgba(245,166,35,.22); background: rgba(245,166,35,.055); color: #c19d5d;
}
.conversation-switcher-project-tab.is-pinned:not(.is-active) .ui-icon { color: #d0a44f; }
.conversation-switcher-project-tab.is-pinned:not(.is-active) small { background: rgba(245,166,35,.1); color: #bd9855; }
.conversation-switcher-project {
  display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(238,232,217,.075); border-bottom: 1px solid rgba(238,232,217,.075);
  padding: 10px 18px; background: rgba(3,7,7,.24);
}
.conversation-switcher-project > div { display: grid; min-width: 0; gap: 3px; }
.conversation-switcher-project strong { overflow: hidden; color: #ccd3cf; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.conversation-switcher-project span { overflow: hidden; color: var(--text-faint); font: 11px/1.4 "SF Mono", Menlo, monospace; text-overflow: ellipsis; white-space: nowrap; }
.conversation-switcher-project > small { flex: 0 0 auto; color: #8da7db; font-size: 11px; }
.conversation-switcher-threads {
  display: grid; align-content: start; gap: 7px; overflow-x: hidden; overflow-y: auto; min-height: 110px;
  padding: 11px 14px 14px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.conversation-switcher-thread {
  display: grid; width: 100%; min-height: 67px; grid-template-columns: 32px minmax(0,1fr) auto;
  align-items: center; gap: 10px; border: 1px solid rgba(238,232,217,.085); border-radius: 12px 4px 12px 4px;
  padding: 10px; background: rgba(238,232,217,.025); color: inherit; text-align: left;
}
.conversation-switcher-thread:active { transform: scale(.985); border-color: rgba(120,157,241,.25); background: rgba(120,157,241,.07); }
.conversation-switcher-thread.is-current {
  border-color: rgba(114,215,173,.23); background: linear-gradient(90deg, rgba(114,215,173,.075), rgba(114,215,173,.018));
}
.switcher-thread-mark {
  display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(238,232,217,.12);
  border-radius: 9px 3px 9px 3px; color: #9ca6a0; font: 750 11px/1 "SF Mono", Menlo, monospace;
}
.switcher-thread-mark.engine-codex { border-color: rgba(120,157,241,.27); background: rgba(120,157,241,.07); color: #9cb8f4; }
.switcher-thread-mark.engine-claude { border-color: rgba(245,166,35,.25); background: rgba(245,166,35,.06); color: #dab061; }
.switcher-thread-copy { display: block; min-width: 0; }
.switcher-thread-copy > span { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.switcher-thread-copy small { color: #919c96; font-size: 11px; }
.switcher-thread-copy time { color: var(--text-faint); font: 11px/1 "SF Mono", Menlo, monospace; }
.switcher-thread-copy strong { display: block; overflow: hidden; margin-top: 5px; color: #d4d9d5; font-size: 11px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }
.switcher-thread-copy p {
  overflow: hidden; margin: 4px 0 0; color: var(--text-faint); font-size: 11px; line-height: 1.45;
  text-overflow: ellipsis; white-space: nowrap;
}
.switcher-thread-end { min-width: 34px; color: var(--text-faint); font-size: 11px; text-align: right; }
.switcher-thread-end .ui-icon { width: 13px; height: 13px; }
.conversation-switcher-thread.is-current .switcher-thread-end { color: #76b99c; font-weight: 700; }
.conversation-switcher-empty { margin: 20px 0; color: var(--text-faint); font-size: 11px; text-align: center; }

footer { justify-content: space-between; padding: 26px 4px 0; color: var(--text-faint); font-size: 11px; letter-spacing: 0.06em; }
footer button { min-height: 44px; border: 0; padding: 8px; background: transparent; color: #78817c; font-size: 12px; }

.toast {
  position: fixed;
  z-index: 50;
  right: 18px;
  bottom: calc(var(--safe-bottom) + 20px);
  left: 18px;
  max-width: 500px;
  margin: auto;
  padding: 13px 15px;
  border: 1px solid rgba(255, 115, 92, 0.24);
  border-radius: 10px;
  background: rgba(40, 24, 21, 0.96);
  color: #ffc7bd;
  box-shadow: 0 14px 45px rgba(0,0,0,.35);
  font-size: 14px;
  animation: slide-up 220ms ease both;
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
[hidden] { display: none !important; }

@keyframes slide-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes detail-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes conversation-enter { from { transform: translateX(24px); } to { transform: translateX(0); } }
@keyframes message-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes loading-dot { 0%, 100% { opacity: .28; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes conversation-working-spin { to { transform: rotate(360deg); } }
@keyframes switcher-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes switcher-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes project-picker-rise { from { opacity: 0; transform: translateY(34px) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes task-confirm-rise { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes needs-action-rise { from { opacity: 0; transform: translateY(34px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 420px) {
  .app-shell { padding-right: 15px; padding-left: 15px; }
  .target-badge { padding: 6px 7px; }
  .dashboard-actions { grid-template-columns: 1fr 1fr; }
  .dashboard-actions button.is-danger { grid-column: 1 / -1; }
}

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

/* --------------------------------------------------------------------------
   Mobile application shell · v42
   The encrypted controls above remain the product primitives. This layer
   gives them a persistent, phone-native information architecture.
   -------------------------------------------------------------------------- */

:root {
  --app-width: 480px;
  --app-tabbar-height: 56px;
  --visual-viewport-height: 100dvh;
  --visual-viewport-top: 0px;
  --visual-viewport-bottom: 0px;
  --app-ease: cubic-bezier(.2,.76,.2,1);
}

html, body { height: 100%; overflow: hidden; }
body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 14% 4%, rgba(245,166,35,.095), transparent 29rem),
    radial-gradient(circle at 92% 91%, rgba(114,215,173,.055), transparent 25rem),
    #070a09;
}

.app-shell {
  position: relative;
  z-index: 1;
  display: grid;
  width: min(100%, var(--app-width));
  height: 100dvh;
  min-height: 0;
  grid-template-rows: auto minmax(0,1fr) auto;
  margin: 0 auto;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 100% 9%, rgba(245,166,35,.045), transparent 18rem),
    linear-gradient(180deg, #0d1210, #090d0b 72%);
  box-shadow: 0 0 100px rgba(0,0,0,.3); isolation: isolate;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

html.is-standalone,
html.is-standalone body {
  height: 100vh;
  min-height: 100vh;
}
html.is-standalone .app-shell { height: 100vh; }

.mobile-header {
  position: relative;
  z-index: 8;
  display: flex;
  grid-row: 1;
  min-height: calc(var(--safe-top) + 69px);
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--safe-top) + 11px) 18px 10px;
  border-bottom: 1px solid rgba(238,232,217,.055);
  background: linear-gradient(180deg, rgba(13,18,16,.98), rgba(13,18,16,.88));
  backdrop-filter: blur(18px) saturate(.85);
}
.mobile-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mobile-brand-mark {
  display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center;
  border: 1px solid rgba(245,166,35,.36); border-radius: 13px 5px 13px 5px;
  background: linear-gradient(145deg, rgba(245,166,35,.16), rgba(245,166,35,.035));
  color: var(--signal); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 9px 30px rgba(245,166,35,.07);
  font: 700 17px/1 "STKaiti", "KaiTi", serif;
}
.mobile-brand-mark.is-large { width: 58px; height: 58px; border-radius: 19px 7px 19px 7px; font-size: 25px; }
.mobile-brand-copy { display: block; min-width: 0; }
.mobile-brand-copy strong, .mobile-brand-copy small { display: block; }
.mobile-brand-copy strong { color: #e8e2d4; font-size: 16px; font-weight: 680; letter-spacing: .1em; }
.mobile-brand-copy small { margin-top: 3px; color: #6f7973; font: 9px/1.2 "SF Mono", Menlo, monospace; letter-spacing: .12em; }
.header-device-shortcut {
  display: flex; min-width: 68px; min-height: 44px; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid rgba(238,232,217,.1); border-radius: 15px 6px 15px 6px;
  padding: 0 11px; background: rgba(238,232,217,.025); color: #89938d; font-size: 12px;
  transition: transform 110ms ease, border-color 150ms ease, background 150ms ease;
}
.header-device-shortcut .ui-icon { width: 17px; height: 17px; }
.header-device-shortcut:active { transform: scale(.96); border-color: rgba(245,166,35,.23); background: rgba(245,166,35,.07); }

.app-viewport {
  position: relative; min-height: 0; grid-row: 2; overflow: hidden;
  contain: layout paint style; isolation: isolate; transform: translate3d(0,0,0);
}
.app-page {
  /* 页面内边距做成变量，好让顶栏用负 margin 精确顶到屏幕边缘。
     窄屏的 15px 覆盖也只改这个变量，两边不会再对不上。 */
  --app-page-pad: 18px;
  --app-page-pad-top: calc(var(--safe-top) + 14px);
  position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto;
  padding: var(--app-page-pad-top) var(--app-page-pad) calc(var(--app-tabbar-height) + var(--safe-bottom) + 14px);
  overscroll-behavior: contain; contain: layout paint style;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.app-page::-webkit-scrollbar { display: none; }
.app-page.is-active { animation: none; }
.page-intro, .dashboard-page-top { padding: 3px 2px 0; }
.page-intro h1, .dashboard-page-top h1 {
  margin: 7px 0 0; color: #eee8da; font-family: "Songti SC", "STSong", serif;
  font-size: clamp(27px, 7vw, 32px); font-weight: 650; letter-spacing: -.045em;
}
.page-intro > p:last-child, .dashboard-page-top > p:last-child {
  max-width: 390px; margin: 8px 0 0; color: var(--text-muted); font-size: 13px; line-height: 1.6;
}

.pairing-page {
  padding: calc(var(--safe-top) + 23px) 18px calc(var(--safe-bottom) + 24px);
  background:
    radial-gradient(circle at 88% 8%, rgba(245,166,35,.1), transparent 22rem),
    linear-gradient(180deg, #101613, #090d0b 72%);
}
.pairing-masthead { display: flex; align-items: center; gap: 14px; margin: 0 5px 21px; }
.pairing-masthead p { max-width: 215px; margin: 0; color: #a8b0ab; font-family: "Songti SC", "STSong", serif; font-size: 17px; line-height: 1.55; }
.pairing-page .pairing-card { margin: 0; border-radius: 28px 9px 28px 9px; padding: 25px 21px 20px; }
.pairing-page .pairing-card h2 { margin-top: 8px; font-family: "Songti SC", "STSong", serif; font-size: 25px; }
.pairing-security { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 3px; }
.pairing-security summary {
  min-height: 44px; padding: 14px 1px 10px; color: #939d97; cursor: pointer; font-size: 12px;
  list-style: none; touch-action: manipulation;
}
.pairing-security summary::-webkit-details-marker { display: none; }
.pairing-security summary::after { float: right; color: var(--signal); content: "+"; font: 17px/1 "SF Mono", monospace; }
.pairing-security[open] summary::after { content: "−"; }
.pairing-security .pairing-steps { margin-top: 3px; }

.home-page { --app-page-pad-top: calc(var(--safe-top) + 8px); }
.home-page .telemetry {
  min-height: 0; margin: 0; overflow: visible; border: 0; border-radius: 0; padding: 0;
  background: transparent; box-shadow: none;
}
.home-page .telemetry::before { display: none; }
.home-page .metric-grid {
  grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px; margin: 0; border: 1px solid rgba(238,232,217,.11);
  border-radius: 18px 7px 18px 7px; padding: 5px; background: rgba(17,23,20,.82);
  box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.02);
}
.home-page .metric-card,
.home-page .home-mac-status {
  --metric-rgb: 245,166,35;
  display: grid; min-width: 0; min-height: 70px; grid-template-columns: minmax(0,1fr);
  align-content: center; justify-items: center; gap: 6px;
  border: 1px solid transparent; border-radius: 14px 5px 14px 5px; padding: 8px 5px;
  background: rgba(238,232,217,.018); color: #929c96; text-align: center;
}
.home-page .metric-card[data-dashboard-view="needs"] { --metric-rgb: 255,115,92; }
.home-page .metric-card[data-dashboard-view="followed"] { --metric-rgb: 245,166,35; }
.home-page .metric-card[data-dashboard-view="controls"] { --metric-rgb: 120,157,241; }
.home-page .metric-card strong { color: rgb(var(--metric-rgb)); font: 550 24px/1 "SF Mono", Menlo, monospace; }
.home-page .metric-card > span,
.home-page .home-mac-status > span { margin: 0; color: inherit; font-size: 11px; font-weight: 680; white-space: nowrap; }
.followed-metric-number {
  display: grid; width: min(100%,68px); grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  align-items: center; column-gap: 4px;
}
.home-page .metric-card .followed-metric-number > strong { grid-column: 2; }
.followed-mini-count {
  font: 750 10px/1 "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.followed-mini-count.is-running {
  grid-column: 1; justify-self: end; color: var(--mint); text-shadow: 0 0 7px rgba(114,215,173,.42);
}
.followed-mini-count.is-attention {
  grid-column: 3; justify-self: start; color: #ff806a; text-shadow: 0 0 7px rgba(255,115,92,.38);
}
.home-page .metric-card.is-active,
.home-page .metric-card[aria-pressed="true"] {
  border-color: rgba(var(--metric-rgb),.28);
  background: linear-gradient(135deg, rgba(var(--metric-rgb),.13), rgba(var(--metric-rgb),.035));
  color: #e2ddd1; box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.home-page .metric-card.is-active::after,
.home-page .metric-card[aria-pressed="true"]::after {
  position: absolute; right: 22%; bottom: -1px; left: 22%; height: 2px; border-radius: 99px;
  background: rgb(var(--metric-rgb)); content: "";
}
.home-page .metric-card:active { transform: scale(.97); border-color: rgba(var(--metric-rgb),.36); }
.home-page .home-mac-status { --metric-rgb: 129,143,135; }
.home-page .home-mac-status strong {
  display: flex; min-width: 0; align-items: center; justify-content: center; gap: 6px;
  color: rgb(var(--metric-rgb)); font: 650 15px/1 "SF Mono", Menlo, monospace; white-space: nowrap;
}
.home-page .home-mac-status strong i {
  width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: rgb(var(--metric-rgb));
  box-shadow: 0 0 0 3px rgba(var(--metric-rgb),.07);
}
.home-page .home-mac-status.is-online {
  --metric-rgb: 114,215,173; border-color: rgba(var(--metric-rgb),.22);
  background: linear-gradient(135deg,rgba(var(--metric-rgb),.1),rgba(var(--metric-rgb),.025)); color: #d9e5df;
}
.home-page .home-mac-status.is-online strong i { box-shadow: 0 0 0 3px rgba(var(--metric-rgb),.08),0 0 12px rgba(var(--metric-rgb),.35); }
.home-page .home-mac-status.is-offline { --metric-rgb: 184,127,112; }
.home-dashboard-stage { margin-top: 11px; }
.followed-status-summary {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px;
  margin-bottom: 9px; border: 1px solid rgba(245,166,35,.18); border-radius: 13px 4px 13px 4px;
  padding: 12px 13px; background:
    radial-gradient(circle at 0 50%, rgba(245,166,35,.1), transparent 46%),
    rgba(13,19,16,.72); box-shadow: inset 2px 0 rgba(245,166,35,.44);
}
.followed-status-summary.has-attention { border-color: rgba(255,115,92,.2); box-shadow: inset 2px 0 rgba(255,115,92,.55); }
.followed-status-heading { display: grid; min-width: 0; gap: 3px; }
.followed-status-heading small { color: #8c958f; font-size: 9px; font-weight: 760; letter-spacing: .08em; }
.followed-status-heading strong { color: #e6e0d3; font-size: 14px; font-weight: 700; }
.followed-status-activity { display: flex; align-items: stretch; gap: 5px; }
.followed-status-activity > span {
  display: grid; min-width: 52px; grid-template-columns: 5px auto; align-items: center; gap: 2px 5px;
  border: 1px solid rgba(238,232,217,.08); border-radius: 9px 3px 9px 3px; padding: 6px 7px;
  background: rgba(238,232,217,.025);
}
.followed-status-activity i { width: 5px; height: 5px; border-radius: 50%; background: #56605a; }
.followed-status-activity small { color: #78827c; font-size: 8px; font-weight: 680; white-space: nowrap; }
.followed-status-activity b { grid-column: 2; color: #8f9993; font: 650 15px/1 "SF Mono", Menlo, monospace; }
.followed-status-activity .is-running.has-value { border-color: rgba(114,215,173,.16); background: rgba(114,215,173,.045); }
.followed-status-activity .is-running.has-value i { background: var(--mint); box-shadow: 0 0 7px rgba(114,215,173,.45); }
.followed-status-activity .is-running.has-value small,
.followed-status-activity .is-running.has-value b { color: #86c2a8; }
.followed-status-activity .is-attention.has-value { border-color: rgba(255,115,92,.18); background: rgba(255,115,92,.05); }
.followed-status-activity .is-attention.has-value i { background: var(--danger); box-shadow: 0 0 7px rgba(255,115,92,.42); }
.followed-status-activity .is-attention.has-value small,
.followed-status-activity .is-attention.has-value b { color: #e09a8d; }
.home-page .receipt-card { margin: 10px 0 0; border-radius: 17px 6px 17px 6px; }

.dashboard-page { padding-top: calc(var(--safe-top) + 11px); }
.dashboard-page-top { margin-bottom: 14px; }
.dashboard-subnav {
  display: grid; gap: 5px; margin-bottom: 14px; border: 1px solid rgba(238,232,217,.1);
  border-radius: 16px 6px 16px 6px; padding: 5px; background: rgba(18,24,21,.78);
}
.project-subnav { grid-template-columns: repeat(2, minmax(0,1fr)); }
.project-subnav:not(:has(button:not([hidden]))) { display: none; }
.project-subnav:has(#openWebApps[hidden]) #openProjects:not([hidden]),
.project-subnav:has(#openProjects[hidden]) #openWebApps:not([hidden]) { grid-column: 1 / -1; }
.dashboard-subnav button {
  display: flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 12px 4px 12px 4px; padding: 0 9px;
  background: transparent; color: #7e8983; font-size: 12px; white-space: nowrap;
}
.dashboard-subnav button b { color: inherit; font: 650 11px/1 "SF Mono", Menlo, monospace; }
.dashboard-subnav button.is-active {
  border-color: rgba(245,166,35,.25); background: linear-gradient(135deg, rgba(245,166,35,.13), rgba(245,166,35,.05));
  color: var(--signal-hot); box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.app-shell[data-app-view="projects"] .dashboard-subnav button.is-active {
  border-color: rgba(120,157,241,.27); background: linear-gradient(135deg, rgba(120,157,241,.13), rgba(120,157,241,.045)); color: #a9c1f4;
}
.dashboard-stage .dashboard-detail {
  overflow: visible; margin: 0; border: 0; border-radius: 0; padding: 0 0 20px;
  background: transparent; box-shadow: none; animation: none;
}
.dashboard-stage .dashboard-detail::before { display: none; }
.dashboard-stage .dashboard-detail-head { padding: 4px 2px 0; }
.dashboard-stage .dashboard-detail-head h2 { font-family: "Songti SC", "STSong", serif; font-size: 22px; }
.dashboard-stage .dashboard-detail-head > button { width: 44px; height: 44px; flex-basis: 44px; }
.dashboard-stage .dashboard-sync { margin: 8px 2px 13px; }
.dashboard-stage .dashboard-list { gap: 10px; }
.dashboard-list,
.conversation-messages,
.conversation-running-list,
.transfer-list { contain: layout style; isolation: isolate; }
.dashboard-stage .dashboard-item,
.dashboard-stage .project-card,
.dashboard-stage .agent-work-card,
.dashboard-stage .web-app-card,
.dashboard-stage .preview-card {
  border-radius: 18px 7px 18px 7px;
  background-color: rgba(17,23,20,.82);
  box-shadow: 0 10px 30px rgba(0,0,0,.11);
}
.dashboard-stage .dashboard-item { padding: 15px 14px 14px; }
.dashboard-stage .dashboard-item-head > strong { font-size: 14px; line-height: 1.45; }
.dashboard-stage .task-summary { color: var(--text-muted); font-size: 12px; line-height: 1.6; }
.dashboard-stage .dashboard-actions button,
.dashboard-stage .task-detail-toggle { min-height: 44px; }
.dashboard-stage .needs-conversation-row { min-height: 98px; padding: 15px 14px 14px 12px; }
.dashboard-stage .needs-conversation-swipe {
  border-radius: 18px 7px 18px 7px; background: #6f2925;
  box-shadow: 0 10px 30px rgba(0,0,0,.11);
}
.dashboard-stage .needs-conversation-row {
  border-radius: 18px 7px 18px 7px; background: #111714;
  box-shadow: 0 10px 30px rgba(0,0,0,.11);
}
.dashboard-stage .needs-conversation-row.is-unread {
  background: linear-gradient(90deg, #172035, #121a17 42%, #111714 100%);
}
.dashboard-stage .needs-conversation-head strong { font-size: 14px; }
.dashboard-stage .needs-conversation-summary { font-size: 12px; }
.dashboard-stage .dashboard-project-items .needs-conversation-swipe {
  border-radius: 0; background: #6f2925; box-shadow: none;
}
.dashboard-stage .dashboard-project-items .needs-conversation-swipe.is-static { background: transparent; }
.dashboard-stage .dashboard-project-items .needs-conversation-row {
  min-height: 94px; border: 0; border-radius: 0; padding: 14px 13px 13px 12px;
  background: rgba(15,21,19,.98); box-shadow: none;
}
.dashboard-stage .dashboard-project-items .needs-conversation-row.is-unread {
  background: linear-gradient(90deg, rgba(23,32,53,.98), rgba(18,26,23,.98) 44%, rgba(15,21,19,.98));
}
.dashboard-stage .dashboard-project-items .needs-conversation-row:active { background: #17201c; }
.dashboard-stage .dashboard-project-items .needs-conversation-meta > span:nth-child(2) { display: none; }
.dashboard-stage .dashboard-project-items > .interaction-card {
  border: 0; border-radius: 0; background:
    radial-gradient(circle at 100% 0, rgba(var(--interaction-rgb),.1), transparent 34%),
    linear-gradient(155deg, rgba(17,24,21,.99), rgba(10,14,13,.99));
  box-shadow: inset 3px 0 rgba(var(--interaction-rgb),.62);
}
.dashboard-stage .dashboard-readonly { margin-bottom: 2px; padding: 15px 8px 0; color: #6f7973; text-align: center; }
.home-dashboard-stage .dashboard-detail { padding-bottom: 18px; }
.home-dashboard-stage .dashboard-detail-head { padding-top: 2px; }
.home-dashboard-stage .dashboard-detail-head h2 { font-size: 19px; }
.home-dashboard-stage .dashboard-sync,
.home-dashboard-stage .dashboard-readonly { display: none; }
.home-dashboard-stage .dashboard-list { gap: 9px; }

.device-page { padding-top: calc(var(--safe-top) + 12px); }
.device-summary {
  display: grid; min-height: 105px; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 13px;
  margin-top: 17px; border: 1px solid rgba(114,215,173,.18); border-radius: 23px 8px 23px 8px;
  padding: 17px; background: linear-gradient(145deg, rgba(27,37,32,.96), rgba(14,20,17,.96));
}
.device-summary-icon {
  display: grid; width: 52px; height: 52px; grid-row: 1 / 3; place-items: center; border: 1px solid rgba(114,215,173,.26);
  border-radius: 17px 6px 17px 6px; background: rgba(114,215,173,.075); color: var(--mint);
}
.device-summary-icon .ui-icon { width: 24px; height: 24px; }
.device-summary > span:nth-child(2) { min-width: 0; }
.device-summary strong, .device-summary small { display: block; }
.device-summary strong { color: #dedbd0; font-size: 14px; font-weight: 680; }
.device-summary small { margin-top: 5px; color: var(--text-faint); font-size: 11px; line-height: 1.45; }
.device-encryption { display: flex; align-items: center; gap: 5px; color: var(--mint); font: 650 10px/1 "SF Mono", Menlo, monospace; }
.device-encryption .ui-icon { width: 13px; height: 13px; }
.device-notification-card {
  position: relative; flex: 0 0 auto; overflow: hidden; margin-top: 11px;
  border: 1px solid rgba(245,166,35,.2); border-radius: 22px 8px 22px 8px;
  padding: 16px; background:
    radial-gradient(circle at 100% 0, rgba(245,166,35,.095), transparent 37%),
    linear-gradient(155deg, rgba(24,29,24,.98), rgba(11,16,14,.98));
  box-shadow: 0 14px 38px rgba(0,0,0,.14); transition: border-color 180ms ease, background 180ms ease;
}
.device-notification-card::before {
  position: absolute; top: 0; left: 0; width: 78px; height: 2px;
  background: var(--signal); content: ''; transition: width 220ms ease, background 180ms ease;
}
.device-notification-card::after {
  position: absolute; top: -54px; right: -40px; width: 132px; height: 132px;
  border: 1px solid rgba(245,166,35,.08); border-radius: 50%; content: '';
  box-shadow: 0 0 0 18px rgba(245,166,35,.02),0 0 0 36px rgba(245,166,35,.012);
  pointer-events: none;
}
.device-notification-head {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 45px minmax(0,1fr) auto; align-items: center; gap: 11px;
}
.device-notification-icon {
  position: relative; display: grid; width: 45px; height: 45px; place-items: center;
  border: 1px solid rgba(245,166,35,.25); border-radius: 15px 5px 15px 5px;
  background: rgba(245,166,35,.075); color: #d9a44d;
}
.device-notification-icon .ui-icon { width: 21px; height: 21px; }
.device-notification-icon > i {
  position: absolute; top: 7px; right: 7px; width: 6px; height: 6px;
  border: 1px solid #171d19; border-radius: 50%; background: #776b52;
  box-shadow: 0 0 0 3px rgba(245,166,35,.035); transition: background 180ms ease, box-shadow 180ms ease;
}
.device-notification-copy { display: block; min-width: 0; }
.device-notification-copy .card-kicker { display: block; font-size: 9px; letter-spacing: .15em; }
.device-notification-copy strong { display: block; margin-top: 4px; color: #e0ddd3; font-size: 15px; letter-spacing: -.01em; }
.device-notification-copy small { display: block; max-width: 310px; margin-top: 5px; color: #7b857f; font-size: 10px; line-height: 1.48; }
.notification-toggle {
  position: relative; z-index: 2; display: grid; min-width: 66px; min-height: 48px;
  place-items: center; gap: 5px; border: 1px solid rgba(245,166,35,.2);
  border-radius: 15px 5px 15px 5px; padding: 5px 8px; background: rgba(245,166,35,.055);
  color: #c99d53; font-size: 9px; font-weight: 700; transition: transform 140ms ease, opacity 140ms ease, border-color 180ms ease;
}
.notification-toggle:active:not(:disabled) { transform: scale(.96); }
.notification-toggle:disabled { cursor: default; opacity: .48; }
.notification-switch {
  position: relative; display: block; width: 31px; height: 17px; border-radius: 999px;
  background: rgba(238,232,217,.12); box-shadow: inset 0 0 0 1px rgba(238,232,217,.08);
  transition: background 180ms ease;
}
.notification-switch i {
  position: absolute; top: 3px; left: 3px; width: 11px; height: 11px; border-radius: 50%;
  background: #8d958f; box-shadow: 0 2px 5px rgba(0,0,0,.28); transition: transform 180ms ease, background 180ms ease;
}
.device-notification-kinds {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px;
  border-top: 1px solid rgba(238,232,217,.07); padding-top: 12px;
}
.device-notification-kinds span {
  display: inline-flex; min-height: 28px; align-items: center; gap: 7px; border: 1px solid rgba(238,232,217,.075);
  border-radius: 9px 3px 9px 3px; padding: 0 9px; background: rgba(3,8,5,.21); color: #78827c; font-size: 9px;
}
.device-notification-kinds i { width: 5px; height: 5px; border-radius: 2px; background: #5c6660; }
.device-notification-privacy {
  position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 6px;
  margin: 10px 0 0; color: #626c66; font-size: 9px; line-height: 1.5;
}
.device-notification-privacy .ui-icon { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 1px; color: #719d89; }
.device-notification-card[data-state="enabled"] {
  border-color: rgba(114,215,173,.25); background:
    radial-gradient(circle at 100% 0, rgba(114,215,173,.105), transparent 39%),
    linear-gradient(155deg, rgba(21,31,26,.98), rgba(11,16,14,.98));
}
.device-notification-card[data-state="enabled"]::before { width: 118px; background: var(--mint); }
.device-notification-card[data-state="enabled"] .device-notification-icon {
  border-color: rgba(114,215,173,.28); background: rgba(114,215,173,.08); color: var(--mint);
}
.device-notification-card[data-state="enabled"] .device-notification-icon > i {
  background: var(--mint); box-shadow: 0 0 0 3px rgba(114,215,173,.09),0 0 10px rgba(114,215,173,.38);
}
.device-notification-card[data-state="enabled"] .notification-toggle { border-color: rgba(114,215,173,.24); background: rgba(114,215,173,.065); color: #8ac9ad; }
.device-notification-card[data-state="enabled"] .notification-switch { background: rgba(114,215,173,.54); }
.device-notification-card[data-state="enabled"] .notification-switch i { transform: translateX(14px); background: #eff5ee; }
.device-notification-card[data-state="enabled"] .device-notification-kinds span { border-color: rgba(114,215,173,.13); color: #90a69b; }
.device-notification-card[data-state="enabled"] .device-notification-kinds i { background: var(--mint); box-shadow: 0 0 7px rgba(114,215,173,.3); }
.device-notification-card[data-state="denied"] { border-color: rgba(255,115,92,.2); }
.device-notification-card[data-state="denied"]::before { background: #bb7568; }
.device-notification-card[data-state="denied"] .notification-toggle { border-color: rgba(255,115,92,.18); background: rgba(255,115,92,.045); color: #bd8075; }
.device-cache-card {
  position: relative; flex: 0 0 auto; overflow: hidden; margin-top: 11px;
  border: 1px solid rgba(120,157,241,.18); border-radius: 22px 8px 22px 8px;
  padding: 16px; background:
    linear-gradient(135deg, rgba(120,157,241,.07), transparent 42%),
    linear-gradient(155deg, rgba(18,25,22,.98), rgba(11,16,14,.98));
  box-shadow: 0 14px 38px rgba(0,0,0,.14);
}
.device-cache-card::after {
  position: absolute; right: -34px; bottom: -46px; width: 122px; height: 122px;
  border: 1px solid rgba(120,157,241,.09); border-radius: 50%; content: '';
  box-shadow: 0 0 0 18px rgba(120,157,241,.025),0 0 0 36px rgba(120,157,241,.015);
  pointer-events: none;
}
.device-cache-head {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 43px minmax(0,1fr) auto; align-items: start; gap: 11px;
}
.device-cache-icon {
  display: grid; width: 43px; height: 43px; place-items: center;
  border: 1px solid rgba(120,157,241,.24); border-radius: 14px 5px 14px 5px;
  background: rgba(120,157,241,.08); color: #91adf0;
}
.device-cache-icon .ui-icon { width: 21px; height: 21px; }
.device-cache-head h2 { margin: 3px 0 0; color: #e0ddd3; font-size: 15px; letter-spacing: -.01em; }
.device-cache-head p:not(.card-kicker) { margin: 5px 0 0; color: #78827c; font-size: 10px; line-height: 1.48; }
.device-cache-live {
  display: flex; align-items: center; gap: 5px; margin-top: 1px; border: 1px solid rgba(114,215,173,.17);
  border-radius: 999px; padding: 5px 7px; background: rgba(114,215,173,.045);
  color: #85c7a8; font-size: 9px; white-space: nowrap;
}
.device-cache-live i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 3px rgba(114,215,173,.08),0 0 9px rgba(114,215,173,.34);
}
.device-cache-metrics {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr .92fr 1fr;
  margin: 15px 0 0; border: 1px solid rgba(238,232,217,.07); border-radius: 15px 5px 15px 5px;
  background: rgba(5,9,7,.25);
}
.device-cache-metrics > div { min-width: 0; padding: 11px 10px; }
.device-cache-metrics > div + div { border-left: 1px solid rgba(238,232,217,.065); }
.device-cache-metrics dt { color: #66706a; font-size: 9px; line-height: 1.2; }
.device-cache-metrics dd {
  overflow: hidden; margin: 5px 0 0; color: #d7d5cc;
  font: 640 11px/1.25 "SF Mono", Menlo, monospace; text-overflow: ellipsis; white-space: nowrap;
}
.device-cache-metrics > div:first-child dd { color: #9bb4ed; font-size: 14px; }
.device-cache-actions {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 12px; margin-top: 13px;
}
.device-cache-actions p { margin: 0; color: #646e68; font-size: 9px; line-height: 1.48; }
.device-cache-actions button {
  min-height: 44px; border: 1px solid rgba(196,126,112,.2); border-radius: 13px 5px 13px 5px;
  padding: 0 12px; background: rgba(113,47,42,.11); color: #bb8176; font-size: 11px; white-space: nowrap;
}
.device-cache-actions button:disabled { border-color: rgba(238,232,217,.07); background: rgba(238,232,217,.025); color: #59625d; }
.device-page .recovery-setup-card { margin-top: 11px; border-radius: 20px 7px 20px 7px; }
.device-setting {
  display: grid; width: 100%; min-height: 68px; grid-template-columns: 40px minmax(0,1fr) 17px;
  align-items: center; gap: 11px; margin-top: 11px; border: 1px solid rgba(238,232,217,.1);
  border-radius: 18px 7px 18px 7px; padding: 10px 13px 10px 11px; background: rgba(18,24,21,.8); color: inherit; text-align: left;
}
.device-setting-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 13px 5px 13px 5px; background: rgba(238,232,217,.045); color: #99a39d; }
.device-setting-icon .ui-icon { width: 18px; height: 18px; }
.device-setting > span:nth-child(2) { min-width: 0; }
.device-setting strong, .device-setting small { display: block; }
.device-setting strong { color: #d7d4ca; font-size: 13px; font-weight: 670; }
.device-setting small { margin-top: 4px; color: var(--text-faint); font-size: 11px; }
.device-setting > .ui-icon { width: 15px; height: 15px; color: #5d6761; }
.device-footer {
  display: flex; min-height: 62px; align-items: center; justify-content: space-between; margin-top: 12px;
  border-top: 1px solid rgba(238,232,217,.075); padding: 12px 2px 2px; color: var(--text-faint); font-size: 11px;
}
.device-footer button { min-height: 44px; color: #aa756c; }

.device-page:has(#recoverySetup[hidden]) {
  display: flex; flex-direction: column; gap: 14px;
}
.device-page:has(#recoverySetup[hidden]) .device-summary {
  min-height: clamp(150px, 21dvh, 200px); grid-template-columns: 68px minmax(0,1fr);
  gap: 18px; margin-top: 0; padding: clamp(21px, 5vw, 27px);
}
.device-page:has(#recoverySetup[hidden]) .device-cache-card { margin-top: 0; }
.device-page:has(#recoverySetup[hidden]) .device-notification-card { margin-top: 0; }
.device-page:has(#recoverySetup[hidden]) .device-summary-icon {
  width: 68px; height: 68px; border-radius: 21px 7px 21px 7px;
}
.device-page:has(#recoverySetup[hidden]) .device-summary-icon .ui-icon { width: 30px; height: 30px; }
.device-page:has(#recoverySetup[hidden]) .device-summary strong { font-size: 18px; }
.device-page:has(#recoverySetup[hidden]) .device-summary small { margin-top: 8px; font-size: 13px; line-height: 1.55; }
.device-page:has(#recoverySetup[hidden]) .device-encryption { gap: 7px; font-size: 12px; }
.device-page:has(#recoverySetup[hidden]) .device-encryption .ui-icon { width: 15px; height: 15px; }
.device-page:has(#recoverySetup[hidden]) .device-setting {
  min-height: clamp(92px, 13dvh, 126px); grid-template-columns: 50px minmax(0,1fr) 19px;
  gap: 15px; margin-top: 0; padding: 15px 18px 15px 14px;
}
.device-page:has(#recoverySetup[hidden]) .device-setting-icon {
  width: 50px; height: 50px; border-radius: 16px 6px 16px 6px;
}
.device-page:has(#recoverySetup[hidden]) .device-setting-icon .ui-icon { width: 22px; height: 22px; }
.device-page:has(#recoverySetup[hidden]) .device-setting strong { font-size: 16px; }
.device-page:has(#recoverySetup[hidden]) .device-setting small { margin-top: 6px; font-size: 13px; line-height: 1.5; }
.device-page:has(#recoverySetup[hidden]) .device-setting > .ui-icon { width: 17px; height: 17px; }
.device-page:has(#recoverySetup[hidden]) .device-footer {
  min-height: clamp(80px, 10dvh, 98px); margin-top: 0; border: 1px solid rgba(238,232,217,.08);
  border-radius: 18px 7px 18px 7px; padding: 16px 18px; background: rgba(14,20,17,.54); font-size: 12px;
}

.app-tabbar-shell {
  position: fixed; z-index: 12; right: 0; bottom: 0; left: 0;
  width: min(100%, var(--app-width)); margin: 0 auto; padding: 4px 0 0;
  background: linear-gradient(180deg, rgba(9,13,11,.08), rgba(9,13,11,.98) 22%);
  transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
html.is-standalone .app-tabbar-shell { position: absolute; }
.app-tabbar {
  display: grid; min-height: calc(48px + var(--safe-bottom)); grid-template-columns: repeat(5,minmax(0,1fr)); align-items: end;
  border: 1px solid rgba(238,232,217,.13); border-bottom: 0; border-radius: 21px 8px 0 0;
  padding: 3px 10px var(--safe-bottom);
  background: #151c18; box-shadow: 0 -9px 34px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
}
.app-tab {
  position: relative; top: 0; display: flex; min-width: 0; min-height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 0; border-radius: 14px 5px 14px 5px; padding: 2px 0 1px; background: transparent; color: #6f7973; font-size: 10px;
  transition: transform 110ms ease, color 160ms ease, background 160ms ease;
}
.app-tab .ui-icon { width: 20px; height: 20px; }
.app-tab:active { transform: scale(.94); background: rgba(238,232,217,.035); }
.app-tab.is-active { color: var(--signal-hot); }
.app-tab.is-active::after { width: 4px; height: 4px; border-radius: 50%; background: var(--signal); content: ""; }
.app-tab-create {
  position: relative; height: 44px; min-height: 44px; max-height: 44px; align-self: end;
  overflow: visible; transform: none;
}
.app-tab-create:active { transform: scale(.94); background: transparent; }
.app-tab-create-mark {
  position: static; display: grid; width: 30px; height: 30px; place-items: center;
  border: 1px solid rgba(245,166,35,.5); border-radius: 11px 4px 11px 4px;
  background: rgba(245,166,35,.14); color: var(--signal-hot);
  box-shadow: inset 0 1px rgba(255,255,255,.08); transform: none;
}
.app-tab-create-mark .ui-icon { width: 18px; height: 18px; stroke-width: 2; }
.app-tab-create > span:last-child {
  position: static; margin: 0; color: #927c56; line-height: 1;
}
body.keyboard-visible .app-tabbar-shell,
body.conversation-open .app-tabbar-shell { display: none; }

body.command-sheet-open { overflow: hidden; }
.command-sheet-modal {
  position: fixed; z-index: 40; top: var(--visual-viewport-top); right: 0;
  bottom: var(--visual-viewport-bottom); left: 0; display: grid; align-items: end; overflow: hidden;
}
.command-sheet-backdrop {
  position: absolute; inset: 0; border: 0; background: rgba(2,5,4,.76); backdrop-filter: blur(8px) saturate(.8);
  animation: switcher-fade 180ms ease both;
}
.command-sheet-modal .command-card {
  position: relative; display: block; width: min(100%, var(--app-width)); max-height: calc(var(--visual-viewport-height) - 8px);
  justify-self: center; overflow-x: hidden; overflow-y: auto; margin: 0; border-bottom: 0;
  border-radius: 29px 10px 0 0; padding: 9px 18px max(18px, calc(var(--safe-bottom) + 10px));
  background:
    radial-gradient(circle at 91% -7%, rgba(245,166,35,.17), transparent 33%),
    radial-gradient(circle at 0 85%, rgba(114,215,173,.045), transparent 26%),
    linear-gradient(155deg, #1b231f, #0e1412 58%, #090d0c);
  box-shadow: 0 -30px 86px rgba(0,0,0,.62); animation: command-sheet-rise 270ms var(--app-ease) both;
  overscroll-behavior: contain; scrollbar-width: none;
}
.command-sheet-modal .command-card::-webkit-scrollbar { display: none; }
.command-sheet-modal .command-card::before { left: 25px; width: 78px; background: linear-gradient(90deg, var(--signal), rgba(245,166,35,0)); }
.command-sheet-handle { display: block; width: 38px; height: 4px; margin: 0 auto 13px; border-radius: 99px; background: rgba(238,232,217,.2); }
.command-sheet-modal .card-head { margin-bottom: 11px; }
.command-sheet-modal .card-head h2 { font-family: "Songti SC", "STSong", serif; font-size: 24px; }
.command-sheet-close {
  display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border: 1px solid rgba(238,232,217,.13);
  border-radius: 50%; background: rgba(238,232,217,.04); color: #929b96;
}
.command-sheet-close:active { transform: scale(.9); background: rgba(238,232,217,.1); }
.command-sheet-close .ui-icon { width: 15px; height: 15px; }
.command-sheet-modal .target-badge { width: fit-content; min-height: 32px; margin: 0 0 13px; }
.command-sheet-modal #messageInput {
  min-height: 132px; border: 1px solid rgba(238,232,217,.12); border-radius: 18px 7px 18px 7px;
  padding: 15px; background: rgba(3,7,6,.31); font-size: 16px; line-height: 1.58;
}
.command-sheet-modal #messageInput:focus { border-color: rgba(245,166,35,.48); box-shadow: 0 0 0 3px rgba(245,166,35,.055); }
.command-sheet-modal .project-picker, .command-sheet-modal .agent-picker { margin-top: 14px; }
.command-sheet-modal .project-select-shell { min-height: 60px; }
.command-sheet-modal .agent-option { min-height: 62px; }
.command-sheet-modal .composer-foot { padding-bottom: 12px; }
.command-sheet-modal .send-button {
  position: relative; z-index: 2; min-height: 56px; box-shadow: 0 10px 28px rgba(245,166,35,.16);
}
body.keyboard-visible .command-sheet-modal .send-button {
  position: sticky; bottom: 0; box-shadow: 0 -14px 22px #0d1310, 0 10px 28px rgba(245,166,35,.16);
}

/* ── 私人文件中转站 ───────────────────────────────────────────── */
.files-page { padding-top: calc(var(--safe-top) + 2px); }

.transfer-depot {
  position: relative; overflow: hidden; margin-top: 0; border: 1px solid rgba(238,232,217,.11);
  border-radius: 19px 7px 19px 7px; padding: 11px 12px 10px;
  background:
    radial-gradient(circle at 104% -8%, rgba(245,166,35,.1), transparent 36%),
    linear-gradient(145deg, rgba(25,34,29,.94), rgba(12,18,15,.96) 68%);
  box-shadow: 0 12px 34px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.02);
}
.transfer-depot::before {
  position: absolute; inset: 0; pointer-events: none; opacity: .24;
  background-image: linear-gradient(rgba(238,232,217,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(238,232,217,.04) 1px, transparent 1px);
  background-size: 28px 28px; mask-image: linear-gradient(135deg, transparent 24%, black, transparent 88%); content: "";
}
.transfer-source-actions { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 0; }
.transfer-source-actions button {
  display: grid; min-width: 0; min-height: 60px; grid-template-columns: 31px minmax(0,1fr); align-items: center; gap: 9px;
  border: 1px solid rgba(238,232,217,.11); border-radius: 14px 5px 14px 5px; padding: 0 10px;
  background: rgba(238,232,217,.035); color: #d9d5ca; text-align: left;
  transition: transform 110ms ease, border-color 150ms ease, background 150ms ease;
}
.transfer-source-actions button:first-of-type { border-color: rgba(120,157,241,.16); background: rgba(120,157,241,.045); }
.transfer-source-actions button:last-of-type { border-color: rgba(245,166,35,.16); background: rgba(245,166,35,.04); }
.transfer-source-actions button:active { transform: scale(.975); border-color: rgba(245,166,35,.34); background: rgba(245,166,35,.09); }
.transfer-source-actions .ui-icon { width: 20px; height: 20px; color: #89998f; }
.transfer-source-actions button:first-of-type .ui-icon { color: #8da9e4; }
.transfer-source-actions span { display: grid; min-width: 0; gap: 3px; }
.transfer-source-actions strong { overflow: hidden; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.transfer-source-actions small { color: #747f78; font-size: 9px; }
.transfer-limit { position: relative; display: flex; align-items: center; gap: 6px; margin: 11px 1px 0; color: #69756e; font: 9px/1.45 "SF Mono", Menlo, monospace; }
.transfer-limit .ui-icon { width: 11px; height: 11px; color: #779185; }

.transfer-filters {
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; margin-top: 11px;
  border: 1px solid rgba(238,232,217,.09); border-radius: 14px 5px 14px 5px; padding: 4px; background: rgba(3,7,6,.26);
}
.transfer-filters button {
  min-width: 0; min-height: 40px; border: 0; border-radius: 10px 3px 10px 3px; background: transparent;
  color: #717d76; font-size: 10px; font-weight: 650; transition: color 150ms ease, background 150ms ease;
}
.transfer-filters button b { margin-left: 3px; color: inherit; font: 650 9px/1 "SF Mono", Menlo, monospace; }
.transfer-filters button.is-active { background: rgba(238,232,217,.065); color: #d7d3c9; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.transfer-history { margin-top: 13px; }
.transfer-history-head { display: flex; min-height: 35px; align-items: center; justify-content: space-between; padding: 0 2px; }
.transfer-history-head h2 { margin: 0; color: #c9c5ba; font-family: "Songti SC", "STSong", serif; font-size: 18px; }
.transfer-history-head button { display: inline-flex; min-height: 35px; align-items: center; gap: 5px; border: 0; padding: 0 3px; background: transparent; color: #6f7b74; font-size: 10px; }
.transfer-history-head button .ui-icon { width: 13px; height: 13px; }
.transfer-history-head button.is-loading .ui-icon { animation: transfer-spin 900ms linear infinite; }
.transfer-security-notice { margin: 7px 0 0; border: 1px solid rgba(190,120,108,.22); border-radius: 10px 3px 10px 3px; padding: 8px 10px; background: rgba(190,120,108,.06); color: #bd8277; font-size: 9px; line-height: 1.5; }
/* 「这台 iPhone 上存了多少文件」——在此之前占用只在设备页统计，而那个数字恰好不含文件，
   于是发了几条大视频也纹丝不动，人会据此以为文件根本没存在手机上。 */
.transfer-storage { display: flex; align-items: center; gap: 6px; margin: 7px 1px 0; color: #69756e; font: 9px/1.45 "SF Mono", Menlo, monospace; }
.transfer-storage .ui-icon { flex: 0 0 auto; width: 11px; height: 11px; color: #779185; }
.transfer-storage.is-tight { color: #bd8277; }
.transfer-storage.is-tight .ui-icon { color: #bd8277; }
/* 管理模式：批量挑出占空间的副本一次清掉。★条子在列表上方，不做浮层——
   底部是 tabbar，浮上去既要抢 z-index 又会盖住最后一张卡。 */
.transfer-manage-bar {
  display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px;
  margin-top: 9px; border: 1px solid rgba(245,166,35,.2); border-radius: 13px 4px 13px 4px;
  padding: 9px 11px; background: rgba(245,166,35,.05);
}
.transfer-manage-bar p { margin: 0; overflow: hidden; color: #c2b79c; font: 9px/1.45 "SF Mono", Menlo, monospace; text-overflow: ellipsis; }
.transfer-manage-actions { display: flex; gap: 7px; }
.transfer-manage-actions button {
  min-height: 32px; border: 1px solid rgba(238,232,217,.12); border-radius: 9px 3px 9px 3px;
  padding: 0 10px; background: rgba(238,232,217,.04); color: #a2aba5; font-size: 10px; font-weight: 650;
}
.transfer-manage-actions button.is-danger { border-color: rgba(190,120,108,.3); background: rgba(190,120,108,.08); color: #bd8277; }
.transfer-manage-actions button:disabled { opacity: .4; }
/* 勾选圈：只在管理模式出现，不改卡片自身的排布（避免非管理态几何被动） */
.transfer-card-pick {
  flex: 0 0 auto; display: grid; width: 20px; height: 20px; place-items: center; margin-right: 2px;
  border: 1.5px solid rgba(238,232,217,.26); border-radius: 50%; color: transparent; font-size: 11px;
}
.transfer-card.is-picked .transfer-card-pick { border-color: #d2a759; background: rgba(245,166,35,.16); color: #d2a759; }
/* ★.transfer-card 是 `50px minmax(0,1fr) 44px` 的三列栅格。管理模式多了一个勾选圈、
   又把右侧动作键隐藏掉,所以列模板必须跟着换成「勾选 | 缩略图 | 文案」——
   不换的话第 4 个子元素会把文案列挤成窄条,文件名折成"大片…."(实测栽过,只有截图看得见)。 */
.transfer-list.is-managing .transfer-card { grid-template-columns: 20px 50px minmax(0,1fr); cursor: default; }
.transfer-list.is-managing .transfer-card-action { display: none; }
.transfer-list { display: grid; gap: 9px; margin-top: 9px; }
.transfer-day { margin: 8px 3px -1px; color: #626e67; font: 650 9px/1 "SF Mono", Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.transfer-card-swipe {
  position: relative; overflow: hidden; border-radius: 17px 6px 17px 6px;
  background: #6f2925; touch-action: pan-y;
}
.transfer-card-swipe.is-static { background: transparent; }
.transfer-card-delete {
  position: absolute; z-index: 1; inset: 0 0 0 auto; display: grid; width: 78px;
  min-height: 100%; grid-template-rows: auto auto; place-content: center; place-items: center; gap: 5px;
  border: 0; padding: 0; background: linear-gradient(145deg,#8e342d,#6f2925);
  color: #fff1ed; font: 720 11px/1.2 -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 120ms ease, visibility 0s linear 120ms, background 120ms ease;
}
.transfer-card-swipe.is-open .transfer-card-delete,
.transfer-card-swipe.is-swiping .transfer-card-delete {
  opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s;
}
.transfer-card-delete .ui-icon { width: 19px; height: 19px; }
.transfer-card-delete:active { background: #a94339; }
.transfer-card {
  position: relative; z-index: 2; display: grid; width: 100%; min-width: 0; min-height: 78px; grid-template-columns: 50px minmax(0,1fr) 44px;
  align-items: center; gap: 11px; overflow: hidden; border: 1px solid rgba(238,232,217,.095);
  border-radius: 17px 6px 17px 6px; padding: 10px 7px 10px 10px; background: rgba(18,25,21,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.018);
  transform: translate3d(var(--transfer-swipe-x,0),0,0);
  transition: transform 190ms cubic-bezier(.2,.8,.2,1), border-color 150ms ease;
}
.transfer-card-swipe.is-open .transfer-card { --transfer-swipe-x: -78px; }
.transfer-card-swipe.is-swiping .transfer-card { transition: none; }
.transfer-card:focus-visible, .transfer-card-delete:focus-visible { outline: 1px solid rgba(245,166,35,.72); outline-offset: -2px; }
.transfer-card:active { transform: translate3d(var(--transfer-swipe-x,0),0,0) scale(.988); border-color: rgba(245,166,35,.2); }
.transfer-card::before { position: absolute; top: 13px; bottom: 13px; left: 0; width: 2px; background: var(--mint); content: ""; }
.transfer-card.is-sent::before { background: #789df1; }
.transfer-card.is-failed::before { background: var(--danger); }
.transfer-card.is-unread::after { position: absolute; top: 9px; right: 9px; width: 5px; height: 5px; border-radius: 50%; background: #789df1; box-shadow: 0 0 10px rgba(120,157,241,.6); content: ""; }
.transfer-thumb {
  position: relative; display: grid; width: 50px; height: 50px; place-items: center; overflow: hidden;
  border: 1px solid rgba(238,232,217,.1); border-radius: 13px 4px 13px 4px; background: #090e0c; color: #96a099;
}
.transfer-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.transfer-thumb .ui-icon { width: 21px; height: 21px; }
.transfer-thumb.is-video .ui-icon { color: #9bb1df; fill: rgba(155,177,223,.14); }
.transfer-thumb.is-image .ui-icon { color: var(--mint); }
.transfer-thumb.is-file { color: #b59b69; }
.transfer-ext {
  max-width: 40px; overflow: hidden; color: inherit; font: 760 9px/1 "SF Mono", Menlo, monospace;
  letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap;
}
.transfer-copy { min-width: 0; }
.transfer-copy strong { display: block; overflow: hidden; color: #ddd8cc; font-size: 12px; font-weight: 670; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.transfer-copy p { margin: 5px 0 0; color: #747f78; font-size: 9px; line-height: 1.45; }
.transfer-status { display: flex; min-width: 0; align-items: center; gap: 5px; margin-top: 6px; color: #87928b; font-size: 9px; }
.transfer-status i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: #657169; }
.transfer-status.is-ready { color: #83b69f; }
.transfer-status.is-ready i { background: var(--mint); }
.transfer-status.is-progress { color: #b39055; }
.transfer-status.is-progress i { background: var(--signal); animation: live-breathe 1.5s ease infinite; }
.transfer-status.is-error { color: #be786c; }
.transfer-status.is-error i { background: var(--danger); }
.transfer-progress { height: 2px; overflow: hidden; margin-top: 6px; border-radius: 99px; background: rgba(238,232,217,.06); }
.transfer-progress i { display: block; width: var(--progress,0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8d6c37,var(--signal)); transition: width 220ms ease; }
.transfer-card-action { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: rgba(238,232,217,.035); color: #78847d; }
.transfer-card-action .ui-icon { width: 17px; height: 17px; }
.transfer-card-action:active { background: rgba(245,166,35,.1); color: var(--signal); transform: scale(.9); }
.transfer-empty { padding: 31px 19px; border: 1px dashed rgba(238,232,217,.11); border-radius: 17px 6px 17px 6px; color: #748078; text-align: center; }
.transfer-empty .ui-icon { width: 28px; height: 28px; color: #6f7c74; }
.transfer-empty strong { display: block; margin-top: 10px; color: #b7b6ad; font-family: "Songti SC", "STSong", serif; font-size: 16px; }
.transfer-empty p { margin: 6px auto 0; max-width: 270px; font-size: 11px; line-height: 1.65; }

.transfer-send-modal { position: fixed; z-index: 62; inset: 0; display: grid; width: min(100%,var(--app-width)); margin: auto; align-items: end; }
.transfer-send-modal[hidden] { display: none; }
.transfer-send-backdrop { position: absolute; inset: 0; border: 0; background: rgba(2,5,4,.72); backdrop-filter: blur(8px); }
.transfer-send-sheet {
  position: relative; max-height: min(82dvh,720px); overflow-y: auto; border: 1px solid rgba(238,232,217,.15); border-bottom: 0;
  border-radius: 28px 9px 0 0; padding: 9px 17px max(17px,calc(var(--safe-bottom) + 10px));
  background: radial-gradient(circle at 96% 0,rgba(120,157,241,.12),transparent 31%),linear-gradient(155deg,#19221e,#0d1311 62%);
  box-shadow: 0 -30px 86px rgba(0,0,0,.64); animation: command-sheet-rise 270ms var(--app-ease) both;
}
.transfer-send-handle { display: block; width: 38px; height: 4px; margin: 0 auto 13px; border-radius: 99px; background: rgba(238,232,217,.2); }
.transfer-send-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.transfer-send-head p { margin: 0 0 4px; color: #829087; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
.transfer-send-head h2 { margin: 0; color: var(--paper); font-family: "Songti SC", "STSong", serif; font-size: 23px; }
.transfer-send-head > button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(238,232,217,.12); border-radius: 50%; background: rgba(238,232,217,.035); color: #87918b; }
.transfer-send-head .ui-icon { width: 15px; height: 15px; }
.transfer-send-lead { margin: 11px 0 14px; color: #7f8a83; font-size: 11px; line-height: 1.55; }
.transfer-send-list { display: grid; gap: 7px; }
.transfer-send-item { display: grid; min-width: 0; grid-template-columns: 42px minmax(0,1fr) 44px; align-items: center; gap: 9px; border: 1px solid rgba(238,232,217,.09); border-radius: 13px 4px 13px 4px; padding: 7px 4px 7px 8px; background: rgba(3,7,6,.28); }
.transfer-send-item .transfer-thumb { width: 42px; height: 42px; border-radius: 11px 3px 11px 3px; }
.transfer-send-item-copy { min-width: 0; }
.transfer-send-item-copy strong { display: block; overflow: hidden; color: #d6d2c7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.transfer-send-item-copy small { display: block; margin-top: 4px; color: #6e7972; font-size: 9px; }
.transfer-send-remove { display: grid; width: 44px; height: 44px; place-items: center; border: 0; background: transparent; color: #7c8680; }
.transfer-send-remove .ui-icon { width: 13px; height: 13px; }
.transfer-send-more { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.transfer-send-more button { min-height: 42px; border: 1px solid rgba(238,232,217,.09); border-radius: 11px 4px 11px 4px; background: rgba(238,232,217,.025); color: #818d85; font-size: 10px; }
.transfer-send-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 2px 10px; color: #7b877f; font-size: 10px; }
.transfer-send-total span { display: inline-flex; align-items: center; gap: 5px; }
.transfer-send-total .ui-icon { width: 12px; height: 12px; }
.transfer-send-total strong { color: #aaa69b; font-weight: 650; }
.transfer-send-submit { display: flex; width: 100%; min-height: 55px; align-items: center; justify-content: space-between; border: 1px solid rgba(245,166,35,.4); border-radius: 15px 5px 15px 5px; padding: 0 15px 0 18px; background: linear-gradient(110deg,rgba(245,166,35,.22),rgba(245,166,35,.09)); color: #f0c674; font-size: 13px; font-weight: 720; box-shadow: 0 10px 26px rgba(245,166,35,.1); }
.transfer-send-submit .ui-icon { width: 17px; height: 17px; }
.transfer-send-submit:disabled { opacity: .45; }

.file-preview { position: fixed; z-index: 70; inset: 0; display: grid; width: min(100%,var(--app-width)); grid-template-rows: auto minmax(0,1fr) auto; margin: auto; background: #090d0b; }
.file-preview[hidden] { display: none; }
.file-preview-head { display: grid; min-height: calc(var(--safe-top) + 66px); grid-template-columns: 44px minmax(0,1fr) 44px; align-items: center; gap: 10px; border-bottom: 1px solid rgba(238,232,217,.09); padding: var(--safe-top) 13px 0; background: rgba(15,21,18,.98); }
.file-preview-head > button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: rgba(238,232,217,.035); color: #a2aba5; }
.file-preview-head > button:disabled { opacity: .35; }
.file-preview-head .ui-icon { width: 18px; height: 18px; }
.file-preview-head div { min-width: 0; text-align: center; }
.file-preview-head p { margin: 0 0 3px; color: #6f7b74; font-size: 8px; font-weight: 740; letter-spacing: .11em; }
.file-preview-head h1 { overflow: hidden; margin: 0; color: #dcd8cd; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-stage { position: relative; display: grid; min-height: 0; overflow: auto; place-items: center; background: radial-gradient(circle at 50% 34%,rgba(33,45,39,.5),transparent 54%),#070a09; }
.file-preview-stage::before { position: absolute; inset: 0; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(238,232,217,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(238,232,217,.025) 1px,transparent 1px); background-size: 32px 32px; content: ""; }
.file-preview-loading { position: relative; display: grid; justify-items: center; color: #8e9992; }
.file-preview-loading i { width: 28px; height: 28px; margin-bottom: 13px; border: 2px solid rgba(238,232,217,.1); border-top-color: var(--signal); border-radius: 50%; animation: transfer-spin 900ms linear infinite; }
.file-preview-loading strong { color: #c7c3b8; font-family: "Songti SC", "STSong", serif; font-size: 17px; }
.file-preview-loading span { margin-top: 6px; font-size: 10px; }
.file-preview-stage > img { position: relative; display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.file-preview-stage > video { position: relative; width: 100%; max-height: 100%; background: #000; }
.file-preview-stage > audio { position: relative; width: min(88%,420px); }
.file-preview-stage > iframe { position: relative; width: 100%; height: 100%; border: 0; background: #f5f2ea; }
.file-preview-stage[data-preview-kind="image"],
.file-preview-stage[data-preview-kind="video"],
.file-preview-stage[data-preview-kind="html"],
.file-preview-stage[data-preview-kind="pdf"] { overflow: hidden; }
.file-preview-stage[data-preview-kind="html"] { place-items: stretch; background: #f7f4ec; }
.file-preview-stage[data-preview-kind="pdf"] { place-items: stretch; background: #242824; }
.file-preview-stage > .pdf-canvas-preview { position: relative; min-height: 100%; }
.file-preview-stage[data-preview-kind="text"] { place-items: start stretch; }
.file-preview-text { position: relative; width: 100%; min-height: 100%; padding: 24px 19px 60px; color: #d1cec4; font: 12px/1.78 "SF Mono", Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.file-preview-text.markdown-body { padding: 27px 21px 64px; font-family: "Songti SC", "STSong", serif; font-size: 15px; line-height: 1.82; white-space: normal; }
.file-preview-text.markdown-body h2 { margin-top: 1.4em; color: #f0eadc; font-size: 1.5em; letter-spacing: -.02em; }
.file-preview-text.markdown-body h3 { margin-top: 1.25em; color: #e2ddcf; font-size: 1.22em; }
.file-preview-text.markdown-body p { color: #cbc8be; }
.file-preview-fallback { position: relative; width: min(82%,340px); text-align: center; }
.file-preview-fallback .transfer-thumb { width: 76px; height: 76px; margin: 0 auto; border-radius: 20px 7px 20px 7px; color: var(--signal); }
.file-preview-fallback .transfer-ext { font-size: 14px; }
.file-preview-fallback strong { display: block; margin-top: 16px; color: #d1cdc2; font-family: "Songti SC", "STSong", serif; font-size: 19px; }
.file-preview-fallback p { margin: 8px 0 0; color: #7d8981; font-size: 11px; line-height: 1.65; }
/* 三列:说明 | 删除 | 分享。★删除必须在这里有一颗——在此之前它只藏在列表卡的右滑手势里
   (那颗按钮还是 aria-hidden + tabIndex=-1),键盘和读屏都够不着,人也找不到。 */
.file-preview-actions { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; border-top: 1px solid rgba(238,232,217,.09); padding: 10px 14px max(10px,var(--safe-bottom)); background: #111815; }
.file-preview-actions > button.is-danger { min-width: 44px; justify-content: center; padding: 0 11px; border-color: rgba(190,120,108,.28); background: rgba(190,120,108,.07); color: #bd8277; }
.file-preview-actions > div { min-width: 0; }
.file-preview-actions span { display: block; overflow: hidden; color: #aaa89f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-actions small { display: block; overflow: hidden; margin-top: 4px; color: #68736c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.file-preview-actions > button { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; border: 1px solid rgba(245,166,35,.26); border-radius: 12px 4px 12px 4px; padding: 0 12px; background: rgba(245,166,35,.08); color: #d2a759; font-size: 10px; font-weight: 690; }
.file-preview-actions > button:disabled { opacity: .38; }
.file-preview-actions .ui-icon { width: 15px; height: 15px; }
body.transfer-send-open, body.file-preview-open { overflow: hidden; }
body.file-preview-open .app-tabbar-shell { display: none; }
body.transfer-send-open .toast, body.file-preview-open .toast { bottom: calc(var(--safe-bottom) + 16px); }

@keyframes transfer-spin { to { transform: rotate(360deg); } }

.task-confirm-sheet, .needs-action-sheet, .project-picker-sheet, .conversation-switcher-sheet { width: min(100%, var(--app-width)); }
.conversation-view { width: min(100%, var(--app-width)); right: 0; left: 0; margin: auto; }
.toast { z-index: 80; bottom: calc(var(--app-tabbar-height) + var(--safe-bottom) + 10px); max-width: calc(var(--app-width) - 36px); }
body.command-sheet-open .toast, body.conversation-open .toast { bottom: calc(var(--safe-bottom) + 18px); }

@keyframes app-page-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes command-sheet-rise { from { opacity: 0; transform: translateY(36px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes live-breathe { 0%, 100% { opacity: .62; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.12); } }

@media (min-width: 521px) {
  .app-shell { border-right: 1px solid rgba(238,232,217,.1); border-left: 1px solid rgba(238,232,217,.1); }
}

@media (max-width: 420px) {
  .app-shell { padding: 0; }
  .app-page { --app-page-pad: 15px; }
  .pairing-page { padding-right: 15px; padding-left: 15px; }
  .mobile-header { padding-right: 15px; padding-left: 15px; }
  .home-page .metric-card, .home-page .home-mac-status { gap: 6px; padding: 8px 4px; }
  .home-page .metric-card strong { font-size: 22px; }
  .dashboard-subnav button { padding: 0 6px; font-size: 11px; }
}

@media (max-width: 350px) {
  .mobile-brand-copy small { display: none; }
  .header-device-shortcut { min-width: 55px; padding: 0 9px; }
  .home-page .metric-card, .home-page .home-mac-status { min-height: 64px; gap: 5px; padding: 7px 2px; }
  .home-page .metric-card strong { font-size: 20px; }
  .home-page .metric-card > span, .home-page .home-mac-status > span { font-size: 10px; }
  .home-page .home-mac-status strong { gap: 4px; font-size: 13px; }
  .dashboard-subnav button { padding: 0 3px; font-size: 10px; }
  .app-tab { font-size: 9px; }
  .device-notification-head { grid-template-columns: 39px minmax(0,1fr) auto; gap: 8px; }
  .device-notification-icon { width: 39px; height: 39px; }
  .device-notification-icon .ui-icon { width: 18px; height: 18px; }
  .notification-toggle { min-width: 58px; padding-right: 6px; padding-left: 6px; }
  .device-notification-kinds span { padding-right: 7px; padding-left: 7px; }
  .device-cache-head { grid-template-columns: 40px minmax(0,1fr); }
  .device-cache-live { display: none; }
  .device-cache-metrics { grid-template-columns: 1fr 1fr; }
  .device-cache-metrics > div:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(238,232,217,.065); border-left: 0; }
  .device-cache-actions { grid-template-columns: 1fr; }
  .device-cache-actions button { width: 100%; }
}

@media (max-height: 680px) {
  .mobile-header { min-height: calc(var(--safe-top) + 60px); padding-top: calc(var(--safe-top) + 7px); padding-bottom: 7px; }
  .mobile-brand-mark { width: 34px; height: 34px; flex-basis: 34px; }
  .app-page { --app-page-pad-top: calc(var(--safe-top) + 9px); }
  .page-intro > p:last-child, .dashboard-page-top > p:last-child { margin-top: 5px; line-height: 1.45; }
  .home-dashboard-stage { margin-top: 8px; }
  .app-tabbar-shell { padding-top: 3px; }
  .app-tabbar { min-height: calc(46px + var(--safe-bottom)); }
  .command-sheet-modal #messageInput { height: 108px; min-height: 108px; }
  .command-sheet-modal .task-image-uploader { padding-top: 8px; padding-bottom: 8px; }
  .command-sheet-modal .task-image-preview { height: 72px; margin-top: 7px; padding: 4px 2px; }
  .command-sheet-modal .task-image-item { width: 64px; height: 64px; flex-basis: 64px; }
  .command-sheet-modal .agent-option { min-height: 56px; }
  .command-sheet-modal #projectHint, .command-sheet-modal #agentHint { display: none; }
  .command-sheet-modal .composer-foot { padding-top: 9px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-page.is-active, .command-sheet-modal .command-card { animation: none !important; }
  .transfer-card, .transfer-card-delete { transition: none !important; }
}

/* ============ 管家频道 ============
   看板回答「现在什么状态」，频道回答「你不在的这段时间里依次发生了什么」。
   两者读的是同一批事实，只是排布方式不同。 */

/* 顶栏：贴着屏幕最上沿、铺满整幅宽度的一条，而不是浮在内容里的盒子。
   负 margin 抵消页面自身的左右与顶部内边距，让它真正顶到边——否则
   sticky 只是「滚到一半才粘住」，视觉上永远差一口气。 */
.home-mode-switch {
  position: sticky;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  /* 负 top 让它粘到 scrollport 之上：sticky 的约束框是 padding box，
     不抵消掉页面的 padding-top，它就只能停在离屏幕顶还差一截的地方。 */
  top: calc(-1 * var(--app-page-pad-top));
  margin: calc(-1 * var(--app-page-pad-top)) calc(-1 * var(--app-page-pad)) 16px;
  padding: calc(var(--safe-top) + 13px) var(--app-page-pad) 0;
  border-bottom: 1px solid var(--line);
  /* 不透明是必须的：半透明会让滚过去的流从背后透出来。 */
  background: var(--ink);
}
.home-mode-tabs { display: flex; align-items: flex-end; gap: 22px; }
/* 文字加一条下划线，不再是两个胶囊盒子：同一屏里盒子越少层次越清楚，
   流本身才是主角。 */
.home-mode-switch button[data-home-mode] {
  position: relative;
  padding: 0 1px 12px;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.24s ease;
}
.home-mode-switch button[data-home-mode]::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
  content: "";
  transition: background 0.24s ease;
}
.home-mode-switch button[data-home-mode].is-active { color: var(--paper); }
.home-mode-switch button[data-home-mode].is-active::after { background: var(--signal); }

/* 顶栏上唯一常驻的状态：真正卡着你的那几件。点它跳到下一件。
   其余数字都跟着流滚走——常驻的东西越少，它越有分量。 */
.channel-alarm {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  border: 1px solid rgba(255, 115, 92, 0.26);
  border-radius: 99px;
  padding: 5px 11px 5px 9px;
  background: rgba(255, 115, 92, 0.11);
  color: #ffb0a0;
  font-size: 12.5px;
  font-weight: 650;
  white-space: nowrap;
  transition: transform 0.16s ease;
}
.channel-alarm:active { transform: scale(0.95); }
.channel-alarm i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--danger);
  animation: channel-pulse 1.9s infinite;
}
.channel-alarm small {
  color: rgba(255, 176, 160, 0.7);
  font-size: 11.5px;
  font-weight: 500;
}

/* 时间轴的位置只有这一处真相：时间列宽 + 间距推出轨道中心，竖线、圆点、
   总账缩进都从它算。定义在 view 上而不是 stream 上，因为总账那行是 stream
   的兄弟，得读同一组变量才能对齐。 */
.channel-view {
  --channel-time-w: 34px;
  --channel-gap: 20px;
  --channel-rail: calc(var(--channel-time-w) + var(--channel-gap) / 2);
  --channel-dot: 7px;
  margin-top: 0;
}

/* 次要总账：一行轻文字，跟着流滚走，不占常驻高度。 */
.channel-overview {
  margin: 0 0 4px;
  padding-left: calc(var(--channel-time-w) + var(--channel-gap));
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1.6;
}
.channel-overview b { color: var(--paper-dim); font-weight: 600; }

@keyframes channel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* 以前竖线写死 24px、圆点写死 -16px、时间列 34px 各写各的，结果圆点
   压在时间数字上，还和竖线差了 9px。坐标现在全从 .channel-view 的变量推。 */
.channel-stream {
  position: relative;
  padding: 10px 0 4px;
}
.channel-stream::before {
  position: absolute; top: 20px; bottom: 10px;
  left: calc(var(--channel-rail) - 0.5px); width: 1px;
  background: linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent);
  content: "";
}

.channel-empty {
  padding: 30px 18px;
  color: var(--text-faint);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.channel-event {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: var(--channel-time-w) minmax(0, 1fr);
  column-gap: var(--channel-gap);
  margin-bottom: 15px;
}
.channel-event-time {
  padding-top: 3px;
  color: var(--text-faint);
  font: 10.5px/1.3 "SF Mono", Menlo, monospace;
  text-align: right;
}
.channel-event-body { position: relative; min-width: 0; }
.channel-event-body::before {
  position: absolute; top: 6px;
  /* 圆点圆心落在轨道上：body 左缘 = 时间列宽 + 间距，往回退半个间距再退半个点。 */
  left: calc(-1 * var(--channel-gap) / 2 - var(--channel-dot) / 2);
  width: var(--channel-dot); height: var(--channel-dot);
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--text-faint);
  content: "";
}
/* 圆点的颜色 = 哪个对话；外环 = 要不要紧。
   两件事分给两个通道后，同一个文件夹里并排跑的几个对话，
   竖着扫一眼就能靠颜色归堆——状态另有那句「跑完了 / 在问你」在说。 */
.channel-event[data-task-color="0"] .channel-event-body::before { background: #f5a623; }
.channel-event[data-task-color="1"] .channel-event-body::before { background: #72d7ad; }
.channel-event[data-task-color="2"] .channel-event-body::before { background: #8aa8f7; }
.channel-event[data-task-color="3"] .channel-event-body::before { background: #c39bf0; }
.channel-event[data-task-color="4"] .channel-event-body::before { background: #ff9db0; }
.channel-event[data-task-color="5"] .channel-event-body::before { background: #6fd3e0; }
.channel-event[data-task-color="6"] .channel-event-body::before { background: #c8d95f; }
.channel-event[data-task-color="7"] .channel-event-body::before { background: #ffb078; }

/* 外环只留给「要你管」和「正在动」，其余状态靠文字说话。 */
.channel-event[data-tone="fail"] .channel-event-body::before,
.channel-event[data-tone="ask"] .channel-event-body::before {
  box-shadow: 0 0 0 3px rgba(255, 115, 92, 0.28);
}
.channel-event[data-tone="ask"] .channel-event-body::before {
  animation: channel-pulse 1.9s infinite;
}
.channel-event[data-tone="running"] .channel-event-body::before {
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
  animation: channel-pulse 2.2s infinite;
}

.channel-event-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  color: var(--paper-dim);
  font-size: 13.5px;
  line-height: 1.55;
}
.channel-event-line em { font-style: normal; color: var(--paper); font-weight: 600; }

/* 任务徽标：同一件事永远同名同色，跨会话稳定（色号来自 Mac 端哈希）。 */
.channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 2.5px 7px;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.channel-chip::before {
  flex: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  content: "";
}
.channel-chip[data-color="0"] { color: #f5a623; border-color: rgba(245,166,35,.3); background: rgba(245,166,35,.1); }
.channel-chip[data-color="1"] { color: #72d7ad; border-color: rgba(114,215,173,.3); background: rgba(114,215,173,.1); }
.channel-chip[data-color="2"] { color: #8aa8f7; border-color: rgba(138,168,247,.3); background: rgba(138,168,247,.1); }
.channel-chip[data-color="3"] { color: #c39bf0; border-color: rgba(195,155,240,.3); background: rgba(195,155,240,.1); }
.channel-chip[data-color="4"] { color: #ff9db0; border-color: rgba(255,157,176,.3); background: rgba(255,157,176,.1); }
.channel-chip[data-color="5"] { color: #6fd3e0; border-color: rgba(111,211,224,.3); background: rgba(111,211,224,.1); }
.channel-chip[data-color="6"] { color: #c8d95f; border-color: rgba(200,217,95,.3); background: rgba(200,217,95,.1); }
.channel-chip[data-color="7"] { color: #ffb078; border-color: rgba(255,176,120,.3); background: rgba(255,176,120,.1); }

.channel-said {
  margin: 5px 0 0;
  padding-left: 9px;
  border-left: 2px solid rgba(245, 166, 35, 0.4);
  color: var(--paper-dim);
  font-size: 12.5px;
  line-height: 1.6;
}
.channel-note {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.6;
}

.channel-facts { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 7px; }
.channel-facts span {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  color: var(--text-faint);
  font: 10.5px/1.3 "SF Mono", Menlo, monospace;
}
.channel-facts span[data-tone="ok"] { border-color: rgba(114,215,173,.24); color: var(--mint); }
.channel-facts span[data-tone="bad"] { border-color: rgba(255,115,92,.26); color: #ffa494; }

/* 「上次你看到这里」——线以下才是这次要补的课。 */
.channel-seam {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.channel-seam::before, .channel-seam::after {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,166,35,.42));
  content: "";
}
.channel-seam::after { background: linear-gradient(90deg, rgba(245,166,35,.42), transparent); }
.channel-seam span {
  color: var(--signal);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  white-space: nowrap;
}

.channel-day {
  position: relative;
  z-index: 2;
  margin: 2px 0 13px;
  padding-left: calc(var(--channel-time-w) + var(--channel-gap));
  color: var(--text-faint);
  font: 10px/1 "SF Mono", Menlo, monospace;
  letter-spacing: 0.16em;
}

/* 看过的行不再压暗：读过一遍不等于不重要，回头翻正是频道的用处。
   「上次你看到这里」那条金线已经标清了断点，不需要再靠调暗强调一次。 */

/* 活卡片（等你答的提问、跑完待看的结果）直接嵌在流里，
   用的是待我处理那套原生卡片 —— 回答链路因此一行都不用改。 */
.channel-live { margin-top: 8px; }
.channel-live .interaction-card { margin: 0; }
.channel-live .conversation-list-shell { margin: 0; }

.channel-foot {
  padding: 6px 0 2px;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.75;
  text-align: center;
}

@media (max-width: 380px) {
  /* 窄屏只收紧这两个数，竖线/圆点/日期缩进都跟着自动重算。 */
  .channel-view { --channel-time-w: 30px; --channel-gap: 15px; }
  .home-mode-tabs { gap: 18px; }
}

/* 未读只加一圈外环，绝不改填充色——那颗圆点的颜色是「哪个对话」的标识，
   被状态色盖掉就等于把刚建立的归堆线索又抹了。 */
.channel-event.is-unread .channel-event-body::before {
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.34);
}
.channel-event.is-unread .channel-event-line em { color: var(--signal-hot); }

/* 整行可点：能找回对话的事件行做成按钮，点它就进那段对话。
   以前只有未读的完成行挂一个小入口，其余全是死的只读文字。 */
.channel-row {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 2px 8px 2px 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background 0.18s ease;
}
.channel-row.is-openable { cursor: pointer; }
.channel-row.is-openable:active { background: rgba(238, 232, 217, 0.05); }

/* 任务名：项目徽标之后紧跟这一条，一行答完「哪个项目的哪件事」。
   长了就换行，不截断——认不出是哪件事，这条流就白记了。 */
.channel-task {
  color: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.channel-elapsed { color: var(--text-faint); font-size: 12.5px; }

/* 打开入口：一条下划线加箭头，比真正等你答的那张卡轻。 */
.channel-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(238, 232, 217, 0.16);
}
.channel-go .ui-icon { width: 13px; height: 13px; }
.channel-event.is-unread .channel-go {
  color: var(--signal);
  box-shadow: inset 0 -1px 0 rgba(245, 166, 35, 0.42);
}

@media (max-width: 380px) {
  /* 窄屏只收紧这两个数，竖线/圆点/日期缩进都跟着自动重算。 */
  .channel-view { --channel-time-w: 30px; --channel-gap: 15px; }
  .home-mode-tabs { gap: 18px; }
}