/**
 * Widgets Redesign v1.3.0
 * ─────────────────────────────────────────────────────────
 * CRITICAL DESIGN DECISIONS that fix the overlap/invisible bugs:
 *
 * 1. Desktop rail: position:fixed; RIGHT:16px  → always in right gutter, never overlaps content
 * 2. Mobile FAB: NO display:none in CSS. It is always display:block.
 *    Hidden on desktop purely by media query display:none.
 * 3. Backdrop/sheets: visibility controlled by CSS classes only (no JS display toggling)
 *    Uses opacity+pointer-events+translateY, not display.
 * 4. TOC panel on desktop is a left-anchored popup, not inline — so it never pushes content.
 * ─────────────────────────────────────────────────────────
 */

/* ─── Design Tokens ─── */
:root {
    --wr-glass: rgba(255, 255, 255, 0.75);
    --wr-blur: 16px;
    --wr-border: rgba(255, 255, 255, 0.5);
    --wr-shadow: 0 4px 20px rgba(0, 0, 0, 0.10);
    --wr-r: 12px;
    --wr-r-sm: 8px;
    --wr-r-full: 999px;

    --wr-orange: #FF9933;
    --wr-green: #138808;
    --wr-wa: #25D366;
    --wr-tw: #1DA1F2;
    --wr-fb: #1877F2;
    --wr-tg: #0088cc;
    --wr-copy: #6b7280;

    --wr-t1: #111827;
    --wr-t2: #6b7280;
    --wr-t3: #9ca3af;

    --z-rail: 900;
    --z-fab: 950;
    --z-overlay: 1000;
    --z-toast: 1100;
}

/* ═══════════════════════════════════════
   DESKTOP RAIL
   Fixed RIGHT side — 56px wide icon strip.
   TOC flyout opens to the LEFT of the strip.
═══════════════════════════════════════ */
.wr-rail {
    position: fixed;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    z-index: var(--z-rail);

    display: flex;
    /* always flex on desktop */
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 8px;
    width: 52px;

    background: var(--wr-glass);
    backdrop-filter: blur(var(--wr-blur));
    -webkit-backdrop-filter: blur(var(--wr-blur));
    border: 1px solid var(--wr-border);
    box-shadow: var(--wr-shadow);
    border-radius: var(--wr-r);
}

/* Generic icon button inside rail */
.wr-rail__btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wr-t2);
    transition: background .15s, color .15s, transform .15s;
}

.wr-rail__btn:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--wr-orange);
    transform: scale(1.1);
}

/* Read-time chip */
.wr-rail__chip {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: var(--wr-t3);
    text-align: center;
    cursor: default;
    padding: 2px 0;
}

/* Divider */
.wr-rail__div {
    width: 28px;
    height: 1px;
    background: rgba(0, 0, 0, .08);
    flex-shrink: 0;
    margin: 2px 0;
}

/* TOC wrapper — needed for relative positioning of popup */
.wr-rail__toc-wrap {
    position: relative;
}

/* Share icon strip */
.wr-rail__share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.wr-rail__share-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    filter: saturate(.55);
    transition: filter .2s, transform .2s, box-shadow .2s;
}

.wr-rail__share-btn:hover {
    filter: saturate(1);
    transform: scale(1.12);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}

.wr-rail__share-btn:active {
    transform: scale(.95);
}

.wr-rail__share-btn--whatsapp {
    background: var(--wr-wa);
}

.wr-rail__share-btn--twitter {
    background: var(--wr-tw);
}

.wr-rail__share-btn--facebook {
    background: var(--wr-fb);
}

.wr-rail__share-btn--telegram {
    background: var(--wr-tg);
}

.wr-rail__share-btn--copy {
    background: var(--wr-copy);
}

/* ─── TOC flyout panel ─── */
.wr-toc-panel {
    position: absolute;
    top: 0;
    right: calc(100% + 12px);
    /* pops OUT to the LEFT of the rail */
    width: 240px;
    max-height: 70vh;
    overflow-y: auto;

    background: var(--wr-glass);
    backdrop-filter: blur(var(--wr-blur));
    -webkit-backdrop-filter: blur(var(--wr-blur));
    border: 1px solid var(--wr-border);
    box-shadow: var(--wr-shadow);
    border-radius: var(--wr-r);
    padding: 12px;

    /* hidden by default */
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity .2s, transform .2s;

    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .12) transparent;
}

.wr-toc-panel::-webkit-scrollbar {
    width: 4px;
}

