/* ===== 实时新闻 (Real-Time News) — true timeline, own page ===== */

.realtime-v2 {
    display: block;
    height: auto;
    min-width: 0;
    overflow: visible;
    background: var(--bg-cream);
}

/* 原来是 920px，两边留白太多了，放宽一档。只有一列时间线，再宽下去每行字数
   就超出舒服的阅读长度了，1080 差不多是上限。 */
.realtime-v2 .rt-page {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-3xl);
}

/* Section heading mirrors .news-v2 .section-head* exactly (styles-new.css)
   so "实时新闻" reads pixel-for-pixel identical to news.html's "新闻精选". */
.realtime-v2 .section-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: var(--spacing-lg);
}

.realtime-v2 .section-head-bar {
    width: 4px;
    height: 20px;
    border-radius: 2px;
    background: var(--accent-purple);
}

.realtime-v2 .section-head-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-black);
    letter-spacing: 0.02em;
}

/* Filter toggle sits at the far right of the heading row. */
.realtime-v2 .section-toggle {
    margin-left: auto;
}

/* 来源 chips get their own colour so the three filter groups are tellable
   apart at a glance: 类型 purple, 企业 blue, 来源 green. */
.realtime-v2 .filter-chip[data-source].active,
.realtime-v2 .active-filter-chip.filter-source-chip {
    background: rgba(168, 216, 185, 0.82);
    border-color: rgba(74, 140, 102, 0.45);
    color: var(--text-black);
}

/* The shared .filter-chip:hover is purple — keep the hover in the same family
   as this group's active state. */
.realtime-v2 .filter-chip[data-source]:hover {
    background: rgba(168, 216, 185, 0.45);
    border-color: rgba(74, 140, 102, 0.35);
    color: var(--text-black);
}

@media (min-width: 769px) and (max-width: 1100px) {
    .realtime-v2 .section-head-title {
        font-size: 1.05rem;
    }
}

@media (max-width: 768px) {
    .realtime-v2 .section-head {
        padding: 0;
        margin-bottom: var(--spacing-md);
        gap: var(--spacing-sm);
    }

    .realtime-v2 .section-head-title {
        font-size: 1rem;
    }

    /* 周条别贴着上面的筛选栏，留一口气。 */
    .realtime-v2 .mobile-week-timeline {
        margin-top: var(--spacing-sm);
    }
}

/* Loading / empty states */
.rt-loading-state,
.rt-empty-state {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--text-gray);
    text-align: center;
}

.rt-loading-spinner {
    width: 34px;
    height: 34px;
    border: 3px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--text-black);
    border-radius: 50%;
    animation: rtLoadingSpin 0.8s linear infinite;
}

@keyframes rtLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Timeline ===== */
.rt-timeline {
    position: relative;
    padding-left: 84px;
}

/* the vertical connecting line */
.rt-timeline::before {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 62px;
    width: 2px;
    background: linear-gradient(to bottom, rgba(181, 168, 224, 0.55), rgba(181, 168, 224, 0.15));
}

/* --rt-sticky-top is measured at runtime (see realtime-news.html) and equals
   nav + section heading — the two layers that actually stay pinned. It is only
   set on non-desktop; everywhere else the 64px fallback applies.
   On phones the divider does not stick at all — see the 768px block below. */
.rt-date-divider {
    position: sticky;
    top: var(--rt-sticky-top, 64px);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: var(--spacing-xl) 0 var(--spacing-md) -84px;
    padding: 6px 0 6px 0;
    background: var(--bg-cream);
}

.rt-date-divider:first-child {
    margin-top: 0;
}

.rt-date-divider-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-black);
    background: var(--bg-cream);
    padding-right: 10px;
    margin-left: 84px;
}

.rt-item {
    position: relative;
    margin-bottom: var(--spacing-lg);
}

/* Dot + time sit on one line, flush against the timeline's vertical rule.
   The marker is vertically aligned with the card's tag row (its first
   visible content), not the card's top edge. */
