/* ========== MSS Shared Design System Nov 13 3:40PM (cleaned) ========== */

/* ---------- Root tokens ---------- */
:root {
  --mss-bg: #f3f4f6;
  --mss-surface: #ffffff;
  --mss-surface-soft: #f9fafb;
  --mss-border: #e5e7eb;
  --mss-border-subtle: #e5e7eb;
  --mss-border-strong: #d1d5db;

  --mss-text: #111827;
  --mss-muted: #6b7280;
  --mss-heading: #0f172a;

  --mss-primary: #1d4ed8;
  --mss-primary-soft: #eff6ff;

  --mss-danger: #b91c1c;
  --mss-success: #15803d;

  --mss-radius-lg: 16px;
  --mss-radius-md: 10px;
  --mss-radius-pill: 999px;

  --mss-shadow-soft: 0 20px 40px rgba(15, 23, 42, 0.08);
  --mss-shadow-card: 0 18px 40px rgba(15, 23, 42, 0.10);

  --mss-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

/* ---------- Root layout ---------- */

.mss-root {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mss-font-sans);
  background: radial-gradient(circle at top, #e5edff 0, #f3f4f6 40%, #e5e7eb 100%);
  color: var(--mss-text);
}

/* Top bar (admins) */
.mss-top {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(10px);
  background: linear-gradient(
    to bottom,
    rgba(248, 250, 252, 0.98),
    rgba(248, 250, 252, 0.94),
    rgba(248, 250, 252, 0.9)
  );
  border-bottom: 1px solid rgba(209, 213, 219, 0.7);
}

.mss-top-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.mss-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.mss-top-meta {
  text-align: right;
  align-items: flex-end;
}

/* generic row + stack */
.mss-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mss-stack-tight {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* top bar text */
.mss-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mss-heading);
}

.mss-subtext {
  font-size: 0.82rem;
  color: var(--mss-muted);
}

/* admin nav buttons group */
.mss-admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Shell + layout for admin pages */
.mss-shell {
  max-width: 1120px;
  margin: 18px auto 32px;
  padding: 0 18px 24px;
}

.mss-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .mss-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Typography utilities ---------- */

.mss-muted {
  font-size: 12px;
  line-height: 1.4;
  color: #6b7280;
  margin-top: 4px;
}

.mss-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.78rem;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.mss-chip code {
  background: transparent;
  padding: 0;
}

/* ---------- Cards ---------- */

.mss-card {
  background: var(--mss-surface);
  border-radius: var(--mss-radius-lg);
  border: 1px solid rgba(209, 213, 219, 0.7);
  box-shadow: var(--mss-shadow-card);
  padding: 16px 18px 18px;
}

.mss-card-header {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mss-border-subtle);
  margin-bottom: 12px;
}

.mss-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mss-heading);
  display: flex;
  align-items: center;
  gap: 6px;
}

.mss-card-subtitle {
  margin-top: 3px;
  font-size: 0.8rem;
  color: var(--mss-muted);
}

/* ---------- Buttons ---------- */

.mss-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 7px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  background: #e5e7eb;
  color: #111827;
  cursor: pointer;
  user-select: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.08s ease,
    box-shadow 0.12s ease;
  white-space: nowrap;
}

.mss-btn:hover {
  background: #d1d5db;
}

.mss-btn:active {
  transform: translateY(1px);
  box-shadow: none;
}

.mss-btn[disabled] {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
  transform: none;
}

.mss-btn-primary {
  background: var(--mss-primary);
  border-color: var(--mss-primary);
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
}

.mss-btn-primary:hover {
  background: #1d4fd8;
  border-color: #1d4fd8;
}

.mss-btn-ghost {
  background: #ffffff;
  border-color: var(--mss-border);
  color: var(--mss-text);
}

.mss-btn-ghost:hover {
  background: #f9fafb;
  border-color: var(--mss-border-strong);
}

.mss-btn-wide {
  width: 100%;
  justify-content: center;
}

.mss-btn-small {
  padding: 4px 10px;
  font-size: 0.8rem;
}

.mss-btn-pill {
  border-radius: var(--mss-radius-pill);
}

/* ---------- Form fields ---------- */

.mss-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.mss-field-row {
  display: flex;
  gap: 10px;
}

.mss-field-half {
  flex: 1;
}

.mss-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mss-heading);
}