.wr-toc-panel::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .12);
    border-radius: 2px;
}

.wr-toc-panel--open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

.wr-toc-panel__hdr {
    font-size: 11px;
    font-weight: 700;
    color: var(--wr-t3);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}

.wr-toc-panel__nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.wr-toc-panel__empty {
    font-size: 13px;
    color: var(--wr-t3);
    margin: 0;
}

.wr-toc-link {
    display: block;
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--wr-t2);
    text-decoration: none;
    border-radius: var(--wr-r-sm);
    border-left: 2px solid transparent;
    word-break: break-word;
    transition: all .15s;
}

.wr-toc-link--h3 {
    padding-left: 16px;
    font-size: 12px;
}

.wr-toc-link--h4 {
    padding-left: 26px;
    font-size: 11px;
}

.wr-toc-link:hover {
    background: rgba(255, 153, 51, .10);
    color: var(--wr-orange);
    border-left-color: var(--wr-orange);
}

.wr-toc-link--active {
    background: rgba(255, 153, 51, .12);
    color: var(--wr-orange);
    border-left-color: var(--wr-orange);
    font-weight: 600;
}

/* ═══════════════════════════════════════
   DESKTOP READING BAR (inside article)
═══════════════════════════════════════ */
.wr-rbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 20px;

    background: var(--wr-glass);
    backdrop-filter: blur(var(--wr-blur));
    -webkit-backdrop-filter: blur(var(--wr-blur));
    border: 1px solid var(--wr-border);
    box-shadow: var(--wr-shadow);
    border-radius: var(--wr-r);
}

.wr-rbar__left {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--wr-t2);
    white-space: nowrap;
}

.wr-rbar__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    background: linear-gradient(135deg, var(--wr-orange) 0%, #e67e00 100%);
    color: #fff;
    border: none;
    border-radius: var(--wr-r-full);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity .2s, transform .2s;
}

.wr-rbar__btn:hover {
    opacity: .88;
    transform: translateY(-1px);
}

.wr-rbar__btn:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════
   MOBILE: SHARED BACKDROP
   One reusable backdrop class for sheet + drawer
═══════════════════════════════════════ */
.wr-bd {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.wr-bd--on {
    opacity: 1;
    pointer-events: auto;
}

/* ═══════════════════════════════════════
   MOBILE: FAB SPEED-DIAL
═══════════════════════════════════════ */
.wr-fab {
    position: fixed;
    bottom: 76px;
    right: 18px;
    z-index: var(--z-fab);
    /* NO display:none here — visible on mobile always.
       Hidden on desktop via @media below. */
}

.wr-fab--hide {
    transform: translateY(120px);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

/* Smooth return */
.wr-fab:not(.wr-fab--hide) {
    transform: translateY(0);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

/* Main toggle button */
.wr-fab__main {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    background: var(--wr-glass);
    backdrop-filter: blur(var(--wr-blur));
    -webkit-backdrop-filter: blur(var(--wr-blur));
    border: 1px solid var(--wr-border);
    box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
    transition: box-shadow .2s, transform .15s;
}

.wr-fab__main:active {
    transform: scale(.94);
}

/* Swap menu/close icons */
.wr-fab__ic {
    position: absolute;
    transition: opacity .2s, transform .2s;
    stroke: var(--wr-t1);
}

.wr-fab__ic--menu {
    opacity: 1;
    transform: rotate(0);
}

.wr-fab__ic--close {
    opacity: 0;
    transform: rotate(-90deg);
}

.wr-fab__main--open .wr-fab__ic--menu {
    opacity: 0;
    transform: rotate(90deg);
}

.wr-fab__main--open .wr-fab__ic--close {
    opacity: 1;
    transform: rotate(0);
}

/* Speed-dial menu */
.wr-fab__menu {
    position: absolute;
    bottom: 64px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;

    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.96);
    transform-origin: bottom right;
    transition: opacity .22s ease, transform .22s ease;
}

.wr-fab__menu--open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.wr-fab__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wr-fab__tip {
    background: rgba(20, 20, 20, .80);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--wr-r-full);
    white-space: nowrap;
    pointer-events: none;
}

.wr-fab__item {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    background: var(--wr-glass);
    backdrop-filter: blur(var(--wr-blur));
    -webkit-backdrop-filter: blur(var(--wr-blur));
    border: 1px solid var(--wr-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
    transition: transform .15s, box-shadow .15s;
}

.wr-fab__item:hover {
    transform: scale(1.08);
}

.wr-fab__item:active {
    transform: scale(.93);
}

.wr-fab__item svg {
    stroke: var(--wr-t1);
}

.wr-fab__item--toc {
    background: rgba(255, 153, 51, .18);
    border-color: rgba(255, 153, 51, .45);
}

.wr-fab__item--audio {
    background: rgba(19, 136, 8, .14);
    border-color: rgba(19, 136, 8, .40);
}

.wr-fab__item--share {
    background: rgba(29, 161, 242, .14);
    border-color: rgba(29, 161, 242, .40);
}

/* ═══════════════════════════════════════
   MOBILE: SHARE BOTTOM SHEET
═══════════════════════════════════════ */
.wr-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-overlay) + 1);

    background: #fff;
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 0 -6px 30px rgba(0, 0, 0, .12);

    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32, .72, 0, 1);
    max-height: 80vh;
    overflow-y: auto;
}

