*{box-sizing:border-box}body{margin:0;background:#f3f4f6}.chat-scroll{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:14px;background:#f8fafc}.bubble-row{display:flex;flex-direction:column;max-width:72%}.bubble-row.from-player{align-self:flex-start;align-items:flex-start}.bubble-row.from-agent{align-self:flex-end;align-items:flex-end}.bubble{padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.6;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px 2px #0f172a0f}.from-player .bubble{background:#fff;border:1px solid #e5e7eb;border-top-left-radius:4px;color:#111827}.from-agent .bubble{background:var(--portal-theme, #4f46e5);color:#fff;border-top-right-radius:4px}.bubble-meta{font-size:11px;color:#94a3b8;margin-top:4px;padding:0 4px}.attachment-thumb{max-width:220px;max-height:160px;border-radius:10px;border:1px solid #e5e7eb;cursor:zoom-in;display:block;background:#fff}.from-agent .attachment-thumb{border-color:#6366f1}.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(1000px 500px at 20% 0%,rgba(99,102,241,.22),transparent 60%),radial-gradient(900px 500px at 90% 100%,rgba(56,189,248,.18),transparent 55%),#0f172a}.portal-shell{max-width:640px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#fff;box-shadow:0 0 40px #0f172a14}.portal-brand{padding:22px 20px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--portal-theme, #4f46e5) 14%,#ffffff),color-mix(in srgb,var(--portal-theme, #4f46e5) 4%,#ffffff));border-bottom:1px solid #eef0f4}.portal-brand-name{font-size:19px;font-weight:700;color:#111827;letter-spacing:.2px}.portal-brand-sub{margin-top:5px;font-size:12.5px;color:#6b7280;display:flex;align-items:center;gap:6px}.online-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px #22c55e2e;animation:online-pulse 2.4s ease-in-out infinite}@keyframes online-pulse{0%,to{box-shadow:0 0 0 3px #22c55e2e}50%{box-shadow:0 0 0 5px #22c55e14}}.portal-header{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #e5e7eb;background:#fff;position:sticky;top:0;z-index:10}.portal-title{flex:1;font-size:16px;font-weight:600;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-body{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f8fafc}.portal-form{background:#fff}.portal-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e5e7eb;background:#fff}.portal-card{display:block;width:100%;text-align:left;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;cursor:pointer;font:inherit}.portal-card:active{background:#f3f4f6}.portal-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.portal-card-subject{font-weight:600;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.portal-card-meta{margin-top:6px;font-size:12px;color:#94a3b8}.portal-composer{padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #e5e7eb;background:#fff}.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#f59e0b;margin-right:8px;vertical-align:middle}