:root {
  --bg: #07080b;
  --panel: rgba(14, 16, 21, 0.82);
  --line: rgba(255, 255, 255, 0.09);
  --text: #e9ecf1;
  --dim: #8a93a3;
  --green: #3dfc8a;
  --green-dim: rgba(61, 252, 138, 0.12);
  --amber: #ffc857;
  --red: #ff5d6c;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
  --side: 360px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--mono); overflow: hidden; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, border-color 0.15s;
}
.pill:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); }
.pill:disabled { cursor: default; opacity: 0.7; }
.pill .val { color: var(--dim); font-weight: 400; }
.pill.copied { border-color: var(--green); color: var(--green); }
.pill.copied .val { color: var(--green); }

/* ---- Header */
#top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px; pointer-events: none;
}
#top > * { pointer-events: auto; }
.brand h1 {
  margin: 0; font-family: var(--sans); font-weight: 700; font-size: clamp(22px, 3vw, 34px);
  letter-spacing: -0.01em; line-height: 1; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
}
#ticker { color: var(--green); font-size: 0.6em; vertical-align: middle; }
.sub { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.live { color: var(--red); font-weight: 800; animation: blink 1.6s infinite; }
#watchers { color: var(--text); }
@keyframes blink { 50% { opacity: 0.35; } }
.links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body.wide .links { margin-right: calc(var(--side) + 12px); }

/* ---- The dev's wallet / PnL */
#wallet { position: fixed; left: 20px; bottom: 20px; z-index: 5; width: min(460px, calc(100vw - var(--side) - 64px)); padding: 12px 14px; }
.wallet-head { all: unset; display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; cursor: default; }
.wallet-sum { display: flex; gap: 8px; align-items: center; }
.wallet-sum b { font-size: 12px; }
.wallet-head .chev { display: none; }
.wallet-stats { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 4px 18px; align-items: end; margin-top: 10px; }
.wallet-stats > div { display: flex; flex-direction: column; gap: 2px; }
.wallet-stats .k { font-size: 10px; color: var(--dim); letter-spacing: 0.08em; text-transform: uppercase; }
.wallet-stats b { font-size: 16px; }
#w-addr { justify-self: end; text-decoration: none; text-transform: none; letter-spacing: 0; }
#w-addr:hover { color: var(--text); }
#w-chart { width: 100%; height: 60px; margin-top: 8px; display: block; }
#w-trades { list-style: none; margin: 8px 0 0; padding: 0; max-height: 150px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #333 transparent; }
#w-trades li a { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 10px; align-items: center; padding: 5px 4px; font-size: 12px; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); }
#w-trades li a:hover { background: rgba(255, 255, 255, 0.04); }
#w-trades .kind { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-align: center; border-radius: 4px; padding: 2px 0; }
#w-trades .buy { background: rgba(61, 252, 138, 0.14); color: var(--green); }
#w-trades .sell { background: rgba(255, 93, 108, 0.14); color: var(--red); }
#w-trades .fees { background: rgba(255, 200, 87, 0.14); color: var(--amber); }
#w-trades .ago { color: var(--dim); font-size: 11px; }
#w-trades .empty { color: var(--dim); font-style: italic; font-size: 12px; padding: 6px 2px; }
.up { color: var(--green); }
.down { color: var(--red); }
#wallet.flash { animation: flash 1.2s ease-out; }
@keyframes flash { from { box-shadow: 0 0 0 3px var(--flash, var(--green)), 0 20px 60px rgba(0, 0, 0, 0.45); } }

/* ---- Chat */
#side {
  position: fixed; top: 16px; right: 16px; bottom: 16px; width: var(--side); z-index: 6;
  display: flex; flex-direction: column; overflow: hidden;
}
.tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.tab { all: unset; cursor: pointer; text-align: center; padding: 13px 8px 11px; font-weight: 800; font-size: 12px; letter-spacing: 0.08em; color: var(--dim); border-bottom: 2px solid transparent; }
.tab.on { color: var(--text); border-bottom-color: var(--green); }
.pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#req { padding: 12px; gap: 8px; }
#req .small { margin: 0; font-size: 11px; color: var(--dim); }
#req-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
#req-form input { min-width: 0; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 12px; outline: none; }
#req-form input:focus { border-color: rgba(61, 252, 138, 0.5); }
#req-form button { background: var(--green); color: #04130a; border: 0; border-radius: 9px; padding: 0 14px; font-weight: 800; cursor: pointer; }
#req-form button:disabled { opacity: 0.5; cursor: wait; }
#req-hint { font-size: 11px; color: var(--red); min-height: 0; }
#req-list { list-style: none; margin: 4px 0 0; padding: 0; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
#req-list li { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12px; }
#req-list .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
#req-list .sym { font-weight: 800; }
#req-list .meta { color: var(--dim); font-size: 11px; margin-top: 2px; }
#req-list .say { margin-top: 6px; color: #d9ffe9; }
.verdict { font-size: 10px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 4px; white-space: nowrap; }
.verdict.bid { background: var(--green); color: #04130a; }
.verdict.pass { background: var(--red); color: #1a0306; }
.verdict.pending { background: rgba(255, 255, 255, 0.08); color: var(--dim); }
.chat-head { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; }
.chat-head .small { font-weight: 400; font-size: 11px; letter-spacing: 0; color: var(--dim); }
#log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; scrollbar-color: #333 transparent; overscroll-behavior: contain; }
.msg { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; padding: 2px 4px; }
.msg .name { color: #9db4ff; font-weight: 600; }
.msg.me .name { color: var(--amber); }
.msg.dev { background: var(--green-dim); border: 1px solid rgba(61, 252, 138, 0.25); border-radius: 10px; padding: 7px 10px; }
.msg.dev .tag { background: var(--green); color: #04130a; font-weight: 800; font-size: 10px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px; }
.msg.dev .text { color: #d9ffe9; }
.msg .quote { font-size: 11px; color: var(--dim); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.sys { color: var(--dim); font-style: italic; font-size: 12px; }
.msg .coin { display: inline-flex; gap: 8px; margin: 4px 0 0; padding: 3px 8px; border-radius: 6px; font-size: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--dim); }
.msg .coin b { color: var(--text); }
.msg.removed .text { color: var(--dim); font-style: italic; font-size: 12px; }
#send { display: grid; grid-template-columns: 84px 1fr auto; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
#send input { min-width: 0; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 9px; padding: 10px; font-size: 13px; outline: none; }
#send input:focus { border-color: rgba(61, 252, 138, 0.5); }
#name { color: var(--amber); }
#send button { background: var(--green); color: #04130a; border: 0; border-radius: 9px; padding: 0 14px; font-weight: 800; cursor: pointer; }
#send button:disabled { opacity: 0.5; cursor: wait; }
#hint { min-height: 0; padding: 0 12px; font-size: 11px; color: var(--red); }
#hint:not(:empty) { padding-bottom: 8px; }

/* ---- Speech bubble */
#bubble {
  position: fixed; left: 0; top: 0; z-index: 4; max-width: min(320px, 70vw);
  background: #fffdf6; color: #111; border-radius: 14px; padding: 10px 14px;
  font-family: var(--sans); font-weight: 500; font-size: 15px; line-height: 1.35;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); pointer-events: none; will-change: transform;
}
#bubble::after {
  content: ''; position: absolute; bottom: -9px; left: calc(var(--tail, 50%) - 9px);
  border: 9px solid transparent; border-bottom: 0; border-top-color: #fffdf6;
}
#bubble.pop #bubble-text { animation: pop 0.25s ease-out; }
@keyframes pop { from { opacity: 0; transform: scale(0.85); } }

#thinking { position: fixed; left: 0; top: 0; z-index: 4; display: flex; gap: 4px; background: #fffdf6; padding: 8px 10px; border-radius: 12px; pointer-events: none; }
#thinking span { width: 6px; height: 6px; border-radius: 50%; background: #555; animation: dot 1s infinite; }
#thinking span:nth-child(2) { animation-delay: 0.15s; }
#thinking span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { transform: translateY(-3px); opacity: 0.4; } }

.zzz { position: fixed; z-index: 3; font-family: var(--sans); font-weight: 700; color: #cfe3ff; pointer-events: none; animation: zzz 2.6s ease-out forwards; text-shadow: 0 0 8px rgba(120, 170, 255, 0.6); }
@keyframes zzz { from { opacity: 0; transform: translate(0, 0) scale(0.7); } 20% { opacity: 1; } to { opacity: 0; transform: translate(34px, -70px) scale(1.6); } }

#offline { position: fixed; left: 50%; top: 90px; transform: translateX(-50%); z-index: 7; background: var(--panel); border: 1px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: 12px; color: var(--dim); }

/* ---- Narrow screens: header, box, key bar, chat sheet */
@media (max-width: 899px) {
  #top { position: fixed; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; flex-direction: column; gap: 8px; background: linear-gradient(var(--bg) 60%, transparent); }
  .tagline { display: none; }
  .links { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .pill { padding: 6px 10px; font-size: 11px; }
  #side { top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); width: auto; height: 40vh; height: 40dvh; }
  #wallet { left: 8px; right: 8px; width: auto; bottom: calc(40dvh + 16px + env(safe-area-inset-bottom)); padding: 10px 12px; }
  .wallet-head { cursor: pointer; }
  .wallet-head .chev { display: inline; transition: transform 0.2s; }
  #wallet .wallet-body { display: none; }
  #wallet.open .wallet-body { display: block; }
  #wallet.open .chev { transform: rotate(90deg); }
  #bubble { font-size: 14px; }
}