.mss-input,
.mss-textarea,
.mss-select {
  width: 100%;
  border-radius: 11px;
  border: 1px solid var(--mss-border);
  padding: 7px 10px;
  font-size: 0.85rem;
  font-family: var(--mss-font-sans);
  background: var(--mss-surface-soft);
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

.mss-input:focus,
.mss-textarea:focus,
.mss-select:focus {
  border-color: var(--mss-primary);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
  background: #ffffff;
}

.mss-textarea {
  resize: vertical;
  min-height: 80px;
}

/* file input is usually hidden and driven by button */
.mss-input-file {
  font-size: 0.8rem;
}

/* File upload control */
.mss-file-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.mss-file-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #f3f4f6;
  font-size: 13px;
  font-weight: 500;
  color: #111827;
  cursor: pointer;
  white-space: nowrap;
}

.mss-file-btn input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mss-file-label {
  font-size: 13px;
  color: #6b7280;
}

/* ---------- Sections (accordion-style) ---------- */

.mss-section {
  border-radius: 14px;
  border: 1px solid var(--mss-border-subtle);
  margin-bottom: 10px;
  background: #f9fafb;
  overflow: hidden;
}

.mss-section[open] {
  background: #ffffff;
}

.mss-section-header {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--mss-heading);
}

.mss-section-header::-webkit-details-marker {
  display: none;
}

.mss-section-body {
  padding: 10px 11px 12px;
  border-top: 1px solid var(--mss-border-subtle);
  background: #ffffff;
}

.mss-chevron {
  display: inline-block;
  font-size: 0.7rem;
  transform-origin: center;
  transition: transform 0.15s ease;
}

.mss-section[open] > .mss-section-header .mss-chevron {
  transform: rotate(90deg);
}

.mss-pill {
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  background: #f3f4f6;
}

.mss-pill-soft {
  background: #ecfdf3;
  color: #166534;
  border-color: #bbf7d0;
}

/* ---------- Logo well ---------- */

.mss-logo-well {
  width: 120px;
  height: 120px;
  border-radius: 20px;
  border: 1px dashed var(--mss-border-strong);
  background: repeating-linear-gradient(
      45deg,
      #f9fafb,
      #f9fafb 6px,
      #f3f4f6 6px,
      #f3f4f6 12px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  overflow: hidden;
}

.mss-logo-well img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

/* ---------- Lists ---------- */

.mss-list {
  margin: 4px 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: var(--mss-text);
}

.mss-list li {
  margin-bottom: 2px;
}

/* ---------- Actions bottom ---------- */

.mss-actions-bottom {
  margin-top: 12px;
}

/* ---------- Editable flag "pill" checkboxes (ConfigAdmin) ---------- */

.mss-pill-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.mss-pill-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 10px;
  border-radius: var(--mss-radius-pill);
  border: 1px solid var(--mss-border-strong);
  background: var(--mss-surface-soft);
  color: var(--mss-text);
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.mss-pill-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid var(--mss-border-strong);
  background: #fff;
  display: inline-block;
  position: relative;
  margin: 0;
}

.mss-pill-checkbox input[type="checkbox"]:checked {
  background: var(--mss-primary);
  border-color: var(--mss-primary);
}

.mss-pill-checkbox input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 2px 3px 3px 2px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(35deg);
}

.mss-pill-checkbox span {
  font-size: 13px;
  white-space: nowrap;
}

/* ========== Preview panel (WidgetAdmin) ========== */

.mss-preview-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mss-preview-card {
  border-radius: 18px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: radial-gradient(circle at top left, #eff6ff 0, #ffffff 42%);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18);
  padding: 16px 16px 18px;
}

.mss-preview-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.mss-preview-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #e5e7eb;
  object-fit: contain;
}

.mss-preview-brand {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mss-heading);
}

.mss-preview-counter {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mss-muted);
  margin-top: 3px;
}

/* Used by both WidgetAdmin preview and live Widget runtime */
.mss-preview-question,
.mss-widget-question {
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 0.94rem;
  line-height: 1.4;
  color: var(--mss-text);
}

.mss-preview-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.mss-preview-pill {
  border-radius: 999px;
  border-color: var(--mss-border);
  background: #ffffff;
}

.mss-preview-pill:hover {
  background: #f3f4f6;
}

.mss-preview-actions {
  border-radius: 14px;
  border: 1px solid var(--mss-border-subtle);
  background: var(--mss-surface-soft);
  padding: 10px;
}

.mss-preview-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
}

.mss-preview-recbar {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.mss-preview-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
}

.mss-preview-footer {
  margin-top: 8px;
  border-top: 1px dashed var(--mss-border-subtle);
  padding-top: 6px;
  font-size: 0.78rem;
  color: var(--mss-muted);
}

/* ========== Widget-specific styles (Widget.html) ========== */

