/* =========================================================
   Shared Styles for Shlokam App
   Used by all modules (Gita, Shlokas, etc.)
   ========================================================= */

/* =========================================================
   Theme palettes (complete; includes all tokens in use)
   ========================================================= */
:root[data-theme="light"]{
  --fg:#222;
  --muted:#666;
  --bg:#faf7ef;                 /* soft warm background (was #faf7ff) */
  --card:#fff;
  --title-bg:#fffdf8;

  --border:#e3dccf;
  --sep:#e7e0d3;

  --accent:#0d6efd;             /* <-- missing before; used by links/expand/back */
  --pill:#111; --pill-fg:#fff;

  --send:#ff7a00; --send-fg:#fff;
  --clear:#444;   --clear-fg:#fff;

  --toggle-bg:#fff; --toggle-fg:#222;

  /* citations */
  --cite:#d97706;
  --cite-ghost:rgba(217,119,6,.10);

  /* surface aliases (lists/cards) */
  --surface-1:#fff; --border-1:#e6e6e6;
}
:root[data-theme="dark"]{
  --fg:#e9e9ea; --muted:#a5a5ac; --bg:#0f0f10;
  --card:#161618; --title-bg:#1b1b1e;

  --border:#2a2a30; --sep:#2f2f36;

  --accent:#8ab4ff;             /* lighter link color for dark */
  --pill:#e9e9ea; --pill-fg:#0f0f10;

  --send:#ff8d26; --send-fg:#0f0f10;
  --clear:#d0d0d5; --clear-fg:#0f0f10;

  --toggle-bg:#1d1d20; --toggle-fg:#e9e9ea;

  --cite:#ffb74a; --cite-ghost:rgba(255,183,74,.15);

  --surface-1:#1a1a1c; --border-1:#2a2a30;
}

/* =========================================================
   Chapter Menu Styles
   ========================================================= */
.chapter-select-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--fg);
}

/* =========================================================
   Chapter Navigation Styles
   ========================================================= */
.chapter_menu .chapter_option {
  margin: 12px 0;
}
.chapter_menu .chapter-list-item {
  padding: 8px 0;
}
.chapter_menu .chapter-list-item a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.chapter_menu .chapter-list-item a:hover {
  text-decoration: underline;
}
.chapter_separator {
  border: none;
  height: 1px;
  background: var(--sep);
  margin: 16px 0;
}

/* =========================================================
   Global
   ========================================================= */
*{box-sizing:border-box}
html{
  margin:0; 
  padding:0;
  /* Only apply safe area padding in native app (not mobile web) */
}
/* Native app: respect safe area insets */
.is-native html {
  padding-top: env(safe-area-inset-top, 0px);
  padding-top: constant(safe-area-inset-top); /* iOS < 11.2 fallback */
}
body{
  margin:0; 
  padding:0;
  color:var(--fg);
  font:16px/1.7 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}

/* Parchment background for body when not showing white content */
:root[data-theme="light"] body {
  background-image: url('/ui/backparchment-m.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  /* Push background down to account for safe area on mobile */
  background-position: center env(safe-area-inset-top, 0px);
  background-position: center constant(safe-area-inset-top); /* iOS < 11.2 */
}

@media (min-width: 641px) {
  :root[data-theme="light"] body {
    background-image: url('/ui/backParchment-d.jpg');
  }
}


.container{max-width:100%;margin:0;padding:0}
h1{font-size:20px;margin:0}
small{color:var(--muted)}

/* =========================================================
   Slide-out Menu Panel (ChatGPT-style)
   ========================================================= */
/* Menu Toggle Button (in input area) */
.menu-toggle-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
}

.menu-toggle-btn:hover {
  background: var(--bg);
}

/* Menu Backdrop (dark overlay) */
.menu-backdrop {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  top: constant(safe-area-inset-top); /* iOS < 11.2 fallback */
  left: 0;
  width: 100%;
  height: calc(100% - env(safe-area-inset-top, 0px));
  height: calc(100% - constant(safe-area-inset-top)); /* iOS < 11.2 */
  background: rgba(0, 0, 0, 0.5);
  z-index: 1998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Menu Panel */
.menu-panel {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  top: constant(safe-area-inset-top); /* iOS < 11.2 fallback */
  left: 0;
  height: calc(100% - env(safe-area-inset-top, 0px));
  height: calc(100% - constant(safe-area-inset-top)); /* iOS < 11.2 */
  width: 100%;
  background: white;
  z-index: 1999;
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.menu-panel.active {
  transform: translateX(0);
}

/* Menu Header (title and close button) */
.menu-header {
  padding: 16px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.menu-title {
  font-size: 18px;
  font-weight: 700;
  color: #222;
  flex: 1;
}

.menu-home {
  cursor: pointer;
}

.menu-home:focus-visible {
  outline: 2px solid var(--accent, #8b4513);
  outline-offset: 2px;
  border-radius: 6px;
}

.menu-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.menu-close-btn:hover {
  background: #f5f5f5;
  color: #222;
}

/* Menu Content */
.menu-content {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
}

.menu-item {
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 500;
  color: #222;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
}

.menu-icon {
  flex-shrink: 0;
  color: #666;
  stroke-width: 2;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item:hover .menu-icon {
  color: #222;
}

.menu-item:active {
  background: #eeeeee;
}

.menu-count {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.9em;
  margin-left: 4px;
}

.menu-count:empty {
  display: none;
}

/* Desktop: Narrow panel */
@media (min-width: 641px) {
  .menu-panel {
    width: 280px;
    max-width: 85vw;
  }
  
  .menu-toggle-btn {
    width: 52px;
    height: 52px;
  }
}

/* =========================================================
   Share Modal
   ========================================================= */
#share-modal {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  top: constant(safe-area-inset-top); /* iOS < 11.2 fallback */
  left: 0;
  width: 100%;
  height: calc(100% - env(safe-area-inset-top, 0px));
  height: calc(100% - constant(safe-area-inset-top)); /* iOS < 11.2 */
  background: rgba(0,0,0,0.5);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
}

#share-modal.active {
  display: flex;
}

.share-modal-content {
  background: var(--card);
  border-radius: 12px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.share-grid-title {
  font-size: 32px;
  font-weight: 600;
  text-align: center;
  color: var(--fg);
  margin-bottom: 28px;
  position: relative;
}

.share-grid-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -12px;
  width: 78%;
  height: 2px;
  background: #f4b942;
}

.share-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 140px));
  gap: 28px 52px;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.share-grid-item {
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
}

.share-grid-item img {
  width: 74px; /* 20% smaller than 92px */
  height: 74px; /* 20% smaller than 92px */
  object-fit: contain;
}

.share-span-two {
  grid-column: 1 / -1;
  justify-self: center;
}

@media (max-width: 600px) {
  .share-modal-content {
    max-width: 95%;
  }

  .share-grid {
    grid-template-columns: repeat(2, minmax(0, 120px));
    gap: 24px 24px;
  }

  .share-grid-item img {
    width: 66px; /* 20% smaller than 82px */
    height: 66px; /* 20% smaller than 82px */
  }
}

.share-close {
  margin-top: 24px;
  padding: 14px 24px;
  background: #c19a6b;
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  width: auto;
  text-align: center;
  transition: background-color 0.2s;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.share-close:hover {
  background: #b0895a;
}

/* =========================================================
   Tutorial Overlay
   ========================================================= */
#tutorial-overlay {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  top: constant(safe-area-inset-top); /* iOS < 11.2 fallback */
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: rgba(10, 9, 7, 0.55);
  z-index: 11000;
}

#tutorial-overlay.tutorial-hidden {
  display: none;
}

