:root {
  --runtime-bg: #f7f3ea;
  --runtime-surface: #fffdf8;
  --runtime-ink: #26221d;
  --runtime-muted: #756d63;
  --runtime-line: rgba(52, 44, 35, 0.14);
  --runtime-accent: #8f352b;
  --runtime-dark: #211c18;
  --runtime-green: #35483d;
  --runtime-serif: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif;
  --runtime-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html,
body { min-height: 100%; }

.runtime-chat-body {
  margin: 0;
  color: var(--runtime-ink);
  background: var(--runtime-bg);
  font-family: var(--runtime-sans);
}

.runtime-chat-shell {
  min-height: 100dvh;
  background:
    linear-gradient(rgba(72, 54, 34, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(72, 54, 34, 0.035) 1px, transparent 1px),
    var(--runtime-bg);
  background-size: 42px 42px;
}

.runtime-chat-header {
  position: fixed;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  border-bottom: 1px solid rgba(231, 220, 199, 0.18);
  background: rgba(33, 28, 24, 0.96);
  backdrop-filter: blur(18px);
}

.runtime-chat-title { min-width: 0; text-align: center; }
.runtime-chat-title strong { display: block; overflow: hidden; color: #f4ead7; font: 600 17px/1.3 var(--runtime-serif); text-overflow: ellipsis; white-space: nowrap; }
.runtime-chat-title span { display: block; margin-top: 2px; overflow: hidden; color: #bdb2a1; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.runtime-icon-button,
.runtime-round-button,
.runtime-send-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.runtime-icon-button {
  width: 40px;
  height: 40px;
  color: #e9ddc8;
  border: 1px solid rgba(233, 221, 200, 0.26);
  border-radius: 6px;
  background: transparent;
}

.runtime-icon {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.icon-mic { mask-image: url("/prototype-v03/assets/icons/mic.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/mic.svg"); }
.icon-plus { mask-image: url("/prototype-v03/assets/icons/plus.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/plus.svg"); }
.icon-arrow-up { mask-image: url("/prototype-v03/assets/icons/arrow-up.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/arrow-up.svg"); }
.icon-square { mask-image: url("/prototype-v03/assets/icons/square.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/square.svg"); }
.icon-paperclip { mask-image: url("/prototype-v03/assets/icons/paperclip.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/paperclip.svg"); }
.icon-x { mask-image: url("/prototype-v03/assets/icons/x.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/x.svg"); }
.icon-chevron-left { mask-image: url("/prototype-v03/assets/icons/chevron-left.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/chevron-left.svg"); }
.icon-ellipsis { mask-image: url("/prototype-v03/assets/icons/ellipsis.svg"); -webkit-mask-image: url("/prototype-v03/assets/icons/ellipsis.svg"); }

.runtime-chat-menu { position: relative; }
.runtime-chat-menu summary { list-style: none; }
.runtime-chat-menu summary::-webkit-details-marker { display: none; }
.runtime-chat-menu nav {
  position: absolute;
  top: 48px;
  right: 0;
  display: grid;
  width: min(260px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid var(--runtime-line);
  border-radius: 8px;
  background: var(--runtime-surface);
  box-shadow: 0 18px 50px rgba(32, 25, 19, 0.2);
}
.runtime-chat-menu nav a { padding: 12px; color: var(--runtime-ink); border-radius: 6px; font-size: 14px; text-decoration: none; }
.runtime-chat-menu nav a:hover { background: #eee5d6; }

.runtime-chat-stage {
  display: grid;
  min-height: 100dvh;
  padding: 88px 16px 190px;
}

.runtime-welcome {
  align-self: center;
  width: min(720px, 100%);
  margin: 0 auto;
  text-align: center;
}
.runtime-welcome[hidden] { display: none; }
.runtime-welcome-mark { display: grid; width: 52px; height: 52px; margin: 0 auto 22px; place-items: center; color: #f6ead4; border-radius: 50%; background: var(--runtime-dark); font: 26px/1 var(--runtime-serif); }
.runtime-welcome h1 { margin: 0; font: 600 clamp(28px, 5vw, 42px)/1.25 var(--runtime-serif); letter-spacing: 0; }
.runtime-welcome > p { max-width: 580px; margin: 16px auto 0; color: var(--runtime-muted); font-size: 15px; line-height: 1.8; }
.runtime-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 640px; margin: 32px auto 0; }
.runtime-suggestions button { min-height: 52px; padding: 12px 16px; color: #4d443b; border: 1px solid var(--runtime-line); border-radius: 8px; background: rgba(255, 253, 248, 0.82); font: 14px/1.45 var(--runtime-serif); cursor: pointer; }
.runtime-suggestions button:hover { border-color: rgba(143, 53, 43, 0.38); background: var(--runtime-surface); }

.runtime-thread { display: grid; align-content: start; width: min(760px, 100%); margin: 0 auto; }
.runtime-thread:empty { display: none; }
.runtime-message { display: grid; margin: 14px 0; animation: runtime-message-in 180ms ease-out; }
.runtime-message.is-user { justify-items: end; }
.runtime-message-content { max-width: min(680px, 88%); white-space: pre-wrap; }
.runtime-message.is-user .runtime-message-content { padding: 11px 16px; border-radius: 18px 18px 5px 18px; background: #e8dfd1; }
.runtime-message.is-assistant .runtime-message-content { max-width: 100%; padding: 8px 0; font: 17px/1.8 var(--runtime-serif); }
.runtime-message p { margin: 0; }
.runtime-message-meta { margin-top: 8px; color: var(--runtime-muted); font-size: 11px; }

.runtime-thinking { display: inline-flex; gap: 5px; align-items: center; height: 32px; color: var(--runtime-muted); }
.runtime-thinking i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: runtime-pulse 1s infinite ease-in-out; }
.runtime-thinking i:nth-child(2) { animation-delay: 120ms; }
.runtime-thinking i:nth-child(3) { animation-delay: 240ms; }

.runtime-tool-list { display: grid; gap: 6px; margin: 9px 0 0; }
.runtime-tool-event { max-width: 620px; color: #60574e; border-left: 2px solid rgba(53, 72, 61, 0.38); }
.runtime-tool-event summary { padding: 7px 10px; cursor: pointer; font: 12px/1.45 var(--runtime-sans); list-style: none; }
.runtime-tool-event summary::-webkit-details-marker { display: none; }
.runtime-tool-event div { padding: 0 10px 8px; color: var(--runtime-muted); font-size: 12px; line-height: 1.55; }
.runtime-citation { display: grid; gap: 4px; border-top: 1px solid var(--runtime-line); }
.runtime-citation:first-of-type { border-top: 0; }
.runtime-citation strong { color: var(--runtime-ink); font: 600 13px/1.45 var(--runtime-serif); }
.runtime-citation p { color: var(--runtime-muted); font: 12px/1.6 var(--runtime-sans); }
.runtime-citation a { width: fit-content; color: var(--runtime-green); font: 12px/1.4 var(--runtime-sans); }

.runtime-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.runtime-inline-actions a,
.runtime-inline-actions button,
.runtime-retry { padding: 8px 11px; color: var(--runtime-green); border: 1px solid rgba(53, 72, 61, 0.24); border-radius: 6px; background: rgba(255, 253, 248, 0.78); font: 12px/1.4 var(--runtime-sans); text-decoration: none; cursor: pointer; }

.runtime-artifact { max-width: 620px; margin-top: 12px; padding: 15px; border: 1px solid rgba(53, 72, 61, 0.24); border-radius: 8px; background: rgba(255, 253, 248, 0.92); }
.runtime-artifact header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.runtime-artifact strong { font: 600 15px/1.4 var(--runtime-serif); }
.runtime-artifact span { color: var(--runtime-muted); font-size: 11px; }
.runtime-artifact p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: #554b42; font: 14px/1.65 var(--runtime-serif); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.runtime-artifact button { margin-top: 12px; padding: 9px 13px; color: #fff8eb; border: 0; border-radius: 6px; background: var(--runtime-green); cursor: pointer; }

.runtime-composer-dock {
  position: fixed;
  z-index: 15;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, rgba(247, 243, 234, 0), rgba(247, 243, 234, 0.96) 24%, var(--runtime-bg) 54%);
}

.runtime-composer,
.runtime-attachment,
.runtime-composer-status,
.runtime-disclaimer { width: min(760px, 100%); margin-right: auto; margin-left: auto; }
.runtime-composer { padding: 10px 12px 9px; border: 1px solid rgba(52, 44, 35, 0.16); border-radius: 24px; background: var(--runtime-surface); box-shadow: 0 10px 34px rgba(51, 41, 31, 0.1); }
.runtime-composer textarea { display: block; width: 100%; min-height: 34px; max-height: 150px; padding: 5px 6px 3px; color: var(--runtime-ink); border: 0; outline: 0; background: transparent; font: 16px/1.5 var(--runtime-sans); resize: none; }
.runtime-composer-toolbar { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-top: 5px; }
.runtime-composer-actions { display: flex; gap: 7px; align-items: center; }
.runtime-round-button { width: 34px; height: 34px; color: #3f3933; border: 1px solid var(--runtime-line); border-radius: 50%; background: #faf7f1; }
.runtime-send-button { width: 34px; height: 34px; color: #fff; border-radius: 50%; background: var(--runtime-dark); }
.runtime-send-button:disabled { opacity: 0.5; cursor: default; }
.runtime-round-button.is-recording { color: #fff; border-color: var(--runtime-accent); background: var(--runtime-accent); }
.runtime-record-time { color: var(--runtime-accent); font-size: 12px; font-variant-numeric: tabular-nums; }
.runtime-disclaimer { margin-top: 7px; color: #8b8278; font-size: 10px; text-align: center; }
.runtime-composer-status { margin-bottom: 6px; color: var(--runtime-accent); font-size: 12px; text-align: center; }

.runtime-attachment { display: grid; grid-template-columns: 22px minmax(0, 1fr) 30px; gap: 9px; align-items: center; margin-bottom: 8px; padding: 9px 12px; border: 1px solid var(--runtime-line); border-radius: 12px; background: var(--runtime-surface); }
.runtime-attachment[hidden] { display: none; }
.runtime-attachment strong,
.runtime-attachment span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runtime-attachment strong { font-size: 12px; }
.runtime-attachment span { margin-top: 2px; color: var(--runtime-muted); font-size: 10px; }
.runtime-attachment button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--runtime-muted); border: 0; border-radius: 50%; background: transparent; cursor: pointer; }

.runtime-draft-dialog { width: min(640px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); padding: 0; color: var(--runtime-ink); border: 1px solid var(--runtime-line); border-radius: 8px; background: var(--runtime-surface); box-shadow: 0 24px 80px rgba(30, 23, 17, 0.26); }
.runtime-draft-dialog::backdrop { background: rgba(24, 20, 17, 0.52); backdrop-filter: blur(4px); }
.runtime-draft-dialog > header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--runtime-line); }
.runtime-draft-dialog > header span { color: var(--runtime-accent); font-size: 11px; }
.runtime-draft-dialog h2 { margin: 3px 0 0; font: 600 22px/1.3 var(--runtime-serif); }
.runtime-draft-dialog .runtime-icon-button { color: var(--runtime-ink); border-color: var(--runtime-line); }
.runtime-draft-text { max-height: 50dvh; padding: 22px 20px; overflow: auto; white-space: pre-wrap; font: 17px/1.9 var(--runtime-serif); }
.runtime-draft-dialog > p { margin: 0; padding: 0 20px 16px; color: var(--runtime-muted); font-size: 12px; line-height: 1.6; }
.runtime-draft-dialog > footer { display: flex; gap: 8px; padding: 15px 20px 20px; border-top: 1px solid var(--runtime-line); }
.runtime-draft-dialog > footer button { flex: 1; min-height: 42px; padding: 8px; color: #fff8eb; border: 0; border-radius: 6px; background: var(--runtime-accent); cursor: pointer; }

@keyframes runtime-message-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes runtime-pulse { 0%, 70%, 100% { opacity: 0.28; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }

@media (max-width: 700px) {
  .runtime-chat-stage { padding-right: 12px; padding-left: 12px; padding-bottom: 180px; }
  .runtime-suggestions { grid-template-columns: 1fr; }
  .runtime-welcome { align-self: end; padding-bottom: 15dvh; }
  .runtime-welcome > p { font-size: 14px; }
  .runtime-message { margin: 11px 0; }
  .runtime-message.is-assistant .runtime-message-content { font-size: 16px; }
  .runtime-draft-dialog > footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .runtime-message,
  .runtime-thinking i { animation: none; }
}