/* إصلاحات جوال صارمة — تُحمَّل بعد style.css */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

.app, .main, .view, .card, .lesson-main, .hero-copy, .hero-panel,
.subject-card, .lesson-card, .unit-block, .focus-card, .side-stack {
  max-width: 100%;
  min-width: 0;
}

.main {
  width: 100%;
  padding-inline: 12px;
  overflow-x: clip;
}

.lesson-layout,
.hero,
.home-actions,
.subjects-grid,
.cards-grid,
.tools,
.cta-row {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.explain, .bubble, .key-points li, p, h1, h2, h3, .muted, .q, .option {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.diagram-frame {
  overflow-x: auto;
  max-width: 100%;
}
.diagram-frame svg {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100%;
  height: auto;
}

.bottom-nav {
  width: 100%;
  max-width: 100%;
  left: 0;
  right: 0;
  inset-inline: 0;
  overflow: hidden;
}
.bottom-nav button {
  min-width: 0;
  max-width: 100%;
  padding-inline: 2px;
  font-size: 0.62rem;
}
.bottom-nav button span:not(.bn-ico) {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
}

.meta-row, .quick-asks, #orabi-video-picker {
  max-width: 100%;
}

.tools {
  position: static !important;
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.topbar {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.brand {
  min-width: 0;
  flex: 1;
}
.brand div {
  min-width: 0;
  overflow: hidden;
}
.brand-sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  html { font-size: 15px; }
  .hero h1 { font-size: 2.35rem !important; }
  .lesson-main h1 { font-size: 1.15rem !important; }
  .explain { font-size: 0.95rem; line-height: 1.75; }
  .btn { font-size: 0.92rem; padding: 0.8rem 0.85rem; }
  .card, .lesson-main.card { padding: 0.85rem; }
  .stat-grid { gap: 0.4rem; }
  .stat b { font-size: 1.1rem; }
}

@media (max-width: 360px) {
  html { font-size: 14px; }
  .bottom-nav button { font-size: 0.55rem; min-height: 52px; }
  .main { padding-inline: 10px; }
}