/* Envelop web chat. Companion to ../style.css; same paper theme. */
html.chat-page { height: 100%; }
.chat-main {
  padding-block: 40px 56px;
  min-height: 60vh;
}
.chat-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfaf6;
  overflow: hidden;
}
.chat-welcome {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 32px 28px;
  text-align: center;
}
.chat-mobile-demo { display:none; }
.chat-welcome h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -1px;
  margin: 12px 0 18px;
}
.chat-welcome p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
}
.chat-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.chat-row input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 14px 18px;
  border: 1px solid #bfc5b9;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
/* Tappable examples: tap enters the exact text. */
.try-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.try-row.center { margin-top: 16px; }
.thread-suggestions {
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  gap: 6px;
  margin: 0;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  background: #f6f5ef;
}
.thread-suggestions > span { flex: 0 0 auto; }
.thread-suggestions .try-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 30px;
  padding: 4px 11px;
  font-size: 12px;
  white-space: nowrap;
}
.try-chip {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid #bfc5b9;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.try-chip:hover { border-color: var(--ink); background: #e9ecdf; }
.try-hint {
  font-size: 13px;
  color: var(--muted);
  margin: 10px 0 0;
}
.welcome-more {
  margin-top: 14px;
  text-align: left;
  border-top: 1px solid var(--line);
}
.welcome-more summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  gap: 12px;
  align-items: center;
  min-height: 44px;
  list-style: none;
}
.welcome-more summary::-webkit-details-marker { display: none; }
.welcome-more summary::after { content: "+"; margin-left: auto; font-size: 20px; font-weight: 300; }
.welcome-more[open] summary::after { content: "−"; }
.welcome-more > div { padding: 0 0 8px; }
.welcome-more p { text-align: left; margin: 0 0 12px; }
.welcome-more code {
  font-size: 13px;
  background: #efece4;
  padding: 1px 5px;
  border-radius: 3px;
  overflow-wrap: anywhere;
}
.chat-row button, .chat-send {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  min-height: 48px;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: var(--ink);
  color: #fffdf5;
  cursor: pointer;
  white-space: nowrap;
}
.chat-row button:disabled, .chat-send:disabled {
  opacity: 0.45;
  cursor: default;
}
.chat-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: min(660px, calc(100vh - 250px));
  height: min(660px, calc(100dvh - 250px));
  min-height: 440px;
}
.chat-side {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
.chat-me {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.5;
}
.chat-me strong { font-size: 14px; }
.chat-me-row { display: flex; align-items: center; gap: 8px; }
.chat-me-row { align-items: center; }
.chat-me-row .icon-btn { margin-left: auto; }
.icon-btn { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 14px; padding: 4px; }
.icon-btn:hover { color: var(--red); }
.chat-edit { display: flex; gap: 6px; margin-top: 8px; }
.chat-edit input { flex: 1; min-width: 0; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid #bfc5b9; border-radius: 6px; background: #fff; color: var(--ink); }
.chat-edit button { font: inherit; font-size: 12px; font-weight: 600; padding: 8px 10px; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: #fffdf5; cursor: pointer; }
.chat-edit button:last-child { background: none; color: var(--ink); border-color: #bfc5b9; }
.chat-me span { color: var(--muted); }
.chat-search {
  margin: 12px 12px 4px;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid #bfc5b9;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  width: calc(100% - 24px);
}
.chat-people {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 0 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.chat-people button {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--ink);
}
.chat-people button:hover { background: #efece4; }
.chat-people li { display: flex; align-items: center; }
.chat-people li > button:first-child { flex: 1; min-width: 0; }
.row-remove {
  flex-shrink: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  padding: 10px 14px 10px 4px;
}
.row-remove:hover { color: var(--red); }
.chat-admin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 12px 8px;
  padding: 10px 12px;
  border: 1px dashed #bfc5b9;
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}
.chat-admin button {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid var(--red);
  border-radius: 6px;
  background: none;
  color: var(--red);
  cursor: pointer;
}
.chat-people button.unread .who b { font-weight: 700; }
.unread-pip {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(90, 113, 90, 0.16);
}
.chat-side .avatar {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fffdf5;
  background: var(--green);
}
.chat-side .who { min-width: 0; }
.chat-side .who b {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-side .who small { color: var(--muted); font-size: 12px; }
.chat-side .who img { flex-shrink: 0; }
.chat-forget {
  margin: 8px 12px 0;
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  align-self: flex-start;
}
.chat-forget.danger { color: var(--red); margin-bottom: 12px; }
.chat-forget + .chat-forget { margin-top: 2px; }
.chat-thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
#chat-convo {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.chat-peer-bar,
.chat-notice,
.vt-banner,
.chat-composer { flex-shrink: 0; }
.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--muted);
  padding: 32px;
}
.chat-empty strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  color: var(--ink);
  margin-bottom: 8px;
}
.chat-peer-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
  min-width: 0;
}
.chat-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 4px 0 4px 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.chat-peer {
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  flex: 1;
}
.chat-peer small { font-weight: 400; color: var(--muted); }
.chat-notice {
  padding: 8px 20px;
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: #f4f1e8;
}
.chat-notice span,
.chat-notice small { display: block; }
.chat-notice small {
  margin-top: 1px;
  color: #7a877a;
  font: 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: .035em;
}
.chat-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 0 auto;
}
.chat-typing {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: auto;
}
.chat-msg.typing {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 12px 16px;
}
.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 10px;
}
.typing-dots i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.22;
  animation: typing-dot 1.15s ease-in-out infinite;
}
.typing-dots i:nth-child(2) { animation-delay: 0.16s; }
.typing-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing-dot {
  0%, 80%, 100% { opacity: 0.22; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.job-status .typing-dots {
  margin-right: 8px;
  vertical-align: -1px;
}
.chat-send[aria-busy="true"],
#chat-join[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  .typing-dots i {
    animation-name: typing-dot-fade;
    transform: none;
  }
  @keyframes typing-dot-fade {
    0%, 80%, 100% { opacity: 0.22; }
    40% { opacity: 1; }
  }
}
.chat-msg {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.chat-msg time {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.chat-msg.me {
  align-self: flex-end;
  background: rgba(90, 113, 90, 0.16);
  border-bottom-right-radius: 3px;
}
.chat-msg.them {
  align-self: flex-start;
  background: rgba(100, 106, 101, 0.12);
  border-bottom-left-radius: 3px;
}
.chat-composer {
  display: flex;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
}
.chat-composer input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #bfc5b9;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.chat-error {
  padding: 10px 20px;
  font-size: 13px;
  color: #8f1f16;
  border-top: 1px solid var(--line);
  background: #f7e9e4;
}
[hidden] { display: none !important; }

@media (max-width: 760px) {
  body.chat-page:has(#chat-grid:not([hidden])) {
    display: flex;
    flex-direction: column;
    min-height: var(--app-height, 100dvh);
    height: var(--app-height, 100dvh);
    overflow: hidden;
  }
  body.chat-page header.wrap {
    width: 100%;
    padding-inline: 12px;
    height: calc(56px + env(safe-area-inset-top));
    flex-shrink: 0;
    box-sizing: border-box;
  }
  body.chat-page .chat-main {
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  body.chat-page .chat-card {
    flex: 1;
    min-height: 0;
    border: 0;
    border-radius: 0;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    background: var(--paper);
  }
  body.chat-page:has(#chat-grid:not([hidden])) footer { display: none; }
  body.chat-page:has(#chat-grid:not([hidden])) .open-compute { display: none; }
  body.chat-page.chat-thread-open header.wrap { display: none; }
  .message-tabs { display: none; }

  .chat-welcome {
    padding: 28px 20px 32px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
  }
  .chat-mobile-demo { display:block;margin:-28px -20px 22px;text-align:left;color:var(--muted);font-size:11px;line-height:1.45;text-decoration:none; }
  .chat-mobile-demo img { display:block;width:100%;height:auto;aspect-ratio:712/480;object-fit:cover;background:#ecebe4; }
  .chat-mobile-demo span { display:block;padding:7px 20px;border-bottom:1px solid var(--line); }
  .chat-welcome h1 { font-size: clamp(28px, 8vw, 36px); }
  .chat-row { flex-direction: column; }
  .chat-row input { font-size: 16px; min-height: 48px; }
  .chat-row button { width: 100%; border-radius: 999px; }

  .chat-grid {
    flex: 1;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
  }
  .chat-grid[data-pane="list"] .chat-thread { display: none; }
  .chat-grid[data-pane="thread"] .chat-side { display: none; }
  .chat-side,
  .chat-thread,
  #chat-convo {
    flex: 1;
    min-height: 0;
    border: 0;
  }
  .chat-people { max-height: none; }
  .chat-people button { min-height: 48px; padding: 12px 16px; }
  .chat-forget { min-height: 44px; padding: 8px 4px; }
  .chat-forget.danger { margin-bottom: calc(12px + env(safe-area-inset-bottom)); }

  .chat-search { font-size: 16px; width: calc(100% - 24px); }
  .chat-side .avatar { width: 40px; height: 40px; font-size: 15px; }
  .chat-back { display: inline-flex; }
  .chat-peer {
    padding: 10px 12px 10px 4px;
    flex-direction: row;
    align-items: center;
    gap: 2px 6px;
  }
  .chat-peer small {
    flex-basis: 100%;
    width: auto;
  }
  .chat-log { padding: 16px 14px; }
  .typing-dots i { width: 8px; height: 8px; }
  .unread-pip { width: 10px; height: 10px; }
  .chat-msg { max-width: 88%; }
  .chat-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: #fbfaf6;
  }
  .chat-composer input {
    grid-column: 1;
    grid-row: 1;
    font-size: 16px;
    min-height: 44px;
    border-radius: 999px;
    padding-inline: 16px;
  }
  .chat-send {
    grid-column: 3;
    grid-row: 1;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 999px;
  }
  .chat-composer #vt-preview {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    min-height: 44px;
    padding: 8px 12px;
  }
  .try-chip { white-space: normal; }
  .vt-banner { display: none; }
}

.message-tabs { display:flex;gap:6px;margin:0 0 6px; }
.message-tabs button { border:1px solid var(--line,#dcded3);border-radius:999px;padding:2px 10px;background:transparent;color:inherit;font:inherit;font-size:11px;cursor:pointer; }
.message-tabs button[aria-pressed="true"] { background:#244c39;color:white;border-color:#244c39; }
@media (max-width: 760px) {
  .message-tabs { display: none; }
}
.message-content { white-space:pre-wrap;overflow-wrap:anywhere; }
.code-view { font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;max-height:260px;overflow:auto; }
.chat-job { margin:6px 0;padding:2px 0;color:#242a28;max-width:100%;display:flex;flex-direction:column; }
.job-text { align-self:flex-end;font-size:14px;line-height:1.55;overflow-wrap:anywhere;background:rgba(90,113,90,0.16);border-radius:14px;border-bottom-right-radius:3px;padding:8px 12px;max-width:88%; }
.job-text { font-size:15px;line-height:1.55;overflow-wrap:anywhere; }
.job-understood { align-self:flex-start;margin:5px 0 0;padding:0 10px;font-size:12px;line-height:1.45;color:#596554; }
.job-understood small { display:block;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#7a877a; }
.job-understood code { font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;color:#24382b;overflow-wrap:anywhere; }
.job-status { font-weight:600;font-size:12.5px;line-height:1.5;margin:6px 0 2px;display:flex;align-items:center;flex-wrap:wrap; }
.hardware-fallback { gap:6px; }
.hardware-fallback button { border:1px solid #244c39;border-radius:999px;padding:4px 9px;background:none;color:#244c39;font:inherit;font-weight:600;cursor:pointer; }
.hardware-fallback button:hover { background:#244c39;color:#fff; }
.job-response { align-self:flex-start;max-width:88%;padding:7px 10px;border-left:2px solid #9bac96;background:rgba(244,241,232,.72);font-weight:400; }
.job-response[data-phase="failed"] { border-left-color:#ad7068;background:rgba(247,233,228,.72); }
.job-response-copy { min-width:0;display:flex;flex-direction:column; }
.job-human { font-size:13px;line-height:1.45;color:var(--ink); }
.job-technical { margin-top:2px;color:#7a877a;font:10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.035em;overflow-wrap:anywhere; }
.job-guidance { margin-top:5px;font-size:12px;line-height:1.45;color:#596554; }
.job-exec { align-self:stretch;margin-top:6px;border-top:1px solid #dfe5da;padding-top:3px; }
.job-exec summary { cursor:pointer;font-size:13px;font-weight:600;color:#244c39;min-height:36px;display:flex;align-items:center;padding:4px 0;gap:8px; }
.job-exec summary::after { font-size:18px; }
.exec-block { margin:8px 0; }
.exec-block small { display:block;font-size:11px;color:#7a877a;margin-bottom:4px; }
.exec-block pre { margin:0;font:12px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:#fff;border:1px solid #dfe5da;border-radius:8px;padding:10px 12px;max-height:220px;overflow:auto; }
.virtual-text { font-size:14px;line-height:1.6;overflow-wrap:anywhere; }
.vt-banner { display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 16px;font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);background:#f4f1e8; }
.vt-banner button, .chat-composer #vt-preview { font:inherit;font-size:12px;font-weight:600;padding:6px 12px;min-height:32px;border:1px solid #244c39;border-radius:999px;background:none;color:#244c39;cursor:pointer;white-space:nowrap; }
.vt-banner button:hover, .chat-composer #vt-preview:hover { background:#244c39;color:#fff; }
.virtual-reply { align-self:flex-start;background:rgba(100,106,101,0.12);border:0;border-radius:14px;border-bottom-left-radius:3px;margin:6px 0 0;padding:8px 12px;max-width:88%; }
.virtual-reply>small { display:block;margin-bottom:2px;color:#635d3a;font-size:11px; }
.help-guide { gap:10px; }
.help-guide h2 { margin:2px 0 0;font:400 23px/1.2 var(--serif); }
.help-intro { margin:0;max-width:720px;color:var(--muted);font-size:13px;line-height:1.55; }
.help-groups { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.help-groups section { border:1px solid #dfe5da;border-radius:8px;background:#fff;padding:10px 12px; }
.help-groups h3 { margin:0 0 7px;font-size:12px;letter-spacing:.045em;text-transform:uppercase;color:#596554; }
.help-groups ul { list-style:none;margin:0;padding:0;display:grid;gap:7px; }
.help-groups li { min-width:0;display:grid;gap:2px; }
.prompt-button { width:100%;min-height:44px;display:inline-flex;align-items:center;text-align:left;border:1px solid #dfe5da;border-radius:7px;padding:7px 11px;background:#f8f7f2;color:#24382b;font-family:inherit;font-size:12px;font-weight:600;line-height:1.4;cursor:pointer; }
.prompt-button:hover, .prompt-button:focus-visible { border-color:#244c39;background:#eef2e9; }
.prompt-button:disabled { opacity:.55;cursor:wait; }
.prompt-link { text-decoration:none; }
.help-groups code { font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:normal;overflow-wrap:anywhere;color:#24382b; }
.help-technical { display:block; }
.knowledge-card { gap:7px; }
.knowledge-answer { align-self:flex-start;max-width:88%;margin:0;padding:9px 11px;border-left:2px solid #9bac96;background:rgba(244,241,232,.72);font-size:13px;line-height:1.55;overflow-wrap:anywhere; }
.prompt-list { display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start;max-width:100%; }
.prompt-list .prompt-button { width:auto;border-radius:999px;font-weight:500; }
.job-technical a { color:inherit;text-underline-offset:2px; }
.legacy-fallback { max-width:88%;border-left:2px solid #ad7068;border-bottom-left-radius:3px; }
.legacy-fallback .job-technical { display:block; }
.fallback-hint { margin:8px 0 0;font-size:12px;color:var(--muted); }
.fallback-hint button { border:1px solid #244c39;border-radius:999px;padding:4px 9px;background:none;color:#244c39;font:inherit;font-weight:600;cursor:pointer; }
.fallback-hint button:hover { background:#244c39;color:#fff; }
.fallback-raw pre { margin:4px 0 0;font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:var(--muted); }

.open-compute { margin-top:36px;border:1px solid var(--line);border-radius:10px;background:#fbfaf6;padding:24px;overflow:hidden; }
.open-compute .section-label { display:flex;justify-content:space-between;gap:16px;margin-bottom:18px;font:600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:#687367; }
.open-compute-heading { display:grid;grid-template-columns:minmax(0,.8fr) minmax(280px,1.2fr);gap:28px;align-items:end; }
.open-compute-heading h2 { margin:0;font:400 clamp(28px,4vw,46px)/1.02 var(--serif);letter-spacing:-.035em; }
.open-compute-heading p,.open-compute-note { margin:0;color:var(--muted);font-size:14px;line-height:1.65; }
.comparison-diagram { margin-top:24px; }
.comparison-input { position:relative;z-index:1;width:max-content;max-width:calc(100% - 32px);margin:0 auto;padding:9px 14px;border:1px solid #aeb9aa;border-radius:999px;background:#fff;text-align:center;box-shadow:0 2px 0 rgba(63,82,68,.08); }
.comparison-input span { display:block;color:#687367;font:600 9px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.09em;text-transform:uppercase; }
.comparison-input strong { display:block;margin-top:2px;font:600 12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#244c39;overflow-wrap:anywhere; }
.comparison-route-marker { margin:10px 0;color:#687367;text-align:center;font:600 9px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase; }
.response-compare { display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px; }
.response-compare article { position:relative;min-width:0;border:1px solid #dfe5da;border-radius:9px;background:#fff;padding:16px; }
.response-compare article.response-deterministic { border-color:#9bac96;background:#f5f6ef; }
.response-compare h3 { margin:0 0 12px;font-size:13px;letter-spacing:.055em;text-transform:uppercase; }
.response-compare article>p { display:grid;gap:3px;margin:16px 0 0;padding-top:12px;border-top:1px solid #dfe5da;color:var(--muted);font-size:12px;line-height:1.5; }
.response-compare article>p strong { font:600 13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#244c39; }
.response-cloud { position:relative;height:132px;border-radius:8px;background:radial-gradient(ellipse at center,rgba(109,127,112,.2),rgba(109,127,112,.06) 48%,transparent 72%);overflow:hidden; }
.response-cloud i { position:absolute;width:7px;height:7px;border-radius:50%;background:#7a877a;opacity:.58; }
.response-cloud i:nth-child(1) { left:12%;top:54%; }.response-cloud i:nth-child(2) { left:21%;top:25%; }.response-cloud i:nth-child(3) { left:29%;top:72%; }
.response-cloud i:nth-child(4) { left:38%;top:39%; }.response-cloud i:nth-child(5) { left:46%;top:17%; }.response-cloud i:nth-child(6) { left:51%;top:67%; }
.response-cloud i:nth-child(7) { left:59%;top:44%; }.response-cloud i:nth-child(8) { left:68%;top:22%; }.response-cloud i:nth-child(9) { left:74%;top:72%; }
.response-cloud i:nth-child(10) { left:83%;top:48%; }.response-cloud i:nth-child(11) { left:88%;top:18%; }.response-cloud i:nth-child(12) { left:16%;top:82%; }
.response-cloud strong { position:absolute;inset:auto 0 12px;text-align:center;color:#596554;font:600 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em; }
.deterministic-track { counter-reset:route-step;list-style:none;margin:0;padding:12px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.deterministic-track li { counter-increment:route-step;position:relative;min-width:0;min-height:42px;padding:10px 10px 10px 38px;border:1px solid #cad5c5;border-radius:7px;background:#fff;text-align:left;font:11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere; }
.deterministic-track li::before { content:counter(route-step);position:absolute;top:10px;left:10px;width:18px;height:18px;border-radius:4px;background:#e3ebe0;color:#244c39;text-align:center;font:700 10px/18px ui-monospace,SFMono-Regular,Consolas,monospace; }
.deterministic-track li span,.deterministic-track li strong { display:block; }
.deterministic-track li strong { margin-top:3px;color:#244c39;font-size:10px; }
.open-compute-note { margin-top:16px;max-width:900px; }
.open-compute-links { display:flex;flex-wrap:wrap;gap:8px;margin-top:16px; }
.open-compute-links a { min-height:44px;display:inline-flex;align-items:center;border:1px solid #bfc5b9;border-radius:999px;padding:8px 13px;color:#244c39;font-size:12px;font-weight:600;text-decoration:none; }
.open-compute-links a:hover,.open-compute-links a:focus-visible { border-color:#244c39;background:#eef2e9; }

@media (max-width: 760px) {
  .help-groups { grid-template-columns:1fr; }
  .help-guide h2 { font-size:21px; }
  .open-compute { margin-top:20px;padding:18px 14px; }
  .open-compute .section-label { display:grid;justify-content:start;gap:4px; }
  .open-compute-heading,.response-compare { grid-template-columns:1fr;gap:12px; }
  .comparison-input { width:auto;max-width:none;margin-inline:0;text-align:left;border-radius:8px; }
  .comparison-route-marker { margin:9px 2px;text-align:left; }
  .response-deterministic { order:-1; }
  .response-cloud { height:110px; }
  .deterministic-track { grid-template-columns:1fr;padding:4px 0; }
  .knowledge-answer { max-width:100%; }
  .prompt-list .prompt-button { width:100%; }
}