*{box-sizing:border-box;padding:0;margin:0}@media screen and (max-width:480px){.container{transform:none!important;transition:none!important}.message{animation:none!important}.user-button{display:block!important;width:100%!important;margin:2px 0!important}.message-content{box-shadow:none!important}}@supports not (display:flex){.user-button,.user-selector{display:block}.user-button{width:100%;margin:2px 0}.input-container,.messages-header{display:block}.input-container input{width:100%;margin-bottom:8px}}body,html{max-width:100vw;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{color:#333;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}a{color:inherit;text-decoration:none}.container{max-width:800px;margin:0 auto;padding:20px;min-height:100vh}.chat-container,.container{display:flex;flex-direction:column}.chat-container{background:#fff;border-radius:20px;box-shadow:0 20px 40px rgba(0,0,0,.1);overflow:hidden;height:80vh}.chat-header{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px;text-align:center}.chat-header h1{font-size:24px;margin-bottom:10px}.user-selector{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;max-width:300px;margin:0 auto}.select-prompt{font-size:14px;margin-bottom:16px;opacity:.9}.current-user{display:flex;align-items:center;justify-content:center;gap:8px;background:hsla(0,0%,100%,.15);padding:12px 20px;border-radius:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.current-user-label{font-size:14px;opacity:.9}.current-user-name{font-size:16px;font-weight:700;color:#fff}.switch-user-btn{background:hsla(0,0%,100%,.2);border:none;color:#fff;padding:6px 10px;border-radius:50%;cursor:pointer;font-size:16px;transition:all .3s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.switch-user-btn:hover{background:hsla(0,0%,100%,.3);transform:rotate(180deg)}.user-button{background:hsla(0,0%,100%,.2);border:2px solid hsla(0,0%,100%,.3);color:#fff;padding:16px 12px;border-radius:16px;cursor:pointer;transition:all .3s ease;font-size:16px;font-weight:500;min-height:50px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.user-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.2),transparent);transition:left .5s}.user-button:hover:before{left:100%}.user-button:hover{background:hsla(0,0%,100%,.3);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.15)}.user-button.active{background:hsla(0,0%,100%,.95);color:#667eea;font-weight:700;transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,.2)}.messages-container{flex:1 1;overflow-y:auto;padding:20px;gap:15px}.message,.messages-container{display:flex;flex-direction:column}.message{max-width:70%;margin-bottom:8px;transition:all .3s ease}.message:hover{transform:translateY(-1px)}.message.own{align-self:flex-end}.message.other{align-self:flex-start}.message-header{display:flex;align-items:center;gap:8px;margin-bottom:5px}.message-author{font-weight:700;font-size:14px;color:#667eea;padding:2px 8px;border-radius:12px;background:rgba(102,126,234,.1);transition:all .3s ease}.message-time{font-size:12px;color:#999}.message-content{background:#f5f5f5;padding:12px 16px;border-radius:18px;word-wrap:break-word;line-height:1.4;transition:all .3s ease;box-shadow:0 2px 8px rgba(0,0,0,.1)}.message.own .message-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px rgba(102,126,234,.3)}.message.other .message-content{background:#f0f0f0;color:#333;box-shadow:0 2px 8px rgba(0,0,0,.08)}.input-container{padding:20px;background:#f8f9fa;border-top:1px solid #e9ecef;display:flex;gap:10px;align-items:center}.message-input{flex:1 1;padding:12px 16px;border:2px solid #e9ecef;border-radius:25px;outline:none;font-size:16px;transition:border-color .3s ease}.message-input:focus{border-color:#667eea}.send-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 24px;border-radius:25px;cursor:pointer;font-size:16px;font-weight:700;transition:transform .2s ease}.send-button:hover{transform:translateY(-2px)}.send-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.welcome-message{text-align:center;color:#666;font-style:italic;margin:40px 0}.loading-message{text-align:center;color:#667eea;margin:40px 0;font-weight:500}.messages-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #f0f0f0}.message-count{font-size:14px;color:#666;font-weight:500}.realtime-indicator{color:#28a745;font-weight:500;animation:pulse 2s infinite}.realtime-indicator,.update-indicator{font-size:12px;display:flex;align-items:center;gap:4px}.update-indicator{color:#ff6b35;font-weight:600;animation:bounce .6s ease-in-out}@keyframes pulse{0%{opacity:1}50%{opacity:.6}to{opacity:1}}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-3px)}60%{transform:translateY(-2px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.message{animation:fadeInUp .3s ease-out}.message-content:hover{box-shadow:0 4px 16px rgba(0,0,0,.15)}@media (max-width:768px){.container{padding:8px}.chat-container{height:95vh;border-radius:16px}.chat-header{padding:16px}.chat-header h1{font-size:20px;margin-bottom:16px}.user-selector{max-width:280px;gap:10px}.current-user{padding:10px 16px;gap:6px}.current-user-label{font-size:13px}.current-user-name{font-size:15px}.switch-user-btn{width:28px;height:28px;font-size:14px}.user-button{padding:14px 8px;font-size:15px;min-height:48px}.messages-container{padding:16px;gap:12px}.message{max-width:85%}.message-content{padding:10px 14px;font-size:15px}.input-container{padding:16px;gap:12px}.message-input{font-size:16px;padding:14px 16px}.send-button{padding:14px 20px;font-size:15px}.messages-header{flex-direction:column;gap:8px;align-items:flex-start}.realtime-indicator,.update-indicator{align-self:flex-end;font-size:11px}}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/ba9851c3c22cd980-s.woff2) format("woff2");unicode-range:U+0460-052f,U+1c80-1c8a,U+20b4,U+2de0-2dff,U+a640-a69f,U+fe2e-fe2f}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/21350d82a1f187e9-s.woff2) format("woff2");unicode-range:U+0301,U+0400-045f,U+0490-0491,U+04b0-04b1,U+2116}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/c5fe6dc8356a8c31-s.woff2) format("woff2");unicode-range:U+1f??}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/19cfc7226ec3afaa-s.woff2) format("woff2");unicode-range:U+0370-0377,U+037a-037f,U+0384-038a,U+038c,U+038e-03a1,U+03a3-03ff}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/df0a9ae256c0569c-s.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01a0-01a1,U+01af-01b0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1ea0-1ef9,U+20ab}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/8e9860b6e62d6359-s.woff2) format("woff2");unicode-range:U+0100-02ba,U+02bd-02c5,U+02c7-02cc,U+02ce-02d7,U+02dd-02ff,U+0304,U+0308,U+0329,U+1d00-1dbf,U+1e00-1e9f,U+1ef2-1eff,U+2020,U+20a0-20ab,U+20ad-20c0,U+2113,U+2c60-2c7f,U+a720-a7ff}@font-face{font-family:__Inter_f367f3;font-style:normal;font-weight:100 900;font-display:swap;src:url(/_next/static/media/e4af272ccee01ff0-s.p.woff2) format("woff2");unicode-range:U+00??,U+0131,U+0152-0153,U+02bb-02bc,U+02c6,U+02da,U+02dc,U+0304,U+0308,U+0329,U+2000-206f,U+20ac,U+2122,U+2191,U+2193,U+2212,U+2215,U+feff,U+fffd}@font-face{font-family:__Inter_Fallback_f367f3;src:local("Arial");ascent-override:90.20%;descent-override:22.48%;line-gap-override:0.00%;size-adjust:107.40%}.__className_f367f3{font-family:__Inter_f367f3,__Inter_Fallback_f367f3;font-style:normal}