@layer components{.wa{--wa-primary-green:#00a884;--wa-bg-app:#f0f2f5;--wa-bg-surface:#fff;--wa-text-primary:#111b21;--wa-text-secondary:#667781;--wa-border-light:#e9edef;--wa-hover:#f5f6f6;--wa-tag-warning-bg:#fceee5;--wa-tag-warning-text:#855322;--wa-tag-neutral-bg:#f0f2f5;--wa-tag-neutral-text:#54656f;--wa-space-1:4px;--wa-space-2:8px;--wa-space-3:12px;--wa-space-4:16px;--wa-space-6:24px;--wa-space-8:32px;--wa-space-12:48px;color:var(--wa-text-primary)}.wa-rail{align-items:center;gap:var(--wa-space-1);width:60px;height:100%;padding:var(--wa-space-4) var(--wa-space-3);scrollbar-width:none;background:var(--wa-bg-app);border-right:1px solid var(--wa-border-light);flex-direction:column;flex-shrink:0;display:flex;position:sticky;top:0;overflow-y:auto}.wa-rail-divider{width:24px;height:1px;margin:var(--wa-space-2) 0;background:var(--wa-border-light);flex-shrink:0}.wa-rail-item{width:40px;height:40px;color:var(--wa-text-secondary);cursor:pointer;border-radius:50%;flex-shrink:0;place-items:center;transition:background-color .12s;display:grid;position:relative}.wa-rail-item:hover{background:var(--wa-hover)}.wa-rail-item[aria-current=page]{color:var(--wa-text-primary);background:var(--wa-border-light)}.wa-badge{min-width:18px;height:18px;padding:0 var(--wa-space-1);background:var(--wa-primary-green);color:#fff;border-radius:9999px;place-items:center;font-size:10px;font-weight:700;line-height:1;display:grid;position:absolute;top:0;right:-2px}.wa-list{background:var(--wa-bg-surface);border-right:1px solid var(--wa-border-light);flex-direction:column;width:100%;min-height:0;display:flex;overflow-y:auto}@media (min-width:768px){.wa-list{flex-shrink:0;width:clamp(350px,30vw,400px);min-width:350px}}.wa-list-header{z-index:1;background:var(--wa-bg-surface);padding:var(--wa-space-3) var(--wa-space-4) var(--wa-space-2);position:sticky;top:0}.wa-icon-button{width:40px;height:40px;color:var(--wa-text-secondary);border-radius:50%;place-items:center;display:grid}.wa-icon-button:hover{background:var(--wa-hover)}.wa-fab{color:#fff;background:#000;border-radius:50%;place-items:center;width:40px;height:40px;display:grid;box-shadow:0 2px 6px #00000026}.wa-fab:hover{background:var(--wa-text-primary)}.wa-search{align-items:center;gap:var(--wa-space-3);padding:var(--wa-space-2) var(--wa-space-3);background:var(--wa-bg-app);color:var(--wa-text-secondary);border-radius:8px;display:flex}.wa-search input{min-width:0;color:var(--wa-text-primary);background:0 0;outline:none;flex:1;font-size:14px}.wa-search input::placeholder{color:var(--wa-text-secondary)}.wa-chips{gap:var(--wa-space-2);margin-top:var(--wa-space-3);scrollbar-width:none;display:flex;overflow-x:auto}.wa-chip{padding:6px var(--wa-space-3);border:1px solid var(--wa-border-light);color:var(--wa-text-secondary);white-space:nowrap;background:0 0;border-radius:16px;flex-shrink:0;font-size:14px}.wa-chip:hover{background:var(--wa-bg-app)}.wa-chip[aria-pressed=true]{background:var(--wa-primary-green);border-color:var(--wa-primary-green);color:#fff}.wa-card{align-items:center;gap:var(--wa-space-3);width:100%;min-height:72px;padding:var(--wa-space-3) var(--wa-space-4);text-align:left;background:var(--wa-bg-surface);display:flex}.wa-card:hover,.wa-card[aria-current=true]{background:var(--wa-bg-app)}.wa-avatar{color:#54656f;background:#dfe5e7;border-radius:50%;flex-shrink:0;place-items:center;width:48px;height:48px;font-size:16px;font-weight:600;display:grid}.wa-card-body{min-width:0;padding-bottom:var(--wa-space-1);border-bottom:1px solid var(--wa-border-light);flex:1}.wa-card-title{color:var(--wa-text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:16px;font-weight:500;overflow:hidden}.wa-card-preview{color:var(--wa-text-secondary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;overflow:hidden}.wa-card-time{color:var(--wa-text-secondary);flex-shrink:0;font-size:12px}.wa-card-time[data-unread=true]{color:var(--wa-primary-green);font-weight:500}.wa-count{background:var(--wa-primary-green);color:#fff;border-radius:9999px;flex-shrink:0;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:12px;font-weight:600;display:grid}.wa-tag{letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;max-width:100%;padding:2px 6px;font-size:10px;font-weight:600;display:inline-block;overflow:hidden}.wa-tag-warning{background:var(--wa-tag-warning-bg);color:var(--wa-tag-warning-text)}.wa-tag-neutral{background:var(--wa-tag-neutral-bg);color:var(--wa-tag-neutral-text)}.wa-main{background:var(--wa-bg-app);flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}.wa-empty{padding:var(--wa-space-6);flex:1;justify-content:center;align-items:center;display:flex}.wa-empty-card{max-width:600px;padding:var(--wa-space-12);background:var(--wa-bg-surface);text-align:center;border-radius:12px;margin:auto;box-shadow:0 4px 12px #0000000d}.wa-actions{justify-content:center;gap:var(--wa-space-8);margin-top:var(--wa-space-8);flex-wrap:wrap;display:flex}.wa-action{align-items:center;gap:var(--wa-space-2);color:var(--wa-text-secondary);flex-direction:column;font-size:13px;display:flex}.wa-action-icon{background:var(--wa-bg-app);width:48px;height:48px;color:var(--wa-text-primary);border-radius:50%;place-items:center;transition:background-color .12s;display:grid}.wa-action:hover .wa-action-icon{background:var(--wa-border-light)}.wa-chat-header{align-items:center;gap:var(--wa-space-3);padding:var(--wa-space-2) var(--wa-space-4);background:var(--wa-bg-app);border-bottom:1px solid var(--wa-border-light);min-height:60px;display:flex}.wa-chat-header .wa-avatar{width:40px;height:40px;font-size:14px}}