/* myownbible_notes_style.css - 100% ഫിക്സ് ചെയ്ത ഫൈനൽ രൂപം */

/* --- [സ്മാർട്ട് നൈറ്റ് മോഡ് ഫിക്സ് ചെയ്ത വചന വ്യാഖ്യാന പെട്ടി] --- */

/* 1. സാധാരണ ലൈറ്റ് മോഡിൽ വരാനുള്ള അതീവ വൃത്തിയുള്ള ഡിസൈൻ (ഇവിടെ നിന്നും !important ഒഴിവാക്കി) */
.verse-commentary-box {
    background-color: #fcfcfc; /* ലൈറ്റ് മോഡിലെ സുന്ദരമായ വെള്ള പശ്ചാത്തലം */
    color: #2c3e50; /* കണ്ണിന് സുഖമുള്ള ഇരുണ്ട ചാരനിറത്തിലുള്ള അക്ഷരങ്ങൾ */
    border-left: 4px solid #00a8ff !important; /* നമ്മുടെ പ്രീമിയം നിയോൺ ബ്ലൂ ലൈൻ എപ്പോഴും ഉണ്ടാകും */
    margin: 15px 0 15px 0 !important;
    padding: 12px 18px !important;
    border-radius: 0 6px 6px 0 !important;
    font-size: 14px !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.05) !important;
    display: none !important; /* ജാവാസ്ക്രിപ്റ്റ് വഴി ആവശ്യമുള്ളപ്പോൾ മാത്രം കാണിക്കും */
    width: 100% !important;
    clear: both !important;
    float: left !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important; 
}

