/* ─── 薩摩 AI 客服小愛 widget ───
 * 浮動泡泡 + 對話面板。深綠 + 銅色配色。
 * 與首頁字體系統共用(Fraunces / Noto Sans TC / JetBrains Mono)。
 */

:root{
  --sat-accent: #1a3d2e;
  --sat-accent-2: #2a5a44;
  --sat-paper: #f6f4ee;
  --sat-paper-2: #ecebe3;
  --sat-ink: #14110d;
  --sat-ink-soft: #3d3a33;
  --sat-muted: #7a766b;
  --sat-rule: #d6d2c4;
  --sat-copper: #b8895a;
  --sat-copper-bright: #d4a373;
}

/* ─── 浮動按鈕 ─── */
.sat-fab{
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--sat-accent); color: var(--sat-paper);
  border: 2px solid var(--sat-copper-bright);
  cursor: pointer; padding: 0;
  box-shadow: 0 8px 24px rgba(20,17,13,.25);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.sat-fab:hover{ transform: translateY(-3px); box-shadow: 0 12px 32px rgba(20,17,13,.32); }
.sat-fab[hidden]{ display: none !important; }
.sat-fab .sat-fab-icon{
  width: 26px; height: 26px;
  fill: none; stroke: var(--sat-paper); stroke-width: 1.8;
}
.sat-fab .sat-fab-dot{
  position: absolute; top: 8px; right: 8px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sat-copper-bright);
  box-shadow: 0 0 0 2px var(--sat-accent);
}
.sat-fab .sat-fab-label{
  position: absolute; right: 76px; top: 50%;
  transform: translateY(-50%);
  background: var(--sat-ink); color: var(--sat-paper);
  font-family: "Noto Sans TC", system-ui, sans-serif;
  font-size: 13px; padding: 8px 14px; border-radius: 999px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.sat-fab:hover .sat-fab-label{ opacity: 1; transform: translateY(-50%) translateX(-4px); }
@media (max-width: 560px){
  .sat-fab{ right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .sat-fab .sat-fab-label{ display: none; }
}

/* ─── 對話面板 ─── */
.sat-panel{
  position: fixed; right: 24px; bottom: 24px; z-index: 901;
  width: 400px; max-width: calc(100vw - 32px);
  height: 600px; max-height: calc(100vh - 48px);
  background: var(--sat-paper); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(20,17,13,.32);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(20px) scale(.96); opacity: 0;
  transform-origin: bottom right;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
  pointer-events: none;
  border: 1px solid var(--sat-rule);
}
.sat-panel.open{ transform: none; opacity: 1; pointer-events: auto; }
@media (max-width: 560px){
  .sat-panel{ right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 14px; }
}

/* ─── Header ─── */
.sat-head{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; background: var(--sat-accent); color: var(--sat-paper);
  border-bottom: 1px solid var(--sat-accent-2);
}
.sat-head .avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sat-copper-bright); color: var(--sat-accent);
  display: flex; align-items: center; justify-content: center;
  font-family: "Fraunces", "Noto Serif TC", serif;
  font-weight: 700; font-size: 18px; flex-shrink: 0;
}
.sat-head .meta{ flex: 1; min-width: 0; }
.sat-head .name{
  font-family: "Fraunces", "Noto Serif TC", serif;
  font-weight: 500; font-size: 17px; line-height: 1.1;
}
.sat-head .name .tc{ font-family: "Noto Sans TC", sans-serif; font-weight: 500; }
.sat-head .status{
  font-family: "JetBrains Mono", monospace; font-size: 10.5px;
  letter-spacing: .12em; color: rgba(246,244,238,.7); margin-top: 4px;
}
.sat-head .status::before{
  content:""; display:inline-block; width:6px; height:6px;
  border-radius:50%; background: var(--sat-copper-bright);
  margin-right: 6px; vertical-align: 1px;
}
.sat-head .human{
  padding: 6px 12px; border-radius: 999px;
  background: transparent; color: var(--sat-copper-bright);
  border: 1px solid var(--sat-copper-bright);
  cursor: pointer;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .04em;
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.sat-head .human:hover{ background: var(--sat-copper-bright); color: var(--sat-accent); }

.sat-head .close{
  width: 32px; height: 32px; border-radius: 50%;
  background: transparent; color: var(--sat-paper);
  border: 1px solid rgba(246,244,238,.3);
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s;
}
.sat-head .close:hover{ background: rgba(246,244,238,.12); border-color: var(--sat-paper); }
.sat-head .close::before, .sat-head .close::after{
  content:""; position: absolute; width: 12px; height: 1.5px; background: var(--sat-paper);
}
.sat-head .close::before{ transform: rotate(45deg); }
.sat-head .close::after{ transform: rotate(-45deg); }
.sat-head .close{ position: relative; }

/* ─── Messages 區 ─── */
.sat-messages{
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 14px;
  background: var(--sat-paper);
  scroll-behavior: smooth;
}
.sat-messages::-webkit-scrollbar{ width: 6px; }
.sat-messages::-webkit-scrollbar-thumb{ background: var(--sat-rule); border-radius: 3px; }

.sat-bubble{
  max-width: 86%; padding: 10px 14px; border-radius: 14px;
  font-family: "Noto Sans TC", system-ui, sans-serif;
  font-size: 14.5px; line-height: 1.65; white-space: pre-wrap;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.sat-bubble.user{
  background: var(--sat-accent); color: var(--sat-paper);
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.sat-bubble.ai{
  background: var(--sat-paper-2); color: var(--sat-ink);
  align-self: flex-start; border-bottom-left-radius: 4px;
  border: 1px solid var(--sat-rule);
}
.sat-bubble.ai.unknown,
.sat-bubble.ai.reject{
  background: #fdf6ed; border-color: var(--sat-copper);
}
.sat-bubble.ai.locked,
.sat-bubble.ai.locked_relay{
  background: var(--sat-accent); color: var(--sat-paper);
  border-color: var(--sat-copper-bright);
}

/* 真人回覆:銅色強調框 + 標籤 */
.sat-bubble.ai.human,
.sat-bubble.ai.human_reply{
  background: linear-gradient(180deg, #fef5e6, #fbecd2);
  border: 1px solid var(--sat-copper-bright);
  color: var(--sat-ink);
}
.sat-human-label{
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .12em; color: var(--sat-copper);
  margin: 6px 0 -4px 6px; align-self: flex-start;
}
.sat-human-label::before{
  content: "● "; color: var(--sat-copper-bright);
}

.sat-citations{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}
.sat-citations .cite{
  font-family: "JetBrains Mono", monospace; font-size: 10px;
  letter-spacing: .04em; padding: 3px 8px;
  background: rgba(184,137,90,.12); color: var(--sat-copper);
  border: 1px solid rgba(184,137,90,.3); border-radius: 4px;
}

/* HANDOFF action button */
.sat-action{
  margin-top: 10px; align-self: flex-start; max-width: 86%;
}
.sat-action button{
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .04em;
  padding: 10px 18px; background: var(--sat-accent); color: var(--sat-paper);
  border: 1px solid var(--sat-accent); border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, transform .2s;
}
.sat-action button:hover{ background: var(--sat-copper); border-color: var(--sat-copper); transform: translateY(-1px); }

/* 思考中 dots */
.sat-typing{
  align-self: flex-start;
  background: var(--sat-paper-2); border: 1px solid var(--sat-rule);
  border-radius: 14px; border-bottom-left-radius: 4px;
  padding: 12px 16px; display: flex; gap: 4px;
}
.sat-typing span{
  width: 6px; height: 6px; background: var(--sat-muted); border-radius: 50%;
  animation: sat-bounce 1.2s infinite;
}
.sat-typing span:nth-child(2){ animation-delay: .15s; }
.sat-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes sat-bounce {
  0%, 60%, 100%{ opacity: .3; transform: translateY(0); }
  30%{ opacity: 1; transform: translateY(-3px); }
}

/* 建議問題 chips */
.sat-suggest{
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px; align-self: stretch;
}
.sat-suggest button{
  font-family: "Noto Sans TC", system-ui, sans-serif; font-size: 12.5px;
  padding: 7px 12px; background: var(--sat-paper); color: var(--sat-ink-soft);
  border: 1px solid var(--sat-rule); border-radius: 999px; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.sat-suggest button:hover{ border-color: var(--sat-accent); color: var(--sat-accent); background: var(--sat-paper-2); }

/* ─── 軟版 gate 表單 ─── */
.sat-gate{
  background: var(--sat-paper-2); border: 1px solid var(--sat-rule);
  border-radius: 12px; padding: 14px; margin-top: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.sat-gate .row{ display: flex; gap: 8px; }
.sat-gate input[type="text"], .sat-gate input[type="email"], .sat-gate input[type="tel"]{
  flex: 1; padding: 10px 12px;
  border: 1px solid var(--sat-rule); border-radius: 8px;
  background: var(--sat-paper); font-family: "Noto Sans TC", sans-serif; font-size: 14px;
  color: var(--sat-ink); outline: none; transition: border-color .2s;
}
.sat-gate input:focus{ border-color: var(--sat-accent); }
.sat-gate .toggle{
  display: flex; gap: 4px; padding: 2px;
  background: var(--sat-paper); border: 1px solid var(--sat-rule); border-radius: 999px;
}
.sat-gate .toggle button{
  flex: 1; padding: 7px 14px; border: 0; background: transparent;
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .05em;
  color: var(--sat-muted); border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s;
}
.sat-gate .toggle button.active{ background: var(--sat-accent); color: var(--sat-paper); }
.sat-gate .gate-submit{
  align-self: flex-end; padding: 10px 22px;
  background: var(--sat-accent); color: var(--sat-paper);
  border: 0; border-radius: 999px;
  font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: .04em;
  cursor: pointer; transition: background .2s, transform .2s;
}
.sat-gate .gate-submit:hover{ background: var(--sat-copper); transform: translateY(-1px); }
.sat-gate .gate-submit:disabled{ opacity: .5; cursor: not-allowed; transform: none; }
.sat-gate .gate-error{
  font-size: 12px; color: var(--sat-copper); margin: 0;
}

/* ─── Input bar ─── */
.sat-input{
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 14px; background: var(--sat-paper-2);
  border-top: 1px solid var(--sat-rule);
}
.sat-input textarea{
  flex: 1; resize: none; max-height: 120px; min-height: 40px;
  padding: 10px 12px; border: 1px solid var(--sat-rule); border-radius: 12px;
  background: var(--sat-paper);
  font-family: "Noto Sans TC", system-ui, sans-serif; font-size: 14.5px; line-height: 1.5;
  color: var(--sat-ink); outline: none;
  transition: border-color .2s;
}
.sat-input textarea:focus{ border-color: var(--sat-accent); }
.sat-input textarea:disabled{ background: var(--sat-paper-2); cursor: not-allowed; }
.sat-input .send{
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--sat-accent); color: var(--sat-paper); border: 0;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s;
}
.sat-input .send:hover:not(:disabled){ background: var(--sat-copper); transform: translateY(-1px); }
.sat-input .send:disabled{ opacity: .4; cursor: not-allowed; transform: none; }
.sat-input .send svg{ width: 18px; height: 18px; fill: currentColor; }

.sat-footer{
  text-align: center; padding: 6px 12px 8px;
  background: var(--sat-paper-2);
  font-family: "JetBrains Mono", monospace; font-size: 9.5px;
  letter-spacing: .06em; color: var(--sat-muted);
  line-height: 1.55;
}
.sat-footer .sat-footer-row{ display: block; }
.sat-footer .sat-footer-sub{ opacity: .7; margin-top: 2px; }
.sat-footer a{ color: var(--sat-copper); text-decoration: none; }
.sat-footer a:hover{ color: var(--sat-accent); }