/* ==========================================================================
   poem-reader.css — أنماط قارئ الأبيات (التأمل والإنشاد)
   ========================================================================== */

/* ==========================================================================
   رأس القصيدة (Poem Hero)
   ========================================================================== */

.poem-hero {
    background: linear-gradient(
        180deg,
        var(--color-surface) 0%,
        var(--color-bg) 100%
    );
    border-bottom: 1px solid var(--color-surface-border);
    padding: clamp(2.25rem, 6vw, 3rem) 0 clamp(1.75rem, 4vw, 2rem);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.poem-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--paper-pattern);
    opacity: 0.35;
    pointer-events: none;
}

.poem-hero__inner {
    position: relative;
    z-index: 1;
}

.poem-hero__order {
    font-size: 0.82rem;
    color: var(--color-accent);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.poem-hero__title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-heading);
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

.poem-hero__poet {
    font-size: 1.1rem;
    color: var(--color-muted);
    margin-bottom: 1.25rem;
}

.poem-hero__poet-link {
    color: var(--color-accent);
    font-weight: 500;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 1px;
}

.poem-hero__poet-link:hover {
    border-bottom-color: var(--color-accent);
}

.poem-hero__meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
}

.poem-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--color-on-surface-muted);
}

.poem-hero__occasion-btn {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
}

/* غلاف بصورة بارزة */
.poem-hero--cover {
    position: relative;
    min-height: clamp(260px, 38vh, 380px);
    padding: 3rem 0 2.5rem;
    border-bottom: 1px solid var(--color-surface-border);
    background-color: var(--color-surface);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.poem-hero--cover::before {
    display: none;
}

.poem-hero--cover .poem-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.poem-hero__cover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--color-surface) 0%,
        color-mix(in srgb, var(--color-surface) 55%, transparent) 14%,
        rgba(0, 0, 0, 0.2) 48%,
        rgba(0, 0, 0, 0.82) 100%
    );
    pointer-events: none;
}

.poem-hero--cover .poem-hero__order {
    color: rgba(255, 255, 255, 0.75);
}

.poem-hero--cover .poem-hero__title {
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.poem-hero--cover .poem-hero__poet {
    color: rgba(255, 255, 255, 0.88);
}

.poem-hero--cover .poem-hero__poet-link {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.45);
}

.poem-hero--cover .poem-hero__poet-link:hover {
    border-bottom-color: #fff;
}

.poem-hero--cover .poem-hero__meta-item {
    color: rgba(255, 255, 255, 0.82);
}

.poem-hero--cover .poem-hero__meta-item svg {
    opacity: 0.85;
}

.poem-hero--cover .poem-hero__occasion-btn {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.poem-hero--cover .poem-hero__occasion-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
    color: #fff;
}

/* ==========================================================================
   شريط أدوات القراءة
   ========================================================================== */

.poem-reader-toolbar {
    position: sticky;
    top: var(--header-height, 62px);
    z-index: 50;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    border-bottom: 1px solid var(--color-border);
    padding: 0.65rem 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition:
        padding var(--motion-base) var(--ease-out),
        box-shadow var(--motion-base) var(--ease-out),
        background var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out),
        backdrop-filter var(--motion-base) var(--ease-out),
        -webkit-backdrop-filter var(--motion-base) var(--ease-out);
}

.poem-reader-toolbar.is-compact {
    padding: 0.3rem 0;
    box-shadow: 0 4px 18px rgba(90, 62, 43, 0.1);
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    border-bottom-color: color-mix(in srgb, var(--color-border) 65%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.poem-reader-toolbar.is-compact .poem-reader-toolbar__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.4rem;
}

/* عناصر تُخفى تدريجياً في الوضع المضغوط */
.poem-reader-toolbar__compact-hide,
.reading-mode-btn__label,
.poem-copy-all-btn__label,
.poem-toolbar-explain-btn__label {
    display: inline-block;
    overflow: hidden;
    max-width: 12rem;
    opacity: 1;
    vertical-align: middle;
    transition:
        max-width var(--motion-base) var(--ease-out),
        opacity var(--motion-fast) var(--ease-out),
        margin var(--motion-base) var(--ease-out);
}

.poem-reader-toolbar.is-compact .poem-reader-toolbar__compact-hide,
.poem-reader-toolbar.is-compact .reading-mode-btn__label,
.poem-reader-toolbar.is-compact .poem-copy-all-btn__label,
.poem-reader-toolbar.is-compact .poem-toolbar-explain-btn__label {
    max-width: 0;
    opacity: 0;
    margin: 0;
    pointer-events: none;
}

.poem-reader-toolbar.is-compact .poem-toolbar-explain-btn,
.poem-reader-toolbar.is-compact .poem-default-book-btn {
    min-height: 2.15rem;
    min-width: 2.15rem;
    padding: 0.35rem;
    gap: 0;
}

.poem-reader-toolbar.is-compact .reading-mode-switcher {
    border-radius: 999px;
    transition: border-radius var(--motion-base) var(--ease-out);
}

.poem-reader-toolbar.is-compact .reading-mode-btn {
    min-height: 2.15rem;
    min-width: 2.15rem;
    padding: 0.35rem;
    gap: 0;
}

.poem-reader-toolbar.is-compact .reading-mode-btn svg {
    width: 17px;
    height: 17px;
    transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out);
}

.poem-reader-toolbar.is-compact .poem-copy-all-btn {
    min-height: 2.15rem;
    min-width: 2.15rem;
    width: auto;
    padding: 0.35rem;
    gap: 0;
    order: unset;
    margin-right: 0;
}

.poem-reader-toolbar.is-compact .poem-copy-all-btn svg {
    width: 15px;
    height: 15px;
    transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out);
}

.poem-reader-toolbar.is-compact .poem-default-book-btn svg {
    width: 15px;
    height: 15px;
    transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out);
}

.poem-reader-toolbar__inner {
    display: flex;
    align-items: center;
    gap: 0.75rem 1rem;
    flex-wrap: wrap;
    transition: gap var(--motion-base) var(--ease-out);
}

.poem-reader-toolbar__row {
    display: contents;
}

.poem-reader-toolbar__label {
    font-size: 0.82rem;
    color: var(--color-muted);
    white-space: nowrap;
}

