:root{font:16px/1.55 Arial,Helvetica,sans-serif;color:#191723;background:#fffdf8;--ink:#191723;--blue:#3344ed;--lime:#daff55;--violet:#c9b2ff;--line:#b9b2c4}
*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px max(20px,calc((100vw - 850px)/2));background:var(--ink);color:white;border-bottom:5px solid var(--blue)}
h1{font-family:'Arial Black',Arial,sans-serif;font-size:46px;font-weight:900;letter-spacing:-3px;line-height:1;margin:0;color:var(--lime)}header span{max-width:230px;font-size:13px;line-height:1.4;font-weight:600}
.notice{padding:8px 20px;text-align:center;background:var(--lime);color:var(--ink);font-size:10px;font-weight:800;letter-spacing:1.8px}main{max-width:850px;margin:auto;padding:36px 24px 48px;min-width:0}h2{font-family:'Arial Black',Arial,sans-serif;font-size:clamp(30px,4.5vw,43px);line-height:1.07;font-weight:900;letter-spacing:-1.6px;margin:25px 0 18px;max-width:680px}h3{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:26px 0 10px}p{overflow-wrap:anywhere}label{display:block;margin:18px 0;font-size:14px;font-weight:700}input,textarea,select{display:block;width:100%;min-width:0;padding:13px;border:2px solid var(--line);border-radius:7px;font:inherit;font-size:16px;line-height:1.4;color:var(--ink);background:white;margin-top:6px}textarea{min-height:100px;resize:vertical}input[type=checkbox]{display:inline;vertical-align:middle;width:20px;height:20px;margin:0 8px 0 0;accent-color:var(--blue)}
button{border:2px solid var(--ink);border-radius:8px;padding:12px 18px;background:var(--blue);color:white;font:inherit;font-size:15px;font-weight:800;line-height:1.35;cursor:pointer;box-shadow:3px 3px 0 var(--ink);min-height:46px;max-width:100%;overflow-wrap:anywhere}button:hover:not(:disabled){background:#202ed0}button:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}button:disabled{background:#ddd9e5;color:#595165;box-shadow:none;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ff663e;outline-offset:4px}nav{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}nav button{font-size:12px;min-height:44px;padding:9px 12px;background:white;color:var(--ink);box-shadow:2px 2px 0 var(--ink)}nav button:hover:not(:disabled){background:var(--lime)}nav button[aria-current=page]{background:var(--lime)}#logout{margin-left:auto;box-shadow:none;border-color:var(--line)}
#login,#join,#setup,#new,#design{max-width:600px}#login,#setup,#new{padding:22px;background:white;border:2px solid var(--ink);border-radius:12px;box-shadow:7px 7px 0 var(--violet)}details,#settings-box{margin-top:32px;border:2px solid var(--ink);border-radius:12px;padding:22px;background:white;box-shadow:5px 5px 0 var(--violet)}summary{cursor:pointer;font-weight:800;min-height:30px}#settings-box>p{font-size:14px;max-width:65ch}#settings-box form{padding-bottom:22px;border-bottom:1px solid #ddd6e6;margin-bottom:22px}#settings-box button{margin:4px 6px 6px 0}#push-off{background:white;color:var(--ink)}
.onboarding{padding:18px 20px;background:#eee6ff;border:2px solid var(--ink);border-radius:12px;margin:24px 0}.onboarding h3{margin-top:0}.onboarding p{font-size:14px}.onboarding p:last-child{margin-bottom:0}#starters{display:grid;gap:12px;min-width:0}#starters .topic{margin:0;min-width:0;padding:12px;background:white;border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink)}#starters summary{min-height:32px;cursor:pointer;font-size:15px;overflow-wrap:anywhere}#starters .topic[open] summary{border-bottom:2px solid var(--lime);padding-bottom:10px}#starters label{margin:14px 0 12px}#starters textarea{width:100%;min-height:100px}#starters button{font-size:13px;padding:10px 12px}#starters .topic-feedback{font-size:14px;margin:12px 0 0}#starters .topic-feedback:empty{display:none}

.messages{max-height:55dvh;overflow:auto;overscroll-behavior:contain;padding:0 6px 5px 0;scrollbar-color:var(--violet) transparent}article{background:#eee6ff;border:1px solid #b6a4cf;border-radius:12px 12px 12px 3px;padding:14px 16px;margin:12px 0;overflow-wrap:anywhere}article[data-speaker=you]{background:#efffc6;border-color:#b7cb78;margin-left:24px;border-radius:12px 12px 3px 12px}article p{white-space:pre-wrap;margin:7px 0 0}article b{font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}#compose{border-top:3px solid var(--ink);margin-top:20px;padding-top:1px}#compose label{margin:12px 0}#compose button{min-width:115px}#status{max-width:850px;margin:0 auto 16px;padding:0 24px;color:#4a365b;font-size:14px}#status:empty{display:none}#invitation{overflow-wrap:anywhere;background:#f0ffbc;padding:12px;border-radius:7px}#invitation:empty{display:none}#portrait{display:block;width:min(100%,400px);border:3px solid var(--ink);border-radius:16px;box-shadow:7px 7px 0 var(--blue);margin:24px auto 32px}
@media(max-width:600px){header{padding:19px 18px;gap:18px}h1{font-size:39px;letter-spacing:-2.5px}header span{font-size:11px;max-width:140px}main{padding:22px 18px 36px}h2{font-size:32px;letter-spacing:-1.2px}nav{gap:7px;margin-bottom:25px}nav button{flex:1 1 auto;padding:9px 10px}#logout{margin-left:0}#login,#setup,#new,details,#settings-box{padding:18px;box-shadow:4px 4px 0 var(--violet)}.onboarding{padding:16px}#status{padding:0 18px}#portrait{width:calc(100% - 9px)}article[data-speaker=you]{margin-left:14px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}button:active:not(:disabled){transform:none}}



.friendship-context{border:3px solid var(--ink,#191723);padding:1rem;background:#daff55;margin:1rem 0;box-shadow:5px 5px 0 #191723}.friendship-context h2{margin:.2rem 0}.eyebrow{font-size:.75rem;font-weight:900;letter-spacing:.12em}.friendship-picker{display:flex;align-items:end;gap:1rem;flex-wrap:wrap}.friendship-picker label{flex:1;min-width:0}.friendship-picker select{max-width:100%;width:100%}#friendship-profile{border-bottom:2px solid #191723;padding-bottom:1rem;margin-bottom:1rem}@media(max-width:420px){.friendship-picker{display:block}.friendship-picker button{width:100%}.friendship-context{box-shadow:3px 3px 0 #191723;overflow-wrap:anywhere}}

/* Make invitation setup legible before asking for personal context. */
.invite-steps{max-width:44rem;padding-left:1.5rem;margin:1.25rem 0;line-height:1.5}
.invite-steps li{padding-left:.25rem;margin:.75rem 0}
.invite-steps strong{color:var(--ink,#191723)}

.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand img{display:block;width:48px;height:44px;object-fit:contain;flex-shrink:0}
@media(max-width:420px){header{gap:12px}.brand{gap:8px}.brand img{width:38px;height:35px}header span{max-width:120px}}
/* Friends-first hierarchy: one purpose per page, separate audiences. */
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.page-heading h2{margin:10px 0 24px}.secondary,.back,.text-button{background:white;color:var(--ink)}.secondary:hover:not(:disabled),.back:hover:not(:disabled),.text-button:hover:not(:disabled){background:var(--lime)}.back,.text-button{box-shadow:none;border:0;text-align:left}.back{padding-left:0}.friend-list{display:grid;gap:14px;margin:28px 0}.friend-row{display:flex;align-items:center;gap:16px;text-align:left;background:white;color:var(--ink);padding:18px}.friend-row:hover:not(:disabled){background:var(--lime)}.friend-row>.friend-label{flex:1;min-width:0}.friend-row strong{font-size:22px}.friend-row small,.friend-actions small{display:block;font-size:14px;font-weight:400;margin-top:5px}.friend-avatar{display:grid;place-items:center;flex:0 0 48px;height:48px;border-radius:50%;background:var(--violet);font-size:22px}.friend-actions{display:grid;gap:16px;max-width:600px;margin:28px 0}.friend-actions button{text-align:left}.audience{border-left:5px solid var(--blue);padding:10px 14px;background:#eef0ff}.saved-notes{padding:0 0 20px;border-bottom:1px solid var(--line);margin-bottom:25px}.saved-notes dd{margin:5px 0 18px;white-space:pre-wrap;overflow-wrap:anywhere}.saved-notes p{font-size:14px}.inline-actions{display:flex;gap:12px;flex-wrap:wrap}.optional{font-weight:400}.empty-state{max-width:32rem;margin:32px 0}#settings-box{margin-top:20px}h2:focus{outline:none}

.sandbox-panel{border:2px solid var(--ink,#111);padding:1rem;margin:1rem 0;border-radius:1rem}.scenario-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.chat-creature{display:block;width:120px;height:120px;object-fit:contain;border-radius:1rem}

/* Keep the sandbox available without competing with real friendships. */
.test-friend-option{border-top:1px solid var(--line);padding-top:16px;margin-top:28px}.test-friend-option button{padding-left:0;font-weight:600}.test-friend-option p{font-size:14px;margin:4px 0 0;max-width:38rem;color:#595165}

/* Each Moskai message carries this friendship's portrait, including older replies. */
.messages article[data-speaker=creature]{display:flex;align-items:flex-start;gap:10px}
.message-avatar{position:relative;display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;overflow:hidden;background:#d7c5f5;color:var(--ink);font-weight:800}
.message-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.message-avatar img[hidden]{display:none}
.message-content{min-width:0;flex:1}
@media(max-width:380px){.messages article[data-speaker=creature]{padding:12px;gap:8px}.message-avatar{flex-basis:34px;width:34px;height:34px}}

.friend-portrait{flex:0 0 44px;width:44px;height:44px;border-radius:50%;object-fit:cover}.friend-portrait[hidden]{display:none}

/* A companion, not a settings screen. Real pair portraits only. */
.friend-hero{display:flex;align-items:center;gap:24px;margin:16px 0 24px}.friend-hero h2{margin:0 0 10px}.friend-hero p{margin:8px 0}.hub-creature{flex:0 0 160px;width:160px;height:160px;object-fit:contain;border-radius:32px;background:var(--violet);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--lime);transform:rotate(-3deg)}.creature-intro{font-size:15px;max-width:34rem}.chat-companion{display:flex;align-items:center;gap:16px;padding:16px;margin:20px 0;background:#eee6ff;border-radius:22px;border:2px solid var(--ink)}.chat-companion p{margin:5px 0;font-size:14px}.chat-companion .chat-creature{flex:0 0 96px;width:96px;height:96px;border-radius:18px}.chat-companion .text-button{padding:8px 0;background:transparent}.friend-portrait{flex-basis:64px;width:64px;height:64px;border-radius:18px}.creature-choices{border:0;padding:0;margin:26px 0;min-width:0}.creature-choices legend{font-size:18px;font-weight:800;margin-bottom:12px}.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.creature-choice{position:relative;margin:0;cursor:pointer}.creature-choice input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0}.choice-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:16px;border:2px solid var(--line);border-radius:14px;background:white;min-height:80px}.choice-card small{font-weight:400;line-height:1.4}.creature-choice input:checked+.choice-card{border-color:var(--blue);background:#eef0ff;box-shadow:inset 0 0 0 1px var(--blue)}.creature-choice input:checked+.choice-card strong:after{content:' ✓';color:var(--blue)}.creature-choice input:focus-visible+.choice-card{outline:3px solid #ff663e;outline-offset:3px}.color-dot{display:block;width:32px;height:32px;border:1px solid #19172344;border-radius:50%}.color-apricot{background:#f6b178}.color-moss{background:#9faf78}.color-lavender{background:#c9b2ff}.color-sky{background:#8ccce9}.creature-reveal{text-align:center;padding:8px 20px 24px;background:#eee6ff;border:2px solid var(--ink);border-radius:24px;margin:24px 0}.creature-reveal #portrait{max-width:300px}.contribution-status{padding:14px 18px;background:var(--lime);border-radius:12px;font-weight:600}.hub-creature[hidden],.chat-creature[hidden],#portrait[hidden]{display:none}
@media(max-width:600px){.friend-hero{gap:18px;align-items:flex-start}.hub-creature{flex-basis:100px;width:100px;height:100px;border-radius:24px}.friend-hero h2{font-size:28px}.chat-companion{padding:12px;gap:12px}.chat-companion .chat-creature{flex-basis:72px;width:72px;height:72px}.choice-card{padding:12px}.creature-reveal{padding:8px 12px 20px}}
@media(max-width:360px){.friend-hero{flex-direction:column}}
/* Invitation arrival: purpose first, one clear route into the conversation. */
.invitation-welcome{max-width:42rem}.eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}.welcome-steps{padding-left:1.5rem}.welcome-steps li{margin:1rem 0;padding-left:.4rem}.welcome-steps strong{display:block}.welcome-consent,.chat-start-help{border:2px solid var(--ink);border-radius:1rem;padding:1.2rem;margin:1.5rem 0}.account-help,#account-name-help,#passphrase-help{font-size:.9rem;color:#595165}#join button{white-space:normal}details{margin-top:1.5rem}summary{cursor:pointer;font-weight:700;padding:.8rem 0}

/* Long names remain within narrow portrait-led layouts. */
.friend-hero>div{min-width:0}.friend-hero h2,.friend-label strong{overflow-wrap:anywhere}