*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#070503;
  --bg2:#0E0C08;
  --surface:#13100B;
  --panel:#191611;
  --border:rgba(212,170,80,.09);
  --border2:rgba(212,170,80,.2);
  --gold:#D4AA50;
  --gold-dim:rgba(212,170,80,.13);
  --gold-glow:rgba(212,170,80,.22);
  --cream:#F5F0E5;
  --cream-muted:#9B8F77;
  --user-bg:rgba(212,170,80,.06);
  --user-bdr:rgba(212,170,80,.2);
  --bot-bg:rgba(255,255,255,.02);
  --bot-bdr:rgba(255,255,255,.05);
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Outfit', sans-serif;
}

html,body{height:100%;background:var(--bg);color:var(--cream);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(212,170,80,.05) 0%,transparent 70%),radial-gradient(ellipse 40% 50% at 80% 100%,rgba(180,120,40,.03) 0%,transparent 60%);pointer-events:none;z-index:0}
body::after{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(212,170,80,0.01) 1px,transparent 1px),linear-gradient(90deg,rgba(212,170,80,0.01) 1px,transparent 1px);background-size:60px 60px;pointer-events:none;z-index:0;opacity:0.6}

#root{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:50px 16px 60px}

header{width:100%;max-width:720px;text-align:center;margin-bottom:36px;animation:fadeDown .7s cubic-bezier(0.16, 1, 0.3, 1) both}
.wordmark{display:inline-flex;align-items:center;gap:10px;margin-bottom:20px}
.wordmark-icon{width:34px;height:34px;border:1px solid var(--border2);border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--gold-dim);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05)}
.wordmark-icon svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.7}
.wordmark-text{font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:.5px;color:var(--cream)}
.wordmark-text span{color:var(--gold)}

header h1{font-family:var(--font-display);font-size:clamp(28px,5vw,44px);font-weight:400;letter-spacing:-0.5px;color:var(--cream);line-height:1.2;margin-bottom:12px}
header h1 em{font-style:italic;color:var(--gold)}
header p{font-size:14.5px;font-weight:300;color:var(--cream-muted);letter-spacing:.3px}

.rule{display:flex;align-items:center;gap:14px;margin:24px auto 0;width:fit-content}
.rule-line{width:50px;height:1px;background:linear-gradient(to right,transparent,var(--border2))}
.rule-line.r{background:linear-gradient(to left,transparent,var(--border2))}
.rule-diamond{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);opacity:.6;box-shadow:0 0 6px var(--gold)}

#chat{width:100%;max-width:720px;background:var(--surface);border:1px solid var(--border);border-radius:20px;display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.03);overflow:hidden;animation:fadeUp .7s cubic-bezier(0.16, 1, 0.3, 1) both .1s}

.titlebar{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--border);background:var(--panel);position:relative}
.titlebar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-glow),transparent)}

.t-av{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#9C7A23,var(--gold),#F1C463);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:20px;color:#070503;box-shadow:0 0 20px rgba(212,170,80,.25);border:1px solid rgba(255,255,255,0.1)}

.t-info{flex:1}
.t-info strong{display:block;font-family:var(--font-display);font-size:18px;font-weight:500;color:var(--cream);letter-spacing:.2px}
.t-info small{font-size:11px;font-weight:500;color:var(--cream-muted);letter-spacing:.6px;text-transform:uppercase}

.t-status{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:400;color:var(--cream-muted);letter-spacing:.3px}
.t-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;animation:glow 3s ease-in-out infinite}

#msgs{flex:1;min-height:400px;max-height:500px;overflow-y:auto;padding:26px 24px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth}
#msgs::-webkit-scrollbar{width:3px}
#msgs::-webkit-scrollbar-thumb{background:rgba(212,170,80,.12);border-radius:3px}

.msg{display:flex;gap:12px;animation:msgIn .4s cubic-bezier(0.16, 1, 0.3, 1) both}
.msg.user{flex-direction:row-reverse}

