/* ============================================================
   Alisa 浮動 AI 客服 —— 樣式
   尺寸與位置對齊拓見官網（accusee.net）widget：
   FAB 160×160 / 初始右上（right:20 top:100）/ 面板 360×520
   ============================================================ */
.alisa-wrap{position:fixed;inset:0;z-index:9990;pointer-events:none;font-family:inherit}
.alisa-wrap *{box-sizing:border-box}

/* ---------- FAB（可拖曳） ---------- */
.alisa-fab{position:fixed;width:160px;height:160px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;pointer-events:auto;z-index:9992;
  filter:drop-shadow(0 10px 26px rgba(230,0,18,.24));transition:filter .2s,transform .16s}
.alisa-fab img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.alisa-fab:hover{filter:drop-shadow(0 14px 32px rgba(230,0,18,.34));transform:translateY(-2px)}
.alisa-fab:active,.alisa-fab.is-dragging{cursor:grabbing;transform:scale(.97);transition:none}
.alisa-fab-badge{position:absolute;right:6px;bottom:14px;background:#E60012;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.6px;border-radius:999px;padding:2px 7px;box-shadow:0 2px 8px rgba(230,0,18,.45);pointer-events:none}

/* ---------- 歡迎氣泡（JS 定位到 FAB 左側） ---------- */
.alisa-hint{position:fixed;background:#fff;border:1px solid #E6E8EC;border-radius:14px 14px 4px 14px;box-shadow:0 10px 34px rgba(23,24,28,.14);
  padding:11px 34px 11px 15px;max-width:230px;font-size:13px;line-height:1.45;color:#17181C;pointer-events:auto;cursor:pointer;
  opacity:0;transform:translateY(8px);transition:.28s;z-index:9991}
.alisa-hint.show{opacity:1;transform:none}
.alisa-hint b{display:block;font-size:13.5px}
.alisa-hint span{color:#6B7078;font-size:12px}
.alisa-hint i{position:absolute;top:8px;right:10px;font-style:normal;background:#E60012;color:#fff;width:16px;height:16px;border-radius:50%;font-size:10.5px;display:flex;align-items:center;justify-content:center;font-weight:700}

/* ---------- 對話面板（JS 定位到 FAB 上方，可拖曳標題列移動） ---------- */
.alisa-panel{position:fixed;width:360px;height:520px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);
  background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(23,24,28,.2);display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #E6E8EC;pointer-events:auto;z-index:9993;animation:alisa-pop .2s ease-out}
@keyframes alisa-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.alisa-panel[hidden]{display:none}

.alisa-head{display:flex;align-items:center;gap:10px;padding:12px 13px;background:linear-gradient(135deg,#B3000E,#E60012);color:#fff;flex:none;cursor:grab;touch-action:none;user-select:none}
.alisa-head:active{cursor:grabbing}
.alisa-ava{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.8);flex:none;pointer-events:none}
.alisa-head-t{flex:1;min-width:0;pointer-events:none}
.alisa-head-t b{display:block;font-size:15px;letter-spacing:.2px}
.alisa-head-t span{font-size:11.5px;opacity:.92;display:flex;align-items:center;gap:5px}
.alisa-dot{width:7px;height:7px;border-radius:50%;background:#5DFF8A;display:inline-block;box-shadow:0 0 6px #5DFF8A}
.alisa-ico{background:rgba(255,255,255,.16);border:0;color:#fff;width:27px;height:27px;border-radius:8px;font-size:16px;cursor:pointer;line-height:1;flex:none}
.alisa-ico:hover{background:rgba(255,255,255,.3)}

/* ---------- 訊息區 ---------- */
.alisa-msgs{flex:1;overflow-y:auto;padding:15px 12px 8px;background:#F7F8FA;display:flex;flex-direction:column;gap:10px}
.alisa-m{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.alisa-m--me{justify-content:flex-end}
.alisa-m-ava{width:26px;height:26px;border-radius:50%;flex:none;align-self:flex-end}
.alisa-bubble{max-width:78%;padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.65;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 3px rgba(23,24,28,.06)}
.alisa-m--ai .alisa-bubble{background:#fff;color:#17181C;border-bottom-left-radius:5px}
.alisa-m--me .alisa-bubble{background:#E60012;color:#fff;border-bottom-right-radius:5px}
.alisa-bubble a{color:#E60012;text-decoration:underline;text-underline-offset:2px}
.alisa-in{animation:alisa-msg .24s ease-out}
@keyframes alisa-msg{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* 輸入中指示 */
.alisa-typing .alisa-bubble{display:flex;align-items:center;gap:4px;padding:12px 14px}
.alisa-typing span{width:6px;height:6px;border-radius:50%;background:#C6CAD0;animation:alisa-b 1.2s infinite}
.alisa-typing span:nth-child(2){animation-delay:.18s}
.alisa-typing span:nth-child(3){animation-delay:.36s}
.alisa-typing em{font-style:normal;font-size:11px;color:#9AA0A8;margin-left:5px}
@keyframes alisa-b{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}

/* ---------- 快捷 chips ---------- */
.alisa-chips{display:flex;gap:7px;padding:9px 12px;background:#fff;border-top:1px solid #F0F1F4;flex-wrap:wrap;flex:none}
.alisa-chips button{border:1px solid #E6E8EC;background:#fff;color:#3E4148;font-size:12px;font-weight:600;border-radius:999px;padding:5px 12px;cursor:pointer;transition:.15s}
.alisa-chips button:hover{border-color:#E60012;color:#E60012;background:#FFF1F1}

/* ---------- 輸入列 ---------- */
.alisa-input{display:flex;gap:8px;padding:10px 12px;background:#fff;border-top:1px solid #F0F1F4;flex:none}
.alisa-input input{flex:1;border:1px solid #E6E8EC;border-radius:11px;padding:10px 13px;font:inherit;font-size:13.5px;outline:none;min-width:0}
.alisa-input input:focus{border-color:#E60012;box-shadow:0 0 0 3px rgba(230,0,18,.08)}
.alisa-input button{border:0;background:#E60012;color:#fff;width:41px;border-radius:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none}
.alisa-input button:hover{background:#B3000E}

/* ---------- 手機：縮小 FAB，面板近全寬 ---------- */
@media (max-width:640px){
  .alisa-fab{width:118px;height:118px}
  .alisa-fab-badge{right:2px;bottom:10px}
  .alisa-panel{width:calc(100vw - 16px);height:min(74vh,520px)}
  .alisa-hint{max-width:170px}
}