/* Header row in the widget */
.mss-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.mss-logo {
  width: 54px;
  height: 54px;
  object-fit: contain;
  background: #e5e7eb;
  border-radius: 14px;
}

/* Question text area */
.mss-widget-question {
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 6px 0 12px;
}

/* Progress / logging UI */
.mss-resultswrap {
  margin-top: 10px;
}

.mss-line {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #1d4ed8, #e5e7eb);
  width: 0%;
  transition: width 0.2s ease;
  margin-top: 4px;
  margin-left: auto;
  margin-right: auto;
}

.mss-logstatus {
  font-size: 12px;
  text-align: center;
  margin-top: 6px;
  color: #6b7280;
}

.mss-logstatus.ok {
  color: #16a34a;
}

.mss-logstatus.err {
  color: #dc2626;
}

.mss-status {
  margin-top: 14px;
  font-size: 0.8rem;
  color: #6b7280;
}

.mss-status.ok {
  color: #15803d;
}

.mss-status.warn {
  color: #b91c1c;
}

/* Debug panel */
.mss-debug {
  display: none;
  margin-top: 10px;
}

.mss-debug pre.mss-results {
  max-height: 260px;
  overflow: auto;
  font-size: 0.75rem;
  background: #0b1120;
  color: #e5e7eb;
  padding: 10px;
  border-radius: 8px;
}

/* Wrapper for widget page */
.mss-widget-shell {
  width: 100%;
  max-width: 860px;
}

.mss-widget-shell .mss-card {
  padding: 24px 28px 26px;
}

/* Centered navigation row */
.mss-nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 10px 0 14px;
}

/* Buttons have consistent width for balance */
.mss-nav-row .mss-btn {
  min-width: 110px;
  padding: 8px 22px;
  font-size: 14px;
  line-height: 1.2;
  vertical-align: middle;
}

/* Hide Previous cleanly without breaking centering */
.mss-nav-row #prevBtn[disabled],
.mss-nav-row #prevBtn[style*="display:none"] {
  visibility: hidden;
  pointer-events: none;
}

/* Always keep the submit button visible (even if disabled) */
#submitBtn {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Basic page backgrounds / themes */
body.mss {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mss-font-sans);
  background: radial-gradient(circle at top, #dbeafe 0, #f1f5f9 50%, #e2e8f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #111827;
}

body.mssVoxSky {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mss-font-sans);
  background: radial-gradient(
    circle at 50% -10%,
    #2563eb 0%,
    #eff6ff 30%,
    #f3f4f6 80%,
    #e5e7eb 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #111827;
}

body.mssVoxAurora {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mss-font-sans);
  background: radial-gradient(
    circle at top,
    #2563eb 0%,
    #e0f2fe 35%,
    #f3f4f6 75%,
    #e5e7eb 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  color: #111827;
}

body.mssMorningSky {
  background: linear-gradient(
    180deg,
    #dbeafe 0%,
    #f0f9ff 40%,
    #fefce8 80%,
    #f9fafb 100%
  );
  color: #111827;
}

.shell {
  width: 100%;
  max-width: 900px;
}

.mss-card {
  box-shadow: 0 30px 50px rgba(37, 99, 235, 0.08);
}

/* ========== Dashboard (Score report) ========== */

.mss-dashboard-shell {
  max-width: 900px;
  margin: 18px auto 24px;
  padding: 0 18px 24px;
}

/* Header row: title + CEFR pill */
.mss-dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.mss-dashboard-score-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.75rem;
  background: var(--mss-primary-soft);
  color: var(--mss-primary);
  border: 1px solid rgba(191, 219, 254, 0.9);
}

/* Main grid: left summary, right chart */
.mss-dashboard-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 18px;
}

.mss-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mss-dashboard-metric-card {
  border-radius: 12px;
  border: 1px solid var(--mss-border-subtle);
  background: var(--mss-surface-soft);
  padding: 10px 12px;
}

.mss-dashboard-metric-label {
  font-size: 0.8rem;
  color: var(--mss-muted);
  margin-bottom: 4px;
}

.mss-dashboard-metric-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--mss-heading);
}

.mss-dashboard-metric-sub {
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--mss-muted);
}

/* Chart card (CSS-only bar chart) */
.mss-dashboard-chart-card {
  border-radius: 12px;
  border: 1px solid var(--mss-border-subtle);
  background: #ffffff;
  padding: 10px 12px 12px;
}

.mss-dashboard-chart-bars {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mss-dashboard-chart-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--mss-muted);
}

.mss-dashboard-chart-label {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
}

.mss-dashboard-chart-track {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--mss-surface-soft);
  overflow: hidden;
}

