/* The opening/closing bell notice — see js/bell.js. */
.bell-toast {
    position: fixed;
    left: 50%;
    bottom: 96px;
    z-index: 80;
    transform: translate(-50%, 14px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(520px, calc(100vw - 28px));
    padding: 12px 14px;
    border: 1px solid var(--card-brd, #23263a);
    border-radius: 14px;
    background: rgba(14, 16, 26, 0.97);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
}
.bell-toast.in {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* Green for the open, amber for the close — the same two states the rest of
   the site uses for "trading" and "settled". */
.bell-toast.open { border-left: 3px solid var(--up, #16d195); }
.bell-toast.close { border-left: 3px solid #f59e0b; }
.bell-ic { font-size: 19px; line-height: 1; }
.bell-tx { display: block; min-width: 0; }
.bell-tx b { display: block; font-size: 13.5px; font-weight: 800; }
.bell-tx small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--muted, #8b90a8);
}
.bell-mute,
.bell-x {
    flex: 0 0 auto;
    border: 1px solid var(--card-brd, #23263a);
    border-radius: 8px;
    background: none;
    color: var(--muted, #8b90a8);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    padding: 5px 10px;
    cursor: pointer;
}
.bell-x { padding: 5px 8px; }
.bell-mute:hover,
.bell-x:hover { color: inherit; border-color: rgba(139, 92, 246, 0.5); }

@media (max-width: 520px) {
    .bell-toast { bottom: 86px; padding: 10px 12px; gap: 9px; }
    .bell-tx small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bell-toast { transition: opacity 0.2s ease; transform: translate(-50%, 0); }
}

/* ---- Market-state hairline (js/bell.js → paintBar) ------------------------
   Three pixels across the top of every page. Fluorescent on purpose: it has to
   register in peripheral vision without ever being something you look at. */
.mkt-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /* Above the command bar (300), the nav dropdowns (400-600) and the Market
       Pulse bar (200) — it was 120, which put it UNDERNEATH the fixed command
       bar that spans the same strip, so the one thing it had to do (be seen
       without being looked for) it could not do. Below the chain overlay at
       4000, which is a full-screen dialog and should own the screen when open.
       It never intercepts a click, so sitting this high costs nothing. */
    z-index: 3000;
    pointer-events: none;
    transition: background 0.6s ease, box-shadow 0.6s ease;
}
.mkt-bar[data-state="open"] {
    background: linear-gradient(90deg, #00ff9c, #16d195 45%, #00ff9c);
    box-shadow: 0 0 10px rgba(0, 255, 156, 0.75), 0 0 22px rgba(0, 255, 156, 0.35);
}
.mkt-bar[data-state="pre"] {
    background: linear-gradient(90deg, #ffc14d, #f59e0b 45%, #ffc14d);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.7), 0 0 22px rgba(245, 158, 11, 0.3);
}
.mkt-bar[data-state="shut"] {
    background: linear-gradient(90deg, #ff5f6d, #ef4444 45%, #ff5f6d);
    box-shadow: 0 0 10px rgba(255, 95, 109, 0.65), 0 0 20px rgba(255, 95, 109, 0.28);
}
/* A glow that pulses would be a distraction on a page people read for hours;
   the colour alone carries it. */
@media (prefers-reduced-motion: reduce) {
    .mkt-bar { transition: none; }
}