.reading-mode-switcher {
    display: flex;
    gap: 0;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-radius var(--motion-base) var(--ease-out);
}

.reading-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: var(--btn-height, 2.75rem);
    padding: 0.4rem 0.9rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        min-height var(--motion-base) var(--ease-out),
        min-width var(--motion-base) var(--ease-out),
        padding var(--motion-base) var(--ease-out),
        gap var(--motion-base) var(--ease-out);
    white-space: nowrap;
}

.reading-mode-btn:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.reading-mode-btn[aria-pressed="true"] {
    background: var(--color-accent);
    color: #fff;
}

.reading-mode-btn + .reading-mode-btn {
    border-right: 1.5px solid var(--color-border);
}

.reading-mode-btn svg {
    flex-shrink: 0;
    transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out);
}

/* ==========================================================================
   منطقة القارئ العامة
   ========================================================================== */

.poem-reader {
    padding-top: 2.5rem;
    padding-bottom: 5rem;
}

.poem-empty-state {
    text-align: center;
    padding: 5rem 1rem;
    color: var(--color-muted);
}

/* ==========================================================================
   نمط التأمل — Blossom Mode
   ========================================================================== */

.blossom-mode {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 780px;
    margin-inline: auto;
}

/* ==========================================================================
   انكشاف الأبيات — Fade Up عند التمرير
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
    .poem-reader--reveal-active .verse-card.verse-reveal:not(.verse-reveal--visible),
    .poem-reader--reveal-active .serenity-verse.verse-reveal:not(.verse-reveal--visible) {
        opacity: 0;
        transition:
            opacity 0.55s ease,
            transform 0.55s ease;
        transition-delay: var(--reveal-delay, 0ms);
    }

    .poem-reader--reveal-active .verse-card.verse-reveal:not(.verse-reveal--visible) {
        transform: translateY(18px);
    }

    .poem-reader--reveal-active .serenity-verse.verse-reveal:not(.verse-reveal--visible) {
        transform: translateY(10px);
    }

    .poem-reader--reveal-active .verse-card.verse-reveal.verse-reveal--visible,
    .poem-reader--reveal-active .serenity-verse.verse-reveal.verse-reveal--visible {
        opacity: 1;
        transform: none;
        transition:
            opacity 0.55s ease,
            transform 0.55s ease;
        transition-delay: var(--reveal-delay, 0ms);
    }
}

/* بطاقة البيت */
.verse-card {
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--color-on-surface);
    transition:
        box-shadow var(--motion-base) var(--ease-out),
        border-color var(--motion-base) var(--ease-out);
    scroll-margin-top: calc(var(--header-height, 62px) + 4rem);
    cursor: pointer;
}

.verse-card button,
.verse-card a,
.verse-card .verse-select-check {
    cursor: pointer;
}

.verse-card:target,
.verse-card:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

/* رأس البطاقة */
.verse-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-surface-border);
}

.verse-card__header-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-inline-start: auto;
    min-width: 0;
}

.verse-card__header .verse-select-check {
    margin-inline-start: 0;
    flex-shrink: 0;
}

.verse-card__header-actions {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    overflow: hidden;
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(var(--motion-slide) * 0.4));
    transition:
        max-width var(--motion-base) var(--ease-out),
        opacity var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

.verse-card.is-verse-active .verse-card__header-actions {
    max-width: 9rem;
    opacity: 1;
    pointer-events: auto;
    transform: none;
}

.verse-card.is-verse-closing .verse-card__header-actions {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(var(--motion-slide) * 0.25));
    transition:
        max-width var(--motion-slow) var(--ease-in),
        opacity var(--motion-slow) var(--ease-in),
        transform var(--motion-slow) var(--ease-in);
}

.verse-card__header-action {
    width: 1.85rem;
    height: 1.85rem;
    min-width: 1.85rem;
    min-height: 1.85rem;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
}

.verse-card__header-action svg {
    width: 13px;
    height: 13px;
}

.verse-card.is-verse-active {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.verse-card.is-verse-closing {
    transition:
        border-color var(--motion-slow) var(--ease-in),
        box-shadow var(--motion-slow) var(--ease-in);
}

.verse-card__number {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
    width: 1.8em;
    height: 1.8em;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--color-accent);
    line-height: 1;
    flex-shrink: 0;
}

.verse-card__actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.verse-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn-min-touch, 44px);
    height: var(--btn-min-touch, 44px);
    border: none;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition);
}

.verse-action-btn:hover {
    background: var(--color-bg);
    color: var(--color-accent);
}

.verse-action-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* نص البيت */
.verse-card__text {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    line-height: 1.7;
    color: var(--color-on-surface);
    text-align: center;
    justify-content: center;
    flex-wrap: wrap;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition:
        background-color var(--motion-base) var(--ease-out),
        padding var(--motion-base) var(--ease-out);
}

.verse-card.is-verse-active .verse-card__text {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.verse-card__text:hover {
    background: color-mix(in srgb, var(--color-surface-alt) 50%, transparent);
}

.verse-card.is-verse-closing .verse-card__text {
    transition: background-color var(--motion-slow) var(--ease-in);
}

.verse-card__shatr {
    flex: 1;
    min-width: 200px;
}

.verse-card__shatr--1 {
    text-align: left;
}

.verse-card__shatr--2 {
    text-align: right;
}

.verse-card__divider {
    color: var(--color-border);
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
}

/* تذييل البطاقة — الأكورديونات */
.verse-card__footer {
    border-top: 1px solid var(--color-surface-alt);
    padding: 0.75rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ==========================================================================
   أكورديون الشرح / المفردات / البلاغة
   ========================================================================== */

.verse-accordion {
    border-top: 1px solid var(--color-surface-alt);
}

.verse-accordion:first-child {
    border-top: none;
}

.verse-accordion__trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-accent);
    cursor: pointer;
    text-align: right;
    transition: color var(--transition);
}

.verse-accordion__trigger:hover {
    color: var(--color-accent-dark);
}

.accordion-chevron {
    margin-right: auto;
    transition: transform var(--transition);
    flex-shrink: 0;
}

