/* Church Bible Reader — v1.2.0 */

.cbr-reader {
  --cbr-accent:       #4f46e5;
  --cbr-accent-light: #ede9fe;
  --cbr-bg:           #ffffff;
  --cbr-surface:      #f9fafb;
  --cbr-border:       #e5e7eb;
  --cbr-text:         #111827;
  --cbr-text-muted:   #6b7280;
  --cbr-text-light:   #9ca3af;
  --cbr-verse-hover:  #f5f3ff;
  --cbr-radius:       14px;
  --cbr-speed:        0.2s;
  --cbr-topbar-h:     48px;
}
.cbr-reader.cbr-theme-dark {
  --cbr-bg:           #0f0f1a;
  --cbr-surface:      #1a1a2e;
  --cbr-border:       rgba(255,255,255,0.08);
  --cbr-text:         #f1f5f9;
  --cbr-text-muted:   #94a3b8;
  --cbr-text-light:   #64748b;
  --cbr-verse-hover:  rgba(79,70,229,0.12);
}

/* ── Layout ─────────────────────────────────────────────────── */
.cbr-reader {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 600px;
  background: var(--cbr-bg);
  border-radius: var(--cbr-radius);
  border: 1px solid var(--cbr-border);
  overflow: hidden;
  font-family: inherit;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.cbr-topbar {
  flex-shrink: 0;
  height: var(--cbr-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--cbr-bg);
  border-bottom: 1px solid var(--cbr-border);
  z-index: 10;
}

.cbr-nav-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px;
  border: 1.5px solid var(--cbr-border);
  border-radius: 8px;
  background: var(--cbr-surface);
  color: var(--cbr-text-muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer; flex-shrink: 0;
  transition: all var(--cbr-speed);
  white-space: nowrap;
}
.cbr-nav-btn:hover { border-color: var(--cbr-accent); color: var(--cbr-accent); background: var(--cbr-accent-light); }

.cbr-book-picker-btn { max-width: 140px; }
.cbr-book-picker-name { overflow: hidden; text-overflow: ellipsis; }
.cbr-chevron { flex-shrink: 0; transition: transform var(--cbr-speed); }
.cbr-book-picker-btn[aria-expanded="true"] .cbr-chevron { transform: rotate(180deg); }

.cbr-breadcrumb {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--cbr-text-muted);
  overflow: hidden; white-space: nowrap;
}
.cbr-bc-book, .cbr-bc-chapter { overflow: hidden; text-overflow: ellipsis; }
.cbr-bc-chapter { color: var(--cbr-accent); font-weight: 600; }
.cbr-bc-sep { flex-shrink: 0; }

.cbr-topbar-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.cbr-topbar-right .cbr-nav-btn { padding: 6px 8px; }
.cbr-search-toggle.active { background: var(--cbr-accent); border-color: var(--cbr-accent); color: #fff; }

/* ── Panels (book + chapter) ─────────────────────────────────── */
.cbr-book-panel,
.cbr-chapter-panel {
  position: absolute;
  inset: var(--cbr-topbar-h) 0 0 0;
  z-index: 25;
  background: var(--cbr-bg);
  display: flex; flex-direction: column;
  animation: cbrFadeDown .2s ease;
}
.cbr-book-panel[hidden],
.cbr-chapter-panel[hidden] { display: none; }

@keyframes cbrFadeDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:none; }
}

.cbr-panel-header {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--cbr-border);
  gap: 10px;
}
.cbr-panel-close {
  border: none; background: transparent;
  color: var(--cbr-text-muted); font-size: 16px;
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  flex-shrink: 0;
}
.cbr-panel-label {
  font-size: 12px; font-weight: 700;
  color: var(--cbr-text-muted);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 14px 6px; margin: 0; flex-shrink: 0;
}

/* Testament tabs */
.cbr-testament-tabs { display: flex; gap: 6px; }
.cbr-tab {
  padding: 6px 14px; border: 1.5px solid var(--cbr-border);
  border-radius: 20px; background: transparent;
  color: var(--cbr-text-muted); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all var(--cbr-speed);
}
.cbr-tab.active, .cbr-tab:hover {
  background: var(--cbr-accent); border-color: var(--cbr-accent); color: #fff;
}

/* Books grid */
.cbr-books-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px; padding: 10px 14px;
  -webkit-overflow-scrolling: touch;
}
.cbr-book-chip {
  padding: 8px 10px; border: 1.5px solid var(--cbr-border);
  border-radius: 8px; background: var(--cbr-surface);
  color: var(--cbr-text); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: center;
  transition: all var(--cbr-speed); line-height: 1.3;
}
.cbr-book-chip:hover, .cbr-book-chip.active {
  background: var(--cbr-accent); border-color: var(--cbr-accent); color: #fff; font-weight: 700;
}

