:root { color-scheme: light; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",sans-serif; --teal:#0f766e; --teal2:#0d9488; --ink:#16302d; --muted:#64748b; --bg:#eef7f5; }
* { box-sizing:border-box; }
html,body,#app { margin:0; min-height:100%; height:100%; }
body { background:linear-gradient(145deg,#dff5f1,#f8fafc 55%,#e0f2fe); color:var(--ink); }
button,input,textarea { font:inherit; }
.hidden { display:none !important; }
.center-card { width:min(92vw,460px); margin:8vh auto; padding:28px; border-radius:24px; background:rgba(255,255,255,.92); box-shadow:0 20px 60px rgba(15,118,110,.15); }
.brand { display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.brand img { width:56px; height:56px; }
h1,p { margin:0; }.brand h1 { font-size:24px; }.brand p,.hint { color:var(--muted); margin-top:5px; }
label { display:block; font-weight:650; margin:14px 0; }
input,textarea { width:100%; border:1px solid #cbd5e1; border-radius:13px; padding:12px 14px; background:white; color:var(--ink); outline:none; }
input:focus,textarea:focus { border-color:var(--teal2); box-shadow:0 0 0 3px rgba(13,148,136,.13); }
button { border:0; border-radius:13px; padding:12px 16px; background:var(--teal); color:white; font-weight:700; cursor:pointer; }
form>button { width:100%; margin-top:8px; }
.secondary { width:100%; margin-top:10px; background:#e6fffb; color:var(--teal); border:1px solid #99f6e4; }
.user-box { padding:12px 14px; margin:12px 0; background:#f0fdfa; border:1px solid #ccfbf1; border-radius:16px; }
.user-box h3 { margin:0; }.user-box label { margin:9px 0; font-size:14px; }
.hint { font-size:13px; line-height:1.5; }.error { color:#b91c1c; min-height:1.3em; margin-top:10px; }
.spinner { width:34px; height:34px; border:4px solid #ccfbf1; border-top-color:var(--teal); border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 14px; } @keyframes spin{to{transform:rotate(360deg)}}
.chat { height:100dvh; max-width:900px; margin:0 auto; background:#f8fafc; display:grid; grid-template-rows:auto 1fr auto; box-shadow:0 0 50px rgba(15,23,42,.1); position:relative; }
header { padding:calc(12px + env(safe-area-inset-top)) 18px 12px; background:rgba(255,255,255,.96); border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; position:relative; }
header h1 { font-size:19px; } header p { color:var(--muted); font-size:12px; margin-top:2px; }
.icon-button { width:42px; height:42px; padding:0; background:#e6fffb; color:var(--teal); }
.menu { position:absolute; right:14px; top:70px; z-index:10; background:white; border:1px solid #e2e8f0; border-radius:15px; padding:7px; box-shadow:0 16px 40px rgba(15,23,42,.18); min-width:190px; }
.menu button { width:100%; text-align:left; background:transparent; color:var(--ink); padding:10px 12px; }.menu button:hover { background:#f1f5f9; }.menu .danger { color:#b91c1c; }
.messages { overflow-y:auto; padding:18px 14px 26px; background-image:radial-gradient(#99f6e4 1px,transparent 1px); background-size:26px 26px; }
.message { display:flex; flex-direction:column; align-items:flex-start; margin:10px 0; }.message.mine { align-items:flex-end; }
.meta { font-size:11px; color:var(--muted); margin:0 8px 4px; }
.bubble { max-width:min(78%,620px); padding:10px 13px; background:white; border-radius:6px 18px 18px 18px; box-shadow:0 2px 10px rgba(15,23,42,.08); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.mine .bubble { background:#ccfbf1; border-radius:18px 6px 18px 18px; }
.bubble img { display:block; max-width:100%; max-height:55vh; border-radius:12px; cursor:pointer; }
.composer { display:grid; grid-template-columns:44px 1fr auto; gap:8px; align-items:end; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:white; border-top:1px solid #e2e8f0; }
.composer textarea { resize:none; max-height:120px; min-height:44px; }.composer button { width:auto; margin:0; height:44px; }
.image-button { display:grid; place-items:center; width:44px; height:44px; margin:0; border-radius:50%; background:#e6fffb; color:var(--teal); font-size:28px; cursor:pointer; }
.toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#0f172a; color:white; padding:10px 16px; border-radius:999px; z-index:30; box-shadow:0 8px 30px rgba(0,0,0,.25); }
@media(max-width:600px){.center-card{margin:3vh auto;padding:22px}.bubble{max-width:85%}.chat{max-width:none}.messages{padding-left:10px;padding-right:10px}}