.verse-accordion__trigger[aria-expanded="true"] .accordion-chevron {
    transform: rotate(180deg);
}

.verse-accordion__body {
    padding: 0.25rem 0 0.85rem 0.5rem;
    font-size: 0.92rem;
    color: var(--color-text);
    line-height: 1.85;
    animation: accordionOpen var(--motion-base) var(--ease-out);
}

.verse-accordion__body[hidden] {
    display: none;
}

@keyframes accordionOpen {
    from { opacity: 0; transform: translateY(calc(var(--motion-slide) * -0.5)); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   نمط الإنشاد — Serenity Mode
   ========================================================================== */

.serenity-mode {
    max-width: 820px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.serenity-verse {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: start;
    gap: 0.5rem 1rem;
    padding: 0.85rem 0.5rem;
    border-bottom: 1px dashed var(--color-border);
    scroll-margin-top: calc(var(--header-height, 62px) + 4rem);
    transition: background var(--transition), box-shadow var(--transition);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.serenity-verse button,
.serenity-verse a,
.serenity-verse .verse-select-check {
    cursor: pointer;
}

.serenity-verse__body {
    min-width: 0;
}

.serenity-verse.is-verse-active {
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-bg-alt));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.serenity-verse:last-child {
    border-bottom: none;
}

.serenity-verse:target,
.serenity-verse:hover {
    background: var(--color-bg-alt);
}

.serenity-verse__number {
    font-size: 0.75rem;
    color: var(--color-muted);
    font-weight: 400;
    padding-top: 0.3rem;
    text-align: center;
    line-height: 1;
}

.serenity-verse__text {
    font-family: var(--font-primary);
    font-size: clamp(1.1rem, 2.3vw, 1.3rem);
    color: var(--color-text);
    line-height: 1.75;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition);
    padding: 0.15rem 0.25rem;
    margin: -0.15rem -0.25rem;
}

.serenity-verse__text:hover {
    color: var(--color-accent-dark);
    background: color-mix(in srgb, var(--color-bg-alt) 70%, transparent);
}

.serenity-verse.verse--selected .serenity-verse__text {
    color: var(--color-accent-dark);
}

.serenity-verse__shatr {
    flex: 1;
    min-width: 160px;
}

/* الصدر: يلتصق بالفاصل من اليمين */
.serenity-verse__shatr:first-of-type {
    text-align: right;
}

/* العجز: يبدأ من الطرف الأيسر */
.serenity-verse__shatr:last-of-type {
    text-align: left;
}

.serenity-verse__sep {
    color: var(--color-border);
    flex-shrink: 0;
}

.serenity-verse__actions {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.serenity-action-btn,
.serenity-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--btn-min-touch, 44px);
    min-height: var(--btn-min-touch, 44px);
    padding: 0.35rem;
    border: none;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition);
    opacity: 1;
}

.serenity-action-btn:hover,
.serenity-info-btn:hover {
    background: var(--color-bg);
    color: var(--color-accent);
}

.serenity-info-btn[aria-expanded="true"] {
    color: var(--color-accent);
    background: var(--color-bg-alt);
}

/* ==========================================================================
   Modal — النوافذ المنبثقة
   ========================================================================== */

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalIn var(--motion-base) var(--ease-out);
}

.modal[hidden] {
    display: none;
}

@keyframes modalIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: var(--color-overlay);
    cursor: pointer;
}

.modal__box {
    position: relative;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--color-on-surface);
    animation: modalBoxIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal__box--sm {
    max-width: 480px;
}

@keyframes modalBoxIn {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--color-surface-border);
    background: var(--color-surface-alt);
    flex-shrink: 0;
}

.modal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-on-surface);
    margin: 0;
}

.modal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    background: transparent;
    color: var(--color-on-surface-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.modal__close:hover {
    background: var(--color-surface-alt);
    color: var(--color-on-surface);
}

.modal__body {
    padding: 1.5rem;
    overflow-y: auto;
    line-height: 1.9;
    color: var(--color-on-surface);
    font-size: 0.98rem;
}

/* ==========================================================================
   نموذج الإبلاغ عن خطأ
   ========================================================================== */

.report-form__field {
    margin-bottom: 1rem;
}

.report-form__label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-on-surface);
    margin-bottom: 0.4rem;
}

.report-form__input,
.report-form__textarea,
.report-form__select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--color-surface-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-on-surface);
    direction: rtl;
    transition: border-color var(--transition);
    resize: vertical;
}

.report-form__input:focus,
.report-form__textarea:focus,
.report-form__select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(139, 94, 60, 0.12);
}

.report-form__actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.report-form__feedback {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
}

.report-form__feedback--success {
    background: #e6f4ea;
    color: #2d6a4f;
    border: 1px solid #b7dfca;
}

.report-form__feedback--error {
    background: #fdecea;
    color: #922b21;
    border: 1px solid #f5c6c2;
}

.report-form__optional {
    font-weight: 400;
    color: var(--color-on-surface-muted);
    font-size: 0.82em;
}

.report-form__context {
    margin-bottom: 1rem;
    padding: 0.75rem 0.9rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-sm);
}

.report-form__context-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.45rem;
}

.report-form__context-body {
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--color-on-surface);
    max-height: 8rem;
    overflow-y: auto;
}

.report-form__context-body p {
    margin: 0 0 0.35rem;
}

.verse-explain-block__head-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.verse-explain-block__report {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-on-surface-muted);
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition), background var(--transition);
}

.verse-explain-block__report:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface-alt));
}

/* ==========================================================================
   Toast — إشعار النسخ
   ========================================================================== */

.copy-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    background: var(--color-header-bg);
    color: var(--color-header-text);
    padding: 0.6rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.88rem;
    box-shadow: var(--shadow-md);
    z-index: 2000;
    animation: toastIn var(--motion-base) var(--ease-out);
    white-space: nowrap;
}

.copy-toast[hidden] {
    display: none;
}

@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ==========================================================================
   حالة Loading للزر
   ========================================================================== */

.btn--loading {
    opacity: 0.7;
    pointer-events: none;
    cursor: default;
}

/* ==========================================================================
   تجاوب الهاتف
   ========================================================================== */

