:root {
  --pp-canvas:#FAFBFC; --pp-surface:#FFFFFF; --pp-field:#F4F6F8;
  --pp-bubble:#E4EAF0; --pp-line:#E4E8EC; --pp-fg-1:#14181D;
  --pp-fg-2:#5A6470; --pp-fg-3:#98A1AC; --pp-accent:#4A5C6E;
  --pp-warning:#B85A4D;
}

.paper-panel {
  display:flex;
  width:100%;
  height:100%;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--pp-line);
  border-radius:14px;
  background:var(--pp-canvas);
  color:var(--pp-fg-1);
}

.paper-panel-header {
  display:flex;
  min-height:75px;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  padding:14px 16px 12px;
  border-bottom:1px solid var(--pp-line);
  background:var(--pp-surface);
}

.paper-brand-row,
.paper-pin-row {
  display:flex;
  min-width:0;
  align-items:center;
}

.paper-brand-row { gap:8px; }
.paper-brand-mark { width:14px; height:14px; flex:none; }
.paper-brand-name { font-size:13px; line-height:16px; }
.paper-pin-row { gap:7px; color:var(--pp-fg-2); font:400 10px/14px var(--font-mono); }
.paper-pin-label { flex:none; color:var(--pp-fg-3); }
.paper-pin-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.paper-thread {
  display:flex;
  min-height:0;
  flex:1;
  flex-direction:column;
  gap:18px;
  overflow-x:hidden;
  overflow-y:auto;
  padding:20px 16px 16px;
}

/* User message: right-aligned bubble, max 66%, corner 16/16/5/16 (Chat.tsx) */
.paper-user {
  max-width:66%;
  align-self:flex-end;
  padding:10px 14px;
  border-radius:16px 16px 5px 16px;
  background:var(--pp-bubble);
  color:var(--pp-fg-1);
  font-size:13px;
  line-height:20px;
  white-space:pre-wrap;
  overflow-wrap:break-word;
}

.paper-request { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* Role row: 4px accent dot + caps label (Assistant / 完成) */
.paper-role { display:flex; align-items:center; gap:8px; }
.paper-role-dot { width:4px; height:4px; flex:none; border-radius:50%; background:var(--pp-accent); }
.paper-role-label { color:var(--pp-fg-2); font:500 10px/12px var(--font-mono); letter-spacing:.16em; text-transform:uppercase; }

/* Assistant message: full width, no bubble */
.paper-agent {
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--pp-fg-1);
  font-size:13px;
  line-height:20px;
}

.paper-agent p { margin:0; }

/* Tool steps: folded group header + indented single-line steps (AgentStepGroup/AgentStepLine) */
.paper-steps { display:flex; flex-direction:column; gap:8px; }

.paper-steps-head {
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  border:0;
  background:none;
  color:var(--pp-fg-3);
  font:500 10px/12px var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  cursor:pointer;
}

.paper-steps-head:hover { color:var(--pp-fg-2); }
.paper-chevron { color:var(--pp-fg-3); font:500 12px/12px var(--font-mono); transition:transform .2s; }
.paper-chevron-open { transform:rotate(90deg); }

.paper-steps-list {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-left:12px;
  padding-left:10px;
  border-left:1px solid var(--pp-line);
}

.paper-steps-list[hidden],
.paper-step-detail[hidden] { display:none; }

.paper-step-line { display:flex; align-items:center; gap:8px; margin:0; padding:0; border:0; background:none; font-family:inherit; font-size:12px; line-height:16px; text-align:left; color:var(--pp-fg-2); }
button.paper-step-line { cursor:pointer; }
button.paper-step-line:hover { color:var(--pp-fg-1); }
.paper-step-dot { display:flex; width:12px; height:12px; flex:none; align-items:center; justify-content:center; color:var(--pp-fg-3); }
.paper-step-line code { font:400 12px/16px var(--font-mono); color:var(--pp-fg-2); }

/* Expanded step detail: left rule + indent, ARGS / OBSERVATION (AgentStepLine) */
.paper-step-detail {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-left:16px;
  padding-left:10px;
  border-left:1px solid var(--pp-line);
  font-size:11px;
  line-height:16px;
  color:var(--pp-fg-2);
}

