/**
 * ConfidenceTalk - Tajweed Quran Coloring Engine Styles
 *
 * Arabic Quran text rendered with per-letter Tajweed coloring,
 * Uthmani Hafs script, RTL, center-aligned, large font.
 *
 * @package ConfidenceTalk
 * @version 1.0.0
 */

/* ============================================================
   FONT IMPORTS
   ============================================================ */

/* ★ Scheherazade New — primary flat Uthmani Hafs Quranic script (not slanted) */
/* Changed from Noto Nastaliq Urdu (slanted Nastaleeq calligraphy) to Scheherazade New
   (upright, clear Uthmani Hafs) for better readability — especially with Tajweed colors. */
@import url('https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;500;600;700&display=swap');

/* ============================================================
   QURAN VERSE CONTAINER — Generic styling for any Quranic text
   ============================================================ */

.ct-quran-verse {
    /* ★ Scheherazade New — flat Uthmani Hafs (not slanted), best for Tajweed color readability.
       Removed Noto Nastaliq Urdu — too slanted, makes Tajweed colors hard to read. */
    font-family: 'Scheherazade New', 'Traditional Arabic', 'Amiri', serif;
    font-size: 28px;
    line-height: 2.2;
    text-align: center;
    direction: rtl;
    unicode-bidi: embed;
    padding: 6px 12px 6px 16px;
    margin: 8px 0 8px 0;
    /* ★ FIX: Transparent background — no bubble/card, flows inline with chat */
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    /* ★ Subtle left gold accent bar only (no box, no bubble) */
    border-left: 3px solid rgba(205, 133, 63, 0.5);
    word-spacing: 2px;
    letter-spacing: 0.5px;
    /* ★ Metallic gold/bronze text color for elegant Quran appearance */
    color: #c9a94e;
    position: relative;
}

/* ★ Chat-specific Quran verses: inline, no bubble, gold left accent */
.ct-message .ct-quran-verse {
    font-family: 'Scheherazade New', 'Traditional Arabic', 'Amiri', serif;
    font-size: 28px;
    line-height: 2.2;
    text-align: center;
    direction: rtl;
    unicode-bidi: embed;
    padding: 6px 12px 6px 16px;
    margin: 8px 0;
    background: transparent;
    border: none;
    border-left: 3px solid rgba(205, 133, 63, 0.5);
    color: #c9a94e;
}

/* Companion small text (transliteration or translation) */
.ct-quran-transliteration {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
    direction: ltr;
    margin: 4px 0 0 0;
    font-style: italic;
    line-height: 1.5;
}

.ct-quran-translation {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    direction: ltr;
    margin: 4px 0 0 0;
    line-height: 1.6;
}

/* Surah/Ayah reference */
.ct-quran-reference {
    font-size: 11px;
    color: #CD853F;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin: 2px 0 8px 0;
    opacity: 0.8;
}

/* ============================================================
   TAJWEED COLOR SCHEME — 8 Standard Tajweed Colors
   ============================================================
   These match the standard Uthmani Tajweed Mushaf color scheme
   used by the King Fahd Complex and Dar al-Maarifah.
   ============================================================ */

/* 1. RED — Ghunnah (Nasalization)
   Meem Mushaddad, Noon Mushaddad, Meem with Ghunnah */
.ct-tajweed-ghunnah {
    color: #e53e3e !important;
}
.ct-quran-verse .ct-tajweed-ghunnah {
    color: #e53e3e !important;
}

/* 2. GREEN — Ikhfa (Hidden/Concealed)
   Noon Saakin or Tanween followed by Ikhfa letters (15 letters) */
.ct-tajweed-ikhfa {
    color: #38a169 !important;
}
.ct-quran-verse .ct-tajweed-ikhfa {
    color: #38a169 !important;
}

/* 3. BLUE — Qalqalah (Echoing/Vibration)
   Qaf, Ta, Ba, Jeem, Dal when in sukoon state */
.ct-tajweed-qalqalah {
    color: #3182ce !important;
}
.ct-quran-verse .ct-tajweed-qalqalah {
    color: #3182ce !important;
}

/* 4. ORANGE — Idgham (Merging)
   Noon Saakin or Tanween merging into following letter */
.ct-tajweed-idgham {
    color: #dd6b20 !important;
}
.ct-quran-verse .ct-tajweed-idgham {
    color: #dd6b20 !important;
}

/* 5. PURPLE — Madd (Prolongation/Elongation)
   Madd letters (Alif, Waw, Ya) requiring extended pronunciation */
.ct-tajweed-madd {
    color: #805ad5 !important;
}
.ct-quran-verse .ct-tajweed-madd {
    color: #805ad5 !important;
}

/* 6. GRAY — Ith-har (Clear Pronunciation)
   Noon Saakin or Tanween clearly pronounced */
.ct-tajweed-ith-har {
    color: #a0aec0 !important;
}
.ct-quran-verse .ct-tajweed-ith-har {
    color: #a0aec0 !important;
}

/* 7. BROWN/COPPER — Tafkheem (Heavy/Emphatic)
   Heavy letters (خص ضغط قظ) that require emphatic pronunciation */
.ct-tajweed-tafkheem {
    color: #c4893b !important;
}
.ct-quran-verse .ct-tajweed-tafkheem {
    color: #c4893b !important;
}

/* 8. TEAL — Special Cases (Sakt, Imalah, etc.)
   Special pause rules, alternative readings */
