:root{color:#233142;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--text-strong:#1e2a37;--text-body:#314659;--muted:#637081;--panel:#f8faffc7;--surface:#ffffffb8;--border:#26364d1f;--border-soft:#26364d14;--accent-strong:#ec5d38;--accent-soft:#2f73ff;--shadow:0 24px 56px #2a374c1f;background:radial-gradient(circle at top,#ffffffeb,#0000 38%),linear-gradient(#fff7ef 0%,#eef3ff 52%,#f8fbff 100%);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{background:radial-gradient(circle at top,#ffffffeb,#0000 38%),linear-gradient(#fff7ef 0%,#eef3ff 52%,#f8fbff 100%)}body{min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}h1,h2,p{margin:0}h1,h2{color:var(--text-strong);letter-spacing:-.03em}h1{margin-bottom:12px;font-size:clamp(2.4rem,5vw,4.8rem);line-height:.95}h2{margin-bottom:6px;font-size:1.2rem}#root{min-height:100vh}.app-shell{gap:24px;min-height:100vh;padding:40px 24px 28px;display:grid}.hero-panel,.presence-panel,.conversation-panel{border:1px solid var(--border);background:linear-gradient(180deg, #ffffffad, #ffffffe0), var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow)}.hero-panel{border-radius:28px;padding:32px;position:relative;overflow:hidden}.hero-panel:before,.hero-panel:after{content:"";pointer-events:none;border-radius:999px;position:absolute}.hero-panel:before{background:radial-gradient(circle,#ec5d384d,#0000 68%);width:280px;height:280px;top:-120px;right:-80px}.hero-panel:after{background:radial-gradient(circle,#2f73ff38,#0000 70%);width:340px;height:340px;bottom:-180px;left:-120px}.chat-grid{grid-template-columns:320px minmax(0,1fr);gap:24px;min-height:62vh;display:grid}.presence-panel,.conversation-panel{border-radius:24px;padding:24px}.panel-heading{margin-bottom:18px}.panel-heading p,.hero-copy,.identity-meta,.identity-label,.presence-item p,.empty-state,.status-strip,.error-banner{color:var(--muted)}.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:var(--accent-strong);align-items:center;gap:10px;margin:0 0 14px;font-size:.76rem;display:inline-flex}.eyebrow:before{content:"";background:currentColor;width:32px;height:1px}.hero-copy{max-width:58ch;margin-bottom:20px;font-size:1.02rem}.status-strip{flex-wrap:wrap;gap:12px;margin-bottom:18px;display:flex}.status-pill{text-transform:capitalize;border:1px solid #0000;border-radius:999px;align-items:center;padding:8px 12px;font-size:.82rem;display:inline-flex}.status-online{color:#0b5c45;background:#27ae6029;border-color:#27ae604d}.status-connecting,.status-booting{color:#8a4b00;background:#faad142b;border-color:#faad144d}.status-offline{color:#8b2d2d;background:#ff634724;border-color:#ff634747}.error-banner{background:#9b2b2b14;border:1px solid #9b2b2b24;border-radius:16px;margin:0 0 18px;padding:12px 14px}.identity-card{background:#ffffff8c;border:1px solid #fff9;border-radius:20px;align-items:center;gap:16px;max-width:460px;padding:18px;display:flex}.avatar-chip{color:#fff;background:linear-gradient(135deg, var(--accent-strong), var(--accent-soft));border-radius:18px;place-items:center;width:56px;height:56px;font-weight:700;display:grid}.identity-label{text-transform:uppercase;letter-spacing:.14em;margin:0 0 2px;font-size:.75rem}.identity-card strong{color:var(--text-strong);font-size:1.1rem}.identity-meta{word-break:break-all;margin:4px 0 0;font-size:.88rem}.presence-list,.messages-feed{flex-direction:column;gap:12px;display:flex}.presence-list{min-height:240px}.presence-item{background:var(--surface);border:1px solid var(--border-soft);border-radius:18px;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.presence-item strong,.message-bubble strong{color:var(--text-strong)}.presence-item p{margin:4px 0 0}.presence-item time,.message-bubble time{color:var(--muted);white-space:nowrap;font-size:.8rem}.is-self{background:#ec5d3814;border-color:#ec5d3847}.conversation-panel{flex-direction:column;min-height:0;display:flex}.messages-feed{flex:1;min-height:420px;max-height:62vh;padding-right:6px;overflow:auto}.message-bubble{background:var(--surface);border:1px solid var(--border-soft);border-radius:20px 20px 20px 8px;align-self:flex-start;max-width:min(85%,560px);padding:14px 16px}.message-bubble.is-self{background:linear-gradient(#ec5d382e,#ec5d381a);border-radius:20px 20px 8px;align-self:flex-end}.message-bubble header{justify-content:space-between;gap:12px;margin-bottom:10px;display:flex}.message-bubble p{color:var(--text-body);white-space:pre-wrap;word-break:break-word;margin:0}.empty-state{text-align:center;border:1px dashed var(--border);border-radius:18px;place-items:center;min-height:140px;padding:20px;display:grid}.message-empty p{margin:0}.composer{border-top:1px solid var(--border);margin-top:18px;padding-top:18px}.composer-label{color:var(--text-strong);margin-bottom:10px;font-weight:600;display:block}.composer-row{grid-template-columns:minmax(0,1fr) auto;gap:12px;display:grid}.composer-input{border:1px solid var(--border);min-width:0;color:var(--text-strong);font:inherit;background:#fffc;border-radius:16px;padding:16px 18px;transition:border-color .14s,box-shadow .14s,transform .14s}.composer-input:focus{border-color:#ec5d3880;outline:none;transform:translateY(-1px);box-shadow:0 0 0 4px #ec5d381f}.composer-input:disabled{cursor:not-allowed;opacity:.7}.send-button{min-height:56px;font:inherit;color:#fff;background:linear-gradient(135deg, var(--accent-strong), var(--accent-soft));border:0;border-radius:16px;padding:0 22px;font-weight:700;transition:transform .14s,opacity .14s,box-shadow .14s;box-shadow:0 14px 32px #ec5d383d}.send-button:hover:enabled,.send-button:focus-visible:enabled{transform:translateY(-1px);box-shadow:0 18px 40px #ec5d384d}.send-button:disabled{cursor:not-allowed;opacity:.45;box-shadow:none}@media (width<=960px){.app-shell{padding:18px}.chat-grid{grid-template-columns:1fr}.messages-feed{max-height:none}}@media (width<=640px){.hero-panel,.presence-panel,.conversation-panel{border-radius:20px;padding:20px}.composer-row{grid-template-columns:1fr}.identity-card{max-width:none}}