/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* ── Design tokens ──────────────────────────────────────────────────────────── */
:root {
  --bg:           #f6f4ef;
  --surface:      #ffffff;
  --surface-2:    #f3f1ec;
  --border:       #e0dccf;
  --text:         #1f1d18;
  --text-soft:    #4a463d;
  --text-dim:     #6f6a5d;
  --accent:       #8a6d2f;
  --accent-light: #a8842f;
  --accent-glow:  rgba(138,109,47,0.12);
  --gold:         #b08a35;
  --success:      #2f7d54;
  --warn:         #9a6a1e;
  --error:        #b3322f;
  --radius:       14px;
  --font-serif:   'Noto Serif TC','Georgia',serif;
  --font-sans:    'Noto Sans TC',-apple-system,BlinkMacSystemFont,sans-serif;
  --base-size:    19px;
}

/* ── Reduced motion ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  .answer-body.streaming::after { animation:none; opacity:1 }
}

/* ── Base ────────────────────────────────────────────────────────────────────── */
html { scroll-behavior:smooth; font-size:var(--base-size) }

body {
  background:    var(--bg);
  color:         var(--text);
  font-family:   var(--font-sans);
  min-height:    100vh;
  display:       flex;
  flex-direction:column;
  align-items:   center;
  padding:       2rem 1rem 3rem;
  line-height:   1.8;
}

/* ── Font-size adjuster ──────────────────────────────────────────────────────── */
.font-bar {
  position:  fixed;
  top:       0.8rem;
  right:     0.8rem;
  display:   flex;
  align-items:center;
  gap:       0.35rem;
  background:var(--surface);
  border:    1px solid var(--border);
  border-radius:10px;
  padding:   0.3rem 0.5rem;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
  z-index:   50;
}
.font-bar .label { font-size:.8rem; color:var(--text-dim); margin-right:.15rem }
.font-btn {
  border:        1px solid var(--border);
  background:    var(--surface-2);
  color:         var(--text-soft);
  border-radius: 7px;
  cursor:        pointer;
  font-family:   var(--font-serif);
  line-height:   1;
  padding:       .3rem .5rem;
  transition:    all .18s;
}
.font-btn:hover           { border-color:var(--accent); color:var(--accent) }
.font-btn.minus           { font-size:.85rem }
.font-btn.normal          { font-size:1rem }
.font-btn.plus            { font-size:1.2rem }
.font-btn.active          { border-color:var(--accent); color:#fff; background:var(--accent) }

/* ── Header ──────────────────────────────────────────────────────────────────── */
.header {
  text-align: center;
  margin:     0.5rem 0 2.2rem;
  max-width:  760px;
  animation:  fadeDown .6s ease-out;
}
.header h1 {
  font-family:    var(--font-serif);
  font-size:      2.2rem;
  font-weight:    700;
  color:          var(--accent);
  letter-spacing: .06em;
  line-height:    1.35;
}
.header .subtitle {
  color:          var(--text-soft);
  font-family:    var(--font-serif);
  font-size:      1.1rem;
  margin-top:     .7rem;
  letter-spacing: .03em;
}

/* ── Main container ──────────────────────────────────────────────────────────── */
.container {
  width:          100%;
  max-width:      760px;
  animation:      fadeDown .6s ease-out .1s both;
  display:        flex;
  flex-direction: column;
}

/* ── Input card ──────────────────────────────────────────────────────────────── */
.input-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1.5rem;
  margin-bottom: 1.5rem;
  box-shadow:    0 2px 12px rgba(0,0,0,.04);
  transition:    border-color .3s, box-shadow .35s, padding .35s, border-radius .35s;
  order:         1; /* visually first in initial state */
}

/* ── Input card: mini sticky mode (after first conversation) ─────────────────── */
.has-conversation .input-card {
  order:         2;
  position:      sticky;
  bottom:        0;
  z-index:       20;
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
  padding:       0.5rem 0.85rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  margin-bottom: 0;
  margin-top:    0.4rem;
  box-shadow:    0 -4px 28px rgba(0,0,0,.08);
}

.has-conversation .input-card:focus-within {
  border-color: var(--accent);
  box-shadow:   0 -4px 28px rgba(0,0,0,.08), 0 0 0 3px var(--accent-glow);
}