.wr-sheet--on {
    transform: translateY(0);
}

.wr-sheet__handle {
    width: 38px;
    height: 4px;
    background: rgba(0, 0, 0, .12);
    border-radius: 2px;
    margin: 10px auto 0;
}

.wr-sheet__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 10px;
}

.wr-sheet__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--wr-t1);
}

.wr-sheet__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wr-sheet__close svg {
    stroke: var(--wr-t2);
}

.wr-sheet__body {
    display: flex;
    flex-direction: column;
    padding: 4px 14px 28px;
    gap: 6px;
}

/* Share row */
.wr-srow {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 12px;
    background: rgba(0, 0, 0, .03);
    cursor: pointer;
    transition: background .15s;
}

.wr-srow:hover {
    background: rgba(0, 0, 0, .06);
}

.wr-srow:active {
    background: rgba(0, 0, 0, .09);
}

.wr-srow__ic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}

.wr-srow--whatsapp .wr-srow__ic {
    background: var(--wr-wa);
}

.wr-srow--twitter .wr-srow__ic {
    background: var(--wr-tw);
}

.wr-srow--facebook .wr-srow__ic {
    background: var(--wr-fb);
}

.wr-srow--telegram .wr-srow__ic {
    background: var(--wr-tg);
}

.wr-srow--copy .wr-srow__ic {
    background: var(--wr-copy);
}

.wr-srow__lbl {
    font-size: 15px;
    font-weight: 500;
    color: var(--wr-t1);
}

/* ═══════════════════════════════════════
   MOBILE: TOC LEFT DRAWER
═══════════════════════════════════════ */
.wr-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(82vw, 300px);
    z-index: calc(var(--z-overlay) + 1);

    background: #fff;
    border-right: 1px solid rgba(0, 0, 0, .07);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .12);

    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.32, .72, 0, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.wr-drawer--on {
    transform: translateX(0);
}

.wr-drawer__hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 14px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
}

.wr-drawer__title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 16px;
    font-weight: 700;
    color: var(--wr-t1);
}

.wr-drawer__title-ic {
    stroke: var(--wr-orange);
}

.wr-drawer__close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.wr-drawer__close svg {
    stroke: var(--wr-t2);
}

.wr-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: 10px 10px 24px;
    gap: 1px;
}

.wr-drawer__link {
    display: block;
    padding: 9px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--wr-t2);
    text-decoration: none;
    border-radius: var(--wr-r-sm);
    border-left: 2px solid transparent;
    word-break: break-word;
    transition: all .15s;
}

.wr-drawer__link--h3 {
    padding-left: 20px;
    font-size: 13px;
}

.wr-drawer__link--h4 {
    padding-left: 30px;
    font-size: 12px;
}

.wr-drawer__link:hover {
    background: rgba(255, 153, 51, .10);
    color: var(--wr-orange);
    border-left-color: var(--wr-orange);
}

/* ═══════════════════════════════════════
   AUDIO PLAYER BAR
   Floats at bottom of viewport on both
   mobile and desktop. Hidden until playing.
═══════════════════════════════════════ */
.wr-aplayer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: calc(var(--z-fab) + 5);

    /* hidden by default */
    transform: translateY(100%);
    transition: transform .35s cubic-bezier(.32, .72, 0, 1);
    pointer-events: none;
}

.wr-aplayer--on {
    transform: translateY(0);
    pointer-events: auto;
}