.rt-item-marker {
    position: absolute;
    left: -84px;
    top: 27px;
    width: 68px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Time label: same weight/scale family as .date-meta's article-count/weekday,
   bumped to 700 since it's the primary anchor of a true timeline (not secondary meta). */
.rt-item-time {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-black);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rt-item-dot {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-cream);
    border: 2px solid var(--accent-purple);
}

.rt-item.is-fresh .rt-item-dot {
    background: var(--accent-purple-deep);
    border-color: var(--accent-purple-deep);
    box-shadow: 0 0 0 4px rgba(181, 168, 224, 0.3);
}

/* Card mirrors .news-card exactly (same padding/border/hover) */
.rt-card {
    position: relative;
    background: var(--bg-card-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.rt-card:hover {
    border-color: rgba(181, 168, 224, 0.45);
    box-shadow: 0 6px 20px -10px rgba(70, 56, 120, 0.25);
    transform: translateY(-1px);
}

/* Card tags reuse .news-tags / .tag / .topic-tag / .company-tag from
   styles-new.css verbatim, so 主题/公司 chips render pixel-for-pixel
   identical to news.html. Only allow wrapping (a real-time card can carry
   more chips than a daily one) and add two small colour-only modifiers for
   the freshness badge and source chip, which news.html doesn't have. */
.rt-card .news-tags {
    flex-wrap: wrap;
}

/* Tags sit at the foot of the card, above the source URL — so swap the shared
   .news-tags bottom margin for a top one. */
.rt-card .rt-tags-footer {
    margin-top: var(--spacing-xl);
    margin-bottom: 0;
}

/* URL row: sits under the tag row and borrows .topic-tag's metrics (no pill,
   same size/weight/tracking), flush with the card's left edge so it lines up
   with the tag row's first chip. */
.rt-card .rt-url-row {
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
}

.rt-card .rt-tag-url {
    background: transparent;
    padding: 0;
    color: var(--text-gray);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    word-break: break-all;
    transition: color 0.15s ease;
}

.rt-card .rt-tag-url:hover {
    color: var(--text-dark-gray);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Author row above a tweet's title: avatar · display name · handle,
   reading the way the post does on X itself. */
.rt-x-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: var(--spacing-sm);
    min-width: 0;
}

/* The wrapper carries a letter monogram underneath, so a failed avatar load
   (unavatar down, deleted account) still leaves a filled circle, not a gap. */
.rt-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-purple-soft);
    color: var(--accent-purple-deep);
    font-size: 1rem;
    font-weight: 700;
}

.rt-avatar-wrap::before {
    content: attr(data-letter);
}

.rt-avatar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--bg-purple-soft);
}

.rt-x-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-black);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Name and handle track .rt-item-desc, so the author line reads at the same
   size as the post body. */
.rt-x-handle {
    color: var(--text-light-gray);
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rt-tag-fresh {
    background: rgba(16, 185, 129, 0.12);
    color: #0d9268;
}

/* Title mirrors .news-title exactly */
.rt-item-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-black);
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin-bottom: 0;
}


/* Description mirrors .news-description exactly */
.rt-item-desc {
    margin-top: var(--spacing-md);
    font-size: 0.9375rem;
    color: var(--text-dark-gray);
    line-height: 1.8;
}

.rt-item-desc + .rt-item-desc {
    margin-top: 0;
}

/* 显示原文 toggle — top-right corner of a translated X card. Both language
   versions are in the DOM; .is-original on the card decides which shows. */