@media (max-width: 768px) {
    .verse-select-check {
        width: 18px;
        height: 18px;
    }

    .serenity-verse .verse-select-check {
        align-self: start;
        margin-top: 0.35rem;
    }

    .poem-hero { padding: 2rem 0 1.5rem; }
    .poem-hero--cover { min-height: 240px; padding: 2.5rem 0 2rem; }
    .poem-hero__title { font-size: 1.7rem; }

    .poem-reader-toolbar {
        top: var(--header-height, 0);
        padding: 0.5rem 0;
    }

    /* صف أفقي دائماً — تجنّب قلب column↔row الذي يسبب الاهتزاز */
    .poem-reader-toolbar__inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
    }

    .poem-reader-toolbar__label {
        display: none;
    }

    .reading-mode-switcher {
        width: auto;
        flex-shrink: 0;
    }

    .reading-mode-btn {
        flex: 0 0 auto;
    }

    .poem-copy-all-btn__label,
    .poem-toolbar-explain-btn__label {
        display: none;
    }

    .poem-copy-all-btn,
    .poem-toolbar-explain-btn {
        width: var(--btn-min-touch, 44px);
        min-width: var(--btn-min-touch, 44px);
        padding: 0;
        gap: 0;
        justify-content: center;
    }

    .poem-copy-all-btn svg,
    .poem-toolbar-explain-btn svg {
        width: 18px;
        height: 18px;
    }

    .poem-copy-all-btn {
        order: unset;
    }

    /* أحجام ثابتة — التبديل يخفي النصوص فقط دون تغيير حجم الأيقونات */
    .reading-mode-btn,
    .poem-copy-all-btn,
    .poem-toolbar-explain-btn,
    .poem-default-book-btn {
        min-height: 2.25rem;
        min-width: 2.25rem;
        padding: 0.4rem;
    }

    .poem-reader-toolbar.is-compact .reading-mode-btn,
    .poem-reader-toolbar.is-compact .poem-copy-all-btn,
    .poem-reader-toolbar.is-compact .poem-toolbar-explain-btn,
    .poem-reader-toolbar.is-compact .poem-default-book-btn {
        min-height: 2.25rem;
        min-width: 2.25rem;
        padding: 0.4rem;
        gap: 0;
    }

    .poem-reader-toolbar.is-compact {
        padding: 0.35rem 0;
    }

    .poem-reader-toolbar:not(.is-compact) {
        padding: 0.5rem 0;
    }

    .source-toggles.is-compact {
        border-radius: 999px;
        max-width: calc(100vw - 2rem);
        margin-inline: auto;
    }

    /* نمط التأمل: البيت يصبح عمودياً */
    .verse-card__text {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .verse-card__divider {
        display: none;
    }

    .verse-card__shatr {
        min-width: unset;
        flex: unset;
        text-align: center;
        width: 100%;
    }

    .verse-card__shatr--1,
    .verse-card__shatr--2 {
        text-align: center;
    }

    .verse-card__shatr--1::after {
        content: '';
        display: block;
        width: 3rem;
        height: 1px;
        background: var(--color-border);
        margin: 0.5rem auto 0;
    }

    /* نمط الإنشاد على الهاتف */
    .serenity-verse {
        grid-template-columns: 1.5rem 1fr auto;
        gap: 0.4rem 0.75rem;
    }

    .serenity-verse__text {
        flex-direction: column;
        gap: 0.3rem;
        align-items: center;
        text-align: center;
    }

    .serenity-verse__sep {
        display: none;
    }

    .serenity-verse__shatr {
        min-width: unset;
        flex: unset;
        width: 100%;
        text-align: center;
    }

    .serenity-verse__shatr:first-of-type::after {
        content: '';
        display: block;
        width: 3rem;
        height: 1px;
        background: var(--color-border);
        margin: 0.35rem auto 0;
    }

    .modal__box {
        max-height: 90vh;
    }
}

@media (max-width: 480px) {
    .poem-hero__title { font-size: 1.45rem; }

    .reading-mode-switcher { font-size: 0.82rem; }

    .verse-card__text { font-size: 1.05rem; padding: 1rem; }

    .serenity-verse__text { font-size: 1.05rem; }

    .report-form__actions {
        flex-direction: column;
    }

    .report-form__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   نظام الحركة — قارئ القصيدة
   ========================================================================== */

.poem-mode-stage {
    position: relative;
}

.poem-mode-stage.is-mode-switching {
    overflow: clip;
    overflow-anchor: none;
    transition: min-height var(--motion-slow) var(--ease-out);
}

/* توسّع/طي (الشروح، اللوحات) */
.mua-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--motion-slow) var(--ease-out);
}

.mua-expand.is-expanded {
    grid-template-rows: 1fr;
}

.mua-expand.is-collapsing,
.mua-expand:not(.is-expanded):not([hidden]) {
    transition: grid-template-rows var(--motion-slow) var(--ease-in);
}

.mua-expand[hidden]:not(.is-expanded) {
    display: none;
}

.mua-expand__inner {
    overflow: hidden;
    min-height: 0;
    opacity: 0;
    transition:
        opacity var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
    transition-delay: var(--expand-delay, 0ms);
}

.mua-expand.is-expanded .mua-expand__inner {
    opacity: 1;
    transform: none;
}

.mua-expand.is-collapsing .mua-expand__inner,
.mua-expand:not(.is-expanded):not([hidden]) .mua-expand__inner {
    opacity: 0;
    transform: translateY(calc(var(--motion-slide) * -0.35));
    transition:
        opacity var(--motion-slow) var(--ease-in),
        transform var(--motion-slow) var(--ease-in);
    transition-delay: 0ms;
}

/* تأخير خفيف لشروح التأml */
.blossom-explain-all-on .verse-card:nth-child(1)  .verse-card__sources { --expand-delay: 0ms; }
.blossom-explain-all-on .verse-card:nth-child(2)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 1); }
.blossom-explain-all-on .verse-card:nth-child(3)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 2); }
.blossom-explain-all-on .verse-card:nth-child(4)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 3); }
.blossom-explain-all-on .verse-card:nth-child(5)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 4); }
.blossom-explain-all-on .verse-card:nth-child(6)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 5); }
.blossom-explain-all-on .verse-card:nth-child(7)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 6); }
.blossom-explain-all-on .verse-card:nth-child(8)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 7); }
.blossom-explain-all-on .verse-card:nth-child(9)  .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 8); }
.blossom-explain-all-on .verse-card:nth-child(10) .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 9); }
.blossom-explain-all-on .verse-card:nth-child(11) .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 10); }
.blossom-explain-all-on .verse-card:nth-child(12) .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 11); }
.blossom-explain-all-on .verse-card:nth-child(n+13) .verse-card__sources { --expand-delay: calc(var(--expand-stagger) * 12); }