.m-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:700}
.msg.bot .m-av{background:linear-gradient(135deg,#7A5D15,var(--gold));color:#070503;border:1px solid rgba(255,255,255,0.05)}
.msg.user .m-av{background:var(--user-bg);border:1px solid var(--user-bdr);color:var(--gold)}

.msg-inner{display:flex;flex-direction:column;gap:4px;max-width:75%}
.msg.user .msg-inner{align-items:flex-end}
.msg.bot .msg-inner{align-items:flex-start}

.bubble{padding:13px 18px;font-size:14.5px;font-weight:400;line-height:1.65;word-break:break-word;white-space:pre-wrap;box-shadow:0 3px 12px rgba(0,0,0,0.15)}
.msg.bot .bubble{background:var(--bot-bg);border:1px solid var(--bot-bdr);border-radius:4px 16px 16px 16px;color:var(--cream)}
.msg.user .bubble{background:var(--user-bg);border:1px solid var(--user-bdr);border-radius:16px 4px 16px 16px;color:var(--cream);border-left:none}

.msg-time{font-size:10px;color:var(--cream-muted);opacity:.4;letter-spacing:.3px;padding:0 4px}

.greet{border:1px solid var(--border2);border-radius:16px;padding:26px;text-align:center;background:linear-gradient(180deg,rgba(212,170,80,.04),rgba(7,5,3,0));position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.greet::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:250px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,170,80,.3),transparent)}
.greet-emoji{font-size:32px;margin-bottom:10px;display:block}
.greet h2{font-family:var(--font-display);font-size:24px;font-weight:400;color:var(--cream);margin-bottom:8px;letter-spacing:.2px}
.greet p{font-size:14px;font-weight:300;color:var(--cream-muted);line-height:1.6}

#typing{display:flex;gap:12px;animation:msgIn .3s ease both}
.dots{display:flex;gap:5px;align-items:center;padding:14px 18px;background:var(--bot-bg);border:1px solid var(--bot-bdr);border-radius:4px 16px 16px 16px}
.dots span{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.3;animation:dot 1.4s ease-in-out infinite}
.dots span:nth-child(2){animation-delay:.2s}
.dots span:nth-child(3){animation-delay:.4s}

.inputbar{padding:18px 24px;border-top:1px solid var(--border);background:var(--panel);display:flex;gap:12px;align-items:flex-end}

#inp{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:12px 18px;font-family:var(--font-body);font-size:14.5px;font-weight:400;color:var(--cream);outline:none;resize:none;min-height:45px;max-height:120px;line-height:1.5;transition:all .25s ease;box-shadow:inset 0 2px 4px rgba(0,0,0,0.2)}
#inp::placeholder{color:var(--cream-muted);opacity:.5}
#inp:focus{border-color:rgba(212,170,80,.35);box-shadow:0 0 0 3px rgba(212,170,80,.06), inset 0 2px 4px rgba(0,0,0,0.2)}

#btn{width:45px;height:45px;border-radius:12px;border:none;flex-shrink:0;background:linear-gradient(135deg,#9C7A23,var(--gold));color:#070503;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 4px 18px rgba(212,170,80,.2)}
#btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 22px rgba(212,170,80,.35)}
#btn:active:not(:disabled){transform:translateY(1px)}
#btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}
#btn svg{width:18px;height:18px;transition:transform 0.2s ease}
#btn:hover:not(:disabled) svg{transform:translate(1px, -1px)}

footer{margin-top:24px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:300;color:var(--cream-muted);opacity:.4;letter-spacing:.5px;animation:fadeUp .7s ease both .2s}

@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes msgIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
@keyframes glow{0%,100%{opacity:1;box-shadow:0 0 10px #4ade80}50%{opacity:.5;box-shadow:0 0 4px #4ade80}}
@keyframes dot{0%,60%,100%{opacity:.3;transform:scale(1)}30%{opacity:1;transform:scale(1.4)}}

@media(max-width:600px){
  #root{padding:24px 12px 36px}
  header{margin-bottom:24px}
  #msgs{min-height:350px;max-height:430px;padding:18px 16px}
  .bubble{max-width:85%}
  .inputbar{padding:14px 16px}
  .t-status{display:none}
}