:root{--widget-primary: #7c3aed;--widget-primary-hover: #6d28d9;--widget-bg: #ffffff;--widget-surface: #f5f3ff;--widget-text: #1a1a1a;--widget-text-secondary: #666666;--widget-customer-bubble: #7c3aed;--widget-customer-text: #ffffff;--widget-agent-bubble: #ede9fe;--widget-agent-text: #1a1a1a;--widget-border: #ddd6fe;--widget-shadow: 0 4px 24px rgba(124, 58, 237, .12);--widget-focus-ring: 0 0 0 3px rgba(124, 58, 237, .4);--widget-error: #cc3333}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Noto Sans Arabic,Noto Sans CJK SC,Noto Sans CJK JP,Noto Sans CJK KR,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:1.5;color:var(--widget-text);background:var(--widget-bg);-webkit-font-smoothing:antialiased}.widget-container{display:flex;flex-direction:column;width:380px;height:600px;border-radius:12px;box-shadow:var(--widget-shadow);overflow:hidden;background:var(--widget-bg)}@media(max-width:480px){.widget-container{width:100vw;height:100vh;border-radius:0}}.widget-header{display:flex;align-items:center;gap:8px;padding:12px 16px;background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;flex-shrink:0}.widget-header__title{flex:1;font-size:15px;font-weight:600}.widget-header__close{background:none;border:none;color:#fff;cursor:pointer;padding:4px;border-radius:4px;font-size:18px;line-height:1}.widget-header__close:hover{background:#fff3}.widget-header__close:focus-visible{outline:none;box-shadow:var(--widget-focus-ring)}.conversation-area{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--widget-surface)}.message-bubble{max-width:80%;padding:10px 14px;border-radius:16px;word-wrap:break-word;animation:fadeIn .2s ease-in}.message-bubble--customer{align-self:flex-end;background:var(--widget-customer-bubble);color:var(--widget-customer-text);border-bottom-right-radius:4px}.message-bubble--agent{align-self:flex-start;background:var(--widget-agent-bubble);color:var(--widget-agent-text);border-bottom-left-radius:4px}.message-bubble--system{align-self:center;font-style:italic;font-size:12px;color:var(--widget-text-secondary);background:none;padding:4px 8px}.message-bubble__timestamp{display:block;font-size:11px;margin-top:4px;opacity:.7}.typing-indicator{display:flex;align-items:center;gap:8px;align-self:flex-start;padding:10px 14px}.typing-dots{display:flex;gap:4px}.typing-dots__dot{width:8px;height:8px;border-radius:50%;background:var(--widget-text-secondary);animation:pulse 1.4s infinite ease-in-out}.typing-dots__dot:nth-child(2){animation-delay:.2s}.typing-dots__dot:nth-child(3){animation-delay:.4s}.typing-indicator__label{font-size:12px;color:var(--widget-text-secondary)}.input-area{display:flex;align-items:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--widget-border);background:var(--widget-bg);flex-shrink:0}.input-area__textarea{flex:1;resize:none;border:1px solid var(--widget-border);border-radius:20px;padding:8px 16px;font-family:inherit;font-size:14px;line-height:1.4;color:var(--widget-text);background:var(--widget-surface);max-height:120px;overflow-y:auto}.input-area__textarea:focus{outline:none;border-color:var(--widget-primary);box-shadow:var(--widget-focus-ring)}.input-area__textarea:disabled{opacity:.6;cursor:not-allowed}.input-area__btn{flex-shrink:0;width:36px;height:36px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}.input-area__btn--send{background:var(--widget-primary);color:#fff}.input-area__btn--send:hover:not(:disabled){background:var(--widget-primary-hover)}.input-area__btn--stop{background:var(--widget-error);color:#fff}.input-area__btn:disabled{opacity:.5;cursor:not-allowed}.input-area__btn:focus-visible{outline:none;box-shadow:var(--widget-focus-ring)}.state-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:32px;text-align:center;color:var(--widget-text-secondary)}.state-screen__btn{padding:8px 20px;border:none;border-radius:20px;background:var(--widget-primary);color:#fff;cursor:pointer;font-size:14px}.state-screen__btn:hover{background:var(--widget-primary-hover)}.state-screen__btn:focus-visible{outline:none;box-shadow:var(--widget-focus-ring)}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}