.rt-original-toggle {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: 2;
    padding: 4px 10px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 999px;
    background: var(--bg-card-white);
    color: var(--text-gray);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.rt-original-toggle:hover {
    border-color: rgba(181, 168, 224, 0.65);
    background: var(--bg-purple-soft);
    color: var(--accent-purple-deep);
}

.rt-card.is-original .rt-original-toggle {
    border-color: rgba(181, 168, 224, 0.65);
    background: var(--bg-purple-soft);
    color: var(--accent-purple-deep);
}

/* Keep the author row and title clear of the button. */
.rt-card.has-original .rt-x-header,
.rt-card.has-original .rt-item-title {
    padding-right: 84px;
}

.rt-desc-original {
    display: none;
}

.rt-card.is-original .rt-desc-translated {
    display: none;
}

/* Explicit margin: the hidden translated <p> still counts for the
   `.rt-item-desc + .rt-item-desc` rule above, which would zero this out. */
.rt-card.is-original .rt-desc-original {
    display: block;
    margin-top: var(--spacing-md);
}

/* Separator between posts of the same thread, rendered inside one card */
.rt-item-post-divider {
    margin: var(--spacing-md) 0;
    border-top: 1px dashed rgba(0, 0, 0, 0.12);
}

/* Images rendered under a post's text, inside the card. A single image
   stays full-width; two or more lay out two-per-row via .rt-item-images-grid. */
.rt-item-images {
    margin-top: var(--spacing-md);
}

.rt-item-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.rt-item-image {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 420px;
    border-radius: var(--radius-md, 8px);
    object-fit: cover;
    cursor: zoom-in;
}

.rt-item-images-grid .rt-item-image {
    height: 220px;
    max-height: none;
}

.rt-item-images + .rt-item-images {
    margin-top: var(--spacing-sm);
}

/* ===== Quoted tweet =====
   A nested card under the quoting post, bordered rather than filled so it
   reads as embedded content without competing with the parent card. */
.rt-quoted-card {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: var(--radius-md, 8px);
}

.rt-quoted-header {
    gap: 10px;
    margin-bottom: 0;
    text-decoration: none;
}

a.rt-quoted-header:hover .rt-x-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Smaller avatar than the parent card's, so the nesting reads at a glance. */
.rt-quoted-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.8125rem;
}

/* The quoted author line sits one step down from the quoting author's. */
.rt-quoted-card .rt-x-name,
.rt-quoted-card .rt-x-handle {
    font-size: 0.875rem;
}

.rt-quoted-text {
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--text-gray);
}

/* The quote's own 原文 line sits tighter under the author row than a post
   body does — overrides the spacing-md the generic rule applies. */
.rt-card.is-original .rt-quoted-text.rt-desc-original {
    margin-top: var(--spacing-sm);
}

/* Quoted media is secondary — keep it shorter than the parent post's. */
.rt-quoted-card .rt-item-images,
.rt-quoted-card .rt-item-video {
    margin-top: var(--spacing-sm);
}

.rt-quoted-card .rt-item-image {
    max-height: 300px;
}

.rt-quoted-card .rt-item-images-grid .rt-item-image {
    height: 160px;
}

.rt-quoted-card .rt-item-video {
    max-height: 300px;
}

/* Fullscreen click-to-view overlay for post images */
.rt-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    background: rgba(0, 0, 0, 0.85);
    cursor: zoom-out;
}

.rt-lightbox.is-open {
    display: flex;
}

.rt-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Video/GIF rendered under a post's text, inside the card */
.rt-item-video {
    display: block;
    margin-top: var(--spacing-md);
    max-width: 100%;
    max-height: 420px;
    width: auto;
    border-radius: var(--radius-md, 8px);
    background: #000;
}

.rt-item-video + .rt-item-video,
.rt-item-image + .rt-item-video,
.rt-item-video + .rt-item-image {
    margin-top: var(--spacing-sm);
}

