:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-primary:#0a0e1a;--bg-secondary:#111827;--bg-tertiary:#1f2937;--border-color:#374151;--text-primary:#f9fafb;--text-secondary:#9ca3af;--text-muted:#6b7280;--accent-primary:#6366f1;--accent-hover:#4f46e5;--accent-secondary:#8b5cf6;--success:#10b981;--warning:#f59e0b;--error:#ef4444;--error-bg:#ef44441a;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow:hidden}h1,h2,h3{letter-spacing:-.025em;font-weight:600}h1{font-size:1.5rem;font-weight:700}h2{font-size:1.25rem}p{line-height:1.6}code{color:#a78bfa;word-break:break-all;background:#a78bfa1a;border-radius:4px;padding:2px 6px;font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:.875rem}select{border:1px solid var(--border-color);background:var(--bg-tertiary);width:100%;color:var(--text-primary);border-radius:var(--radius-md);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-position:right 1rem center;background-repeat:no-repeat;padding:.75rem 2.5rem .75rem 1rem;font-family:inherit;font-size:.95rem;transition:all .2s}select:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #6366f133}select:disabled{opacity:.5;cursor:not-allowed}select option{background:var(--bg-tertiary);color:var(--text-primary);padding:.5rem}button{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));color:#fff;cursor:pointer;box-shadow:var(--shadow-md);border:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-family:inherit;font-size:.9375rem;font-weight:500;transition:all .2s;display:inline-flex}button:hover:not(:disabled){background:linear-gradient(135deg, var(--accent-hover), var(--accent-primary));box-shadow:var(--shadow-lg);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button.outline{border:1px solid var(--border-color);box-shadow:none;background:0 0}button.outline:hover:not(:disabled){background:var(--bg-tertiary);border-color:var(--text-secondary)}button.danger{background:linear-gradient(135deg,#dc2626,#ef4444)}button.danger:hover:not(:disabled){background:linear-gradient(135deg,#b91c1c,#dc2626)}button.full-width{width:100%}input{border:1px solid var(--border-color);background:var(--bg-tertiary);width:100%;color:var(--text-primary);border-radius:var(--radius-md);padding:.75rem 1rem;font-family:inherit;font-size:.95rem;transition:all .2s}input::placeholder{color:var(--text-muted)}input:focus{border-color:var(--accent-primary);outline:none;box-shadow:0 0 0 3px #6366f133}label{color:var(--text-secondary);margin-bottom:.375rem;font-size:.875rem;font-weight:500;display:block}.login-page{background:linear-gradient(135deg, var(--bg-primary) 0%, #1a1f3a 100%);place-items:center;min-height:100vh;padding:1.5rem;display:grid}.login-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-xl);width:100%;max-width:420px;box-shadow:var(--shadow-lg);gap:1.5rem;padding:2.5rem;display:grid}.login-card h1{text-align:center;background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;margin-bottom:.5rem;font-size:1.75rem}.login-card>p{text-align:center;color:var(--text-muted);font-size:.9375rem}.login-card button{width:100%;margin-top:.5rem;padding:.875rem;font-size:1rem}.app{grid-template-columns:380px 1fr;min-height:100vh;display:grid}.sidebar{background:var(--bg-secondary);border-right:1px solid var(--border-color);flex-direction:column;gap:1rem;height:100vh;padding:1.25rem;display:flex;overflow:hidden}.brand{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding-bottom:.75rem;display:flex}.brand h1{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.25rem}.brand button{background:var(--bg-tertiary);border:1px solid var(--border-color);box-shadow:none;padding:.5rem .875rem;font-size:.875rem}.brand button:hover{background:var(--error);border-color:var(--error)}.status-bar{background:var(--bg-tertiary);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:.75rem;padding:.75rem;font-size:.8125rem;display:grid}.status-bar .label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem}.status-bar .value{font-weight:600}.status-bar .value.connected,.status-bar .value.ready{color:var(--success)}.status-bar .value.error,.status-bar .value.unknown{color:var(--error)}.panel{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-lg);flex-direction:column;flex:1;gap:.875rem;padding:1rem;display:flex;overflow:hidden}.panel-header{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.panel-header h2{color:var(--text-primary);font-size:1rem}.panel-header button{background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:none;padding:.5rem .75rem;font-size:.875rem}.panel-header button:hover{background:var(--accent-primary);border-color:var(--accent-primary)}.qr-panel{text-align:left}.qr-panel p{color:var(--text-muted);font-size:.875rem;line-height:1.5}.qr-panel label{margin-top:.5rem}.qr{border-radius:var(--radius-lg);width:200px;height:200px;box-shadow:var(--shadow-lg);background:#fff;margin:0 auto;padding:12px}.pin{border:2px dashed var(--warning);color:var(--warning);border-radius:var(--radius-md);letter-spacing:.15em;text-align:center;background:linear-gradient(135deg,#f59e0b33,#f59e0b1a);padding:.875rem 1.25rem;font-size:1.25rem;font-weight:700;animation:2s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.add-account-form{gap:.5rem;margin-top:.5rem;display:grid}.add-account-form button{padding:.625rem 1rem;font-size:.875rem}.add-friend-form{gap:.5rem;display:flex}.add-friend-form input{flex:1}.add-friend-form button{white-space:nowrap;padding:0 1rem}.chat-list{flex-direction:column;flex:1;gap:.5rem;padding-right:.25rem;display:flex;overflow-y:auto}.chat-list button{text-align:left;background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:none;flex-direction:column;justify-content:flex-start;gap:.375rem;padding:.875rem 1rem;font-size:.9375rem;display:flex}.chat-list button:hover:not(.active){background:var(--bg-tertiary);border-color:var(--text-secondary);box-shadow:var(--shadow-md);transform:none}.chat-list button.active{border-color:var(--accent-primary);background:linear-gradient(135deg,#6366f126,#8b5cf626);box-shadow:0 0 0 2px #6366f14d}.chat-list button span{color:var(--text-primary);font-weight:500}.chat-list button code{color:var(--text-muted);opacity:.8;font-size:.75rem}.chat-window{background:var(--bg-primary);flex-direction:column;gap:0;height:100vh;display:flex}.chat-window header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.chat-window header h2{color:var(--text-primary);font-size:1.125rem}.chat-window header code{color:var(--text-muted);font-size:.8125rem}.chat-empty{color:var(--text-muted);flex:1;justify-content:center;align-items:center;font-size:1.125rem;display:flex}.chat-empty p{align-items:center;gap:.5rem;display:flex}.chat-empty svg{opacity:.5;width:48px;height:48px}.messages{scroll-behavior:smooth;flex-direction:column;flex:1;gap:.75rem;padding:1.5rem;display:flex;overflow-y:auto}.loading-more{text-align:center;color:var(--text-muted);padding:.75rem;font-size:.875rem}.loading-more:after{content:"...";animation:1.5s steps(4,end) infinite dots}@keyframes dots{0%,20%{content:""}40%{content:"."}60%{content:".."}80%,to{content:"..."}}.bubble{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);max-width:85%;box-shadow:var(--shadow-sm);align-self:flex-start;padding:.875rem 1rem}.bubble.owned{background:linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));border:none;align-self:flex-end}.bubble.owned .bubble-meta,.bubble.owned code{color:#ffffffe6}.bubble-meta{color:var(--text-muted);justify-content:space-between;gap:1rem;margin-bottom:.5rem;font-size:.75rem;display:flex}.bubble-meta code{font-size:.6875rem}.bubble-content{word-wrap:break-word;line-height:1.6}.bubble-content p{white-space:pre-wrap;word-break:break-word;margin:0}.send-form{background:var(--bg-secondary);border-top:1px solid var(--border-color);gap:.75rem;padding:1rem 1.5rem;display:flex}.send-form input{flex:1}.send-form button{white-space:nowrap;padding:.875rem 1.5rem}.error{background:var(--error-bg);border:1px solid var(--error);border-radius:var(--radius-md);color:#fecaca;align-items:center;gap:.5rem;padding:.875rem;font-size:.875rem;display:flex}.error:before{content:"⚠️"}.status{background:var(--bg-tertiary);border-radius:var(--radius-md);align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.875rem;display:flex}.status:before{content:"";background:var(--text-muted);border-radius:50%;width:8px;height:8px;animation:2s ease-in-out infinite blink}.status.ready,.status.connected:before{background:var(--success)}.status.error:before{background:var(--error)}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.muted{color:var(--text-muted);font-size:.8125rem;line-height:1.5}.row{align-items:center;gap:.75rem;display:flex}.between{justify-content:space-between}.center{text-align:center}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--bg-tertiary);background-clip:padding-box;border:2px solid #0000;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-color);background-clip:padding-box;border:2px solid #0000}@media (width<=1024px){.app{grid-template-columns:340px 1fr}.sidebar{padding:1rem}.chat-window header{padding:.875rem 1.25rem}.messages{padding:1rem}.send-form{padding:.875rem 1.25rem}}@media (width<=768px){.app{grid-template-columns:1fr}.sidebar{height:auto;max-height:50vh}.chat-window{height:50vh}.chat-window header{padding:.75rem 1rem}.messages{padding:.75rem}.send-form{padding:.75rem 1rem}.bubble{max-width:90%}.login-card{padding:2rem}}.status-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:20px;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;display:inline-flex}.status-badge-success{color:#10b981;background:#10b98126;border:1px solid #10b9814d}.status-badge-warning{color:#f59e0b;background:#f59e0b26;border:1px solid #f59e0b4d}.status-badge-error{color:#ef4444;background:#ef444426;border:1px solid #ef44444d}.status-badge-info{color:#6366f1;background:#6366f126;border:1px solid #6366f14d}.status-badge-muted{color:#6b7280;background:#6b728026;border:1px solid #6b72804d}.logo{flex-direction:column;align-items:center;gap:.75rem;display:flex}.logo svg{color:var(--accent-primary);animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.account-select-row{align-items:stretch;gap:.5rem;margin-bottom:.75rem;display:flex}.account-select-row .account-selector{flex:1;min-width:0;margin-bottom:0}.delete-account-btn{flex-shrink:0;padding-inline:.8rem}.brand-actions{align-items:center;gap:.5rem;display:flex}.relay-panel select,.relay-panel input[type=text],.relay-panel input:not([type]){width:100%}.check-row{align-items:flex-start;gap:.5rem;margin:.5rem 0;font-size:.9rem;display:flex}.check-row input[type=checkbox]{width:auto;margin-top:.2rem}.relay-help{margin:.6rem 0;font-size:.82rem;line-height:1.4}.relay-groups{border:1px solid var(--border-color);border-radius:.75rem;max-height:220px;margin-top:.6rem;padding:.4rem;overflow:auto}.relay-group-row span{flex-direction:column;gap:.2rem;min-width:0;display:flex}.relay-group-row code{white-space:nowrap;text-overflow:ellipsis;max-width:240px;overflow:hidden}.relay-actions{gap:.5rem;margin-top:.75rem;display:flex}