/* 祥益科技（shiangyi.tech）品牌風格
   取自官網 Astra 主題設定：主色 #0170B9、深藍 #004da0、亮藍 #278bf6、
   底色 #F5F5F5、內文 #3a3a3a、次要文字 #4B4F58、分隔線 #E5E5E5、字型 Noto Sans TC */
:root {
  --brand:#0170B9;
  --brand-dark:#004da0;
  --brand-light:#278bf6;
  --bg:#F5F5F5;
  --surface:#fff;
  --text:#3a3a3a;
  --muted:#4B4F58;
  --line:#E5E5E5;
  --ok:#2e7d32;
  --warn:#ef6c00;
  --radius:8px;
}
* { box-sizing:border-box; margin:0; }
body {
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",
              -apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--bg); color:var(--text);
  height:100dvh; display:flex; flex-direction:column;
}

/* ── 頁首：白底放橫式 logo，維持官網的乾淨企業感 ── */
header {
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  padding:10px 18px; display:flex; align-items:center; gap:14px;
}
header .logo { height:30px; width:auto; flex:0 0 auto; }
header .brand { display:flex; flex-direction:column; gap:1px;
                border-left:1px solid var(--line); padding-left:14px; }
header .brand strong { font-size:15px; font-weight:700; color:var(--brand-dark);
                       letter-spacing:.02em; }
header .brand small { font-size:12px; font-weight:400; color:var(--muted); }

#chat { flex:1; overflow-y:auto; padding:18px 16px; display:flex;
        flex-direction:column; gap:12px; }
/* 直向 flex 容器在內容溢出時會壓縮子元素。文字泡泡靠 min-height:auto 撐住，
   但 .cards 有 overflow-x，自動最小尺寸變成 0，整排卡片會被壓成一條線。 */
#chat > * { flex:0 0 auto; }

/* ── 對話泡泡 ── */
.msg { max-width:82%; padding:11px 15px; border-radius:12px; line-height:1.7;
       font-size:15px; white-space:pre-wrap; word-break:break-word; }
.msg.bot { background:var(--surface); color:var(--text);
           align-self:flex-start; border:1px solid var(--line);
           border-top-left-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.msg.user { background:var(--brand); color:#fff; align-self:flex-end;
            border-top-right-radius:3px;
            box-shadow:0 1px 2px rgba(1,112,185,.25); }
.msg.bot .md p { margin:0 0 .45em; }
.msg.bot .md p:last-child { margin-bottom:0; }
.msg.bot .md ul, .msg.bot .md ol { margin:.25em 0 .55em; padding-left:1.3em; }
.msg.bot .md li { margin:.2em 0; }
.msg.bot .md li::marker { color:var(--brand-light); }
.msg.bot .md strong { font-weight:700; color:var(--brand-dark); }
.msg.bot .md code { background:var(--bg); border:1px solid var(--line);
                    border-radius:4px; padding:0 5px; font-size:13px; }

/* ── 商品卡 ── */
/* 寬度跟著對話泡泡走：窄版 iframe 仍是橫向滑動，寬螢幕則一次顯示完
   （後端最多回 4 張，4×190 + 3×10 = 790px） */
.cards { align-self:flex-start; width:100%; max-width:min(82%, 820px);
         display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px;
         scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
         scrollbar-width:thin; }
.cards::-webkit-scrollbar { height:5px; }
.cards::-webkit-scrollbar-thumb { background:#c9d3dd; border-radius:4px; }
.card { flex:0 0 190px; width:190px; scroll-snap-align:start;
        background:var(--surface); border:1px solid var(--line);
        border-radius:10px; overflow:hidden;
        text-decoration:none; color:inherit;
        transition:border-color .12s, box-shadow .12s, transform .12s;
        display:flex; flex-direction:column; }
.card:hover { border-color:var(--brand-light); transform:translateY(-2px);
              box-shadow:0 4px 12px rgba(1,112,185,.14); }
.card img { width:100%; height:160px; object-fit:cover; background:var(--bg);
            flex:0 0 auto; }
.card .info { display:flex; flex-direction:column; gap:4px; padding:10px 12px;
              flex:0 0 auto; }
.card .name { font-size:13px; font-weight:600; line-height:1.4; color:var(--text);
              display:-webkit-box; -webkit-line-clamp:2;
              -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; }
.card .price { color:var(--brand-dark); font-weight:700; font-size:16px; }
.card .price small { color:#9aa3ad; text-decoration:line-through;
                     font-weight:400; margin-left:6px; font-size:12px; }
.card .opt { font-size:11px; color:var(--muted); }
.card .tag { font-size:12px; color:var(--ok); }
.card .tag.pre { color:var(--warn); }

/* ── 輸入區 ── */
#form { display:flex; gap:8px; padding:12px 16px;
        background:var(--surface); border-top:1px solid var(--line); }
#input { flex:1; border:1px solid var(--line); border-radius:var(--radius);
         padding:11px 14px; font:inherit; font-size:15px; color:var(--text);
         outline:none; background:var(--surface);
         transition:border-color .12s, box-shadow .12s; }