.tutorial-card {
  background: rgba(255, 255, 255, 0.96);
  color: var(--fg);
  width: min(360px, calc(100% - 96px));
  margin: 40px auto;
  padding: 30px 26px 26px;
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  position: relative;
}

.tutorial-card h2 {
  font-size: 24px;
  margin: 0 0 18px;
  font-weight: 600;
}

.tutorial-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin-bottom: 18px;
}

#tutorial-video {
  width: 100%;
  height: auto;
  min-height: 200px;
  border-radius: 12px;
  margin-bottom: 18px;
  display: block;
  object-fit: contain;
  background: #000;
}

#tutorial-dismiss {
  background: #d4d4d4;
  color: var(--fg);
  border: none;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

#tutorial-dismiss:hover,
#tutorial-dismiss:focus-visible {
  background: #bfbfbf;
  color: var(--fg);
}

.tutorial-close {
  position: absolute;
  top: 12px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--fg);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}

.tutorial-close:hover,
.tutorial-close:focus-visible {
  color: var(--accent, var(--fg));
}

@media (max-width: 500px) {
  .tutorial-card {
    width: min(320px, calc(100% - 64px));
    margin: 24px auto;
    padding: 24px 20px 20px;
    border-radius: 20px;
  }

  .tutorial-card h2 {
    font-size: 22px;
  }
}

/* =========================================================
   Header + theme toggle
   ========================================================= */
.chat-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;position:relative;display:none !important;}
.theme-toggle{
  margin-left:auto; width:40px; height:40px; border-radius:999px; border:1px solid var(--border);
  background:var(--toggle-bg); color:var(--toggle-fg); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.theme-icon{font-size:18px; line-height:1}

/* Removed old conflicting background rules */

/* main chat container keeps readability */
.container {
  background: transparent !important;
  border-radius: 8px;
  box-shadow: none !important;
}

/* mobile tweaks */
  @media (max-width: 640px) {
    .container {
      background: transparent !important;
      border-radius: 0;
      box-shadow: none;
    }

    .topic_html ul {
      margin-left: 12px;  /* Even less indentation on mobile */
    }

    .topic_html details {
      margin-left: 12px;  /* Match the reduced bullet indentation */
    }
  }

/* branding chip (optional) */
.brand-chip {
  position: fixed;
  right: 14px;
  top: calc(10px + env(safe-area-inset-top, 0px));
  top: calc(10px + constant(safe-area-inset-top)); /* iOS < 11.2 fallback */
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.9);
  color: var(--fg);
  text-decoration: none;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
}
.brand-chip img { width: 16px; height: 16px; }

/* =========================================================
   Generic card section
   ========================================================= */
.section{background:transparent;border:none;border-radius:0;padding:14px 0;margin:10px 0}
.section h2{font-size:16px;margin:0 0 8px}
.section p{margin:6px 0}

/* Title card (Explain title) */
.title_card{
  background: transparent;  /* Transparent since parent has dark background */
  color: white;  /* White text */
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: auto;
  padding: 12px 20px 8px 0;  /* No left padding - parent has 16px */
  margin: 0;  /* No margin since it's inside sticky header */
}

.title_card h2{
  font-size:22px;
  line-height:1.25;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color: white;  /* Ensure white text */
}

.title_card h2 .meaning_inline{font-weight:400;color:rgba(255,255,255,0.8)}

/* Audio player styling */
.audio-container {
  margin: 0;
  padding: 10px 20px 8px 0; /* No left padding - parent has 16px */
}

.audio-container audio {
  width: 100%;
  max-width: 600px;
  height: 36px;  /* Reduced height (default is usually 48px) */
  filter: hue-rotate(0deg) saturate(1.2);  /* Enhance colors */
  border-radius: 8px; /* Match deity image rounded edges */
}

/* Style audio controls - WebKit browsers (Chrome, Safari, Edge) */
.audio-container audio::-webkit-media-controls-panel {
  background-color: #c19a6b;  /* Warm orange-brown tone */
  border-radius: 8px; /* Match audio element */
}

.audio-container audio::-webkit-media-controls-play-button {
  background-color: #c19a6b;  /* Warm orange-brown tone */
  border-radius: 50%;
}

/* For Firefox - limited styling, but can adjust with filter */
@-moz-document url-prefix() {
  .audio-container audio {
    accent-color: #c19a6b;  /* Warm orange-brown tone */
  }
}

/* =========================================================
   Explain — verse stack
   ========================================================= */
.verse_stack{padding:0;position:relative;overflow:hidden;border-radius:0;margin-top:16px} /* Push content down below header */
.verse_stack .block{padding:12px 0} /* reduced from 20px 0 for tighter spacing between fields */
/* Removed automatic separator between blocks - now using explicit <hr class="verse-separator"> tags */
/* .verse_stack .block + .block{position:relative} */
/* .verse_stack .block + .block::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--sep)} */


/* Explain typography */
.sanskrit_block{
  font-size:26px; /* increased from 22px for better readability */
  line-height:1.6;
  font-family:'Tiro Devanagari Sanskrit', serif;
}
.roman_block{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  font-weight:400;
  font-size:21px; /* increased from 18px for better readability */
  line-height:1.75;
  color:var(--fg);
}
.colloquial_block{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
  font-weight:400;
  font-size:21px; /* match roman_block size */
  line-height:1.7;
  color:var(--fg);
  margin-top:8px;
}
.translation_block{
  font-family:'Droid Serif', Georgia, "Times New Roman", Times, serif;
  font-style:italic;
  font-size:18px; /* added explicit size for consistency */
  line-height:1.8;
  margin-top:10px;
}
.word_meaning_block{
  white-space:pre-wrap;
  font-size:17px; /* added explicit size for consistency */
  line-height:1.7;
}
.word_meaning_block .compound-components {
  color: var(--muted);
  font-style: normal;
  font-weight: normal;
  margin-left: 0.25em;
}
.word_meaning_block .compound-components em {
  font-style: italic;
  color: var(--fg);
}

/* =========================================================
   Commentaries
   ========================================================= */
/* White background for commentaries section on parchment using wrapper */
.commentary_wrapper {
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
  padding: 16px 16px 16px 16px;
  background: white;
}

/* White background for description section (same as commentaries) */
.description_wrapper {
  clear: both; /* Prevent float from extending into description */
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -16px;
  padding: 16px 16px 16px 16px;
  background: white;
}

