/* MathCrave Helper AI – consolidated, mobile-first */

/* Base font */
.mathcrave_helper_ai-container {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
    "Apple Color Emoji", "Segoe UI Emoji";
}

/* Subject chip selection */
.subject-item.selected {
  outline: 2px solid rgb(59 130 246);
  background-color: #eff6ff;
  color: #1d4ed8;
}
.dark .subject-item.selected {
  outline-color: #60a5fa;
  background-color: #0b1220;
  color: #93c5fd;
}

/* Drag & drop feedback */
#mathcrave_helper_ai-drop-area.dragover {
  border-color: rgb(59 130 246);
  background-color: #f0f7ff;
}
.dark #mathcrave_helper_ai-drop-area.dragover {
  border-color: #60a5fa;
  background-color: #0b1220;
}

/* Loading spinner */
.spinner {
  border-radius: 9999px;
  animation: mathcrave-spin 1s linear infinite;
}
@keyframes mathcrave-spin { to { transform: rotate(360deg); } }

/* Final concise answer */
#mathcrave_helper_ai-concise-answer { white-space: pre-wrap; }

/* Images never overflow */
#mathcrave_helper_ai-preview-image,
#mathcrave_helper_ai-solution-container img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === Desktop: perfectly balance
d step nav === */
.subject-item{
	display:none !important;
}
/* === MathCrave Step Viewer === */ /* nav like the screenshot */ #mc-step-nav{ display:flex; justify-content:space-between; align-items:center; gap:1rem; width:100%; max-width: 860px; margin-top: .25rem; } .mc-step-btn{ padding:.6rem 1rem; border-radius:.6rem; border:1px solid rgba(148,163,184,.25); background:#0b1220; color:#e5e7eb; cursor:pointer; } .mc-step-btn:hover{ background:#111a2e; } #mc-step-count{ color:#a3adc2; font-size:.9rem; }

/* Subject chips wrap on small screens */
.mathcrave-subjects { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; }
@media (max-width: 640px){
  [id^="mathcrave_helper_ai-subject-"]{ flex:1 1 32%; min-width:110px; max-width:180px; }
}

/* === Step Viewer (mobile-first) === */
#mathcrave_helper_ai-steps-list {
  display:flex; flex-direction:column; align-items:center; gap:1rem;
}

/* Card */
.mc-step{
  box-sizing:border-box;
  width:100%;
  max-width:860px;                 /* desktop cap */
  text-align:center;
  padding:1rem;                    /* tighter on phones */
  background:#0f172a;
  color:#e5e7eb;
  border-radius:.75rem;
  border:1px solid rgba(148,163,184,.25);
  box-shadow:0 6px 22px rgba(0,0,0,.25);
}
.mc-step h3{
  font-size:clamp(1rem, 3.8vw, 1.125rem);
  margin-bottom:.5rem;
  color:#f8fafc;
}
.mc-step p{
  font-size:clamp(.95rem, 3.4vw, 1.0625rem);
  line-height:1.7;
}
.mc-step h3, .mc-step p{ word-break:break-word; overflow-wrap:anywhere; }
.mc-step:not(.is-active){ display:none; }

/* Nav */
#mc-step-nav{
  display:flex; flex-wrap:wrap; gap:.6rem;
  width:100%; max-width:860px;
  margin-top:.25rem;
}
.mc-step-btn{
  padding:.6rem .8rem;
  border-radius:.6rem;
  border:1px solid rgba(148,163,184,.25);
  background:#0b1220; color:#e5e7eb; cursor:pointer;
}
.mc-step-btn:hover{ background:#111a2e; }
#mc-step-count{ color:#a3adc2; font-size:.9rem; }

/* Phone polish (safe-area aware) */
@media (max-width: 480px){
  .mc-step{ padding:1rem; border-radius:14px; }
  #mc-step-nav{
    position:sticky;
    bottom:max(.5rem, env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.65));
    backdrop-filter:blur(2px);
    padding:.5rem; border-radius:12px;
  }
  .mc-step-btn{ flex:1 1 45%; font-size:.95rem; }
  #mc-step-count{ order:3; flex-basis:100%; text-align:center; margin-top:.15rem; }
}

/* Tablet tweaks */
@media (min-width: 481px) and (max-width: 1024px){
  .mc-step{ padding:1.25rem; }
  #mc-step-nav{ max-width:100%; }
}

/* KaTeX: allow horizontal scroll only when needed on tiny screens */
#mathcrave_helper_ai-solution-container .katex-display{
  max-width:100%;
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  margin:.5rem -.5rem;
  padding:0 .5rem .25rem;
}

/* Plot canvas */
canvas.mathcrave_helper_ai-plot {
  width: 100%;
  height: 260px;
  max-height: 260px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}