:root {
    --bg: #0a0a0c;
    --panel: #111318;
    --panel-alt: #16191f;
    --border: #2a2e37;
    --amber: #ffab1f;
    --amber-dim: #b8791a;
    --text: #d7dae0;
    --text-dim: #7c8290;
    --green: #2ecc71;
    --red: #e74c3c;
    --blue: #4aa3ff;
    --mono: 'Consolas', 'SFMono-Regular', 'Menlo', 'Courier New', monospace;
    --sans: -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
}

/* ---------- Login screen ---------- */

#login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-box {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 40px;
    width: 320px;
    text-align: center;
}

.login-box h1 {
    color: var(--amber);
    font-family: var(--mono);
    letter-spacing: 2px;
    font-size: 20px;
    margin: 0 0 24px;
}

.login-box input {
    width: 100%;
    padding: 10px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    margin-bottom: 12px;
}

.login-box button, .btn {
    background: var(--amber);
    color: #1a1200;
    border: none;
    padding: 10px 16px;
    font-weight: 600;
    font-family: var(--mono);
    cursor: pointer;
    letter-spacing: 1px;
}

.login-box button:hover, .btn:hover { background: #ffbb4d; }

.error-text { color: var(--red); font-size: 12px; min-height: 16px; margin-top: 4px; }

/* ---------- App shell ---------- */

#app { display: none; min-height: 100vh; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--panel);
    border-bottom: 2px solid var(--amber-dim);
}

.topbar .brand {
    font-family: var(--mono);
    color: var(--amber);
    letter-spacing: 3px;
    font-weight: 700;
}

.topbar .brand small {
    color: var(--text-dim);
    letter-spacing: 1px;
    font-weight: 400;
    margin-left: 8px;
}

#logout-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 6px 12px;
    cursor: pointer;
    font-family: var(--mono);
}
#logout-btn:hover { border-color: var(--amber); color: var(--amber); }

/* ---------- Search panel ---------- */

#search-panel {
    display: flex;
    gap: 10px;
    padding: 16px 20px;
    background: var(--panel-alt);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    align-items: flex-start;
}

#coin-input {
    width: 160px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--amber);
    font-family: var(--mono);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#prompt-input {
    flex: 1;
    min-width: 240px;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--sans);
    resize: vertical;
    min-height: 42px;
}

#run-btn { padding: 10px 20px; }
#run-btn:disabled { opacity: 0.5; cursor: wait; }

#status-line {
    font-family: var(--mono);
    color: var(--text-dim);
    padding: 0 20px 12px;
    font-size: 12px;
    min-height: 16px;
}
#status-line.error { color: var(--red); }

/* ---------- Report ---------- */

#report { display: none; padding: 20px; }

/* Hidden by default (CoinGecko doesn't have a description for every coin) — shown via JS only
   when renderAboutSection() actually has text to put in it. */
#about-panel { display: none; margin-bottom: 16px; }
#about-panel p { margin: 0; line-height: 1.6; }

#report-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

#report-title { font-size: 22px; font-weight: 700; }
#report-title .ticker { color: var(--amber); font-family: var(--mono); }
#report-subline { color: var(--text-dim); font-size: 12px; font-family: var(--mono); }

#report-price { text-align: right; font-family: var(--mono); }
#report-price .px { font-size: 26px; font-weight: 700; }
.change-up { color: var(--green); }
.change-down { color: var(--red); }

.badge {
    display: inline-block;
    border: 1px solid var(--border);
    padding: 2px 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-transform: uppercase;
}
/* Fear & Greed Index classification badge — this app's replacement for the stock agent's
   market-hours session badge, since crypto trades 24/7 and has no session to show instead. */
.badge.fg-extreme-fear, .badge.fg-fear { color: var(--red); border-color: var(--red); }
.badge.fg-neutral { color: var(--text-dim); }
.badge.fg-greed, .badge.fg-extreme-greed { color: var(--green); border-color: var(--green); }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    padding: 14px;
}

.panel h3 {
    margin: 0 0 10px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--amber);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
}

/* Used where a panel's h3 needs a button (e.g. Export MD) on the same line, flush right. */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.panel-header h3 { margin: 0; border-bottom: none; padding-bottom: 0; }

