/* ─────────────────────────────────────────────────────────────
   graysonsSongChatlogStyles.css
   TNT | GraysonsSong2026-10-18 | S.P.A.R.K. Chat Log
   Palette: deep night sky, star gold, sky blue
──────────────────────────────────────────────────────────────── */

:root {
    --gs-dark:   #07091c;
    --gs-navy:   #0d1230;
    --gs-gold:   #ffd740;
    --gs-amber:  #ffaa00;
    --gs-sky:    #3d7fc4;
    --mono:      'Noto Sans Mono', 'Courier New', monospace;
}

body { font-family: 'Inter', sans-serif; background: #f8f9fa; }

/* ── Hero ─────────────────────────────────────────────────── */
#hero {
    background:
        linear-gradient(to bottom,
            rgba(5, 8, 25, 0.60) 0%,
            rgba(5, 8, 25, 0.38) 40%,
            rgba(5, 8, 25, 0.72) 100%),
        url('../../images/twinkle-twinkle-book-cover-e1748091069868-1200x675.webp')
        center 30% / cover no-repeat;
    background-color: var(--gs-dark);
    min-height: 200px;
    padding: 3rem 1rem;
}

.hero-eyebrow { color: var(--gs-gold); font-size:0.72rem; letter-spacing:3px; text-transform:uppercase; font-weight:700; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.hero-title   { font-family:'Boogaloo',cursive; font-size:clamp(1.8rem,5vw,2.8rem); color:var(--gs-gold); text-shadow: 0 0 24px rgba(255,215,64,0.4), 0 2px 8px rgba(0,0,0,0.8); }
.hero-subtitle { font-size:clamp(0.88rem,2vw,1rem); color:rgba(255,255,255,0.80); text-shadow: 0 1px 4px rgba(0,0,0,0.8); }

/* ── SPARK bar ────────────────────────────────────────────── */
.spark-bar {
    background: var(--gs-navy);
    padding: 0.52rem 1.2rem;
    display: flex; align-items: center; flex-wrap: wrap; gap: 1.2rem;
    border-bottom: 2px solid var(--gs-gold);
    font-size: 0.88rem;
}
.spark-links { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.spark-links a { color: var(--gs-gold); font-weight: 700; text-decoration: none; }
.spark-links a:hover { color: #fff; text-decoration: underline; }
.spark-bar > span { color: rgba(255,255,255,0.35); font-size: 0.80rem; margin-left: auto; }

/* ── Log container ────────────────────────────────────────── */
.log-container { max-width:840px; margin:0 auto; padding:0 1rem 3rem; }
.log-divider { text-align:center; margin:2rem 0 0.5rem; color:#aaa; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; }
.log-divider::before, .log-divider::after { content:""; display:inline-block; width:60px; height:1px; background:#ddd; vertical-align:middle; margin:0 0.7rem; }

/* ── SPARK banners ────────────────────────────────────────── */
.spark-banner { display:flex; align-items:flex-start; gap:0.9rem; padding:0.9rem 1.1rem; border-radius:10px; margin:1.8rem 0 0.7rem; font-size:0.9rem; }
.spark-banner .spark-icon { font-size:1.6rem; flex-shrink:0; line-height:1.2; }
.spark-banner strong { display:block; font-size:1rem; margin-bottom:0.2rem; }
.spark-s { background:#e8f4fd; border-left:5px solid #3498DB; }
.spark-p { background:#eafaf1; border-left:5px solid #27AE60; }
.spark-a { background:#fef9e7; border-left:5px solid #F1C40F; }
.spark-r { background:#fdf2fb; border-left:5px solid #8E44AD; }
.spark-k { background:#fff8e6; border-left:5px solid var(--gs-gold); }

/* ── Chat bubbles ─────────────────────────────────────────── */
.chat-turn { margin:0.5rem 0 1.2rem; }
.chat-speaker { font-size:0.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:0.3rem; }
.chat-speaker.user { color:#1a5276; text-align:right; }
.bubble-user    { background:#d6eaf8; border:1px solid #aed6f1; color:#1a2a3a; border-bottom-right-radius:3px; float:right; clear:both; }
.bubble-copilot { background:#eafaf1; border:1px solid #a9dfbf; color:#1a2a1a; border-bottom-left-radius:3px; float:left; clear:both; }
.chat-bubble { display:inline-block; max-width:90%; padding:0.75rem 1rem; border-radius:12px; font-size:0.92rem; line-height:1.6; }
.chat-bubble p:last-child { margin-bottom:0; }
.bubble-user-wrap { text-align:right; }
.bubble-user-wrap .chat-bubble { text-align:left; }
.chat-turn::after { content:""; display:table; clear:both; }
.chat-bubble code { background:rgba(0,0,0,0.08); padding:1px 5px; border-radius:3px; font-family:var(--mono); font-size:0.85em; }
.chat-bubble pre  { background:rgba(0,0,0,0.06); padding:0.6rem 0.8rem; border-radius:6px; font-size:0.80rem; margin:0.5rem 0 0; overflow-x:auto; font-family:var(--mono); }

/* ── Annotation boxes ─────────────────────────────────────── */
.decision-box { background:#f0f8ee; border-left:5px solid #2e7d32; border-radius:0 8px 8px 0; padding:0.9rem 1.1rem; margin:1rem 0; font-size:0.88rem; }
.decision-box .decision-label { font-weight:700; font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:#1a5a1a; margin-bottom:0.3rem; }

.critique-box { background:#fffbf2; border:2px solid var(--gs-amber); border-radius:8px; padding:0.9rem 1.1rem; margin:1rem 0; font-size:0.88rem; }
.critique-box .critique-label { font-weight:700; font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:#8a5a00; margin-bottom:0.3rem; }

.aside-box { background:#f8f9fa; border:1px solid #dee2e6; border-radius:8px; padding:0.9rem 1.1rem; margin:1rem 0; font-size:0.88rem; }
.aside-box .aside-label { font-weight:700; font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:#333; margin-bottom:0.3rem; }

.tutorial-box { background:#fff8e6; border:1px solid rgba(255,215,64,0.40); border-radius:8px; padding:0.9rem 1.1rem; margin:1rem 0; font-size:0.88rem; }
.tutorial-box .tutorial-label { font-weight:700; font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:#8a6600; margin-bottom:0.3rem; }

.warn-box { background:#fef2f2; border-left:5px solid #e53e3e; border-radius:0 8px 8px 0; padding:0.9rem 1.1rem; margin:1rem 0; font-size:0.88rem; }
.warn-box .warn-label { font-weight:700; font-size:0.72rem; letter-spacing:2px; text-transform:uppercase; color:#9b2020; margin-bottom:0.3rem; }

/* ── Code snippets ────────────────────────────────────────── */
pre.code-snippet { background:#1e1e2e; color:#cdd6f4; border-radius:8px; padding:0.85rem 1.1rem; font-size:0.78rem; overflow-x:auto; margin:0.75rem 0; font-family:var(--mono); }
pre.code-snippet .kw { color:#89b4fa; }
pre.code-snippet .cm { color:#585b70; font-style:italic; }
pre.code-snippet .fn { color:#a6e3a1; }
pre.code-snippet .nu { color:#fab387; }
pre.code-snippet .st { color:#a6e3a1; }

/* ── Footer ───────────────────────────────────────────────── */
footer {
    background: #040410;
    border-top: 2px solid rgba(255,215,64,0.16);
    padding: 2rem 0 1.5rem;
    text-align: center;
}
.footer-icons { display:flex; justify-content:center; gap:1.25rem; margin-bottom:1rem; flex-wrap:wrap; list-style:none; padding:0; }
.footer-icons a img { width:28px; height:28px; opacity:0.45; transition:opacity 0.2s; }
.footer-icons a:hover img { opacity:0.80; }
.footer-text { font-size:0.80rem; color:rgba(255,255,255,0.32); line-height:1.7; margin-bottom:0.25rem; }