.mss-dashboard-chart-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--mss-primary);
  width: 0%;
  transition: width 0.4s ease;
}

.mss-dashboard-chart-score {
  width: 32px;
  text-align: right;
  font-size: 0.78rem;
  color: var(--mss-heading);
}

/* Transcript / WPM block */
.mss-dashboard-transcript {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--mss-border-subtle);
  font-size: 0.8rem;
}

.mss-dashboard-transcript pre {
  margin: 6px 0 0;
  font-family: var(--mss-font-sans);
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.78rem;
  line-height: 1.45;
  background: #0b1120;
  color: #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
}

/* Tiny meta row under transcript */
.mss-dashboard-meta {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--mss-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
}

/* Responsive tuning for Dashboard (mobile-first) */
@media (max-width: 800px) {
  .mss-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .mss-dashboard-chart-card {
    order: -1;
  }

  .mss-dashboard-metrics {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mss-dashboard-metric-value {
    font-size: 1rem;
  }

  .mss-dashboard-metric-label {
    font-size: 0.85rem;
  }

  .mss-dashboard-chart-label {
    width: 48px;
    font-size: 0.75rem;
  }

  .mss-dashboard-chart-track {
    height: 8px;
  }

  .mss-dashboard-shell {
    padding-inline: 10px;
  }
}

/* Handle very narrow screens (e.g., iPhone SE) */
@media (max-width: 400px) {
  .mss-dashboard-chart-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .mss-dashboard-chart-label {
    width: auto;
    text-align: left;
  }

  .mss-dashboard-chart-score {
    align-self: flex-end;
  }
}

/* Score dialog layout */
.mss-score-dialog {
  max-width: min(720px, 100%);
  width: 100%;
  box-sizing: border-box;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.mss-score-dialog-inner {
  max-height: min(80vh, 580px);
  overflow-y: auto;
}

/* Transcript box */
.tx-card {
  border-radius: 14px;
  border: 1px solid var(--mss-border-subtle);
  background: var(--mss-surface-soft);
  padding: 10px 12px;
  margin-top: 8px;
}

.tx-body {
  max-height: 260px;
  overflow-y: auto;
}

.tx-body p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Bigger chevron (used in some accordions) */
.mss-chevron {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0.85;
  user-select: none;
  pointer-events: none;
}

/* Help hint text */
.mss-help-text {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.mss-actions-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mss-widget-logo {
  width: 32px;
  height: 32px;
}

/* Help indicator states in admin rows */
.row[data-has-help="1"] .idx {
  border-color: #10b981;
}

/* Help button visual states */
.row[data-has-help="1"] .btn[data-act="help"] {
  background: #bbf7d0;
  border-color: #16a34a;
  color: #166534;
}

.row[data-has-help="0"] .btn[data-act="help"] {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

/* Optional little dot badge when help exists */
.row[data-has-help="1"] .btn[data-act="help"]::after {
  content: "•";
  margin-left: 4px;
  font-size: 14px;
}

/* ========== Help slider + modal ========== */

.mss-help-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  font-size: 0.85rem;
  color: #4b5563;
}

.mss-help-bar input[type="range"] {
  flex: 1;
}

/* Help modal, paired with [hidden] attribute */
.mss-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.45);
  z-index: 50;
}

.mss-modal[hidden] {
  display: none;
}

.mss-modal-inner {
  background: #ffffff;
  border-radius: 16px;
  padding: 16px 18px 14px;
  max-width: 640px;
  width: min(640px, 95vw);
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
}

.mss-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mss-modal-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.mss-modal-close {
  border: none;
  background: transparent;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.mss-help-content {
  font-size: 0.9rem;
  color: #374151;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 6px;
}

.mss-modal-footer small {
  font-size: 0.75rem;
  color: #6b7280;
}

/* Controls row inside modal (for "lots of help" mode) */
.mss-modal-controls {
  margin-top: 10px;
  display: none; /* shown only in "lots of help" */
  align-items: center;
  gap: 8px;
}

/* -------------------------------------------------------
   MSS Widget — Help Modal (Final Version)
   ------------------------------------------------------- */

/* Overlay behind modal */
#mssHelpOverlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.40) !important;
  backdrop-filter: blur(3px);
  z-index: 9998 !important;
  display: none;
}

/* Modal container */
#mssHelpModal {
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(680px, 95vw) !important;
  max-height: 80vh !important;

  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 32px rgba(0,0,0,0.18) !important;
  z-index: 9999 !important;

  display: none;
  overflow: hidden; /* header fixed, body scrolls */
}

