/* Patient simulator: channel controls on the left, the phone with the chosen app on the right. */
:root {
  --app-status: #008069;
  --app-status-ink: #ffffff;
  --app-nav: #efeae2;
  --app-nav-bar: #1f2c34;
}

.phone[data-app="messenger"], .phone[data-app="instagram"] { --app-status: #ffffff; --app-status-ink: #050505; --app-nav: #ffffff; --app-nav-bar: #050505; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --app-status: #202c33; --app-nav: #0b141a; --app-nav-bar: #e9edef; }
  :root:not([data-theme="light"]) .phone[data-app="messenger"], :root:not([data-theme="light"]) .phone[data-app="instagram"] {
    --app-status: #000000; --app-status-ink: #f5f5f5; --app-nav: #000000; --app-nav-bar: #f5f5f5;
  }
}

:root[data-theme="dark"] { --app-status: #202c33; --app-nav: #0b141a; --app-nav-bar: #e9edef; }

:root[data-theme="dark"] .phone[data-app="messenger"], :root[data-theme="dark"] .phone[data-app="instagram"] {
  --app-status: #000000; --app-status-ink: #f5f5f5; --app-nav: #000000; --app-nav-bar: #f5f5f5;
}

.sim-channels { display: grid; margin-top: 8px; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sim-channel {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
  padding: 12px 6px 10px;
}

.sim-channel:hover, .sim-channel:focus-visible { border-color: var(--accent-line); outline: none; }

.sim-channel[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent-text); }

.ch-icon { align-items: center; border-radius: 50%; color: #ffffff; display: inline-flex; height: 36px; justify-content: center; width: 36px; }

.ch-messenger { background: linear-gradient(45deg, #0866ff, #a033ff 70%, #ff5c87); }

.ch-whatsapp { background: #25d366; }

.ch-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

.sim-menu, .sim-menu .menu-trigger { width: 100%; }

.sim-menu .menu-trigger { align-items: center; justify-content: space-between; padding-bottom: 8px; padding-top: 8px; text-align: left; }

/* each arrival: where the patient came from, then department · country · language */
.src { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.src-title { color: var(--ink); font-size: 13.5px; font-weight: 600; }

.src-meta { color: var(--muted); font-size: 12px; font-weight: 500; }

.sim-menu .menu-list button { padding: 8px 12px; }

.sim-lang-list { max-height: 360px; overflow-y: auto; }

.sim-menu .menu-list button[aria-selected="true"] .src-title { color: var(--accent-text); }

.sim-menu .menu-list { width: 100%; }

.sim-field { display: flex; flex-direction: column; gap: 5px; }

.sim-label { color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.sim-arrival { background: var(--surface-3); border-radius: 12px; display: grid; gap: 6px 12px; padding: 10px 12px; margin-top: 8px !important; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }

.sim-arrival dt { color: var(--muted); font-size: 12px; font-weight: 600; }

.sim-arrival dd { font-size: 12.5px; margin: 0; overflow-wrap: anywhere; }

.sim-links { display: flex; flex-direction: column; gap: 8px; }

.sim-open { border: 1px solid var(--line); border-radius: 12px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; padding: 11px 36px 11px 14px; position: relative; text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }

.sim-open:hover, .sim-open:focus-visible { background: var(--accent-soft); border-color: var(--accent-line); outline: none; }

.sim-open::after { color: var(--muted); content: "↗"; font-size: 14px; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

.sim-open:hover::after { color: var(--accent-text); }

.sim-open strong { font-family: var(--font-head, inherit); font-size: 13.5px; }

.sim-open span { color: var(--muted); font-size: 12.5px; }

/* phone */
.sim-stage { align-items: center; border: 1px solid var(--line); border-radius: 16px; display: flex; justify-content: center; min-height: 0; min-width: 0; overflow: hidden; position: relative; }

.sim-stage::before { background: radial-gradient(closest-side, var(--accent-soft), transparent); content: ""; height: 70%; left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 70%; }

/* The phone is drawn at a real device size (412 x 900 screen, like a Pixel) and scaled to fit,
   so the apps keep their true proportions. */
.phone-fit { flex: none; position: relative; }

.phone { background: #1b1d20; border-radius: 52px; box-shadow: var(--shadow), inset 0 0 0 2px #3a3d42; height: 920px; left: 0; padding: 10px; position: absolute; top: 0; transform-origin: top left; width: 432px; }

.phone-btn { background: #3a3d42; border-radius: 0 3px 3px 0; position: absolute; right: -3px; width: 3px; }

.phone-btn.power { height: 60px; top: 170px; }

.phone-btn.vol { height: 100px; top: 250px; }

.phone-screen { background: #000000; border-radius: 43px; display: flex; flex-direction: column; height: 100%; overflow: hidden; }

.phone-status { align-items: center; background: var(--app-status); color: var(--app-status-ink); display: flex; flex: none; font-family: Roboto, system-ui, sans-serif; font-size: 13px; font-weight: 500; height: 32px; justify-content: space-between; padding: 0 22px 0 26px; position: relative; }

.phone-punch { background: #050505; border-radius: 50%; height: 12px; left: 50%; position: absolute; top: 10px; transform: translateX(-50%); width: 12px; }

.status-icons { align-items: center; display: inline-flex; gap: 5px; }

.phone-screen iframe { border: 0; flex: 1; width: 100%; }

.phone-nav { align-items: center; background: var(--app-nav); display: flex; flex: none; height: 20px; justify-content: center; }

.phone-nav span { background: var(--app-nav-bar); border-radius: 3px; height: 4px; width: 100px; }

/* ---------- page layout, same frame as /aida ---------- */
.sim-page {
  --panel-shadow: 0 1px 2px rgba(7, 37, 98, 0.04), 0 10px 28px rgba(7, 37, 98, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sim-page { --panel-shadow: none; }
}

:root[data-theme="dark"] .sim-page { --panel-shadow: none; }

.sim-main { gap: 16px; grid-template-columns: 320px minmax(0, 1fr) 320px; padding: 16px 20px 20px; }

.sim-page .desk-panel { border-radius: 16px; box-shadow: var(--panel-shadow); }

.sim-page .desk-panel-head { padding: 14px 16px; }

.sim-form { display: flex; flex-direction: column; gap: 18px; padding: 16px; }

.sim-step { display: flex; flex-direction: column; gap: 0; }

.sim-step > .sim-label { margin-bottom: 8px; }

.sim-step .sim-channels, .sim-step .sim-arrival { margin-top: 0 !important; }

.sim-panel-foot { border-top: 1px solid var(--line); flex: none; padding: 12px 16px; }

.sim-panel-foot .btn { width: 100%; }

.sim-page #sim-help { align-items: center; display: inline-flex; }

@media (max-width: 1100px) {
  body.sim-page { height: auto; min-height: 100dvh; overflow: auto; }
  .sim-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sim-stage { grid-column: 1 / -1; grid-row: 1; padding: 24px 0; }
}

@media (max-width: 760px) {
  .sim-main { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 20px; }
  .desk-sub { display: none; }
}

.sim-page .desk-top .icon-btn { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%; color: #dbe6f7; font-size: 12px; font-weight: 700; height: 24px; width: 24px; }