/* voice-status floats as pill above the mini bar */
.has-conversation #voiceStatus {
  position:       absolute;
  bottom:         calc(100% + 4px);
  left:           50%;
  transform:      translateX(-50%);
  white-space:    nowrap;
  font-size:      0.78rem;
  padding:        0.18rem 0.7rem;
  background:     var(--surface);
  border:         1px solid var(--border);
  border-radius:  20px;
  box-shadow:     0 2px 10px rgba(0,0,0,.08);
  pointer-events: none;
  margin-top:     0;
}

/* row 1: textarea — single line start, auto-expands upward via JS */
.has-conversation textarea {
  min-height:  44px;
  max-height:  150px;
  font-size:   1rem;
  line-height: 1.55;
  padding:     .45rem .65rem;
  resize:      none;
  overflow-y:  auto;
  transition:  border-color .2s; /* remove min-height transition in mini mode */
}

/* row 2: button bar — right-aligned */
.has-conversation .input-footer {
  display:         flex;
  flex-direction:  row;
  justify-content: flex-end;
  align-items:     center;
  margin-top:      0.4rem;
  gap:             0.35rem;
}

.has-conversation .input-actions {
  display:     flex;
  align-items: stretch;
  gap:         0.35rem;
}

.has-conversation .btn {
  padding:   0.42rem 0.85rem;
  font-size: 0.88rem;
  width:     auto;
}

.has-conversation .btn-ghost {
  padding:   0.38rem 0.55rem;
  font-size: 0.78rem;
}

.has-conversation .voice-btn {
  padding: 0.42rem 0.55rem;
}

.input-card:focus-within {
  border-color: var(--accent);
  box-shadow:   0 0 0 3px var(--accent-glow);
}
textarea {
  width:         100%;
  min-height:    110px;
  background:    var(--surface-2);
  border:        1px solid var(--border);
  border-radius: 9px;
  color:         var(--text);
  font-family:   var(--font-serif);
  font-size:     1.1rem;
  line-height:   1.7;
  padding:       .9rem 1rem;
  resize:        vertical;
  outline:       none;
  transition:    border-color .2s, min-height .35s;
}
textarea::placeholder { color:var(--text-dim); opacity:.8 }
textarea:focus        { border-color:var(--accent) }

.input-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      1rem;
  gap:             .8rem;
}

/* ── Voice button ────────────────────────────────────────────────────────────── */
.voice-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  box-sizing:      border-box;
  padding:         .75rem;
  aspect-ratio:    1;
  background:      var(--surface-2);
  border:          1px solid var(--border);
  border-radius:   9px;
  color:           var(--text-dim);
  font-size:       1.05rem;
  line-height:     1;
  cursor:          pointer;
  transition:      all .25s;
  flex-shrink:     0;
}
.voice-btn:hover              { border-color:var(--accent); color:var(--accent); background:var(--accent-glow) }
.voice-btn:disabled           { opacity:.5; cursor:not-allowed }
.voice-btn:disabled:hover     { border-color:var(--border); color:var(--text-dim); background:var(--surface-2) }
.voice-btn.recording,
.voice-btn.stopping {
  border-color: var(--error);
  color:        var(--error);
  background:   rgba(179,50,47,.08);
  padding:      .75rem 1.15rem;
  min-width:    3.1rem;
  aspect-ratio: auto;
  font-size:    1.15rem;
}
.voice-btn.recording { animation: pulse 1.2s ease-in-out infinite }

/* 吸底模式：略縮尺寸，仍保持足夠點擊寬度 */
.has-conversation .voice-btn.recording,
.has-conversation .voice-btn.stopping {
  padding:   0.42rem 0.9rem;
  min-width: 2.85rem;
  font-size: 1.1rem;
}
.voice-status              { font-size:.85rem; color:var(--text-dim); transition:color .2s }
.voice-status:empty        { display:none }
.voice-status:not(:empty)  { margin-top:.35rem }
.voice-status.active       { color:var(--error) }
.voice-status.transcribing { color:var(--accent) }

@keyframes pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(179,50,47,.35) }
  50%     { box-shadow:0 0 0 9px rgba(179,50,47,0) }
}

