@import "https://fonts.googleapis.com/css2?family=Segoe+UI:wght@400;500;600;700&display=swap";:root{--wa-teal:#00a884;--wa-teal-dark:#005c4b;--wa-header:#075e54;--wa-bg:#111b21;--wa-surface:#1f2c34;--wa-card:#1f2c34;--wa-bubble-sent:#005c4b;--wa-bubble-received:#202c33;--wa-text-primary:#e9edef;--wa-text-secondary:#8696a0;--wa-divider:#222d34;--wa-accent:#00a884;--wa-unread-badge:#00a884;--wa-input-bg:#1f2c34;--wa-hover:#2a3942;--wa-green-avatar:#00a884;--wa-blue-avatar:#53bdeb;--wa-orange-avatar:#f7b84a;--wa-purple-avatar:#a87fef;--wa-red-avatar:#ff6b6b}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--wa-bg);color:var(--wa-text-primary);-webkit-font-smoothing:antialiased;min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif;overflow-x:hidden}.auth-shell{background:linear-gradient(160deg,#07111a 0%,#0a1620 50%,#0d1f2a 100%);justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex;position:relative;overflow:hidden}.auth-top-decoration{pointer-events:none;height:200px;position:fixed;top:0;left:0;right:0;overflow:hidden}.auth-wave,.auth-wave2{background:#00a88414;border-radius:45%;width:120%;height:120px;animation:8s ease-in-out infinite wave;position:absolute;bottom:-60px;left:-10%}.auth-wave2{background:#00a8840d;animation-duration:10s;animation-delay:-3s;bottom:-40px}@keyframes wave{0%,to{transform:rotate(0)translateY(0)}50%{transform:rotate(3deg)translateY(-10px)}}.auth-card{background:var(--wa-card);border:1px solid var(--wa-divider);z-index:1;border-radius:16px;width:100%;max-width:400px;padding:36px 28px 28px;box-shadow:0 20px 60px #00000080}.auth-logo{align-items:center;gap:12px;margin-bottom:6px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--wa-accent), #00d4aa);color:#fff;border-radius:14px;place-items:center;width:48px;height:48px;display:grid}.auth-title{color:var(--wa-text-primary);letter-spacing:-.5px;font-size:24px;font-weight:700}.auth-title .muted{color:var(--wa-accent);font-weight:600}.auth-tagline{color:var(--wa-text-secondary);margin-top:4px;margin-bottom:28px;font-size:14px}.auth-form{flex-direction:column;gap:14px;display:flex}.input-group{background:var(--wa-bg);border:1px solid var(--wa-divider);border-radius:10px;align-items:center;gap:12px;padding:0 14px;transition:border-color .2s;display:flex}.input-group:focus-within{border-color:var(--wa-accent)}.input-group svg{color:var(--wa-text-secondary);flex-shrink:0}.input-group input{color:var(--wa-text-primary);background:0 0;border:none;outline:none;flex:1;padding:14px 0;font-family:inherit;font-size:15px}.input-group input::placeholder{color:var(--wa-text-secondary)}.pw-toggle{color:var(--wa-text-secondary);cursor:pointer;background:0 0;border:none;place-items:center;padding:4px;transition:color .2s;display:grid}.pw-toggle:hover{color:var(--wa-accent)}.primary-btn{background:linear-gradient(135deg, var(--wa-accent), #00c996);color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;padding:15px;font-family:inherit;font-size:16px;font-weight:600;transition:opacity .2s,transform .1s;display:flex}.primary-btn:hover{opacity:.9}.primary-btn:active{transform:scale(.98)}.primary-btn:disabled{opacity:.6;cursor:not-allowed}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.form-error{color:#ff6b6b;text-align:center;background:#ff6b6b1a;border-radius:8px;padding:8px;font-size:13px}.switch-mode{color:var(--wa-accent);cursor:pointer;background:0 0;border:none;margin-top:18px;padding:8px;font-family:inherit;font-size:14px;transition:opacity .2s}.switch-mode:hover{opacity:.8}.auth-security{color:var(--wa-text-secondary);border-top:1px solid var(--wa-divider);align-items:center;gap:8px;margin-top:24px;padding-top:20px;font-size:12px;display:flex}.auth-security svg{color:var(--wa-accent)}.app-shell{background:var(--wa-bg);flex-direction:column;height:100dvh;display:flex;position:relative;overflow:hidden}.wa-dark .app-shell{background:var(--wa-bg)}.wa-topbar{background:var(--wa-header);justify-content:space-between;align-items:center;min-height:56px;padding:10px 16px;display:flex}.wa-topbar-left{color:#fff;cursor:pointer;align-items:center;gap:6px;font-size:18px;font-weight:600;display:flex}.wa-topbar-right{gap:4px;display:flex}.wa-icon-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;place-items:center;width:40px;height:40px;transition:background .2s;display:grid}.wa-icon-btn:hover{background:#ffffff1a}.wa-tabs{background:var(--wa-header);border-bottom:1px solid #ffffff1a;display:flex}.wa-tab{color:#fff9;cursor:pointer;text-transform:capitalize;background:0 0;border:none;border-bottom:3px solid #0000;flex:1;justify-content:center;align-items:center;gap:6px;padding:11px 0;font-family:inherit;font-size:13px;font-weight:600;transition:all .2s;display:flex}.wa-tab.active{color:#fff;border-bottom-color:#fff}.wa-tab:hover:not(.active){color:#ffffffd9}.wa-search-bar{background:var(--wa-bg);border-bottom:1px solid var(--wa-divider);align-items:center;gap:12px;padding:8px 16px;display:flex}.wa-search-bar svg{color:var(--wa-text-secondary);flex-shrink:0}.wa-search-bar input{background:var(--wa-surface);color:var(--wa-text-primary);border:none;border-radius:8px;outline:none;flex:1;padding:9px 14px;font-family:inherit;font-size:14px}.wa-search-bar input::placeholder{color:var(--wa-text-secondary)}.wa-profile-row{background:var(--wa-surface);border-bottom:1px solid var(--wa-divider);align-items:center;gap:10px;padding:10px 16px;display:flex}.wa-mini-avatar{background:var(--wa-accent);color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;font-size:13px;font-weight:700;display:grid}.wa-profile-info{flex:1}.wa-profile-info strong{color:var(--wa-text-primary);font-size:15px;display:block}.wa-profile-info small{color:var(--wa-text-secondary);font-size:12px}.wa-chat-list{background:var(--wa-bg);flex:1;overflow-y:auto}.wa-chat-row{border:none;border-bottom:1px solid var(--wa-divider);cursor:pointer;text-align:left;background:0 0;align-items:center;gap:14px;width:100%;padding:12px 16px;transition:background .15s;display:flex}.wa-chat-row:hover{background:var(--wa-hover)}.wa-chat-row:active{background:#00a8841a}.wa-chat-row.active{background:#00a88426}.wa-avatar{background:var(--wa-accent);color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:50px;height:50px;font-size:18px;font-weight:700;display:grid;position:relative}.wa-online-dot{background:var(--wa-accent);border:2px solid var(--wa-bg);border-radius:50%;width:12px;height:12px;position:absolute;bottom:2px;right:2px}.wa-chat-meta{flex-direction:column;flex:1;gap:3px;min-width:0;display:flex}.wa-chat-name{justify-content:space-between;align-items:center;gap:8px;display:flex}.wa-chat-name span:first-child{color:var(--wa-text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}.wa-chat-time{color:var(--wa-text-secondary);flex-shrink:0;font-size:12px}.wa-unread-badge{background:var(--wa-unread-badge);color:#fff;border-radius:10px;flex-shrink:0;padding:2px 6px;font-size:11px;font-weight:700}.wa-chat-last{color:var(--wa-text-secondary);white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:4px;font-size:13px;display:flex;overflow:hidden}.wa-empty{text-align:center;color:var(--wa-text-secondary);padding:40px 16px;font-size:14px}.wa-fab{background:var(--wa-accent);color:#fff;cursor:pointer;z-index:10;border:none;border-radius:16px;place-items:center;width:56px;height:56px;transition:transform .15s,box-shadow .15s;display:grid;position:absolute;bottom:24px;right:20px;box-shadow:0 4px 16px #00a88466}.wa-fab:hover{transform:scale(1.05);box-shadow:0 6px 20px #00a88480}.wa-fab:active{transform:scale(.95)}.wa-encryption-banner{background:var(--wa-surface);border-top:1px solid var(--wa-divider);color:var(--wa-text-secondary);align-items:center;gap:6px;padding:12px 16px;font-size:12px;display:flex}.wa-encryption-banner svg{color:var(--wa-accent);flex-shrink:0}.wa-chat-header{background:var(--wa-header);align-items:center;gap:8px;min-height:56px;padding:8px 10px;display:flex}.wa-back-btn{color:#fff;cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;place-items:center;width:36px;height:36px;transition:background .2s;display:grid}.wa-back-btn:hover{background:#ffffff1a}.wa-header-avatar{background:var(--wa-accent);color:#fff;border-radius:50%;flex-shrink:0;place-items:center;width:40px;height:40px;font-size:15px;font-weight:700;display:grid}.wa-header-info{flex-direction:column;flex:1;min-width:0;display:flex}.wa-header-info strong{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:600;overflow:hidden}.wa-header-info span{color:#ffffffb3;font-size:12px}.wa-header-title{color:#fff;text-align:center;flex:1;font-size:18px;font-weight:600}.wa-header-actions{gap:2px;display:flex}.wa-encryption-notice{color:var(--wa-text-secondary);background:#005c4b4d;align-items:center;gap:6px;padding:8px 16px;font-size:12px;display:flex}.wa-encryption-notice svg{color:var(--wa-accent);flex-shrink:0}.wa-msg-area{background:var(--wa-bg);background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");flex-direction:column;flex:1;gap:3px;padding:12px 16px;display:flex;overflow-y:auto}.wa-bubble{word-wrap:break-word;border-radius:8px;max-width:82%;padding:7px 10px 5px;position:relative}.wa-sent{background:var(--wa-bubble-sent);border-top-right-radius:0;align-self:flex-end}.wa-received{background:var(--wa-bubble-received);border-top-left-radius:0;align-self:flex-start}.wa-bubble-text{color:var(--wa-text-primary);font-size:14.5px;line-height:1.45;display:block}.wa-bubble-meta{justify-content:flex-end;align-items:center;gap:4px;margin-top:2px;display:flex}.wa-bubble-time{color:#ffffff73;font-size:11px}.wa-tick{color:#ffffff80;place-items:center;display:grid}.wa-tick.read{color:#53bdeb}.wa-tick.delivered{color:#fff9}.wa-composer{background:var(--wa-surface);border-top:1px solid var(--wa-divider);align-items:flex-end;gap:8px;padding:8px 10px 12px;display:flex}.wa-composer-btn{color:var(--wa-text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;flex-shrink:0;place-items:center;width:42px;height:42px;transition:color .2s,background .2s;display:grid}.wa-composer-btn:hover{color:var(--wa-text-primary);background:var(--wa-hover)}.wa-input-wrap{background:var(--wa-bg);border:1px solid var(--wa-divider);border-radius:24px;flex:1;overflow:hidden}.wa-input{width:100%;color:var(--wa-text-primary);background:0 0;border:none;outline:none;padding:10px 16px;font-family:inherit;font-size:15px}.wa-input::placeholder{color:var(--wa-text-secondary)}.wa-send-btn{background:var(--wa-accent);color:#fff;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;place-items:center;width:42px;height:42px;transition:opacity .2s,transform .1s;display:grid}.wa-send-btn:hover{opacity:.85}.wa-send-btn:active{transform:scale(.9)}.wa-new-chat-tabs{background:var(--wa-surface);border-bottom:1px solid var(--wa-divider);gap:8px;padding:12px 16px;display:flex}.wa-nc-tab{border:1px solid var(--wa-divider);color:var(--wa-text-secondary);cursor:pointer;background:0 0;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:8px;padding:10px;font-family:inherit;font-size:14px;font-weight:500;transition:all .2s;display:flex}.wa-nc-tab.active{border-color:var(--wa-accent);color:var(--wa-accent);background:#00a88426}.wa-contact-list{background:var(--wa-bg);flex:1;overflow-y:auto}.wa-contact-item{border-bottom:1px solid var(--wa-divider);cursor:pointer;align-items:center;gap:14px;padding:14px 16px;transition:background .15s;display:flex}.wa-contact-item:hover{background:var(--wa-hover)}.wa-contact-item>div:last-child{flex:1}.wa-contact-item strong{color:var(--wa-text-primary);font-size:16px;display:block}.wa-contact-item small{color:var(--wa-text-secondary);font-size:13px}.wa-green{background:var(--wa-green-avatar)}.wa-blue{background:var(--wa-blue-avatar)}.wa-orange{background:var(--wa-orange-avatar)}.wa-purple{background:var(--wa-purple-avatar)}.wa-red{background:var(--wa-red-avatar)}.wa-chat-list,.wa-msg-area,.wa-contact-list{scrollbar-width:thin;scrollbar-color:#ffffff26 transparent}.wa-chat-list::-webkit-scrollbar{width:5px}.wa-msg-area::-webkit-scrollbar{width:5px}.wa-contact-list::-webkit-scrollbar{width:5px}.wa-chat-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}.wa-msg-area::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}.wa-contact-list::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:10px}@media (width>=700px){.app-shell{border-left:1px solid var(--wa-divider);border-right:1px solid var(--wa-divider);max-width:480px;margin:0 auto;box-shadow:0 0 60px #00000080}}@media (width<=360px){.auth-card{padding:28px 20px 22px}.wa-chat-row{gap:10px;padding:10px 12px}.wa-avatar{width:46px;height:46px;font-size:16px}}