:root{color-scheme:light;--color-primary: #9333ea;--color-background: #ffffff;--color-surface: #fafafa;--font-family: Inter, system-ui, sans-serif;--text: #1a1a2e;--muted: #6b7280;--border: #e5e7eb}*{box-sizing:border-box}body{margin:0;background:var(--color-background);color:var(--text);font-family:var(--font-family);min-height:100vh}#app{min-height:100vh}button,input,textarea{font:inherit}button{cursor:pointer;border:none;border-radius:8px;padding:.55rem 1rem;background:var(--color-primary);color:#fff}button:hover{filter:brightness(1.08)}button.secondary{background:var(--color-surface);border:1px solid var(--border);color:var(--text)}button.secondary:hover{border-color:var(--muted)}.meta{color:var(--muted);font-size:.875rem}.login{display:grid;place-items:center;min-height:100vh;padding:2rem;background:var(--color-background)}.login-card{width:min(400px,100%);background:var(--color-surface);border:1px solid var(--border);border-radius:16px;padding:2rem;text-align:center}.login-card .logo{max-height:48px;margin-bottom:.5rem}.login-card h1{margin:0 0 .25rem;color:var(--color-primary)}.login-card .tagline{margin:0 0 1.5rem;color:var(--muted)}.login-card form{display:grid;gap:1rem;text-align:left}.login-card label{display:grid;gap:.35rem;font-size:.875rem}.login-card input{padding:.6rem .75rem;border:1px solid var(--border);border-radius:8px;background:#fff}.login-card .error{color:#dc2626;font-size:.875rem}.login-card .auth-switch{margin:1.25rem 0 0;font-size:.875rem;color:var(--muted)}.login-card button.link{background:none;border:none;padding:0;color:var(--color-primary);font-size:inherit;text-decoration:underline;border-radius:0}.login-card button.link:hover{filter:none;opacity:.85}.shell{min-height:100vh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;border-bottom:1px solid var(--border);background:var(--color-surface)}.brand{display:flex;align-items:center;gap:.5rem;min-width:120px}.logo-sm{height:28px}.nav{display:flex;gap:.35rem;flex:1}.nav button{background:transparent;color:var(--text);border:1px solid transparent}.nav button.active{background:var(--color-primary);color:#fff}.nav button.active .nav-unread-badge{background:#fff;color:var(--color-primary)}.nav-unread-badge{display:inline-block;min-width:1.1rem;margin-left:.35rem;padding:.05rem .35rem;border-radius:999px;background:var(--color-primary);color:#fff;font-size:.7rem;font-weight:600;line-height:1.25;vertical-align:middle}.user-meta{color:var(--muted);font-size:.875rem}.main-panel{flex:1;padding:1.25rem;max-width:1100px;width:100%;margin:0 auto}.main-panel h2{margin:0 0 1rem;font-size:1.15rem}.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}.profile-card{background:var(--color-surface);border:1px solid var(--border);border-radius:12px;padding:1rem;display:flex;flex-direction:column;gap:.5rem;text-align:left;width:100%}.profile-card-link{cursor:pointer;transition:border-color .15s,box-shadow .15s;background:var(--color-surface);color:var(--text)}.profile-card-link:hover{filter:none;border-color:var(--color-primary);box-shadow:0 2px 8px #0000000f}.profile-card-link h3{margin:0;font-size:1rem;color:var(--text)}.profile-card-link p{margin:0;font-size:.875rem;color:var(--muted);flex:1}.profile-card img,.profile-card .avatar-md{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px}.avatar{object-fit:cover;border-radius:50%;flex-shrink:0}.avatar-sm{width:40px;height:40px}.avatar-md{width:100%;aspect-ratio:1;border-radius:8px}.avatar-lg{width:min(280px,100%);aspect-ratio:1;border-radius:12px;margin:0 auto}.avatar-placeholder{display:grid;place-items:center;background:var(--color-primary);color:#fff;font-weight:600}.avatar-sm.avatar-placeholder{font-size:1rem}.avatar-md.avatar-placeholder,.profile-card .avatar-placeholder{width:100%;aspect-ratio:1;font-size:2rem;border-radius:8px}.avatar-lg.avatar-placeholder{font-size:3rem}.profile-detail{max-width:420px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:.75rem;padding:1rem 0 2rem}.profile-detail h2{margin:0;font-size:1.5rem}.profile-detail .bio{margin:0;color:var(--text);line-height:1.5}.back-btn{margin-bottom:1rem}.account-card{max-width:420px;margin:0 auto;padding:1.5rem;background:var(--color-surface);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:1.25rem;text-align:center}.account-avatar{margin:0}.account-credits{padding:1rem 1.5rem;border-radius:12px;background:color-mix(in srgb,var(--color-primary) 12%,white);border:1px solid color-mix(in srgb,var(--color-primary) 25%,var(--border));min-width:140px}.account-credits-low{background:color-mix(in srgb,#dc2626 10%,white);border-color:color-mix(in srgb,#dc2626 30%,var(--border))}.account-credits-value{display:block;font-size:2rem;font-weight:700;color:var(--color-primary);line-height:1.1}.account-credits-low .account-credits-value{color:#dc2626}.account-credits-label{display:block;font-size:.875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.account-details{width:100%;margin:0;text-align:left}.account-details>div{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--border)}.account-details>div:last-child{border-bottom:none}.account-details dt{margin:0;font-size:.875rem;color:var(--muted)}.account-details dd{margin:0;font-weight:500;text-align:right;word-break:break-word}.account-hint{margin:0;max-width:320px}.chat-split{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:1rem;min-height:calc(100vh - 120px)}.chat-list-panel{border:1px solid var(--border);border-radius:12px;background:var(--color-surface);padding:.75rem;overflow:auto}.chat-list-panel h2{margin:0 0 .75rem;padding:0 .25rem}.chat-item{display:flex;align-items:center;gap:.65rem;width:100%;text-align:left;background:transparent;color:var(--text);border:1px solid transparent;padding:.65rem .75rem;margin-bottom:.25rem;border-radius:8px}.chat-item-body{flex:1;min-width:0}.chat-item strong{display:block}.chat-item .meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-item.selected{background:#fff;border-color:var(--color-primary)}.unread-badge{flex-shrink:0;min-width:1.25rem;padding:.1rem .4rem;border-radius:999px;background:var(--color-primary);color:#fff;font-size:.75rem;font-weight:600;text-align:center}.chat-panel{border:1px solid var(--border);border-radius:12px;background:#fff;display:flex;flex-direction:column;min-height:400px}.chat-header{padding:.75rem 1rem;border-bottom:1px solid var(--border)}.chat-header-profile{display:flex;align-items:center;gap:.65rem;background:transparent;color:var(--text);padding:0;font-size:1rem;font-weight:600}.chat-header-profile:hover{filter:none;color:var(--color-primary)}.chat-header h2{margin:0;font-size:1rem}.chat-empty{display:grid;place-items:center;flex:1;color:var(--muted);padding:2rem}.messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.msg{max-width:75%;padding:.55rem .75rem;border-radius:12px;font-size:.925rem}.msg time{display:block;font-size:.7rem;opacity:.65;margin-top:.25rem}.msg.mine{align-self:flex-end;background:var(--color-primary);color:#fff}.msg.theirs{align-self:flex-start;background:var(--color-surface);border:1px solid var(--border)}.compose{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--border)}.compose textarea{flex:1;resize:vertical;min-height:2.5rem;padding:.5rem .75rem;border:1px solid var(--border);border-radius:8px}.hidden{display:none}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;background:#00000073}.modal-dialog{width:min(100%,380px);padding:1.5rem;background:var(--color-surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 48px #0000002e}.modal-dialog h3{margin:0 0 .75rem}.modal-dialog p{margin:0 0 .75rem;color:var(--muted);line-height:1.5}.modal-note{padding:.75rem;border-radius:8px;background:color-mix(in srgb,var(--color-primary) 10%,white);color:var(--text);font-size:.875rem}.modal-actions{display:flex;gap:.5rem;margin-top:1.25rem}.modal-actions button{flex:1}@media(max-width:720px){.chat-split{grid-template-columns:1fr}.topbar{flex-wrap:wrap}}