:root{--bg: #f5f6f8;--surface: #ffffff;--border: #e2e4e9;--text: #1c1e21;--text-muted: #6b7280;--accent: #2563eb;--accent-contrast: #ffffff;--danger: #dc2626;--warning: #d97706;--success: #16a34a;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.splash{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.app-shell{display:flex;flex-direction:column;height:100%}.app-header{display:flex;align-items:center;gap:24px;padding:12px 20px;background:var(--surface);border-bottom:1px solid var(--border)}.app-title{font-weight:700;font-size:1.1rem}.app-nav{display:flex;gap:16px;flex:1}.app-nav a{color:var(--text-muted);text-decoration:none;font-weight:500;padding:6px 4px;border-bottom:2px solid transparent}.app-nav a.active{color:var(--accent);border-bottom-color:var(--accent)}.app-status{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-muted)}.connectivity-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);display:inline-block}.connectivity-dot.connected{background:var(--success)}.link-button{background:none;border:none;color:var(--accent);cursor:pointer;font:inherit;padding:0}.app-main{flex:1;min-height:0;display:flex;overflow:hidden}.conversations-page,.contacts-page,.conversation-view{width:100%;display:flex;flex-direction:column;min-height:0}.conversations-toolbar,.contacts-page{padding:12px 16px}.search-input{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:.95rem}.conversation-list,.contact-list{list-style:none;margin:0;padding:0;overflow-y:auto}.conversation-row,.contact-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text)}.conversation-row:hover,.contact-row:hover{background:var(--bg)}.conversation-name{font-weight:600}.conversation-preview{color:var(--text-muted);font-size:.9rem;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conversation-row-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.8rem;color:var(--text-muted)}.unread-badge{background:var(--accent);color:var(--accent-contrast);border-radius:999px;padding:1px 7px;font-size:.75rem}.send-status{font-size:.75rem;text-transform:uppercase;letter-spacing:.02em}.send-status-failed,.send-status-unknown{color:var(--danger)}.send-status-sent,.send-status-delivered{color:var(--success)}.send-status-pending{color:var(--warning)}.empty-state{padding:24px;text-align:center;color:var(--text-muted)}.error-banner{margin:8px 16px;padding:8px 12px;background:#fee2e2;color:var(--danger);border-radius:8px;font-size:.9rem}.conversation-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;background:var(--surface)}.gateway-badge{font-weight:400;font-size:.78rem;color:var(--text-muted);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:2px 10px}.gateway-badge-warn{color:var(--danger);border-color:var(--danger)}.message-list{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}.message-bubble{max-width:75%;padding:8px 12px;border-radius:14px;line-height:1.35}.message-inbound{align-self:flex-start;background:var(--surface);border:1px solid var(--border)}.message-outbound{align-self:flex-end;background:var(--accent);color:var(--accent-contrast)}.message-outbound .send-status,.message-outbound .message-meta span{color:#ffffffd9}.message-route{font-size:.72rem;color:var(--text-muted);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-outbound .message-route{color:#ffffffbf}.message-meta{display:flex;gap:8px;align-items:center;font-size:.75rem;margin-top:4px;color:var(--text-muted)}.composer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--surface)}.composer-input{flex:1;padding:10px 14px;border-radius:999px;border:1px solid var(--border);font-size:.95rem}.composer-send{padding:8px 18px;border-radius:999px;border:none;background:var(--accent);color:var(--accent-contrast);font-weight:600;cursor:pointer}.composer-send:disabled{opacity:.5;cursor:default}.contact-form{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.contact-form input{padding:8px 12px;border:1px solid var(--border);border-radius:8px;flex:1;min-width:140px}.contact-form button{padding:8px 16px;border-radius:8px;border:none;background:var(--accent);color:var(--accent-contrast);cursor:pointer}.gateways-page{padding:16px;overflow-y:auto;width:100%}.gateways-intro{color:var(--text-muted);font-size:.9rem;max-width:640px;margin:0 0 16px}.gateway-form{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center}.gateway-form input,.gateway-form select{padding:8px 12px;border:1px solid var(--border);border-radius:8px;min-width:120px}.gateway-form button[type=submit]{padding:8px 16px;border-radius:8px;border:none;background:var(--accent);color:var(--accent-contrast);cursor:pointer}.checkbox-label{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--text-muted)}.gateway-table{width:100%;border-collapse:collapse;font-size:.9rem}.gateway-table th,.gateway-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border)}@media(max-width:640px){.app-header{gap:12px;padding:10px 12px}.user-name{display:none}.conversation-preview{max-width:45vw}.message-bubble{max-width:88%}}