/**
 * Medallion XLN media primitives (UX3.1) — styles for /shared/xln-media.js
 *
 * One family: shared radius, border, header metadata, control language,
 * loading and error states. Chrome is on the UX3 semantic tokens (nav/shell.css),
 * so it follows Light / Dark / System. The video stage is always near-black —
 * it is a picture frame, not a theme surface — and uploaded media is never
 * recoloured.
 */
.xm {
  --xm-radius: 14px;
  --xm-line: var(--mx-border-default, rgba(255, 255, 255, .12));
  --xm-surface: var(--mx-surface-secondary, #161620);
  --xm-ink: var(--mx-text-primary, #F5F5F8);
  --xm-ink-2: var(--mx-text-secondary, #C7C7D2);
  --xm-ink-3: var(--mx-text-muted, #9C9CB0);
  --xm-gold: var(--mx-accent-gold, #F9C94C);
  --xm-gold-ink: var(--mx-accent-gold-ink, #1A1300);
  --xm-played: #F9C94C;                         /* played progress on dark */
  --xm-rest: rgba(var(--mx-fg-rgb, 255, 255, 255), .22);
  --xm-p: 0%;
  position: relative;
  display: block;
  margin: 14px 0 0;
  border: 1px solid var(--xm-line);
  border-radius: var(--xm-radius);
  background: var(--xm-surface);
  color: var(--xm-ink);
  overflow: hidden;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  cursor: default;
  max-width: 100%;
}
html[data-theme="light"] .xm { --xm-played: #A36A00; }   /* 4.9:1 on white; gold fill is 1.6:1 */

.xm svg { width: 18px; height: 18px; display: block; }
.xm svg:not([fill="none"]), .xm-viewer svg:not([fill="none"]) { fill: currentColor; }   /* stroked icons keep fill:none */
.xm-btn {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0; border-radius: 10px; background: transparent; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.xm-btn:hover { background: rgba(var(--mx-fg-rgb, 255, 255, 255), .08); }
.xm-btn:disabled { opacity: .38; cursor: default; background: transparent; }
.xm :focus-visible { outline: 2px solid var(--mx-focus-ring-color, #F9C94C); outline-offset: 2px; }
.xm-time { font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--xm-ink-2); white-space: nowrap; }
.xm-head { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.xm-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; font-size: 14px; color: var(--xm-ink); }
.xm-kind { flex: 0 0 auto; font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--xm-ink-3); }
.xm-state:empty { display: none; }
.xm-fallback { display: none; }
.xm[data-state="error"] .xm-fallback {
  display: inline-flex; align-items: center; min-height: 40px; margin: 0 14px 14px; padding: 0 14px;
  border: 1px solid var(--xm-line); border-radius: 10px; color: var(--xm-ink); font-size: 13px; font-weight: 650; text-decoration: none;
}

/* ── Video ──────────────────────────────────────────────────────────────── */
.xm--video { background: #07070B; border-color: rgba(var(--mx-fg-rgb, 255, 255, 255), .12); color: #F5F5F8; }
.xm--video .xm-stage { position: relative; line-height: 0; background: #07070B; }
.xm--video video {
  display: block; width: 100%; height: auto;
  max-height: min(620px, 72vh); max-height: min(620px, 72dvh);
  object-fit: contain; background: #07070B; cursor: pointer;
}
.xm-bigplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(7, 7, 11, .62); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .22), 0 10px 30px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.xm-bigplay svg { width: 26px; height: 26px; margin-left: 3px; }
.xm-bigplay:hover { background: rgba(7, 7, 11, .78); }
.xm--video[data-state="playing"] .xm-bigplay,
.xm--video[data-state="paused"] .xm-bigplay { opacity: 0; pointer-events: none; }
.xm--video .xm-state {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  padding: 7px 12px; border-radius: 999px; line-height: 1.3;
  background: rgba(7, 7, 11, .78); color: #fff; font-size: 12.5px; font-weight: 600;
}
.xm--video .xm-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: #0E0E15; border-top: 1px solid rgba(255, 255, 255, .08); color: #F5F5F8;
}
.xm--video .xm-time { color: #C7C7D2; }
.xm--video .xm-btn:hover { background: rgba(255, 255, 255, .1); }
.xm--video .xm-btn:focus-visible, .xm--video input:focus-visible { outline-color: #F9C94C; }
.xm--video .xm-play svg { width: 20px; height: 20px; }

/* Range inputs: a thin track whose played part is the real playback ratio (--xm-p). */
.xm-seek, .xm-vol {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; height: 28px;
  background: transparent; cursor: pointer; min-width: 0;
}
.xm-seek { flex: 1 1 auto; }
.xm-vol { flex: 0 0 72px; --xm-v: 100%; }
.xm-seek::-webkit-slider-runnable-track {
  height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, #F9C94C var(--xm-p), rgba(255, 255, 255, .22) var(--xm-p));
}
.xm-seek::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
.xm-seek::-moz-range-progress { height: 4px; border-radius: 4px; background: #F9C94C; }
.xm-vol::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.xm-seek::-webkit-slider-thumb, .xm-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 13px; height: 13px; margin-top: -4.5px;
  border-radius: 50%; border: 0; background: #F9C94C; box-shadow: 0 0 0 3px rgba(249, 201, 76, .25);
}
.xm-vol::-webkit-slider-thumb { margin-top: -5px; background: #F5F5F8; box-shadow: none; }
.xm-seek::-moz-range-thumb, .xm-vol::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #F9C94C; }
.xm--video:fullscreen { display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; }
.xm--video:fullscreen video { max-height: calc(100vh - 52px); }

/* ── Audio ──────────────────────────────────────────────────────────────── */
.xm--audio { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.xm-play--round {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--xm-gold); color: var(--xm-gold-ink);
  box-shadow: 0 6px 18px rgba(249, 201, 76, .22);
}
.xm-play--round:hover { background: var(--xm-gold); filter: brightness(1.05); }
.xm-play--round svg { width: 20px; height: 20px; }
.xm--audio[data-state="idle"] .xm-play--round svg,
.xm--audio[data-state="paused"] .xm-play--round svg { margin-left: 2px; }
.xm-audio-main { flex: 1 1 auto; min-width: 0; }
.xm-wave {
  position: relative; height: 40px; margin: 8px 0 6px; cursor: pointer;
  touch-action: none; border-radius: 6px;
}
.xm-wave-bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px; }
.xm-wave-bars i { flex: 1 1 0; min-width: 1px; border-radius: 2px; background: var(--xm-rest); }
.xm-wave-bars i.is-played { background: var(--xm-played); }
.xm-wave-bars i.is-current { background: linear-gradient(90deg, var(--xm-played) var(--xm-bar, 0%), var(--xm-rest) var(--xm-bar, 0%)); }
/* The playhead: a hairline at the exact playback ratio (sub-bar precision). */
.xm-wave-head {
  position: absolute; top: 2px; bottom: 2px; left: var(--xm-p); width: 2px; margin-left: -1px;
  border-radius: 2px; background: var(--xm-ink); opacity: 0; pointer-events: none;
}
.xm--audio[data-state="playing"] .xm-wave-head,
.xm--audio[data-state="paused"] .xm-wave-head { opacity: .85; }
.xm-times { display: flex; justify-content: space-between; }
.xm--audio[data-state="error"] { flex-wrap: wrap; }
.xm--audio[data-state="error"] .xm-fallback { margin: 4px 0 0; }
.xm--audio[data-loading] .xm-play--round { opacity: .75; }

/* ── Documents ──────────────────────────────────────────────────────────── */
.xm--doc .xm-doc-head { align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--xm-line); }
.xm-doc-icon {
  display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  background: var(--mx-accent-gold-soft, rgba(249, 201, 76, .12)); color: var(--mx-accent-gold-text, #F9C94C);
}
.xm-doc-id { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.xm-doc-kind { letter-spacing: .08em; }
.xm-doc-pages { letter-spacing: 0; text-transform: none; font-family: Inter, system-ui, sans-serif; font-weight: 500; font-size: 12px; }
.xm-doc-stage {
  position: relative; display: grid; place-items: center; min-height: 220px;
  padding: 16px; background: var(--mx-app-bg, #0B0B12);
}
.xm-doc-canvas {
  display: block; width: auto; height: auto; max-width: 100%;
  max-height: min(560px, 62vh); max-height: min(560px, 62dvh);
  border-radius: 4px; background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 10px 30px rgba(var(--mx-shadow-rgb, 0, 0, 0), calc(.18 * var(--mx-shadow-k, 1)));
}
.xm--doc:not([data-state="ready"]):not([data-page]) .xm-doc-canvas { display: none; }
.xm--doc .xm-state { color: var(--xm-ink-2); font-size: 13px; text-align: center; max-width: 34ch; line-height: 1.5; }
.xm--doc[data-state="loading"] .xm-state::before {
  content: ""; display: block; width: 22px; height: 22px; margin: 0 auto 10px;
  border-radius: 50%; border: 2px solid var(--xm-line); border-top-color: var(--xm-played);
  animation: xm-spin .9s linear infinite;
}
@keyframes xm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .xm--doc[data-state="loading"] .xm-state::before { animation: none; } }
.xm-doc-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-top: 1px solid var(--xm-line); }
.xm-doc-page { font-size: 12.5px; color: var(--xm-ink-2); font-variant-numeric: tabular-nums; }
.xm-doc-spacer { flex: 1 1 auto; }
.xm-doc-open, .xm-doc-expand {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px;
  border-radius: 10px; font: 650 13px/1 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.xm-doc-open { border: 1px solid var(--xm-line); color: var(--xm-ink); background: transparent; }
.xm-doc-expand { border: 0; background: var(--xm-gold); color: var(--xm-gold-ink); }
.xm-doc-expand svg { width: 15px; height: 15px; }
.xm--doc[data-state="error"] .xm-doc-open,
.xm--doc[data-state="unsupported"] .xm-doc-open { border-color: transparent; background: var(--xm-gold); color: var(--xm-gold-ink); }
@media (max-width: 560px) {
  .xm-doc-prev, .xm-doc-next, .xm-doc-page { display: none; }        /* phones: first page + full viewer */
  .xm-doc-stage { min-height: 180px; padding: 12px; }
  .xm-doc-canvas { max-height: 440px; }
  .xm-vol { display: none; }                                         /* hardware volume on phones */
  .xm-btn { width: 40px; height: 40px; }
  .xm-doc-open, .xm-doc-expand { min-height: 44px; }
  .xm--audio { gap: 12px; padding: 12px 14px; }
}

/* ── Full-screen document viewer ────────────────────────────────────────── */
.xm-viewer {
  width: min(1100px, 100vw); height: 100vh; height: 100dvh; max-width: 100vw; max-height: 100dvh;
  margin: 0 auto; padding: 0; border: 0; border-radius: 0;
  display: flex; flex-direction: column;
  background: var(--mx-app-bg, #07070B); color: var(--mx-text-primary, #F5F5F8);
  font-family: Inter, system-ui, sans-serif;
}
.xm-viewer:not([open]) { display: none; }
.xm-viewer::backdrop { background: var(--mx-scrim, rgba(0, 0, 0, .6)); }
.xm-viewer svg { width: 18px; height: 18px; display: block; }
.xm-viewer .xm-btn { color: inherit; }
.xm-viewer-head {
  display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 16px;
  border-bottom: 1px solid var(--mx-border-default, rgba(255, 255, 255, .12));
  background: var(--mx-surface-primary, #101017);
}
.xm-viewer-head .xm-title { flex: 1 1 auto; }
.xm-v-page { font: 500 12.5px/1 "JetBrains Mono", ui-monospace, monospace; min-width: 58px; text-align: center; color: var(--mx-text-secondary, #C7C7D2); }
.xm-viewer-body { flex: 1 1 auto; overflow: auto; display: grid; justify-items: center; align-content: start; padding: 16px; }
.xm-viewer-canvas { display: block; width: 100%; height: auto; max-width: 100%; background: #fff; border-radius: 4px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.xm-viewer .xm-doc-open { border: 1px solid var(--mx-border-default, rgba(255, 255, 255, .14)); color: inherit; }
@media (max-width: 560px) {
  .xm-viewer-head { flex-wrap: wrap; }
  .xm-viewer-head .xm-title { flex-basis: calc(100% - 50px); order: 0; }
  .xm-viewer-head .xm-v-close { order: 1; }
  .xm-viewer-head .xm-v-prev, .xm-viewer-head .xm-v-page, .xm-viewer-head .xm-v-next, .xm-viewer-head .xm-doc-open { order: 2; }
  .xm-viewer-body { padding: 8px; }
}

/* UX3.2 — document preview on request (the Stream). The stage keeps its size,
   so pressing "Show preview" does not move the feed. */
.xm--doc[data-preview="on-request"][data-state="idle"] .xm-doc-stage { display: flex; align-items: center; justify-content: center; }
.xm-doc-load { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--xm-line, rgba(127,127,127,.35));
  background: var(--xm-surface, transparent); color: inherit; font: 600 13px Inter, sans-serif; cursor: pointer; }
.xm-doc-load:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }