/* ==========================================================================
   Stories — Telegram rebuild
   --------------------------------------------------------------------------
   Loaded after Stories.css, this file re-skins the module to Telegram's visual
   system: a chat canvas instead of page background, posts as flat rows
   separated by hairlines (no floating cards), 42px circular avatars, muted
   secondary text, Telegram-blue accent, polls drawn like Telegram polls, and
   a folder-chip tab strip.

   Structure is deliberately untouched — every selector here already exists in
   the markup, so the JS (feed curation, polls, composer, editor) keeps working
   exactly as before. That is the whole point of a skin: behaviour is not
   re-invented to move a border.

   Palette and geometry follow Telegram Desktop / Android:
     canvas  #0e1621 · panels #17212b · raised #1c2a3a · accent #3390ec
     text    #e9edf0 · secondary #7d8b99 · separators rgba(255,255,255,.055)
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --tg-accent: #3390ec;
    --tg-accent-soft: rgba(51, 144, 236, .14);
    --tg-bg: #ffffff;
    --tg-panel: #ffffff;
    --tg-raised: #f4f4f5;
    --tg-text: #0f0f0f;
    --tg-muted: #707579;
    --tg-hair: #e6e8ea;
    --tg-out: #effdde;
    --tg-shadow: 0 2px 8px rgba(16, 24, 40, .08);
    --tg-r: 12px;
    --tg-r-sm: 8px;
    --tg-ease: cubic-bezier(.2, .8, .3, 1);
    --tg-fast: .16s var(--tg-ease);

    /* Re-point the module's own tokens at the new palette, so anything this
       file does not name explicitly still lands in the same colour world. */
    --sg-accent: var(--tg-accent);
    --sg-text: var(--tg-text);
    --sg-muted: var(--tg-muted);
    --sg-border: var(--tg-hair);
    --sg-canvas: var(--tg-bg);
    --sg-surface: var(--tg-panel);
    --sg-surface-2: var(--tg-raised);
    --sg-field: var(--tg-raised);
    --sg-faint: color-mix(in srgb, var(--tg-text) 5%, transparent);
    /* Media plates are a raised panel in Telegram, never the near-black frame the
       previous skin painted — so a photo that is still decoding reads as artwork
       sitting on the chat, not as a hole punched through it. */
    --sg-media-bg: var(--tg-raised);
    --sg-r: var(--tg-r);
    --sg-r-lg: var(--tg-r);
    --sg-r-sm: var(--tg-r-sm);
    --sg-shadow-sm: none;
    --sg-shadow-md: var(--tg-shadow);
    --sg-shadow-lg: var(--tg-shadow);
}

[data-bs-theme="dark"] {
    --tg-bg: #0e1621;
    --tg-panel: #17212b;
    --tg-raised: #1c2a3a;
    --tg-text: #e9edf0;
    --tg-muted: #7d8b99;
    --tg-hair: rgba(255, 255, 255, .06);
    --tg-out: #2b5278;
    --tg-accent: #3390ec;
    --tg-accent-soft: rgba(51, 144, 236, .18);
    --tg-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}

/* The canvas: Telegram paints the chat area a touch darker than its panels,
   and the accent glow at the top is what keeps a long feed from reading flat.
   `!important` because <body> carries the platform's `bg-transparent` utility. */
body.stories-body {
    background:
        radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--tg-accent) 10%, transparent) 0%, transparent 70%),
        var(--tg-bg) !important;
    color: var(--tg-text);
}

#main_view {
    background: transparent;
}

/* ── Header ────────────────────────────────────────────────────────────── */
.stories-header {
    background: var(--tg-panel) !important;
    border-bottom: 1px solid var(--tg-hair);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.header-inner {
    min-height: 54px;
    padding: .35rem .7rem .15rem;
}

.stories-menu-btn,
.stories-avatar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--tg-muted);
    background: transparent;
    border: 0;
}

.stories-menu-btn:hover,
.stories-avatar-btn:hover {
    background: var(--tg-raised);
    color: var(--tg-text);
    transform: none;
    box-shadow: none;
}

.stories-avatar-dot {
    width: 10px;
    height: 10px;
    border-width: 2px;
    border-color: var(--tg-panel);
}

/* Search reads as Telegram's pill search button, not a bordered input */
.stories-search {
    height: 36px;
    padding: 0 14px 0 38px;
    border: 0;
    border-radius: var(--tg-r-sm);
    background: var(--tg-raised);
    font-size: .9rem;
}

.stories-search:focus {
    background: var(--tg-raised);
    border: 0;
    box-shadow: inset 0 0 0 1.5px var(--tg-accent);
}

.search-wrap .search-icon {
    left: 13px;
    width: 16px;
    height: 16px;
}

/* ── Folder chips (Telegram's tab strip) ──────────────────────────────── */
.stories-tabs {
    gap: .35rem;
    padding: .1rem .55rem .55rem;
}

/* The tab buttons ship with `text-primary` (a utility the platform marks
   `!important`), so every colour here has to outrank it. */
.stories-tab {
    flex: 0 0 auto;
    gap: .3rem;
    padding: .34rem .75rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--tg-muted) !important;
    transition: background var(--tg-fast), color var(--tg-fast);
}

/* The underline indicator belongs to the old design; a chip carries the state now */
.stories-tab::after {
    display: none;
}

.stories-tab:hover {
    background: var(--tg-raised);
    color: var(--tg-text) !important;
}

.stories-tab[active] {
    background: var(--tg-accent);
    color: #fff !important;
}

.stories-tab[active] .stories-tab-icon {
    color: #fff;
    opacity: 1;
    transform: none;
}

.stories-tabs .stories-tab-icon {
    width: 1.15em;
    height: 1.15em;
    opacity: .9;
}

/* ── Feed: a list of posts, not a stack of cards ──────────────────────── */
.stories-feed {
    gap: 0;
    padding: 0 0 3rem;
}

.stories-feed .story {
    padding: 0 .9rem;
}

.story,
.story-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
}

.story-card:hover {
    box-shadow: none;
    border-color: transparent;
}

/* Hairline between posts, inset past the avatar exactly like Telegram's rows */
.story+.story {
    border-top: 1px solid var(--tg-hair);
}

/* ── Post header ──────────────────────────────────────────────────────── */
.story-head {
    gap: .6rem;
    padding: .75rem 0 .45rem;
}

.story-avatar {
    width: 40px !important;
    height: 40px !important;
    border: 0;
    background: var(--tg-accent) center/cover no-repeat;
    font-size: .95rem;
}

.story-avatar:hover {
    transform: none;
    box-shadow: 0 0 0 2px var(--tg-accent-soft);
}

.story-avatar.is-biz {
    background: var(--tg-accent-soft);
    border: 0;
    color: var(--tg-accent);
}

.story-author {
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.006em;
    color: var(--tg-text);
}

.story-author:hover {
    text-decoration: none;
    color: var(--tg-accent);
}

.story-sub {
    gap: .3rem;
    margin-top: .05rem;
    font-size: .78rem;
    color: var(--tg-muted);
}

.story-sub .dot {
    width: 2px;
    height: 2px;
}

.story-sub svg {
    height: .78rem;
    opacity: .8;
}

.story-biz-badge {
    margin-left: .3rem;
    padding: .04rem .4rem;
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
    font-size: .6rem;
    letter-spacing: .03em;
}

.story-more {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--tg-muted);
}

.story-more:hover {
    background: var(--tg-raised);
    color: var(--tg-text);
}

/* ── Post body ────────────────────────────────────────────────────────── */
.story-body {
    padding: 0;
}

.story-card>[caption],
.story-card .story-body>[caption] {
    padding: .1rem 0 .1rem 3rem !important;
}

.story-title {
    margin: 0 0 .18rem;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.008em;
    line-height: 1.35;
}

.story-caption {
    font-size: .94rem;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--tg-text);
    opacity: .96;
}

.story-caption a,
.story-caption .linkified {
    color: var(--tg-accent);
    text-decoration: none;
}

/* Media: Telegram rounds the artwork and keeps it inside the row's gutter */
.story-media {
    margin: .1rem 0 .25rem;
}

/* The lazy plate (`div[media]`) is empty until `loadStoryMedia()` fills it, and it was
   inheriting nothing — the row showed canvas straight through the frame. Give the plate
   itself the raised surface plus a faint top-down tint, so the frame keeps its shape
   while the file decodes. Loaded images/videos paint their own background on top. */
.story-media [media] {
    min-height: 15rem;
    border-radius: var(--tg-r);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--tg-text) 4%, var(--tg-raised)) 0%,
            var(--tg-raised) 100%);
    overflow: hidden;
}