.paper-detail-label { color:var(--pp-fg-3); font:500 10px/12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.paper-step-detail pre {
  margin:0;
  overflow:hidden;
  padding:8px;
  border:1px solid var(--pp-line);
  border-radius:6px;
  background:var(--pp-field);
  color:var(--pp-fg-2);
  font:400 11px/16px var(--font-mono);
  white-space:pre-wrap;
  overflow-wrap:break-word;
}
.paper-step-detail p { margin:0; }

/* Final answer: dot + caps status label + markdown body (AgentSummary + Markdown.tsx) */
.paper-summary { display:flex; flex-direction:column; gap:6px; }

.paper-md { color:var(--pp-fg-1); font-size:13px; line-height:20px; }
.paper-md p { margin:0 0 8px; }
.paper-md p:last-child { margin-bottom:0; }
.paper-md ul { margin:8px 0; padding-left:20px; list-style:disc; }
.paper-md ul:last-child { margin-bottom:0; }
.paper-md li { line-height:20px; }
.paper-md li + li { margin-top:2px; }
.paper-md strong { font-weight:600; }
.paper-md code { padding:1px 4px; border:1px solid var(--pp-line); border-radius:4px; background:var(--pp-field); font:400 11px/16px var(--font-mono); color:var(--pp-fg-1); }

.paper-md-table { margin:8px 0; border:1px solid var(--pp-line); border-radius:8px; overflow:hidden; }
.paper-md-table:last-child { margin-bottom:0; }
.paper-md-table table { width:100%; border-collapse:collapse; font-size:12px; line-height:16px; }
.paper-md-table th {
  padding:6px 10px;
  border-bottom:1px solid var(--pp-line);
  color:var(--pp-fg-3);
  font:500 10px/12px var(--font-mono);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:left;
}
.paper-md-table td { padding:6px 10px; border-bottom:1px solid color-mix(in srgb, var(--pp-line) 60%, transparent); }
.paper-md-table tr:last-child td { border-bottom:0; }

.paper-composer {
  padding:12px 16px 16px;
  border-top:1px solid var(--pp-line);
  background:var(--pp-surface);
}

.paper-composer-box {
  display:flex;
  min-height:58px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--pp-line);
  border-radius:10px;
  background:var(--pp-field);
}

.paper-composer-box > span:first-child { overflow:hidden; color:var(--pp-fg-3); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.paper-composer-send { margin-left:auto; padding:6px 9px; border-radius:7px; background:var(--pp-fg-1); color:var(--pp-surface); font:500 10px/12px var(--font-mono); }
.paper-composer-hints { display:flex; justify-content:space-between; padding-top:7px; color:var(--pp-fg-3); font:400 9px/12px var(--font-mono); }

/* File chip (FileChip.tsx): accent tint, 24px icon; PDF glyph uses warning */
.paper-file-chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-end;
  padding:4px 10px 4px 4px;
  border-radius:10px;
  background:color-mix(in srgb, var(--pp-accent) 8%, transparent);
  color:var(--pp-fg-1);
  font-size:12px;
}

.paper-file-chip-icon {
  display:flex;
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:var(--pp-warning);
  color:#FFFFFF;
  font:600 7px/1 var(--font-mono);
}

.paper-output-card {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid var(--pp-line);
  border-radius:12px;
  background:var(--pp-surface);
}

.paper-output-icon { display:flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:10px; background:var(--pp-field); color:var(--pp-accent); }
.paper-output-copy { display:flex; min-width:0; flex-direction:column; gap:3px; }
.paper-output-filename { overflow:hidden; color:var(--pp-fg-1); font:500 12px/16px var(--font-mono); text-overflow:ellipsis; white-space:nowrap; }
.paper-output-meta { color:var(--pp-fg-2); font-size:11px; line-height:16px; }
.paper-output-download { padding:7px 10px; border:1px solid var(--pp-line); border-radius:8px; background:var(--pp-surface); color:var(--pp-accent); font:500 11px/14px var(--font-mono); }

.paper-schedule-card {
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:14px;
  border:1px solid var(--pp-line);
  border-radius:10px;
  background:var(--pp-surface);
}

.paper-schedule-card p { margin:0; }

.paper-schedule-model {
  display:flex;
  min-height:42px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  border-radius:8px;
  background:var(--pp-field);
}

.paper-schedule-head { display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--pp-fg-3); font-size:11px; }
.paper-schedule-head code,
.paper-schedule-model code { color:var(--pp-fg-2); font:500 10px/14px var(--font-mono); }
.paper-schedule-link { color:var(--pp-accent); font:600 11px/14px var(--font-mono); }

.paper-recording-booth {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--pp-line);
  border-radius:10px;
  background:var(--pp-surface);
}

.paper-recording-top,
.paper-recording-footer {
  display:flex;
  min-height:48px;
  align-items:center;
  gap:8px;
  padding:0 14px;
  background:var(--pp-surface);
  color:var(--pp-fg-2);
  font:500 10px/14px var(--font-mono);
  letter-spacing:.04em;
  text-transform:uppercase;
}