.wr-aplayer__row {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 680px;
    margin: 0 auto 12px;
    padding: 10px 14px;

    background: rgba(255, 255, 255, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 14px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .14);
}

/* Play/pause button */
.wr-aplayer__play {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, .1);
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    transition: transform .15s, border-color .2s;
}

.wr-aplayer__play:hover {
    transform: scale(1.08);
    border-color: var(--wr-orange);
}

.wr-aplayer__play:active {
    transform: scale(.94);
}

.wr-aplayer__play-ic {
    position: absolute;
    stroke: var(--wr-t1);
    transition: opacity .2s, transform .2s;
}

/* show play icon by default, hide pause */
.wr-aplayer__play-ic--pause {
    opacity: 0;
    transform: scale(.6);
}

/* when playing: hide play, show pause */
.wr-aplayer__play--playing .wr-aplayer__play-ic:not(.wr-aplayer__play-ic--pause) {
    opacity: 0;
    transform: scale(.6);
}

.wr-aplayer__play--playing .wr-aplayer__play-ic--pause {
    opacity: 1;
    transform: scale(1);
}

/* Middle section */
.wr-aplayer__mid {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.wr-aplayer__timerow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wr-aplayer__time {
    font-size: 11px;
    color: var(--wr-t3);
    font-weight: 500;
    white-space: nowrap;
    min-width: 32px;
    text-align: center;
}

.wr-aplayer__time--total {
    color: var(--wr-t3);
}

/* Progress track */
.wr-aplayer__track {
    flex: 1;
    height: 4px;
    background: rgba(0, 0, 0, .08);
    border-radius: 99px;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

.wr-aplayer__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wr-orange), #e67e00);
    border-radius: 99px;
    width: 0%;
    transition: width .12s linear;
    position: relative;
}

.wr-aplayer__fill::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: var(--wr-orange);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

/* Speed buttons */
.wr-aplayer__speeds {
    display: flex;
    gap: 4px;
}

.wr-aplayer__speed {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    background: transparent;
    color: var(--wr-t3);
    cursor: pointer;
    transition: all .15s;
    line-height: 1.4;
}

.wr-aplayer__speed:hover {
    color: var(--wr-t2);
    border-color: rgba(0, 0, 0, .2);
}

.wr-aplayer__speed--on {
    background: var(--wr-orange);
    border-color: var(--wr-orange);
    color: #fff;
}

/* Close button */
.wr-aplayer__close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s;
}

.wr-aplayer__close:hover {
    background: rgba(0, 0, 0, .10);
}

.wr-aplayer__close svg {
    stroke: var(--wr-t2);
    width: 14px;
    height: 14px;
}

/* On mobile: player sits above FAB */
@media (max-width: 768px) {
    .wr-aplayer__row {
        margin: 0 10px 140px;
        /* clear FAB */
    }

    .wr-aplayer__speeds {
        display: none;
    }
}

/* ── TTS sentence highlight ── */
.wr-tts-highlight {
    background: rgba(255, 153, 51, .12) !important;
    border-left: 3px solid var(--wr-orange) !important;
    padding-left: 10px !important;
    border-radius: 0 4px 4px 0 !important;
    transition: background .3s ease !important;
}

/* Listen button active state */
.wr-rail__btn--active {
    color: var(--wr-orange) !important;
}

.wr-rbar__btn--playing {
    background: linear-gradient(135deg, #e67e00, var(--wr-green)) !important;
}

.wr-fab__item--playing {
    background: rgba(255, 153, 51, .25) !important;
    border-color: var(--wr-orange) !important;
}

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.wr-toast {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(15, 15, 15, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--wr-r-sm);

    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .25s, transform .25s;
}

.wr-toast--in {
    opacity: 1;
    transform: translateY(0);
}

.wr-toast__ic {
    stroke: #4ade80;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════
   RESPONSIVE GUARDS
   Desktop: hide all mobile-only elements
   Mobile:  hide all desktop-only elements
═══════════════════════════════════════ */
@media (min-width: 769px) {

    /* hide mobile elements on desktop */
    .wr-fab,
    .wr-bd,
    .wr-sheet,
    .wr-drawer {
        display: none !important;
    }
}

@media (max-width: 768px) {

    /* hide desktop elements on mobile */
    .wr-rail,
    .wr-rbar {
        display: none !important;
    }
}

/* ─── Accessibility ─── */
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--wr-orange);
    outline-offset: 3px;
    border-radius: 4px;
}

* {
    -webkit-tap-highlight-color: transparent;
}