.commentary_header{margin-bottom:0 !important; margin-top:0 !important; padding-bottom:0 !important}
.commentary_item{padding-top:8px}
.comm_author{font-size:22px;font-weight:700;margin-bottom:6px;margin-top:20px}
.commentary_item .meta{color:var(--muted);font-size:13px;margin-bottom:6px}
.commentary_item .text{white-space:normal;word-break:break-word}
.commentary_item .text p{margin:0 0 .75em}
/* collapsed read more */
.commentary_item .text.collapsed{max-height:280px;overflow:hidden;position:relative}
.commentary_item .text.collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--card))}
.readmore{display:inline-block;margin-top:6px;font-size:14px;color:var(--accent);cursor:pointer}
/* remove separator right under commentaries header block */
.verse_stack .block.commentary_header + .block::before { display:none; }

/* Responsive video embeds in capsule container */
.capsule-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
  overflow: hidden;
}

/* Make iframes responsive - override any fixed dimensions */
.capsule-container iframe {
  width: 100% !important;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
}

/* Fallback for older browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .capsule-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
  }
  
  .capsule-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}


/* =========================================================
   Pills
   ========================================================= */
.nav_block{display:flex;gap:8px;margin-top:10px;margin-bottom:24px;flex-wrap:wrap}
.pill{
  padding:6px 10px;background:var(--pill);color:var(--pill-fg);
  border-radius:6px; text-decoration:none; display:inline-block
}

/* inline citation pill */
.inline-pill{
  display:inline-block;margin-left:4px;margin-right: 0.2em;padding:4px 10px;
  border-radius:6px;border:1px solid var(--cite);
  color:var(--cite);background:var(--cite-ghost);text-decoration:none;font-size:13px;line-height:1.4;
  cursor:pointer;font-weight:600;
}
.inline-pill:hover{background:var(--cite);color:#fff}

/* Citation pill at start of verse (block display) */
.verse-item > .inline-pill {
  display: inline-block;
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

/* Add gap between lines within verses (where <br> appears) */
.verse-content .verse-line-spacer {
  display: block;
  height: 4px;
}

/* =========================================================
   Term
   ========================================================= */
.term_intro{ color:var(--muted); font-size:16px; margin-top:-4px; }

/* =========================================================
   Explore — chip, lists, header
   ========================================================= */
.explore-chip{
  display:inline-block; background:var(--surface-2, #f5f5f5); color:var(--text-1, #333);
  font-size:14px; border-radius:16px; padding:6px 12px; margin:4px 0 8px; cursor:pointer;
  user-select:none; transition:background .2s, transform .05s;
}
.explore-chip:active{ transform: translateY(1px); }

/* Explore header (page-local) */
.explore_header_main{
  font-size:26px; font-weight:800; margin:0 0 20px;
}

/* Hide header on first screen (deities grid), keep it on second screen (deity shlokas list) */
:root[data-theme="light"] .deities-page .explore_header_main {
  display: none; /* Hide "Deities" header on first screen */
}

/* Show header on explore-groups page (Gita Topics) - it uses deities-page class for dark background */
:root[data-theme="light"] .deities-page.explore-groups-page .explore_header_main,
:root[data-theme="light"] .explore-groups-page .explore_header_main {
  display: block !important; /* Show "Gita Topics" header */
  color: rgba(240, 240, 240, 0.95); /* Almost white text on dark background */
}

/* Keywords page header should be dark (parchment background) */
:root[data-theme="light"] .keyword-page .explore_header_main {
  color: var(--fg) !important; /* Dark text on parchment background */
}

/* Almost white text for headers on dark grey explore pages (second screen only) */
:root[data-theme="light"] .deity-page .explore_header_main {
  color: rgba(240, 240, 240, 0.95); /* Almost white */
}

.favorites-header-card .explore_header_main {
  color: rgba(240, 240, 240, 0.95) !important; /* Ensure white text on dark background */
}

/* Empty favorites message - white text, bigger font on dark background */
:root[data-theme="light"] .deity-page .empty-favorites {
  color: rgba(240, 240, 240, 0.95) !important;
}

:root[data-theme="light"] .deity-page .empty-favorites .section p {
  color: rgba(240, 240, 240, 0.95) !important;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
}

:root[data-theme="light"] .deity-page .empty-favorites .section h2 {
  color: rgba(240, 240, 240, 0.95) !important;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  :root[data-theme="light"] .deity-page .empty-favorites .section p {
    font-size: 18px;
  }
  
  :root[data-theme="light"] .deity-page .empty-favorites .section h2 {
    font-size: 24px;
  }
}

/* Gita favorites - Desktop */
.favorites-header-card.msg {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0 0;
}

.favorites-header-card .section {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 2px 0;
  margin: 6px 0;
}

/* Move grid up nicely when header is hidden (first screen) */
:root[data-theme="light"] .deities-page .deity_grid {
  margin-top: 24px; /* Nice spacing from top when no header */
}

/* Compensate grid positioning on second screen */
:root[data-theme="light"] .deity-page .deity_shlokas_list {
  margin-top: 0; /* Reduced to eliminate gap */
}

.keyword_sanskrit{ font-size:22px; font-weight:700; margin-bottom:6px; color:var(--fg); }

/* Keyword Grid - responsive card layout */
.keyword_grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.keyword_card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 16px;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.keyword_card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.keyword_name {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .keyword_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 16px;
  }
  
  .keyword_card {
    min-height: 100px;
    padding: 12px;
  }
  
  .keyword_sanskrit {
    font-size: 20px;
  }
  
  .keyword_name {
    font-size: 16px;
  }
}

/* =========================================================
   Explore - Deities (Shlokas)
   ========================================================= */

/* Dark grey background for deities page - override body parchment */
:root[data-theme="light"] .chat-stream.deities-page,
:root[data-theme="light"] .stream.deities-page {
  background: rgba(45, 45, 45, 1) !important; /* Dark grey */
  background-attachment: fixed;
  --sep: #e7e0d3; /* lighter for white background */
}

/* Deity Grid - responsive: minimum 2 columns on mobile, more on larger screens */
.deity_grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:24px;
  margin-top:24px;
}

/* Constrain explore hub cards to prevent them from getting too wide on large screens */
.explore_hub_grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 280px));
}

.deity_card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  min-height:240px;
  /* No shadows - clean design */
  box-shadow: none;
  transition:transform 0.2s ease;
}

.deity_card:hover{
  /* Subtle transform on hover, no shadow */
  transform:translateY(-2px);
}

.deity_card_name{
  padding:10px 16px 6px;
  font-size:18px;
  font-weight:700;
  color:#000;
  text-align:center;
}

.deity_card_image_container{
  width:100%;
  height:200px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,0.3);
  flex:1;
}

/* Explore Hub cards - taller for desktop */
.explore_hub_card {
  min-height:250px; /* 25% taller than deity_card */
}

.explore_hub_card .deity_card_image_container {
  height:200px; /* 25% taller than deity_card */
}

