/* Apple-style product motion (macOS window). Motion: transform/opacity/filter only,
   enter 520ms strong ease-out, exit 220ms, iOS sheet curve for the sidebar indicator. */
.mm { --mm-ease: cubic-bezier(.23, 1, .32, 1); --mm-sheet: cubic-bezier(.32, .72, 0, 1);
  margin: clamp(48px, 6vw, 80px) auto 0; max-width: 960px; text-align: left; font-size: 13px; letter-spacing: -.01em; }
.mm-win { border-radius: 14px; overflow: hidden; background: #1C1C1E; color: #F5F5F7;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 40px 100px rgba(0,0,0,.65), 0 12px 30px rgba(0,0,0,.4); }
.mm-bar { height: 38px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px;
  background: rgba(58,58,60,.72); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0,0,0,.5); }
.mm-lights { display: flex; gap: 8px; }
.mm-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.25); }
.mm-lights i:nth-child(2) { background: #FEBC2E; } .mm-lights i:nth-child(3) { background: #28C840; }
.mm-title { font-weight: 600; font-size: 13px; color: rgba(245,245,247,.86); transition: opacity 200ms ease; }
.mm-body { display: grid; grid-template-columns: 188px 1fr; aspect-ratio: 16 / 9.4; }

/* sidebar */
.mm-side { position: relative; padding: 14px 10px; background: rgba(44,44,46,.6); border-right: 1px solid rgba(255,255,255,.06); display: flex; flex-direction: column; gap: 2px; }
.mm-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; padding: 4px 8px 14px; color: rgba(245,245,247,.92); }
.mm-side button { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 10px; border: 0; background: none;
  color: rgba(245,245,247,.62); font: inherit; text-align: left; border-radius: 8px; cursor: default; transition: color 300ms ease; }
.mm-side button.on { color: #F5F5F7; }
.mm-side svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 16px; }
.mm-ind { position: absolute; left: 10px; right: 10px; top: 0; height: 32px; border-radius: 8px; background: rgba(255,255,255,.10);
  transform: translateY(var(--y, 0)); transition: transform 520ms var(--mm-sheet); }

