:root {
    --ground: #FAF6EF;
    --card: #FFFFFF;
    --ink: #2B2B26;
    --ink-sub: #6E6A5E;
    --sage: #5F7E62;
    --sage-soft: #EDF2ED;
    --line: #E7E1D4;
    --bubble-agent: #FFFFFF;
    --bubble-user: #5F7E62;
    --bubble-user-ink: #FFFFFF;
    --warn-bg: #FBF3DF;
    --warn-ink: #8A6A1F;
    --warn-line: #EBD9A9;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    background: var(--ground); color: var(--ink); min-height: 100vh;
    font-family: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif;
    display: flex; flex-direction: column; align-items: center;
    padding: 32px 16px 60px;
  }
  h1 { font-family: 'Spectral', Georgia, 'Times New Roman', serif; font-size: 28px; font-weight: 600; }
  .wrap { width: 100%; max-width: 640px; }
  header { text-align: center; margin-bottom: 18px; }
  .tagline { color: var(--ink-sub); font-size: 14.5px; margin-top: 8px; line-height: 1.5; }

  .mock-banner {
    background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line);
    border-radius: 10px; padding: 10px 14px; font-size: 12.5px; margin-bottom: 16px;
    text-align: center; line-height: 1.5;
  }

  .chat-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: 0 1px 3px rgba(43,43,38,0.06);
    display: flex; flex-direction: column; height: 60vh; min-height: 420px;
    overflow: hidden;
  }
  .transcript { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
  .row { display: flex; }
  .row.agent { justify-content: flex-start; }
  .row.user { justify-content: flex-end; }
  .bubble {
    max-width: 80%; padding: 11px 15px; border-radius: 14px; font-size: 14.5px; line-height: 1.5;
    white-space: pre-wrap;
  }
  .row.agent .bubble { background: var(--sage-soft); color: var(--ink); border-bottom-left-radius: 4px; }
  .row.user .bubble { background: var(--bubble-user); color: var(--bubble-user-ink); border-bottom-right-radius: 4px; }
  .row.system .bubble { background: transparent; color: var(--ink-sub); font-size: 12.5px; text-align: center; font-style: italic; }
  .row.system { justify-content: center; }

  .composer {
    border-top: 1px solid var(--line); padding: 14px; display: flex; gap: 10px;
  }
  .composer input {
    flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
    font-size: 14.5px; font-family: inherit; background: var(--ground);
  }
  .composer input:disabled { opacity: 0.6; }
  .composer button {
    background: var(--sage); color: #fff; border: none; border-radius: 10px;
    padding: 0 20px; font-size: 14.5px; font-weight: 600; cursor: pointer;
  }
  .composer button:disabled { opacity: 0.5; cursor: not-allowed; }

  .skip-link {
    display: block; margin: 10px auto 0; background: none; border: none;
    color: var(--ink-sub); font-size: 12.5px; text-decoration: underline;
    cursor: pointer; text-align: center; font-family: inherit;
  }
  .skip-link:hover { color: var(--sage); }

  .chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
  .chip-row[hidden] { display: none; }
  .chip {
    background: var(--sage-soft); border: 1px solid #CDDCCE; color: var(--ink);
    border-radius: 999px; padding: 7px 13px; font-size: 13px; cursor: pointer;
    font-family: inherit; text-align: left;
  }
  .chip:hover { background: #E1EBE2; }

  .done-card {
    margin-top: 18px; background: var(--sage-soft); border: 1px solid #CDDCCE;
    border-radius: 12px; padding: 18px 20px; font-size: 14px; line-height: 1.6; color: var(--ink);
    display: none;
  }
  .done-card.show { display: block; }

  footer { margin-top: 24px; text-align: center; color: var(--ink-sub); font-size: 11.5px; }