/* تبديل نمط القراءة */
.mode-fade-out {
    opacity: 0;
    transform: translateY(calc(var(--motion-slide) * -0.25));
    transition:
        opacity var(--motion-base) var(--ease-in),
        transform var(--motion-base) var(--ease-in);
    pointer-events: none;
}

.mode-fade-in {
    opacity: 0;
    transform: translateY(calc(var(--motion-slide) * 0.35));
}

.mode-fade-in.mode-fade-in--active {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--motion-slow) var(--ease-out),
        transform var(--motion-slow) var(--ease-out);
}

@keyframes muaFadeIn {
    from {
        opacity: 0;
        transform: translateY(var(--motion-slide));
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes muaFadeOut {
    from {
        opacity: 1;
        transform: none;
    }
    to {
        opacity: 0;
        transform: translateY(calc(var(--motion-slide) * -0.5));
    }
}

.mua-animate-in {
    animation: muaFadeIn var(--motion-base) var(--ease-out) both;
}

/* ==========================================================================
   إخفاء النمط غير النشط (يُتحكم به عبر JavaScript)
   ========================================================================== */

.blossom-mode[hidden],
.serenity-mode[hidden] {
    display: none;
}

/* ==========================================================================
   شريط تبديل مصادر الشرح (أزرار تشغيل/إيقاف)
   ========================================================================== */

.source-toggles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    background: color-mix(in srgb, var(--color-bg-alt) 94%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    position: sticky;
    top: calc(var(--header-height, 62px) + var(--reading-toolbar-height, 3.25rem));
    z-index: 49;
    backdrop-filter: blur(6px);
    transition:
        padding var(--transition),
        gap var(--transition),
        margin var(--transition),
        box-shadow var(--transition);
}

.source-toggles.is-compact {
    padding: 0.4rem 0.65rem;
    gap: 0.35rem;
    margin-bottom: 1rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.source-toggles.is-compact::-webkit-scrollbar {
    display: none;
}

.source-toggles.is-compact .source-toggles__compact-hide,
.source-toggles.is-compact .source-toggle-btn__label,
.source-toggles.is-compact .source-toggle-btn__empty {
    display: none;
}

.source-toggles.is-compact .source-toggle-btn {
    min-height: 2rem;
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 700;
}

.source-toggle-btn__abbr {
    display: none;
}

.source-toggles.is-compact .source-toggle-btn__abbr {
    display: inline;
    line-height: 1;
}

.source-toggles__label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--color-muted);
    font-family: var(--font-body);
    white-space: nowrap;
    margin-inline-end: 0.25rem;
}

.source-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    min-height: var(--btn-height, 2.75rem);
    padding: 0.35rem 0.9rem;
    border: 1.5px solid var(--color-border);
    border-radius: 2rem;
    background: var(--color-bg);
    color: var(--color-muted);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.source-toggle-btn:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* الحالة: مُشغَّل */
.source-toggle-btn--on,
.source-toggle-btn[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

.source-toggle-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.source-toggle-btn__empty {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ==========================================================================
   أدوات البيت عند التفعيل (verse-focus)
   ========================================================================== */

.verse-focus-ui {
    padding: 0 1.2rem 1rem;
    opacity: 0;
    transform: translateY(calc(var(--motion-slide) * 0.75));
    transition:
        opacity var(--motion-base) var(--ease-out),
        transform var(--motion-base) var(--ease-out);
}

.verse-focus-ui.is-visible {
    opacity: 1;
    transform: none;
}

.verse-focus-ui.is-closing,
.verse-focus-ui:not(.is-visible):not([hidden]) {
    transition:
        opacity var(--motion-slow) var(--ease-in),
        transform var(--motion-slow) var(--ease-in);
}

.verse-focus-ui[hidden]:not(.is-visible) {
    display: none;
}

.serenity-verse .verse-focus-ui {
    padding: 0.35rem 0 0.5rem;
}

.verse-focus-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0;
}

.verse-focus-toolbar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 2.35rem;
    min-width: 2.35rem;
    padding: 0.35rem 0.65rem;
}

.verse-focus-toolbar .serenity-action-btn,
.verse-focus-toolbar .verse-action-btn {
    min-width: 2.35rem;
    min-height: 2.35rem;
}

.verse-focus-toolbar__label {
    font-size: 0.78rem;
    font-family: var(--font-body);
}

.verse-focus-toolbar__btn.is-active,
.verse-focus-explain-toggle[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.verse-all-explain {
    margin-top: 0.35rem;
}

.serenity-verse .verse-all-explain {
    text-align: right;
}

/* ==========================================================================
   كتل الشروح تحت البيت
   ========================================================================== */

.verse-card__sources {
    border-top: 1px solid var(--color-surface-border);
    padding: 0;
    background: var(--color-surface-alt);
}

.verse-card.is-verse-active .verse-card__sources {
    border-top-color: color-mix(in srgb, var(--color-accent) 25%, var(--color-surface-border));
}

.verse-card__sources .mua-expand__inner {
    padding: 0.75rem 1.2rem 1rem;
}

.verse-explain-blocks {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.verse-explain-block {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.85rem;
    color: var(--color-on-surface);
}

.verse-explain-block--solo {
    padding: 0.75rem 1rem;
}

.verse-explain-block--accordion.is-collapsed {
    background: color-mix(in srgb, var(--color-surface-alt) 70%, var(--color-surface));
}

.verse-explain-block__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 1.85rem;
}

.verse-explain-block--solo .verse-explain-block__head,
.verse-explain-block--accordion.is-open .verse-explain-block__head {
    margin-bottom: 0.45rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--color-surface-border);
}

.verse-explain-block__toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: right;
    font: inherit;
    color: inherit;
    border-radius: var(--radius-sm);
}

