/* "Explain this page" — the button and its answer panel.
   Deliberately quiet: this is a garnish on data that already stands alone, so
   it never competes with the page's own verdict. */

.ex-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.14), rgba(139, 92, 246, 0.14));
    color: #cdd0f5;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.ex-btn:hover:not(:disabled) {
    border-color: rgba(139, 92, 246, 0.7);
    color: #fff;
}
.ex-btn:disabled {
    opacity: 0.6;
    cursor: progress;
}

.ex-body p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.72;
    color: #d4d7e6;
}
.ex-body p:last-child {
    margin-bottom: 0;
}
.ex-body b {
    color: #eceefb;
    font-weight: 700;
}

/* ---- the readings, one per line ----
   Custom markers rather than list-style discs: at this text size the UA disc
   sits too low and too dark to read as a deliberate mark, and the violet dot
   ties the list to the ✨ that opened the panel. */
.ex-list {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}
.ex-list li {
    position: relative;
    margin: 0 0 9px;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.62;
    color: #d4d7e6;
}
.ex-list li:last-child {
    margin-bottom: 0;
}
.ex-list li::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b5cf6;
}

/* ---- the comparison table ----
   Small by design: it exists for the two or three places where the answer is a
   comparison, so it is sized to be read inside a paragraph of prose, not to be
   a data grid. It scrolls in its own box so a long header can never widen the
   dialog. */
.ex-tw {
    margin: 0 0 14px;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
}
.ex-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
    /* Figures line up column-wise without asking the model to pad anything. */
    font-variant-numeric: tabular-nums;
}
.ex-table th,
.ex-table td {
    padding: 8px 11px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    white-space: nowrap;
}
.ex-table th {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8a8fa3;
    background: rgba(255, 255, 255, 0.035);
}
.ex-table tbody tr:last-child td {
    border-bottom: 0;
}
.ex-table td {
    color: #d4d7e6;
}
/* The first column is the row's subject — it should read as a label, the way
   the bold lead-in of each bullet does. */
.ex-table td:first-child {
    color: #a9aec6;
    font-weight: 600;
}

.ex-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11.5px;
    line-height: 1.6;
    color: #7c8296;
}
.ex-foot b {
    color: #9aa0b8;
    font-weight: 600;
}

.ex-err {
    font-size: 13px;
    line-height: 1.6;
    color: #ffc9ce;
}

/* Loading — three dots, because the wait is a couple of seconds and a spinner
   at this size reads as an error state. */
.ex-load {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #8a8fa3;
}
.ex-load i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8b5cf6;
    animation: exPulse 1.1s ease-in-out infinite;
}
.ex-load i:nth-child(2) { animation-delay: 0.16s; }
.ex-load i:nth-child(3) { animation-delay: 0.32s; margin-right: 6px; }

@keyframes exPulse {
    0%, 70%, 100% { opacity: 0.28; transform: scale(0.85); }
    35% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .ex-load i { animation: none; opacity: 0.7; }
}

/* Wrapper the Option Chain uses to give the button its own line under the
   insights panel, since that page's main column is a dense table. */
.ex-wrap {
    max-width: 1180px;
    margin: 0 auto 14px;
    padding: 0 4px;
}

/* --- Toolbar variant -------------------------------------------------------
   On the Option Chain the button sits in the controls row with Refresh and
   TradingView, so it inherits .refresh-btn's shape and only adds the accent
   that marks it as the AI action. A lone button floating between the insight
   cards and the range band read as an orphan and broke the page's rhythm. */
.ex-btn-inline {
    border-color: rgba(139, 92, 246, 0.4) !important;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.16), rgba(139, 92, 246, 0.16)) !important;
    color: #cdd0f5 !important;
}
.ex-btn-inline:hover:not(:disabled) {
    border-color: rgba(139, 92, 246, 0.75) !important;
    color: #fff !important;
}

