@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Inter:wght@400;500&display=swap');

:root{
  --bg:#0b0a12;
  --panel: rgba(18,16,26,0.78);
  --line: rgba(255,255,255,0.08);
  --pink:#ff75c8;
  --rose:#ff4fb6;
  --gold:#f6d77a;
  --text:#ffe6f3;
  --muted: rgba(255,230,243,0.72);
  --shadow: 0 18px 55px rgba(0,0,0,0.65);
  --r: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; background:var(--bg); color:var(--text); overflow:hidden; }

.app{
  height:100vh;
  background:
    radial-gradient(900px 500px at 25% 10%, rgba(255,117,200,0.10), transparent 60%),
    radial-gradient(900px 500px at 90% 35%, rgba(246,215,122,0.10), transparent 55%),
    var(--bg);
}

/* Fixed header */
.header{
  position:fixed; top:0; left:0; right:0;
  height:72px;
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  background: rgba(10,10,16,0.90);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index:10;
}

.avatar{
  width:54px; height:54px; border-radius:14px;
  border:2px solid rgba(255,79,182,0.55);
  object-fit:cover;
  box-shadow: 0 0 12px rgba(255,117,200,0.18);
}

.title{
  font-family: Cinzel, serif;
  color: var(--pink);
  font-size: 18px;
  line-height: 1.1;
}
.sub{
  font-family: Inter, system-ui, sans-serif;
  color: var(--gold);
  font-size: 12px;
  margin-top: 2px;
}

.glyph{
  margin-left:auto;
  background: rgba(255,117,200,0.08);
  border: 1px solid rgba(255,117,200,0.35);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
}

/* Scroll-only chat */
.chat{
  position:fixed;
  top:72px; bottom:78px; left:0; right:0;
  padding: 12px;
  overflow-y:auto;
}

.bubble{
  background: rgba(18,18,26,0.82);
  border: 1px solid rgba(255,255,255,0.06);
  border-left: 5px solid var(--rose);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0;
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.bubble.user{
  border-left-color: rgba(246,215,122,0.85);
  background: rgba(20,20,28,0.78);
}
.meta{
  font-family: Cinzel, serif;
  font-size: 12px;
  color: var(--gold);
  margin-bottom: 6px;
}
.text{
  font-family: Inter, system-ui, sans-serif;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Fixed footer */
.footer{
  position:fixed; left:0; right:0; bottom:0;
  height:78px;
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  background: rgba(10,10,16,0.92);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index:10;
}

.icon{
  width:44px; height:44px;
  border-radius: 16px;
  border:1px solid rgba(246,215,122,0.30);
  background: rgba(246,215,122,0.10);
  color: var(--text);
  font-size: 18px;
}

.input{
  flex:1;
  height:44px;
  border-radius: 18px;
  border:1px solid rgba(255,117,200,0.40);
  background: rgba(20,20,28,0.75);
  color: var(--text);
  padding: 0 12px;
  outline:none;
}

.send{
  height:44px;
  border-radius: 16px;
  border:1px solid rgba(246,215,122,0.35);
  background: rgba(246,215,122,0.12);
  color: var(--text);
  padding: 0 16px;
  font-weight: 600;
}

/* Drawer */
.drawer{
  position:fixed; top:0; right:-92%;
  width:92%; max-width:420px; height:100%;
  background: rgba(12,12,18,0.96);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow);
  z-index:20;
  transition: right 180ms ease;
  padding: 12px;
  overflow-y:auto;
}
.drawer.open{ right:0; }

.drawer-head{
  display:flex; align-items:center; gap:10px;
  padding: 8px 4px 12px 4px;
  border-bottom: 1px solid var(--line);
}
.drawer-title{
  font-family: Cinzel, serif;
  color: var(--pink);
  font-size: 18px;
}

.card{
  margin: 12px 0;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(18,16,26,0.55);
  border-radius: 16px;
  padding: 12px;
}
.card-title{ font-family: Cinzel, serif; color: var(--gold); margin-bottom: 4px; }
.card-sub{ color: var(--muted); font-size: 12px; margin-bottom: 10px; }

.select, .textarea{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,117,200,0.35);
  background: rgba(20,20,28,0.75);
  color: var(--text);
  padding: 10px 12px;
  outline:none;
}
.textarea{ min-height: 150px; resize: vertical; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:12px; color: var(--muted); }

.scrim{
  position:fixed; inset:0;
  background: rgba(0,0,0,0.45);
  z-index:15;
  opacity:0;
  pointer-events:none;
  transition: opacity 180ms ease;
}
.scrim.show{ opacity:1; pointer-events:auto; }