.deity_card_image{
  width:100%;
  height:100%;
  object-fit: cover; /* Crop excess and fill container */
  object-position: center; /* Center the crop for better framing */
  padding: 0; /* Remove padding since cover will fill the space */
}

.deity_card_count{
  padding:0 16px 12px; /* Reduced bottom padding */
  font-size:14px;
  color:#333;
  text-align:center;
}

/* Topic Group Cards (Gita) - Similar to deity cards but with topic lists inside */
.topic_group_card{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:200px;
  box-shadow: none;
  transition:transform 0.2s ease;
}

.topic_group_card:hover{
  transform:translateY(-2px);
}

.topic_group_name{
  padding:12px 16px 8px;
  font-size:20px;
  font-weight:700;
  color:#fff;
  text-align:center;
}

.topic_group_list{
  width:100%;
  padding:12px 16px;
  max-height:400px;
  overflow-y:auto;
  flex:1;
  min-height:160px;
  display:flex;
  flex-direction:column;
}

.topic_group_row{
  padding:8px 0;
  cursor:pointer !important;
  font-size:16px;
  font-weight:600;
  color:#000;
  transition:background-color 0.2s ease;
  line-height:1.5;
}

.topic_group_row:hover{
  background-color:rgba(255, 255, 255, 0.3);
}

.topic_group_count{
  padding:0 16px 16px;
  font-size:14px;
  color:#fff;
  text-align:center;
  font-weight:600;
}

/* Topic Group Grid - wider cards, single column on mobile */
.topic_group_grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  margin-top:24px;
}

/* Deity Shlokas List - Grid layout like deity grid */
.deity_shlokas_list{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
  margin-top:24px;
}

.deity_shloka_card{
  display:flex;
  gap:0; /* No gap between image and text */
  padding:0; /* No padding - image flush with edge */
  background:transparent; /* No background - info area has color */
  border-radius:12px; /* Rounded corners matching screenshot */
  cursor:pointer;
  transition:transform 0.2s ease;
  box-shadow:none;
  align-items:stretch; /* Stretch both sides to same height */
  overflow:hidden; /* Ensure image respects border-radius */
  height:80px; /* Fixed height to match image */
}

.deity_shloka_card:hover{
  transform:translateX(4px);
}

.deity_shloka_image_container{
  width:80px;
  height:80px;
  flex-shrink:0;
  border:none;
  padding:0;
  margin:0;
  overflow:hidden; /* Clip to container for border-radius */
  border-radius:12px 0 0 12px; /* Rounded left corners only - matching screenshot */
  position:relative;
}

.deity_shloka_image{
  width:80px;
  height:80px;
  object-fit:cover; /* Cover container completely */
  object-position:center; /* Center the crop */
  border-radius:12px 0 0 12px; /* Rounded left corners to match container */
  display:block;
  margin:0;
  padding:0;
}

.deity_shloka_info{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px;
  gap:4px;
  border-radius:0 12px 12px 0; /* Rounded right corners only - matching screenshot */
  height:80px; /* Same height as image container */
  box-sizing:border-box;
}

/* Desktop: Ensure Shlokas stays square (80x80) */
.shlokas-favorites .deity_shloka_image_container {
  width: 80px;
  height: 80px;
}

.shlokas-favorites .deity_shloka_image {
  width: 80px;
  height: 80px;
}

/* Desktop: Gita stays square (80x80) */
.gita-favorites .deity_shloka_image_container {
  width: 80px;
  height: 80px;
}

.gita-favorites .deity_shloka_image {
  width: 80px;
  height: 80px;
}

.deity_shloka_title{
  font-size:18px;
  font-weight:600;
  color:#222;
  line-height:1.4;
}

.deity_shloka_preview{
  font-size:14px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.4;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

/* Dark grey background for deity page - override body parchment */
:root[data-theme="light"] .chat-stream.deity-page,
:root[data-theme="light"] .stream.deity-page {
  background: rgba(45, 45, 45, 1) !important; /* Dark grey */
  background-attachment: fixed;
  --sep: #e7e0d3; /* lighter for white background */
}

/* Mobile adjustments - force 2 columns, compact cards for better visibility */
@media (max-width:640px){
  .deity_grid{
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns on mobile */
    gap:12px; /* Reduced gap to fit more cards */
    margin-top:16px;
  }
  
  .explore_hub_grid {
    grid-template-columns: repeat(2, 1fr); /* Force 2 columns on mobile */
  }
  
  .deity_card{
    min-height:160px;
  }
  
  .deity_card_image_container{
    height:120px;
    flex-shrink: 0; /* Prevent flex from expanding */
  }
  
  /* Explore Hub cards - same height on mobile as desktop */
  .explore_hub_card {
    min-height:200px; /* Same as mobile deity_card */
  }
  
  .explore_hub_card .deity_card_image_container {
    height:160px; /* Same as mobile deity_card */
  }
  
  .deity_card_image{
    object-fit: cover;
    object-position: top center; /* Anchor from top so heads don't get cut off */
    padding: 0;
  }
  
  .deity_card_name{
    font-size:14px; /* Slightly smaller font */
    padding:8px 10px 4px; /* Reduced padding */
    line-height:1.2; /* Tighter line height */
  }
  
  .deity_card_count{
    font-size:12px; /* Slightly smaller font */
    padding:0 10px 8px; /* Reduced padding */
    line-height:1.2; /* Tighter line height */
  }
  
  /* Topic Group Grid - single column on mobile with wider cards */
  .topic_group_grid{
    grid-template-columns: 1fr; /* Single column on mobile */
    gap:20px;
    margin-top:16px;
  }
  
  .topic_group_card{
    min-height:200px;
  }
  
  .topic_group_name{
    font-size:18px;
    padding:10px 16px 6px;
    line-height:1.2;
  }
  
  .topic_group_list{
    max-height:300px;
    padding:12px 16px;
    min-height:140px;
  }
  
  .topic_group_row{
    padding:6px 0;
    font-size:15px;
    cursor:pointer !important;
  }
  
  .topic_group_count{
    font-size:13px;
    padding:0 16px 12px;
    line-height:1.2;
  }
  
  .deity_shlokas_list{
    grid-template-columns: 1fr; /* Single column on mobile */
    gap:16px;
  }
  
  .deity_shloka_card{
    padding:0; /* No padding - image flush with edge */
    gap:0; /* No gap between image and text */
    height:60px; /* Fixed height to match image on mobile */
  }
  
  .deity_shloka_image_container{
    width:60px;
    height:60px;
    border-radius:10px 0 0 10px; /* Rounded left corners on mobile */
  }
  
  .deity_shloka_image{
    width:60px;
    height:60px;
    border-radius:10px 0 0 10px; /* Rounded left corners on mobile */
  }
  
  /* Mobile: Ensure Shlokas stays square (60x60) */
  .shlokas-favorites .deity_shloka_image_container {
    width: 60px;
    height: 60px;
  }
  
  .shlokas-favorites .deity_shloka_image {
    width: 60px;
    height: 60px;
  }
  
  /* Mobile: Gita rectangular (80x60 for chapter.verse numbers) */
  .gita-favorites .deity_shloka_image_container {
    width: 80px;
    height: 60px;
  }
  
  .gita-favorites .deity_shloka_image {
    width: 80px;
    height: 60px;
  }
  
  .deity_shloka_info{
    padding:12px;
    height:60px; /* Same height as image container on mobile */
    border-radius:0 10px 10px 0; /* Rounded right corners on mobile */
    box-sizing:border-box;
  }
  
  .deity_shloka_title{
    font-size:16px;
  }
}

/* =========================================================
   Topic page (white, airy)
   ========================================================= */
.topic_card{
  background:transparent;
  border:none;
  border-radius:0;
  padding:24px 0;
  max-width:800px;
  margin:0 auto;
}
/* 1️⃣ Main topic title ("Atman - Soul and Self") */
.topic_page_title {
  margin: 0 0 26px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sep); /* adds the subtle divider */
}

