/* ============================================================
   RESPONSIVE STYLES
   Media queries for different screen sizes
   ============================================================ */

/* Reel responsive */
@media (max-width:700px){ .reel{ padding:0 var(--space-8); } }
@media (max-width:700px){ .reel-headline{ font-size:var(--font-size-3xl); } }
@media (max-width:700px){ .reel-index{ left:30px; bottom:var(--space-6); } }

/* Hook reel responsive */
@media (max-width:700px){ .reel.hook .hook-headline{ font-size:var(--font-size-5xl); } }

/* Tap reveal reel responsive */
@media (max-width:700px){ .reel.tap-reveal .tap-headline{ font-size:var(--font-size-4xl); } }

/* Quote reel responsive */
@media (max-width:700px){ .reel.quote .quote-text{ font-size:var(--font-size-3xl); } }

/* Formula breakdown reel responsive */
@media (max-width:700px){ .reel.formula-breakdown .formula-display{ font-size:var(--font-size-2xl); } }

/* Surprise reel responsive */
@media (max-width:700px){ .reel.surprise .surprise-hook{ font-size:var(--font-size-3xl); } }
@media (max-width:700px){ .reel.surprise .surprise-text{ font-size:var(--font-size-4xl); } }

/* Comparison reel responsive */
@media (max-width:600px){ .reel.before-after .comparison-container{ grid-template-columns:1fr; } }
@media (max-width:600px){ .reel.comparison .comparison-split{ grid-template-columns:1fr; } }
@media (max-width:600px){ .reel.comparison .vs-badge{ position:relative; top:auto; left:auto; transform:none; margin:var(--space-2) auto; } }

/* Story reel responsive */
@media (max-width:600px){ .reel.story{ grid-template-columns:1fr; } }

/* Puzzle reel responsive */
@media (max-width:600px){ .reel.puzzle .puzzle-options{ grid-template-columns:1fr; } }

/* Common mistake reel responsive */
@media (max-width:600px){ .reel.common-mistake .mistake-container{ grid-template-columns:1fr; } }

/* This or that reel responsive */
@media (max-width:600px){ .reel.this-or-that .tot-container{ grid-template-columns:1fr; } }

/* Conversation sidebar mobile responsive */
@media (max-width: 768px) {
  .conversation-sidebar{
    width:100%; z-index:35; bottom:0;
  }
  #app.with-sidebar .page{ padding-left:0; }
  #app.with-sidebar #tabBar{ left:0; }
}

/* General responsive tweaks */
@media (max-width:600px){
  .msg{ max-width:90%; }
  .chat-header{ font-size:var(--font-size-base); padding:var(--space-3) var(--space-4); }
  .tree-panel{ padding:var(--space-5) var(--space-4); }
}