.btn-small { padding: 5px 10px; font-size: 11px; }

.panel.full { grid-column: 1 / -1; }

/* Price/Volume/RSI/MACD stack full-width, one per row, so their date axes stay aligned —
   a separate block from .grid (used for the table panels below) because those are meant to
   wrap into columns on wide screens, while these charts must never sit side by side. Heights
   step down from the main Price chart to the auxiliary MACD chart so MACD reads as a
   secondary indicator rather than competing with Price for visual weight. */
.chart-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}
.chart-canvas-box { position: relative; width: 100%; }
.chart-canvas-main { height: 340px; }
.chart-canvas-secondary { height: 160px; }
/* MACD plots 3 series (histogram + 2 lines) at once, unlike the single-series Volume/RSI
   charts above — squeezing it into the same short height as those made the lines
   indistinguishable, so it gets the Price chart's full height instead. */
.chart-canvas-aux { height: 340px; }

canvas { max-width: 100%; }

table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
table td, table th { padding: 5px 6px; border-bottom: 1px solid var(--border); text-align: left; }
table th { color: var(--text-dim); font-weight: 400; }
table td.num { text-align: right; }

.narrative { line-height: 1.6; font-size: 14px; }
.narrative h1, .narrative h2, .narrative h3 { color: var(--amber); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin: 18px 0 8px; }
.narrative p { margin: 0 0 10px; }
.narrative ul { margin: 0 0 10px; padding-left: 20px; }
.narrative strong { color: #fff; }
.narrative hr { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
.narrative em { color: var(--text-dim); }

.events-list, .flags-list { margin: 0; padding-left: 18px; }
.events-list li, .flags-list li { margin-bottom: 6px; }

/* Model-suggested follow-up questions (see agent_loop.php's [[FOLLOWUP_QUESTIONS]] marker) —
   clickable chips that auto-send when clicked. Cleared and replaced by the next turn's own
   suggestions (or removed with no replacement if the model didn't produce any that time), so
   only the most recent answer's suggestions are ever on screen at once. */
.suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.suggestion-chip {
    background: transparent;
    border: 1px solid var(--amber-dim);
    color: var(--amber);
    padding: 6px 12px;
    font-family: var(--mono);
    font-size: 12px;
    cursor: pointer;
    border-radius: 3px;
    text-align: left;
}
.suggestion-chip:hover { background: var(--amber-dim); color: #1a1200; }
.suggestion-chip:disabled { opacity: 0.5; cursor: wait; }

#report-actions { display: flex; gap: 10px; margin-bottom: 16px; }

/* ---------- Chat panel ---------- */

#chat-panel { display: none; padding: 0 20px 30px; }

#chat-messages {
    background: var(--panel);
    border: 1px solid var(--border);
    height: 320px;
    overflow-y: auto;
    padding: 14px;
    margin-bottom: 10px;
}

.chat-msg { margin-bottom: 14px; max-width: 80%; }
.chat-msg.user { margin-left: auto; text-align: right; }
.chat-msg .bubble {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 3px;
    text-align: left;
    line-height: 1.5;
}
.chat-msg.user .bubble { background: var(--amber-dim); color: #1a1200; }
.chat-msg.agent .bubble { background: var(--panel-alt); border: 1px solid var(--border); }
.chat-msg .bubble .narrative { font-size: 13px; }

#chat-input-row { display: flex; gap: 10px; }
#chat-input {
    flex: 1;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--sans);
}

.thinking { color: var(--text-dim); font-family: var(--mono); font-size: 12px; font-style: italic; }

/* Hidden (empty, no border/padding) until the first analysis or chat response populates it —
   see renderUsageFooter() in app.js. Refreshed after every response so it always reflects the
   most recent OpenRouter call, not a running total. */
#usage-footer {
    margin-top: 16px;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-dim);
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}
#usage-footer:empty { display: none; border-top: none; padding: 0; margin-top: 0; }
#usage-footer span b { color: var(--text); font-weight: 400; }

@media (max-width: 640px) {
    #report-header { flex-direction: column; }
    #report-price { text-align: left; }
    .chat-msg { max-width: 95%; }
    #usage-footer { font-size: 10px; gap: 3px 12px; }
}