.verse-explain-block__toggle:hover .verse-explain-block__label {
    color: var(--color-on-surface);
}

.verse-explain-block__toggle:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.verse-explain-block__chevron {
    flex-shrink: 0;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    transition: transform var(--transition);
    margin-top: -0.15rem;
}

.verse-explain-block--accordion.is-collapsed .verse-explain-block__chevron {
    transform: rotate(-45deg);
    margin-top: 0.1rem;
}

.verse-explain-block--accordion.is-collapsed .verse-explain-block__label {
    color: var(--color-on-surface-muted);
    font-weight: 600;
}

.verse-explain-block__body[hidden] {
    display: none;
}

.verse-explain-block__body:not([hidden]) .verse-explain-block__text {
    max-height: min(28rem, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.verse-explain-block__section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.verse-explain-block__label {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-accent);
    font-family: var(--font-body);
    margin: 0;
}

.verse-explain-copy-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-on-surface-muted);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        box-shadow var(--transition);
}

.verse-explain-copy-btn:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface-alt));
    border-color: var(--color-accent);
    color: var(--color-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.verse-explain-copy-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.verse-explain-copy-btn.is-copied {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.verse-explain-block__subtitle {
    display: block;
    font-size: 0.76rem;
    color: var(--color-on-surface-muted);
    font-family: var(--font-body);
    margin: 0;
    flex: 1;
    min-width: 0;
}

.verse-explain-block__section-head {
    margin-bottom: 0.2rem;
}

.verse-explain-block__section + .verse-explain-block__section {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--color-surface-border);
}

.verse-explain-block__text {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--color-on-surface);
}

.verse-explain-block__empty {
    font-size: 0.88rem;
    color: var(--color-on-surface-muted);
    text-align: center;
    margin: 0;
}

.blossom-explain-all-on .verse-card.is-verse-active {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
    .verse-card__header {
        padding: 0.45rem 0.65rem;
    }

    .verse-card__header-action {
        width: 1.75rem;
        height: 1.75rem;
        min-width: 1.75rem;
        min-height: 1.75rem;
    }

    .verse-card.is-verse-active .verse-card__header-actions {
        max-width: 7.5rem;
    }

    .verse-focus-toolbar__label {
        display: none;
    }

    .verse-focus-toolbar__btn {
        padding: 0.35rem;
    }

    .verse-focus-ui {
        padding-inline: 0.75rem;
    }

    .poem-toolbar-explain-btn__label {
        display: none;
    }

    .poem-toolbar-explain-btn,
    .poem-default-book-btn {
        min-height: 2.25rem;
        min-width: 2.25rem;
        padding: 0.4rem;
    }

    .poem-reader-toolbar.is-compact .poem-toolbar-explain-btn__label {
        display: none;
    }
}

@media (min-width: 769px) {
    .verse-focus-toolbar {
        justify-content: flex-start;
    }
}

/* ==========================================================================
   بلوك شرح مصدر داخل بطاقة البيت (legacy)
   ========================================================================== */

.verse-source-block[hidden] {
    display: none !important;
}

.verse-source-block {
    border-top: 1.5px dashed var(--color-border);
    padding: 0.75rem 0 0.5rem;
    animation: _srcBlockIn var(--motion-base) var(--ease-out) both;
}

.verse-card__sources[hidden]:not(.is-expanded) {
    display: none;
}

.verse-card__sources {
    gap: 0.75rem;
}

.verse-source-detail {
    margin-top: 0.5rem;
}

.verse-source-detail__title {
    display: block;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.25rem;
}

.verse-source-detail p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--color-on-surface);
}

@keyframes _srcBlockIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.verse-source-block__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
    text-transform: none;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.verse-source-block__label::before {
    content: '📚';
    font-size: 0.7rem;
}

.verse-source-block__empty {
    font-size: 0.8rem;
    color: var(--color-muted);
    font-style: italic;
    padding: 0.25rem 0;
    margin: 0;
}

/* دعم المتصفحات القديمة */
@supports not (color: color-mix(in srgb, red 10%, blue)) {
    .source-toggle-btn--on,
    .source-toggle-btn[aria-pressed="true"] { box-shadow: 0 2px 8px rgba(90,62,43,.25); }
}

/* ==========================================================================
   مشغّل المعلقة العائم (FAB + لوح)
   ========================================================================== */

.poem-audio-dock {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: calc(1.25rem + var(--safe-bottom, 0px));
    z-index: 650;
}

body.has-verse-selection .poem-audio-dock {
    bottom: calc(5.25rem + var(--safe-bottom, 0px));
}

.poem-audio-dock__fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}

.poem-audio-dock__fab:hover {
    transform: translateY(-2px);
    background: var(--color-accent-dark);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
}

.poem-audio-dock__fab.is-playing {
    background: var(--color-header-bg);
}

.poem-audio-dock__fab.is-playing .poem-audio-dock__fab-ring {
    animation: poemAudioFabPulse 1.6s ease-out infinite;
}

@keyframes poemAudioFabPulse {
    0%   { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.55); opacity: 0; }
}

.poem-audio-dock__fab-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    opacity: 0;
    pointer-events: none;
}

.poem-audio-dock__fab.is-playing .poem-audio-dock__fab-ring {
    opacity: 1;
}

.poem-audio-dock__fab-icon {
    display: block;
}

.poem-audio-dock__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.75rem);
    width: min(340px, calc(100vw - 2rem));
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 0.85rem 0.9rem 0.95rem;
    transform-origin: bottom right;
    color: var(--color-on-surface);
}

.poem-audio-dock__panel[hidden] {
    display: none !important;
}

.poem-audio-dock.is-open .poem-audio-dock__panel {
    animation: poemAudioPanelIn 0.22s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes poemAudioPanelIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.poem-audio-dock__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.poem-audio-dock__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-on-surface);
    line-height: 1.45;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.poem-audio-dock__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-on-surface-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.poem-audio-dock__close:hover {
    background: var(--color-surface-alt);
    color: var(--color-on-surface);
}