/* The loader Telegram would draw: a small, muted three-bar spinner centred in the
   plate, not the oversized markup spinner. */
.story-media [media] .w3-padding-48 {
    padding: 1.15rem 0;
}

.story-media [media] .w3-padding-48 svg {
    width: 22px;
    height: 22px;
    color: var(--tg-muted);
    opacity: .8;
}

/* “No photo found” and friends land as bare text in the plate */
.story-media [media]:not(:has(img, video, audio, .story-photos, .w3-padding-48)) {
    padding: .9rem 1rem;
    color: var(--tg-muted);
    font-size: .88rem;
    text-align: center;
}

.story-media [mediaCover],
[mediaCover] {
    border-radius: var(--tg-r);
    background: var(--tg-raised);
}

.story-body>.story-media:first-child {
    border-radius: var(--tg-r);
}

.story-media [media] img,
.story-media [media] video {
    border-radius: var(--tg-r);
    max-height: 68vh;
}

/* Telegram prints the view counter as a quiet overlay on the artwork */
.story-views {
    right: .5rem;
    bottom: .5rem;
    gap: .25rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    font-size: .74rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.story-views:hover {
    background: rgba(0, 0, 0, .6);
    transform: none;
}

.story-views.is-inline {
    min-height: 0;
    padding: .1rem .45rem;
    background: color-mix(in srgb, var(--tg-text) 8%, transparent);
    color: var(--tg-muted);
}

/* Hashtags are plain accent text in Telegram, not chips */
.story-tags {
    gap: .45rem;
    margin: .45rem 0 0;
}

.story-tag,
[htag] a {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--tg-accent) !important;
    font-size: .88rem;
    font-weight: 500;
}

.story-tag:hover,
[htag] a:hover {
    background: transparent;
    border: 0;
    color: var(--tg-accent) !important;
    text-decoration: underline;
    transform: none;
}

/* Reactions: Telegram's compact pills */
.story-reactions {
    margin-top: .4rem;
}

.story-reaction-chip {
    padding: .2rem .55rem;
    border: 0;
    border-radius: 999px;
    background: var(--tg-raised);
    color: var(--tg-muted);
    font-size: .8rem;
    font-weight: 500;
}

.story-reaction-chip:hover {
    transform: none;
    background: color-mix(in srgb, var(--tg-text) 9%, transparent);
    color: var(--tg-text);
}

.story-reaction-chip.is-mine {
    background: var(--tg-accent-soft);
    border: 0;
    color: var(--tg-accent);
}

/* ── Action row: flat icons under the post, like Telegram's channel footer ── */
.story-actions {
    gap: .2rem;
    margin: .35rem 0 .15rem 3rem;
    padding: 0;
    border-top: 0;
}

.story-act {
    flex: 0 0 auto;
    gap: .32rem;
    min-height: 34px;
    padding: .25rem .55rem;
    border-radius: 999px;
    color: var(--tg-muted);
    font-size: .8rem;
    font-weight: 500;
}

.story-act:hover {
    background: var(--tg-raised);
    color: var(--tg-text);
}

.story-act-ic {
    font-size: .9rem;
}

.story-act-count {
    font-size: .78rem;
}

.story-act[liked],
.story-act[starring],
.story-act[arated],
.story-act[marks] {
    background: transparent;
}

.story-act[liked] {
    color: #e0526a;
}

.story-act[reacted] {
    color: var(--tg-accent);
}

.story-act[reacted] .story-act-count {
    font-size: .82rem;
}

/* The rating row above the actions is a Telegram-style segmented control */
.story-rate {
    margin: .1rem 0 .1rem 3rem;
}

/* ── Call to action ───────────────────────────────────────────────────── */
.story-cta {
    margin: .35rem 0 .25rem 3rem;
}

.story-cta a {
    border-radius: var(--tg-r-sm);
}

/* ── Comment prompt → Telegram's message bar ──────────────────────────── */
.story-comment-prompt {
    padding: .1rem 0 .75rem 3rem;
}

.story-comment-prompt button {
    min-height: 36px;
    padding: .35rem .85rem;
    border: 0;
    border-radius: 999px;
    background: var(--tg-raised);
    color: var(--tg-muted);
    font-size: .88rem;
}

