:root{
  --bg:#0c0e0d;
  --panel:#121512;
  --panel-2:#171b17;
  --line:#2a302a;
  --text:#f3f0e8;
  --muted:#9da49b;
  --gold:#c7a96b;
  --gold-2:#e0c98f;
  --danger:#ff7d7d;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"DM Sans",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 75% 15%, rgba(199,169,107,.08), transparent 28%),
    var(--bg);
}
button,textarea{font:inherit}
button{cursor:pointer}
.app-shell{height:100%;display:grid;grid-template-columns:270px 1fr}
.sidebar{
  border-right:1px solid var(--line);
  background:rgba(13,16,13,.94);
  padding:24px 18px;
  display:flex;flex-direction:column;gap:24px
}
.brand{display:flex;align-items:center;gap:12px;padding:0 6px}
.brand-mark{
  width:42px;height:42px;border:1px solid var(--gold);
  color:var(--gold-2);display:grid;place-items:center;
  font-family:"Playfair Display",serif;font-weight:700
}
.brand strong{display:block;letter-spacing:.18em;font-size:14px}
.brand span{display:block;color:var(--muted);font-size:12px;margin-top:3px}
.new-chat{
  border:1px solid var(--gold);
  color:#16130d;background:linear-gradient(135deg,var(--gold-2),var(--gold));
  border-radius:10px;padding:12px 14px;font-weight:700
}
.nav{display:grid;gap:6px}
.nav button{
  text-align:left;color:var(--muted);background:transparent;border:0;
  padding:11px 12px;border-radius:9px
}
.nav button:hover,.nav button.active{background:var(--panel-2);color:var(--text)}
.sidebar-note{
  margin-top:auto;color:var(--muted);font-size:12px;
  display:flex;align-items:center;gap:8px;padding:10px
}
.status-dot{width:8px;height:8px;border-radius:50%;background:#6fd08c;box-shadow:0 0 14px #6fd08c}
.workspace{min-width:0;display:grid;grid-template-rows:auto 1fr auto;height:100vh}
.topbar{
  min-height:78px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:16px 28px
}
.topbar h1{font-family:"Playfair Display",serif;font-size:22px;margin:0}
.topbar p{margin:3px 0 0;color:var(--muted);font-size:12px}
.top-actions{display:flex;gap:10px;align-items:center}
.ghost,.profile{
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  border-radius:10px;padding:10px 13px
}
.profile{width:42px;height:42px;padding:0;border-radius:50%;color:var(--gold-2)}
.chat-area{overflow-y:auto;padding:28px}
.hero{max-width:920px;margin:9vh auto 40px;text-align:center}
.eyebrow{color:var(--gold);letter-spacing:.22em;font-size:11px;font-weight:700}
.hero h2{
  font-family:"Playfair Display",serif;font-size:48px;line-height:1.08;
  margin:18px 0 12px
}
.hero p{color:var(--muted);max-width:650px;margin:0 auto}
.quick-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;max-width:760px;margin:34px auto 0
}
.quick-grid button{
  min-height:80px;text-align:left;border:1px solid var(--line);
  color:var(--text);background:linear-gradient(180deg,#171b17,#121512);
  border-radius:14px;padding:18px
}
.quick-grid button:hover{border-color:#6e6042;transform:translateY(-1px)}
.messages{max-width:920px;margin:0 auto;display:grid;gap:18px}
.message{display:flex;gap:12px;align-items:flex-start}
.message.user{justify-content:flex-end}
.bubble{
  max-width:min(760px,86%);padding:15px 17px;border-radius:16px;
  line-height:1.55;white-space:pre-wrap
}
.message.user .bubble{background:#2b332b;border:1px solid #3a453a}
.message.assistant .bubble{background:#151915;border:1px solid var(--line)}
.message.error .bubble{border-color:#6e3030;color:#ffd2d2}
.avatar{
  width:34px;height:34px;border:1px solid var(--gold);color:var(--gold-2);
  display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:700;flex:0 0 auto
}
.composer{
  border-top:1px solid var(--line);padding:16px 28px 14px;
  display:grid;grid-template-columns:1fr auto;gap:10px;background:rgba(12,14,13,.95)
}
.composer textarea{
  resize:none;max-height:180px;min-height:48px;
  border:1px solid var(--line);background:var(--panel);color:var(--text);
  border-radius:14px;padding:14px 16px;outline:none
}
.composer textarea:focus{border-color:#756440}
.composer button{
  border:0;border-radius:12px;padding:0 20px;font-weight:700;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#17130c
}
.composer-meta{grid-column:1/-1;color:#70776f;font-size:11px;text-align:center}
.hidden{display:none!important}
.typing{opacity:.7}
@media(max-width:800px){
  .app-shell{grid-template-columns:1fr}
  .sidebar{display:none}
  .topbar{padding:14px 16px}
  .chat-area{padding:18px 14px}
  .hero{margin-top:5vh}
  .hero h2{font-size:36px}
  .quick-grid{grid-template-columns:1fr}
  .composer{padding:12px;grid-template-columns:1fr auto}
}