:root{--background-color: #f5f5f5;--text-color: #333;--header-bg: #075e54;--header-text: #fff;--message-bg-sent: #dcf8c6;--message-bg-received: #fff;--input-bg: #fff;--input-border: #ddd;--chat-bg: #ece5dd;--chat-input-bg:#fff}.dark{--background-color: #121212;--text-color: #e0e0e0;--header-bg: #202c33;--header-text: #e0e0e0;--message-bg-sent: #005c4b;--message-bg-received: #202c33;--input-bg: #2a3942;--input-border: #333;--chat-bg: #0b141a;--chat-input-bg:#202c33}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%}body{font-family:Arial,sans-serif;background-color:#f5f5f5;color:#333;overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}textarea,input{font-family:Arial,sans-serif}.auth{display:flex;justify-content:center;align-items:center;height:100dvh;background-color:var(--header-bg)}.auth #app{height:auto}.auth-container{background-color:var(--chat-bg);color:var(--text-color);padding:20px;border-radius:10px;box-shadow:0 0 10px #0000001a;width:100%;max-width:400px;text-align:center}.auth-container h1{margin-bottom:20px;font-size:24px;color:#075e54}.auth-container input{background-color:var(--input-bg);color:var(--text-color);width:100%;padding:10px;margin-bottom:15px;border:1px solid;border-color:var(--input-border);border-radius:5px;font-size:14px;outline:none}.auth-container input:focus{border-color:#075e54}.auth-container button{width:100%;padding:10px;background-color:#075e54;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer}.auth-container button:hover{background-color:#054f47}.auth-container button:disabled{color:#075e54;background-color:#032c28}.auth-container p{margin-top:15px;font-size:14px}.auth-container a{color:#075e54;text-decoration:none}.auth-container a:hover{text-decoration:underline}.chat-container{display:flex;flex-direction:column;height:100dvh;max-width:500px;margin:0 auto;background-color:var(--background-color);color:var(--text-color);box-shadow:0 0 10px #0000001a}.chat-header{padding:15px;background-color:var(--header-bg);color:var(--header-text);text-align:center;font-size:18px;font-weight:700;position:relative}.loading-indicator{text-align:center;padding:10px;color:#666;gap:10px;background-color:var( --chat-input-bg);width:45px;margin:0 auto;border-radius:60px}.loading-spinner{border:4px solid #f3f3f3;border-top:4px solid #075e54;border-radius:50%;width:25px;height:25px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.chat-messages{flex:1;padding:10px;overflow-y:auto;background-color:var(--chat-bg);height:calc(100vh - 150px)}.message{display:flex;flex-direction:column;margin-bottom:5px}.message.sent{align-items:flex-end}.message.received{align-items:flex-start}.message-bubble{max-width:70%;padding:10px;border-radius:10px;font-size:14px;line-height:1.4;white-space:pre-line}.message.sent .message-bubble{background-color:var(--message-bg-sent);color:var(--text-color)}.message.received .message-bubble{background-color:var(--message-bg-received);color:var(--text-color)}.message-timestamp{font-size:10px;color:#666;margin-top:4px;margin-bottom:5px}.message.sent .message-timestamp{text-align:right}.message.received .message-timestamp{text-align:left}.message-sender{font-size:12px;color:#666;margin-bottom:3px}.chat-input{display:flex;padding:10px;border-top:1px solid;border-color:var(--input-border);background-color:var(--chat-input-bg);position:sticky;bottom:env(safe-area-inset-bottom,0);width:100%;max-width:500px;z-index:999}.offline-message{display:flex;padding:15px;text-align:center;background:#fff3cd;border:1px solid #ffecb5;color:#664d03;font-size:14px;justify-content:center;vertical-align:middle;height:59px;align-items:center;position:sticky;bottom:env(safe-area-inset-bottom,0);width:100%;max-width:500px;z-index:999}.chat-input textarea{flex:1;padding:10px;border:1px solid;border-radius:20px;background-color:var(--input-bg);border-color:var(--input-border);color:var(--text-color);outline:none;font-size:14px;resize:none;overflow:hidden}.chat-input button{margin-left:10px;padding:10px 20px;background-color:#075e54;color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:14px;-moz-user-select:none;-webkit-user-select:none;user-select:none}.theme-toggle{background:none;border:none;cursor:pointer;font-size:20px;color:var(--header-text);margin-left:auto;position:absolute;right:20px;top:11px}.typing-indicator{padding:5px 15px;font-size:12px;color:#666;background-color:var(--chat-input-bg);border-top:1px solid var(--input-border)}.online-users{padding:8px 16px;font-size:14px;color:var(--text-secondary);display:flex;align-items:center;gap:8px;background-color:var(--chat-input-bg);border-top:1px solid var(--input-border)}.online-indicator{color:#4caf50;font-size:12px}.dark .online-indicator{color:#81c784}@media (max-width: 600px){.chat-container{max-width:100vh;height:100dvh}.chat-header{font-size:16px}.chat-input input{font-size:12px}.chat-input button{padding:10px 15px;font-size:12px}}.loading-indicator[data-v-7b585010]{margin-top:20px}