.verse-subtitle {
  font-size: 22px;
  font-weight: 600;
  color: var(--muted);
  display: block;
  margin-top: 12px;
}

/* 2️⃣ Markdown section headings inside topic_html */
.topic_html h2 {
  margin: 46px 0 18px; 
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sep);
}

/* Section headings inside rendered markdown */
.section_head{
  margin:26px 0 12px; font-size:26px; font-weight:800; line-height:1.25;
  padding-bottom:10px; border-bottom:1px solid var(--sep);
}

/* Roomy text */
.topic_html, .subtopic_html{ font-size:17px; line-height:1.8; }
.topic_html p, .subtopic_html p{ margin:14px 0; }

/* H3 inside topic content (e.g., Core Teaching subheads) */
.subtopic_html h3{ font-size:22px; font-weight:800; margin:22px 0 10px; line-height:1.3; }


/* Bulleted lists */
.subtopic_html ul{
  list-style:disc outside; margin:8px 0 16px 26px; padding:0; line-height:1.7;
}
.subtopic_html li{ margin:8px 0; }
.subtopic_html li p{ margin:0; }

/* Bulleted lists in topic_html (reduced indentation for better mobile spacing) */
.topic_html ul {
  list-style: disc outside;
  margin: 8px 0 16px 20px;  /* Reduced from default ~40px to 20px */
  padding: 0;
  line-height: 1.7;
}

.topic_html li {
  margin: 8px 0;
}

.topic_html li p {
  margin: 0;
}

/* Details (View verses) — simple link look, verses one-per-line */
/* --- DETAILS / EXPANDER (used for "View Verses") --- */
.topic_html details {
  margin: 8px 0 14px 20px;     /* align with bullet text (reduced from 2.1rem) */
  background: #fdfcf8;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}

/* “View verses” link styling */
.topic_html summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  list-style: none;
  position: relative;
  padding-left: 18px;
  margin: 0;
}
.topic_html summary::-webkit-details-marker { display: none; }

/* simple arrow */
.topic_html summary::before {
  content: "▶";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 12px;
  transform: translateY(3px);
  transition: transform 0.2s;
}
.topic_html details[open] summary::before {
  content: "▼";
  transform: translateY(3px);
}

/* Verses appear on their own lines */
.topic_html details p {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-line;          /* ← this keeps line breaks in Markdown */
}

/* Code blocks in help and topic pages */
.topic_html code,
.help-page code {
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: #c7254e;
}

.topic_html pre,
.help-page pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  line-height: 1.5;
}

/* Help page video button and container */
.help-video-button {
  display: inline-block;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background-color: #c19a6b;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin: 16px 0;
}

.help-video-button:hover {
  background-color: #b0895a;
}

.help-video-container {
  margin: 24px 0;
  text-align: center;
}

.help-video-container video {
  width: 560px;
  max-width: 100%;
  height: 315px;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 640px) {
  .help-video-container video {
    width: 560px;
    max-width: calc(100vw - 32px);
    height: 315px;
    aspect-ratio: 560 / 315;
  }
}

/* Optional subtle hover tone */
.topic_html summary:hover { text-decoration: underline; }

/* --- BACK LINK (Top of Topic Page) --- */

/* --- Topbar: centered title with single left arrow --- */
.topbar{
  position: relative;
  height: 40px;
  margin: 4px 0 8px;
}

.app_title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  line-height: 40px;
  font-size: 18px;
  font-weight: 800;
}

/* Back chip: no arrow text in HTML; we add one here */
.back_chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px 2px;
  margin: 0;
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.back_chip::before { content: "◀"; margin-right:8px; font-size: 14px; line-height: 1; }
.back_chip:hover { text-decoration: underline; text-underline-offset: 3px; }

/* === Explore top bar: back on left, title centered === */
.topbar .back_chip{
  position: absolute;
  left: 0;
  top: 0;
  font-size: 15px;
  padding: 0;
}

/* =========================================================
   Hint Bar (above input when focused)
   ========================================================= */
.hint-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 6px;
  margin-bottom: 8px;
}

.hint-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--cite);
  color: var(--cite);
  background: var(--cite-ghost);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hint-pill:hover {
  background: var(--cite);
  color: #fff;
  transform: translateY(-1px);
}

.hint-pill:active {
  transform: translateY(0);
}

.glossary_word_title h2 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 8px 0; /* Reduced margin */
  color: var(--fg);
}
.glossary_meaning_line {
  font-size: 20px;
  line-height: 1.5;
  color: var(--fg);
  font-weight: 500;
  margin-top: 4px;
}
.glossary_word_title .compound-components {
  font-size: 0.9em;
  color: var(--muted);
  font-style: normal;
  font-weight: normal;
  margin-left: 0.25em;
}
.glossary_word_title .compound-components em {
  font-style: italic;
  color: var(--fg);
}

.glossary_compound_line {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 16px;
  color: var(--muted);
  font-style: italic;
}

.glossary_separator {
  border: none;
  height: 1px;
  background: var(--sep);
  margin: 16px 0;
}

.glossary_verses {
  margin-top: 16px;
}

.glossary_verse {
  margin: 16px 0;
  padding: 0;
}

