/* =====================================================================
   Chart Analyzer OUTPUT - mirrored 1:1 from production (PROTOTYPE ONLY)
   Copied from assets/css/newuiindex.css so the prototype shows the exact
   production terminal card, spinner, close button and SETUP/ENTRY/STOP/
   TARGET output. The trigger stays the s8 "Chart Analyzer" button, which
   forwards to the real hidden #analyzeChartWebBtn (see s8-analyzer.js).
   Only the analyzer output is mirrored - nothing else is restyled.
   ==================================================================== */

/* Card container adopts the terminal look */
#aiInsightResultCard.info-card {
    background-color: #0d1117;
    border: 1px solid #30363d;
    position: relative;
    overflow: hidden;
}
#aiInsightResultCard.info-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #00d4aa, #7c3aed, #f472b6);
    z-index: 1;
}
#aiInsightResultCard .section {
    padding: 0 !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
}

/* Close 'x' button */
.notification-close {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 0;
    color: var(--text-secondary, #a1a1b5);
    line-height: 1;
    opacity: 0.7;
}
.notification-close:hover {
    opacity: 1;
    color: var(--text, #fff);
}

/* Typing indicator (spinner) */
.typing-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(45, 55, 72, 0.9);
    border-radius: 20px;
    padding: 10px 15px;
    max-width: 70px;
}
.typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64ffda;
    margin: 0 3px;
    animation: typing 1.4s infinite ease-in-out;
}
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Terminal-styled analysis output */
.ai-analysis-terminal {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    color: #c9d1d9;
    font-size: 13px;
}
.terminal-line {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}
.terminal-line:last-child { margin-bottom: 0; }
.terminal-prompt {
    color: #3b82f6;
    margin-right: 10px;
    font-weight: bold;
    min-width: 65px;
    flex-shrink: 0;
    text-transform: uppercase;
}
.terminal-value {
    color: #c9d1d9;
    flex: 1;
    white-space: pre-wrap;
    word-break: break-word;
}
.terminal-highlight {
    color: #79c0ff;
    font-weight: 500;
}
+
/* =====================================================================
   CHART ANALYZER CONTENT PAGE
   Option A marketing-page patterns. These remain isolated behind ca-* and
   ca-page classes so the simulator analyzer output above is unchanged.
   ==================================================================== */

.s8c.ca-page{--s8c-w:1180px}
.ca-hero{display:block;text-align:center}
.ca-state{max-width:960px}
.ca-state--c{margin:0 auto;text-align:center}
.ca-state h1{font-size:var(--s8c-fs-hero);line-height:1.02;letter-spacing:-.028em;font-weight:600;color:#fff;margin:var(--s8-4) 0 0;text-wrap:balance}
.ca-state h1 s{text-decoration:none;color:var(--s8-fg-3)}
.ca-state__no{margin:var(--s8-5) 0 0;font-size:clamp(17px,1.6vw,21px);line-height:1.35;color:var(--s8-fg-2);font-style:italic;text-wrap:pretty}
.ca-state--c .ca-state__no{margin-left:auto;margin-right:auto;max-width:640px}
.ca-state__yes{display:inline-flex;align-items:baseline;gap:9px;margin:var(--s8-4) 0 0;font-size:clamp(19px,1.9vw,26px);line-height:1.2;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff}
.ca-state__yes::before{content:"";width:26px;height:2px;background:var(--s8-accent);transform:translateY(-6px)}
.ca-state__yes em{font-style:normal;color:var(--s8-accent-hi)}

.ca-stage{position:relative;border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-inset);overflow:hidden;aspect-ratio:16/9}
.ca-stage iframe{display:block;width:100%;height:100%;border:0}
.ca-stage--glow{box-shadow:0 0 0 1px var(--s8-accent-line),0 40px 120px -40px rgba(43,143,224,.42)}
.ca-cap{display:flex;align-items:center;gap:var(--s8-3);margin-top:var(--s8-4);font-size:var(--s8-fs-sm);color:var(--s8-fg-2)}
.ca-cap::before{content:"";flex:none;width:20px;height:1px;background:var(--s8-line-2)}