/* stage + scenes */
.mm-stage { position: relative; overflow: hidden; background: #111113; container-type: size; }
.mm-scene { position: absolute; inset: 0; padding: 18px; display: grid; gap: 14px; opacity: 0; transform: scale(.985); filter: blur(8px);
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease; pointer-events: none; }
.mm-scene.is-on { opacity: 1; transform: none; filter: blur(0); transition: opacity 520ms var(--mm-ease), transform 620ms var(--mm-ease), filter 520ms var(--mm-ease); }
.mm-h { margin: 0 0 10px; font-size: 11.5px; font-weight: 600; color: rgba(245,245,247,.55); }
.mm-card, .mm-events, .mm-kpis > div, .mm-row, .mm-chat { background: #1C1C1E; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }

/* scene 1: 2x2 wall of native 16:9 channels on top, event ticker below. Tiles keep the
   source aspect so the AI overlays (boxes, labels, HUD) are never cropped. */
.mm-scene[data-mm-scene="0"] { grid-template-rows: auto auto auto; align-content: center; gap: 10px; }
.mm-scene[data-mm-scene="0"] > * { width: min(100%, calc((100cqh - 140px) * 16 / 9 + 8px)); justify-self: center; }
.mm-feeds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-feed { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #000; }
.mm-feed video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-feed > span { position: absolute; bottom: 7px; font-size: 10.5px; font-weight: 600; color: #fff; padding: 3px 7px; border-radius: 6px;
  background: rgba(0,0,0,.62); }
.mm-feed > .mm-live { left: 8px; } .mm-live b { font-weight: 600; margin-right: 6px; color: rgba(255,255,255,.62); }
.mm-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #FF453A; vertical-align: 1px; }
.mm-live.is-off::before { background: rgba(255,255,255,.4); }
.mm-scene.is-on .mm-live:not(.is-off)::before { animation: mm-rec 1.6s steps(1) infinite; }
@keyframes mm-rec { 50% { opacity: .25; } }
/* offline channel: the edge box is still up, the camera link is not */
.mm-wallhead { display: flex; align-items: baseline; gap: 14px; font-size: 11.5px; color: rgba(245,245,247,.55); }
.mm-wallhead .mm-h { margin: 0; margin-right: auto; color: rgba(245,245,247,.86); font-size: 12.5px; }
.mm-wallhead b { color: #F5F5F7; font-weight: 600; } .mm-wallhead time { font-variant-numeric: tabular-nums; }
.mm-off { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: #0A0A0B;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mm-off img { width: 25%; height: auto; margin-bottom: 4px; opacity: .9; }
.mm-off b { font-size: 12px; font-weight: 600; }
.mm-off small { font-size: 10.5px; color: rgba(245,245,247,.5); }
.mm-off small::after { content: ""; display: inline-block; width: 1.2em; text-align: left; }
.mm-scene.is-on .mm-off small::after { animation: mm-dots 1.8s steps(4) infinite; }
@keyframes mm-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
.mm-ticker { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-self: start; }
.mm-ticker li { padding: 9px 10px; border-radius: 8px; background: #1C1C1E; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); min-width: 0; }
.mm-ticker li b, .mm-ticker li small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-ticker li.warn b { color: #FF9F0A; }
.mm-events { padding: 14px; display: flex; flex-direction: column; min-height: 0; }
.mm-ticker.mm-events { padding: 0; display: grid; background: none; box-shadow: none; }
.mm-events ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mm-events li { padding: 9px 10px; border-radius: 8px; background: rgba(255,255,255,.05); opacity: 0; transform: translateY(10px); }
.mm-events li b { display: block; font-weight: 600; font-size: 12.5px; }
.mm-events li small { display: block; color: rgba(245,245,247,.55); font-size: 11px; }
.mm-scene.is-on .mm-events li { opacity: 1; transform: none; transition: opacity 500ms var(--mm-ease), transform 600ms var(--mm-ease); transition-delay: calc(var(--i, 0) * 700ms + 500ms); }
.mm-events li:nth-child(2) { --i: 1; } .mm-events li:nth-child(3) { --i: 2; } .mm-events li:nth-child(4) { --i: 3; }
.mm-stat { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(255,255,255,.06); }
.mm-stat + .mm-stat { margin-top: 0; }
.mm-events-top .mm-stat { margin-top: 0; padding: 0 0 12px; border-top: 0; }
.mm-events-top .mm-stat + .mm-stat { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.mm-events-top .mm-h + ul { margin-top: 4px; }
.mm-events-top ul { margin-top: 14px !important; }
.mm-stat span { color: rgba(245,245,247,.55); font-size: 11.5px; }
.mm-stat b, .mm-kpis b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.mm-stat b { font-size: 20px; }
.mm-stat b em, .mm-kpis b em { font-style: normal; }

/* scene 2 */
.mm-scene[data-mm-scene="1"] { grid-template-rows: auto 1fr auto; }
.mm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mm-kpis > div { padding: 12px 14px; }
.mm-kpis span { display: block; color: rgba(245,245,247,.55); font-size: 11.5px; margin-bottom: 4px; }
.mm-kpis b { font-size: clamp(16px, 2.2vw, 24px); }
.mm-kpis > div:last-child b { color: #FF9F0A; }
.mm-charts { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 10px; min-height: 0; }
.mm-card { padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; }
.mm-bars { flex: 1; display: flex; align-items: flex-end; gap: 7%; padding-top: 6px; min-height: 0; }
.mm-bars i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: #FF8A2B; transform: scaleY(0); transform-origin: bottom; opacity: .9; }
.mm-bars i:last-child { background: #FFB067; }
.mm-scene.is-on .mm-bars i { transform: scaleY(1); transition: transform 700ms var(--mm-ease); transition-delay: calc(var(--i) * 70ms + 350ms); }
.mm-line { flex: 1; width: 100%; min-height: 0; overflow: visible; }
.mm-line path { fill: none; stroke: #64D2FF; stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.mm-scene.is-on .mm-line path { stroke-dashoffset: 0; transition: stroke-dashoffset 1600ms cubic-bezier(.77, 0, .175, 1) 500ms; }
.mm-row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 11px 14px; opacity: 0; transform: translateY(8px); }
.mm-row span:nth-child(2) { color: #30D158; font-weight: 600; }
.mm-scene.is-on .mm-row { opacity: 1; transform: none; transition: opacity 500ms var(--mm-ease) 1700ms, transform 600ms var(--mm-ease) 1700ms; }

/* scene 3 */
.mm-scene[data-mm-scene="2"] { grid-template-columns: 1.5fr 1fr; }
.mm-chat { display: flex; flex-direction: column; overflow: hidden; background: #0B141A; }
.mm-chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #202C33; }
.mm-chat-head img { background: #fff; border-radius: 50%; padding: 2px; }
.mm-chat-head b { display: block; font-size: 12.5px; } .mm-chat-head small { color: #8696A0; font-size: 10.5px; }
.mm-msgs { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; }
.mm-msgs > * { max-width: 78%; margin: 0; padding: 7px 10px; border-radius: 9px; font-size: 12px; line-height: 1.35; opacity: 0; transform: translateY(10px) scale(.98); }
.mm-msgs .in { align-self: flex-start; background: #202C33; transform-origin: left bottom; }
.mm-msgs .out { align-self: flex-end; background: #005C4B; transform-origin: right bottom; }
.mm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mm-form b, .mm-form > span:first-of-type { grid-column: 1 / -1; }
.mm-form > span:first-of-type { color: rgba(233,237,239,.7); font-size: 11px; }
.mm-form .sel, .mm-form > span:nth-of-type(3) { text-align: center; padding: 5px; border-radius: 6px; background: rgba(0,0,0,.25); }
.mm-form .sel { box-shadow: inset 0 0 0 1.5px #25D366; }
.mm-form em { grid-column: 1 / -1; font-style: normal; text-align: center; font-weight: 600; color: #53BDEB; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.12); }
.mm-toast { align-self: center !important; max-width: none !important; background: rgba(255,255,255,.1); color: #E9EDEF; font-size: 11px !important; border-radius: 999px !important; }
.mm-scene.is-on .mm-msgs > * { opacity: 1; transform: none; transition: opacity 400ms var(--mm-ease), transform 500ms var(--mm-ease); }
.mm-scene.is-on .mm-msgs > :nth-child(1) { transition-delay: 400ms; }
.mm-scene.is-on .mm-msgs > :nth-child(2) { transition-delay: 1300ms; }
.mm-scene.is-on .mm-msgs > :nth-child(3) { transition-delay: 2200ms; }
.mm-scene.is-on .mm-msgs > :nth-child(4) { transition-delay: 3400ms; }

/* cursor */
.mm-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 20px; height: 20px; transform: translate(var(--cx, 70%), var(--cy, 80%));
  transition: transform 900ms cubic-bezier(.77, 0, .175, 1); pointer-events: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.mm-cursor svg { width: 20px; height: 20px; fill: #fff; stroke: #000; stroke-width: 1.2; transition: transform 140ms var(--mm-ease); transform-origin: 20% 10%; }
.mm-cursor.press svg { transform: scale(.82); }

@media (max-width: 760px) {
  .mm-body { grid-template-columns: 52px 1fr; aspect-ratio: 4 / 3.6; }
  .mm-brand { font-size: 0; justify-content: center; padding: 4px 0 14px; }
  .mm-side { padding: 12px 6px; } .mm-side button { font-size: 0; justify-content: center; padding: 0; gap: 0; }
  .mm-ind { left: 6px; right: 6px; }
  .mm-scene { padding: 10px; gap: 8px; }
  .mm-scene[data-mm-scene="0"], .mm-scene[data-mm-scene="2"] { grid-template-columns: 1fr; }
  .mm-scene .mm-events { display: none; }
  .mm-feeds { gap: 5px; } .mm-feed > span { font-size: 9px; bottom: 4px; padding: 2px 5px; } .mm-feed > .mm-live { left: 4px; } .mm-live b { margin-right: 0; } .mm-live { font-size: 0 !important; } .mm-live b { font-size: 9px; }
  .mm-wallhead span { display: none; }
  .mm-off b, .mm-off small { display: none; } .mm-off img { width: 34%; margin: 0 0 14px; }
  .mm-charts { grid-template-columns: 1fr; } .mm-charts .mm-card:last-child { display: none; }
  .mm-row { grid-template-columns: 1fr auto; padding: 9px 12px; font-size: 11.5px; } .mm-row span:nth-child(2) { display: none; }
  .mm-kpis { grid-template-columns: 1fr 1fr; } .mm-kpis > div:last-child { display: none; }
  .mm-kpis span { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-scene, .mm-scene.is-on, .mm-scene * { transition: none !important; }
  .mm-cursor { display: none; }
}