.poem-audio-player {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.poem-audio-player--dock {
    padding: 0.45rem 0.55rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.poem-audio-player__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

.poem-audio-player__toggle:hover {
    background: var(--color-accent-dark);
}

.poem-audio-player__toggle.is-playing {
    background: var(--color-header-bg);
}

.poem-audio-player__icon {
    display: block;
}

.poem-audio-player__icon--play {
    margin-inline-start: 2px;
}

.poem-audio-player__seek {
    flex: 1 1 auto;
    min-width: 0;
    height: 6px;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.poem-audio-player__time {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    white-space: nowrap;
    direction: ltr;
}

.poem-audio-player__sep {
    margin-inline: 0.15rem;
    opacity: 0.65;
}

.verse-audio-btn.is-audio-playing {
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-bg-alt));
    border-color: var(--color-accent);
    color: var(--color-accent-dark);
}

/* ==========================================================================
   زر نسخ القصيدة كاملة
   ========================================================================== */

.poem-copy-all-btn {
    font-size: 0.82rem;
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.85rem;
    gap: 0.35rem;
    min-height: var(--btn-height, 2.75rem);
    background: var(--color-bg);
    cursor: pointer;
    transition:
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition),
        min-height var(--motion-base) var(--ease-out),
        min-width var(--motion-base) var(--ease-out),
        padding var(--motion-base) var(--ease-out),
        gap var(--motion-base) var(--ease-out);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body);
    white-space: nowrap;
}

.poem-copy-all-btn svg {
    flex-shrink: 0;
    transition: width var(--motion-base) var(--ease-out), height var(--motion-base) var(--ease-out);
}

.poem-copy-all-btn:hover {
    background: var(--color-bg-alt);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* زر الشروح في الشريط الموحّد */
.poem-toolbar-explain-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-family: var(--font-body);
    color: var(--color-muted);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.85rem;
    min-height: var(--btn-height, 2.75rem);
    background: var(--color-bg);
    cursor: pointer;
    flex-shrink: 0;
    transition:
        opacity var(--motion-fast) var(--ease-out),
        width var(--motion-base) var(--ease-out),
        padding var(--motion-base) var(--ease-out),
        border-width var(--motion-base) var(--ease-out),
        min-height var(--motion-base) var(--ease-out),
        min-width var(--motion-base) var(--ease-out),
        gap var(--motion-base) var(--ease-out),
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);
    white-space: nowrap;
}

.poem-toolbar-explain-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.poem-toolbar-explain-btn.is-active,
.poem-toolbar-explain-btn[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* الكتاب الافتراضي — نمط التأml */
.poem-default-book-wrap {
    position: relative;
    flex-shrink: 0;
}

.poem-default-book-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    min-height: var(--btn-height, 2.75rem);
    min-width: var(--btn-height, 2.75rem);
    font-family: var(--font-body);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    cursor: pointer;
    flex-shrink: 0;
    box-sizing: border-box;
    transition:
        min-height var(--motion-base) var(--ease-out),
        min-width var(--motion-base) var(--ease-out),
        padding var(--motion-base) var(--ease-out),
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.poem-default-book-btn svg {
    display: block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}

.poem-default-book-btn:hover,
.poem-default-book-btn[aria-expanded="true"] {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.poem-default-book-btn[aria-expanded="true"] {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg));
}

.poem-default-book-panel {
    position: absolute;
    top: calc(100% + 0.45rem);
    inset-inline-end: 0;
    z-index: 120;
    min-width: min(16rem, calc(100vw - 2rem));
    padding: 0.85rem 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--color-on-surface);
}

.poem-default-book-panel__title {
    margin: 0 0 0.65rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-on-surface);
}

.poem-default-book-panel__hint {
    margin: 0.15rem 0 0.35rem;
    font-size: 0.76rem;
    color: var(--color-on-surface-muted);
    line-height: 1.5;
}

.poem-default-book-option--all span {
    font-weight: 600;
}

.poem-default-book-panel__options {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.poem-default-book-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--color-on-surface);
    cursor: pointer;
    padding: 0.35rem 0.25rem;
    border-radius: var(--radius-sm);
}

.poem-default-book-option:hover {
    background: var(--color-bg-alt);
}

.poem-default-book-option input {
    flex-shrink: 0;
    accent-color: var(--color-accent);
}

body.reading-mode-serenity .poem-default-book-wrap {
    visibility: hidden;
    opacity: 0;
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

body.reading-mode-serenity .poem-default-book-panel {
    display: none;
}

body.reading-mode-blossom .poem-default-book-wrap[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .poem-default-book-panel {
        position: fixed;
        top: calc(var(--header-height, 62px) + 2.85rem);
        inset-inline-start: auto;
        inset-inline-end: auto;
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        left: auto;
        width: min(18rem, calc(100vw - 1.5rem));
        min-width: 0;
        max-width: calc(100vw - 1.5rem);
        z-index: 130;
    }
}

body.reading-mode-serenity .poem-reader-toolbar__blossom-only {
    visibility: hidden;
    opacity: 0;
    width: 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    border-width: 0;
    overflow: hidden;
    pointer-events: none;
    transition:
        opacity var(--motion-fast) var(--ease-out),
        width var(--motion-base) var(--ease-out);
}

/* ==========================================================================
   تحديد مجموعة من الأبيات
   ========================================================================== */

/* ==========================================================================
   مربع تحديد البيت (.verse-select-check)
   ========================================================================== */

.verse-select-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1.5px solid var(--color-border);
    background: var(--color-bg);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    user-select: none;
    -webkit-user-select: none;
    /* في رأس بطاقة التأمل: يُدفع لأقصى اليسار */
    margin-inline-start: auto;
}

/* داخل أزرار نمط الإنشاد: فاصل بصري قبل المربع */
.serenity-verse__actions .verse-select-check {
    margin-inline-start: 0.4rem;
    border-color: color-mix(in srgb, var(--color-border) 70%, transparent);
}

.verse-select-check:hover {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.verse-select-check__mark {
    opacity: 0;
    transition: opacity .15s ease;
    color: #fff;
    pointer-events: none;
}

/* الحالة المحددة */
.verse-select-check[aria-checked="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.verse-select-check[aria-checked="true"] .verse-select-check__mark {
    opacity: 1;
}

/* البيت المحدد — نمط التأمل */
.verse-card.verse--selected {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent),
                var(--shadow-sm);
    background: color-mix(in srgb, var(--color-accent) 4%, var(--color-bg));
}