.ct-tajweed-special {
    color: #319795 !important;
}
.ct-quran-verse .ct-tajweed-special {
    color: #319795 !important;
}

/* 9. DARK ORANGE — Iqlab (Conversion)
   Noon Sakinah or Tanween followed by Ba (ب)
   The noon sound converts to meem — the ب gets this color */
.ct-tajweed-iqlab {
    color: #c05621 !important;
}
.ct-quran-verse .ct-tajweed-iqlab {
    color: #c05621 !important;
}

/* 10. LIGHT GREEN — Meem Sakinah Ikhfa Shafawi (Labial)
    Meem Sakinah followed by Ba (ب) — concealment by the lips */
.ct-tajweed-mim-ikhfa {
    color: #68d391 !important;
}
.ct-quran-verse .ct-tajweed-mim-ikhfa {
    color: #68d391 !important;
}

/* 11. PINK/REDDISH — Meem Sakinah Idgham Shafawi (Labial)
    Meem Sakinah followed by Meem (م) — merging of like letters */
.ct-tajweed-mim-idgham {
    color: #f687b3 !important;
}
.ct-quran-verse .ct-tajweed-mim-idgham {
    color: #f687b3 !important;
}

/* 12. CYAN — Meem Sakinah Ith-har Shafawi (Labial)
    Meem Sakinah followed by any other letter — clear labial pronunciation */
.ct-tajweed-mim-ith-har {
    color: #00b5d8 !important;
}
.ct-quran-verse .ct-tajweed-mim-ith-har {
    color: #00b5d8 !important;
}

/* Default Arabic letter color (no special Tajweed rule) */
.ct-tajweed-default {
    color: #e2e8f0 !important;
}
.ct-quran-verse .ct-tajweed-default {
    color: #e2e8f0 !important;
}

/* Diacritical marks (Fatha, Damma, Kasra, Sukoon, Shaddah) */
.ct-tajweed-diacritic {
    color: #718096 !important;
    font-size: 80%;
}

/* ============================================================
   WORD HIGHLIGHTING DURING QURAN RECITATION
   ============================================================ */

.ct-quran-word-highlight {
    background: rgba(205, 133, 63, 0.3) !important;
    border-radius: 4px;
    padding: 0 2px;
    transition: background 0.2s ease;
}

/* ============================================================
   FULL QURAN BROWSER (for standalone page)
   ============================================================ */

.ct-quran-browser {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 20px;
}

.ct-quran-surah-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
    justify-content: center;
}

.ct-quran-surah-btn {
    padding: 6px 12px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Scheherazade New', serif;
}

.ct-quran-surah-btn:hover,
.ct-quran-surah-btn.active {
    background: rgba(205, 133, 63, 0.2);
    border-color: #CD853F;
    color: #fff;
}

.ct-quran-ayah-display {
    font-family: 'Scheherazade New', serif;
    font-size: 24px;
    line-height: 2.2;
    text-align: center;
    direction: rtl;
    padding: 16px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ★ Quran Replay Button — centered play button below each Quran verse in chat */
.ct-quran-replay-btn {
    display: block;
    margin: 8px auto 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(205, 133, 63, 0.15);
    border: 1px solid rgba(205, 133, 63, 0.4);
    border-radius: 50%;
    color: #c9a94e;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.ct-quran-replay-btn::before {
    content: '▶';
    font-size: 13px;
    line-height: 36px;
    display: block;
    text-align: center;
}
.ct-quran-replay-btn:hover {
    background: rgba(205, 133, 63, 0.35);
    border-color: rgba(205, 133, 63, 0.7);
}
.ct-quran-replay-btn.playing::before {
    content: '⏸';
}
.ct-quran-replay-btn.playing {
    background: rgba(205, 133, 63, 0.4);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .ct-quran-verse {
        font-size: 22px;
        line-height: 2.0;
        padding: 6px 10px 6px 14px;
    }
    .ct-message .ct-quran-verse {
        font-size: 24px;
        line-height: 2.2;
        padding: 6px 10px 6px 14px;
    }
}

@media (max-width: 480px) {
    .ct-quran-verse {
        font-size: 20px;
        line-height: 1.9;
        padding: 5px 8px 5px 12px;
    }
    .ct-message .ct-quran-verse {
        font-size: 22px;
        line-height: 2.0;
        padding: 5px 8px 5px 12px;
    }
}

/* ============================================================
   CSS-ONLY ARABIC TEXT (gold accent, no per-letter Tajweed)
   Applied by chat.js _formatMessage STEP 3 for auto-detected
   Arabic blocks that are NOT inside [quran] markers.
   ============================================================ */
.ct-arabic-text {
    display: inline;
    font-size: 26px;
    font-family: 'Scheherazade New', 'Traditional Arabic', 'Amiri', 'Noto Naskh Arabic', serif;
    color: #e2d4a0;
    background: rgba(205, 133, 63, 0.08);
    border-radius: 4px;
    padding: 2px 4px;
    line-height: 1.8;
    border-left: 3px solid rgba(205, 133, 63, 0.4);
    padding-left: 8px;
}
.ct-message .ct-arabic-text {
    display: inline;
    font-size: 26px;
    border-left: 3px solid rgba(205, 133, 63, 0.4);
    padding-left: 8px;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .ct-arabic-text { font-size: 22px; }
    .ct-message .ct-arabic-text { font-size: 22px; }
}
@media (max-width: 480px) {
    .ct-arabic-text { font-size: 20px; }
    .ct-message .ct-arabic-text { font-size: 20px; }
}