.input-actions { display:flex; align-items:stretch; gap:.6rem }

/* ── Submit button ───────────────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  gap:            .45rem;
  padding:        .75rem 1.9rem;
  background:     linear-gradient(135deg,var(--accent),var(--gold));
  color:          #fff;
  border:         none;
  border-radius:  9px;
  font-weight:    600;
  font-size:      1.05rem;
  line-height:    1;
  cursor:         pointer;
  transition:     transform .15s, box-shadow .25s, opacity .2s;
  letter-spacing: .05em;
}
.btn:hover    { transform:translateY(-1px); box-shadow:0 4px 16px var(--accent-glow) }
.btn:active   { transform:translateY(0) }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none }
.btn .spinner {
  width:        17px;
  height:       17px;
  border:       2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:    spin .7s linear infinite;
  display:      none;
}
.btn.loading .spinner  { display:block }
.btn.loading .btn-text { display:none }
.btn.stopping {
  background:     var(--surface-2);
  color:          var(--error);
  border:         1px solid var(--error);
  box-shadow:     none;
}
.btn.stopping:hover {
  background:     rgba(179,50,47,.08);
  transform:      none;
  box-shadow:     none;
}
.btn.stopping .spinner  { display:none }
.btn.stopping .btn-text { display:inline }

/* ── Answer card ─────────────────────────────────────────────────────────────── */
.answer-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  overflow:      hidden;
  box-shadow:    0 2px 12px rgba(0,0,0,.04);
  animation:     fadeUp .45s ease-out;
  margin-bottom: 1rem;
}
.answer-header {
  padding:         1rem 1.5rem;
  background:      var(--surface-2);
  border-bottom:   1px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             .8rem;
  flex-wrap:       wrap;
}
.answer-header h3 {
  font-family: var(--font-serif);
  font-size:   1.1rem;
  font-weight: 600;
  color:       var(--accent);
}
.header-right { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap }

.answer-footer {
  border-top:   1px solid var(--border);
  padding:      .75rem 1.5rem;
  background:   var(--surface-2);
  display:      flex;
  justify-content: flex-end;
}
.answer-actions {
  display:     flex;
  align-items: center;
  gap:         .8rem;
  flex-wrap:   wrap;
}

/* ── Answer body ─────────────────────────────────────────────────────────────── */
.answer-body {
  padding:        1.6rem 1.7rem;
  font-family:    var(--font-serif);
  font-size:      1.18rem;
  white-space:    pre-wrap;
  line-height:    2;
  color:          var(--text);
  letter-spacing: .01em;
}
/* Inline source URLs rendered as links; copying gives plain text via innerText */
.answer-body a { color:var(--accent); text-decoration:underline; word-break:break-all }
.answer-body a:hover { color:var(--accent-light) }
.answer-body.streaming::after {
  content:     '▍';
  color:       var(--accent);
  animation:   blink .8s step-end infinite;
  font-weight: 700;
}
@keyframes blink { 50% { opacity:0 } }

/* ── Copy button ─────────────────────────────────────────────────────────────── */
.btn-copy {
  display:      inline-flex;
  align-items:  center;
  gap:          .3rem;
  padding:      .4rem .85rem;
  background:   var(--surface);
  color:        var(--text-soft);
  border:       1px solid var(--border);
  border-radius:7px;
  font-size:    .85rem;
  font-family:  var(--font-sans);
  cursor:       pointer;
  transition:   all .2s;
}
.btn-copy:hover { border-color:var(--accent); color:var(--accent) }
.btn-copy.done  { border-color:var(--success); color:var(--success) }

/* ── Speak button (Web Speech API) ─────────────────────────────────────────── */
.btn-speak {
  display:      inline-flex;
  align-items:  center;
  gap:          .3rem;
  padding:      .4rem .85rem;
  background:   var(--surface);
  color:        var(--text-soft);
  border:       1px solid var(--border);
  border-radius:7px;
  font-size:    .85rem;
  font-family:  var(--font-sans);
  cursor:       pointer;
  transition:   all .2s;
}
.btn-speak:hover   { border-color:var(--accent); color:var(--accent) }
.btn-speak.playing {
  border-color: var(--accent);
  color:        var(--accent);
  background:   var(--accent-glow);
}

