:root{--wa-green: #00a884;--wa-green-dark: #008069;--wa-bg: #eae6df;--panel: #ffffff;--panel-2: #f0f2f5;--border: #e9edef;--text: #111b21;--text-muted: #667781;--bubble-out: #d9fdd3;--bubble-in: #ffffff}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Segoe UI,Helvetica,Arial,sans-serif;color:var(--text);background:var(--panel-2)}.splash{display:grid;place-items:center;height:100%;color:var(--text-muted)}.login-wrap{height:100%;display:grid;place-items:center;background:linear-gradient(180deg,var(--wa-green-dark) 0 220px,var(--panel-2) 220px)}.login-card{width:360px;max-width:90vw;background:var(--panel);border-radius:10px;padding:32px 28px;box-shadow:0 6px 24px #00000026;display:flex;flex-direction:column;gap:14px}.login-card h1{font-size:20px;margin:0}.login-sub{margin:0 0 6px;color:var(--text-muted);font-size:14px}.login-card input,.composer input,.composer-row input{padding:11px 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;outline:none}.login-card input:focus{border-color:var(--wa-green)}.login-card button,.composer button{background:var(--wa-green-dark);color:#fff;border:none;padding:11px;border-radius:8px;font-size:15px;cursor:pointer}.login-card button:disabled,.composer button:disabled{opacity:.6;cursor:default}.login-error,.composer-error{color:#b00020;font-size:13px}.app{display:grid;grid-template-columns:360px 1fr;height:100%}.sidebar{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}.sidebar-header{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--panel-2)}.sidebar-user{font-weight:600;flex:1}.logout-btn{background:transparent;border:none;color:var(--wa-green-dark);cursor:pointer;font-size:14px}.contact-list{overflow-y:auto;flex:1}.empty-contacts{padding:24px 16px;color:var(--text-muted);font-size:14px}.contact-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;border:none;border-bottom:1px solid var(--border);background:transparent;cursor:pointer;text-align:left}.contact-item:hover{background:var(--panel-2)}.contact-item.active{background:#e7f3ef}.avatar{width:44px;height:44px;border-radius:50%;background:var(--wa-green);color:#fff;display:grid;place-items:center;font-weight:600;flex-shrink:0}.avatar-self{width:38px;height:38px;font-size:14px}.contact-meta{flex:1;min-width:0}.contact-top{display:flex;justify-content:space-between;gap:8px}.contact-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-time{color:var(--text-muted);font-size:12px;flex-shrink:0}.contact-waid{color:var(--text-muted);font-size:13px}.chat-view{display:flex;flex-direction:column;min-height:0;background:var(--wa-bg)}.chat-empty{display:grid;place-items:center;color:var(--text-muted)}.chat-empty-inner{text-align:center}.chat-header{background:var(--panel-2);padding:10px 18px;border-bottom:1px solid var(--border)}.chat-title{font-weight:600}.chat-subtitle{font-size:13px;color:var(--text-muted)}.messages{flex:1;overflow-y:auto;padding:18px 8%;display:flex;flex-direction:column;gap:4px}.bubble-row{display:flex}.bubble-row.out{justify-content:flex-end}.bubble{max-width:65%;padding:6px 9px 8px;border-radius:8px;background:var(--bubble-in);box-shadow:0 1px .5px #00000021;position:relative;font-size:14.5px;line-height:1.35;word-wrap:break-word}.bubble-row.out .bubble{background:var(--bubble-out)}.bubble-body{white-space:pre-wrap}.bubble-meta{display:block;text-align:right;font-size:11px;color:var(--text-muted);margin-top:2px}.bubble-status.read{color:#53bdeb}.composer{background:var(--panel-2);padding:10px 14px;border-top:1px solid var(--border)}.composer-row{display:flex;gap:10px}.composer-row input{flex:1;background:#fff}.composer button{padding-left:22px;padding-right:22px}