:root{color:#333;background:#f7f8fa;font-family:Open Sans,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--ink: #333;--body-text: #54595f;--muted: #707070;--line: #e4e7eb;--purple: #bf47ff;--purple-hover: #a92ceb;--purple-deep: #8a25c7;--purple-soft: #f7ebff;--navy: #1d2c3f;--blue: #1e56a0;--blue-light: #93b7f4;--page: #f7f8fa;--white: #fff}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{min-height:100dvh}button,textarea{font:inherit}button{-webkit-tap-highlight-color:transparent}.support-page{display:grid;grid-template-columns:minmax(310px,.8fr) minmax(500px,1.2fr);min-height:100dvh}.intro-panel{position:relative;display:flex;min-height:100dvh;flex-direction:column;overflow:hidden;padding:clamp(30px,5vw,72px);color:#f4f6fa;background:radial-gradient(circle at 12% 86%,rgb(191 71 255 / 30%),transparent 34%),radial-gradient(circle at 92% 8%,rgb(30 86 160 / 42%),transparent 30%),var(--navy)}.intro-panel:after{position:absolute;right:-150px;bottom:-170px;width:420px;height:420px;border:1px solid rgb(191 71 255 / 22%);border-radius:50%;box-shadow:0 0 0 54px #bf47ff0f,0 0 0 108px #bf47ff09;content:"";pointer-events:none}.brand{z-index:1;display:inline-flex;align-items:center;align-self:flex-start;gap:11px;color:inherit;font:700 20px/1 Montserrat,sans-serif;letter-spacing:-.01em;text-decoration:none}.brand-mark{display:grid;width:36px;height:36px;place-items:center;border:0;border-radius:11px;color:var(--white);background:var(--purple)}.brand-mark svg{width:25px;fill:currentcolor}.intro-copy{z-index:1;max-width:500px;margin:auto 0 46px}.eyebrow{display:inline-block;margin-bottom:18px;padding:7px 12px;border:1px solid rgb(191 71 255 / 40%);border-radius:8px;color:#e8c9ff;background:#bf47ff29;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.intro-copy h1{max-width:430px;margin:0 0 22px;font:700 clamp(40px,4.6vw,62px) / 1.1 "Montserrat",sans-serif;letter-spacing:-.03em}.intro-copy p{max-width:460px;margin:0;color:#c3ccd9;font-size:clamp(16px,1.5vw,19px);line-height:1.7}.availability-card{z-index:1;display:flex;max-width:340px;align-items:center;gap:13px;padding:14px;border:1px solid rgb(255 255 255 / 12%);border-radius:11px;background:#ffffff12;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.availability-card div{display:grid;gap:4px}.availability-card strong{font:700 14px/1.2 Montserrat,sans-serif}.availability-card div>span{display:flex;align-items:center;gap:7px;color:#b3bfcf;font-size:12px}.intro-footer{z-index:1;margin:28px 0 0;color:#8593a6;font-size:12px}.chat-panel{display:grid;min-width:0;min-height:100dvh;grid-template-rows:auto minmax(0,1fr) auto auto;background:var(--white)}.chat-header{display:flex;min-height:92px;align-items:center;justify-content:space-between;padding:18px clamp(24px,4vw,54px);border-bottom:1px solid var(--line)}.agent-details{display:flex;align-items:center;gap:13px}.avatar{display:grid;width:46px;height:46px;flex:0 0 auto;place-items:center;border:0;border-radius:11px;color:var(--purple-deep);background:var(--purple-soft);font:700 17px/1 Montserrat,sans-serif}.avatar-small{width:40px;height:40px;border-radius:10px;color:var(--white);background:var(--purple);font-size:15px}.agent-details h2{margin:0 0 5px;font:700 15px/1 Montserrat,sans-serif}.agent-details p{display:flex;align-items:center;gap:7px;margin:0;color:var(--muted);font-size:12px}.status-dot{display:inline-block;width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#2fae62;box-shadow:0 0 0 3px #2fae6224}.status-dot.connecting{background:var(--purple);animation:pulse 1.25s ease-in-out infinite;box-shadow:0 0 0 3px #bf47ff29}.status-dot.disconnected{background:#a6adb6;box-shadow:none}.icon-button{display:grid;width:40px;height:40px;padding:0;place-items:center;border:1px solid var(--line);border-radius:11px;color:var(--body-text);background:var(--white);cursor:pointer;transition:.16s ease}.icon-button:hover{border-color:#bf47ff73;color:var(--purple-deep);background:var(--purple-soft)}.icon-button svg{width:18px;fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.messages{overflow-y:auto;padding:36px clamp(24px,6vw,88px);scroll-behavior:smooth;scrollbar-color:#ccd2da transparent;scrollbar-width:thin}.welcome-state{display:flex;min-height:100%;max-width:440px;align-items:center;justify-content:center;flex-direction:column;margin:0 auto;text-align:center}.welcome-icon{display:grid;width:58px;height:58px;margin-bottom:19px;place-items:center;border-radius:15px;color:var(--purple-deep);background:var(--purple-soft)}.welcome-icon svg{width:28px;fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.welcome-state h3{margin:0 0 9px;color:var(--ink);font:700 21px/1.3 Montserrat,sans-serif;letter-spacing:-.01em}.welcome-state p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}.message-row{display:flex;align-items:flex-end;gap:10px;margin:0 auto 22px;animation:message-in .22s ease-out both}.message-row.agent{max-width:760px}.message-row.user{max-width:760px;justify-content:flex-end}.message-avatar{display:grid;width:30px;height:30px;flex:0 0 auto;place-items:center;border-radius:9px;color:var(--purple-deep);background:var(--purple-soft);font:700 11px/1 Montserrat,sans-serif}.message{max-width:min(75%,600px);padding:13px 16px;border-radius:14px;font-size:14px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.message-row.agent .message{border:1px solid #e6e9ee;border-bottom-left-radius:5px;color:#2c3542;background:#f5f7fa}.message-row.user .message{border-bottom-right-radius:5px;color:var(--white);background:var(--purple-deep)}.typing-dots{display:flex;align-items:center;gap:4px;min-width:54px;min-height:45px}.typing-dots i{width:5px;height:5px;border-radius:50%;background:var(--purple);animation:bounce 1.2s infinite ease-in-out}.typing-dots i:nth-child(2){animation-delay:.12s}.typing-dots i:nth-child(3){animation-delay:.24s}.error-banner{align-items:center;gap:9px;margin:0 clamp(24px,6vw,88px) 12px;padding:10px 12px;border:1px solid #f2d2d2;border-radius:8px;color:#a32c2c;background:#fdf3f3;font-size:12px}.error-banner:not([hidden]){display:flex}.error-banner svg{width:17px;flex:0 0 auto;fill:none;stroke:currentcolor;stroke-linecap:round;stroke-width:1.8}.error-banner span{flex:1}.error-banner button{padding:4px 7px;border:0;color:inherit;background:transparent;font-weight:700;cursor:pointer}.composer{padding:18px clamp(24px,6vw,88px) 24px;border-top:1px solid var(--line);background:var(--white)}.composer-field{display:flex;min-height:54px;align-items:flex-end;gap:10px;padding:7px 7px 7px 17px;border:1px solid #d7dce3;border-radius:14px;background:#fbfcfd;transition:border-color .16s ease,box-shadow .16s ease}.composer-field:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px #bf47ff24}.composer textarea{width:100%;max-height:130px;min-height:39px;resize:none;border:0;outline:0;color:var(--ink);background:transparent;line-height:1.5;padding:9px 0 6px}.composer textarea::placeholder{color:#98a0ab}.send-button{display:grid;width:40px;height:40px;flex:0 0 auto;padding:0;place-items:center;border:0;border-radius:11px;color:var(--white);background:var(--purple);cursor:pointer;transition:.16s ease}.send-button:hover:not(:disabled){background:var(--purple-hover);transform:translateY(-1px)}.send-button:disabled{color:#aeb5be;background:#e8eaee;cursor:not-allowed}.send-button svg{width:19px;fill:none;stroke:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.composer-note{margin:10px 0 0;color:#98a0ab;font-size:10px;text-align:center}@keyframes message-in{0%{opacity:0;transform:translateY(7px)}}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-4px)}}@keyframes pulse{50%{opacity:.55}}@media(max-width:820px){.support-page{grid-template-columns:1fr}.intro-panel{min-height:auto;padding:22px 24px}.intro-copy,.availability-card,.intro-footer{display:none}.intro-panel:after{display:none}.chat-panel{min-height:calc(100dvh - 80px)}.chat-header{min-height:76px}.messages{padding-top:26px}}@media(max-width:520px){.intro-panel{padding:18px 20px}.chat-header{padding:14px 18px}.messages{padding:24px 16px}.composer{padding:13px 14px 17px}.error-banner{margin-inline:14px}.message{max-width:85%}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}