/* ============================================================================
 * Findex News Runtime — AI Signal stylesheet (v11.17.0)
 *
 * Reuses the existing Reading-Room palette (Inter, IBM Plex, JetBrains Mono)
 * and CSS variables from frontend.css. Every colour referenced here is either
 * inherited via `var(--..)` from the host stylesheet, or a hand-picked muted
 * tone that does NOT alarm the eye — institutional-trader palette.
 *
 * Design choices (psychological clarity):
 *   • Big calm card → smaller calmer panels (information hierarchy, not noise).
 *   • Five-bucket signal uses emerald / sage / slate / amber / coral, none of
 *     them saturated. The eye registers direction without panic.
 *   • All numbers use JetBrains Mono so columns line up — calmer to scan.
 *   • Single accent gradient on the AI button matches the Findex glow already
 *     used by .fs-chart-tf-btn.active so the feature feels native, not bolted on.
 *   • Mobile sheet slides up from bottom (90vh); desktop centres a 720px modal.
 * ==========================================================================*/

/* ── AI Signal button (lives inside the chart card) ──────────────────────── */
.fnrp-ai-wrap {
    padding: 0 16px 14px;
}
.fnrp-ai-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(77,212,172,.35);
    background: linear-gradient(180deg, rgba(77,212,172,.10), rgba(77,212,172,.04));
    color: var(--text);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: all var(--med);
    position: relative;
    overflow: hidden;
}
.fnrp-ai-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, rgba(77,212,172,.16), transparent 60%);
    opacity: 0;
    transition: opacity var(--med);
    pointer-events: none;
}
.fnrp-ai-btn:hover {
    border-color: rgba(77,212,172,.6);
    color: #fff;
    transform: translateY(-1px);
}
.fnrp-ai-btn:hover::after { opacity: 1; }
.fnrp-ai-btn:active { transform: translateY(0); }
.fnrp-ai-btn svg { color: var(--accent); }
[dir="rtl"] .fnrp-ai-btn { letter-spacing: 0; }


/* ── Overlay ─────────────────────────────────────────────────────────────── */
.fnrp-ai-overlay {
    position: fixed;
    inset: 0;
    /* v11.22.20 — sit ABOVE the full-chart modal (z 2147483000) so opening the
       AI signal from inside the chart layers cleanly on top, instead of behind
       it (which made it appear only after the chart was closed). */
    z-index: 2147483600;
    background: rgba(5, 8, 14, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .22s var(--ease, cubic-bezier(.4,0,.2,1));
}
.fnrp-ai-overlay.open {
    display: flex;
    opacity: 1;
    animation: fnrpAiFadeIn .22s var(--ease, cubic-bezier(.4,0,.2,1));
}
@keyframes fnrpAiFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal container ─────────────────────────────────────────────────────── */
.fnrp-ai-modal {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: linear-gradient(180deg, #0e1320 0%, #0a0e15 100%);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    box-shadow:
        0 20px 60px -12px rgba(0,0,0,.65),
        0 0 0 1px rgba(77,212,172,.05) inset;
    color: var(--text, #e3e9f2);
    font-family: var(--sans, 'Inter', system-ui, sans-serif);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fnrpAiPop .26s var(--ease, cubic-bezier(.4,0,.2,1));
}
@keyframes fnrpAiPop {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
[dir="rtl"] .fnrp-ai-modal {
    font-family: var(--sans-ar, 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif);
}

/* Mobile: full-height bottom sheet, slides up */
@media (max-width: 640px) {
    .fnrp-ai-overlay { padding: 0; align-items: flex-end; }
    .fnrp-ai-modal {
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
        animation: fnrpAiSlideUp .28s var(--ease, cubic-bezier(.4,0,.2,1));
    }
    @keyframes fnrpAiSlideUp {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
}

/* ── Head bar ────────────────────────────────────────────────────────────── */
.fnrp-ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(77,212,172,.04), transparent);
}
.fnrp-ai-titlebox {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.fnrp-ai-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text, #e3e9f2);
    letter-spacing: -.01em;
}
.fnrp-ai-sub {
    font-size: 11.5px;
    color: var(--muted, #8c98ad);
    font-family: var(--mono, 'JetBrains Mono', monospace);
}
.fnrp-ai-x {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.06);
    background: transparent;
    color: var(--muted-2, #555f70);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--fast, .12s ease);
    flex: 0 0 auto;
}
.fnrp-ai-x:hover {
    color: var(--text);
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.03);
}

/* ── Body (scrollable) ───────────────────────────────────────────────────── */
.fnrp-ai-body {
    padding: 20px 22px 16px;
    overflow-y: auto;
    flex: 1;
    /* Subtle scrollbar to match the Reading-Room aesthetic */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.12) transparent;
}
.fnrp-ai-body::-webkit-scrollbar { width: 6px; }
.fnrp-ai-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.12);
    border-radius: 6px;
}