/* Modal header */
#mssHelpHeader {
  padding: 18px 24px !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  border-bottom: 1px solid #e5e7eb !important;
  color: #111 !important;
  background: #fafafa !important;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Close button */
#mssHelpClose {
  cursor: pointer !important;
  font-size: 24px !important;
  line-height: 1 !important;
  padding: 4px 10px;
  border-radius: 6px;
  color: #555;
}
#mssHelpClose:hover {
  background: #e5e5e5;
}

/* Modal content area */
#mssHelpBody {
  padding: 20px 24px !important;
  overflow-y: auto !important;
  max-height: calc(80vh - 70px) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: #222 !important;
}

/* Ensure hidden attribute works everywhere */
[hidden] {
  display: none !important;
}

/* =========================================================
   MSS Widget.html – compatibility styles
   Map current widget markup classes to the design system.
   ========================================================= */

/* Root widget card */
#mss-widget-root {
  box-sizing: border-box;
  max-width: 860px;
  margin: 32px auto;
  padding: 22px 24px 20px;
  border-radius: 20px;
  border: 1px solid rgba(209, 213, 219, 0.9);
  background: radial-gradient(circle at top left, #eff6ff 0, #ffffff 45%);
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.18);
  font-family: var(--mss-font-sans);
}

/* Header / branding row */
.mss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.mss-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mss-logo-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mss-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mss-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mss-brand {
  font-size: 1rem;
  font-weight: 700;
  color: var(--mss-heading);
}

.mss-powered {
  font-size: 0.78rem;
  color: var(--mss-muted);
}

.mss-header-right {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--mss-muted);
}

/* Main layout */
.mss-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Question card */
.mss-question-card {
  border-radius: 14px;
  border: 1px solid var(--mss-border-subtle);
  background: var(--mss-surface-soft);
  padding: 12px 14px;
}

.mss-question-text {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--mss-text);
}

/* Controls wrapper */
.mss-controls {
  border-radius: 16px;
  border: 1px solid var(--mss-border-subtle);
  background: #ffffff;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Nav row */
.mss-nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}

/* Record row */
.mss-record-row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

/* Upload row */
.mss-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.mss-upload-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--mss-border);
  padding: 5px 12px;
  background: #f9fafb;
  cursor: pointer;
}

.mss-file-input {
  display: none;
}

.mss-clear-file {
  font-size: 0.8rem;
}

.mss-file-badge {
  font-size: 0.78rem;
  color: var(--mss-muted);
}

/* Timer + recording state */
.mss-timer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.82rem;
}

.mss-rec-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mss-rec-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #d1d5db;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

.mss-rec-dot.on {
  background: #ef4444;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.18);
  transform: scale(1.05);
}

.mss-rec-state {
  font-size: 0.8rem;
  color: #4b5563;
}

.mss-timer {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 0.9rem;
}

/* Player */
.mss-player-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mss-player {
  width: 100%;
}

.mss-length-hint {
  font-size: 0.78rem;
  color: #6b7280;
}

/* Submit row */
.mss-submit-row {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

/* Help row */
.mss-help-row {
  margin-top: 10px;
  border-radius: 12px;
  border: 1px dashed var(--mss-border-subtle);
  background: #f9fafb;
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.82rem;
  color: #4b5563;
}

.mss-help-left {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.mss-help-label-prefix {
  font-weight: 500;
}

.mss-help-slider {
  flex: 1;
}

.mss-help-label {
  font-weight: 500;
  min-width: 80px;
}

.mss-help-right {
  display: flex;
  align-items: center;
}

/* Footer status */
.mss-footer {
  margin-top: 12px;
}

.mss-status {
  font-size: 0.8rem;
  color: #6b7280;
}

/* Small viewport tweaks */
@media (max-width: 640px) {
  #mss-widget-root {
    margin: 18px auto;
    padding-inline: 16px;
  }
  .mss-nav-row {
    flex-wrap: wrap;
  }
  .mss-record-row {
    flex-wrap: wrap;
  }
  .mss-help-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Remove any accidental blur effects */
* {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}
/* Keep the widget surface neutral, no tint */
.mss-widget-shell,
.mss-widget-card {
  background-color: #f9fafb !important;  /* or your preferred neutral */
}

/* Remove the global blue “wash” from help overlays */
.mss-help-overlay,
.mss-help-tint,
.help-overlay,
.help-tint {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  pointer-events: none; /* make sure it can't grab clicks */
}

/* Make Help panel exactly the same width as the widget card */

.mss-help-panel {
  width: 95vw;
  max-width: var(--mss-widget-width, 980px);
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
  box-sizing: border-box;
}
/* If the widget uses a different width, match that */
.mss-widget-card,
.mss-widget-shell {
  max-width: 980px;
}
#helpModal.mss-help-modal {
  position: relative !important;      /* 👈 anchor in the normal flow */
  left: auto !important;
  top: auto !important;
  transform: none !important;

  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;          /* center */
  padding: 0 !important;
  box-sizing: border-box;
}
#helpOverlay {
  display: none !important;
}

