/* =======================
   Course Detail — Mobile & Layout Fixes
   ======================= */

/* 0) Safety: box-sizing for predictable sizing */
*, *::before, *::after { box-sizing: border-box; }

/* 1) Rich images should never overflow */
#rich-block img,
.page img,
.textbook-page-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 1rem;
  object-fit: contain;
  border-radius: .25rem;
}

/* 2) Constrain tall images on phones */
@media (max-width: 576px) {
  #rich-block img,
  .page img,
  .textbook-page-content img {
    max-height: 48vh;
  }
}

/* 3) Kill accidental horizontal scroll */
.container, .container-fluid, body, html {
  overflow-x: hidden;
}

/* 4) TTS toolbars & pagination wrap neatly */
.tts-controls,
#page-tts-toolbar,
.tts-nav-btns {
  flex-wrap: wrap !important;
  gap: .5rem .5rem;
}

/* 5) Sidebar: un-stick on tablets/phones so it won’t clash */
@media (max-width: 992px) {
  .col-lg-4 .card.position-sticky {
    position: static !important;
    top: auto !important;
  }
}

/* 6) Chat area: keep typing comfy (reduced heights) */
#chat-body {
  height: 320px;        /* desktop default (reduced from 420) */
  max-height: 320px;
}
#chat-input {
  min-height: 44px;
  max-height: 96px;
  line-height: 1.3;
  resize: none;
}

/* Tablet */
@media (max-width: 768px) {
  #chat-body {
    height: 260px;
    max-height: 260px;
  }
}

/* Phone */
@media (max-width: 576px) {
  #chat-body {
    height: 220px;
    max-height: 220px;
  }
  #chat-input {
    min-height: 40px;
    max-height: 80px;
    padding-top: .5rem;
    padding-bottom: .5rem;
  }
}

/* 7) Video embeds scale */
#video-block .ratio,
#video-block video,
#video-block iframe {
  width: 100%;
  height: 100%;
}

/* 8) Tighten page card spacing on phones */
@media (max-width: 576px) {
  .page { padding: .75rem; margin-bottom: 1rem; }
}

/* 9) Absolute last line of defense for rogue media */
img, video { max-width: 100%; height: auto; }

/* 10) Pagination bubbles a touch smaller on phones */
@media (max-width: 576px) {
  .page-num-btn,
  #tts-prev-page,
  #tts-next-page {
    width: 30px;
    height: 30px;
    font-size: .8rem;
  }
}

/* 11) Ensure main/aside columns don’t cramp each other */
@media (max-width: 992px) {
  main.col-lg-8,
  .col-lg-4 { width: 100%; }
}

/* 12) Move chat box higher (desktop view) */
.col-lg-4 .card.position-sticky {
  top: 20px !important;   /* reduced from 80px */
}

/* 13) TTS status: hide when empty (prevents lone “Error” placeholders) */
#page-tts-status,
.tts-status {
  font-size: .875rem;
  color: #6c757d; /* muted */
}

/* Only show when there is real text */
#page-tts-status:empty,
.tts-status:empty {
  display: none;
}

/* In case some legacy templates render a static error placeholder */
#speak-error,
.tts-error,
.tts-error-placeholder {
  display: none !important;
}