.glossary_verse .verse_info {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.glossary_verse .roman_block {
  font-size: 18px;
  line-height: 1.75;
  margin-bottom: 8px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

.glossary_verse .translation_block {
  font-family: 'Droid Serif', Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  line-height: 1.8;
  font-size: 16px;
  color: var(--fg);
}

.verse-separator {
  border: none;
  height: 1px;
  background: var(--sep);
  margin: 16px 0;
}

/* Field visibility toggle bar */
/* Sticky header for explain views */
.explain-sticky-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #2d2d2d; /* Dark grey */
  margin: -22px -16px 0 -16px; /* Extend to edges */
  padding: 0;
  min-height: auto;
  /* Ensure no parchment shows through */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.explain-header-content {
  position: relative;
  padding-left: 16px; /* Align with settings panel checkboxes */
  padding-right: 80px; /* More space for settings icon and label */
  padding-bottom: 8px; /* Reduced padding */
}

.settings-icon-container {
  position: absolute;
  top: 50%; /* Vertically center */
  transform: translateY(-50%); /* Center vertically */
  right: 16px; /* Slightly more from edge to prevent cutoff */
  z-index: 101;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.settings-icon-wrapper {
  background: #3d3d3d; /* Lighter grey background for icon area */
  border-radius: 50%;
  padding: 2px;
}

.settings-icon-btn {
  background: transparent; /* Transparent since wrapper has background */
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.settings-icon-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  white-space: nowrap;
  display: none; /* Hidden on mobile, shown on desktop/iPad */
}

.settings-icon-btn:hover {
  transform: scale(1.05);
}

.settings-icon-btn:active {
  transform: scale(0.95);
}

/* First-time glow indicator */
.settings-icon-wrapper.first-time-glow {
  animation: glow-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 20px rgba(193, 154, 107, 0.6);
}

@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(193, 154, 107, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(193, 154, 107, 0.9);
  }
}

/* Settings panel (collapsible) */
.field-visibility-bar.settings-panel {
  display: none; /* Hidden by default */
  background: #3d3d3d; /* Lighter grey background */
  color: white;
  margin: 0 -16px; /* Extend to edges */
  padding: 16px;
  border-radius: 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: max-height 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

.field-visibility-bar.settings-panel[style*="display: block"] {
  display: inline-flex !important; /* Use inline-flex for wrapping layout when visible */
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 16px;
  animation: slideDown 0.3s ease;
}

/* Desktop: Settings panel extends full width to push deity below */
@media (min-width: 1024px) {
  .field-visibility-bar.settings-panel {
    margin-left: -16px; /* Match card padding */
    margin-right: -16px; /* Match card padding */
    width: calc(100% + 32px); /* Extend full width */
    clear: both; /* Clear float so deity appears below */
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

.field-visibility-bar.settings-panel .field-toggle-label {
  color: white;
}

.field-visibility-bar.settings-panel .font-size-select {
  color: white;
}

.field-visibility-bar.settings-panel .font-size-select select {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.field-visibility-bar.settings-panel .favorite-icon {
  background: transparent;
  border: none;
  padding: 0;
  color: white;
  width: auto;
  height: auto;
}

.field-visibility-bar.settings-panel .favorite-icon svg {
  fill: white;
  stroke: white;
}

.field-visibility-bar.settings-panel .favorite-icon.active svg {
  fill: #c19a6b;
  stroke: #c19a6b;
}

.field-visibility-bar {
  display: inline-flex; /* Fit to content width */
  flex-wrap: wrap;
  justify-content: flex-start; /* Left align */
  gap: 16px; /* Equal gap between items */
  padding: 12px 16px; /* Compact padding left/right */
  margin: 16px 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  border: 1px solid var(--sep);
}

.field-toggle-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fg);
  user-select: none;
}

.field-toggle-label input[type="checkbox"] {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #c19a6b);
}

.field-toggle-label span {
  font-weight: 500;
}

.verse_stack .sanskrit_block,
.verse_stack .roman_block,
.verse_stack .colloquial_block,
.verse_stack .translation_block,
.verse_stack .word_meaning_block {
  line-height: 1.7;
}

.font-size-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
}

.font-size-select select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  background: var(--card);
  color: var(--fg);
}

/* Favorite icon button */
.favorite-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 8px;
}

.favorite-icon:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--surface-1);
}

.favorite-icon.active {
  color: #ffb74a; /* Gold/amber color for favorited */
  border-color: #ffb74a;
  background: rgba(255, 183, 74, 0.1);
}

.favorite-icon.active svg {
  fill: #ffb74a;
  stroke: #ffb74a;
}