.story-comment-prompt button:hover {
    background: color-mix(in srgb, var(--tg-accent) 12%, var(--tg-raised));
    border: 0;
    color: var(--tg-text);
}

/* ── Polls — Telegram's poll card ─────────────────────────────────────── */
.story-poll {
    padding: .15rem 0 .15rem 3rem;
}

.story-poll-mode {
    margin: 0 0 .5rem;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tg-muted);
}

.story-poll-deadline {
    padding: .08rem .45rem;
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
    font-size: .72rem;
    font-weight: 500;
}

.story-poll-list {
    gap: .35rem;
}

/* Each answer is a Telegram poll row: circle, label, and a result bar behind */
.poll-opt {
    gap: .5rem;
    padding: .5rem .7rem;
    border: 0;
    border-radius: var(--tg-r-sm);
    background: var(--tg-raised);
    font-size: .92rem;
}

.poll-opt::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2px solid color-mix(in srgb, var(--tg-muted) 70%, transparent);
    border-radius: 50%;
    transition: border-color var(--tg-fast), background var(--tg-fast);
}

.poll-opt.chosen::before,
.poll-opt.right::before {
    border-color: var(--tg-accent);
    background:
        radial-gradient(circle, var(--tg-accent) 0 45%, transparent 46%);
}

.poll-opt.wrong::before {
    border-color: #e0526a;
    background: radial-gradient(circle, #e0526a 0 45%, transparent 46%);
}

.poll-opt:hover {
    background: color-mix(in srgb, var(--tg-text) 9%, transparent);
    border: 0;
}

.poll-bar {
    background: var(--tg-accent-soft);
    opacity: 1;
}

.poll-opt-pct,
.poll-opt-count {
    color: var(--tg-muted);
    font-size: .8rem;
}

.poll-opt-text {
    position: relative;
}

.story-poll-foot {
    margin-top: .45rem;
    font-size: .78rem;
    color: var(--tg-muted);
}

.story-poll-total {
    font-weight: 500;
}

.story-poll-list.is-ended .poll-opt {
    opacity: .9;
}

/* Quiz verdicts: a tint, not a traffic light — the mark and the ring carry the answer */
.poll-opt.right {
    background: color-mix(in srgb, #3ddc84 12%, var(--tg-raised));
}

.poll-opt.wrong {
    background: color-mix(in srgb, #e0526a 12%, var(--tg-raised));
}

.poll-opt.leader .poll-bar {
    background: var(--tg-accent-soft);
}

.story-poll-list.is-ended .poll-opt:hover {
    background: var(--tg-raised);
}

/* ── Empty / error ────────────────────────────────────────────────────── */
.st-empty {
    gap: .5rem;
    margin: 3rem auto;
    max-width: 280px;
    font-size: .9rem;
    color: var(--tg-muted);
}

.st-empty::before {
    width: 64px;
    height: 64px;
    background: var(--tg-raised);
    box-shadow: none;
}

/* ── Bottom navigation + create FAB ───────────────────────────────────── */
.stories-footer {
    background: var(--tg-panel);
    border-top: 1px solid var(--tg-hair);
}

.stories-bottom-nav {
    background: transparent;
    border: 0;
}

.snav-item {
    gap: .15rem;
    color: var(--tg-muted);
    font-size: .68rem;
    font-weight: 500;
}

.snav-item[active] {
    color: var(--tg-accent);
}

.snav-ic {
    font-size: 1.3rem;
}

/* Create becomes Telegram's floating pencil button */
.snav-add {
    flex: 0 0 auto;
}

.snav-add-ring {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--tg-accent);
    color: #fff;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--tg-accent) 45%, transparent);
    transition: transform var(--tg-fast), box-shadow var(--tg-fast);
}

.snav-add:hover .snav-add-ring {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--tg-accent) 55%, transparent);
}

.snav-add-ic svg {
    fill: #fff;
}

