:root{color-scheme:light;font-family:"Microsoft JhengHei UI","Noto Sans TC",sans-serif;color:#173b5d;background:#f4f9fc}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
button,textarea,a{font:inherit}
.chat-shell{display:grid;grid-template-rows:auto minmax(150px,1fr) auto auto auto;position:relative;width:100%;height:100%;background:#fff}
.chat-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px calc(68px + env(safe-area-inset-right)) 16px 18px;color:#fff;background:linear-gradient(135deg,#073b73 0%,#07579d 58%,#0a70b8 100%);box-shadow:inset 0 -1px 0 rgba(255,255,255,.16)}
.chat-header small{display:block;color:#dff7ff;font-size:12px;line-height:1.35}.chat-header h1{margin:2px 0 0;color:#fff;font-size:19px;line-height:1.25}
.state{flex:none;padding:5px 9px;border:1px solid rgba(255,255,255,.58);border-radius:999px;color:#ecf9ff;background:rgba(3,38,76,.68);font-size:11px}.state.is-offline{background:#8f2630}
.messages{overflow-y:auto;padding:16px;background:#f3f8fc}
.message{max-width:92%;margin:0 0 13px;padding:11px 13px;border:1px solid #c9dbe8;border-radius:14px;color:#173b5d;background:#fff;overflow-wrap:anywhere;font-size:14px;line-height:1.58}
.message.user{margin-left:auto;border-color:#07579d;border-bottom-right-radius:5px;color:#fff;background:linear-gradient(135deg,#0a70b8,#07579d)}
.message.ai{margin-right:auto;border-bottom-left-radius:5px}.message.error{color:#7b2632;border-color:#e0aeb5;background:#fff4f5}
.message-body{white-space:pre-wrap}.message-body strong{font-weight:800}
.quick-actions{display:flex;gap:7px;overflow-x:auto;padding:9px 12px;border-top:1px solid #c5dfef;background:#fff}
.quick-actions button{flex:none;min-height:40px;padding:7px 10px;border:1px solid #7eb9dc;border-radius:999px;color:#073b73;background:#eff8fd;cursor:pointer}
.composer{display:grid;grid-template-columns:1fr auto;gap:8px;padding:11px 12px;border-top:1px solid #c5dfef;background:#fff}
.composer textarea{min-height:48px;max-height:116px;resize:none;padding:10px 11px;border:1px solid #7fa9c6;border-radius:10px;color:#173b5d;background:#fff;line-height:1.45}
.composer textarea:focus{outline:2px solid rgba(10,112,184,.28);border-color:#07579d}.composer button{min-width:66px;min-height:48px;border:0;border-radius:10px;color:#fff;background:linear-gradient(135deg,#07579d,#073b73);font-weight:800;cursor:pointer}.composer button:disabled{opacity:.55;cursor:not-allowed}
.composer p{grid-column:1/-1;margin:0;color:#405c73;font-size:11.5px;line-height:1.45}
.service-footer{display:grid;grid-template-columns:1fr;gap:2px;padding:4px 12px calc(6px + env(safe-area-inset-bottom));border-top:1px solid #b8dced;color:#173b5d;background:#f5fbff;line-height:1.5}.contact-links{display:flex;flex-wrap:wrap;gap:0 18px}.contact-link{display:inline-flex;align-items:center;min-height:44px;color:#07579d;font-size:16px;font-weight:700;line-height:1.2;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;touch-action:manipulation}.contact-link:visited{color:#073b73}.contact-link:hover{color:#0a70b8}.service-footer p{margin:0;color:#17364f;font-size:14.5px;font-weight:600;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.quick-actions button:hover,.composer button:hover{filter:brightness(1.06)}.quick-actions button:focus-visible,.composer textarea:focus-visible,.composer button:focus-visible,.contact-link:focus-visible{outline:3px solid #0a70b8;outline-offset:2px}.contact-link:focus-visible{border-radius:6px}
.offline{position:absolute;inset:auto 12px 94px;padding:14px;border:1px solid #e0aeb5;border-radius:13px;color:#7b2632;background:#fff8f8;box-shadow:0 12px 30px rgba(3,54,105,.16);font-size:13px}.offline p{margin:5px 0 10px}.offline .contact-links{display:flex;flex-wrap:wrap;gap:0 16px}.offline .contact-link{color:#07579d}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){.chat-header{padding-top:calc(14px + env(safe-area-inset-top))}.chat-header h1{font-size:18px}.messages{padding:13px}.message{max-width:96%}.service-footer p{font-size:14px}}
@media(max-height:560px){.chat-shell{grid-template-rows:auto minmax(96px,1fr) auto auto auto}.chat-header{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:8px}.quick-actions{padding-block:4px}.composer{padding-block:8px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}