#input:focus { border-color:var(--brand);
               box-shadow:0 0 0 3px rgba(1,112,185,.12); }
button { background:var(--brand); color:#fff; border:0;
         border-radius:var(--radius); padding:0 22px; font:inherit;
         font-size:15px; font-weight:500; cursor:pointer;
         transition:background .12s; }
button:hover:not(:disabled) { background:var(--brand-dark); }
button:disabled { opacity:.45; cursor:default; }

#sugs { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 10px; }
#sugs button { background:var(--surface); color:var(--brand);
               border:1px solid #bcd8ec; border-radius:20px;
               padding:8px 14px; font-size:13px; font-weight:400; }
#sugs button:hover { background:var(--brand); color:#fff;
                     border-color:var(--brand); }

/* ── 開場問卷 ── */
.qform { align-self:flex-start; max-width:86%; background:var(--surface);
         border:1px solid var(--line); border-radius:12px;
         border-top-left-radius:3px; padding:16px 18px; font-size:14px;
         box-shadow:0 1px 2px rgba(0,0,0,.04); }
.qform h4 { margin:0 0 4px; font-size:15px; color:var(--brand-dark); }
.qform .hint { color:var(--muted); font-size:12px; }
.qform .qtitle { margin:12px 0 6px; color:var(--text); font-size:13px;
                 font-weight:600; }
.qform .opts { display:flex; flex-wrap:wrap; gap:7px; }
.qform .opt { border:1px solid var(--line); background:var(--surface);
              color:var(--text); border-radius:20px; padding:7px 14px;
              font-size:13px; font-weight:400; cursor:pointer;
              transition:all .12s; }
.qform .opt:hover { border-color:var(--brand-light); color:var(--brand); }
.qform .opt.on { background:var(--brand); border-color:var(--brand);
                 color:#fff; }
.qform .free { width:100%; margin-top:8px; border:1px solid var(--line);
               border-radius:var(--radius); padding:9px 11px; font:inherit;
               font-size:13px; outline:none; }
.qform .free:focus { border-color:var(--brand);
                     box-shadow:0 0 0 3px rgba(1,112,185,.12); }
.qform .go { margin-top:14px; width:100%; padding:11px; font-size:14px;
             font-weight:600; }
.qform .skip { margin-top:8px; width:100%; background:none; border:0;
               color:var(--muted); font-size:12px; cursor:pointer;
               text-decoration:underline; padding:4px; }
.qform .skip:hover { background:none; color:var(--brand); }

.dots::after { content:"▍"; color:var(--brand-light); animation:blink 1s infinite; }
@keyframes blink { 50% { opacity:0; } }

/* ── 手機：卡片至少佔一半螢幕高，圖片吃掉資訊列以外的所有空間；
      寬度留 38vw 讓下一張露出邊角，提示可以左右滑 ── */
@media (max-width: 640px) {
  header { padding:9px 14px; gap:10px; }
  header .logo { height:26px; }
  header .brand { padding-left:10px; }
  header .brand small { display:none; }
  #chat { padding:14px 12px; }
  .msg { max-width:88%; }
  .cards { max-width:100%; gap:12px; }
  .card { flex:0 0 min(62vw, 280px); width:min(62vw, 280px);
          min-height:50dvh; }
  .card img { flex:1 1 0; min-height:0; height:auto; }
  .card .name { font-size:14px; }
  .card .price { font-size:17px; }
  .card .opt { font-size:12px; }
}