/* ── Loading state ───────────────────────────────────────────────────────── */
.fnrp-ai-loading {
    padding: 60px 20px;
    text-align: center;
    color: var(--muted, #8c98ad);
    font-size: 13px;
}
.fnrp-ai-spinner {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid rgba(77,212,172,.15);
    border-top-color: var(--accent, #4dd4ac);
    margin: 0 auto 16px;
    animation: fnrpAiSpin .9s linear infinite;
}
@keyframes fnrpAiSpin {
    to { transform: rotate(360deg); }
}
.fnrp-ai-loading-text { font-family: var(--mono, monospace); letter-spacing: .04em; }
[dir="rtl"] .fnrp-ai-loading-text { font-family: var(--sans-ar); letter-spacing: 0; }

/* ── Error state ─────────────────────────────────────────────────────────── */
.fnrp-ai-err {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-2, #b3bdce);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.fnrp-ai-err-ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(251, 146, 60, 0.12);
    color: #fb923c;
    font-size: 22px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Signal card (the big one) ───────────────────────────────────────────── */
.fnrp-ai-sig-card {
    background: var(--sig-soft, rgba(148,163,184,.08));
    border: 1px solid var(--sig-color, #94a3b8);
    border-radius: 14px;
    padding: 22px 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-bottom: 22px;
}
.fnrp-ai-sig-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center top, var(--sig-soft) 0%, transparent 70%);
    opacity: .6;
    pointer-events: none;
}
.fnrp-ai-sig-icon {
    font-size: 22px;
    color: var(--sig-color);
    font-family: var(--mono, monospace);
    letter-spacing: .15em;
    margin-bottom: 6px;
    position: relative;
}
.fnrp-ai-sig-text {
    font-size: 26px;
    font-weight: 700;
    color: var(--sig-color);
    letter-spacing: .04em;
    line-height: 1.1;
    position: relative;
    text-shadow: 0 0 24px var(--sig-soft);
}
[dir="rtl"] .fnrp-ai-sig-text { letter-spacing: 0; }
.fnrp-ai-sig-meta {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    position: relative;
}
.fnrp-ai-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: start;
}
.fnrp-ai-meter-label {
    font-size: 11px;
    color: var(--muted, #8c98ad);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--mono, monospace);
}
[dir="rtl"] .fnrp-ai-meter-label {
    font-family: var(--sans-ar);
    text-transform: none;
    letter-spacing: 0;
}
.fnrp-ai-meter-bar {
    height: 6px;
    background: rgba(255,255,255,.06);
    border-radius: 99px;
    overflow: hidden;
}
.fnrp-ai-meter-fill {
    height: 100%;
    border-radius: 99px;
    transition: width .6s var(--ease, cubic-bezier(.4,0,.2,1));
}
.fnrp-ai-meter-val {
    font-family: var(--mono, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

/* ── Generic section heading ─────────────────────────────────────────────── */
.fnrp-ai-section {
    margin-bottom: 22px;
}
.fnrp-ai-section:last-child { margin-bottom: 4px; }
.fnrp-ai-h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--muted, #8c98ad);
    margin: 0 0 12px;
    font-weight: 600;
    font-family: var(--mono, monospace);
}
[dir="rtl"] .fnrp-ai-h4 {
    font-family: var(--sans-ar);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

/* ── Timeframe grid ──────────────────────────────────────────────────────── */
.fnrp-ai-tf-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
@media (max-width: 540px) {
    .fnrp-ai-tf-grid { grid-template-columns: repeat(2, 1fr); }
}
.fnrp-ai-tf-cell {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 10px 10px 12px;
    text-align: center;
    transition: border-color var(--fast, .12s ease);
}
.fnrp-ai-tf-cell.pos { border-color: rgba(52,211,153,.30); }
.fnrp-ai-tf-cell.neg { border-color: rgba(251,146,60,.30); }
.fnrp-ai-tf-cell.neu { border-color: rgba(148,163,184,.20); }
.fnrp-ai-tf-cell.unavailable { opacity: .4; }
.fnrp-ai-tf-label {
    font-size: 10.5px;
    color: var(--muted, #8c98ad);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--mono, monospace);
    margin-bottom: 6px;
}
[dir="rtl"] .fnrp-ai-tf-label {
    font-family: var(--sans-ar); text-transform: none; letter-spacing: 0;
}
.fnrp-ai-tf-score {
    font-family: var(--mono, monospace);
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}
.fnrp-ai-tf-cell.pos .fnrp-ai-tf-score { color: #34d399; }
.fnrp-ai-tf-cell.neg .fnrp-ai-tf-score { color: #fb923c; }
.fnrp-ai-tf-cell.neu .fnrp-ai-tf-score { color: #94a3b8; }
.fnrp-ai-tf-rail {
    height: 4px;
    background: linear-gradient(90deg,
        rgba(244,63,94,.25) 0%,
        rgba(148,163,184,.15) 50%,
        rgba(16,185,129,.25) 100%);
    border-radius: 99px;
    position: relative;
    margin-bottom: 6px;
}
.fnrp-ai-tf-mark {
    position: absolute;
    top: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text, #e3e9f2);
    transform: translateX(-50%);
    box-shadow: 0 0 0 2px rgba(0,0,0,.5);
}
.fnrp-ai-tf-cell.pos .fnrp-ai-tf-mark { background: #34d399; }
.fnrp-ai-tf-cell.neg .fnrp-ai-tf-mark { background: #fb923c; }
.fnrp-ai-tf-strength {
    font-size: 10px;
    color: var(--muted-2, #555f70);
    font-family: var(--mono, monospace);
    letter-spacing: .04em;
    text-transform: uppercase;
}
[dir="rtl"] .fnrp-ai-tf-strength {
    font-family: var(--sans-ar); text-transform: none; letter-spacing: 0;
}
.fnrp-ai-tf-na {
    color: var(--muted-2);
    font-family: var(--mono);
    font-size: 13px;
    padding: 12px 0;
}

/* ── Levels grid ─────────────────────────────────────────────────────────── */
.fnrp-ai-levels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
@media (max-width: 540px) {
    .fnrp-ai-levels { grid-template-columns: repeat(2, 1fr); }
}
.fnrp-ai-level {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-left-width: 3px;
}
[dir="rtl"] .fnrp-ai-level {
    border-left-width: 1px;
    border-right-width: 3px;
}
.fnrp-ai-level-sup { border-left-color: #34d399; }
.fnrp-ai-level-res { border-left-color: #fb923c; }
.fnrp-ai-level-mid { border-left-color: #60a5fa; }
.fnrp-ai-level-sl  { border-left-color: #f43f5e; }
.fnrp-ai-level-tp  { border-left-color: #10b981; }
.fnrp-ai-level-atr { border-left-color: #a78bfa; }
.fnrp-ai-level-rr  { border-left-color: #fbbf24; }
[dir="rtl"] .fnrp-ai-level-sup { border-right-color: #34d399; border-left-color: rgba(255,255,255,.06); }
[dir="rtl"] .fnrp-ai-level-res { border-right-color: #fb923c; border-left-color: rgba(255,255,255,.06); }
[dir="rtl"] .fnrp-ai-level-mid { border-right-color: #60a5fa; border-left-color: rgba(255,255,255,.06); }
[dir="rtl"] .fnrp-ai-level-sl  { border-right-color: #f43f5e; border-left-color: rgba(255,255,255,.06); }
[dir="rtl"] .fnrp-ai-level-tp  { border-right-color: #10b981; border-left-color: rgba(255,255,255,.06); }
[dir="rtl"] .fnrp-ai-level-atr { border-right-color: #a78bfa; border-left-color: rgba(255,255,255,.06); }
[dir="rtl"] .fnrp-ai-level-rr  { border-right-color: #fbbf24; border-left-color: rgba(255,255,255,.06); }
.fnrp-ai-level-l {
    font-size: 10.5px;
    color: var(--muted, #8c98ad);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-family: var(--mono, monospace);
}
[dir="rtl"] .fnrp-ai-level-l {
    font-family: var(--sans-ar); text-transform: none; letter-spacing: 0;
}
.fnrp-ai-level-v {
    font-family: var(--mono, monospace);
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
}

/* ── Indicators grid ─────────────────────────────────────────────────────── */
.fnrp-ai-indicators {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}
@media (max-width: 540px) {
    .fnrp-ai-indicators { grid-template-columns: repeat(2, 1fr); }
}
.fnrp-ai-ind {
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.fnrp-ai-ind-l {
    font-size: 10.5px;
    color: var(--muted-2, #555f70);
    font-family: var(--mono, monospace);
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 0 0 auto;
}
[dir="rtl"] .fnrp-ai-ind-l {
    font-family: var(--sans-ar); text-transform: none; letter-spacing: 0;
}
.fnrp-ai-ind-v {
    font-family: var(--mono, monospace);
    font-size: 12px;
    font-weight: 500;
    color: var(--text);
    text-align: end;
}

/* ── Reasoning bullets ───────────────────────────────────────────────────── */
.fnrp-ai-reasons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fnrp-ai-reasons li {
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-2, #b3bdce);
    position: relative;
    padding-inline-start: 28px;
}
.fnrp-ai-reasons li::before {
    content: '';
    position: absolute;
    inset-inline-start: 10px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent, #4dd4ac);
    opacity: .8;
}

/* ── Footer (disclaimer + retry) ─────────────────────────────────────────── */
.fnrp-ai-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.015);
}
.fnrp-ai-disclaim {
    flex: 1;
    font-size: 10.5px;
    color: var(--muted-2, #555f70);
    line-height: 1.5;
    font-family: var(--sans);
}
[dir="rtl"] .fnrp-ai-disclaim { font-family: var(--sans-ar); font-size: 11px; }
.fnrp-ai-retry {
    flex: 0 0 auto;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid rgba(77,212,172,.30);
    background: rgba(77,212,172,.08);
    color: var(--accent, #4dd4ac);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--fast, .12s ease);
}
.fnrp-ai-retry:hover {
    background: rgba(77,212,172,.16);
    border-color: rgba(77,212,172,.6);
    color: #fff;
}
[dir="rtl"] .fnrp-ai-retry { font-family: var(--sans-ar); }

@media (max-width: 540px) {
    .fnrp-ai-foot { flex-direction: column; align-items: stretch; }
    .fnrp-ai-retry { width: 100%; }
}