/* ── Sources: hidden (candidates only, real sources are inline in body text) ─── */
.sources-section { display:none }

/* ── Related questions ───────────────────────────────────────────────────────── */
.related-section {
  border-top: 1px solid var(--border);
  padding:    1.1rem 1.7rem 1.3rem;
}
.related-title {
  font-size:   .95rem;
  font-weight: 600;
  color:       var(--text-soft);
  margin-bottom:.7rem;
}
.related-chip {
  display:       block;
  width:         100%;
  text-align:    left;
  padding:       .7rem 1rem;
  margin-bottom: .5rem;
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 9px;
  font-family:   var(--font-serif);
  font-size:     1.02rem;
  color:         var(--text);
  cursor:        pointer;
  transition:    all .18s;
}
.related-chip::before { content:'🔎 '; color:var(--accent) }
.related-chip:hover {
  border-color: var(--accent);
  background:   var(--accent-glow);
  color:        var(--accent);
  transform:    translateX(2px);
}

/* ── Error card ──────────────────────────────────────────────────────────────── */
.error-card {
  background:    rgba(179,50,47,.06);
  border:        1px solid rgba(179,50,47,.25);
  border-radius: var(--radius);
  padding:       1.2rem 1.5rem;
  color:         var(--error);
  font-size:     1rem;
  animation:     fadeUp .45s ease-out;
  margin-bottom: 1rem;
}
.error-card strong { display:block; margin-bottom:.3rem }

/* ── Not-found state ─────────────────────────────────────────────────────────── */
.answer-card.not-found { border-color:rgba(154,106,30,.35); background:rgba(154,106,30,.04) }
.answer-card.not-found .answer-header { background:rgba(154,106,30,.08); border-bottom-color:rgba(154,106,30,.22) }
.answer-card.not-found .answer-header h3 { color:var(--warn) }
.answer-card.not-found .answer-body     { color:var(--text-soft) }

/* ── Cancel button ───────────────────────────────────────────────────────────── */
.btn-cancel {
  display:       none;
  align-items:   center;
  gap:           .3rem;
  padding:       .4rem .85rem;
  background:    transparent;
  color:         var(--text-dim);
  border:        1px solid var(--border);
  border-radius: 7px;
  font-size:     .85rem;
  font-family:   var(--font-sans);
  cursor:        pointer;
  transition:    all .2s;
}
.btn-cancel.visible { display:inline-flex }
.btn-cancel:hover   { border-color:var(--error); color:var(--error); background:rgba(179,50,47,.06) }

/* ── History ─────────────────────────────────────────────────────────────────── */
.history {
  display:        flex;
  flex-direction: column;
  gap:            1.2rem;
  min-height:     6rem;
  order:          2; /* visually after input-card in initial state */
}

.has-conversation .history {
  order: 1; /* visually before input-card in chat state */
}

.q-label {
  font-size:      1rem;
  color:          var(--accent);
  font-weight:    600;
  margin-bottom:  .5rem;
  letter-spacing: .02em;
  white-space:    pre-wrap;
  word-break:     break-word;
}

/* ── Empty / welcome state ───────────────────────────────────────────────────── */
.empty-state {
  text-align:    center;
  padding:       1.5rem 1rem 1.5rem;
  color:         var(--text-dim);
  font-family:   var(--font-serif);
  animation:     fadeUp .5s ease-out;
}
.empty-state { font-size:2.5rem; margin-bottom:.8rem }
.empty-state p { font-size:1rem; line-height:1.8; margin-bottom:1.2rem }
.empty-examples { list-style:none; display:flex; flex-direction:column; gap:.5rem; align-items:center }
.empty-examples li {
  background:    var(--surface);
  border:        1px solid var(--border);
  border-radius: 9px;
  padding:       .55rem 1.1rem;
  font-size:     .98rem;
  color:         var(--text-soft);
  cursor:        pointer;
  transition:    all .18s;
  max-width:     480px;
  width:         100%;
  text-align:    left;
}
.empty-examples li::before { content:'💬 '; }
.empty-examples li:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-glow) }

