:root{--bg: #f5f6f8;--surface: #ffffff;--border: #e2e4e9;--text: #1c1e21;--text-muted: #6b7280;--accent: #2563eb;--accent-contrast: #ffffff;--danger: #dc2626;--warning: #d97706;--success: #16a34a;--tabbar-height: 58px;--tap-min: 44px;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}@supports (height: 100dvh){html,body,#root{height:100dvh}}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{flex-shrink:0;background:var(--surface);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app-header-row{display:flex;align-items:center;gap:20px;padding:12px 20px}.app-title{font-weight:700;font-size:1.1rem;letter-spacing:-.01em}.app-nav{display:flex;gap:16px;flex:1}.app-nav a{display:inline-flex;align-items:center;color:var(--text-muted);text-decoration:none;font-weight:500;padding:10px 4px;min-height:var(--tap-min);border-bottom:2px solid transparent}.app-nav a.active{color:var(--accent);border-bottom-color:var(--accent)}.gateway-filter-select{padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);font-size:.85rem;max-width:220px;min-height:var(--tap-min)}.app-header-filter-row{padding:0 16px 12px}.app-header-filter-row .gateway-filter-select{width:100%;max-width:none}.app-header-mobile-only{display:none}.app-status{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--text-muted)}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);padding:0;margin:0 -8px 0 0;border:none;background:none;color:var(--text-muted);cursor:pointer;border-radius:999px}.icon-button:hover,.icon-button:active{background:var(--bg);color:var(--text)}.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}.app-tabbar{display:none}.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:1rem;min-height:var(--tap-min)}.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)}.back-button{display:none;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);margin:0 -8px 0 -10px;border-radius:999px;color:var(--text);flex-shrink:0}.back-button:hover,.back-button:active{background:var(--bg)}.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:1rem;min-height:var(--tap-min)}.composer-send{padding:8px 18px;min-height:var(--tap-min);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;min-height:var(--tap-min);font-size:1rem}.contact-form button{padding:8px 16px;min-height:var(--tap-min);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;min-height:var(--tap-min);font-size:1rem}.gateway-form button[type=submit]{padding:8px 16px;min-height:var(--tap-min);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-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.gateway-table{width:100%;min-width:640px;border-collapse:collapse;font-size:.9rem}.gateway-table th,.gateway-table td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--border);white-space:nowrap}@media(max-width:640px){.app-header-row{gap:10px;padding:10px 12px}.app-nav,.user-name{display:none}.app-status{margin-left:auto}.app-header-desktop-only{display:none}.app-header-mobile-only{display:inline-flex}.app-header-filter-row{display:block}.conversation-preview{max-width:45vw}.message-bubble{max-width:88%}.back-button{display:inline-flex}.app-tabbar{display:flex;flex-shrink:0;border-top:1px solid var(--border);background:var(--surface);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}.app-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar-height);padding:6px 4px;color:var(--text-muted);text-decoration:none;font-size:.72rem;font-weight:500}.app-tabbar a.active{color:var(--accent)}.conversations-toolbar,.contacts-page,.gateways-page{padding:12px}.contact-form,.gateway-form{flex-direction:column;align-items:stretch}.contact-form input,.gateway-form input,.gateway-form select{width:100%;min-width:0}}