/* ============================================================
   Final Task — 樣式對齊 M2 task 教過的 CSS 設計系統
   - CSS 變數（:root）
   - 玻璃感 panel：半透白 + 大圓角 + 柔陰影
   - 漸層背景（藍 → 綠）
   - 圓角 pill button、IME-friendly input
   - 對話歷史 Q&A list（fix 3）
   - 響應式單欄佈局（fix 4，配合 sketch.js getLayout）
   ============================================================ */

:root {
  --bg1:          #cfe9fb;
  --bg2:          #c7ebff;
  --bg3:          #6fe7b0;
  --panel-strong: rgba(255, 255, 255, 0.88);
  --stroke:       rgba(20, 40, 60, 0.10);
  --shadow:       0 10px 26px rgba(10, 30, 50, 0.10);
  --text:         #0d1b2a;
  --muted:        rgba(13, 27, 42, 0.62);
  --ok:           #1fd39b;
  --warn:         #ff6b7a;
  --radius:       18px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "PingFang TC", "Microsoft JhengHei", sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg1), var(--bg2) 45%, var(--bg3));
  background-attachment: fixed;
}

/* 不要 center 或加 padding，否則 createDiv / createInput 的
   絕對定位（相對 body）會跟 canvas 內座標脫鉤。 */
main {
  display: block;
  padding: 0;
}

canvas {
  display: block;
}

/* ── DOM div：AI chat history（可 scroll、可選文字）──
   Height/width are set inline by sketch.js applyDomLayout() so the
   layout stays in sync with the canvas-side getLayout(). No !important
   here so the dynamic size can take effect. */
#ai-response {
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 12px 16px;
  overflow-y: auto;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  font-family: inherit;
  word-wrap: break-word;
  box-sizing: border-box;
}

#ai-response::-webkit-scrollbar { width: 8px; }
#ai-response::-webkit-scrollbar-thumb {
  background: rgba(20, 40, 60, 0.18);
  border-radius: 999px;
}

/* Empty-state placeholder shown before first question */
#ai-response .qa-placeholder {
  color: var(--muted);
  font-style: italic;
  padding: 8px 0;
}

/* Transient note (e.g. "請先輸入問題") */
#ai-response .qa-note {
  color: var(--warn);
  background: rgba(255, 107, 122, 0.08);
  border-left: 3px solid var(--warn);
  padding: 8px 10px;
  margin-top: 8px;
  border-radius: 4px;
  font-size: 13px;
}

/* One Q&A pair */
#ai-response .qa-pair {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(20, 40, 60, 0.08);
}
#ai-response .qa-pair:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

#ai-response .qa-pair .q {
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
  white-space: pre-wrap;
}
#ai-response .qa-pair .q::before {
  content: '👤 ';
  margin-right: 2px;
}

#ai-response .qa-pair .a {
  color: rgba(13, 27, 42, 0.86);
  white-space: pre-wrap;
}
#ai-response .qa-pair .a::before {
  content: '🤖 ';
  margin-right: 2px;
}

/* ── DOM input：用戶問題輸入框（matches M2 .btn 風格）── */
input[type="text"] {
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  outline: none;
  box-shadow: 0 4px 12px rgba(10, 30, 50, 0.06);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type="text"]:focus {
  border-color: var(--ok);
  box-shadow: 0 4px 12px rgba(31, 211, 155, 0.25);
}

input[type="text"]::placeholder {
  color: var(--muted);
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  input[type="text"] { transition: none; }
}

/* ── Mobile tweaks: smaller chat font, tighter padding ── */
@media (max-width: 1023px) {
  #ai-response {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
  }
  #ai-response .qa-pair { margin-bottom: 10px; padding-bottom: 8px; }
  input[type="text"] {
    font-size: 13px;
    padding: 8px 12px;
  }
}