/* Recreated Operator screens for oper.run. Every screen shows Example data.
   Colours mirror the app's named colours (operator/src/styles.css). light-dark() follows the page theme. */
.opx {
  --opx-paper: light-dark(#f6f7f3, #111714);
  --opx-surface: light-dark(#ffffff, #19211c);
  --opx-soft: light-dark(#fafbf8, #161e19);
  --opx-fill: light-dark(#eef1eb, #212a24);
  --opx-mint: light-dark(#dcebdc, #24382b);
  --opx-line: light-dark(#dce2db, #2c3730);
  --opx-line-strong: light-dark(#cbd5c8, #3a473f);
  --opx-ink: light-dark(#22352d, #e2ebe5);
  --opx-ink-soft: light-dark(#526459, #b3c0b7);
  --opx-muted: light-dark(#5f6d65, #97a59c);
  --opx-forest: light-dark(#244a38, #8fcca6);
  --opx-on-forest: light-dark(#f4f7ef, #0e1913);
  --opx-positive: light-dark(#2e7650, #6cc995);
  --opx-recorded: light-dark(#e7f1e8, #1b2c21);
  --opx-warning: light-dark(#79591e, #e3c27e);
  --opx-warning-tint: light-dark(#fbf3df, #2a2416);
  --opx-whatsapp: light-dark(#237349, #5cc48c);
  --opx-telegram: light-dark(#1f6f99, #6db4dc);
  --opx-bubble: light-dark(#ddefe0, #1e3627);
  --opx-chat: light-dark(#ebeee7, #0f1512);
  --opx-device: light-dark(#161b18, #2b322e);
  --opx-device-edge: light-dark(#323a35, #48524c);
  --opx-shade: light-dark(#22352d, #000000);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--opx-ink);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.opx *, .opx *::before, .opx *::after { box-sizing: border-box; }
.opx p { margin: 0; }

.opx-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 11px/1 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .02em;
  color: var(--opx-muted); background: var(--opx-surface);
  border: 1px solid var(--opx-line); border-radius: 4px; padding: 5px 7px;
}

/* Phone with a chat thread */
.opx-phone {
  width: min(100%, 318px); padding: 9px; border-radius: 42px;
  background: var(--opx-device);
  box-shadow: inset 0 0 0 1px var(--opx-device-edge), 0 34px 70px -36px color-mix(in srgb, var(--opx-shade) 70%, transparent);
}
.opx-screen { border-radius: 34px; overflow: hidden; background: var(--opx-chat); display: flex; flex-direction: column; }
.opx-chat-head { display: flex; align-items: center; gap: 10px; padding: 22px 16px 12px; background: var(--opx-surface); border-bottom: 1px solid var(--opx-line); }
.opx-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--opx-forest); display: grid; place-items: center; }
.opx-avatar::before, .opx-app-mark::before {
  content: ''; width: 58%; height: 58%; background: var(--opx-on-forest);
  -webkit-mask: url(operator-mark-128.png) center / contain no-repeat; mask: url(operator-mark-128.png) center / contain no-repeat;
}
.opx-chat-head b { display: block; font: 700 15px/1.2 'Manrope', sans-serif; }
.opx-chat-head small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--opx-muted); }
.opx-chat-head small::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--opx-whatsapp); }
.opx-thread { list-style: none; margin: 0; padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 8px; }
.opx-msg { max-width: 86%; padding: 8px 11px 6px; border-radius: 13px; font-size: 13.5px; line-height: 1.42; box-shadow: 0 1px 0 color-mix(in srgb, var(--opx-shade) 9%, transparent); }
.opx-msg.from-person { align-self: flex-end; background: var(--opx-bubble); border-bottom-right-radius: 4px; }
.opx-msg.from-operator { align-self: flex-start; background: var(--opx-surface); border: 1px solid var(--opx-line); border-bottom-left-radius: 4px; }
.opx-msg time { display: block; text-align: right; margin-top: 3px; font: 11px 'IBM Plex Mono', monospace; color: var(--opx-muted); }
.opx-who { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: var(--opx-forest); }
.opx-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.opx-choices span { border: 1px solid var(--opx-line-strong); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; background: var(--opx-soft); }
.opx-choices .is-picked { background: var(--opx-forest); border-color: var(--opx-forest); color: var(--opx-on-forest); }
.opx-receipt { display: flex; align-items: center; gap: 6px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--opx-line); font: 11px 'IBM Plex Mono', monospace; color: var(--opx-muted); }
.opx-receipt svg { width: 13px; height: 13px; stroke: var(--opx-positive); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Browser window with a dashboard */
.opx-window { border-radius: 12px; overflow: hidden; background: var(--opx-paper); border: 1px solid var(--opx-line-strong); box-shadow: 0 34px 80px -46px color-mix(in srgb, var(--opx-shade) 60%, transparent); }
.opx-bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 9px 14px; background: var(--opx-surface); border-bottom: 1px solid var(--opx-line); }
.opx-dots { display: flex; gap: 6px; }
.opx-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--opx-line-strong); }
.opx-url { justify-self: center; display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 12px; border-radius: 6px; background: var(--opx-fill); font: 12.5px 'IBM Plex Mono', monospace; color: var(--opx-ink-soft); white-space: nowrap; overflow: hidden; }
.opx-url svg { width: 12px; height: 12px; flex: none; fill: none; stroke: var(--opx-ink-soft); stroke-width: 2; stroke-linecap: round; }
.opx-app-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--opx-surface); border-bottom: 1px solid var(--opx-line); }
.opx-app-mark { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--opx-forest); display: grid; place-items: center; }
.opx-app-head b { display: block; font: 700 16px/1.2 'Manrope', sans-serif; }
.opx-app-head small { display: block; font-size: 12px; color: var(--opx-muted); }
.opx-app-head .opx-tag { margin-left: auto; }
.opx-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px 0; font-size: 12.5px; color: var(--opx-ink-soft); }
.opx-counts span { display: inline-flex; align-items: center; gap: 6px; }
.opx-counts b { color: var(--opx-ink); font-weight: 600; }
.opx-counts span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--opx-positive); }
.opx-counts .is-review::before { background: var(--opx-warning); }
.opx-grid-wrap { padding: 10px 14px 16px; overflow-x: auto; }
.opx-week { width: 100%; min-width: 540px; border-collapse: separate; border-spacing: 4px; font-size: 12.5px; }
.opx-week th { padding: 4px 6px 6px; font-size: 11.5px; font-weight: 600; color: var(--opx-ink-soft); text-align: center; }
.opx-week th small { display: block; font-weight: 400; color: var(--opx-muted); }
.opx-week th.is-today { color: var(--opx-ink); box-shadow: inset 0 -2px var(--opx-forest); }
.opx-week th.who { text-align: left; font-size: 12.5px; color: var(--opx-ink); white-space: nowrap; padding-right: 10px; }
.opx-week td { background: var(--opx-recorded); border-radius: 6px; padding: 6px 8px; vertical-align: top; }
.opx-week td b { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.opx-week td b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--opx-positive); }
.opx-week td small { display: block; font-size: 11.5px; color: var(--opx-muted); }
.opx-week td.is-review { background: var(--opx-warning-tint); }
.opx-week td.is-review b::before { background: var(--opx-warning); }
.opx-week td.is-empty { background: transparent; border: 1px dashed var(--opx-line-strong); color: var(--opx-muted); text-align: center; vertical-align: middle; font-size: 11.5px; }
.opx-week td.is-new { box-shadow: inset 0 0 0 1.5px var(--opx-forest); }
.opx-src { display: flex; align-items: center; gap: 4px; margin-top: 3px; font: 11px 'IBM Plex Mono', monospace; color: var(--opx-forest); }

/* Sign-in by screen code */
.opx-signin { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; }
.opx-signin-screen { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 8px 16px; align-items: start; padding: 16px; border-radius: 12px; background: var(--opx-surface); border: 1px solid var(--opx-line); }
.opx-signin-screen b { grid-column: 1 / -1; font: 700 15px/1.2 'Manrope', sans-serif; }
.opx-code { font: 500 27px/1 'IBM Plex Mono', monospace; letter-spacing: .05em; white-space: nowrap; }
.opx-signin-screen p { font-size: 12.5px; line-height: 1.45; color: var(--opx-muted); }
.opx-qr { grid-column: 2; grid-row: 2 / span 2; width: 96px; height: 96px; padding: 5px; border-radius: 6px; background: var(--opx-surface); border: 1px solid var(--opx-line); }
.opx-qr path { fill: var(--opx-ink); }
.opx-mini-phone { width: 150px; padding: 6px; border-radius: 24px; background: var(--opx-device); box-shadow: inset 0 0 0 1px var(--opx-device-edge); }
.opx-mini-phone .opx-screen { border-radius: 19px; padding: 16px 8px 10px; gap: 8px; }
.opx-mini-phone .opx-msg { max-width: 100%; font-size: 12px; }
.opx-mini-phone .opx-choices { justify-content: flex-start; }

.opx-week, .opx-msg time, .opx-code, .opx-src, .opx-receipt { font-variant-numeric: tabular-nums; }

html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; }

/* Play-on-view motion. Without motion, everything shows its final state. */
@keyframes opx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.motion [data-play] .opx-thread > li,
html.motion [data-play] .opx-week td.is-new { opacity: 0; }
html.motion [data-play].is-on .opx-thread > li,
html.motion [data-play].is-on .opx-week td.is-new { animation: opx-in .55s cubic-bezier(.16, 1, .3, 1) forwards; animation-delay: calc(var(--i, 0) * 1s); }

@media (max-width: 560px) {
  .opx-signin { grid-template-columns: 1fr; }
  .opx-mini-phone { justify-self: end; }
  .opx-code { font-size: 23px; }
}