/* ===========================================
   Inline Help + Answer Panel (Nov 17 2025)
   =========================================== */

/* Utility: hidden */
.hidden {
  display: none !important;
}

/* HELP PANEL -------------------------------- */
.mss-help-panel {
  background: var(--mss-surface, #ffffff);
  border: 1px solid var(--mss-border, #e5e7eb);
  border-radius: 10px;
  padding: 16px;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  overflow: hidden;
}

/* When collapsed after a submission */
.mss-help-panel.mss-help-collapsed {
  max-height: 120px;
  opacity: 0.65;
  backdrop-filter: none; /* explicitly no blur */
}

/* Help text body */
.mss-help-body {
  font-size: 0.95rem;
  line-height: 1.45;
  margin-top: 8px;
  color: var(--mss-text, #111827);
}

/* ANSWER PANEL (dashboard inside) ----------- */
.mss-answer-panel {
  background: var(--mss-surface, #ffffff);
  border: 1px solid var(--mss-border, #e5e7eb);
  border-radius: 10px;
  padding: 0;
  margin-top: 16px;
  overflow: hidden;
}

/* Header inside inline answer panel */
.mss-answer-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--mss-surface-soft, #f9fafb);
  border-bottom: 1px solid var(--mss-border-subtle, #e5e7eb);
}

.mss-answer-title {
  font-weight: 600;
  color: var(--mss-heading, #0f172a);
}

/* Link-style button */
.mss-link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--mss-primary, #1d4ed8);
  cursor: pointer;
  font-size: 0.9rem;
  text-decoration: underline;
}

.mss-link-button:hover {
  opacity: 0.75;
}

/* Optional spacing adjust when answer is visible */
.mss-has-answer .mss-answer-panel {
  margin-top: 12px;
}

/* ==========================================================
   MSS Widget v1.1 – Base layout & components
   Scoped to #mss-widget-root to avoid collisions
   ========================================================== */

#mss-widget-root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Segoe UI", sans-serif;
  color: #111827;
  background: transparent;
}

#mss-widget-root .mss-widget-shell {
  max-width: 960px;
  margin: 24px auto;
  padding: 16px;
  background: #f3f4f6;
  border-radius: 18px;
}

/* Header */

#mss-widget-root .mss-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

#mss-widget-root .mss-widget-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

#mss-widget-root .mss-widget-logoWrap {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#mss-widget-root .mss-widget-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#mss-widget-root .mss-widget-titleBlock {
  display: flex;
  flex-direction: column;
}

#mss-widget-root .mss-widget-title {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

#mss-widget-root .mss-widget-subtitle {
  font-size: 13px;
  color: #6b7280;
}

#mss-widget-root .mss-widget-meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #9ca3af;
}

#mss-widget-root .mss-widget-counter {
  white-space: nowrap;
}

/* Instructions */

#mss-widget-root .mss-widget-instructions {
  margin-bottom: 12px;
}

#mss-widget-root .mss-widget-instructionsText {
  font-size: 13px;
  color: #4b5563;
}

/* Question card */

#mss-widget-root .mss-widget-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#mss-widget-root .mss-widget-questionCard {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 0 0 1px #e5e7eb;
}

#mss-widget-root .mss-widget-questionBody {
  font-size: 15px;
  line-height: 1.5;
  color: #111827;
}

/* Paragraph spacing inside questions */
#mss-widget-root .mss-widget-questionBody p {
  margin: 0 0 8px;
}

#mss-widget-root .mss-widget-questionBody p:last-child {
  margin-bottom: 0;
}

/* Help */

#mss-widget-root .mss-widget-helpRow {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #e5e7eb33;
}

#mss-widget-root .mss-widget-helpLabelGroup {
  font-size: 13px;
  color: #4b5563;
}

#mss-widget-root .mss-widget-helpSliderWrap {
  padding: 0 4px;
}

#mss-widget-root .mss-widget-helpSlider {
  width: 100%;
}

#mss-widget-root .mss-widget-helpButton {
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  padding: 6px 12px;
  cursor: pointer;
}

/* Controls */

#mss-widget-root .mss-widget-controls {
  background: #ffffff;
  border-radius: 18px;
  padding: 14px 16px 16px;
  box-shadow: 0 0 0 1px #e5e7eb;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#mss-widget-root .mss-widget-recRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}

