/* ── Celtro — Shared Design System ── Obsidian & Aged Gold ── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root {
  --bg:         #0a0a0a;
  --bg-2:       #0e0e0e;
  --card:       #111111;
  --card-2:     #141414;
  --border:     #1c1c1c;
  --border-2:   #252525;
  --border-hi:  #333333;
  --gold:       #c9a84c;
  --gold-b:     #dfc068;
  --gold-dim:   rgba(201,168,76,0.09);
  --gold-glow:  rgba(201,168,76,0.18);
  --teal:       #4a7c8e;
  --teal-b:     #5a9ab0;
  --teal-dim:   rgba(74,124,142,0.12);
  --white:      #f0f0f0;
  --white-2:    #aaaaaa;
  --muted:      #555555;
  --dim:        #2e2e2e;
  --good:       #5a9a78;
  --bad:        #8a5050;
  --font:       'Inter Tight','Helvetica Neue',sans-serif;
  --mono:       'JetBrains Mono',ui-monospace,monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); min-height: 100vh; overflow-x: hidden; }
body { font-family: var(--font); color: var(--white); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-2); }

/* ── Grid bg ── */
.grid-bg {
  background-image:
    linear-gradient(to right,  rgba(201,168,76,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(201,168,76,0.018) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* ── Typography ── */
.mono  { font-family: var(--mono); letter-spacing: 0; }
.eyebrow {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow-gold { color: var(--gold); }
.wordmark {
  font-family: var(--font); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; font-size: 14px;
}
.wordmark::after { content: '·'; color: var(--gold); margin-left: 0.35em; }

/* ── Dots ── */
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--good); }
.dot-gold { background:var(--gold); box-shadow:0 0 8px var(--gold-glow); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.25} }
.pulse { animation: pulse 2.6s ease-in-out infinite; }

/* ── Corner labels (fixed) ── */
.corner { position:fixed; font-family:var(--mono); font-size:9px; letter-spacing:0.22em; z-index:200; pointer-events:none; }
.c-tl { top:12px; left:16px; color:var(--gold); }
.c-tr { top:12px; right:16px; color:var(--muted); }
.c-bl { bottom:12px; left:16px; color:var(--muted); }
.c-br { bottom:12px; right:16px; color:var(--muted); }

/* ── Console frame ── */
.console { margin:44px 36px; border:1px solid var(--border-2); position:relative; }
.xh { position:absolute; width:14px; height:14px; pointer-events:none; }
.xh::before,.xh::after { content:''; position:absolute; background:var(--gold); }
.xh::before { left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.xh::after  { top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }

/* ── Nav ── */
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 28px; border-bottom:1px solid var(--border);
  background:rgba(10,10,10,0.95); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:100;
}
.nav-left  { display:flex; align-items:center; gap:28px; }
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-link {
  font-family:var(--mono); font-size:10px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--muted); transition:color 150ms;
}
.nav-link:hover,.nav-link.active { color:var(--white); }
.nav-link.gold { color:var(--gold); }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.16em;
  padding:10px 18px; border:1px solid var(--border-2);
  background:transparent; color:var(--white-2);
  cursor:pointer; transition:all 150ms;
}
.btn:hover { border-color:var(--gold); color:var(--gold); }
.btn-gold {
  background:var(--gold); border-color:var(--gold);
  color:#0a0800; font-weight:500;
}
.btn-gold:hover { background:var(--gold-b); border-color:var(--gold-b); box-shadow:0 0 24px var(--gold-glow); color:#0a0800; }

/* ── Panel ── */
.panel { background:var(--card); border:1px solid var(--border); }
.panel-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:var(--gold-dim);
}
.panel-title { font-family:var(--mono); font-size:10px; letter-spacing:0.18em; color:var(--gold); }
.panel-meta  { font-family:var(--mono); font-size:10px; color:var(--muted); }

/* ── Ticker ── */
.ticker-bar {
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--card-2); padding:8px 0; overflow:hidden; white-space:nowrap;
}
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-inner { display:inline-flex; gap:40px; padding-right:40px; animation:ticker 100s linear infinite; }
.t-key { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--gold); }
.t-val { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:var(--muted); margin-left:7px; }

/* ── Chat section ── */
.chat-wrap { display:grid; grid-template-columns:1.6fr 1fr; border-top:1px solid var(--border); }
.chat-main { border-right:1px solid var(--border); display:flex; flex-direction:column; }
.chat-side { background:var(--card-2); display:flex; flex-direction:column; }
.chat-messages {
  flex:1; min-height:220px; max-height:280px; overflow-y:auto;
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.msg { max-width:84%; display:flex; flex-direction:column; gap:3px; }
.msg.user { align-self:flex-end; align-items:flex-end; }
.msg.ai   { align-self:flex-start; }
.bubble {
  padding:9px 14px; font-size:13px; line-height:1.65; font-weight:300;
}
.msg.user .bubble { background:var(--gold-dim); border:1px solid rgba(201,168,76,0.28); color:var(--white); }
.msg.ai   .bubble { background:var(--card); border:1px solid var(--border-2); color:var(--white-2); }
.msg-time { font-family:var(--mono); font-size:9px; color:var(--muted); }
.typing { display:flex; gap:4px; padding:9px 14px; background:var(--card); border:1px solid var(--border-2); width:fit-content; }
.t-dot { width:5px; height:5px; background:var(--gold); border-radius:50%; }
@keyframes blink{0%,80%,100%{opacity:0.15}40%{opacity:1}}
.t-dot:nth-child(1){animation:blink 1.2s infinite}
.t-dot:nth-child(2){animation:blink 1.2s 0.2s infinite}
.t-dot:nth-child(3){animation:blink 1.2s 0.4s infinite}
.chat-bar { display:flex; border-top:1px solid var(--border); }
.chat-input {
  flex:1; background:var(--card-2); border:none; border-right:1px solid var(--border);
  color:var(--white); font-family:var(--font); font-size:13px;
  padding:13px 16px; outline:none;
}
.chat-input::placeholder { color:var(--muted); }
.chat-send {
  padding:13px 22px; background:var(--gold); border:none;
  color:#0a0800; font-family:var(--mono); font-size:10px;
  letter-spacing:0.16em; font-weight:500; cursor:pointer; transition:background 140ms; white-space:nowrap;
}
.chat-send:hover { background:var(--gold-b); }
.chat-send:disabled { opacity:0.35; cursor:not-allowed; }
.qp-list { padding:14px; display:flex; flex-direction:column; gap:7px; }
.qp { padding:9px 13px; background:transparent; border:1px solid var(--border-2); color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:0.12em; cursor:pointer; text-align:left; transition:all 150ms; }
.qp:hover { border-color:var(--gold); color:var(--gold); background:var(--gold-dim); }

/* ── Toast ── */
.toast {
  position:fixed; bottom:58px; right:36px; z-index:999;
  background:var(--card); border:1px solid var(--gold); padding:10px 18px;
  font-family:var(--mono); font-size:10px; color:var(--gold); letter-spacing:0.18em;
  opacity:0; transition:opacity 0.3s; pointer-events:none;
}
.toast.show { opacity:1; }

/* ── Footer bar ── */
.footer-bar {
  padding:22px 32px; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--border);
}
.footer-tag { font-size:20px; font-weight:300; letter-spacing:-0.01em; margin-top:6px; }
.footer-tag span { color:var(--gold); font-style:italic; }