/*
 * appStoryUpgradeChatlogStyles.css
 * TNT | Appreciation Story — Responsive Upgrade Dev Chat Log
 * Created: 2026-10-08, Stage 3
 * Pairs with: ../styles/tnt-base-styles.css (loaded first in HTML)
 * Fonts loaded in HTML: Merriweather, Inter, Noto Sans Mono
 */

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
    --app-green:        #2d6a4f;
    --app-green-mid:    #52b788;
    --app-green-light:  #b7e4c7;
    --app-amber:        #e9c46a;
    --app-amber-dark:   #a47e3b;
    --app-brown:        #5c3d2e;
    --app-cream:        #f7fce5;
    --app-dark:         #1a2c1e;
    --app-red-soft:     #c0392b;
    --app-orange-soft:  #d35400;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
body { background: #f8f9fa; color: var(--app-dark); font-family: 'Inter', sans-serif; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
#hero {
    background:
        linear-gradient(135deg, rgba(26,44,30,0.85) 0%, rgba(45,106,79,0.62) 100%),
        url('../images/peacefulStream.jpg') center 35% / cover no-repeat;
    min-height: 220px;
    padding: 3.2rem 1rem 2.8rem;
}

.app-hero-title {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 4.5vw, 2.8rem);
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    margin-bottom: 0.65rem;
    line-height: 1.25;
}

.app-hero-subtitle {
    font-size: clamp(0.88rem, 2vw, 1.05rem);
    color: rgba(255,255,255,0.80);
    max-width: 620px;
    margin: 0 auto;
    font-weight: 300;
    line-height: 1.65;
}

/* ── Log Container ────────────────────────────────────────────────────────── */
.log-container { max-width: 860px; margin: 0 auto; padding: 0 1rem 4rem; }

/* ── S.P.A.R.K. 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: rgba(45,106,79,0.10);   border-left: 5px solid var(--app-green);       color: var(--app-dark); }
.spark-p { background: rgba(82,183,136,0.12);  border-left: 5px solid var(--app-green-mid);   color: var(--app-dark); }
.spark-a { background: rgba(233,196,106,0.15); border-left: 5px solid var(--app-amber);        color: #2a1400; }
.spark-r { background: rgba(45,106,79,0.08);   border-left: 5px solid var(--app-green);       color: var(--app-dark); }
.spark-k { background: rgba(164,126,59,0.10);  border-left: 5px solid var(--app-amber-dark);  color: #2a1400; }

/* ── Chat Turns ───────────────────────────────────────────────────────────── */
.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; }
.chat-speaker.copilot { color: var(--app-green); }

.chat-bubble {
    display: inline-block;
    max-width: 88%;
    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 {
    background: #dce8f8;
    border: 1px solid #aacbee;
    color: #0b1e2a;
    border-bottom-right-radius: 3px;
    float: right;
    clear: both;
}
.bubble-copilot {
    background: var(--app-cream);
    border: 1px solid var(--app-green-light);
    color: var(--app-dark);
    border-bottom-left-radius: 3px;
    float: left;
    clear: both;
}
.bubble-user-wrap { text-align: right; }
.bubble-user-wrap .chat-bubble { text-align: left; }
.chat-turn::after { content: ""; display: table; clear: both; }

/* ── Annotation Boxes ─────────────────────────────────────────────────────── */
.critique-box {
    background: #fff8f0;
    border: 2px solid var(--app-amber);
    border-radius: 8px;
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
    font-size: 0.88rem;
}
.critique-label {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--app-amber-dark);
    margin-bottom: 0.3rem;
}

.decision-box {
    background: var(--app-cream);
    border-left: 5px solid var(--app-green);
    border-radius: 0 8px 8px 0;
    padding: 0.9rem 1.1rem;
    margin: 1rem 0;
    font-size: 0.88rem;
}
.decision-label {
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--app-green);
    margin-bottom: 0.3rem;
}

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

/* ── Assessment Checklist ─────────────────────────────────────────────────── */
.checklist {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
}
.checklist li {
    padding: 0.35rem 0 0.35rem 2rem;
    position: relative;
    font-size: 0.88rem;
    border-bottom: 1px solid #f0f0f0;
    line-height: 1.5;
}
.checklist li:last-child { border-bottom: none; }
.checklist li::before {
    position: absolute;
    left: 0.1rem;
    top: 0.35rem;
    font-size: 0.85rem;
    line-height: 1.5;
}

.check-critical li::before { content: "🔴"; }
.check-high     li::before { content: "🟠"; }
.check-medium   li::before { content: "🟡"; }
.check-good     li::before { content: "✅"; }

/* Section headers within checklists */
.checklist-section-head {
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--app-brown);
    margin: 1rem 0 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid var(--app-green-light);
}

/* ── Dividers ─────────────────────────────────────────────────────────────── */
.log-divider {
    text-align: center;
    margin: 2rem 0 0.5rem;
    color: #888;
    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: #ccc;
    vertical-align: middle;
    margin: 0 0.7rem;
}

/* ── Code Snaps ───────────────────────────────────────────────────────────── */
pre.code-snap {
    background: #f5f5f5;
    color: var(--app-dark);
    font-family: "Noto Sans Mono", "Courier New", monospace;
    font-size: 0.82em;
    padding: 0.65rem 0.9rem;
    border-radius: 6px;
    margin: 0.5rem 0;
    overflow-x: auto;
    border: 1px solid #ddd;
}

/* ── Badge-style priority labels ─────────────────────────────────────────── */
.priority-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 0.15rem 0.55rem;
    border-radius: 50px;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.badge-critical { background: #fdecea; color: var(--app-red-soft);  border: 1px solid #f5c6cb; }
.badge-high     { background: #fef3e2; color: var(--app-orange-soft); border: 1px solid #fce5b6; }
.badge-medium   { background: #fffde7; color: #856404; border: 1px solid #ffd54f; }
.badge-good     { background: #e8f5e9; color: var(--app-green);  border: 1px solid var(--app-green-light); }

/* ── Responsive tweaks ────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .chat-bubble { max-width: 98%; }
    .log-divider::before,
    .log-divider::after { width: 25px; }
}