/* ============================================================================
   v0.9.9.0 - the notice rail: the app's first notification surface.

   Mobile first, because 375px is verification priority number one: the base
   rules here ARE the phone layout and there is no media query widening them -
   the cap does that by itself.

   Two standing owner rules are load-bearing here and are held by
   tests/Chronos.Web.Tests/NoticeChipLayoutTests.cs, not by memory:

     1. An overlay must never move or resize because its content grew. The rail
        has a FIXED max-height and scrolls internally, so a second notice
        arriving while the first is on screen cannot push the first one.

     2. Nothing stretches full width on a wide monitor. The rail caps at 380px
        and only yields on a narrow viewport, where the calc() keeps a 16px
        gutter either side.

   Motion is a CSS transition on a class. chronos-notice.js only adds and
   removes .is-in - no scripted timeline, no per-frame work, same division of
   labour the Pit reels keep.

   Colours resolve through the tokens in 00-tokens-base.css. The dark theme
   (24-theme-dark.css) repaints those tokens, so the surfaces follow it by
   themselves; the one thing it cannot reach is the literal in the chip's
   shadow, which the dark block at the bottom of THIS file replaces.
   ============================================================================ */

/* ---------- the rail ---------- */

.notice-rail {
    position: fixed;
    right: 16px;
    bottom: 16px;
    /* Above the page and its modals' backdrops, below the onboarding tour (2000)
       and well below the circuit-lost card (2100), which must never be covered. */
    z-index: 1400;
    width: min(380px, calc(100vw - 32px));
    /* RULE 1. Roughly three chips. Past that the rail scrolls inside itself and
       stays exactly this tall - it does not grow, and nothing under it moves. */
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* The rail is a container, not a target: clicks pass through the empty space
       to whatever is behind it. Each chip re-enables pointer events for itself. */
    pointer-events: none;
}

/* The rail is a scroller with no chrome of its own - a visible scrollbar on an
   otherwise floating strip reads as a rendering bug. */
.notice-rail::-webkit-scrollbar { width: 0; height: 0; }

/* ---------- one chip ---------- */

/* v0.9.9.2: dressed in the app's own card language after the owner's screenshot
   review - the first cut was a plain white rectangle that could belong to any
   product. Card token, outline token, the 10px card radius, Inter, and the
   violet left edge that marks a card as Chronos (task rows carry the same). */
.notice-chip {
    pointer-events: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px 8px 12px;
    border: 1px solid var(--chronos-outline);
    border-left: 3px solid var(--chronos-violet);
    border-radius: var(--radius-card);
    background: var(--chronos-card-bg);
    font-family: var(--chronos-font-sans);
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.14);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notice-chip.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* The per-kind leading emoji (chronos-notice.js picks it from the rail's
   data-icons map; the studio copies call NoticeIcons directly). The chip's font
   stack puts Noto Color Emoji right after Inter, so the glyph renders in colour
   on systems with no emoji font of their own. */
.notice-chip-icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
}

.notice-chip-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--chronos-fg-primary);
    text-decoration: none;
    /* A long artifact name wraps rather than widening the chip - the cap above is
       the whole width budget. */
    overflow-wrap: anywhere;
}

a.notice-chip-text:hover { color: var(--chronos-violet); }

/* A proper icon-button: centered glyph, rounded wash on hover. The visible
   button stays 28px so the chip keeps its line height... */
.notice-chip-close {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--chronos-fg-muted);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

/* ...while the finger gets 40px: 28 + 6 each side, the invisible overlay is the
   touch target the owner requires on mobile even when the glyph is small. */
.notice-chip-close::after {
    content: "";
    position: absolute;
    inset: -6px;
}

.notice-chip-close:hover {
    background: var(--chronos-hover-bg);
    color: var(--chronos-fg-primary);
}

/* ============================================================================
   v0.15.0.0 - the bell and its history panel.

   The rail above is what a notice does while it is NEW; this is where it lives
   afterwards. They share a stylesheet because they share a vocabulary - the
   same leading glyph, the same violet accent for something unread, the same
   card tokens - and splitting them across two files is how those drift.

   RULE 1 applies here too and is the reason the scroll sits on the LIST rather
   than on the card: the panel is exactly as tall whether it holds one row or
   thirty, so opening it never moves anything under it.
   ============================================================================ */

/* ---------- the topbar button ---------- */

/* The strip's own chrome comes from .topnav-seg in 31-topnav.css, and the bell is a drawn
   PNG sized by .topnav-icon like every other segment - so there is nothing to add here.
   Until v0.16.0.1 this held a .notice-bell-icon rule that sized a Material Icons ligature. */

/* ---------- the panel ---------- */

.notice-history-card {
    width: min(420px, calc(100vw - 32px));
    /* Mobile is verification priority one: at 375px the cap yields and the
       calc keeps a 16px gutter either side, same arithmetic as the rail. */
    max-width: 100%;
}

.notice-history-empty {
    margin: 0;
    padding: 24px 4px;
    text-align: center;
    font-size: var(--text-base);
}

.notice-history {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* RULE 1. Roughly six rows, then the LIST scrolls and the card does not
       grow. A panel that resized itself as history accumulated would move the
       page under it every time somebody opened it. */
    max-height: 320px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.notice-history-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 10px 10px 9px;
    border-radius: var(--radius-card);
    /* Transparent, not absent: the unread row below swaps the colour in, and a
       row that gained a border only when unread would shift 3px sideways. */
    border-left: 3px solid transparent;
}

.notice-history-row:hover { background: var(--chronos-hover-bg); }

/* Unread when the panel opened. The violet left edge is the app's own mark for
   "this card is Chronos and it wants you" - the chip and the task rows carry
   the same one. It survives the read stamp for as long as the panel is open,
   so the reader learns WHICH lines the badge was counting. */
.notice-history-row.is-new {
    border-left-color: var(--chronos-violet);
    background: var(--chronos-hover-bg);
}

.notice-history-icon {
    flex: 0 0 auto;
    font-size: 17px;
    line-height: 1.35;
}

.notice-history-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notice-history-text {
    font-size: var(--text-base);
    line-height: 1.45;
    color: var(--chronos-fg-primary);
    text-decoration: none;
    /* A long artifact name wraps instead of widening the panel. */
    overflow-wrap: anywhere;
}

a.notice-history-text:hover { color: var(--chronos-violet); }

.notice-history-when {
    font-size: var(--text-xs);
    line-height: 1.3;
    color: var(--chronos-fg-muted);
}

/* ---------- dark theme ---------- */

/* Owned HERE, not in 24-theme-dark.css (that file is shared ground between
   parallel changes). The tokens repaint the surfaces on their own; what needs
   restating is the shadow, whose light-grey literal would sit on the dark
   canvas as a pale halo - the dark chip must not glow white. */
html[data-theme="dark"] .notice-chip {
    background: var(--chronos-card-bg);
    border-color: var(--chronos-outline);
    border-left-color: var(--chronos-violet);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Respect a reader who asked for no motion: the chip still appears and still
   leaves, it just does not slide. */
@media (prefers-reduced-motion: reduce) {
    .notice-chip {
        transform: none;
        transition: opacity 0.3s ease;
    }
    .notice-chip.is-in { transform: none; }
}