/* البيت المحدد — نمط الإنشاد */
.serenity-verse.verse--selected {
    background: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg));
    border-radius: var(--radius-sm);
    outline: 1.5px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    outline-offset: 3px;
}

/* ==========================================================================
   شريط تحديد الأبيات العائم
   ========================================================================== */

.verse-selection-bar[hidden] {
    display: none !important;
}

.verse-selection-bar {
    position: fixed;
    bottom: calc(1.75rem + var(--safe-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-header-bg);
    color: #f5f0e6;
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius-pill, 2.5rem);
    box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    gap: 0.85rem;
    z-index: 600;
    white-space: nowrap;
    animation: _selBarIn .22s cubic-bezier(.34,1.56,.64,1) both;
    max-width: calc(100vw - 2rem);
}

@keyframes _selBarIn {
    from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.95); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1);  }
}

.selection-bar__icon {
    display: flex;
    align-items: center;
    color: var(--color-accent-light, #C9B79C);
    flex-shrink: 0;
}

.selection-bar__count {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    min-width: 4.5ch;
}

.selection-bar__btn {
    font-family: var(--font-body);
    font-size: 0.82rem;
    border: none;
    border-radius: var(--radius-pill, 1.5rem);
    min-height: var(--btn-min-touch, 44px);
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: background var(--transition), color var(--transition), transform .15s;
    white-space: nowrap;
}

.selection-bar__btn:hover {
    transform: scale(1.04);
}

.selection-bar__copy {
    background: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

.selection-bar__copy:hover {
    background: var(--color-accent-dark, #5A3E2B);
}

.selection-bar__hifz {
    background: var(--color-surface, #fff);
    color: var(--color-accent);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-accent);
}

.selection-bar__hifz:hover {
    background: var(--color-accent);
    color: #fff;
}

.selection-bar__design {
    background: var(--color-surface, #fff);
    color: color-mix(in srgb, var(--color-accent) 55%, #6366f1);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid color-mix(in srgb, var(--color-accent) 55%, #6366f1);
}

.selection-bar__design:hover {
    background: color-mix(in srgb, var(--color-accent) 55%, #6366f1);
    color: #fff;
}

.selection-bar__clear {
    background: transparent;
    color: rgba(245,240,230,.65);
    padding: 0.35rem 0.6rem;
}

.selection-bar__clear:hover {
    color: #fff;
}

/* دعم الأجهزة التي لا تدعم color-mix */
@supports not (color: color-mix(in srgb, red 10%, blue)) {
    .verse-card.verse--selected    { background: var(--color-selected-bg, #fdf6ee); outline: 2px solid var(--color-accent); }
    .serenity-verse.verse--selected { background: var(--color-selected-bg, #fdf6ee); }
    .poem-reader-toolbar { background: var(--color-bg); }
}

/* ==========================================================================
   شريط تقدّم القراءة
   ========================================================================== */

.reading-progress {
    position: fixed;
    top: var(--header-height, 0);
    right: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
    z-index: 110;
    pointer-events: none;
    transition: width 0.12s linear;
}

@media (max-width: 500px) {
    .verse-selection-bar {
        bottom: calc(1rem + var(--safe-bottom, 0px));
        padding: 0.5rem 0.65rem;
        gap: 0.45rem;
        flex-wrap: nowrap;
        justify-content: center;
        border-radius: var(--radius-pill, 2.5rem);
    }

    .selection-bar__count {
        width: auto;
        text-align: center;
        min-width: unset;
        flex: 1 1 auto;
        font-size: 0.82rem;
    }

    .selection-bar__label {
        display: none;
    }

    .selection-bar__btn {
        flex: 0 0 auto;
        justify-content: center;
        min-width: var(--btn-min-touch, 44px);
        width: var(--btn-min-touch, 44px);
        padding: 0;
        gap: 0;
    }

    .selection-bar__btn svg {
        width: 18px;
        height: 18px;
    }

    .selection-bar__clear {
        padding: 0;
    }

    .poem-audio-dock__panel {
        right: 0;
        left: auto;
        width: calc(100vw - 1.5rem);
        max-width: none;
    }

    .poem-audio-dock__fab {
        width: 3.25rem;
        height: 3.25rem;
    }

    body.has-verse-selection .poem-audio-dock {
        bottom: calc(6.5rem + var(--safe-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .poem-audio-dock.is-open .poem-audio-dock__panel {
        animation: none;
    }

    .poem-audio-dock__fab.is-playing .poem-audio-dock__fab-ring {
        animation: none;
        opacity: 0.35;
    }

    .mua-expand {
        transition: none;
    }

    .mua-expand.is-expanded .mua-expand__inner {
        opacity: 1;
        transition: none;
    }

    .verse-focus-ui {
        transition: none;
    }

    .mode-fade-out,
    .mode-fade-in,
    .mode-fade-in.mode-fade-in--active {
        transition: none;
        opacity: 1;
        transform: none;
    }

    .poem-mode-stage.is-mode-switching {
        transition: none;
    }

    body.reading-mode-serenity .poem-reader-toolbar__blossom-only {
        transition: none;
    }

    .poem-reader-toolbar,
    .poem-reader-toolbar__inner,
    .poem-reader-toolbar__compact-hide,
    .reading-mode-btn__label,
    .poem-copy-all-btn__label,
    .poem-toolbar-explain-btn__label,
    .reading-mode-btn,
    .reading-mode-btn svg,
    .poem-copy-all-btn,
    .poem-copy-all-btn svg,
    .poem-toolbar-explain-btn,
    .poem-default-book-btn,
    .poem-default-book-btn svg,
    .reading-mode-switcher {
        transition: none;
    }

    .poem-reader-toolbar.is-compact .poem-reader-toolbar__compact-hide,
    .poem-reader-toolbar.is-compact .reading-mode-btn__label,
    .poem-reader-toolbar.is-compact .poem-copy-all-btn__label,
    .poem-reader-toolbar.is-compact .poem-toolbar-explain-btn__label {
        display: none;
        max-width: none;
        opacity: 0;
    }
}