:root{
  --night: #140a2e;
  --night-2: #1e1149;
  --panel: #241357;
  --ink: #0d0620;
  --gold: #e3b23c;
  --gold-soft: #f4d98a;
  --teal: #3fc7ab;
  --sand: #f6ecd9;
  --sand-dim: #cdc0e6;
  --danger: #e8677c;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  font-family:'Work Sans', sans-serif;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1px 1px at 10% 65%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1200px 700px at 50% -10%, #2b1766 0%, var(--night) 55%, var(--ink) 100%);
  color: var(--sand);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding: 24px 12px;
}
.app{
  width:100%; max-width:460px;
  background: linear-gradient(180deg, var(--night-2), var(--panel));
  border-radius: 26px; border: 1px solid rgba(227,178,60,.25);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden; display:flex; flex-direction:column;
  min-height: 640px; max-height: 90vh;
}

.topbar{ padding: 16px 18px; border-bottom: 1px solid rgba(227,178,60,.18); display:flex; align-items:center; gap:10px; }
.topbar h1{ font-family:'Cinzel', serif; font-size: 15px; font-weight:600; margin:0; color: var(--gold-soft); }
.topbar small{ display:block; color: var(--sand-dim); font-size:10.5px; }

.avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:2px solid rgba(227,178,60,.5); background: rgba(255,255,255,.05);
}
.avatar-fallback{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-weight:600; font-size:14px; color:#241353;
  background: linear-gradient(135deg, var(--gold), #c98f2a);
  border:2px solid rgba(227,178,60,.5);
}
.avatar-mystery{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Cinzel',serif; font-weight:700; font-size:16px; color: var(--teal);
  background: rgba(63,199,171,.14); border:2px dashed rgba(63,199,171,.5);
}
.avatar.sm, .avatar-fallback.sm, .avatar-mystery.sm{ width:26px; height:26px; font-size:10.5px; border-width:1.5px; }

.center-screen{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 30px 26px; }
.center-screen .glow{ font-size:46px; filter: drop-shadow(0 0 18px rgba(227,178,60,.65)); margin-bottom:10px; }
.center-screen h2{ font-family:'Cinzel', serif; color: var(--gold-soft); font-size:19px; margin: 4px 0 8px; }
.center-screen p{ color: var(--sand-dim); font-size:13px; line-height:1.6; margin:0; }

.tabbar{ display:flex; border-bottom: 1px solid rgba(227,178,60,.18); background: rgba(0,0,0,.12); }
.tab{ flex:1; padding: 12px 6px; text-align:center; font-size:12px; font-weight:600; color: var(--sand-dim); cursor:pointer; border-bottom: 2px solid transparent; }
.tab.active{ color: var(--gold-soft); border-bottom-color: var(--gold); }
.unread-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--danger); margin-left:5px; vertical-align:middle; }

.subtabbar{ display:flex; gap:6px; padding: 10px 14px 0; }
.subtab{ padding: 7px 11px; border-radius: 20px; font-size:11.5px; font-weight:600; background: rgba(246,236,217,.06); color: var(--sand-dim); cursor:pointer; border: 1px solid rgba(246,236,217,.14); }
.subtab.active{ background: rgba(63,199,171,.18); color: var(--teal); border-color: var(--teal); }

.chat-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-head{ padding: 12px 16px 4px; display:flex; align-items:center; gap:10px; }
.chat-head h3{ margin:0; font-size:13px; color: var(--gold-soft); font-family:'Cinzel',serif; font-weight:600; }
.chat-head p{ margin: 2px 0 0; font-size:11px; color: var(--sand-dim); }

.messages{ flex:1; overflow-y:auto; padding: 12px 14px; display:flex; flex-direction:column; gap:8px; }
.msg-row{ display:flex; gap:7px; align-items:flex-end; }
.msg-row.me{ flex-direction:row-reverse; }
.msg{ max-width: 72%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height:1.4; }
.msg .meta{ font-size:10px; opacity:.65; margin-bottom:2px; display:block; }
.msg.me{ background: linear-gradient(135deg, var(--gold), #c98f2a); color:#241353; border-bottom-right-radius:4px; }
.msg.them{ background: rgba(246,236,217,.1); color:var(--sand); border: 1px solid rgba(246,236,217,.12); border-bottom-left-radius:4px; }
.msg.genio{ align-self:center; background: rgba(63,199,171,.16); color: var(--teal); border:1px solid rgba(63,199,171,.35); font-size:12.5px; text-align:center; max-width:90%; }
.empty-state{ text-align:center; color: var(--sand-dim); font-size:12.5px; margin-top: 30px; padding: 0 20px; line-height:1.6; }

.composer{ display:flex; gap:8px; padding: 10px 14px 14px; border-top: 1px solid rgba(227,178,60,.14); }
.composer input{ flex:1; padding: 11px 13px; border-radius: 20px; border:1px solid rgba(246,236,217,.22); background: rgba(0,0,0,.22); color: var(--sand); font-size:13.5px; font-family:'Work Sans',sans-serif; }
.composer input:focus{ outline:none; border-color: var(--gold); }
.send-btn{ width:40px; height:40px; border-radius:50%; border:none; background: var(--gold); color:#241353; font-size:16px; cursor:pointer; flex-shrink:0; }
.send-btn:hover{ filter:brightness(1.1); }

.admin-list{ flex:1; overflow-y:auto; padding: 10px 14px 14px; }
.admin-item{ background: rgba(246,236,217,.05); border:1px solid rgba(227,178,60,.2); border-radius:12px; padding: 9px 12px; margin-bottom:8px; cursor:pointer; font-size:12.5px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.admin-item:hover{ background: rgba(227,178,60,.12); }
.admin-item .pair{ display:flex; align-items:center; gap:6px; flex:1; }
.back-link{ color: var(--gold-soft); font-size:12px; cursor:pointer; padding: 10px 14px 0; display:inline-block; }

.people-row{ display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid rgba(246,236,217,.08); font-size:12.5px; }
.badge{ font-size:10px; padding:2px 7px; border-radius:10px; }
.badge.used{ background: rgba(63,199,171,.18); color: var(--teal); }
.badge.pending{ background: rgba(232,103,124,.18); color: var(--danger); }
.regen-btn{ font-size:11px; background:none; border:1px solid rgba(246,236,217,.25); color:var(--sand-dim); padding:3px 8px; border-radius:8px; cursor:pointer; }

::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-thumb{ background: rgba(227,178,60,.35); border-radius:3px; }