*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:#fff;color:#262626;-webkit-font-smoothing:antialiased;height:100dvh;overflow:hidden}#root{height:100dvh;display:flex;flex-direction:column}.chat-container{display:flex;flex-direction:column;height:100dvh;max-width:600px;margin:0 auto;width:100%;background:#fff}.chat-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #efefef;flex-shrink:0;z-index:10;background:#fff}.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}.header-info{flex:1}.header-name{font-size:16px;font-weight:600;color:#262626;line-height:1.2}.header-status{font-size:12px;color:#8e8e8e;line-height:1.3}.header-dot{width:8px;height:8px;border-radius:50%;background:#00c853;flex-shrink:0}.clear-btn{background:none;border:1px solid #dbdbdb;border-radius:14px;padding:4px 12px;font-size:13px;color:#8e8e8e;cursor:pointer;flex-shrink:0}.messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:2px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff}.message-group{display:flex;gap:8px;margin-bottom:8px;align-items:flex-end}.message-group.user{flex-direction:row-reverse}.message-group.assistant{flex-direction:row}.group-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}.message-group.user .group-avatar{display:none}.bubbles{display:flex;flex-direction:column;gap:2px;max-width:70%}.bubble{padding:10px 14px;font-size:15px;line-height:1.4;word-wrap:break-word;animation:fadeIn .15s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}.message-group.user .bubble{background:linear-gradient(135deg,#0062e6,#33aeff);color:#fff;border-radius:22px}.message-group.user .bubbles .bubble:not(:only-child):first-child{border-radius:22px 22px 6px}.message-group.user .bubbles .bubble:not(:only-child):last-child{border-radius:22px 6px 22px 22px}.message-group.user .bubbles .bubble:not(:first-child):not(:last-child){border-radius:22px 6px 6px 22px}.message-group.assistant .bubble{background:#efefef;color:#262626;border-radius:22px}.message-group.assistant .bubbles .bubble:not(:only-child):first-child{border-radius:22px 22px 22px 6px}.message-group.assistant .bubbles .bubble:not(:only-child):last-child{border-radius:6px 22px 22px}.message-group.assistant .bubbles .bubble:not(:first-child):not(:last-child){border-radius:6px 22px 22px 6px}.typing-group{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px}.typing-indicator{display:flex;align-items:center;gap:5px;padding:14px 18px;background:#efefef;border-radius:22px}.typing-dot{width:7px;height:7px;border-radius:50%;background:#8e8e8e;animation:typingBounce 1.4s ease-in-out infinite}.typing-dot:nth-child(2){animation-delay:.2s}.typing-dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-3px);opacity:1}}.input-area{display:flex;align-items:flex-end;gap:12px;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:1px solid #efefef;flex-shrink:0;background:#fff}.input-wrapper{flex:1;display:flex;align-items:flex-end;background:#fafafa;border-radius:22px;border:1px solid #dbdbdb;padding:0;transition:border-color .2s}.input-wrapper:focus-within{border-color:#33aeff}.input-wrapper textarea{flex:1;border:none;background:none;font-family:inherit;font-size:15px;line-height:1.4;padding:10px 16px;resize:none;outline:none;max-height:120px;color:#262626}.input-wrapper textarea::placeholder{color:#8e8e8e}.send-btn{background:none;border:none;color:#0095f6;font-size:15px;font-weight:600;cursor:pointer;padding:10px 4px;flex-shrink:0;transition:opacity .15s}.send-btn:disabled{color:#c0dffd;cursor:default}.send-btn:not(:disabled):active{opacity:.6}.welcome{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px;text-align:center}.welcome-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover}.welcome h2{font-size:20px;font-weight:600;color:#262626}.welcome p{font-size:14px;color:#8e8e8e;max-width:280px;line-height:1.5}@media(max-width:480px){.bubbles{max-width:80%}.bubble{font-size:15px}}