.paper-recording-top { border-bottom:1px solid var(--pp-line); }
.paper-recording-top strong { color:var(--pp-fg-1); font-size:12px; }
.paper-recording-pulse { width:7px; height:7px; flex:none; border-radius:50%; background:var(--pp-warning); box-shadow:0 0 0 3px color-mix(in srgb, var(--pp-warning) 14%, transparent); }
.paper-recording-section { padding:11px 14px 9px; color:var(--pp-fg-3); font:600 9px/12px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.paper-recording-list { min-width:0; border-top:1px solid var(--pp-line); border-bottom:1px solid var(--pp-line); }

.paper-recording-row {
  display:grid;
  min-height:38px;
  grid-template-columns:24px 62px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-top:1px solid var(--pp-line);
  color:var(--pp-fg-2);
  font:400 11px/16px var(--font-mono);
}

.paper-recording-row:first-child { border-top:0; }
.paper-recording-index { color:var(--pp-fg-3); }
.paper-recording-type { color:var(--pp-fg-1); font-weight:600; }
.paper-recording-value { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.paper-recording-meta { color:var(--pp-fg-3); text-align:right; }
.paper-recording-footer { justify-content:space-between; text-transform:none; }
.paper-recording-status,
.paper-recording-actions { display:flex; align-items:center; gap:8px; }
.paper-recording-actions strong { padding:7px 10px; border-radius:7px; background:var(--pp-fg-1); color:var(--pp-surface); }

.paper-scene { min-height:360px; }
.paper-scene .paper-thread { gap:14px; padding:16px; overflow:visible; }

.hero-demo-stage { width:560px; min-height:624px; flex-basis:560px; }
.hero-demo-stage .hero-demo-panel { height:590px; min-height:590px; }

@media (prefers-reduced-motion: no-preference) {
  .hero-demo-panel:not([hidden]) { animation:paper-fade-in .5s ease; }
  @keyframes paper-fade-in {
    from { opacity:0; }
    to { opacity:1; }
  }
}
.hero-demo-stage .paper-thread { gap:12px; padding:12px 14px 10px; }
.hero-demo-stage .paper-user { padding:8px 11px; font-size:12px; line-height:17px; }
.hero-demo-stage .paper-agent { gap:4px; font-size:12px; line-height:17px; }
.hero-demo-stage .paper-role { gap:6px; }
.hero-demo-stage .paper-role-label { font-size:10px; line-height:12px; }
.hero-demo-stage .paper-steps { gap:6px; }
.hero-demo-stage .paper-steps-list { gap:6px; margin-left:10px; padding-left:9px; }
.hero-demo-stage .paper-step-line { font-size:12px; line-height:16px; }
.hero-demo-stage .paper-step-line code { font-size:12px; line-height:16px; }
.hero-demo-stage .paper-step-detail { gap:4px; margin-left:14px; padding-left:9px; font-size:11px; line-height:15px; }
.hero-demo-stage .paper-step-detail pre { padding:6px 8px; font-size:10px; line-height:14px; }
.hero-demo-stage .paper-summary { gap:5px; }
.hero-demo-stage .paper-md { font-size:12px; line-height:17px; }
.hero-demo-stage .paper-md p { margin-bottom:6px; }
.hero-demo-stage .paper-md ul { margin:6px 0; padding-left:18px; }
.hero-demo-stage .paper-md li { line-height:17px; }
.hero-demo-stage .paper-md-table { margin-top:6px; }
.hero-demo-stage .paper-md-table table { font-size:11px; line-height:14px; }
.hero-demo-stage .paper-md-table th { padding:5px 9px; font-size:9px; line-height:11px; }
.hero-demo-stage .paper-md-table td { padding:5px 9px; }
.hero-demo-stage .paper-output-card { gap:9px; padding:8px 10px; }
.hero-demo-stage .paper-output-icon { width:30px; height:30px; }
.hero-demo-stage .paper-schedule-card { gap:8px; padding:10px 12px; font-size:11px; line-height:15px; }
.hero-demo-stage .paper-schedule-model { min-height:32px; }
.hero-demo-stage .paper-composer { padding:8px 14px 10px; }
.hero-demo-stage .paper-composer-box { min-height:36px; padding:6px 9px; }

@media (max-width:1100px) {
  .hero-demo-stage { width:100%; max-width:560px; flex-basis:auto; }
}

@media (max-width:640px) {
  .hero-demo-stage { min-height:616px; }
  .hero-demo-stage .hero-demo-panel { height:582px; min-height:582px; }
  .paper-thread { gap:13px; padding:14px 13px; }
  .paper-step-detail { display:none; }
  .paper-recording-row { grid-template-columns:22px 58px minmax(0,1fr); row-gap:2px; padding:7px 12px; }
  .paper-recording-meta { grid-column:3; justify-self:start; text-align:left; }
  .paper-recording-top,
  .paper-recording-footer { padding-inline:12px; }
  .paper-recording-footer { align-items:flex-start; flex-direction:column; padding-block:10px; }
}