/* =======================================================
   📱 MOBILE-FOCUSED OVERRIDES FOR VIRTUAL TOUR MODALS
   (Info Modal + Quiz Modal + Assistant)
   ======================================================= */
@media (max-width: 768px) {

  /* ============================
     INFO MODAL (INFOSPOTS)
     ============================ */

  /* Make the dialog smaller and vertical */
  #info-modal .gs-modal__dialog {
    width: 92vw;              /* almost full width, but with margin */
    max-width: 420px;
    max-height: 80vh;
    height: auto;
    border-radius: 12px;
    position: relative;
    display: flex;
    flex-direction: column;   /* image on top, text below */
    overflow: hidden;
  }

  /* Don’t force two equal columns on small screens */
  #info-modal .info-two-column {
    display: block;
  }

  /* Image area */
  #info-modal .info-image {
    width: 100%;
    max-height: 45vh;
    background: #000;
    overflow: hidden;
  }

  /* 🔑 KEY FIX: image should not stretch to the full dialog height */
  #info-modal .info-image img {
    width: 100%;
    height: auto;
    max-height: 45vh;
    object-fit: cover;
    display: block;
  }

  /* Text area */
  #info-modal .info-text {
    padding: 14px 16px 18px;
    background: #fff;
  }

  #info-modal .info-text h2 {
    font-size: 18px;
    margin-bottom: 6px;
  }

  #info-modal .info-body {
    font-size: 13px;
    line-height: 1.5;
    max-height: 26vh;     /* scroll only inside text if mahaba */
    overflow-y: auto;
    text-align: justify;
  }

  /* Portrait variant (IDs 15–20) – same behavior, just reuse sizes */
  #info-modal .gs-modal__dialog.portrait-modal {
    width: 92vw;
    max-width: 420px;
    max-height: 80vh;
  }

  #info-modal .gs-modal__dialog.portrait-modal .info-image img {
    width: 100%;
    height: auto;
    max-height: 45vh;
  }

  #info-modal .gs-modal__dialog.portrait-modal .info-body {
    max-height: 26vh;
  }

  /* ============================
     QUIZ MODAL (VIRTUAL QUIZ)
     ============================ */

  #quiz-modal .gs-modal__dialog.quiz-dialog {
    width: 90vw;
    max-width: 380px;
    max-height: 80vh;
    height: auto;
    border-radius: 12px;
    padding: 16px 18px 20px;
    position: relative;
    overflow: hidden;
  }

  #quiz-modal .quiz-header h2 {
    font-size: 18px;
  }

  #quiz-modal .quiz-mark {
    width: 56px;
    height: 56px;
    font-size: 30px;
  }

  #quiz-modal .quiz-question-text {
    font-size: 14px;
  }

  #quiz-modal .quiz-input {
    width: 100%;
    font-size: 13px;
    padding: 8px 10px;
  }

  #quiz-modal .quiz-mc-container {
    max-width: 360px;
  }

  #quiz-modal .gs-btn {
    font-size: 13px;
    padding: 8px 14px;
  }

  /* Result overlay stays inside the rounded dialog */
  #quiz-modal .quiz-result {
    border-radius: 12px;
  }

  /* ============================
     ASSISTANT BUBBLE (BOTTOM)
     ============================ */

  .tour-assistant,
  #tour-assistant-mirror {
    bottom: 10px;
    left: 10px;
    transform: none;
  }

  .tour-assistant .assistant-dialog,
  #tour-assistant-mirror .assistant-dialog {
    max-width: 310px;
    padding: 8px 10px;
  }

  #assistant-message,
  #assistant-message-mirror {
    font-size: 12px;
  }
}