#mss-widget-root .mss-widget-recStatus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#mss-widget-root .mss-widget-recDot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #d1d5db;
}

#mss-widget-root .mss-widget-recDot.on {
  background: #ef4444;
}

#mss-widget-root .mss-widget-recText {
  color: #4b5563;
}

#mss-widget-root .mss-widget-timer {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: #111827;
}

/* Button helpers */

#mss-widget-root .mss-widget-btnRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

#mss-widget-root .mss-widget-btnGroup {
  display: flex;
  gap: 8px;
  justify-content: center;
}

#mss-widget-root .mss-widget-btn {
  border-radius: 999px;
  border: 1px solid #d1d5db;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 500;
  background: #ffffff;
  cursor: pointer;
  white-space: nowrap;
}

#mss-widget-root .mss-widget-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

#mss-widget-root .mss-widget-btn.mss-primary {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #ffffff;
}

#mss-widget-root .mss-widget-btn.mss-secondary {
  background: #e5e7eb;
  border-color: #d1d5db;
}

#mss-widget-root .mss-widget-btn.mss-ghost {
  background: transparent;
}

#mss-widget-root .mss-widget-btn.mss-textBtn {
  background: transparent;
  border-color: transparent;
  color: #4b5563;
}

/* Upload row */

#mss-widget-root .mss-widget-uploadRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

#mss-widget-root .mss-upload-label {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px dashed #d1d5db;
  padding: 6px 12px;
  cursor: pointer;
  background: #f9fafb;
}

#mss-widget-root .mss-upload-label input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

#mss-widget-root .mss-widget-fileBadge {
  color: #4b5563;
}

/* Player */

#mss-widget-root .mss-widget-playerWrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

#mss-widget-root .mss-widget-player {
  width: 100%;
}

#mss-widget-root .mss-widget-lengthHint {
  font-size: 12px;
  color: #6b7280;
}

/* Submit row + spinner */

#mss-widget-root .mss-widget-submitRow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

#mss-widget-root .mss-spinner {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid #e5e7eb;
  border-top-color: #1d4ed8;
  animation: mss-spin 0.75s linear infinite;
}

#mss-widget-root .mss-hidden {
  display: none !important;
}

@keyframes mss-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Footer status */

#mss-widget-root .mss-widget-footer {
  margin-top: 12px;
}

#mss-widget-root .mss-widget-status {
  font-size: 13px;
  color: #6b7280;
}

/* Inline dashboard */

#mss-widget-root .mss-dashboard {
  margin-top: 18px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 0 0 1px #e5e7eb;
  padding: 14px 16px 16px;
}

#mss-widget-root .mss-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

#mss-widget-root .mss-dashboard-title {
  font-size: 14px;
  font-weight: 600;
}

#mss-widget-root .mss-dashboard-body {
  min-height: 200px;
}

/* Collapsed states controlled by JS */
#mss-widget-root .mss-dashboard-hidden {
  display: none;
}

/* Responsive tweaks */

@media (max-width: 640px) {
  #mss-widget-root .mss-widget-shell {
    margin: 16px auto;
    padding: 12px;
  }

  #mss-widget-root .mss-widget-header {
    flex-direction: column;
    align-items: flex-start;
  }

  #mss-widget-root .mss-widget-btnRow {
    grid-template-columns: 1fr;
  }

  #mss-widget-root .mss-widget-btnGroup {
    justify-content: stretch;
  }

  #mss-widget-root .mss-widget-btnGroup .mss-widget-btn {
    flex: 1;
  }
}

.portal-warning-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.portal-warning-backdrop.hidden {
  display: none;
}

.portal-warning-modal {
  background: #ffffff;
  padding: 24px;
  width: 360px;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.18);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.portal-warning-modal .modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #b91c1c;
  margin-bottom: 12px;
}

.portal-warning-modal .modal-message {
  font-size: 15px;
  color: #374151;
  margin-bottom: 20px;
}

.portal-warning-modal .modal-btn {
  background: #2563eb;
  color: white;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
}

.portal-warning-modal .modal-btn:hover {
  background: #1e4ed8;
}
/* Force SchoolPortal into a single-column stacking layout */
#portal-root,
.mss-portal,
.mss-layout,
.portal-main {
  display: block !important;
}
/* ===== Dashboard picker modal – full-screen-ish layout ===== */

