/* Admin-panel embed mode only (html.embedded — set by app.js when this page is framed by
   admin.foreseen.ir's «تست کیوسک» page with ?embed=panel). Every rule is scoped under
   html.embedded, so the real kiosk page (device.foreseen.ir) is completely unaffected.
   Colors mirror the admin panel's design tokens (admin-panel/src/styles.css) so the
   framed page reads as part of the panel in both light and dark themes. */

@font-face {
  font-family: "IRANSansX";
  src: url("/fonts/IRANSansX-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IRANSansX";
  src: url("/fonts/IRANSansX-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

html.embedded {
  color-scheme: light;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #f9fafb;
  --surface-hover: #f4f5f8;
  --stage: #0b0d12;
  --border: #e6e8ec;
  --border-strong: #d5d9e0;
  --text: #151a23;
  --text-2: #3f4756;
  --muted: #6b7384;
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-text: #4338ca;
  --accent-soft: #eef0ff;
  --accent-ring: rgba(79, 70, 229, .18);
  --danger: #dc2626;
  --danger-soft: #fef1f1;
  --danger-border: #f8caca;
  --success: #059669;
  --success-soft: #eafaf3;
  --warning: #b45309;
  --warning-soft: #fff8eb;
  --warning-border: #f6dfb5;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --log-bg: #f9fafb;
  --log-text: #334155;
  font-family: "IRANSansX", Tahoma, "Segoe UI", sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}
html.embedded[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0d12;
  --surface: #12151c;
  --surface-soft: #161a22;
  --surface-hover: #1a1f28;
  --stage: #06070a;
  --border: #242a35;
  --border-strong: #313846;
  --text: #e8eaef;
  --text-2: #bcc2cd;
  --muted: #8b93a3;
  --accent: #6366f1;
  --accent-hover: #7478f5;
  --accent-text: #a5b4fc;
  --accent-soft: rgba(99, 102, 241, .14);
  --accent-ring: rgba(129, 140, 248, .28);
  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, .1);
  --danger-border: rgba(248, 113, 113, .28);
  --success: #34d399;
  --success-soft: rgba(52, 211, 153, .1);
  --warning: #fbbf24;
  --warning-soft: rgba(251, 191, 36, .08);
  --warning-border: rgba(251, 191, 36, .25);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --log-bg: #0b0d12;
  --log-text: #a7f3d0;
}

html.embedded body { min-height: 0; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
html.embedded * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }

/* Layout. The avatar is portrait (the kiosk screen is 1080x1920), so the stage keeps a
   9:16 box instead of stretching full width, and everything else sits BESIDE it.
   - narrow (< 720px, phones): stacked — stage, controls, tuners, logs. The panel sizes
     the iframe to its content in this mode, so NO vh units here (vh = the iframe's own
     height, which would then grow forever).
   - wide (>= 720px): "workspace" — the panel gives the iframe a fixed height (the
     visible viewport), the stage is pinned (sticky) on the right and only the settings
     column scrolls, so the avatar stays in view while tuning. vh is safe here.
   The 720px threshold must match KioskTestPage.tsx's WORKSPACE_MIN_WIDTH. */
html.embedded .shell {
  width: 100%; margin: 0; padding: 0 0 8px; gap: 12px; align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "controls" "tuners" "audio" "debug";
}
html.embedded .topbar { display: none; }
html.embedded .control-column { gap: 12px; }
/* The kiosk sheet gives every .diagnostics card align-self:start, which inside these flex
   columns shrinks each card to its content width; stretch them to the column instead. */
html.embedded .tuner-column > .diagnostics, html.embedded .control-column > .diagnostics { align-self: stretch; }
html.embedded .stage { width: min(100%, 380px); justify-self: center; }
html.embedded .debug-log-panel, html.embedded #audioDiagnostics { grid-column: auto; }
html.embedded .debug-log-panel { grid-area: debug; }
html.embedded #audioDiagnostics { grid-area: audio; }

@media (min-width: 720px) {
  html.embedded, html.embedded body { height: 100%; overflow: hidden; }
  html.embedded .shell {
    height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    padding: 0 0 12px;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: max-content max-content max-content auto;
    grid-template-areas: "stage tuners" "stage controls" "stage audio" "stage debug";
  }
  /* Height-driven 9:16 box, capped so the settings column keeps at least ~330px. */
  html.embedded .stage {
    position: sticky; top: 0; width: auto; justify-self: start;
    height: min(calc(100vh - 12px), calc((100vw - 344px) * 16 / 9));
  }
}
@media (min-width: 1180px) {
  html.embedded .shell {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: max-content max-content auto;
    grid-template-areas: "stage tuners controls" "stage audio audio" "stage debug debug";
  }
  html.embedded .stage { height: min(calc(100vh - 12px), calc((100vw - 700px) * 16 / 9)); }
}

/* Credentials come from the panel — hide the manual API address / token inputs. */
html.embedded label[for="apiUrl"], html.embedded #apiUrl,
html.embedded label[for="deviceToken"], html.embedded #deviceToken,
html.embedded .control-card > .security-note:not(#analogModeHint),
html.embedded #forgetDeviceButton { display: none !important; }

/* Cards */
html.embedded .stage, html.embedded .control-card, html.embedded .diagnostics {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs);
}
html.embedded .control-card, html.embedded .diagnostics { padding: 16px; }
html.embedded .control-card { gap: 10px; }
html.embedded h2 { color: var(--text); font-size: 13.5px; font-weight: 700; }

/* Stage keeps a dark backdrop in both themes — it's what the kiosk screen shows. */
html.embedded .stage { min-height: 0; aspect-ratio: 9 / 16; border-color: var(--border); background: var(--stage); }
html.embedded .media-stage { height: 100%; min-height: 0; background: var(--stage); }
html.embedded .placeholder { height: 100%; min-height: 0; padding: 20px; color: #8b93a3; font-size: 12.5px; }
html.embedded .placeholder strong { color: #e8eaef; font-size: 14px; }
html.embedded .avatar-mark { width: 64px; height: 64px; margin-bottom: 8px; border: 0; border-radius: 16px; background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff; font-size: 1.7rem; box-shadow: 0 10px 30px -6px rgba(99, 102, 241, .55); }

/* Controls */
html.embedded label { color: var(--text-2); font-size: 12.5px; }
html.embedded input:not([type="checkbox"]):not([type="range"]) { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); padding: 8px 11px; color: var(--text); }
html.embedded input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
html.embedded input[type="range"] { flex: 1; padding: 0; border: 0; background: none; accent-color: var(--accent); box-shadow: none; }
html.embedded .test-mode-field { margin: 0; border: 1px solid var(--warning-border); border-radius: 8px; background: var(--warning-soft); padding: 9px 11px; color: var(--warning); font-size: 12.5px; line-height: 1.7; }
html.embedded .test-mode-field input[type="checkbox"] { accent-color: var(--warning); }
html.embedded .security-note { color: var(--muted); font-size: 12px; line-height: 1.8; }

html.embedded button {
  min-height: 36px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  padding: 0 12px; color: var(--text); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-xs);
  transition: background .15s, border-color .15s, color .15s;
}
html.embedded button:hover:not(:disabled) { filter: none; border-color: var(--border-strong); background: var(--surface-hover); }
html.embedded button:disabled { opacity: .45; box-shadow: none; }
html.embedded button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
html.embedded button.primary:hover:not(:disabled) { border-color: var(--accent-hover); background: var(--accent-hover); }
html.embedded .actions { gap: 8px; margin-top: 2px; }
html.embedded #connectButton { min-height: 40px; font-size: 14px; }
html.embedded #disconnectButton:not(:disabled) { border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
html.embedded #analogModeButton[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
/* The kiosk stylesheet's display:flex on this button overrides its [hidden] attribute, so
   it showed even outside analog (push-to-talk) mode; app.js un-hides it when analog mode
   is switched on. */
html.embedded #pushToTalkButton[hidden] { display: none; }
html.embedded #pushToTalkButton { min-height: 48px; border-color: var(--danger-border); background: var(--danger-soft); color: var(--danger); }
html.embedded #pushToTalkButton[aria-pressed="true"] { border-color: var(--danger); background: var(--danger); color: #fff; }
html.embedded #pushToTalkButton[aria-pressed="true"] .rec-dot { background: #fff; }
html.embedded .link-button { min-height: 0; border: 0; background: none; box-shadow: none; color: var(--accent-text); }

/* Connection status list */
html.embedded .diagnostics dl { gap: 0; margin-top: 10px; }
html.embedded .diagnostics dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding: 8px 0; }
html.embedded dt { flex: none; color: var(--muted); font-size: 12px; }
html.embedded dd { margin: 0; color: var(--text); font-size: 12.5px; text-align: left; }
html.embedded #statusText { text-align: right; }

/* Calibration tuners — one card, accordion style. The whole heading row is the click
   target (the real toggle button — still the one app.js listens to — is stretched over
   it), the panel opens right under its heading, and the open one is highlighted. */
html.embedded .diagnostic-heading { gap: 10px; }
html.embedded .diagnostic-heading button { min-height: 30px; flex: none; padding: 0 10px; font-size: 12px; }
html.embedded .tuner-column { gap: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow-xs); }
html.embedded .tuner-column > .legs-tuner { border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: 0; }
html.embedded .tuner-column > .legs-tuner + .legs-tuner { border-top: 1px solid var(--border); }
html.embedded .legs-tuner .diagnostic-heading { position: relative; min-height: 48px; padding: 10px 14px; transition: background .15s; }
html.embedded .legs-tuner .diagnostic-heading:hover { background: var(--surface-hover); }
html.embedded .legs-tuner .diagnostic-heading h2 { font-size: 13px; line-height: 1.6; }
html.embedded .legs-tuner .diagnostic-heading button {
  width: 26px; height: 26px; min-height: 0; flex: none; padding: 0; border: 0; border-radius: 6px;
  background: transparent; box-shadow: none; color: var(--muted); font-size: 0;
}
html.embedded .legs-tuner .diagnostic-heading button::before { position: absolute; inset: 0; cursor: pointer; content: ""; }
html.embedded .legs-tuner .diagnostic-heading button:disabled::before { cursor: not-allowed; }
html.embedded .legs-tuner .diagnostic-heading button::after {
  display: block; width: 7px; height: 7px; margin: 6px auto 0; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor;
  content: ""; transform: rotate(-45deg); transition: transform .2s, margin .2s;
}
html.embedded .legs-tuner .diagnostic-heading button:hover:not(:disabled) { background: transparent; }
html.embedded .legs-tuner:has(> [id$="TunerPanel"]:not([hidden])) { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
html.embedded .legs-tuner:has(> [id$="TunerPanel"]:not([hidden])) .diagnostic-heading h2,
html.embedded .legs-tuner:has(> [id$="TunerPanel"]:not([hidden])) .diagnostic-heading button { color: var(--accent-text); }
html.embedded .legs-tuner:has(> [id$="TunerPanel"]:not([hidden])) .diagnostic-heading button::after { margin-top: 10px; transform: rotate(135deg); }
html.embedded .legs-tuner .diagnostic-heading { justify-content: space-between; }
html.embedded .legs-tuner:has(.diagnostic-heading button:disabled) .diagnostic-heading h2 { color: var(--muted); }
html.embedded [id$="TunerPanel"] { padding: 0 14px 14px; animation: tuner-open .18s ease; }
@keyframes tuner-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html.embedded [id$="TunerPanel"] > .security-note { margin: 0 0 8px; }
html.embedded .legs-tuner-row { gap: 8px; margin: 6px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 5px; padding-inline-start: 10px; }
html.embedded .legs-tuner-row span { color: var(--text-2); font-size: 12.5px; }
html.embedded .legs-tuner-row output { min-width: 44px; color: var(--text); font-size: 13px; }
html.embedded .legs-tuner-btn { width: 28px; height: 28px; min-height: 28px; padding: 0; border-radius: 6px; font-size: 15px; line-height: 1; box-shadow: none; }
html.embedded .legs-tuner .actions { grid-template-columns: 1fr 1fr; margin-top: 10px; }
html.embedded .legs-tuner .actions button { grid-column: auto; min-height: 32px; padding: 0 8px; font-size: 12px; }

/* Developer panels */
html.embedded .debug-log-note { color: var(--muted); }
html.embedded .debug-log-output { min-height: 140px; max-height: 300px; border-color: var(--border); border-radius: 8px; background: var(--log-bg); color: var(--log-text); font-size: 11.5px; }

/* The kiosk stylesheet's own <=960px rules use vh heights; neutralise them here. */
@media (max-width: 960px) {
  html.embedded .stage, html.embedded .media-stage, html.embedded .placeholder { min-height: 0; }
}