/* 2. [മാന്ത്രിക നൈറ്റ് മോഡ് ലോജിക്]: നൈറ്റ് മോഡ് ഓൺ ചെയ്യുമ്പോൾ ഈ ബോക്സും ഓട്ടോമാറ്റിക് ആയി കറുപ്പാകും */
body.dark-mode .verse-commentary-box, 
body.night-mode .verse-commentary-box,
body[data-theme="dark"] .verse-commentary-box {
    background-color: #1e1e24 !important; /* നമ്മൾ പോപ്പ്-അപ്പിന് നൽകിയ അതേ പ്രീമിയം ഡാർക്ക് ഗ്രേ പശ്ചാത്തലം */
    color: #f5f5f5 !important; /* വായനയ്ക്ക് സുഖമുള്ള തൂവെള്ള അക്ഷരങ്ങൾ തനിയെ ലോഡ് ആകുന്നു */
    border-left: 4px solid #00a8ff !important;
    border-top: 1px solid #33333b !important; /* ഡാർക്ക് മോഡിൽ കൂടുതൽ ഭംഗി തരാൻ നൽകിയ നേർത്ത ബോർഡറുകൾ */
    border-right: 1px solid #33333b !important;
    border-bottom: 1px solid #33333b !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* നൈറ്റ് മോഡിൽ ടോഗ്ഗിൾ ചെയ്യുന്ന അക്ഷരങ്ങളുടെ തലക്കെട്ട് നിറം ക്രമീകരിക്കുന്നു */
body.dark-mode .commentary-title,
body.night-mode .commentary-title,
body[data-theme="dark"] .commentary-title {
    color: #52a3ff !important; /* ഇരുട്ടത്ത് വായിക്കാൻ സുഖമുള്ള ലൈറ്റ് ബ്ലൂ തലക്കെട്ട് */
}


.commentary-title {
    font-weight: bold !important;
    color: #0077c2 !important;
    margin-bottom: 5px !important;
    font-size: 14px !important;
}

.commentary-text-container {
    line-height: 1.6 !important;
    position: relative !important;
}

/* കുറിപ്പിന്റെ ഉള്ളടക്കം ഒരു വരിയിൽ മാത്രം ഒതുക്കി നിർത്താനുള്ള മാന്ത്രിക ലോജിക് */
.commentary-text-container.truncated {
    display: inline-block !important;
    max-width: 80% !important; /* മോർ ലിങ്ക് വരാൻ വലതുവശത്ത് ഇട്ട സ്പേസ് */
    white-space: nowrap !important; /* വരി താഴേക്ക് മുറിഞ്ഞു പോകുന്നത് 100% തടയുന്നു */
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* വരി അവസാനിക്കുമ്പോൾ ഓട്ടോമാറ്റിക് ആയി ... എന്ന് വീഴും */
    vertical-align: middle !important;
}

/* Read More / Read Less ലിങ്ക് ബട്ടൺ വരിയുടെ അവസാന വാക്കിനോട് ചേർത്ത് നിർത്താൻ */
.note-toggle-link {
    color: #e67e22 !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 12px !important;
    display: inline-block !important;
    margin-left: 5px !important; /* അവസാന വാക്കിനോട് ചേർന്നുള്ള അകലം */
    vertical-align: middle !important;
}
.note-toggle-link:hover {
    text-decoration: underline !important;
}

/* പോപ്പ്-അപ്പ് വിൻഡോ സ്ക്രീനിന്റെ നടുവിലേക്ക് വരാനുള്ള പ്രീമിയം ലേഔട്ട് */
/* myownbible_notes_style.css - വിൻഡോ തെറിച്ചുപോകുന്ന പ്രശ്നം 100% ഫിക്സ് ചെയ്ത അതീവ സുരക്ഷിതമായ ലേഔട്ട് */

.notes-custom-modal {
    display: none;
    position: fixed !important;
    z-index: 99999 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    
    /* ഫ്ലെക്സ് സെന്റർ തടസ്സങ്ങൾ മാറ്റിയതുകൊണ്ട് വിൻഡോ ഇനി അതീവ സുരക്ഷിതമായി നിശ്ചിത സ്ഥാനത്ത് ലോക്ക് ആയി നിന്നോളും */
    align-items: normal !important;
    justify-content: normal !important;
}

.notes-modal-content {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    width: 90% !important;
    max-width: 550px !important;
    min-width: 320px !important; 
    min-height: 300px !important;
    padding: 20px !important;
    box-shadow: 0 5px 25px rgba(0,0,0,0.4) !important;
    box-sizing: border-box !important;
    
    /* ആദ്യ തവണ തുറക്കുമ്പോൾ ഇത് കൃത്യമായി സ്ക്രീനിന്റെ നടുവിൽ തന്നെ വരാൻ ഫിക്സഡ് പൊസിഷൻ നൽകി */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    
    /* വലിപ്പം കൂട്ടാനും കുറയ്ക്കാനുമുള്ള മാന്ത്രിക ലോജിക് */
    resize: both !important; 
    overflow: auto !important; 
}

.notes-form-group {
    margin-bottom: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
}

.notes-input-field {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
}

.notes-textarea-field {
    width: 100% !important;
    height: 150px !important;
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    resize: vertical !important;
}
/* --- വചനത്തിന്റെ അവസാന വാക്കോട് ചേർന്നുനിൽക്കുന്ന ഇൻലൈൻ ലിങ്ക് ബട്ടൺ സ്റ്റൈലുകൾ --- */

.inline-add-ref-link {
    cursor: pointer !important;
    color: #FFFFFF !important; /* അല്പം കൂടി തെളിഞ്ഞ പ്രൊഫഷണൽ ഗ്രേ കളർ */
    font-size: 11px !important; /* വചനത്തേക്കാൾ അല്പം വലിപ്പം കുറച്ച് ബാഡ്ജിനുള്ളിൽ ഒതുക്കി നിർത്തി */
    margin-left: 8px !important;
    font-weight: 600 !important; /* അക്ഷരങ്ങൾക്ക് ചെറിയൊരു കട്ടി നൽകി */
    background-color: #80007e !important; /* കണ്ണിന് സുഖമുള്ള അതീവ ലളിതമായ ലൈറ്റ് ഗ്രേ പശ്ചാത്തലം */
    border: 1px solid #ced6e0 !important; /* നേർത്ത സുന്ദരമായ ബോർഡർ */
    padding: 3px 6px !important; /* മൊബൈലിൽ വിരൽ അമർത്താൻ പാകത്തിന് ഉള്ളിലേക്ക് നൽകിയ സ്പേസ് */
    border-radius: 4px !important; /* വശങ്ങളിൽ നൽകിയ പ്രൊഫഷണൽ ഉരുണ്ട ആകൃതി */
    display: inline-block !important; /* ബാഡ്ജ് രൂപം കൃത്യമായി നിലനിൽക്കാൻ */
    user-select: none !important;
    transition: all 0.2s ease !important; /* മൗസ് വെക്കുമ്പോൾ സ്മൂത്ത് ആയി മാറാൻ */
    line-height: 1 !important;
}
.inline-add-ref-link:hover {
    color: #2f3542 !important;
    background-color: #e4e7eb !important; /* മൗസ് വെക്കുമ്പോൾ പശ്ചാത്തലം അല്പം കട്ടി കൂടുന്നു */
    border-color: #a4b0be !important;
    text-decoration: none !important; /* അണ്ടർലൈൻ ഒഴിവാക്കി പ്രൊഫഷണൽ ലുക്ക് നൽകി */
}

/* 2. ആഡ് നോട്ട് ബട്ടൺ - പ്രീമിയം ലൈറ്റ് ബ്ലൂ ബാഡ്ജ് രൂപത്തിൽ */
.inline-add-note-link {
    cursor: pointer !important;
    color: #FFFFFF !important; /* പ്രീമിയം നിയോൺ ബ്ലൂ കളർ */
    font-size: 11px !important;
    margin-left: 5px !important;
    font-weight: 600 !important;
    background-color: #008000 !important; /* നീല നിറത്തോട് ഇണങ്ങിനിൽക്കുന്ന അതീവ ലൈറ്റ് ബ്ലൂ പശ്ചാത്തലം */
    border: 1px solid #b3e5fc !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    display: inline-block !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
}
.inline-add-note-link:hover {
    color: #0097e6 !important;
    background-color: #b3e5fc !important;
    border-color: #81d4fa !important;
    text-decoration: none !important;
}