/* ── Drawer — Telegram's left panel ───────────────────────────────────── */
#xmenu,
.stories-drawer {
    background: rgba(0, 0, 0, .45) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.stories-drawer-panel {
    background: var(--tg-panel);
    border-right: 1px solid var(--tg-hair);
}

.drawer-hero {
    padding: .9rem .8rem .6rem;
    border-bottom: 1px solid var(--tg-hair);
}

.stories-drawer nav p,
.drawer-group {
    padding: .85rem .9rem .25rem;
    color: var(--tg-accent);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.drawer-link {
    gap: .8rem;
    padding: .62rem .9rem;
    border-radius: 0;
    color: var(--tg-text);
    font-size: .94rem;
    font-weight: 500;
}

.drawer-link:hover {
    background: var(--tg-raised);
}

.drawer-link svg {
    color: var(--tg-muted);
}

/* ── Desktop rails → Telegram side panels ─────────────────────────────── */
.stories-aside {
    padding: 0;
}

.rail-card {
    background: var(--tg-panel);
    border: 0;
    border-radius: var(--tg-r);
    box-shadow: none;
    padding: .85rem .8rem;
}

.rail-card+.rail-card {
    margin-top: .75rem;
}

/* Section titles read as Telegram's "list header": small, muted, spaced */
.rail-title {
    margin: 0 0 .6rem;
    color: var(--tg-muted);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rail-more {
    color: var(--tg-accent);
    font-size: .78rem;
    font-weight: 500;
}

/* Stat grid: label above value, both quiet, no coloured numbers */
.rail-stats {
    gap: .55rem;
}

.rail-stat {
    padding: .45rem .55rem;
    border-radius: var(--tg-r-sm);
    background: var(--tg-raised);
}

.rail-stat-val,
.rail-stat.is-published .rail-stat-val,
.rail-stat.is-likes .rail-stat-val,
.rail-stat.is-stars .rail-stat-val {
    color: var(--tg-text);
    font-size: 1.05rem;
    font-weight: 600;
}

.rail-stat-lbl {
    color: var(--tg-muted);
    font-size: .7rem;
}

/* Trending tags: accent text on a soft pill, like Telegram's hashtag search */
.rail-tag {
    border: 0;
    border-radius: 999px;
    background: var(--tg-raised);
    color: var(--tg-text);
    font-size: .8rem;
    font-weight: 500;
}

.rail-tag:hover {
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
}

.rail-tag small {
    color: var(--tg-muted);
    font-size: .7rem;
}

/* Streak leaderboard rows */
.rail-ranks li {
    padding: .4rem .5rem;
    border-radius: var(--tg-r-sm);
    color: var(--tg-text);
    font-size: .86rem;
}

.rail-ranks li:hover {
    background: var(--tg-raised);
}

/* ── Composer / studio ──────────────────────────────────────────────────
   The studio markup carries its own <style> block, inserted after these
   links, so equal-specificity rules of mine would lose. Every selector below
   is scoped under `#pubbox` (an extra id) for that reason alone. */
/* `.opacio-dark` (the studio's own glass class) sets a translucent background with
   !important, so this needs the extra class on the selector to stay opaque. */
#pubbox #publish.card,
#pubbox #publish.card.opacio-dark {
    background-color: var(--tg-panel) !important;
    border: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: var(--tg-shadow);
}

#pubbox #storymodule .st-studio-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

#pubbox #storymodule .st-studio-head {
    padding: .9rem 1rem .5rem;
    border: 0;
}

/* The publish bar is fixed to the sheet's foot; without this the last card slides
   underneath it and the "Share as" pill gets eaten. */
#pubbox #storymodule form#mystoryeditor {
    padding-bottom: 5.5rem;
}

#pubbox #storymodule .st-card {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--tg-hair);
    border-radius: 0;
    padding: .85rem 1rem;
}

#pubbox #storymodule .st-label {
    margin: 0 0 .45rem;
    color: var(--tg-muted);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* The studio's own tokens, re-pointed so every control inherits the palette */
#pubbox #storymodule {
    --cs-accent: var(--tg-accent);
    --cs-text: var(--tg-text);
    --cs-muted: var(--tg-muted);
    --cs-border: transparent;
    --cs-surface: var(--tg-raised);
    --cs-surface-2: var(--tg-raised);
    --cs-r: var(--tg-r-sm);
}

#pubbox #storymodule .st-input,
#pubbox #storymodule .st-textarea,
#pubbox #storymodule .st-tagbox {
    min-height: 2.75rem;
    padding: .6rem .8rem;
    border: 1px solid transparent;
    border-radius: var(--tg-r-sm);
    background: var(--tg-raised);
    font-size: .92rem;
}

#pubbox #storymodule .st-input:focus,
#pubbox #storymodule .st-textarea:focus,
#pubbox #storymodule .st-tagbox:focus-within {
    border-color: var(--tg-accent);
    box-shadow: none;
}