/* Back button in chapter panel */
.cbr-back-to-books { border: none !important; background: transparent !important; padding: 4px 6px !important; }
.cbr-back-book-name { font-weight: 700; color: var(--cbr-text); }

/* Chapters grid */
.cbr-chapters-grid {
  flex: 1; overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px; padding: 10px 14px;
  -webkit-overflow-scrolling: touch;
}
.cbr-ch-chip {
  aspect-ratio: 1;
  border: 1.5px solid var(--cbr-border);
  border-radius: 8px; background: var(--cbr-surface);
  color: var(--cbr-text-muted); font-size: 14px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all var(--cbr-speed);
}
.cbr-ch-chip:hover, .cbr-ch-chip.active {
  background: var(--cbr-accent); border-color: var(--cbr-accent); color: #fff;
}

/* ── Search bar ─────────────────────────────────────────────── */
.cbr-search-bar {
  flex-shrink: 0; padding: 8px 12px;
  border-bottom: 1px solid var(--cbr-border);
  position: relative; background: var(--cbr-bg); z-index: 15;
}
.cbr-search-bar[hidden] { display: none; }
.cbr-search-input {
  width: 100%; padding: 8px 14px; border-radius: 20px;
  border: 1.5px solid var(--cbr-border); background: var(--cbr-surface);
  color: var(--cbr-text); font-size: 14px; outline: none;
  box-sizing: border-box; transition: border-color var(--cbr-speed);
}
.cbr-search-input:focus { border-color: var(--cbr-accent); }
.cbr-search-results {
  position: absolute; top: calc(100% - 8px); left: 12px; right: 12px;
  background: var(--cbr-bg); border: 1px solid var(--cbr-border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 50; max-height: 240px; overflow-y: auto;
}
.cbr-search-results[hidden] { display: none; }
.cbr-search-result-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--cbr-border); transition: background var(--cbr-speed); }
.cbr-search-result-item:last-child { border-bottom: none; }
.cbr-search-result-item:hover { background: var(--cbr-verse-hover); }
.cbr-search-result-ref { font-size:11px; font-weight:700; color:var(--cbr-accent); letter-spacing:.05em; margin-bottom:2px; }
.cbr-search-result-text { font-size:12px; color:var(--cbr-text-muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ── Main reading area ──────────────────────────────────────── */
.cbr-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.cbr-verses-wrap {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
.cbr-verses { padding: 12px 16px 80px; }

.cbr-loading { display:flex; align-items:center; justify-content:center; min-height:180px; }
.cbr-spinner { width:32px; height:32px; border:3px solid var(--cbr-border); border-top-color:var(--cbr-accent); border-radius:50%; animation:cbrSpin .8s linear infinite; }
@keyframes cbrSpin { to { transform:rotate(360deg); } }

/* ── Verses ─────────────────────────────────────────────────── */
.cbr-verse {
  display: flex; gap: 10px; padding: 7px 8px;
  border-radius: 8px; cursor: pointer; line-height: 1.8;
  position: relative; transition: background var(--cbr-speed);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.cbr-verse:active { background: var(--cbr-verse-hover); }
.cbr-verse.selected { background: var(--cbr-accent-light); }
.cbr-verse-num { flex-shrink:0; width:22px; font-size:11px; font-weight:700; color:var(--cbr-accent); padding-top:4px; text-align:right; user-select:none; }
.cbr-verse-text { font-size:16px; color:var(--cbr-text); flex:1; line-height:1.8; }
.cbr-verse-empty .cbr-verse-text { color:var(--cbr-text-light); font-style:italic; font-size:13px; }
.cbr-verse .cbr-hl-bar { position:absolute; left:0; top:4px; bottom:4px; width:3px; border-radius:2px; }
.cbr-verse-note-dot { width:6px; height:6px; border-radius:50%; background:var(--cbr-accent); flex-shrink:0; margin-top:10px; }
.cbr-verse-fav-dot  { width:6px; height:6px; border-radius:50%; background:#f59e0b; flex-shrink:0; margin-top:10px; }

/* ── Action sheet ────────────────────────────────────────────── */
.cbr-action-sheet, .cbr-share-sheet, .cbr-note-modal { position:absolute; inset:0; z-index:40; display:flex; align-items:flex-end; }
.cbr-action-sheet[hidden], .cbr-share-sheet[hidden], .cbr-note-modal[hidden] { display:none; }
.cbr-action-backdrop, .cbr-share-backdrop, .cbr-note-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); cursor:pointer; }
.cbr-action-panel, .cbr-note-panel { position:relative; z-index:1; width:100%; background:var(--cbr-bg); border-radius:20px 20px 0 0; padding:8px 20px 24px; display:flex; flex-direction:column; gap:8px; animation:cbrSlideUp .25s cubic-bezier(.32,.72,0,1); max-height:80%; overflow-y:auto; }
@keyframes cbrSlideUp { from{transform:translateY(100%);opacity:.6} to{transform:translateY(0);opacity:1} }
.cbr-action-drag { width:36px; height:4px; background:var(--cbr-border); border-radius:4px; margin:0 auto 8px; flex-shrink:0; }
.cbr-action-ref { font-size:12px; font-weight:700; color:var(--cbr-accent); letter-spacing:.06em; text-transform:uppercase; margin:0; }
.cbr-action-preview { font-size:14px; color:var(--cbr-text-muted); font-style:italic; line-height:1.6; margin:0; padding:0; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cbr-action-btns { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; }
.cbr-action-btn { display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px; border:1.5px solid var(--cbr-border); border-radius:12px; background:var(--cbr-surface); color:var(--cbr-text); font-size:11px; font-weight:600; cursor:pointer; transition:all var(--cbr-speed); -webkit-tap-highlight-color:transparent; }
.cbr-action-btn:hover, .cbr-action-btn:active { background:var(--cbr-accent-light); border-color:var(--cbr-accent); color:var(--cbr-accent); }
.cbr-action-btn.active { background:var(--cbr-accent); border-color:var(--cbr-accent); color:#fff; }
.cbr-action-icon { width:40px; height:40px; border-radius:50%; background:var(--cbr-surface); border:1.5px solid var(--cbr-border); display:flex; align-items:center; justify-content:center; transition:all var(--cbr-speed); }
.cbr-action-btn:hover .cbr-action-icon, .cbr-action-btn.active .cbr-action-icon { background:var(--cbr-accent); border-color:var(--cbr-accent); color:#fff; }
.cbr-icon-wa { background:#dcfce7!important; border-color:#86efac!important; color:#16a34a; }
.cbr-hl-picker { display:flex; gap:8px; align-items:center; padding:8px 0 4px; flex-wrap:wrap; }
.cbr-hl-picker[hidden] { display:none; }
.cbr-hl-swatch { width:32px; height:32px; border-radius:50%; border:2px solid transparent; cursor:pointer; transition:transform .15s,border-color .15s; flex-shrink:0; }
.cbr-hl-swatch:hover { transform:scale(1.2); border-color:var(--cbr-text); }
.cbr-hl-remove { background:var(--cbr-surface)!important; color:var(--cbr-text-muted); font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.cbr-note-title { font-size:16px; font-weight:700; color:var(--cbr-text); margin:0; }
.cbr-note-ref-display { font-size:12px; color:var(--cbr-accent); font-weight:600; margin:0; }
.cbr-note-textarea { width:100%; padding:10px; border:1.5px solid var(--cbr-border); border-radius:8px; background:var(--cbr-surface); color:var(--cbr-text); font-size:14px; line-height:1.6; resize:vertical; outline:none; box-sizing:border-box; font-family:inherit; min-height:100px; transition:border-color var(--cbr-speed); }
.cbr-note-textarea:focus { border-color:var(--cbr-accent); }
.cbr-note-actions { display:flex; gap:8px; justify-content:flex-end; }
.cbr-note-save { padding:8px 20px; background:var(--cbr-accent); color:#fff; border:none; border-radius:20px; font-size:13px; font-weight:600; cursor:pointer; }
.cbr-note-cancel { padding:8px 16px; background:transparent; color:var(--cbr-text-muted); border:1.5px solid var(--cbr-border); border-radius:20px; font-size:13px; cursor:pointer; }
.cbr-share-title { font-size:14px; font-weight:700; color:var(--cbr-text); margin:0; }

/* ── Scrollbar ──────────────────────────────────────────────── */
.cbr-verses-wrap::-webkit-scrollbar, .cbr-books-grid::-webkit-scrollbar, .cbr-chapters-grid::-webkit-scrollbar { width:3px; }
.cbr-verses-wrap::-webkit-scrollbar-thumb, .cbr-books-grid::-webkit-scrollbar-thumb, .cbr-chapters-grid::-webkit-scrollbar-thumb { background:var(--cbr-border); border-radius:4px; }

/* ── Verse tooltip (global — outside reader) ────────────────── */
.cbr-verse-ref {
  color: var(--cbr-accent, #4f46e5);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.cbr-verse-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: 340px;
  background: #1e1b4b;
  color: #e0e7ff;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s, transform .18s;
  font-size: 14px;
  line-height: 1.7;
}
.cbr-verse-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.cbr-verse-tooltip-ref {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #a5b4fc;
  margin-bottom: 6px;
}
.cbr-verse-tooltip-text { font-style: italic; }
.cbr-verse-tooltip-loading { color: #a5b4fc; font-style: italic; font-size: 13px; }

/* Mobile */
@media (max-width:600px) {
  .cbr-reader { border-radius:10px; }
  .cbr-verse-text { font-size:15px; }
  .cbr-books-grid { grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); }
  .cbr-chapters-grid { grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); }
}