/* ── New Conversation button ─────────────────────────────────────────────────── */
.btn-ghost {
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  gap:            .4rem;
  padding:        .6rem 1.05rem;
  background:     transparent;
  color:          var(--text-soft);
  border:         1px solid var(--border);
  border-radius:  9px;
  font-size:      .92rem;
  font-weight:    500;
  line-height:    1;
  cursor:         pointer;
  transition:     all .2s;
}
.btn-ghost:hover    { border-color:var(--accent); color:var(--accent); background:var(--accent-glow) }
.btn-ghost:disabled { opacity:.35; cursor:not-allowed }

/* ── Footer logos ────────────────────────────────────────────────────────────── */
.site-footer {
  width:            100%;
  /* max-width:        760px; */
  margin-top:       2.8rem;
  padding-top:      1.6rem;
  border-top:       1px solid var(--border);
  display:          flex;
  flex-wrap:        wrap;
  justify-content:  center;
  align-items:      center;
  gap:              1.4rem 2rem;
}
.site-footer a {
  display:     inline-flex;
  align-items: center;
  opacity:     .7;
  transition:  opacity .2s;
  flex-shrink: 0;
}
.site-footer a:hover { opacity:1 }
.site-footer img {
  height:       30px;
  width:        auto;
  max-width:    150px;
  object-fit:   contain;
  display:      block;
}

/* ── Scroll to bottom ────────────────────────────────────────────────────────── */
.scroll-bottom-btn {
  position:        fixed;
  right:           0.8rem;
  bottom:          1.5rem;
  z-index:         25;
  width:           2.6rem;
  height:          2.6rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      var(--surface);
  border:          1px solid var(--border);
  border-radius:   50%;
  color:           var(--accent);
  font-size:       1.15rem;
  line-height:     1;
  cursor:          pointer;
  box-shadow:      0 2px 10px rgba(0,0,0,.05);
  transition:      border-color .2s, color .2s, background .2s, box-shadow .2s;
  -webkit-tap-highlight-color: transparent;
}
.scroll-bottom-btn:hover {
  border-color: var(--accent);
  background:   var(--accent-glow);
  box-shadow:   0 2px 14px rgba(0,0,0,.1);
}
.scroll-bottom-btn:active,
.scroll-bottom-btn:focus {
  opacity:    1;
  background: var(--accent-glow);
  border-color: var(--accent);
  color:      var(--accent);
}
.scroll-bottom-btn:focus { outline: none }
.scroll-bottom-btn:focus-visible {
  outline:        2px solid var(--accent);
  outline-offset: 2px;
}
.scroll-bottom-btn[hidden] { display: none !important }
.has-conversation .scroll-bottom-btn {
  bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px));
}

/* ── Animations ──────────────────────────────────────────────────────────────── */
@keyframes fadeDown { from{opacity:0;transform:translateY(-12px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeUp   { from{opacity:0;transform:translateY(12px)}  to{opacity:1;transform:translateY(0)} }
@keyframes spin     { to{transform:rotate(360deg)} }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width:560px) {
  body             { padding:1rem .7rem 2rem }
  :root            { --base-size:18px }
  .font-bar        {
    position:     static;
    top:          auto;
    right:        auto;
    align-self:   center;
    margin-bottom:.6rem;
  }
  .header          { margin-top:0 }
  .header h1       { font-size:1.7rem }
  .header .subtitle{ font-size:1rem }

  /* ── initial-state input on mobile ── */
  .input-footer    { flex-direction:column; gap:.9rem; align-items:stretch }
  .btn             { width:100%; justify-content:center }

  /* ── mini input on mobile: tighter padding ── */
  .has-conversation .input-card { padding:.4rem .65rem calc(.5rem + env(safe-area-inset-bottom,0px)) }
  .has-conversation .btn        { width:auto }  /* override 100% above */

  /* ── answer cards: stay row, reduce padding ── */
  .answer-header   { flex-direction:row; padding:.65rem .9rem; gap:.5rem }
  .answer-header h3{ font-size:1rem }
  .answer-footer   { padding:.65rem .9rem }
  .answer-body     { padding:1rem 1rem; font-size:1.05rem }
  .related-section { padding:.8rem 1rem 1rem }

  /* ── footer ── */
  .site-footer     { gap:1rem 1.4rem }
  .site-footer img { height:24px }
}