*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root,[data-theme=dark]{--bg:#1a1b1e;--bg-panel:#25262b;--bg-input:#2c2e33;--bg-hover:#373a40;--border:#373a40;--text:#c1c2c5;--text-dim:#909296;--text-muted:#5c5f66;--accent:#4c9aff;--accent-hover:#6eb4ff;--accent-bg:#4c9aff1f;--green:#51cf66;--green-bg:#51cf661f;--yellow:#fab005;--yellow-bg:#fab0051f;--red:#ff6b6b;--red-bg:#ff6b6b1f;--bubble-out:#2b5278;--bubble-in:#2c2e33;--bubble-out-text:#e0e6f0;--bubble-in-text:#c1c2c5;--shadow:0 1px 3px #00000059;--radius:8px;--radius-lg:16px;--font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", "Cascadia Code", monospace;--transition:.15s ease}[data-theme=light]{--bg:#fff;--bg-panel:#f8f9fa;--bg-input:#f1f3f5;--bg-hover:#e9ecef;--border:#dee2e6;--text:#212529;--text-dim:#6c757d;--text-muted:#adb5bd;--accent:#339af0;--accent-hover:#1c7ed6;--accent-bg:#339af01a;--green:#2f9e44;--green-bg:#2f9e441a;--yellow:#e67700;--yellow-bg:#e677001a;--red:#e03131;--red-bg:#e031311a;--bubble-out:#d0ebff;--bubble-in:#f1f3f5;--bubble-out-text:#1a3350;--bubble-in-text:#212529;--shadow:0 1px 3px #00000014}html,body{height:100%}body{height:100vh;height:100dvh;font-family:var(--font);background:var(--bg);color:var(--text);transition:background var(--transition), color var(--transition);touch-action:manipulation;font-size:14px;overflow:hidden}#app{flex-direction:column;height:100%;display:flex}#topbar{background:var(--bg-panel);border-bottom:1px solid var(--border);transition:background var(--transition);flex-shrink:0;align-items:center;gap:10px;padding:8px 16px;display:flex}#menu-btn{flex-shrink:0;display:none}#topbar .app-title{letter-spacing:.02em;color:var(--text-dim);font-size:13px;font-weight:700}.my-uuid{font-family:var(--font-mono);color:var(--text);-webkit-user-select:all;user-select:all;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;min-width:0;transition:color var(--transition);flex-shrink:1;font-size:13px;font-weight:600;overflow:hidden}.my-uuid:hover{color:var(--accent)}.my-uuid.copied{color:var(--green)}#topbar .conn-pill{border-radius:10px;align-items:center;gap:5px;padding:2px 10px;font-size:11px;font-weight:600;display:inline-flex}#topbar .conn-pill:before{content:"";border-radius:50%;width:6px;height:6px}#topbar .conn-pill.online{background:var(--green-bg);color:var(--green)}#topbar .conn-pill.online:before{background:var(--green)}#topbar .conn-pill.connecting{background:var(--yellow-bg);color:var(--yellow)}#topbar .conn-pill.connecting:before{background:var(--yellow);animation:.9s infinite pulse}#topbar .conn-pill.offline{background:var(--red-bg);color:var(--red)}#topbar .conn-pill.offline:before{background:var(--red)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}#topbar .meta{color:var(--text-dim);white-space:nowrap;gap:14px;font-size:12px;display:flex}#topbar .spacer{flex:1}#topbar .icon-btn{cursor:pointer;opacity:.55;color:var(--text-dim);transition:opacity var(--transition), background var(--transition);background:0 0;border:none;border-radius:4px;padding:2px 4px;font-size:14px;line-height:1}#topbar .icon-btn:hover{background:var(--bg-hover);color:var(--text);opacity:1}#topbar .debug-btn{opacity:.3}#topbar .debug-btn:hover{color:var(--text-dim);opacity:.7;background:0 0}#topbar .debug-btn.active{color:var(--accent);opacity:.8}#body{flex:1;min-height:0;display:flex}#app-rail{background:var(--bg-panel);border-right:1px solid var(--border);width:56px;transition:background var(--transition);flex-direction:column;flex-shrink:0;align-items:center;gap:4px;padding:8px 0;display:flex}#app-rail .rail-btn{border-radius:var(--radius);width:44px;height:44px;color:var(--text-dim);cursor:pointer;transition:background var(--transition), color var(--transition), border-color var(--transition);background:0 0;border:1px solid #0000;justify-content:center;align-items:center;display:flex}#app-rail .rail-btn:hover{background:var(--bg-hover);color:var(--text)}#app-rail .rail-btn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}#app-rail .rail-icon{display:flex}#main-area{flex:1;min-height:0;display:flex;overflow:hidden}#chat-app{flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}#hb-app{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}#hb-body{flex:1;min-height:0;display:flex;overflow:hidden}#sidebar{background:var(--bg-panel);border-right:1px solid var(--border);width:280px;min-width:220px;transition:background var(--transition);flex-direction:column;display:flex}#sidebar .sidebar-header{text-transform:uppercase;letter-spacing:.07em;color:var(--text-dim);justify-content:space-between;align-items:center;padding:10px 14px 0;font-size:11px;font-weight:700;display:flex}#sidebar .add-btn{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;font:inherit;transition:background var(--transition);border:none;padding:3px 10px;font-size:11px;font-weight:600}#sidebar .add-btn:hover{background:var(--accent-hover)}#peer-list{flex:1;padding:8px;overflow-y:auto}.peer-row{border-radius:var(--radius);cursor:pointer;transition:background var(--transition);align-items:center;gap:8px;padding:7px 10px;display:flex}.peer-row:hover{background:var(--bg-hover)}.peer-row.active{background:var(--accent-bg)}.peer-row .status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.peer-row .status-dot.on{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}.peer-row .status-dot.pending{background:var(--yellow);animation:.9s infinite pulse}.peer-row .status-dot.lost{background:var(--red)}.peer-row .status-dot.off{background:var(--text-muted)}.peer-row .info{flex:1;min-width:0}.peer-row .info .name{white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.peer-row .info .sub{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;font-size:11px;overflow:hidden}.peer-row .unread{color:#fff;background:var(--accent);border-radius:10px;padding:1px 7px;font-size:11px;font-weight:700;display:none}.peer-row .unread.show{display:inline-block}.peer-row .close-btn{cursor:pointer;color:var(--text-dim);background:0 0;border:none;padding:0 4px;font-size:18px;line-height:1;display:none}.peer-row:hover .close-btn{display:inline-block}.peer-row .close-btn:hover{color:var(--red)}.empty-hint{color:var(--text-muted);text-align:center;padding:16px;font-size:12px}#chat-panel{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}#chat-header{border-bottom:1px solid var(--border);background:var(--bg-panel);transition:background var(--transition);flex-shrink:0;align-items:center;gap:10px;padding:10px 16px;display:flex}#chat-header .name{font-size:14px;font-weight:600}#chat-header .sub{color:var(--text-dim);font-size:11px}#chat-msgs{flex-direction:column;flex:1;gap:6px;padding:16px 20px;display:flex;overflow-y:auto}#chat-msgs .placeholder{opacity:.15;flex:1;justify-content:center;align-items:center;display:flex}#chat-msgs .placeholder svg{width:52px;height:52px;stroke:var(--text)}.msg-group{gap:10px;max-width:75%;display:flex}.msg-group.in{align-self:flex-start}.msg-group.out{align-self:flex-end}.msg-bubble{border-radius:var(--radius-lg);white-space:pre-wrap;word-break:break-word;transition:background var(--transition), color var(--transition);padding:8px 14px;font-size:13.5px;line-height:1.45}.msg-group.in .msg-bubble{background:var(--bubble-in);color:var(--bubble-in-text);border-bottom-left-radius:4px}.msg-group.out .msg-bubble{background:var(--bubble-out);color:var(--bubble-out-text);border-bottom-right-radius:4px}.msg-group.out.pending .msg-bubble{opacity:.7}.msg-group.out.failed .msg-bubble{background:var(--red-bg);color:var(--red)}.msg-group .meta-row{align-items:center;gap:6px;margin-top:3px;padding:0 4px;display:flex}.msg-group.in .meta-row{justify-content:flex-start}.msg-group.out .meta-row{justify-content:flex-end}.msg-group .ts{color:var(--text-dim);font-size:10.5px}.msg-group .status-icon{font-size:12px}.msg-group .status-icon.ok{color:var(--green)}.msg-group .status-icon.clock{border:1.5px solid var(--yellow);vertical-align:middle;border-top-color:#0000;border-radius:50%;width:10px;height:10px;animation:.7s linear infinite spin;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}.msg-group .status-icon.fail{color:var(--red)}#hb-panel{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex}#hb-header{border-bottom:1px solid var(--border);background:var(--bg-panel);transition:background var(--transition);flex-shrink:0;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;display:flex}#hb-header .name{font-size:14px;font-weight:600;font-family:var(--font-mono)}#hb-header .hb-title{flex:1;min-width:0}#hb-header .sub{color:var(--text-dim);white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:11px;overflow:hidden}#hb-header .hb-actions{align-items:center;gap:10px;display:flex}#hb-header .hb-actions .ghost{border:1px solid var(--border);color:var(--text);border-radius:var(--radius);font:inherit;cursor:pointer;transition:background var(--transition);background:0 0;padding:4px 12px;font-size:12px;font-weight:600}#hb-header .hb-actions .ghost:hover{background:var(--bg-hover)}#hb-header .autofollow{color:var(--text-dim);align-items:center;gap:5px;font-size:12px;display:inline-flex}#hb-log{font-family:var(--font-mono);color:var(--text-dim);flex:1;padding:12px 16px;font-size:12px;line-height:1.7;overflow:auto}#hb-log .log-line{white-space:pre}#hb-log .log-ts{color:var(--text-muted);margin-right:2px}#hb-log .placeholder{opacity:.25;justify-content:center;align-items:center;height:100%;font-size:13px;display:flex}#statusbar{background:var(--bg-panel);border-top:1px solid var(--border);color:var(--text-dim);transition:background var(--transition);flex-shrink:0;align-items:center;gap:12px;padding:5px 16px;font-size:11.5px;display:flex}#statusbar .spacer{flex:1}#modal-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#modal-overlay.show{display:flex}#modal-box{background:var(--bg-panel);border:1px solid var(--border);width:420px;max-width:90vw;box-shadow:var(--shadow);transition:background var(--transition);border-radius:12px;padding:24px}#modal-box h2{margin-bottom:16px;font-size:15px;font-weight:600}#modal-box input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);width:100%;height:40px;color:var(--text);font:inherit;font-family:var(--font-mono);transition:border-color var(--transition);outline:none;padding:0 12px;font-size:13px}#modal-box input:focus{border-color:var(--accent)}#modal-box .modal-actions{justify-content:flex-end;gap:8px;margin-top:14px;display:flex}#modal-box .modal-actions button{border-radius:var(--radius);height:34px;font:inherit;cursor:pointer;transition:background var(--transition);padding:0 18px;font-size:13px;font-weight:600}#modal-box .btn-cancel{border:1px solid var(--border);color:var(--text);background:0 0}#modal-box .btn-cancel:hover{background:var(--bg-hover)}#modal-box .btn-dial{background:var(--accent);color:#fff;border:none}#modal-box .btn-dial:hover{background:var(--accent-hover)}#input-area{background:var(--bg-panel);border-top:1px solid var(--border);transition:background var(--transition);flex-shrink:0;padding:10px 20px}#input-area .input-row{gap:8px;display:flex}#input-area .input-row input{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);min-width:0;height:40px;color:var(--text);font:inherit;transition:border-color var(--transition), background var(--transition);outline:none;flex:1;padding:0 14px}#input-area .input-row input:focus{border-color:var(--accent)}#input-area .input-row button{background:var(--accent);color:#fff;border-radius:var(--radius);cursor:pointer;min-width:64px;height:40px;font:inherit;transition:background var(--transition);border:none;padding:0 20px;font-size:13px;font-weight:600}#input-area .input-row button:hover{background:var(--accent-hover)}#log-overlay{z-index:100;background:#00000080;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#log-overlay.show{display:flex}#log-box{background:var(--bg-panel);border:1px solid var(--border);width:640px;max-width:92vw;max-height:82vh;box-shadow:var(--shadow);min-height:0;transition:background var(--transition);border-radius:12px;flex-direction:column;padding:20px 20px 16px;display:flex}#log-box .log-header{justify-content:space-between;align-items:center;display:flex}#log-box h2{font-size:15px;font-weight:600}#log-box .log-actions{gap:8px;display:flex}#log-box .log-actions button{border-radius:var(--radius);height:32px;font:inherit;cursor:pointer;transition:background var(--transition);padding:0 16px;font-size:13px;font-weight:600}#log-view{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius);min-height:0;font-family:var(--font-mono);color:var(--text-dim);transition:background var(--transition);flex:1;margin-top:14px;padding:10px 12px;font-size:11.5px;line-height:1.6;overflow-y:auto}#log-view .log-line{white-space:pre-wrap;word-break:break-word}#drawer-backdrop{z-index:40;background:#00000080;display:none;position:fixed;inset:0}#drawer-backdrop.show{display:block}#toast{left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:100;background:var(--bg-panel);color:var(--text);border:1px solid var(--border);white-space:nowrap;transition:background var(--transition);border-radius:10px;padding:8px 16px;font-size:13px;font-weight:600;position:fixed;transform:translate(-50%);box-shadow:0 4px 16px #00000040}.toast-enter-active,.toast-leave-active{transition:opacity .2s,transform .2s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%)translateY(8px)}@media (max-width:640px){#topbar{padding:calc(8px + env(safe-area-inset-top)) 12px 8px;gap:6px}#topbar .conn-pill{text-overflow:ellipsis;white-space:nowrap;max-width:42vw;overflow:hidden}#topbar .icon-btn{padding:4px}#menu-btn{flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:inline-flex}#body{flex-direction:column}#main-area{order:1}#app-rail{border-right:none;border-top:1px solid var(--border);width:100%;height:auto;padding:0 0 env(safe-area-inset-bottom);flex-direction:row;order:2;justify-content:space-around;align-items:stretch}#app-rail .rail-btn{border:0;border-top:2px solid #0000;border-radius:0;flex:1;width:auto;height:auto;min-height:52px}#app-rail .rail-btn.active{border-top-color:var(--accent)}#sidebar{z-index:50;width:280px;min-width:220px;max-width:85vw;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);box-shadow:none;transition:transform .22s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}#sidebar.open{transform:translate(0);box-shadow:2px 0 12px #0006}#chat-panel{width:100%}#chat-header{gap:6px;padding:6px 12px}#hb-header{padding:6px 12px}.peer-row{padding:10px 12px}.peer-row .close-btn{padding:0 6px;font-size:20px;display:inline-block}#input-area{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}#input-area .input-row input{height:44px;font-size:16px}#input-area .input-row button{min-width:72px;height:44px}#modal-box input{font-size:16px}#modal-box .modal-actions button{height:40px}#modal-overlay{padding:calc(env(safe-area-inset-top) + 16px) 16px calc(env(safe-area-inset-bottom) + 16px)}#log-overlay{padding:calc(env(safe-area-inset-top) + 12px) 12px calc(env(safe-area-inset-bottom) + 12px)}.msg-group{max-width:88%}#chat-msgs{padding:12px}}