#pubbox #storymodule .st-input:hover,
#pubbox #storymodule .st-textarea:hover {
    border-color: transparent;
}

#pubbox #storymodule #title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.008em;
    padding: .68rem .8rem;
}

#pubbox #storymodule #fileplate label {
    border: 0;
    border-radius: var(--tg-r-sm);
    background: var(--tg-raised);
    font-size: .8rem;
    font-weight: 500;
}

#pubbox #storymodule #fileplate label:has(input:checked) {
    background: var(--tg-accent-soft);
    color: var(--tg-accent);
}

#pubbox #storymodule #agerates label,
#pubbox #storymodule #pollmodes label {
    border: 0;
    border-radius: 999px;
    background: var(--tg-raised);
    font-weight: 500;
    color: var(--tg-text);
}

#pubbox #storymodule #agerates label:has(input:checked),
#pubbox #storymodule #pollmodes label:has(input:checked) {
    background: var(--tg-accent);
    color: #fff;
}

#pubbox #storymodule .st-hint {
    color: var(--tg-muted);
    font-size: .76rem;
}

#pubbox #storymodule .st-poll-add {
    border: 1px dashed var(--tg-hair);
    border-radius: var(--tg-r-sm);
    font-weight: 500;
    color: var(--tg-muted);
}

#pubbox #storymodule #submitext {
    border: 0;
    border-radius: 999px;
    background: var(--tg-accent);
    color: #fff;
    font-weight: 600;
    padding: .6rem 1.1rem;
}

#pubbox #storymodule .st-author-btn {
    border: 0;
    background: var(--tg-raised);
    border-radius: 999px;
}

#pubbox #storymodule .st-as-menu {
    background: var(--tg-panel);
    border: 0;
    border-radius: var(--tg-r);
    box-shadow: var(--tg-shadow);
}

#pubbox #storymodule .st-as-item {
    border-radius: var(--tg-r-sm);
}

#pubbox #storymodule .st-as-item:hover {
    background: var(--tg-raised);
}

#pubbox #storymodule .st-as-note {
    color: var(--tg-muted);
    font-size: .78rem;
}

/* ── Comments sheet → Telegram chat ───────────────────────────────────── */
#bottomSheet {
    background: var(--tg-panel) !important;
    border: 0;
    border-radius: 16px 16px 0 0 !important;
    box-shadow: var(--tg-shadow) !important;
}

#dragHandler {
    background: color-mix(in srgb, var(--tg-muted) 40%, transparent) !important;
}

/* ── Popover menu ─────────────────────────────────────────────────────── */
.popover {
    border: 0;
    border-radius: var(--tg-r);
    background: var(--tg-panel);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}

.st-menu-item {
    gap: .7rem;
    padding: .62rem .8rem;
    border-radius: var(--tg-r-sm);
    color: var(--tg-text);
    font-size: .9rem;
}

.st-menu-item:hover {
    background: var(--tg-raised);
}

.st-menu-item.is-danger {
    color: #e0526a;
}

/* ── Reveal: Telegram is calm — a fade and a short rise, nothing more ─── */
.has-reveal .stories-feed .story {
    transform: translate3d(0, 10px, 0);
    transition: opacity .3s var(--tg-ease), transform .35s var(--tg-ease);
}

.has-reveal .stories-feed .story.is-reveal-from-top {
    transform: translate3d(0, -10px, 0);
}

.has-reveal .stories-feed .story.is-revealed {
    opacity: 1;
    transform: none;
}

/* ── Small screens ────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .stories-feed {
        padding: 0 0 3.5rem;
    }

    .stories-feed .story {
        padding: 0 .8rem;
    }

    .story-card>[caption],
    .story-card .story-body>[caption] {
        padding-left: 0 !important;
    }

    .story-actions,
    .story-rate,
    .story-cta,
    .story-comment-prompt,
    .story-poll {
        margin-left: 0;
        padding-left: 0;
    }

    .story-act-label {
        display: none;
    }

    .story-actions {
        justify-content: space-between;
    }
}

@media (min-width: 992px) {
    #main_view {
        border-left: 1px solid var(--tg-hair);
        border-right: 1px solid var(--tg-hair);
    }
}

@media (prefers-reduced-motion: reduce) {
    .has-reveal .stories-feed .story {
        transform: none;
        transition: none;
    }
}