:root{--bg: #0d0d0f;--card: #141416;--border: #222226;--text: #e0e0e0;--muted: #5c5c66;--accent: #5b5bff;--danger: #ff5252;--success: #00c853;--radius: 8px;--accent-glow: rgba(91, 91, 255, .25);--danger-glow: rgba(255, 82, 82, .15);--overlay-bg: rgba(0, 0, 0, .65);--shimmer: rgba(255, 255, 255, .04);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-top: env(safe-area-inset-top, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);height:100%;height:-webkit-fill-available;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}body{display:flex;justify-content:center;align-items:center}.hidden{display:none!important}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}#auth-screen{width:100%;max-width:380px;margin:0 16px;padding:28px 20px;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) * 1.5);animation:authFadeIn .35s ease both}@keyframes authFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}#auth-screen h1{text-align:center;margin-bottom:20px;font-size:20px;font-weight:700;letter-spacing:-.3px}#auth-screen h1 span{color:var(--accent)}.form-group{margin-bottom:14px}.form-group label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.form-group input{width:100%;padding:11px 14px;background:#ffffff08;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;min-height:44px}.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.form-group input::placeholder{color:var(--muted);opacity:.7}.btn{width:100%;padding:12px;border:none;border-radius:var(--radius);font-size:14px;font-weight:600;cursor:pointer;margin-top:6px;transition:opacity .15s,transform .1s,box-shadow .2s;min-height:44px}.btn:active{transform:scale(.98)}.btn-primary{background:var(--accent);color:#fff;box-shadow:0 2px 8px var(--accent-glow)}.btn-primary:hover{opacity:.92}.btn-secondary{background:transparent;border:1px solid var(--border);color:var(--text)}.btn-secondary:hover{border-color:var(--muted)}.toggle-link{text-align:center;margin-top:14px;font-size:13px;color:var(--muted)}.toggle-link a{color:var(--accent);cursor:pointer;text-decoration:none;font-weight:600}.toggle-link a:hover{text-decoration:underline}.error-msg{color:var(--danger);font-size:12px;margin-top:6px;text-align:center;min-height:18px;animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}#chat-screen{width:100%;height:100%;height:-webkit-fill-available;display:flex;flex-direction:column;background:var(--card);overflow:hidden;position:relative}.connection-banner{position:absolute;top:0;left:0;right:0;z-index:10;padding:10px 16px;padding-top:calc(10px + var(--safe-top));background:var(--danger);color:#fff;font-size:13px;font-weight:600;text-align:center;transform:translateY(-100%);opacity:0;transition:transform .3s ease,opacity .3s ease;pointer-events:none}.connection-banner.visible{transform:translateY(0);opacity:1;pointer-events:auto}.connection-banner.connected{background:var(--success)}.chat-header{padding:10px 14px;padding-top:calc(10px + var(--safe-top));border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0;gap:10px;min-height:48px}.chat-header h2{font-size:15px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:8px}.online-indicator{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0;position:relative}.online-indicator:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:var(--success);opacity:.4;animation:pulse-ring 2s ease-out infinite}@keyframes pulse-ring{0%{transform:scale(1);opacity:.5}to{transform:scale(2.5);opacity:0}}.chat-header .user-info{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:10px;min-width:0}.chat-header .user-info span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}.chat-header .logout{color:var(--danger);cursor:pointer;font-size:11px;font-weight:600;white-space:nowrap;padding:6px 10px;border-radius:6px;transition:background .15s;min-height:44px;display:flex;align-items:center}.chat-header .logout:hover{background:var(--danger-glow)}.chat-header .settings-btn{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:6px;border-radius:6px;transition:color .15s,background .15s;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;line-height:1}.chat-header .settings-btn:hover{color:var(--text);background:#ffffff0d}#messages{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:4px;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.msg{max-width:85%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;word-break:break-word;position:relative;animation:msgIn .3s ease both}@keyframes msgIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.msg.mine{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px;margin-left:15%}.msg.mine:after{content:"";position:absolute;bottom:0;right:-6px;width:0;height:0;border-left:8px solid var(--accent);border-bottom:8px solid transparent;border-top:0px solid transparent}.msg.other{align-self:flex-start;background:#ffffff0f;color:var(--text);border-bottom-left-radius:4px;margin-right:15%}.msg.other:before{content:"";position:absolute;bottom:0;left:-6px;width:0;height:0;border-right:8px solid rgba(255,255,255,.06);border-bottom:8px solid transparent;border-top:0px solid transparent}.msg .author{font-size:10px;font-weight:600;opacity:.75;margin-bottom:3px;letter-spacing:.2px}.msg .time{font-size:10px;opacity:.45;margin-top:4px;text-align:right}.msg-img{max-width:100%;max-height:300px;width:auto;border-radius:8px;display:block;cursor:pointer;object-fit:cover;transition:transform .2s,opacity .2s}.msg-img:active{transform:scale(.97)}.msg:has(.msg-img){background:transparent;padding:0;border-radius:0}.msg.mine:has(.msg-img):after,.msg.other:has(.msg-img):before{display:none}.msg.other:has(.msg-img) .author{padding:0 4px 4px}.image-lightbox{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000000e6;display:flex;align-items:center;justify-content:center;animation:lightboxIn .2s ease;cursor:pointer}.image-lightbox img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px}@keyframes lightboxIn{0%{opacity:0}to{opacity:1}}.system-msg{text-align:center;font-size:11px;color:var(--muted);padding:6px 12px;margin:4px 0;font-style:italic;letter-spacing:.3px;animation:msgIn .3s ease both}.loading{color:var(--muted);text-align:center;padding:36px 16px;font-size:13px}.skeleton{background:linear-gradient(90deg,#ffffff08,#ffffff12,#ffffff08);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius)}.skeleton-line{height:14px;margin-bottom:8px;border-radius:6px}.skeleton-line:last-child{width:60%}.skeleton-bubble{height:40px;width:70%;margin-bottom:10px;border-radius:14px}.skeleton-bubble.mine{margin-left:auto;width:55%}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.typing-indicator{display:flex;align-items:center;gap:4px;padding:8px 14px;align-self:flex-start;background:#ffffff0f;border-radius:14px 14px 14px 4px;margin-right:15%;animation:msgIn .2s ease both}.typing-indicator span{width:6px;height:6px;border-radius:50%;background:var(--muted);display:inline-block;animation:bounce 1.2s ease-in-out infinite}.typing-indicator span:nth-child(2){animation-delay:.15s}.typing-indicator span:nth-child(3){animation-delay:.3s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-6px)}}.scroll-btn{position:absolute;bottom:80px;right:14px;z-index:5;width:40px;height:40px;min-width:44px;min-height:44px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px #0006;animation:scrollBtnIn .25s ease both;transition:opacity .2s,transform .2s}.scroll-btn:active{transform:scale(.92)}@keyframes scrollBtnIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.chat-input-wrap{padding:8px 10px;padding-bottom:calc(8px + var(--safe-bottom));border-top:1px solid var(--border);display:flex;align-items:flex-end;gap:8px;flex-shrink:0;background:var(--card)}.chat-input-wrap textarea{flex:1;padding:10px 14px;background:#ffffff0a;border:1px solid var(--border);border-radius:20px;color:var(--text);font-size:14px;font-family:inherit;line-height:1.4;outline:none;resize:none;min-width:0;min-height:44px;max-height:120px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}.chat-input-wrap textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.chat-input-wrap textarea::placeholder{color:var(--muted);opacity:.7}.emoji-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:50%;width:38px;height:38px;min-width:44px;min-height:44px;font-size:18px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s}.emoji-btn:hover{color:var(--text);border-color:var(--accent);background:#ffffff08}.attach-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:50%;width:38px;height:38px;min-width:44px;min-height:44px;font-size:16px;cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color .15s,border-color .15s,background .15s}.attach-btn:hover{color:var(--text);border-color:var(--accent);background:#ffffff08}.chat-input-wrap input[type=file].hidden-input{display:none;position:absolute;width:0;height:0;opacity:0;pointer-events:none}.chat-input-wrap button[type=submit],.chat-input-wrap>button:not(.attach-btn):not(.emoji-btn){padding:10px 18px;background:var(--accent);color:#fff;border:none;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;min-height:44px;transition:opacity .15s,box-shadow .2s,transform .1s;box-shadow:0 2px 8px var(--accent-glow)}.chat-input-wrap button:active{opacity:.8;transform:scale(.96)}.pull-indicator{position:absolute;top:0;left:50%;transform:translate(-50%) translateY(-40px);width:30px;height:30px;border-radius:50%;border:2px solid var(--muted);border-top-color:transparent;animation:pullSpinner .8s linear infinite;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:2}.pull-indicator.active{opacity:1;transform:translate(-50%) translateY(8px)}@keyframes pullSpinner{to{transform:translate(-50%) rotate(360deg)}}#settings-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;animation:modalIn .25s ease both;padding:16px;padding-top:calc(16px + var(--safe-top));padding-bottom:calc(16px + var(--safe-bottom))}#settings-modal.hidden{display:none}@keyframes modalIn{0%{opacity:0}to{opacity:1}}.modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--overlay-bg);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlayIn .3s ease both;cursor:pointer}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}.modal-content{position:relative;width:100%;max-width:400px;max-height:85vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:calc(var(--radius) * 1.5);padding:24px 20px;animation:modalContentIn .3s ease both;box-shadow:0 12px 40px #00000080}@keyframes modalContentIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}#settings-modal.closing .modal-content{animation:modalContentOut .2s ease both}#settings-modal.closing{animation:modalOut .25s ease both}@keyframes modalContentOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92)}}@keyframes modalOut{0%{opacity:1}to{opacity:0}}.modal-content h2{font-size:18px;font-weight:700;margin-bottom:18px;text-align:center}.modal-content .form-group label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.modal-content .form-group input,.modal-content .form-group select{width:100%;padding:11px 14px;background:#ffffff08;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:14px;outline:none;min-height:44px;transition:border-color .2s,box-shadow .2s}.modal-content .form-group input:focus,.modal-content .form-group select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.modal-content .btn{margin-top:10px}.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:4px 8px;border-radius:6px;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;transition:color .15s,background .15s}.modal-close:hover{color:var(--text);background:#ffffff0d}@media(min-width:640px){body{padding:20px}#auth-screen{margin:0;padding:32px 28px}#chat-screen{max-width:700px;max-height:92vh;border:1px solid var(--border);border-radius:var(--radius)}.chat-header{padding:14px 18px}.chat-header h2{font-size:16px}#messages{padding:14px 16px;gap:6px}.msg{max-width:75%;padding:10px 15px;font-size:14px}.msg.mine{margin-left:25%}.msg.other{margin-right:25%}.chat-input-wrap{padding:10px 14px;gap:10px}.chat-input-wrap textarea{padding:12px 16px;font-size:14px}.scroll-btn{right:18px;bottom:90px}.modal-content{padding:28px 24px}.typing-indicator{margin-right:25%}}@media(min-width:900px){#chat-screen{max-width:900px}.chat-header{padding:14px 20px}#messages{padding:16px 20px}.chat-input-wrap{padding:12px 20px}.msg{max-width:65%}.msg.mine{margin-left:35%}.msg.other,.typing-indicator{margin-right:35%}}@supports (padding-bottom: env(safe-area-inset-bottom)){.chat-input-wrap{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}@media(min-width:640px){@supports (padding-bottom: env(safe-area-inset-bottom)){.chat-input-wrap{padding-bottom:calc(10px + env(safe-area-inset-bottom))}}}@media(min-width:900px){@supports (padding-bottom: env(safe-area-inset-bottom)){.chat-input-wrap{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}}@supports (padding-top: env(safe-area-inset-top)){.chat-header,.connection-banner{padding-top:calc(10px + env(safe-area-inset-top))}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:focus:not(:focus-visible),input:focus:not(:focus-visible),textarea:focus:not(:focus-visible){outline:none}@media(max-width:319px){.chat-input-wrap{gap:4px;padding:6px}.chat-input-wrap textarea{padding:8px 10px;font-size:13px}.msg{max-width:92%;font-size:13px}}