@media (max-width: 768px) {
    /* 手机端日期分隔条不吸顶：滚动时跟着内容走，不冻在日历行下面。 */
    .rt-date-divider {
        position: static;
    }
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
    .realtime-v2 .rt-page {
        padding: var(--spacing-lg) 0 var(--spacing-2xl);
    }

    .realtime-v2 .rt-timeline-wrap {
        box-sizing: border-box;
        padding: 0 var(--spacing-md);
    }

    .rt-timeline {
        padding-left: 60px;
    }

    .rt-timeline::before {
        left: 42px;
    }

    .rt-date-divider {
        margin-left: -60px;
    }

    .rt-date-divider-label {
        margin-left: 60px;
        font-size: 0.8125rem;
    }

    .rt-item-marker {
        left: -60px;
        top: 20px;
        width: 48px;
        gap: 6px;
    }

    .rt-item-dot {
        width: 10px;
        height: 10px;
    }

    .rt-card {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    /* The title needs no reserve at this width: the author row always sits
       between it and the 显示原文 button, so the button's bottom edge clears the
       headline on every card. Holding a gutter anyway just left dead space at
       the end of each X post's title — RSS cards never had it, which is why
       only X posts looked short-measured. :has() keeps the reserve for the case
       where a translated card renders with no author row, where the title would
       be the first line and would collide. */
    .realtime-v2 .rt-card.has-original:has(> .rt-x-header) .rt-item-title {
        padding-right: 0;
    }

    /* 手机端作者行：只留显示名，不要 @handle——两段文字挤在一行时名字总被截成
       “……”，而名字才是有用的部分。名字改为完整换行显示，永不省略，并往头像
       靠拢。 */
    .rt-x-handle {
        display: none;
    }

    .rt-x-header {
        gap: 8px;
    }

    .realtime-v2 .rt-x-name {
        font-size: 0.875rem;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        min-width: 0;
    }
}

/* ===== Card type scale — mirrors news.html =====
   Every text role a timeline card shares with a 新闻精选 card is the same size
   at the same width. The values and the breakpoints below are lifted straight
   from .news-title / .news-description in styles-new.css; the base sizes at the
   top of this file already match at ≥1401px, so these are the four steps down.
   There used to be a --rt-m-scale factor shrinking the whole card on phones —
   that is what made the realtime text read smaller than news.html, and it is
   gone.

   Roles with no counterpart on news.html (X author line, quoted post, the time
   column, the 日期 divider) are not listed: they keep their base sizes, which
   are already pinned to the body text, so they follow it down in proportion. */

/* .news-title 1.4375rem */
@media (max-width: 1200px) {
    .realtime-v2 .rt-item-title {
        font-size: 1.4375rem;
    }
}

/* .news-title 1.25rem — .news-description stays 0.9375rem, the base */
@media (max-width: 768px) {
    .realtime-v2 .rt-item-title {
        font-size: 1.25rem;
    }
}

/* .news-title 1.125rem / .news-description 0.875rem */
@media (max-width: 480px) {
    .realtime-v2 .rt-item-title {
        font-size: 1.125rem;
    }

    .realtime-v2 .rt-item-desc {
        font-size: 0.875rem;
    }

    /* Author line sits just under the post body: the name is a label next to the
       avatar here, not a second headline. */
    .realtime-v2 .rt-x-name,
    .realtime-v2 .rt-x-handle {
        font-size: 0.8125rem;
    }
}

/* .news-title 1rem — .news-description holds at 0.875rem */
@media (max-width: 360px) {
    .realtime-v2 .rt-item-title {
        font-size: 1rem;
    }
}

/* ===== 桌面端日期入口（标题行里的日历按钮 + 月历弹层）=====
   只在 ≥769px 出现；手机端整块隐藏，那边走的是 styles-new.css 里那条周条，
   两边各是各的设计，互不影响。

   弹层里的日期格子沿用 .mobile-calendar-* 类名（跟手机端共用同一段生成代码，
   见 renderCalendar），但样式全部限定在 .rt-date-popover 里面重写：手机端那套
   规则住在 max-width:768px 块里，这里根本够不着。 */

.rt-date-picker {
    display: none;
}

@media (min-width: 769px) {
    .rt-date-picker {
        position: relative;
        display: block;
        margin-left: var(--spacing-md);
    }

    /* 按钮上写着当前选的是哪天，没选就是「全部」。 */
    .rt-date-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 999px;
        background: var(--bg-card-white);
        color: var(--text-dark-gray);
        font-family: var(--font-main);
        font-size: 0.8125rem;
        line-height: 1;
        cursor: pointer;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .rt-date-btn:hover,
    .rt-date-btn[aria-expanded="true"] {
        background: var(--bg-purple-soft);
        border-color: rgba(126, 109, 190, 0.45);
        color: var(--accent-purple-deep);
    }

    .rt-date-btn svg {
        flex-shrink: 0;
    }

    .rt-date-btn-label {
        font-weight: 700;
        white-space: nowrap;
    }

    /* 没选日期时 label 是空的，连着 gap 一起收掉，按钮缩成一个正圆图标。 */
    .rt-date-btn-label:empty {
        display: none;
    }

    .rt-date-btn:has(.rt-date-btn-label:empty) {
        gap: 0;
        padding: 0;
        width: 30px;
        justify-content: center;
    }

    .rt-date-popover {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        z-index: 60;
        width: 300px;
        padding: var(--spacing-md);
        background: var(--bg-card-white);
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: var(--radius-lg);
        box-shadow: 0 16px 40px rgba(18, 18, 18, 0.16);
    }

    .rt-date-popover .mobile-calendar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }

    .rt-date-popover .mobile-calendar-title {
        font-size: 0.9375rem;
        font-weight: 700;
        color: var(--text-black);
    }

    .rt-date-popover .mobile-calendar-month-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-black);
        font-family: var(--font-main);
        cursor: pointer;
        transition: background 0.18s ease, color 0.18s ease;
    }

    .rt-date-popover .mobile-calendar-month-btn:hover {
        background: var(--bg-purple-soft);
        color: var(--accent-purple-deep);
    }

    .rt-date-popover .mobile-calendar-weekdays,
    .rt-date-popover .mobile-calendar-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 4px;
    }

    .rt-date-popover .mobile-calendar-weekdays {
        margin-bottom: var(--spacing-xs);
        color: var(--text-gray);
        font-size: 0.75rem;
        text-align: center;
    }

    .rt-date-popover .mobile-calendar-day {
        min-width: 0;
        min-height: 34px;
        border: 1px solid transparent;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--text-dark-gray);
        font-family: var(--font-main);
        font-size: 0.875rem;
        cursor: pointer;
        transition: background 0.18s ease, border-color 0.18s ease;
    }

    .rt-date-popover .mobile-calendar-day:not([disabled]):hover {
        background: var(--bg-purple-soft);
    }

    .rt-date-popover .mobile-calendar-day[disabled] {
        color: var(--text-light-gray);
        opacity: 0.45;
        cursor: default;
    }

    .rt-date-popover .mobile-calendar-day.is-today:not(.active) {
        border-color: rgba(0, 0, 0, 0.16);
    }

    .rt-date-popover .mobile-calendar-day.active {
        background: var(--bg-card-purple);
        border-color: rgba(126, 109, 190, 0.38);
        color: var(--text-black);
        font-weight: 700;
    }

    /* 有其它筛选在生效时：还有命中的日子高亮，全被筛掉的日子压暗。 */
    .rt-date-popover .mobile-calendar-day.has-match:not(.active) {
        border-color: rgba(126, 109, 190, 0.45);
        color: var(--accent-purple-deep);
        font-weight: 700;
    }

    .rt-date-popover .mobile-calendar-day.no-match:not(.active) {
        opacity: 0.4;
    }

    /* 复位：回到从最新一条排起的完整时间线。 */
    .rt-date-reset {
        display: block;
        width: 100%;
        margin-top: var(--spacing-md);
        padding: 8px 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--text-dark-gray);
        font-family: var(--font-main);
        font-size: 0.8125rem;
        cursor: pointer;
        transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .rt-date-reset:hover {
        background: var(--bg-purple-soft);
        border-color: rgba(126, 109, 190, 0.45);
        color: var(--accent-purple-deep);
    }
}