*{margin:0;padding:0;box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Display,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.4;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}html{height:100%;overflow:hidden}body{margin:0;padding:0;min-width:320px;height:100%;background-color:#fff;overflow:hidden;position:fixed;width:100%}#root{width:100%;height:100%;overflow:hidden}body{overscroll-behavior:none}@supports (padding: max(0px)){body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}}.header{display:flex;align-items:center;justify-content:center;padding:12px 16px;background-color:#f6f6f6;border-bottom:1px solid #e0e0e0;position:relative;flex-shrink:0}@media(min-width:769px){.header{border-radius:12px 12px 0 0;padding:16px}}.header-back{position:absolute;left:8px;display:flex;align-items:center;gap:4px;color:#007aff;font-size:17px;background:none;border:none;cursor:pointer;padding:8px}@media(min-width:769px){.header-back{display:none}}.header-back-arrow{font-size:24px;font-weight:300}.header-content{display:flex;flex-direction:column;align-items:center;gap:4px}.header-avatar{width:60px;height:60px;border-radius:50%;object-fit:cover}@media(max-width:768px){.header-avatar{width:50px;height:50px}}.header-name{font-size:13px;font-weight:500;color:#000}@media(min-width:769px){.header-name{font-size:14px}}.header-status{font-size:11px;color:#8e8e93}.message-row{display:flex;padding:1px 16px}.message-row.sent{justify-content:flex-end}.message-row.received{justify-content:flex-start}.message-bubble{max-width:70%;padding:8px 12px;border-radius:18px;font-size:16px;line-height:1.35;word-wrap:break-word;position:relative}@media(min-width:769px){.message-bubble{max-width:75%;font-size:15px}}@media(max-width:768px){.message-bubble{max-width:80%}}.message-bubble.sent{background-color:#007aff;color:#fff;border-bottom-right-radius:4px}.message-bubble.received{background-color:#e9e9eb;color:#000;border-bottom-left-radius:4px}.message-bubble.sent.first{border-top-right-radius:18px}.message-bubble.sent.last{border-bottom-right-radius:18px}.message-bubble.received.first{border-top-left-radius:18px}.message-bubble.received.last{border-bottom-left-radius:18px}.message-text{margin:0}.message-image{max-width:100%;max-height:300px;border-radius:12px;display:block;object-fit:cover}.message-reaction{position:absolute;bottom:-8px;font-size:16px;background-color:#fff;border-radius:10px;padding:2px 4px;box-shadow:0 1px 3px #0003;line-height:1}.message-reaction.sent{left:-8px}.message-reaction.received{right:-8px}.message-input-container{display:flex;align-items:center;gap:8px;padding:8px 12px;background-color:#f6f6f6;border-top:1px solid #e0e0e0;flex-shrink:0}@media(min-width:769px){.message-input-container{border-radius:0 0 12px 12px;padding:12px 16px}}@media(max-width:768px){.message-input-container{padding-bottom:max(8px,env(safe-area-inset-bottom));transition:padding-bottom .1s ease-out}}.message-input-wrapper{flex:1;display:flex;align-items:center;background-color:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:0 12px;min-height:36px;position:relative;transition:border-color .2s}.message-input-wrapper.has-pending{border-color:#007aff}.pending-indicator{width:8px;height:8px;background-color:#007aff;border-radius:50%;margin-left:8px;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.message-input{flex:1;border:none;outline:none;font-family:inherit;background:transparent;padding:8px 0;font-size:16px}.message-input::placeholder{color:#8e8e93}.send-button{width:32px;height:32px;border-radius:50%;border:none;background-color:#007aff;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .2s;flex-shrink:0;touch-action:manipulation}.send-button:disabled{background-color:#c7c7cc;cursor:not-allowed}.send-button:not(:disabled):hover{opacity:.85}.send-button-arrow{transform:rotate(-90deg);font-weight:700;margin-top:-2px}.typing-indicator{display:flex;padding:1px 16px;justify-content:flex-start}.typing-bubble{background-color:#e9e9eb;border-radius:18px 18px 18px 4px;padding:12px 16px;display:flex;align-items:center;gap:4px}.dot{width:8px;height:8px;background-color:#8e8e93;border-radius:50%;animation:typing-bounce 1.4s infinite ease-in-out both}.dot:nth-child(1){animation-delay:-.32s}.dot:nth-child(2){animation-delay:-.16s}.dot:nth-child(3){animation-delay:0s}@keyframes typing-bounce{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.chat-window{display:flex;flex-direction:column;background-color:#fff;overflow:hidden;transition:padding-bottom .15s ease-out}@media(min-width:769px){.chat-window{width:100%;height:100%;max-width:420px;max-height:700px;border-radius:12px;box-shadow:0 25px 50px -12px #0006,0 0 0 1px #0000001a}}@media(max-width:768px){.chat-window{width:100%;height:100%;max-width:none;max-height:none;border-radius:0;box-shadow:none}}.connection-warning{background-color:#fff3cd;color:#856404;padding:8px 16px;font-size:13px;text-align:center;border-bottom:1px solid #ffc107;flex-shrink:0}.messages-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;display:flex;flex-direction:column;gap:2px;background-color:#fff;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.messages-container::-webkit-scrollbar{width:6px}.messages-container::-webkit-scrollbar-track{background:transparent}.messages-container::-webkit-scrollbar-thumb{background-color:#0003;border-radius:3px}.app{width:100%;height:100vh;height:100dvh;display:flex;justify-content:center;align-items:center}@media(min-width:769px){.app{padding:40px;background:linear-gradient(135deg,#667eea,#764ba2)}}@media(max-width:768px){.app{padding:0;background-color:#fff}}