.article-read-indicator {
    position: fixed;
    z-index: 950;
    right: 22px;
    bottom: 24px;
    display: flex;
    width: min(310px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid #dcd7f7;
    border-radius: 18px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 45px rgba(42, 51, 83, .18);
    color: #344054;
    backdrop-filter: blur(14px);
}

.article-read-indicator__meter {
    position: relative;
    width: 7px;
    flex: 0 0 7px;
    background: #ece9fb;
}

.article-read-indicator__meter > span {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 0;
    background: linear-gradient(0deg, #6047e9, #2f8bf1);
    transition: height .3s ease, background .2s ease;
}

.article-read-indicator__content { flex: 1; min-width: 0; padding: 13px 15px; }
.article-read-indicator__heading { display: flex; align-items: center; gap: 10px; }
.article-read-indicator__heading > span:last-child { display: grid; gap: 1px; }
.article-read-indicator__heading small { color: #725fe0; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.article-read-indicator__heading strong { color: #273142; font-size: 15px; }
.article-read-indicator__icon { display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border-radius: 12px; background: #eeeaff; color: #6047e9; }
.article-read-indicator__progress { height: 6px; margin: 9px 0; overflow: hidden; border-radius: 999px; background: #eceff5; }
.article-read-indicator__progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6047e9, #2f8bf1); transition: width .3s ease; }
.article-read-indicator__conditions { display: grid; gap: 2px; }
.article-read-indicator__conditions > span { display: flex; align-items: center; gap: 7px; color: #748094; font-size: 11px; line-height: 1.35; }
.article-read-indicator__conditions i { width: 14px; color: #a5adba; text-align: center; }
.article-read-indicator__conditions b { font-weight: 750; }
.article-read-indicator__conditions .is-complete { color: #168a64; }
.article-read-indicator__conditions .is-complete i { color: #16a373; }
.article-read-indicator p { margin: 6px 0 0; color: #6047e9; font-size: 11px; font-weight: 850; line-height: 1.35; }
.article-read-indicator.is-final-countdown { border-color: #f0c85f; box-shadow: 0 18px 48px rgba(207, 151, 21, .22); }
.article-read-indicator.is-final-countdown .article-read-indicator__meter > span,
.article-read-indicator.is-final-countdown .article-read-indicator__progress > span { background: linear-gradient(0deg, #ff9f1c, #ffd052); }
.article-read-indicator.is-complete { border-color: #99e1c7; background: rgba(244, 255, 251, .98); }
.article-read-indicator.is-complete .article-read-indicator__icon { background: #dcf7ed; color: #12845f; }
.article-read-indicator.is-complete p { color: #08784e; }
.article-read-indicator.is-complete .article-read-indicator__meter > span,
.article-read-indicator.is-complete .article-read-indicator__progress > span { background: #16a373; }
.article-read-indicator.is-error { border-color: #f1b6c3; }
.article-read-indicator.is-error p { color: #c6244a; }

@media (max-width: 767px) {
    .article-read-indicator { right: 8px; bottom: 8px; width: min(260px, calc(100vw - 16px)); border-radius: 13px; }
    .article-read-indicator__meter { width: 5px; flex-basis: 5px; }
    .article-read-indicator__content { padding: 9px 10px; }
    .article-read-indicator__heading { gap: 7px; }
    .article-read-indicator__heading small { font-size: 9px; letter-spacing: .06em; }
    .article-read-indicator__heading strong { font-size: 13px; line-height: 1.2; }
    .article-read-indicator__icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 10px; font-size: 13px; }
    .article-read-indicator__progress { height: 4px; margin: 8px 0; }
    .article-read-indicator__conditions { gap: 3px; }
    .article-read-indicator__conditions > span { gap: 5px; font-size: 10px; line-height: 1.35; }
    .article-read-indicator__conditions i { width: 12px; font-size: 10px; }
    .article-read-indicator p { margin-top: 6px; font-size: 10px; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
    .article-read-indicator__meter > span,
    .article-read-indicator__progress > span { transition: none; }
}