:root{
  --noir:#111111; --black:#000000; --card:#1a1a1a; --card2:#161616;
  --cream:#F1E5C9; --parchment:#E4D5B7;
  --gold:#B8975A; --garnet:#91241C; --garnet-bright:#B23A2E; --oxblood:#5E1712;
  --forest:#303B28; --fern:#4C5B39; --sage:#676F55; --euc:#97A07F;
  --line:rgba(184,151,90,.35);
  --display:'Cormorant Garamond',serif; --body:'Jost',sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;background:var(--noir);color:var(--cream);
  font-family:var(--body);font-weight:300;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}

/* ---- Flanked gold label ---- */
.flank{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-weight:400;
  font-size:8.5px;letter-spacing:3.5px;text-transform:uppercase;color:var(--gold);}
.flank .rule{width:20px;height:.5px;background:var(--gold);opacity:.7;}

/* ---- Header ---- */
header{position:sticky;top:0;z-index:20;background:linear-gradient(var(--black),var(--noir));
  border-bottom:.5px solid var(--line);padding:12px 16px 10px;padding-top:max(12px,env(safe-area-inset-top));}
.head-row{max-width:760px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:inline-flex;align-items:center;line-height:1;}
.brand .wordmark{height:30px;width:auto;display:block;}
.head-name{font-family:var(--display);font-style:italic;font-size:22px;color:var(--gold);}

/* ---- Conversation ---- */
.log{flex:1;min-height:0;overflow-y:auto;width:100%;max-width:760px;margin:0 auto;
  padding:22px 16px 8px;display:flex;flex-direction:column;gap:18px;}

.msg{max-width:88%;font-size:15.5px;line-height:1.6;}
.msg .who{font-family:var(--body);font-weight:400;font-size:9.5px;letter-spacing:2.5px;
  text-transform:uppercase;margin-bottom:6px;}
.msg p{margin:0 0 10px;}
.msg p:last-child{margin-bottom:0;}
.msg strong{color:#fff;font-weight:500;}
.msg em{font-family:var(--display);font-style:italic;font-size:1.08em;}

.msg.user{align-self:flex-end;}
.msg.user .bubble{background:rgba(145,36,28,.16);border:.5px solid var(--garnet);
  border-radius:14px 14px 4px 14px;padding:11px 14px;color:var(--cream);}
.msg.user .who{color:var(--garnet-bright);text-align:right;}

.msg.bot{align-self:flex-start;max-width:92%;}
.msg.bot .who{color:var(--gold);}
.msg.bot .bubble{background:var(--card);border:.5px solid var(--line);border-left:2px solid var(--gold);
  border-radius:4px 14px 14px 14px;padding:12px 15px;}

/* greeting / empty state */
.intro{align-self:center;text-align:center;color:var(--euc);max-width:520px;margin:auto 0;}
.intro .lede{font-family:var(--display);font-style:italic;font-size:26px;color:var(--cream);line-height:1.3;}
.intro .sub{font-size:13px;color:var(--sage);margin-top:12px;letter-spacing:.3px;}

/* typing cursor */
.cursor{display:inline-block;width:7px;height:1.05em;background:var(--gold);
  vertical-align:-2px;margin-left:1px;animation:blink 1s steps(2,start) infinite;}
@keyframes blink{50%{opacity:0;}}

/* ---- Composer ---- */
.composer{width:100%;max-width:760px;margin:0 auto;
  display:flex;gap:10px;align-items:flex-end;
  padding:12px 16px 8px;
  background:var(--noir);border-top:.5px solid var(--line);}
.composer textarea{flex:1;resize:none;max-height:160px;background:var(--card2);
  border:.5px solid var(--line);color:var(--cream);font-family:var(--body);font-weight:300;
  font-size:16px;line-height:1.45;padding:12px 14px;border-radius:14px;outline:none;}
.composer textarea::placeholder{color:var(--sage);}
.composer textarea:focus{border-color:var(--gold);}
.send{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:none;cursor:pointer;
  background:var(--garnet);color:var(--cream);font-size:20px;line-height:1;transition:.15s;}
.send:hover{background:var(--garnet-bright);}
.send:disabled{opacity:.4;cursor:default;}

/* ---- Footer endorsement (brand: quiet, gold, flanked rules) ---- */
.endorse{width:100%;max-width:760px;margin:0 auto;display:flex;justify-content:center;
  padding:8px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));background:var(--noir);}
.endorse .flank{opacity:.72;font-size:8px;letter-spacing:2.6px;}

/* ---- Buttons ---- */
.btn{font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  padding:12px 20px;border-radius:8px;border:.5px solid var(--garnet);background:var(--garnet);
  color:var(--cream);cursor:pointer;transition:.15s;}
.btn:hover{background:var(--garnet-bright);border-color:var(--garnet-bright);}

/* ---- Password gate ---- */
.gate{position:fixed;inset:0;z-index:50;background:radial-gradient(120% 90% at 50% 0%,#161310,var(--black));
  display:flex;align-items:center;justify-content:center;padding:24px;}
.gate.hidden{display:none;}
.gate-card{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.gate-mark{height:64px;width:auto;opacity:.95;}
.gate-title{font-family:var(--display);font-style:italic;font-size:38px;color:var(--cream);line-height:1;}
.gate-card .flank{margin-bottom:6px;opacity:.85;}
.gate-card input{width:100%;background:var(--card2);border:.5px solid var(--line);color:var(--cream);
  font-family:var(--body);font-weight:300;font-size:16px;padding:13px 14px;border-radius:10px;outline:none;text-align:center;letter-spacing:1px;}
.gate-card input:focus{border-color:var(--gold);}
.gate-card .btn{width:100%;}
.gate-err{min-height:16px;font-size:12px;letter-spacing:.5px;color:var(--garnet-bright);}

/* ---- Desktop polish ---- */
@media (min-width:680px){
  .brand .wordmark{height:34px;}
  .msg{font-size:16px;}
}