:root{--wa-primary:#10b981;--wa-primary-light:#34d399;--wa-bg-panel:#f8fafc;--wa-bg-chat:#f1f5f9;--wa-text:#0f172a;--wa-text-muted:#64748b;--wa-border:#e2e8f0;--wa-msg-out:#dcfce7;--wa-msg-in:#fff;--glass-bg:#ffffffb3;--glass-border:#ffffff80;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a}@media (prefers-color-scheme:dark){:root{--wa-primary:#10b981;--wa-primary-light:#059669;--wa-bg-panel:#0f172a;--wa-bg-chat:#020617;--wa-text:#f8fafc;--wa-text-muted:#94a3b8;--wa-border:#1e293b;--wa-msg-out:#064e3b;--wa-msg-in:#1e293b;--glass-bg:#0f172ab3;--glass-border:#ffffff0d}}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--wa-bg-chat);color:var(--wa-text);-webkit-font-smoothing:antialiased;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#00000026;border-radius:6px}@media (prefers-color-scheme:dark){::-webkit-scrollbar-thumb{background:#ffffff26}}.app-container{background-image:radial-gradient(circle at 100% 0,#10b9811a,#0000 40%),radial-gradient(circle at 0 100%,#10b9810d,#0000 40%);background-color:var(--wa-bg-chat);width:100vw;height:100dvh;display:flex}.login-container{background-color:var(--wa-bg-chat);background-image:radial-gradient(circle at 100% 0,#10b9811a,#0000 40%),radial-gradient(circle at 0 100%,#10b9810d,#0000 40%);justify-content:center;align-items:center;width:100vw;height:100dvh;display:flex}.login-card{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-md);text-align:center;border-radius:20px;flex-direction:column;align-items:center;width:90%;max-width:400px;padding:40px;display:flex}.login-input{border:1px solid var(--wa-border);background:var(--wa-bg-panel);width:100%;color:var(--wa-text);box-sizing:border-box;border-radius:10px;margin-bottom:20px;padding:15px;font-size:16px}.login-button{background:var(--wa-primary);color:#fff;cursor:pointer;border:none;border-radius:10px;width:100%;padding:15px;font-size:18px;font-weight:700;transition:all .2s}.login-button:hover{background:#0ea5e9}.login-error{color:#ef4444;margin-bottom:15px;font-size:14px}.qr-container{text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.qr-card{background:var(--glass-bg);border:1px solid var(--glass-border);box-shadow:var(--shadow-md);border-radius:20px;flex-direction:column;align-items:center;padding:40px;display:flex}.qr-container h1{color:var(--wa-text);margin-bottom:10px;font-size:24px;font-weight:600}.sidebar{border-right:1px solid var(--wa-border);background-color:var(--wa-bg-panel);z-index:10;flex-direction:column;width:35%;min-width:300px;max-width:400px;display:flex;box-shadow:2px 0 10px #00000005}.sidebar-header{background-color:var(--wa-bg-panel);height:70px;padding:env(safe-area-inset-top) 20px 0 20px;border-bottom:1px solid var(--wa-border);justify-content:space-between;align-items:center;font-size:20px;font-weight:600;display:flex}.header-actions button{color:var(--wa-text-muted);cursor:pointer;background:0 0;border:none;border-radius:50%;padding:8px;font-size:20px;transition:all .2s}.header-actions button:hover{color:var(--wa-primary);background-color:#0000000d}@media (prefers-color-scheme:dark){.header-actions button:hover{background-color:#ffffff1a}}.chat-list{flex:1;overflow-y:auto}.chat-item{border-bottom:1px solid var(--wa-border);cursor:pointer;padding:15px 20px;transition:all .2s;display:flex}.chat-item:hover{background-color:#00000005}.chat-item.active{background-color:var(--wa-bg-chat);border-left:4px solid var(--wa-primary)}@media (prefers-color-scheme:dark){.chat-item:hover{background-color:#ffffff05}}.chat-avatar{background-color:var(--wa-border);width:50px;height:50px;color:var(--wa-text-muted);box-shadow:var(--shadow-sm);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;margin-right:15px;font-size:20px;display:flex;overflow:hidden}.chat-avatar img{object-fit:cover;width:100%;height:100%}.chat-info{flex-direction:column;flex:1;justify-content:center;display:flex;overflow:hidden}.chat-name{color:var(--wa-text);margin-bottom:4px;font-size:16px;font-weight:600}.chat-preview{color:var(--wa-text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.main-chat{background-color:#0000;flex-direction:column;flex:1;width:100%;display:flex;position:relative}.chat-header{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);height:70px;padding:env(safe-area-inset-top) 20px 0 20px;border-bottom:1px solid var(--glass-border);z-index:10;align-items:center;display:flex}.back-button-mobile{color:var(--wa-text);cursor:pointer;background:0 0;border:none;margin-right:15px;padding:8px;font-size:20px;display:none}.message-list{flex-direction:column;flex:1;gap:15px;padding:30px 30px 120px;display:flex;overflow-y:auto}.message-wrapper{align-items:flex-end;max-width:75%;display:flex}.message-wrapper.sent{align-self:flex-end}.message-wrapper.received{align-self:flex-start}.message-bubble{box-shadow:var(--shadow-sm);border-radius:16px;padding:12px 16px;font-size:15px;line-height:1.5;transition:transform .2s;position:relative}.message-wrapper.sent .message-bubble{background-color:var(--wa-msg-out);border-bottom-right-radius:4px}.message-wrapper.received .message-bubble{background-color:var(--wa-msg-in);border:1px solid var(--wa-border);border-bottom-left-radius:4px}.play-button{background:var(--wa-primary);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;margin-left:12px;transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 10px #10b9814d}.message-wrapper.received .play-button{margin-left:12px;margin-right:0}.message-wrapper.sent .play-button{order:-1;margin-left:0;margin-right:12px}.play-button:hover{background:var(--wa-primary-light);transform:translateY(-2px)scale(1.05);box-shadow:0 6px 14px #10b98166}.play-button:active{transform:translateY(0)scale(.95)}.play-button:disabled{background:var(--wa-text-muted);cursor:not-allowed;box-shadow:none;transform:none}.message-time{color:var(--wa-text-muted);text-align:right;opacity:.8;margin-top:6px;font-size:11px}.empty-chat{color:var(--wa-text-muted);background-color:#0000;flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.empty-chat h2{color:var(--wa-text);margin-bottom:8px;font-weight:500}.loading-spinner{border:3px solid #10b98133;border-left-color:var(--wa-primary);border-radius:50%;width:24px;height:24px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.recording-pulse{animation:1.5s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #ef4444b3}70%{box-shadow:0 0 0 20px #ef444400}to{box-shadow:0 0 #ef444400}}.settings-panel{background:var(--wa-bg-chat);flex-direction:column;flex:1;align-items:center;padding:40px;display:flex;overflow-y:auto}.settings-card{background:var(--wa-msg-in);border:1px solid var(--wa-border);box-shadow:var(--shadow-sm);border-radius:20px;width:100%;max-width:600px;padding:40px}.settings-card h2{color:var(--wa-text);margin-bottom:20px}.media-container{background:#0000000d;border-radius:8px;justify-content:center;align-items:center;max-width:300px;min-height:100px;margin-bottom:8px;display:flex;overflow:hidden}.media-container img{max-width:100%;display:block}@media (width<=768px){.sidebar{width:100%;max-width:100%}.sidebar.hidden-mobile,.main-chat.hidden-mobile{display:none}.back-button-mobile{display:block!important}.message-wrapper{max-width:90%}.settings-panel,.settings-card{padding:20px}}