/* Portie Shop — dark, rose-accent, Inter (Milonga design language). */
:root{
  --bg:#0a0a0b; --fg:#fafafa; --card:#111113; --card-fg:#fafafa;
  --primary:#e11d48; --primary-fg:#fafafa; --secondary:#1c1c1f; --muted:#1c1c1f;
  --muted-fg:#a1a1aa; --border:#27272a; --ring:#e11d48; --radius:.6rem;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted-fg)}
.err{color:#fb7185;font-size:.9rem;min-height:1rem}

/* layout */
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1.2rem}
.wrap{max-width:56rem;margin:0 auto;padding:1.2rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.9rem 1.2rem;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(10,10,11,.8);backdrop-filter:blur(8px);z-index:5}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:700}
.brand .dot{font-size:1.3rem}
h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin:.2rem 0}
h2{font-size:1.05rem;font-weight:600;margin:1.8rem 0 .8rem;letter-spacing:-.01em}
.sub{color:var(--muted-fg);font-size:.92rem;margin-top:-.4rem}

/* card */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:1rem;padding:2rem 1.6rem;
  max-width:24rem;width:100%;text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.auth-card .logo{font-size:2.4rem}
.auth-card h1{margin:.4rem 0 .2rem}
.auth-card p{margin:.2rem 0 1rem}

/* inputs & buttons */
.input,textarea,select{width:100%;padding:.7rem .8rem;font:inherit;color:var(--fg);
  background:#0e0e10;border:1px solid var(--border);border-radius:var(--radius);margin-top:.55rem;outline:none}
.input:focus,textarea:focus,select:focus{border-color:var(--ring);box-shadow:0 0 0 3px rgba(225,29,72,.18)}
textarea{resize:vertical;min-height:3.4rem}
label{font-size:.85rem;color:var(--muted-fg);display:block;margin-top:.7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;cursor:pointer;
  font:inherit;font-weight:600;padding:.62rem .95rem;border-radius:var(--radius);border:1px solid transparent;transition:.15s}
.btn-primary{background:var(--primary);color:var(--primary-fg)}
.btn-primary:hover{background:#f0295a}
.btn-ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.btn-ghost:hover{background:var(--secondary)}
.btn-block{width:100%;margin-top:.7rem;padding:.72rem}
.btn-sm{padding:.4rem .7rem;font-size:.85rem}

/* portie list cards */
.grid{display:grid;gap:.7rem}
.p-card{display:flex;align-items:center;gap:.9rem;padding:.8rem .9rem}
.p-card .thumb{width:52px;height:52px;border-radius:.7rem;object-fit:cover;background:var(--secondary);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.p-card .meta{flex:1;min-width:0}
.p-card .meta b{font-size:1.02rem;font-weight:600}
.p-card .meta .who{color:var(--muted-fg);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{font-size:.72rem;color:var(--muted-fg);border:1px solid var(--border);border-radius:1rem;padding:.1rem .5rem}
.badge.rose{color:#fb7185;border-color:#7f1d3a}

/* avatar gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:.6rem;margin-top:.55rem}
.av{border:2px solid transparent;border-radius:.7rem;padding:.3rem;background:var(--secondary);cursor:pointer;text-align:center}
.av img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:.5rem;background:#000}
.av .ph{width:100%;aspect-ratio:1;border-radius:.5rem;display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:#000}
.av .nm{font-size:.72rem;color:var(--muted-fg);margin-top:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av.sel{border-color:var(--primary)}

/* chat */
.chat-log{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:1rem;height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:82%;padding:.55rem .8rem;border-radius:1rem}
.msg.me{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:.3rem}
.msg.bot{align-self:flex-start;background:var(--secondary);border-bottom-left-radius:.3rem}
.msg.other{align-self:flex-start;background:var(--secondary);border-bottom-left-radius:.3rem}
.msg .who{display:block;font-size:.7rem;font-weight:700;opacity:.65;margin-bottom:.12rem}
.roster{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.5rem .2rem .3rem;font-size:.78rem}
.roster .who{opacity:.6;font-weight:700;display:inline}
.roster .pill{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .55rem;border-radius:999px;background:var(--secondary);opacity:.45}
.roster .pill.on{opacity:1;box-shadow:inset 0 0 0 1px #39d35366}
.roster .pill.me{background:var(--primary);color:#fff;opacity:1}
/* the ACTIVE session mode (Video / Audio / Chat) is painted green so it's obvious which one is live */
#btnVideo.active,#btnAudio.active,#btnChat.active{background:#22c55e;color:#fff;border-color:#16a34a;box-shadow:0 0 0 2px rgba(34,197,94,.35)}
body.embed .topbar{display:none}
.embed-x{position:fixed;top:8px;right:10px;z-index:50;border:0;background:transparent;font-size:1.05rem;line-height:1;cursor:pointer;opacity:.55;color:var(--ink)}
.embed-x:hover{opacity:1}
.embed-share{position:fixed;top:7px;right:38px;z-index:50;border:0;background:transparent;font-size:1rem;line-height:1;cursor:pointer;opacity:.6}
.embed-share:hover{opacity:1}
.row{display:flex;gap:.5rem;margin-top:.7rem}
.row .input{margin-top:0}
model-viewer{width:100%;height:280px;background:radial-gradient(circle at 50% 30%,#1a1a1e,#0a0a0b);border:1px solid var(--border);border-radius:var(--radius)}
details{border:1px solid var(--border);border-radius:var(--radius);padding:.7rem 1rem;margin-top:1rem;background:var(--card)}
summary{cursor:pointer;font-weight:600}
.field{margin:.7rem 0}