@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');
:root{--wa:#111b21;--wa2:#202c33;--wa3:#182229;--green:#00a884;--text:#e9edef;--muted:#8696a0;--line:rgba(233,237,239,.08);--blue:#005c4b;--blue2:#0b6b5a}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Rubik,Arial,sans-serif;background:#0b141a;color:var(--text)}button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.login-view{height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#17343b 0,transparent 45%),#0b141a}.login-card{width:min(420px,calc(100% - 30px));background:#202c33;border-radius:14px;padding:32px;box-shadow:0 18px 70px #0008}.brand{font-size:10px;letter-spacing:4px;color:#53cdb5;margin-bottom:12px}.login-card h1{margin:0 0 8px}.login-card p{color:var(--muted);font-size:13px;line-height:1.8;margin:0 0 22px}.login-card form{display:grid;gap:10px}.login-card input[type=email],.login-card input[type=password]{width:100%;padding:13px 14px;border:1px solid #33434c;background:#111b21;color:#fff;border-radius:8px;outline:none}.login-card input:focus{border-color:var(--green)}.remember{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}.remember input{accent-color:var(--green)}.login-card form button{padding:13px;border:0;border-radius:8px;background:var(--green);color:#fff;font-weight:700}.login-card small{min-height:18px;color:#ff8c8c}
.app{height:100%;display:flex;max-width:1500px;margin:auto;background:var(--wa);overflow:hidden;box-shadow:0 0 70px #0008}.sidebar{width:380px;min-width:320px;background:#111b21;border-left:1px solid var(--line);display:flex;flex-direction:column}.sidebar-head{height:64px;background:#202c33;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.profile{display:flex;align-items:center;gap:10px}.profile-avatar,.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#6a7175;color:#fff;font-weight:700}.profile b{display:block;font-size:14px}.profile small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.head-actions{display:flex;gap:5px}.head-actions button,.chat-header-actions button{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px}.head-actions button:hover,.chat-header-actions button:hover{background:#2a3941;color:#fff}.search{margin:8px 10px;background:#202c33;border-radius:8px;height:40px;display:flex;align-items:center;padding:0 12px;gap:8px}.search span{color:var(--muted);font-size:20px}.search input{background:transparent;border:0;outline:0;color:#d9e0e3;width:100%;font-size:12px}.filters{display:flex;gap:6px;padding:4px 10px 8px;border-bottom:1px solid var(--line)}.filter{border:1px solid transparent;background:#202c33;color:#aebac1;padding:6px 10px;border-radius:15px;font-size:10px}.filter.active{background:#005c4b;color:#fff}.conversation-list{overflow:auto;flex:1}.conversation{height:76px;display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer}.conversation:hover{background:#202c33}.conversation.active{background:#2a3942}.conv-avatar{width:49px;height:49px;min-width:49px;border-radius:50%;display:grid;place-items:center;background:#667781;font-weight:600}.conv-main{min-width:0;flex:1}.conv-top{display:flex;justify-content:space-between;gap:8px}.conv-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-time{font-size:9px;color:var(--muted);white-space:nowrap}.conv-bottom{display:flex;justify-content:space-between;gap:6px;margin-top:6px}.conv-preview{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread-dot{width:7px;height:7px;border-radius:50%;background:#25d366;margin-top:4px}.sidebar-empty{text-align:center;color:var(--muted);font-size:12px;padding:50px 15px}
.chat-panel{flex:1;min-width:0;position:relative;background:#0b141a}.chat-empty{height:100%;display:grid;place-content:center;text-align:center;background:radial-gradient(circle at 50% 40%,#182a31 0,transparent 45%)}.chat-empty-icon{width:72px;height:72px;border:1px solid #52626a;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;color:#8da0a8;font-size:30px}.chat-empty h2{font-size:18px;font-weight:500;margin:0 0 8px}.chat-empty p{font-size:11px;color:var(--muted)}.conversation-view{height:100%;display:flex;flex-direction:column}.chat-header{height:64px;min-height:64px;background:#202c33;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line)}.chat-person{display:flex;align-items:center;gap:11px}.chat-person b{display:block;font-size:13px}.chat-person small{display:block;color:var(--muted);font-size:10px;margin-top:3px;direction:ltr;text-align:right}.chat-header-actions{display:flex;gap:2px}.chat-messages{flex:1;overflow:auto;padding:22px 7%;background-color:#0b141a;background-image:radial-gradient(#ffffff08 1px,transparent 1px);background-size:18px 18px}.msg-row{display:flex;margin:4px 0}.msg-row.in{justify-content:flex-start}.msg-row.out{justify-content:flex-end}.bubble{position:relative;max-width:min(68%,620px);padding:8px 10px 7px;border-radius:8px;box-shadow:0 1px 1px #0004;font-size:12px;line-height:1.9;white-space:pre-wrap;word-break:break-word}.in .bubble{background:#202c33;border-top-right-radius:2px}.out .bubble{background:#005c4b;border-top-left-radius:2px}.bubble-meta{font-size:8px;color:#aebac1;float:left;margin:5px 0 0 8px;direction:ltr}.out .bubble-meta{color:#b7d8d1}.bubble-check{font-size:10px;color:#53b8aa;margin-right:3px}.date-sep{text-align:center;margin:15px auto;background:#182229;color:#aebac1;border-radius:7px;width:max-content;padding:5px 10px;font-size:9px}.composer{min-height:64px;background:#202c33;display:flex;align-items:flex-end;gap:8px;padding:9px 14px}.composer textarea{flex:1;resize:none;max-height:130px;background:#2a3942;border:0;border-radius:9px;color:#e9edef;outline:0;padding:11px 13px;font-size:12px;line-height:1.8}.composer button{width:44px;height:44px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:18px;display:grid;place-items:center}.chat-status{position:absolute;bottom:72px;right:50%;transform:translateX(50%);font-size:9px;color:#9fb0b8;background:#202c33;padding:5px 9px;border-radius:8px;opacity:0;transition:.2s}.chat-status.show{opacity:1}
@media(max-width:800px){.sidebar{width:100%;min-width:0}.chat-panel{display:none}.app.chat-open .sidebar{display:none}.app.chat-open .chat-panel{display:block}.chat-messages{padding:18px 4%}.bubble{max-width:82%}.chat-header{height:58px;min-height:58px}}