.ca-how-copy{max-width:920px;margin:0 auto}
.ca-negs{display:flex;flex-wrap:wrap;gap:var(--s8-2);margin-top:var(--s8-5)}
.ca-negs--center{justify-content:center}
.ca-neg{display:inline-flex;align-items:center;gap:7px;height:var(--s8-h-sm);padding:0 11px;border:1px solid var(--s8-line);border-radius:var(--s8-r-pill);background:var(--s8-inset);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3)}
.ca-neg::before{content:"";width:8px;height:1px;background:var(--s8-down)}

.ca-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.ca-mode{display:flex;flex-direction:column;background:var(--s8-panel);padding:var(--s8-6);transition:background var(--s8-t) var(--s8-ease)}
.ca-mode:hover{background:var(--s8-panel-2)}
.ca-mode__h{display:flex;align-items:center;gap:var(--s8-3)}
.ca-mode__ico{flex:none;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--s8-r);background:var(--s8-accent-tint);border:1px solid var(--s8-accent-line);color:var(--s8-accent-fg)}
.ca-mode__ico svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ca-mode--live .ca-mode__ico{background:var(--s8-up-tint);border-color:var(--s8-up-line);color:var(--s8-up)}
.ca-mode__t{margin:0;font-size:var(--s8-fs-xl);line-height:1.2;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff}
.ca-mode__tag{margin-left:auto;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4)}
.ca-mode p{margin:var(--s8-4) 0 0;font-size:var(--s8-fs-md);color:var(--s8-fg-2);text-wrap:pretty}
.ca-mode p strong{color:#fff;font-weight:600}
.ca-mode p.ca-mode__use{padding-top:var(--s8-4);border-top:1px solid var(--s8-line);color:var(--s8-fg-3);font-size:var(--s8-fs-sm)}
.ca-mode__cta{margin-top:auto;padding-top:var(--s8-5);border-top:1px solid var(--s8-line);display:flex;align-items:center;gap:var(--s8-4)}

.ca-plats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:var(--s8-4);background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.ca-plat{display:flex;align-items:center;gap:var(--s8-4);background:var(--s8-panel);padding:var(--s8-4) var(--s8-5)}
.ca-plat__logo{flex:none;display:flex;width:96px;height:34px;border:1px solid var(--s8-line);border-radius:var(--s8-r-sm);background:var(--s8-inset);overflow:hidden}
.ca-plat__logo img{display:block;width:100%;height:100%;padding:5px;object-fit:contain;opacity:.82}
.ca-plat b{display:block;font-size:var(--s8-fs-sm);font-weight:600;color:var(--s8-fg)}
.ca-plat span{display:block;margin-top:3px;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4)}
.ca-plat__ok{margin-left:auto;color:var(--s8-up)}
.ca-plat__ok svg{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

.ca-disc{margin-top:var(--s8c-gap);border:1px solid var(--s8-line);border-top:2px solid var(--s8-warn-line);border-radius:var(--s8-r-lg);background:var(--s8-panel);padding:var(--s8-5) var(--s8-6)}
.ca-disc__h{display:flex;align-items:center;gap:var(--s8-2);font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-warn)}
.ca-disc__h svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ca-disc p{margin:var(--s8-3) 0 0;max-width:76ch;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}
.ca-disc p strong{color:var(--s8-fg);font-weight:600}

@media(max-width:860px){.ca-modes{grid-template-columns:1fr}}
@media(max-width:680px){.ca-plats{grid-template-columns:1fr}.ca-mode{padding:var(--s8-5)}.ca-mode__h{align-items:flex-start;flex-wrap:wrap}.ca-mode__tag{margin-left:47px}}