@charset "utf-8";
/* ── 跳過導覽連結 (Skip Link) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-size: 0.9375em;
  font-weight: 700;
  z-index: 99999;
  text-decoration: none;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

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

:root {
  --navy:    #0d1f3c;
  --blue:    #1a3a5c;
  --mid:     #2d6a9f;
  --sky:     #4facde;
  --accent:  #e05520;
  --gold:    #f0a500;
  --bg:      #f0f4f9;
  --card:    #ffffff;
  --border:  #d8e4f0;
  --text:    #1a2a3a;
  --muted:   #6b8099;
  --ai-bg:   #ffffff;
  --user-bg: linear-gradient(135deg, #1e4d7a, #2d6a9f);
}

/* ── 高對比焦點樣式 ── */
:focus-visible {
  outline: 3px solid #f0a500;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 移除滑鼠使用者的預設焦點外框，保留鍵盤使用者的 */
:focus:not(:focus-visible) { outline: none; }

html, body { height: 100%; }

body {
  font-family: 'Noto Sans TC', "Microsoft JhengHei", sans-serif;
  font-size: 0.9375em;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ── TOP BAR ── */
.topbar {
  background: var(--ai-bg);
  padding: 6px 24px;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
  z-index: 10;
}
.topbar-l { display: flex; align-items: center; gap: 12px; }
.topbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.topbar-logo a{
  display:block;
  width:350px;height:70px;
  text-indent:-999px;
  overflow:hidden;
  background:url(../images/logo.png?v=230925) no-repeat 0 50%;
  background-size:contain;
}
@media screen and (max-width: 600px) {
    .topbar-logo a {
        width: calc(100vw - 188px);
        height: 50px;
    }
}
@media screen and (min-width: 1200px) {
    .topbar-logo a {
        width: 530px;
    }
}
.topbar-title { color: #fff; font-size: 1.375em;; font-weight: 700; letter-spacing: .5px; }
.topbar-sub   { color: rgba(160,200,232,.8); font-size: 0.75em; margin-top: 2px; }
.topbar-r { display: flex; align-items: center; gap: 10px; }
.topbar-badge {
  padding: 4px 12px;
  border-radius: 20px;
  display: flex; align-items: center; gap: 5px;
  font-size: 1.125em;
  line-height: 150%;
  background: #f0f5fb;
  border: 1px solid #c8d8ec;
  color: var(--mid);
}
.badge-dot {
  width: 6px; height: 6px;
  background: var(--mid);
  border-radius: 50%;
  animation: pulse-green 2s infinite;
}
/* 減少動畫：尊重使用者偏好 */
@media (prefers-reduced-motion: reduce) {
  .badge-dot,
  .typing-dots span,
  .sbars s,
  .v-dot,
  .progress-fill,
  .welcome-msg,
  .user-row,
  .ai-row,
  .result-block,
  .modal-box,
  .modal-overlay {
    animation: none !important;
    transition: none !important;
  }
  .progress-fill { width: 100%; }
}
@keyframes pulse-green {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.6; transform:scale(1.3); }
}
.clear-btn {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  border: none;
  color: rgba(255,255,255,.8);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 1em;
  line-height: 150%;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
  display: flex; align-items: center; gap: 5px;
  
}
.clear-btn:hover { 
  background: #D92020;
  color:#fff;
}
button[class$="-btn"],a[class$="-btn"]{
  transition:filter .15s, transform .1s;
}
button[class$="-btn"]:hover,
button[class$="-btn"]:focus,
a[class$="-btn"]:hover,
a[class$="-btn"]:focus{
  filter:brightness(1.1);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
}
button[class$="-btn"]:focus-visible,
a[class$="-btn"]:focus-visible { 
  outline:2px dashed #FF6600; outline-offset:2px;
}
/* ── MAIN LAYOUT ── */
.main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* ── CHAT AREA ── */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* chat messages */
.chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.chat-scroll::-webkit-scrollbar { width: 5px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }
.chat-scroll::-webkit-scrollbar-thumb { background: #c8d8ec; border-radius: 3px; }

/* Welcome message */
.welcome-msg {
  background: var(--ai-bg);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 18px 20px;
  max-width: 700px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  animation: msg-in .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes msg-in {
  from { opacity:0; transform:translateY(10px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
.welcome-msg h2 {
  font-size: 1em; font-weight: 700; color: var(--blue); margin-bottom: 6px;
}
.welcome-msg p { font-size: 1em; line-height: 1.75; color: #334; }
.bot-title{font-size: 1.375em; line-height: 1.75; color: var(--blue);}
.welcome-msg .hl { color: var(--accent); font-weight: 700; }
.welcome-eg {
  margin-top: 12px;
  background: #f0f5fb;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.9375em; color: #556; font-style: italic; line-height: 1.7;
  position: relative;
}
.welcome-eg::before{
  content: "";
  display: block;
  width:3px;
  height: 1.5em;
  background-color: var(--mid);
  position: absolute;
  left: 0;top:50%;
  border-radius: 4px;
  margin-top: -0.75em;
}
.msg-meta {
  width: 100%;
  font-size: 0.6125em;
  color: #888; margin-top: 8px;
} /* 提升對比度 */
/* User message */
.user-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  animation: msg-in .3s ease;
}
.user-bubble {
  background: var(--user-bg);
  color: #fff;
  border-radius: 16px 16px 4px 16px;
  padding: 11px 16px;
  max-width: 60%;
  font-size: 0.875em; line-height: 1.6;
  box-shadow: 0 3px 12px rgba(29,74,122,.3);
}

/* AI thinking */
.ai-row {
  margin-top: 12px;
  animation: msg-in .35s cubic-bezier(.34,1.56,.64,1);
}
.ai-bubble {
  background: var(--ai-bg);
  border: 1px solid var(--border);
  border-radius: 16px 16px 16px 4px;
  padding: 14px 18px;
  max-width: 700px;
  font-size: 1em; line-height: 1.75; color: #334;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.ai-bubble strong { color: var(--mid); }
.ai-bubble:has(.result-title),
.ai-bubble:has(.typing-dots),
.ai-bubble:has(.progress-bar){
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 8px;
}
/* Search progress */
.progress-bar {
  height: 3px;
  background: #e0eaf8;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 10px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sky), var(--mid));
  border-radius: 2px;
  animation: progress-anim 1s ease forwards;
}
@keyframes progress-anim { from{width:0} to{width:100%} }

/* Result cards */
.result-block {
  margin-top: 12px;
  animation: msg-in .35s cubic-bezier(.34,1.56,.64,1);
}
.result-header {
  display: flex; align-items: center; justify-content: space-between;
}
.result-title { font-size: 1.25em; font-weight: 600; color: var(--blue); }
.result-count { font-size: 0.9375em; color: var(--muted); }
.result-count strong { color: var(--accent); font-size: 1em; }

.result-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rtag {
  background: #e8f0fb; color: var(--mid);
  border: 1px solid #c8daf5;
  border-radius: 4px; padding: 3px 10px;
  font-size: 0.75em; cursor: pointer;
}
.rtag:hover { background: var(--mid); color: #fff; }

.cards-list { display: flex; flex-direction: column; gap: 8px; }
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  transition: all .18s;
}
.card:hover { border-color: var(--mid); box-shadow: 0 4px 16px rgba(45,106,159,.15); transform: translateY(-1px); }
.card:focus-within { border-color: var(--mid); box-shadow: 0 0 0 3px rgba(240,165,0,.35); }
.card-score {
  flex-shrink: 0; width: 52px; text-align: center;
  background: #eaf4fb; border-radius: 7px; padding: 7px 4px;
}
.card-score-num { display: block; font-size: 1em; font-weight: 700; color: var(--mid); line-height: 1; }
.card-score-lbl { display: block; font-size: 0.6125em; color: #666; margin-top: 2px; } /* 提升對比度 */
.card-body { flex: 1; min-width: 0; }
.card-head { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.tag-type { background: #eaf4fb; color: var(--mid); padding: 2px 9px; border-radius: 3px; font-size: 0.75em; font-weight: 600; }
.tag-rent { background: #eafaf1; color: #1a7a3e; padding: 2px 9px; border-radius: 3px; font-size: 0.75em; font-weight: 600; } /* 提升對比度 */
.tag-sell { background: #fef9e7; color: #8a6d00; padding: 2px 9px; border-radius: 3px; font-size: 0.75em; font-weight: 600; } /* 提升對比度 */
.card-city { font-size: 0.875em; color: #445; }
.card-meta { display: flex; gap:6px 16px; flex-wrap: wrap; }
.card-meta-item { font-size: 0.875em; color: #334; } /* 提升對比度 */
.card-meta-item span { color: #667; font-size: 0.75em; margin-right: 2px; } /* 提升對比度 */
.card-link {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  background: var(--mid); color: #fff;
  border-radius: 6px; font-size: 1.125em;
  text-decoration: none;
  transition: background .18s;
  align-self: center;
  min-height: 44px; /* 最小觸控目標 */
  min-width: 44px;
}
.card-link:hover { background: #1a4a7a; }

.card-botmsg{
  font-size: 0.9375em;
  color: #666;
}
.link-text{
  color: var(--mid);
}
.link-text:hover,
.link-text:focus{
  color: var(--accent);
}
@media screen and ( max-width: 600px) {
  .card{
    flex-wrap: wrap;
    justify-content:center;
  }
  .card-body{
    width: calc(100% - 66px);
    flex: auto;
  }
}
@media screen and ( max-width: 400px) {
  .card{
    flex-direction: column;
  }
  .card-score{
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 99px;
    padding: 7px 14px;
  }
}
/* Typing indicator */
.typing-dots {
  display: flex; gap: 4px; align-items: center; padding: 4px 0;
}
.typing-dots span {
  width: 7px; height: 7px;
  background: #b0c4dc;
  border-radius: 50%;
  animation: dot-bounce .9s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dot-bounce {
  0%,80%,100% { transform: translateY(0); }
  40%          { transform: translateY(-6px); }
}

/* ── BOTTOM INPUT ZONE ── */
.input-zone {
  background: #fff;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.zoneTop{
  width: 100%;
  padding: 10px 20px 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.input-zone:has(.voice-bar.active) .zoneTop{
  padding-bottom: 10px;
}
/* quick chips */
.quick-chips {
  padding: 0;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chip {
  background: #f0f5fb;
  border: 1px solid #c8d8ec;
  color: var(--mid);
  padding: 5px 12px; border-radius: 99px;
  font-size: 0.9375em; cursor: pointer; white-space: nowrap;
  transition: all .15s;
  display: flex; align-items: center; gap: 4px;
  min-height: 34px;
  font-family: inherit;
}
.chip:hover,.chip:focus { 
  background: var(--mid); color: #fff; 
  border-color: var(--mid);
}

/* input row */
.input-row {
  display: flex; align-items: flex-end; gap: 10px;
  padding: 12px 20px;
}
.text-input {
  flex: 1;
  padding: 6px 18px;
  border: 1.5px solid var(--border);
  border-radius: 26px;
  font-size: 0.9375em;
  font-family: inherit;
  outline: none;
  color: var(--text);
  background: #fafcff;
  transition: border-color .2s, box-shadow .2s;
  resize: none;
  line-height: 1.5;
  overflow-y: auto;
  align-content: center;
  min-height: 44px;
  max-height: 100px;
}
.text-input:focus {
  border-color: var(--mid);
  box-shadow: 0 0 0 3px rgba(45,106,159,.22);
  background: #fff;
}
.text-input::placeholder { color: #999; } /* 提升對比度 */

.mic-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  background: radial-gradient(circle at 35% 35%, #e84040, #b80000);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(184,0,0,.3);
  transition: transform .2s, box-shadow .2s;
  position: relative;
}
.mic-btn[aria-pressed="false"]{
  background: var(--mid);
  box-shadow: 0 4px 16px rgba(45,106,159,.3);
}
.mic-btn:hover,
.mic-btn:focus { 
  transform: scale(1.08); 
  box-shadow: 0 6px 22px rgba(184,0,0,.45);
}
.mic-btn.rec   { animation: rec-pulse 1.2s ease-in-out infinite; }
@keyframes rec-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,0,0,.6); }
  70%  { box-shadow: 0 0 0 14px rgba(184,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,0,0,0); }
}
.mic-ico { font-size: 1.25em; line-height: 1; }

.send-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--mid), #1a4a7a);
  border: none; border-radius: 50%;
  color: #fff; font-size: 1.25em; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(45,106,159,.4);
  transition: all .2s;
  font-family: inherit;
}
.send-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(45,106,159,.55); }
.send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* voice status bar */
.voice-bar {
  display: none;
  align-items: center; justify-content: center; gap: 10px;
  padding: 26px 20px;
  background: #f5d0d0;
  font-size: 0.9375em;
  color: #a00; font-weight: 600;
}
.voice-bar.active { display: flex; }
.v-dot  { width: 8px; height: 8px; background: #c00; border-radius: 50%; animation: blink 1s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.sbars  { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.sbars s {
  display: inline-block; width: 3px;
  background: linear-gradient(180deg, #c00, #9E0000);
  border-radius: 2px;
  animation: sbar .65s ease-in-out infinite alternate;
}
.sbars s:nth-child(1){height:4px;animation-delay:0s}
.sbars s:nth-child(2){height:11px;animation-delay:.1s}
.sbars s:nth-child(3){height:7px;animation-delay:.2s}
.sbars s:nth-child(4){height:14px;animation-delay:.15s}
.sbars s:nth-child(5){height:6px;animation-delay:.05s}
.sbars s:nth-child(6){height:10px;animation-delay:.25s}
@keyframes sbar { from{transform:scaleY(1)} to{transform:scaleY(2.2)} }

/* footer note */
.footer-note {
  background: #fffbee;
  border-top: 1px solid #f5e090;
  padding: 7px 20px;
  font-size: 0.9375em; color: #6b5000; /* 提升對比度 */
  display: flex; align-items: center; gap: 6px;
}

/* ── PRIVACY BANNER ── */
.privacy-banner {
  background: linear-gradient(135deg, #fff8e8 0%, #fff3d6 100%);
  border-bottom: 1px solid #f0d080;
  padding: 9px 24px;
  font-size: 1.125em;
  color: #4a3000; /* 提升對比度 */
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 6px;
  text-align: center;
  line-height: 1.6;
}
.privacy-banner .privacy-icon {
  font-size: 0.9375em;
  flex-shrink: 0;
}
.privacy-link-btn {
  display: inline;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: #b03800; /* 提升對比度 */
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s;
}
.privacy-link-btn:hover { color: #8a2b00; }
@media (max-width: 990px) {
  .privacy-banner{text-align: left;}
  .privacy-banner .privacy-text{
    flex-grow: 1;
  }
}
/* ── PRIVACY MODAL ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,25,50,.65);
  backdrop-filter: blur(3px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  animation: fade-in .2s ease;
}
.modal-overlay.active { display: flex; }
@keyframes fade-in { from{opacity:0} to{opacity:1} }

.modal-box {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  width: 90%;
  max-width: 640px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  animation: slide-up .25s cubic-bezier(.34,1.4,.64,1);
  overflow: hidden;
}
@keyframes slide-up {
  from { opacity:0; transform: translateY(30px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}
.modal-header {
  background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.modal-header-l { display: flex; align-items: center; gap: 10px; }
.modal-header-ico {
  width: 34px; height: 34px;
  background: transparent;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25em;
}
.modal-title { color: #fff; font-size: 1.25em; font-weight: 700; }
.modal-subtitle { color: rgba(180,210,240,.85); font-size: 0.75em; margin-top: 2px; }
.modal-close {
  width: 44px; height: 44px; /* 最小觸控目標 */
  background:none;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 1.25em;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s;
  flex-shrink: 0;
  font-family: inherit;
}
.modal-close:hover { background: rgba(0,0,0,.4); }
.modal-body {
  overflow-y: auto;
  padding: 24px 28px;
  flex: 1;
  font-size: 1em;
  line-height: 1.85;
  color: #2a3a4a;
}
.modal-body::-webkit-scrollbar { width: 5px; }
.modal-body::-webkit-scrollbar-thumb { background: #c8d8ec; border-radius: 3px; }
.modal-body h3 {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--blue);
  margin: 18px 0 6px;
  padding-left: 1em;
  position: relative;
}
.modal-body h3::before{
  content: '';
  display: block;
  width: 4px;
  height: 1em;
  background-color: var(--sky);
  border-radius: 3px;
  position: absolute;
  left: 0;top:0.45em;
}
.modal-body h3:first-child { margin-top: 0; }
.modal-body p { margin-bottom: 10px; color: #334; }
.modal-body ul { padding-left: 20px; margin-bottom: 10px; }
.modal-body ul li { margin-bottom: 5px; }
.modal-body .highlight-box {
  background: #f0f5fb;
  border: 1px solid #c8daf5;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 0.9375em;;
  color: #1e3d60; /* 提升對比度 */
}
.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: #f8fafd;
  gap: 10px;
  flex-wrap: wrap;
}
.modal-date { font-size: 0.75em; color: #556; } /* 提升對比度 */
.modal-ok-btn {
  background: linear-gradient(135deg, var(--mid), #1a4a7a);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 26px;
  font-size: 0.875em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
  box-shadow: 0 3px 10px rgba(45,106,159,.3);
  min-height: 44px; /* 最小觸控目標 */
}
.modal-ok-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(45,106,159,.45); }
/* ── QUICK CHIPS 展開/收合 ── */
.chips-toggle-btn {
  display: none; /* 預設隱藏，JS 依寬度控制 */
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 1em;
  font-family: inherit;
  color: var(--mid);
  cursor: pointer;
  transition: background .15s, color .15s;
  min-height: 34px;
  white-space: nowrap;
  flex-shrink: 0;
}
.chips-toggle-btn:hover,
.chips-toggle-btn:focus {
  background: var(--mid);
  color: #fff;
  border-color: var(--mid);
}
.chips-toggle-btn .toggle-arrow {
  display: inline-block;
  transition: transform .25s;
  font-style: normal;
  line-height: 1;
}
.chips-toggle-btn[aria-expanded="true"] .toggle-arrow {
  transform: rotate(180deg);
}
.toggle-arrow{
  width: 14px;
  height: 6px;
  display: block;
  position: relative;
}
.toggle-arrow::before,
.toggle-arrow::after{
  content: '';
  display: block;
  width: 6px;
  height: 2px;
  background-color: #4a3000;
  position: absolute;
  left: 2px;bottom:2px;
  transform: rotate(45deg);
}
.toggle-arrow::after{
  transform: rotate(-45deg);
  left: auto;
  right: 2px;
}
.chips-toggle-btn .toggle-arrow::before,
.chips-toggle-btn .toggle-arrow::after{
  background-color: var(--mid);
}
.chips-toggle-btn:hover .toggle-arrow::before,
.chips-toggle-btn:focus .toggle-arrow::before,
.chips-toggle-btn:hover .toggle-arrow::after,
.chips-toggle-btn:focus .toggle-arrow::after{
  background-color: #fff;
}
/* quick-chips 收合狀態 */
.quick-chips.chips-collapsed {
  display: none;
}

/* ── PRIVACY BANNER 展開/收合 ── */
.privacy-toggle-btn {
  background: none;
  border: 1px solid rgba(74,48,0,.25);
  border-radius: 20px;
  padding: 3px 12px;
  font-size: 0.875em;
  font-family: inherit;
  color: #6b4400;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
}
.privacy-toggle-btn:hover {
  background: rgba(74,48,0,.1);
  color: #4a3000;
}
.privacy-toggle-btn .toggle-arrow {
  display: inline-block;
  transition: transform .25s;
  font-style: normal;
  line-height: 1;
}
.privacy-toggle-btn[aria-expanded="true"] .toggle-arrow {
  transform: rotate(180deg);
}
@media (max-width: 990px) {
  .privacy-toggle-btn {
    position: absolute;
    top:20px;
    right: 20px;
    z-index: 10;
  }
}
/* privacy-banner 收合時只顯示標題列 */
.privacy-banner.privacy-collapsed{
  display: none;
}
/* ── SCROLLBAR GLOBAL ── */
* { scrollbar-width: thin; scrollbar-color: #c8d8ec transparent; }

/* ── RESPONSIVE ── */
@media (max-width: 990px) {
  .topbar-badge { display: none; }
}
@media (max-width: 700px) {
  .chat-scroll { padding: 16px; }
  .user-bubble { max-width: 85%; }
  .ai-bubble { max-width: 100%; }
}
/* xico */
.sr-only {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0;
}
.xico{
	width: 26px;
	height: 26px;
	display: block;
	position: relative;
	transform: rotate(45deg);
}
.xico::before,
.xico::after{
	content: '';
	display: block;
	width: 26px;
	height: 4px;
	background-color: #fff;
	border-radius: 4px;
	position: absolute;
	left: 50%;top:50%;
	margin-left: -13px;
	margin-top: -2px;
}
.xico::after{
	transform: rotate(90deg);
}
/* sys-ico */
*[class$="-title"]:has(.sys-ico),
.footer-note:has(.sys-ico) p{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.bot-title:has(.sys-ico){
  align-items: flex-start;
}
.sys-ico{
  display:inline-flex;
  vertical-align: middle;
  gap: 4px;
}
.sys-ico::before {
	content:'';
	display:block;
	width:18px;height:18px;
	background-color:#fff;
	mask-repeat:no-repeat;
	mask-position:center;
	mask-size:contain;
}
.mic-icon .sys-ico::before{
	background-color: #fff;
}
.quick-chips .chip .sys-ico::before,
.chips-toggle-btn .sys-ico::before{
  background-color: var(--mid);
}
.quick-chips button:hover .sys-ico::before,
.quick-chips button:focus .sys-ico::before,
.chips-toggle-btn:hover .sys-ico::before,
.chips-toggle-btn:focus .sys-ico::before{
  background-color: #fff;
}
.highlight-box .sys-ico::before{
  background-color: #1e3d60;
  width: 16px;
  height: 16px;
}
.bot-title .sys-ico::before{
  background-color: var(--blue);
  width: 34px;height: 34px;
}
.privacy-icon .sys-ico::before{
  background-color: #4a3000;
  width: 24px;height: 24px;
}
.footer-note .sys-ico::before{
  background-color: #6b5000;
  width: 16px;height: 16px;
}
.modal-header-ico .sys-ico::before{
  width: 34px;height: 34px;
}
.send-btn .sys-ico::before,
.mic-btn .sys-ico::before{
  width: 24px;height: 24px;
}
.card-city .sys-ico::before{
  background-color: #DF0707;
}
.ai-bubble .sys-ico::before{
  background-color: #333;
}

.ico-bot::before { mask-image:url(../images/ai_icon/sytico-bot.svg);}
.ico-bell::before { mask-image:url(../images/ai_icon/sytico-bell.svg);}
.ico-check::before { mask-image:url(../images/ai_icon/sytico-check.svg);}
.ico-core::before { mask-image:url(../images/ai_icon/sytico-core.svg);}
.ico-delete::before { mask-image:url(../images/ai_icon/sytico-delete.svg);}
.ico-deliver::before { mask-image:url(../images/ai_icon/sytico-deliver.svg);}
.ico-dialog::before { mask-image:url(../images/ai_icon/sytico-dialog.svg); }
.ico-factory::before { mask-image:url(../images/ai_icon/sytico-factory.svg);}
.ico-globe::before { mask-image:url(../images/ai_icon/sytico-globe.svg);}
.ico-industrial-zone::before { mask-image:url(../images/ai_icon/sytico-industrial-zone.svg);}
.ico-land::before { mask-image:url(../images/ai_icon/sytico-land.svg);}
.ico-mic::before { mask-image:url(../images/ai_icon/sytico-mic.svg);}
.ico-mic-off::before { mask-image:url(../images/ai_icon/sytico-mic-off.svg);}
.ico-next::before { mask-image:url(../images/ai_icon/sytico-next.svg);}
.ico-organ::before { mask-image:url(../images/ai_icon/sytico-organ.svg);}
.ico-privacy::before { mask-image:url(../images/ai_icon/sytico-privacy.svg);}
.ico-pinning::before { mask-image:url(../images/ai_icon/sytico-pinning.svg);}
.ico-prove::before { mask-image:url(../images/ai_icon/sytico-prove.svg);}
.ico-tel::before { mask-image:url(../images/ai_icon/sytico-tel.svg);}
.ico-voice::before { mask-image:url(../images/ai_icon/sytico-voice.svg);}
.ico-send::before { mask-image:url(../images/ai_icon/sytico-send.svg);}
.ico-point::before { mask-image:url(../images/ai_icon/sytico-point.svg);}
.ico-search::before { mask-image:url(../images/ai_icon/sytico-search.svg);}
.ico-warn::before { mask-image:url(../images/sytico-warn.svg); }