:root{
  --paper:#e8dfd3; --ink:#2b2b2b; --sub:#5c5c5c; --line:#e6e0d6;
  --card:#ffffff; --red:#b43e2a; --blue:#2b6cb0;
  --chip:#f3efe6; --warn:#a15c00; --warn-bg:#fff5d8; --ok:#156a3a; --ok-bg:#e7f4ea;
}
html{font-size:17px;} @media(min-width:480px){html{font-size:17.5px}} @media(min-width:768px){html{font-size:18px}}
*{box-sizing:border-box} body{margin:0;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,PingFang SC,HarmonyOS_Regular,Helvetica,Arial;line-height:1.35}
.container{max-width:720px;margin:0 auto;padding:10px 10px 92px}
.hdr{position:sticky;top:0;z-index:20;background:rgba(248,245,239,.9);backdrop-filter:saturate(110%) blur(8px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;gap:12px;align-items:center;padding:10px 12px}
.logo{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--red)}
.brand{font-weight:800;letter-spacing:.5px}
.sub{font-size:.82rem;color:var(--sub)}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin:12px 10px}
.card.inner{background:#fffdf9}
.title{font-weight:700;margin:0 0 6px;display:flex;align-items:center;gap:8px}
.small{font-size:.82rem;color:var(--sub)} .muted{opacity:.9}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.text{flex:1;min-width:40%;padding:.75rem .8rem;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:1rem}
.btn{display:inline-block;padding:.7rem .9rem;border-radius:12px;background:var(--red);color:#fff;text-decoration:none;font-weight:700;cursor:pointer}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--ink)}
.pill{display:inline-block;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.9rem;color:var(--ink)}
.pill.right{margin-left:auto}

.hdr .chat-toggle-pill{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:.42rem .65rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);text-decoration:none;font-size:.9rem;white-space:nowrap}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chip{font-size:.8rem;padding:.45rem .65rem;border:1px solid var(--line);border-radius:999px;background:var(--chip);color:var(--ink)}

/* chat (浮動 + 可收起) */
.card.chat{position:fixed;top:10px;right:10px;width:min(420px,92vw);z-index:999;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.chat-list{max-height:46vh;overflow:auto;padding:8px 4px;background:rgba(0,0,0,.02);border:1px solid rgba(0,0,0,.06);border-radius:10px}
.msg{display:flex;margin:8px 0}
.msg .bubble{max-width:78%;padding:10px 12px;border-radius:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.msg.user{justify-content:flex-end}
.msg.user .bubble{background:#e6f0ff;border:1px solid #c7ddff;border-bottom-right-radius:4px}
.msg.ai .bubble{background:#fff7f5;border:1px solid #f0d4ce;border-bottom-left-radius:4px}
.msg .meta{font-size:12px;color:#888;margin-top:4px}
.chat-input-row{display:flex;gap:8px;align-items:flex-end;margin-top:8px}
#chat-input{flex:1;resize:vertical;padding:10px;border-radius:10px;border:1px solid #ddd;background:#fff;color:#111;font-size:16px}
.chat-actions .btn{white-space:nowrap}
.typing{margin:8px 0;font-size:12px;color:#666}
.typing::after{content:' …';animation:dots 1.2s infinite steps(4,end)}
@keyframes dots{0%{content:' '}25%{content:' .'}50%{content:' ..'}75%{content:' ...'}100%{content:' '}}
.small.tight{margin-top:2px} .small.tight2{margin-top:1px}

/* collapse */
#chat-card.chat-collapsed #chat-list,
#chat-card.chat-collapsed .chat-input-row,
#chat-card.chat-collapsed #typing-indicator{display:none}
#chat-card.chat-collapsed .title .right{display:none}

/* bottom nav */
.tabbar{position:fixed;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);display:flex}
.tabbar a{flex:1;text-align:center;padding:10px 0;color:var(--red);text-decoration:none;font-size:.9rem}
.tabbar a[aria-current="page"]{background:linear-gradient(180deg,rgba(180,62,42,.08),rgba(180,62,42,0))}


/* === Chat bubble sizing & meta timestamp (WhatsApp-like) === */
.chat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-list .msg {
  display: flex;
}

.chat-list .msg.ai { justify-content: flex-start; }
.chat-list .msg.user { justify-content: flex-end; }

.chat-list .bubble {
  position: relative;
  max-width: 72%;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 14px;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.chat-list .msg.ai .bubble {
  background: #f2f4f5;
  color: #222;
  border-top-left-radius: 6px;
}

.chat-list .msg.user .bubble {
  background: #d6f8c6;
  color: #111;
  border-top-right-radius: 6px;
}

/* First greeting bubble should not dominate */
.chat-list .msg.ai:first-child .bubble {
  max-width: 56%;
  font-size: 0.95rem;
}

/* Tiny, faint timestamp aligned to the bottom-right inside bubble */
.chat-list .bubble .meta {
  display: block;
  text-align: right;
  font-size: 10px;
  opacity: 0.55;
  margin-top: 4px;
}

/* === Focused UI tweaks (center + enlarge generate button; chat title pill) === */
#btn-generate{
  display:block;
  margin:14px auto;
  font-size:1.25rem !important;
  padding:1.1rem 1.6rem !important;
  border-radius:16px !important;
}
.btn[disabled], .btn[aria-disabled="true"]{
  opacity:.55;
  filter:grayscale(35%);
  cursor:not-allowed;
  pointer-events:none;
}
.chat-toggle-title{
  background: var(--chip);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
  user-select:none;
  transition: background .2s, transform .05s;
}
.chat-toggle-title:hover{ background: var(--ok-bg); }
.chat-toggle-title:active{ transform: scale(0.98); }

/* === Center & enlarge "立即生成報告" button, plus vivid state === */
#btn-generate{
  display:block;
  margin:14px auto;
  text-align:center;
  font-size:1.25rem !important;
  padding:1.1rem 1.6rem !important;
  border-radius:16px !important;
}
.btn[disabled], .btn[aria-disabled="true"]{
  opacity:.55; filter:grayscale(35%);
  cursor:not-allowed; pointer-events:none;
}
/* vivid style after data ready (no palette change; use theme vars) */
.btn.primary{
  background: var(--red);
  border-color: var(--red);
  color:#fff;
  box-shadow:0 6px 18px rgba(180,62,42,.25);
}
.btn.primary:hover{ filter:saturate(110%); box-shadow:0 8px 22px rgba(180,62,42,.32); }


/* === Make generate button non-white when enabled (minimal, no JS change) === */
#btn-generate:not([disabled]){
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}


/* === Mobile single-row layout for city input + 2 buttons === */
@media (max-width: 420px){
  /* Target the specific row that contains the #loc input */
  .row:has(#loc){ 
    flex-wrap: nowrap;
    gap: 6px;
  }
  #loc{
    flex: 1 1 42%;
    min-width: 0; /* allow shrinking */
    padding: .6rem .68rem;
    font-size: .95rem;
  }
  #btn-geocode, #btn-geo{
    white-space: nowrap;
    padding: .55rem .6rem;
    font-size: .84rem;
    flex: 0 0 auto;
  }
}


/* === Global single-row layout for city input + 2 buttons (desktop & mobile) === */
.row:has(#loc){
  flex-wrap: nowrap;
  gap: 8px;
}
.row:has(#loc) #loc{
  flex: 1 1 44%;
  min-width: 0;
}
.row:has(#loc) #btn-geocode,
.row:has(#loc) #btn-geo{
  flex: 0 0 auto;
  white-space: nowrap;
}


/* === Fallback (no :has support) — keep city input + 2 buttons in one line === */
#loc{ flex: 1 1 36% !important; min-width: 0 !important; }
#btn-geocode, #btn-geo{ flex: 0 0 auto; white-space: nowrap; font-size: .9rem; padding: .55rem .7rem; }

.btn.small{font-size:.9rem;padding:.5rem .72rem}

#copy-report{margin-top:8px}

/* === 2025-08-16: Mobile layout adjustments === */
:root{ --hdrH: 88px; }
.hdr .wrap{ min-height: var(--hdrH); padding: 14px 12px; }

.card.chat{
  right: 10px;
  width: min(360px, 78vw);
}

@media (max-width: 480px){
  :root{ --hdrH: 96px; }
  .card.chat{
    top: calc(var(--hdrH) + 8px);
    right: 8px;
    width: 78vw;
  }
  .chat-list{ max-height: 40vh; }
}

.row.row-loc{ display:flex; }
.row.row-loc #loc{
  flex: 1 1 100%;
  min-width: 0;
}


.row.row-actions .btn{
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 380px){
  .row.row-actions .btn{ padding:.5rem .6rem; font-size:.85rem; }
}

/* === 2025-08-16 hotfix: Chat pinned top-right, safe-area aware; narrower on mobile === */
.card.chat{
  position: fixed !important;
  top: max(6px, env(safe-area-inset-top)) !important;
  right: calc(6px + env(safe-area-inset-right)) !important;
  width: min(400px, 86vw) !important;
  z-index: 9999 !important;
}
@media (max-width: 480px){
  .card.chat{
    width: 72vw !important;         /* slimmer on iPhone so it won't cover input */
  }
}
/* keep header height normal; chat floats above it without pushing layout */

/* === AI 對話懸浮按鈕（右側置中） === */
.chat-fab{
  position: fixed;
  right: max(8px, calc(env(safe-area-inset-right) + 6px));
  top: 50%;
  transform: translateY(-50%);
  z-index: 10000;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.chat-fab img{ width: 28px; height: 28px; display:block; }

/* 手機上隱藏原「💬 AI對話」文字開關，避免佔位 */
@media (max-width: 480px){
  #chat-card .chat-toggle-title{ display:none; }
}

/* 永遠隱藏原「💬 AI對話」文字開關 */
#chat-card .chat-toggle-title {
  display: none !important;
}
/* === 控件兩行排版（最小覆蓋） === */
.control-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.control-row.center {
  justify-content: center;
}

/* 第 1 行：輸入框撐滿，解析按鈕緊跟其後 */
#row-loc #loc {
  flex: 1;
  min-width: 0;
}
#row-loc .btn,
#row-loc button {
  white-space: nowrap;
}

