:root{--wa-green: #25d366;--wa-green-dark: #075e54;--wa-chat-bg: #efeae2;--border: #d1d7db;--text-primary: #111b21;--text-secondary: #54656f;--danger: #dc2626;--mine-bubble: #d9fdd3;--wa-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='0.04' stroke-width='1.5'%3E%3Ccircle cx='26' cy='30' r='7'/%3E%3Cpath d='M86 22h18l-6 10h8l-12 16 3-11h-7z'/%3E%3Cpath d='M140 18c4-6 12-6 16 0s-2 12-8 18c-2 2-4 4-6 6'/%3E%3Cpath d='M196 22h22v16h-10l-6 7v-7h-6z'/%3E%3Cpath d='M22 70c0-6 5-11 11-11s11 5 11 11-5 11-11 11h-4l-6 6v-7c-2-2-1-6-1-10z'/%3E%3Cpath d='M78 64h26v18H92l-7 7v-7h-7z'/%3E%3Ccircle cx='150' cy='72' r='9'/%3E%3Cpath d='M138 92c4-8 8-12 12-12s8 4 12 12'/%3E%3Cpath d='M198 60l8 8-8 8-8-8z'/%3E%3Cpath d='M30 120h20v14H38l-6 6v-6h-2z'/%3E%3Cpath d='M84 66v10m-5-5h10'/%3E%3Cpath d='M132 116c2-8 10-12 19-11 8 1 13 8 12 15-1 6-7 10-13 10-5 8-12 10-18 6'/%3E%3Cpath d='M44 122l10-4-4 10-8 2z'/%3E%3Cpath d='M104 124h16v12h-10l-6 5v-5h-6z'/%3E%3Cpath d='M170 128c6-2 12 1 13 7 1 5-3 10-9 10-5 8-13 12-21 10'/%3E%3Cpath d='M30 160h14v12H30z'/%3E%3Ccircle cx='80' cy='166' r='8'/%3E%3Cpath d='M96 172l8-10 8 10'/%3E%3Cpath d='M140 148h20v6h-20z'/%3E%3Cpath d='M140 160h20v6h-20z'/%3E%3Cpath d='M196 150v16m-8-8h16'/%3E%3Cpath d='M36 214c2-6 8-10 14-9 6 1 9 6 8 11'/%3E%3Ccircle cx='100' cy='180' r='5'/%3E%3Cpath d='M92 192c4-4 10-4 14 0'/%3E%3Cpath d='M150 190h18l-4 10h6l-10 12 2-8h-6z'/%3E%3Cpath d='M206 190l10 6-10 6v-12z'/%3E%3Cpath d='M26 206l12 6-12 6v-12z'/%3E%3Ccircle cx='170' cy='214' r='4'/%3E%3Ccircle cx='186' cy='214' r='4'/%3E%3Ccircle cx='202' cy='214' r='4'/%3E%3C/g  %3E%3C/svg%3E")}*{box-sizing:border-box}html,body,#root{margin:0;height:100%;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:var(--text-primary);background:#e5e7eb}#root{display:flex}.app-shell{display:flex;width:100%;height:100vh}.landing{flex:1;display:flex;align-items:center;justify-content:center;background:var(--wa-chat-bg)}.landing-card{background:#fff;border-radius:16px;padding:40px;max-width:420px;text-align:center;box-shadow:0 10px 30px #00000014}.landing-card h1{margin:16px 0 8px;color:var(--wa-green-dark)}.landing-card p{margin:6px 0;color:var(--text-primary)}.landing-card .muted{color:var(--text-secondary);font-size:14px}.btn-primary-link,.btn{display:inline-block;margin-top:18px;padding:10px 22px;border-radius:999px;background:var(--wa-green);color:#fff;font-weight:600;text-decoration:none;border:none;cursor:pointer;font-size:14px}.btn-primary-link:hover,.btn:hover{filter:brightness(.94)}.app-header{background:var(--wa-green-dark);color:#fff;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}.app-header-left{display:flex;align-items:center;gap:10px;min-width:0}.wa-logo{color:#fff;display:flex}.wa-logo-lg{color:var(--wa-green);display:inline-flex}.brand{font-weight:600;letter-spacing:.3px}.header-name{font-weight:600;font-size:14px}.header-sub{font-size:11px;opacity:.85}.icon-btn{background:none;border:none;color:#fff;cursor:pointer;padding:4px;display:flex}.refresh-btn{display:inline-flex;align-items:center;gap:6px;background:#ffffff1f;color:#fff;border:none;border-radius:8px;padding:7px 12px;font-size:12px;font-weight:500;cursor:pointer}.refresh-btn:disabled{opacity:.6;cursor:default}.refresh-btn:not(:disabled):hover{background:#fff3}.conv-list{width:100%;max-width:380px;min-width:0;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--border)}.search-box{position:relative;padding:10px;border-bottom:1px solid var(--border);background:#f0f2f5}.search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.search-input{width:100%;height:38px;padding:0 12px 0 40px;border-radius:10px;border:1px solid transparent;outline:none;font-size:13.5px;background:#fff}.search-input:focus{border-color:var(--wa-green)}.conv-scroll{flex:1;overflow-y:auto}.conv-row{width:100%;display:flex;gap:12px;padding:12px 14px;border:none;border-bottom:1px solid #f0f2f5;background:transparent;cursor:pointer;text-align:left;font:inherit;color:inherit}.conv-row:hover{background:#f5f6f6}.conv-row.active{background:#f0f2f5}.avatar{border-radius:10px;background:linear-gradient(135deg,var(--wa-green),var(--wa-green-dark));color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.conv-mid{flex:1;min-width:0}.conv-top{display:flex;justify-content:space-between;gap:8px}.conv-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.conv-time{font-size:11px;color:var(--text-secondary);flex-shrink:0}.conv-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:3px;gap:8px}.conv-preview{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--wa-green);color:#fff;font-size:11.5px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.conv-pagination{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-top:1px solid var(--border);background:#fff}.page-btn{border:none;background:transparent;font-size:20px;color:var(--text-secondary);cursor:pointer;padding:2px 10px;border-radius:6px}.page-btn:disabled{opacity:.35;cursor:default}.page-label{font-size:12px;color:var(--text-secondary)}.chat-pane{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--wa-chat-bg)}.messages{flex:1;overflow-y:auto;padding:18px 16px 10px;display:flex;flex-direction:column;gap:10px;background-color:var(--wa-chat-bg);background-image:var(--wa-doodle);background-repeat:repeat}.msg-row{display:flex}.msg-row.mine{justify-content:flex-end}.msg-row.theirs{justify-content:flex-start}.bubble{max-width:78%;padding:8px 12px;font-size:14px;line-height:1.45;word-wrap:break-word;box-shadow:0 1px 1px #0000000f}.bubble-mine{border-radius:12px 12px 12px 4px;background:var(--mine-bubble)}.bubble-theirs{border-radius:12px 12px 4px;background:#fff}.msg-row.theirs .bubble-mine,.msg-row.mine .bubble-theirs{border-radius:12px}.msg-text{margin:0;white-space:pre-wrap}.msg-meta{display:flex;align-items:center;justify-content:flex-end;gap:5px;margin-top:4px;font-size:10.5px;color:var(--text-secondary)}.tick{font-size:12px;font-weight:700;line-height:1}.tick-read{color:#00b7ff}.tick-error{color:var(--danger)}.tokens{background:#075e541f;color:var(--wa-green-dark);border-radius:4px;padding:1px 5px;font-size:9.5px}.load-more-row{text-align:center;margin-bottom:4px}.load-more{border:1px solid var(--border);background:#fff;color:var(--text-secondary);font-size:12.5px;border-radius:999px;padding:6px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}.load-more:disabled{opacity:.6;cursor:default}.composer{position:relative;border-top:1px solid var(--border);background:#f0f2f5;padding:10px 14px}.send-error{position:absolute;top:-36px;left:12px;right:12px;background:var(--danger);color:#fff;font-size:12px;padding:6px 10px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}.send-error button{background:none;border:none;color:#fff;font-size:16px;cursor:pointer;padding:0 4px;line-height:1}.input-row{display:flex;gap:10px}.msg-input{flex:1;height:42px;border-radius:999px;border:1px solid transparent;outline:none;padding:0 16px;font-size:14px;background:#fff}.msg-input:focus{border-color:var(--wa-green)}.msg-input:disabled{opacity:.6}.send-btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--wa-green);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s ease;flex-shrink:0}.send-btn:disabled{opacity:.5;cursor:default}.send-btn:not(:disabled):hover{transform:scale(1.06)}.sync-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px}.sync-text{display:flex;flex-direction:column;gap:2px;min-width:0}.sync-text strong{font-size:13.5px;color:var(--text-primary)}.sync-text span{font-size:12.5px;color:var(--text-secondary)}.sync-text .sync-err{color:var(--danger);font-weight:600}.sync-btn{display:inline-flex;align-items:center;gap:6px;background:var(--wa-green);color:#fff;border:none;font-weight:600;font-size:13px;border-radius:999px;padding:8px 16px;cursor:pointer;flex-shrink:0}.sync-btn:disabled{opacity:.6;cursor:default}.sync-slim{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff6dbeb;border:1px solid #e6d9a8;border-radius:10px;padding:7px 12px;margin:0 0 8px;font-size:12px;color:var(--text-secondary)}.sync-slim span{min-width:0}.sync-btn-slim{padding:5px 12px;font-size:12px}.placeholder{padding:32px 20px;text-align:center;color:var(--text-secondary);font-size:13.5px}.placeholder.full{flex:1;display:flex;align-items:center;justify-content:center}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.chat-error-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px;text-align:center}.chat-error-screen h2{color:var(--wa-green-dark);margin-bottom:6px}.chat-error-screen p{color:var(--text-secondary);max-width:420px}@media(max-width:767px){.conv-list{max-width:none;width:100%;border-right:none}}@media(min-width:768px){.conv-list{width:380px}}