@media (max-width: 620px) {
    /* The controls row scrolls sideways on a phone; keep the label short so the
       button doesn't push Market Outlook off the end. */
    .ex-btn-inline { font-size: 12px; }
    .ex-body p,
    .ex-list li { font-size: 13.5px; }
    .ex-table th,
    .ex-table td { padding: 7px 9px; }
}

/* ---------------------------------------------------------------------------
   The modal — Gemini-flavoured: a lit gradient edge that travels around a
   sharp-cornered panel, rather than the usual soft rounded card.

   An overlay rather than an inline panel because these pages are dense: a few
   hundred words dropped into the middle of a live option chain reflowed
   everything under it. Fixed positioning means nothing behind moves.
--------------------------------------------------------------------------- */

/* Registering the angle as a real custom property is what lets a conic
   gradient rotate smoothly — animating an unregistered variable just snaps.
   Browsers without @property still get the static gradient edge. */
@property --ex-a {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.ex-modal {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
}
.ex-modal[hidden] { display: none; }

.ex-back {
    position: absolute;
    inset: 0;
    background: rgba(4, 5, 11, 0.74);
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.ex-modal.is-open .ex-back { opacity: 1; }

.ex-dialog {
    position: relative;
    width: min(660px, 100%);
    max-height: min(84dvh, 780px);
    display: flex;
    flex-direction: column;
    /* Sharp. The whole point of the treatment is the lit edge, and a 20px
       radius softens it into an ordinary card. */
    border-radius: 3px;
    background: #0b0d1a;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 60px -20px rgba(155, 114, 203, 0.45);
    opacity: 0;
    transform: translateY(8px) scale(0.99);
    transition: opacity 0.2s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.ex-modal.is-open .ex-dialog {
    opacity: 1;
    transform: none;
}

/* The travelling edge. A conic gradient fills the box, then a two-layer mask
   subtracts the middle so only a 1.5px frame survives — a real gradient
   border, which `border-image` can't do with a radius. */
.ex-dialog::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from var(--ex-a),
        #4285f4, #9b72cb, #d96570, #f6c344, #4285f4
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: exSpin 6s linear infinite;
    pointer-events: none;
}
/* A soft bloom of the same palette just outside the edge, so it reads as lit
   rather than merely coloured. */
.ex-dialog::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--ex-a),
        #4285f4, #9b72cb, #d96570, #f6c344, #4285f4
    );
    filter: blur(13px);
    opacity: 0.28;
    z-index: -1;
    animation: exSpin 6s linear infinite;
    pointer-events: none;
}

@keyframes exSpin {
    to { --ex-a: 360deg; }
}

.ex-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.ex-title {
    display: flex;
    align-items: baseline;
    gap: 9px;
    min-width: 0;
}
.ex-title b {
    font-size: 15.5px;
    font-weight: 800;
    /* The Gemini sweep, on the one piece of text that names the feature. */
    background: linear-gradient(90deg, #4285f4, #9b72cb 42%, #d96570 78%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ex-sub {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #7f85a0;
    text-transform: uppercase;
}
.ex-x {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.04);
    color: #8a8fa3;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ex-x:hover {
    background: rgba(255, 255, 255, 0.11);
    border-color: rgba(155, 114, 203, 0.6);
    color: #fff;
}

/* The only scrolling region, so a long answer never scrolls the page behind. */
.ex-scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 18px 20px;
}

body.ex-locked { overflow: hidden; }

/* Motion is decoration here; the lit edge still reads perfectly standing still. */
@media (prefers-reduced-motion: reduce) {
    .ex-back, .ex-dialog { transition: none; }
    .ex-dialog { transform: none; }
    .ex-dialog::before, .ex-dialog::after { animation: none; }
}

@media (max-width: 620px) {
    .ex-modal { padding: 0; align-items: flex-end; }
    .ex-dialog {
        width: 100%;
        max-height: 88dvh;
        border-radius: 3px 3px 0 0;
        transform: translateY(22px);
    }
    .ex-head { padding: 14px 15px 11px; }
    .ex-scroll { padding: 14px 15px 24px; }
}