/* 手機優化 */
@media (max-width: 480px) {
  .control-row { gap: 6px; }
  #row-loc #loc { flex: 1; }
}

/* === 懸浮 Chat 按鈕：200px 大小 + 吸睛效果 === */
#chat-fab {
  background: none !important;
  border: none !important;
  box-shadow: none !important;   /* 移除光圈 */
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.2s ease;
  position: fixed;
  top: max(10px, env(safe-area-inset-top) + 10px);
  right: max(10px, env(safe-area-inset-right) + 10px);
  z-index: 10000;
}
#chat-fab:hover {
  transform: scale(1.05);        /* 保留縮放 */
  box-shadow: none !important;   /* 移除 hover 光圈 */
}
#chat-fab img {
  width: 200px;
  height: 200px;
  display: block;
}
/* === 置中第二行（#btn-geo）並強制換到下一行 === */
.row.row-actions{
  display: flex !important;
  flex-direction: column !important;  /* 垂直堆疊兩列 */
  align-items: center !important;      /* 置中 */
  gap: 10px;
}
/* 若 JS 動態插入 row-geo（第二行），也一律置中 */
#row-geo{
  display: flex !important;
  justify-content: center !important;
  width: 100%;
}
/* 第一行（輸入框 + 解析城市）保持同列並可縮放 */
#row-loc{
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
}
#row-loc #loc{
  flex: 1 1 auto;
  min-width: 0;
}


