/* ============================================================
   Awakin Reading View Page — Redesigned Styles
   Loaded on view.tpl only, layered on top of styles.css
   ============================================================ */

/* --- Reading Progress Bar --- */
.aw-progress { position: sticky; top: 0; z-index: 1040; height: 3px; background: #e8e6e0; }
.aw-progress-bar { height: 100%; width: 0%; background: #1D9E75; transition: width 0.15s ease-out; }

/* --- Header Band --- */
.aw-header { background: #F0EDE6; padding: 40px 0 36px; }
.aw-header-inner { max-width: 700px; margin: 0 auto; padding: 0 24px; display: flex; gap: 28px; align-items: flex-start; }
.aw-header-text { flex: 1; min-width: 0; }

.aw-breadcrumb { font-size: 12px; color: #888780; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.aw-breadcrumb a { color: #0F6E56; text-decoration: none; }
.aw-breadcrumb a:hover { text-decoration: underline; }

.aw-title { font-family: Georgia, 'Times New Roman', serif; font-size: 32px; font-weight: normal; line-height: 1.25; color: #2c2c2a; margin-bottom: 18px; }

.aw-header-image { flex-shrink: 0; width: 175px; }
.aw-header-image img { width: 100%; border-radius: 8px; border: 1px solid rgba(0,0,0,0.08); display: block; }
.aw-header-image figcaption { font-size: 11px; color: #888780; text-align: center; margin-top: 6px; font-style: italic; }

/* --- Byline --- */
.aw-byline { display: flex; align-items: center; gap: 12px; }
.aw-byline-avatar { width: 44px; height: 44px; border-radius: 50%; background: #E1F5EE; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #0F6E56; flex-shrink: 0; }
.aw-byline-info { flex: 1; }
.aw-byline-author { font-size: 15px; font-weight: 600; }
.aw-byline-author a { color: #0F6E56; text-decoration: none; }
.aw-byline-author a:hover { text-decoration: underline; }
.aw-byline-meta { font-size: 13px; color: #888780; margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Action Pills (inside header) --- */
.aw-header-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.aw-pill { font-size: 13px; padding: 6px 16px; border-radius: 20px; border: 1px solid rgba(0,0,0,0.12); background: rgba(255,255,255,0.7); color: #2c2c2a; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.aw-pill:hover { border-color: #1D9E75; color: #0F6E56; background: rgba(255,255,255,0.9); text-decoration: none; }
.aw-pill-accent { background: #1D9E75; color: #fff; border-color: #1D9E75; }
.aw-pill-accent:hover { background: #0F6E56; color: #fff; border-color: #0F6E56; }
.aw-pill i { font-size: 13px; }

/* --- Reading Body --- */
.aw-reading-wrap { max-width: 700px; margin: 0 auto; padding: 0 24px; }

.aw-reading { padding: 32px 0 20px; font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.8; color: #3a3a38; }
.aw-reading p { padding: 3px 0; margin: 0 0 14px 0; }
.aw-reading hr { margin: 10px 0 6px 0; }
.aw-reading ul { margin: 4px 10px 8px 40px; list-style-type: circle; }
.aw-reading blockquote { background: #f9f9f9; border-left: 4px solid #1D9E75; margin: 1.2em 0; padding: 0.8em 1.2em; font-style: italic; color: #0F6E56; }
.aw-reading blockquote:before { content: none; }
.aw-reading img.float-end { border-radius: 6px; border: 1px solid #e8e6e0 !important; }

/* --- Credits --- */
.aw-credits { font-size: 14px; color: #888780; font-style: italic; padding: 16px 0; border-top: 1px solid #e8e6e0; margin-top: 8px; }
.aw-credits a { color: #0F6E56; text-decoration: none; }
.aw-credits a:hover { text-decoration: underline; }

/* --- Seed Questions --- */
.aw-seed { background: #F6F3EC; border-radius: 12px; padding: 24px 26px 22px; margin: 28px 0; }
.aw-seed-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: #888780; margin-bottom: 10px; font-weight: 700; }
.aw-seed p { font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.7; color: #4a4a48; margin: 0; }

/* --- Community CTA Bar --- */
.aw-cta-bar { border: 1px solid #e8e6e0; border-radius: 12px; background: #fff; overflow: hidden; margin: 24px 0; }
.aw-cta-main { display: flex; align-items: center; padding: 16px 20px; gap: 14px; }
.aw-cta-icon-wrap { width: 38px; height: 38px; border-radius: 50%; background: #E1F5EE; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #0F6E56; font-size: 16px; }
.aw-cta-body { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; }
.aw-cta-body a { color: #0F6E56; text-decoration: none; font-weight: 600; }
.aw-cta-body a:hover { text-decoration: underline; }
.aw-cta-join { font-size: 13px; padding: 7px 20px; border-radius: 20px; background: #1D9E75; color: #fff; text-decoration: none; white-space: nowrap; flex-shrink: 0; border: none; }
.aw-cta-join:hover { background: #0F6E56; color: #fff; text-decoration: none; }
.aw-cta-toggle { display: flex; align-items: center; justify-content: center; padding: 10px; border-top: 1px solid #e8e6e0; cursor: pointer; gap: 6px; font-size: 12px; color: #888780; background: #FDFCFA; user-select: none; }
.aw-cta-toggle:hover { color: #0F6E56; background: #FAF9F6; }
.aw-cta-toggle i { transition: transform 0.2s; }
.aw-cta-toggle.open i { transform: rotate(180deg); }
.aw-cta-more { display: none; border-top: 1px solid #e8e6e0; padding: 4px 20px 14px; }
.aw-cta-more.open { display: block; }
.aw-cta-more-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0eee8; text-decoration: none; color: #2c2c2a; }
.aw-cta-more-item:last-child { border-bottom: none; }
.aw-cta-more-item:hover { color: #0F6E56; text-decoration: none; }
.aw-cta-more-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.aw-cta-more-icon.metta { background: #EEEDFE; color: #534AB7; }
.aw-cta-more-icon.pods { background: #E6F1FB; color: #185FA5; }
.aw-cta-more-icon.start { background: #FAEEDA; color: #854F0B; }
.aw-cta-more-title { font-size: 13px; font-weight: 600; }
.aw-cta-more-desc { font-size: 12px; color: #888780; margin-top: 1px; }

/* --- Prev/Next Navigation --- */
.aw-nav-reading { display: flex; justify-content: space-between; padding: 24px 0; border-top: 1px solid #e8e6e0; border-bottom: 1px solid #e8e6e0; margin: 16px 0 36px; }
.aw-nav-reading a { font-size: 13px; color: #888780; text-decoration: none; display: flex; flex-direction: column; gap: 4px; max-width: 45%; }
.aw-nav-reading a:hover { color: #0F6E56; }
.aw-nav-reading .dir { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.aw-nav-reading .rtitle { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; color: #2c2c2a; line-height: 1.4; }

/* --- Comment Section Redesign --- */
.aw-section-title { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: normal; margin-bottom: 20px; }

.aw-cmt-form-card { background: #fff; border: 1px solid #e8e6e0; border-radius: 12px; padding: 22px; margin-bottom: 32px; }
.aw-cmt-form-card textarea { width: 100%; border: 1px solid #e8e6e0; border-radius: 8px; padding: 14px; font-family: Georgia, 'Times New Roman', serif; font-size: 16px; line-height: 1.6; resize: vertical; min-height: 100px; color: #2c2c2a; background: #FAF9F6; height: unset; }
.aw-cmt-form-card textarea:focus { outline: none; border-color: #1D9E75; box-shadow: none; }
.aw-cmt-form-card textarea::placeholder { color: #b5b3ac; }
.aw-cmt-form-card .input-group { margin-bottom: 0; }
.aw-cmt-form-card .input-group-text { background: #FAF9F6; border-color: #e8e6e0; color: #888780; }
.aw-cmt-form-card .form-control { border-color: #e8e6e0; background: #FAF9F6; }
.aw-cmt-form-card .form-control:focus { border-color: #1D9E75; box-shadow: none; }

.aw-cmt-count { font-size: 14px; color: #888780; margin-bottom: 16px; }

/* Comment items */
.aw-cmt-item { padding: 18px 0; border-bottom: 1px solid #e8e6e0; }
.aw-cmt-item:last-child { border-bottom: none; }
.aw-cmt-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.aw-cmt-initials { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.aw-cmt-name { font-size: 14px; font-weight: 600; }
.aw-cmt-name a { color: inherit; text-decoration: none; font-size: inherit; line-height: inherit; display: inline; }
.aw-cmt-name a:hover { color: #0F6E56; text-decoration: underline; }
.aw-cmt-date { font-size: 12px; color: #888780; }
.aw-cmt-text { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.7; color: #4a4a48; padding-left: 46px; }
.aw-cmt-text p { margin: 0 0 3px 0; }
.aw-cmt-reply-link { font-size: 13px; color: #888780; padding-left: 46px; margin-top: 6px; }
.aw-cmt-reply-link a { color: #888780; text-decoration: none; }
.aw-cmt-reply-link a:hover { color: #0F6E56; }

/* Comment expand/collapse */
.aw-toggle-cmt { color: #0F6E56 !important; font-size: 13px !important; font-family: -apple-system, system-ui, sans-serif; line-height: inherit !important; display: inline !important; float: none !important; }
.aw-toggle-cmt:hover { text-decoration: underline !important; }

/* Inline reply thread */
.aw-cmt-replies-thread { margin-left: 46px; margin-top: 12px; padding-left: 16px; border-left: 2px solid #E1F5EE; }
.aw-reply { padding: 10px 0; }
.aw-reply + .aw-reply { border-top: 1px solid #f0eee8; }
.aw-reply-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.aw-reply-name { font-size: 13px; font-weight: 600; color: #2c2c2a; }
.aw-reply-date { font-size: 11px; color: #aaa; }
.aw-reply-body { font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.65; color: #4a4a48; }
.aw-reply-body p { margin: 0 0 3px 0; }

/* Reply pill button */
.aw-cmt-action { padding-left: 46px; margin-top: 10px; }
.aw-reply-pill { display: inline-block; font-size: 12px; padding: 3px 14px; border-radius: 14px; border: 1px solid #e0ded8; color: #888780; text-decoration: none !important; font-family: -apple-system, system-ui, sans-serif; transition: all 0.15s; cursor: pointer; background: none; }
.aw-reply-pill:hover { border-color: #1D9E75; color: #0F6E56; background: #F6FBF9; }

/* Inline reply form */
.aw-reply-form { margin-left: 46px; margin-top: 10px; padding: 14px; background: #FAF9F6; border: 1px solid #e8e6e0; border-radius: 10px; }
.aw-reply-form textarea { width: 100%; border: 1px solid #e8e6e0; border-radius: 6px; padding: 10px 12px; font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.5; resize: vertical; min-height: 60px; color: #2c2c2a; background: #fff; }
.aw-reply-form textarea:focus { outline: none; border-color: #1D9E75; }
.aw-reply-form textarea::placeholder { color: #b5b3ac; }
.aw-reply-form-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
.aw-reply-form-row input { flex: 1; border: 1px solid #e8e6e0; border-radius: 6px; padding: 7px 10px; font-size: 13px; color: #2c2c2a; background: #fff; font-family: -apple-system, system-ui, sans-serif; min-width: 0; }
.aw-reply-form-row input:focus { outline: none; border-color: #1D9E75; }
.aw-reply-submit { font-size: 12px; padding: 7px 18px; border-radius: 14px; background: #1D9E75; color: #fff; border: none; cursor: pointer; white-space: nowrap; font-family: -apple-system, system-ui, sans-serif; font-weight: 600; transition: background 0.15s; }
.aw-reply-submit:hover { background: #0F6E56; }
.aw-reply-submit:disabled { background: #aaa; cursor: wait; }

/* New reply highlight */
.aw-reply-new { background: #F6FBF9; border-radius: 6px; padding: 10px 12px !important; margin-top: 4px; }

/* Initials color rotation */
.aw-ci-0 { background: #E1F5EE; color: #0F6E56; }
.aw-ci-1 { background: #EEEDFE; color: #534AB7; }
.aw-ci-2 { background: #E6F1FB; color: #185FA5; }
.aw-ci-3 { background: #FAEEDA; color: #854F0B; }
.aw-ci-4 { background: #FAECE7; color: #993C1D; }
.aw-ci-5 { background: #FBEAF0; color: #993556; }

/* --- Audio/Photo view modes --- */
.aw-audio-card { background: #E1F5EE; border: 1px solid #c8e8db; border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.aw-audio-card .aw-audio-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #0F6E56; font-weight: 700; margin-bottom: 10px; }

/* --- Photo Modal --- */
#photoModal { z-index: 99999; }
#photoModal + .modal-backdrop, .modal-backdrop { z-index: 99998 !important; }
.aw-photo-modal { background: #fff; border: none; box-shadow: 0 8px 40px rgba(0,0,0,0.3); border-radius: 12px; overflow: hidden; }
.aw-photo-modal .aw-photo-close { position: absolute; top: 12px; right: 12px; z-index: 10; opacity: 0.5; }
.aw-photo-modal .aw-photo-close:hover { opacity: 1; }
.aw-photo-artist { padding: 18px 20px 12px; font-size: 14px; color: #888780; font-style: italic; }
.aw-photo-body { padding: 0 16px 16px; }
.aw-photo-body img { width: 100%; display: block; border-radius: 6px; }

/* --- Sticky Audio Bar --- */
.aw-audio-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1050; background: #1a1a1a; border-top: 1px solid #333; box-shadow: 0 -2px 16px rgba(0,0,0,0.2); }
.aw-audio-bar-inner { max-width: 800px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; }
.aw-audio-play { width: 38px; height: 38px; border-radius: 50%; background: #1D9E75; border: none; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; font-size: 14px; transition: background 0.15s; }
.aw-audio-play:hover { background: #0F6E56; }
.aw-audio-play i { margin-left: 2px; }
@keyframes aw-spin { to { transform: rotate(360deg); } }
.aw-audio-spinner { animation: aw-spin 0.8s linear infinite; }
.aw-audio-info { flex: 1; min-width: 0; }
.aw-audio-title { font-size: 13px; color: rgba(255,255,255,0.9); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.aw-audio-reader { font-weight: 400; color: rgba(255,255,255,0.5); }
.aw-audio-progress-wrap { cursor: pointer; }
.aw-audio-progress { height: 4px; background: #444; border-radius: 2px; overflow: hidden; }
.aw-audio-progress-fill { height: 100%; background: #1D9E75; border-radius: 2px; width: 0%; transition: width 0.2s linear; }
.aw-audio-time { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 3px; }
.aw-audio-dl { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); text-decoration: none; font-size: 13px; flex-shrink: 0; transition: color 0.15s; }
.aw-audio-dl:hover { color: #fff; }
.aw-audio-close { background: none; border: none; color: rgba(255,255,255,0.4); font-size: 16px; cursor: pointer; padding: 4px; flex-shrink: 0; transition: color 0.15s; }
.aw-audio-close:hover { color: #fff; }

@media (max-width: 480px) {
    .aw-audio-bar-inner { padding: 10px 14px; gap: 10px; }
    .aw-audio-title { font-size: 12px; }
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .aw-header-inner { flex-direction: column-reverse; gap: 16px; }
    .aw-header-image { width: 100%; max-width: 260px; }
    .aw-title { font-size: 26px; }
    .aw-reading { font-size: 16px; line-height: 1.75; }
    .aw-cmt-text, .aw-cmt-reply-link, .aw-cmt-action { padding-left: 0; }
    .aw-cmt-replies-thread, .aw-reply-form { margin-left: 0; padding-left: 14px; }
    .aw-reply-form-row { flex-wrap: wrap; }
    .aw-reply-form-row input { flex: 1 1 120px; }
    .aw-nav-reading { flex-direction: column; gap: 14px; }
    .aw-nav-reading a { max-width: 100%; }
    .aw-cta-main { flex-wrap: wrap; }
    .aw-cta-join { width: 100%; text-align: center; margin-top: 4px; display: block; }
    .aw-header-actions { margin-top: 14px; }
    .aw-reading-wrap { padding: 0 16px; }
}