.favorite-icon svg {
  width: 20px;
  height: 20px;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.verse_stack.font-compact .sanskrit_block {
  font-size: 20px;
}

.verse_stack.font-compact .roman_block {
  font-size: 17px;
}

.verse_stack.font-compact .colloquial_block {
  font-size: 17px;
}

.verse_stack.font-compact .translation_block {
  font-size: 16px;
}

.verse_stack.font-compact .word_meaning_block {
  font-size: 15px;
}

.verse_stack.font-regular .sanskrit_block {
  font-size: 26px;
}

.verse_stack.font-regular .roman_block {
  font-size: 21px;
}

.verse_stack.font-regular .colloquial_block {
  font-size: 21px;
}

.verse_stack.font-regular .translation_block {
  font-size: 18px;
}

.verse_stack.font-regular .word_meaning_block {
  font-size: 17px;
}

.verse_stack.font-large .sanskrit_block {
  font-size: 30px;
}

.verse_stack.font-large .roman_block {
  font-size: 24px;
}

.verse_stack.font-large .colloquial_block {
  font-size: 24px;
}

.verse_stack.font-large .translation_block {
  font-size: 20px;
}

.verse_stack.font-large .word_meaning_block {
  font-size: 19px;
}

/* Hide fields when toggled off */
.field-hidden {
  display: none !important;
}

@media (max-width: 640px) {
  .field-visibility-bar {
    gap: 12px; /* Slightly smaller gap on mobile */
    padding: 10px 14px; /* Compact padding on mobile */
    justify-content: flex-start; /* Always start from left on mobile */
  }
  
  .field-toggle-label {
    font-size: 13px;
    gap: 4px;
  }
  
  .font-size-select {
    font-size: 13px;
  }
  
  .font-size-select select {
    font-size: 13px;
    padding: 3px 6px;
  }
  
  .verse_stack.font-compact .sanskrit_block {
    font-size: 18px;
  }
  
  .verse_stack.font-compact .roman_block,
  .verse_stack.font-compact .colloquial_block {
    font-size: 16px;
  }
  
  .verse_stack.font-compact .translation_block {
    font-size: 15px;
  }
  
  .verse_stack.font-compact .word_meaning_block {
    font-size: 14px;
  }
  
  .verse_stack.font-regular .sanskrit_block {
    font-size: 24px;
  }
  
  .verse_stack.font-regular .roman_block {
    font-size: 19px;
  }
  
  .verse_stack.font-regular .colloquial_block {
    font-size: 19px;
  }
  
  .verse_stack.font-regular .translation_block {
    font-size: 17px;
  }
  
  .verse_stack.font-regular .word_meaning_block {
    font-size: 16px;
  }
  
  .verse_stack.font-large .sanskrit_block {
    font-size: 27px;
  }
  
  .verse_stack.font-large .roman_block {
    font-size: 22px;
  }
  
  .verse_stack.font-large .colloquial_block {
    font-size: 22px;
  }
  
  .verse_stack.font-large .translation_block {
    font-size: 20px;
  }
  
  .verse_stack.font-large .word_meaning_block {
    font-size: 18px;
  }
}

/* Mobile adjustments for glossary */
@media (max-width:640px) {
  .glossary_word_title h2 {
    font-size: 24px;
  }
  
  .glossary_meaning_line {
    font-size: 18px;
  }
  
  .glossary_verse .roman_block {
    font-size: 17px;
  }
  
  .glossary_verse .translation_block {
    font-size: 15px;
  }
}

/* 1) Put a class on the term-results wrapper (see note below):
      <div class="term_results"> … </div> */

/* Make each verse block look flat (no card/border/background) */
.term_results .section{
  background: transparent;
  border: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

/* Add a subtle separator between consecutive verses */
.term_results .section + .section{
  position: relative;
  margin-top: 12px;          /* a little air above the next item */
  padding-top: 16px;         /* space above the rule */
}
.term_results .section + .section::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;                   /* full-bleed like Explain */
  right: 0;
  height: 1px;
  background: var(--sep);    /* same divider token used in Explain */
}

/* Make translations match Explain (serif + italic) */
.term_results .translation_block,
.term_results .translation{
  font-family: 'Droid Serif', Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  line-height: 1.8;
}
/* =========================================================
   Chat shell
   ========================================================= */
/* Safe area insets - respect status bar and notch */
.chat-shell{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  max-width:100%;
  margin:0;
  padding-top: 0; /* No padding here - html element handles status bar padding */
}

.chat-stream{ 
  display:flex; 
  flex-direction:column; 
  gap:12px; 
  padding:10px 16px 96px 16px;
  flex:1 1 auto;
  background: transparent;
}


/* White background for keyword, topic, deities, and deity pages - override --sep for better contrast */
:root[data-theme="light"] .chat-stream.keyword-page,
:root[data-theme="light"] .chat-stream.topic-page,
:root[data-theme="light"] .chat-stream.deities-page,
:root[data-theme="light"] .chat-stream.deity-page {
  background: rgba(255, 255, 255, 1); /* Fully opaque white */
  background-attachment: fixed;
  --sep: #e7e0d3; /* lighter for white background - applies to all separators */
}
/* Override for deities/deity pages with dark grey */
:root[data-theme="light"] .chat-stream.deities-page,
:root[data-theme="light"] .chat-stream.deity-page {
  background: rgba(45, 45, 45, 1) !important; /* Dark grey */
}

/* CRITICAL: Force transparent background when NOT deity/deities page - highest specificity */
:root[data-theme="light"] .chat-stream:not(.deity-page):not(.deities-page):not(.topic-page):not(.keyword-page):not(.chapter-page) {
  background: transparent !important; /* Override ANY previous backgrounds */
  background-color: transparent !important;
}

/* Chapter pages: semi-transparent white overlay - parchment shows through lightly */
:root[data-theme="light"] .chat-stream.chapter-page {
  background: rgba(255, 255, 255, 0.3); /* Very transparent white - parchment mostly visible */
  background-attachment: fixed;
  --sep: #d0bfa6; /* Darker for parchment visibility - chapter pages are mostly parchment */
}

/* Help page: white background */
:root[data-theme="light"] .chat-stream.help-page {
  background: rgba(255, 255, 255, 1) !important;
  background-attachment: fixed;
  --sep: #d0bfa6; /* Use default parchment separator color - visible on white */
}

/* Default: transparent background so body parchment shows through */
:root[data-theme="light"] .chat-stream:not(.keyword-page):not(.topic-page):not(.chapter-page):not(.deities-page):not(.deity-page):not(.help-page) {
  background: transparent !important; /* Ensure parchment shows through */
  background-attachment: fixed;
  --sep: #d0bfa6; /* darker for parchment visibility */
}

.msg{ border:none; border-radius:0; background:transparent; padding:10px 0 }

/* Composer fixed at bottom */
.chat-input{
  position:sticky; bottom:0; z-index:1000; display:flex; gap:8px;
  padding:10px; background:#333 !important; border-top:none !important;
  backdrop-filter:none !important;
}

/* Desktop - input fixed at bottom */
@media (min-width: 641px) {
  .chat-input {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--bg) !important;
  }
  
  .chat-stream {
    padding-bottom: 150px !important;
    padding-right: 14px;
  }
}
.chat-input input{
  flex:1; padding:14px 18px; border:1px solid var(--border); border-radius:999px; background:var(--card);
  font-size:18px; color:var(--fg);
  outline: none !important;
  box-shadow: none !important;
}

.chat-input input:focus {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
}
.send-btn, .clear-btn{
  width:52px; height:52px; border-radius:999px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--border); cursor:pointer;
}
.send-btn{ background:var(--send); color:var(--send-fg); border:none }
.clear-btn{ background:var(--card); color:var(--clear) }


/* Input highlight when the whole query matches a keyword */
#chatBox.kw-hit {
  font-weight: 700;            /* bold the input text */
  color: var(--fg);            /* keep your theme color */
  border-color: var(--cite);   /* optional: subtle cue using your amber cite color */
}

/* Ensure placeholder text stays normal weight even when input is bold */
#chatBox.kw-hit::placeholder {
  font-weight: 400;            /* Normal weight for placeholder */
}

/* Input highlight when query matches a deity */
#chatBox.deity-match {
  font-weight: 700;            /* bold the input text */
  color: var(--fg);            /* keep your theme color */
}

/* Ensure placeholder text stays normal weight even when input is bold */
#chatBox.deity-match::placeholder {
  font-weight: 400;            /* Normal weight for placeholder */
}

/* =========================================================
   Live Search Styles
   ========================================================= */
.view-btn {
  background: var(--send);
  color: var(--send-fg);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(255, 122, 0, 0.3);
  margin-left: 16px;
}

.view-btn:hover {
  background: #e66a00;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 122, 0, 0.4);
}

.keyword-meaning,
.glossary-meaning {
  font-size: 16px;
  margin: 32px 0;
  color: var(--fg);
}

.keyword-description,
.glossary-description {
  font-size: 14px;
  color: var(--muted);
  margin: 32px 0;
  line-height: 1.4;
}

.separator {
  height: 1px;
  background: var(--border);
  margin: 36px 0;
}

/* Live Search Verse Spacing */
.live-search-verse .sanskrit_block {
  margin-bottom: 20px;
}

.live-search-verse .roman_block {
  margin-bottom: 20px;
}

.live-search-verse .translation_block {
  margin-bottom: 20px;
}

/* Live Search Actions */
.live-search-actions {
  margin-top: 0px;
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Live Search Section Headers */
.section-separator {
  height: 1px;
  background: var(--sep);
  margin: 6px 0 3px 0;
}

.section-header {
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  margin: 0; /* Remove extra margin to gain space */
  /* Removed text-transform: uppercase for better readability of deity names */
  letter-spacing: 0.5px;
}

/* Live Search Items - Clean text style (override .msg styles with higher specificity) */
.msg.live-search-item {
  margin: 3px 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all 0.2s;
}

/* Extra spacing for glossary verse cards */
.glossary_results .msg.live-search-item {
  margin: 12px 0 !important;
}

/* Make clickable items have underline on hover (only title) */
.msg.live-search-item:hover .live-item-title {
  text-decoration: underline;
}

.msg.live-search-item:hover .live-verse-title {
  text-decoration: underline;
}

/* Non-clickable items (glossary) */
.msg.live-search-glossary {
  cursor: default;
}

.msg.live-search-glossary:hover {
  text-decoration: none;
}

.live-item-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
}