/* === 2025-08-18 FIX PACK ===
   1) Remove collapsed white bar (hide chat card shell when collapsed)
   2) Make chat.png button container auto-size so 200px image is fully visible
*/
#chat-card.chat-collapsed{
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 0 !important;
  min-height: 0 !important;
  pointer-events: none !important;
}
/* Ensure the chat FAB fits the 200px image and stays top-right */
#chat-fab{
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top) + 10px) !important;
  right: max(10px, env(safe-area-inset-right) + 10px) !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 10000 !important;
}
#chat-fab img{
  display: block !important;
  width: 200px !important;
  height: 200px !important;
} 
@media (max-width: 480px){
  #chat-fab img{ width: 140px !important; height: 140px !important; }
}


/* === 2025-08-18 NUDGE: push chat.png further to top-right corner === */
#chat-fab{
  top: max(4px, env(safe-area-inset-top) + 4px) !important;
  right: max(4px, env(safe-area-inset-right) + 4px) !important;
}

/* === 2025-08-21 UI overrides (requested) ===
   1) Shrink chat card width by ~30px to avoid lining up with report section
   2) Fix chat list height to 70% of viewport on mobile/any
   3) Reduce top-right GIF to 80% size (desktop & mobile)
*/
.card.chat{
  width: min(380px, 83vw) !important;
}
.chat-list{
  height: 70vh !important;
  max-height: 70vh !important;
}
#chat-fab img{
  width: 160px !important;
  height: 160px !important;
}
@media (max-width: 480px){
  #chat-fab img{
    width: 112px !important;
    height: 112px !important;
  }
}