:root{color-scheme:dark;--bg: #0b1020;--panel: #151b30;--accent: #5b8cff;--text: #e8ecf6;--muted: #93a0c0}*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif;background:var(--bg);color:var(--text)}#app{max-width:720px;margin:0 auto;padding:1rem}h1{font-size:1.4rem}header{display:flex;justify-content:space-between;align-items:center}input,textarea,button{font:inherit;padding:.6rem .8rem;margin:.25rem 0;border-radius:8px;border:1px solid #2a3454;background:var(--panel);color:var(--text);width:100%}button{background:var(--accent);border:none;color:#fff;cursor:pointer;width:auto}button:disabled{opacity:.5;cursor:not-allowed}.tabs{display:flex;gap:.5rem;margin:.5rem 0}.tab{background:var(--panel);color:var(--text)}.tab.active{background:var(--accent);color:#fff}.messages{min-height:200px;display:flex;flex-direction:column;gap:.4rem;padding:.5rem 0}.msg{padding:.5rem .7rem;border-radius:10px;max-width:80%}.msg .who{font-size:.7rem;color:var(--muted);display:block}.msg time{font-size:.65rem;color:var(--muted);display:block}.msg.in{background:var(--panel);align-self:flex-start}.msg.out{background:#213a6b;align-self:flex-end}.compose{display:flex;gap:.5rem}.compose input{flex:1}.panel{background:var(--panel);border-radius:10px;padding:.5rem .8rem;margin-top:.8rem}.panel summary{cursor:pointer;font-weight:600}.contact{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;padding:.3rem 0}.contact label{width:auto;display:inline-flex;align-items:center;gap:.2rem}.contact input{width:auto}.status{font-size:.85rem}.status.error{color:#ff8080}.status.info{color:var(--muted)}canvas{background:#fff;border-radius:8px;margin:.4rem 0}