/* Topics and Keywords - larger font to distinguish from Glossary */
.live-search-topic .live-item-title,
.live-search-keyword .live-item-title {
  font-size: 19px;
}

/* Container for subtopic content */
.live-subtopic-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Subtitle for subtopics (descriptive_topic) */
.live-item-subtitle {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.4;
  opacity: 0.75;
}

.live-item-preview {
  font-size: 17px;
  font-weight: 400;
  color: var(--fg);
  line-height: 1.4;
  white-space: normal;
  word-wrap: break-word;
}

/* Subtitle for live search results (smaller, non-bold roman text) */
.live-item-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
  white-space: normal;
  word-wrap: break-word;
}

/* Highlighted text in subtitle should be bold (but subtitle itself is not) */
.live-item-subtitle strong {
  font-weight: 700;
  color: var(--fg);
}

.live-item-verse .live-verse-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
}

/* Smaller font for verse titles in glossary page */
.glossary_results .live-verse-title {
  font-size: 15px;
}

.live-item-verse .live-verse-preview {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.4;
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 100%;
  word-wrap: break-word;
}

.live-item-verse .live-verse-preview strong {
  font-weight: 700;
}

/* Live Search Actions */
.live-search-actions {
  margin-top: 0px;
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.view-btn {
  background: var(--send);
  color: var(--send-fg);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(255, 122, 0, 0.3);
  margin-left: 16px;
}

.view-btn:hover {
  background: #e66a00;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(255, 122, 0, 0.4);
}

/* Live Search Verse Spacing */
.live-search-verse .sanskrit_block {
  margin-bottom: 20px;
}

.live-search-verse .roman_block {
  margin-bottom: 20px;
}

.live-search-verse .translation_block {
  margin-bottom: 20px;
}

/* =========================================================
   Mobile
   ========================================================= */
@media (max-width:640px) {
  /* Container adjustments */
  .container{
    margin:0;
    padding:0;
    max-width:100%;
  }
  
  /* Typography */
  h1{font-size:18px}
  .title_card h2{font-size:20px}
  .sanskrit_block{font-size:24px} /* increased from 20px for better readability */
  .roman_block{font-size:19px} /* increased from 17px for better readability */
  .topic_page_title{font-size:24px}
  .section_head{font-size:18px}
  .inline-pill{font-size:12px}
  
  /* Cards and sections */
  .section{
    padding:12px 0;
    margin:8px 0;
    border-radius:0;
  }
  .explain-sticky-header {
    margin: 0 -16px 0 -16px; /* Extend to edges on mobile */
  }
  
  .settings-icon-btn {
    width: 44px;
    height: 44px;
  }
  
  .settings-icon-container {
    top: 50%; /* Vertically center */
    transform: translateY(-50%); /* Center vertically */
    right: 8px; /* Slightly more from edge on mobile */
    gap: 0; /* No gap on mobile (no label) */
  }
  
  .explain-header-content {
    padding-right: 60px; /* Enough space on mobile */
  }
  
  .settings-icon-label {
    display: none; /* Hidden on mobile */
  }
  
  .title_card{
    min-height: auto;
    padding: 10px 20px 2px 0;  /* No left padding - parent has 16px */
    margin: 0;  /* No margin since it's inside sticky header */
  }
  
  .audio-container {
    padding: 8px 20px 6px 0; /* No left padding - parent has 16px */
  }
  
  .field-visibility-bar.settings-panel {
    padding: 12px 16px; /* Slightly less padding on mobile */
  }
  .topic_card{
    padding:24px 0;
  }
  .verse_stack .block{
    padding:12px 0; /* reduced from 20px 0 for tighter spacing between fields */
  }
  
  /* Chat interface */
  .chat-header{ display:none !important; }
  
  .chat-stream{
    padding:0px 16px calc(88px + env(safe-area-inset-bottom)) 16px;
  }
  /* Only apply margin-top in native app (mobile web doesn't need this) */
  .is-native .chat-stream{
    margin-top: 18px; /* Add spacing below status bar */
  }
  
  /* Remove top padding from .msg on mobile - html already handles status bar spacing */
  .msg{
    padding-top: 0 !important;
    padding-bottom: 10px;
  }
  
  /* Gita favorites - Mobile */
  .favorites-header-card.msg {
    padding-top: 0 !important;
    padding-bottom: 0px;
  }
  
  .favorites-header-card .section {
    padding: 10px 0;
    margin: 0px 0;
    border-radius: 0;
  }
  
  
  .chat-input{
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    gap:8px;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-top:none !important;
    background: #333 !important;
    z-index: 1000 !important;
  }
  .chat-input input{
    min-width:0;
    flex:1 1 auto;
    font-size:16px;
    padding:12px 14px;
    border-radius:999px;
  }
  .clear-btn{ display:none; }
  .send-btn{ width:44px; height:44px; border-radius:999px; }
  
  /* Title adjustments */
  .title_card h2{ margin-left:-2px; margin-right:-2px; }
}

/* =========================================================
   Citation Links
   ========================================================= */
.citation-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.citation-link:hover {
  text-decoration: underline;
}

/* =========================================================
   Deity Image Container
   ========================================================= */
/* Mobile: centered, responsive sizing */
.deity-image-container {
  text-align: center;
  position: relative;
  margin: 32px 0 24px 0; /* More top margin to move down below header */
}

/* Mobile: move content down slightly more */
@media (max-width: 640px) {
  .deity-image-container {
    margin-top: 24px; /* Slightly less on mobile */
  }
  
  .verse_stack {
    margin-top: 20px !important; /* Slightly more margin on mobile */
  }
}

.deity-image-container img {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

/* Tablet/iPad: Remove float so content goes below deity, left-align and bigger */
@media (min-width: 641px) and (max-width: 1023px) {
  .deity-image-container {
    float: none; /* Remove float on tablet */
    margin-left: 0;
    margin-right: 0;
    margin-top: 24px;
    margin-bottom: 24px;
    text-align: left; /* Left-align on iPad */
  }
  
  .deity-image-container img {
    width: 100%;
    max-width: 400px; /* Bigger on iPad (was 300px) */
    margin: 0; /* Remove auto margin for left alignment */
  }
  
  .settings-icon-label {
    display: block; /* Show label on iPad */
  }
}

/* Desktop: anchor image to right side of page, bigger size */
@media (min-width: 1024px) {
  .deity-image-container {
    float: right;
    margin-left: 24px;
    margin-bottom: 24px;
    margin-top: 24px; /* More top margin to move down below header */
    margin-right: 20px;
    text-align: center;
  }
  
  .deity-image-container img {
    width: auto; /* Override mobile width: 100% */
    max-width: 540px; /* desktop deity image size */
    display: block;
  }
  
  .settings-icon-label {
    display: block; /* Show label on desktop */
  }
  
  .explain-header-content {
    padding-right: 90px; /* Even more space for label on desktop */
  }
}