.portal-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 23, 42, 0.55); /* soft dark overlay */
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-modal {
  background: var(--mss-surface);
  border-radius: 1.5rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  max-width: 96vw;
  width: 1120px;              /* nice desktop width */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.portal-modal-header {
  padding: 1.25rem 1.75rem 0.75rem;
  border-bottom: 1px solid var(--mss-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-modal-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--mss-heading);
}

.portal-modal-close {
  border: none;
  background: transparent;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  color: var(--mss-muted);
}

.portal-modal-body {
  padding: 1rem 1.75rem 1.25rem;
  flex: 1;                               /* take all remaining height */
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 0;                         /* allow iframe to flex */
}

/* Row with label + dashboard select */
.portal-field-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.portal-field-row .portal-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--mss-muted);
}

.portal-field-row .portal-select {
  min-width: 220px;
}

/* Frame wrapper fills the rest of the modal body */
.portal-dashboard-frame-wrap {
  flex: 1;
  min-height: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--mss-surface-soft);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
}

/* Let the dashboard use ALL the space */
.portal-dashboard-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Footer pinned to bottom, buttons right-aligned */
.portal-modal-footer {
  padding: 0.75rem 1.75rem 1.25rem;
  border-top: 1px solid var(--mss-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* Small-screen tweak */
@media (max-width: 768px) {
  .portal-modal {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }

  .portal-modal-body {
    padding-inline: 1rem;
  }
}

/* =======================================================================
   GENERIC PORTAL MODALS 
   (Transcript, Prompt, Delete Confirm, etc.)
   ======================================================================= */

.portal-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.portal-modal.hidden {
  display: none;
}

.portal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(4px);
}

/* Main container for normal modals */
.portal-modal-dialog {
  position: relative;
  z-index: 1001;
  background: #ffffff;
  border-radius: 1.25rem;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
  padding: 1.5rem 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
}

/* Header */
.portal-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.portal-modal-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--mss-heading);
}

.portal-modal-close {
  margin-left: 0.25rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--mss-muted);
}

.portal-modal-close:hover {
  color: var(--mss-heading);
}

/* Body */
.portal-modal-body {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Footer */
.portal-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mss-border-subtle);
}

/* Lock scroll when modals open */
body.portal-modal-open {
  overflow: hidden;
}


/* =======================================================================
   JONNY IVE SIGNATURE DASHBOARD MODAL 
   (For dashboard preview only)
   ======================================================================= */

#dashboardModal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.32);
  display: none;                      /* opened via JS */
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

#dashboardModal.active {
  display: flex;
}

.dashboard-modal-shell {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main dialog wrapper, 95% of viewport */
.dashboard-modal-dialog {
  width: 95vw;
  height: 95vh;
  max-width: 1200px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.dashboard-modal-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.6rem;
  border-bottom: 1px solid var(--mss-border, #e5e7eb);
  background: #f9fafb;
}

.dashboard-modal-title {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mss-heading, #0f172a);
}

.dashboard-layout-select {
  min-width: 7rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--mss-border, #e5e7eb);
  background: #fff;
  font-size: 0.85rem;
}

.dashboard-modal-close {
  border: none;
  background: transparent;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0 0 0.5rem;
  color: var(--mss-muted, #6b7280);
}

.dashboard-modal-close:hover {
  color: var(--mss-heading);
}

/* Middle content area */
.dashboard-modal-main {
  flex: 1 1 auto;
  padding: 1rem 1.6rem;
  background: var(--mss-bg, #f3f4f6);
  display: flex;
}

/* Inner dashboard “canvas” */
.dashboard-frame-shell {
  flex: 1 1 auto;
  background: var(--mss-surface-soft, #f9fafb);
  border-radius: 18px;
  padding: 0.75rem;
  overflow: hidden;
  display: flex;
}

/* Dashboard iframe */
#dashboardPreviewFrame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 14px;
  display: block;
  background: #ffffff;
}

/* Footer */
.dashboard-modal-footer {
  padding: 0.8rem 1.6rem 1.1rem;
  border-top: 1px solid var(--mss-border, #e5e7eb);
  background: #ffffff;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.dashboard-modal-footer button {
  min-width: 88px;
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .dashboard-modal-dialog {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

.rte-toolbar { display:flex; gap:8px; margin:6px 0 8px; }
.rte-toolbar button { padding:6px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; cursor:pointer; }
.rte-editor { min-height:160px; border:1px solid #e5e7eb; border-radius:10px; padding:12px; background:#fff; }
.rte-editor:focus { outline: none; border-color:#94a3b8; box-shadow:0 0 0 3px rgba(148,163,184,0.25); }

/* Close X (top-right) */
.mss-close-x{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  color:#0f172a;
  font-size:24px;
  line-height:32px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mss-close-x:hover{ background:#f1f5f9; }