/* Shared tokens and parts for every console version. */
:root {
  --font: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg: #f4f5f7;
  --panel: #ffffff;
  --sunk: #eef0f3;
  --ink: #15171a;
  --ink-2: #3d434c;
  --ink-3: #6a717c;
  --line: #e3e5e9;
  --line-2: #cdd1d8;
  --accent: #2557d6;
  --accent-hover: #1e48b5;
  --accent-tint: #e5ecfb;
  --accent-ink: #1e48b5;
  --wait: #9a3d00;
  --wait-tint: #fdebdc;
  --wait-line: #f3c9a5;
  --work: #2557d6;
  --work-tint: #e5ecfb;
  --ok: #17694a;
  --ok-tint: #dff3ea;
  --danger: #a8261b;
  --danger-tint: #fbe7e5;
  --pause: #6b3fa0;
  --pause-tint: #efe6fa;
  --sleep: #8a909a;
  --shadow: 0 1px 2px rgba(16, 20, 28, .06), 0 4px 16px rgba(16, 20, 28, .06);
  --shadow-lg: 0 8px 40px rgba(16, 20, 28, .18);
  --r: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1114; --panel: #171a1f; --sunk: #1d2127; --ink: #eceef1; --ink-2: #c3c8d0; --ink-3: #8b929d;
    --line: #262b33; --line-2: #343a44; --accent: #5b8cff; --accent-hover: #7aa2ff; --accent-tint: #1b2741; --accent-ink: #a9c2ff;
    --wait: #ffb27a; --wait-tint: #3a2414; --wait-line: #5c3a1f; --work: #7aa2ff; --work-tint: #1b2741; --ok: #6fd3a5; --ok-tint: #12302a;
    --danger: #ff8f84; --danger-tint: #3a1715; --pause: #c9a4f5; --pause-tint: #2b1f3d; --sleep: #6b717b;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1114; --panel: #171a1f; --sunk: #1d2127; --ink: #eceef1; --ink-2: #c3c8d0; --ink-3: #8b929d;
  --line: #262b33; --line-2: #343a44; --accent: #5b8cff; --accent-hover: #7aa2ff; --accent-tint: #1b2741; --accent-ink: #a9c2ff;
  --wait: #ffb27a; --wait-tint: #3a2414; --wait-line: #5c3a1f; --work: #7aa2ff; --work-tint: #1b2741; --ok: #6fd3a5; --ok-tint: #12302a;
  --danger: #ff8f84; --danger-tint: #3a1715; --pause: #c9a4f5; --pause-tint: #2b1f3d; --sleep: #6b717b;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25); color-scheme: dark;
}

* { box-sizing: border-box; }
/* The console itself never scrolls or bounces: a drag that reaches the end
   of the remote page (or of a list) stays there instead of moving the whole
   console on iOS. Its lists scroll inside themselves (.scroll). */
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; }
body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font: inherit; color: inherit; }
/* iOS zooms the whole page into a field whose text is under 16px, and stays
   zoomed: that cropped the console's edges after using the address bar. */
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
button { cursor: pointer; }
a { color: var(--accent-ink); }
.ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic path { vector-effect: non-scaling-stroke; }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--panel); font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--sunk); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--line-2)); }
.btn.danger:hover { background: var(--danger-tint); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--sunk); }
.btn.sm { min-height: 28px; padding: 0 10px; font-size: 13px; }
.btn.lg { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn:disabled { opacity: .5; cursor: default; }
.iconbtn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--ink-2); }
.iconbtn:hover { background: var(--sunk); color: var(--ink); }
.iconbtn.sm { width: 26px; height: 26px; }
kbd { font: 11px var(--mono); padding: 1px 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; color: var(--ink-3); background: var(--panel); }

/* State chips and dots */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; font-size: 12px; font-weight: 500; white-space: nowrap;
  background: var(--sunk); color: var(--ink-2); }
.chip .dot, .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tone-wait { background: var(--wait-tint); color: var(--wait); }
.tone-work { background: var(--work-tint); color: var(--work); }
.tone-work .dot { animation: pulse 1.4s ease-in-out infinite; }
.tone-pause { background: var(--pause-tint); color: var(--pause); }
.tone-idle { background: var(--sunk); color: var(--ink-3); }
.tone-sleep { background: transparent; color: var(--sleep); box-shadow: inset 0 0 0 1px var(--line-2); }
.tone-ok { background: var(--ok-tint); color: var(--ok); }
.tone-danger { background: var(--danger-tint); color: var(--danger); }
@keyframes pulse { 50% { opacity: .35; } }

/* Thumbnails */
.thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sunk); border-radius: 6px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.thumb.asleep img { filter: grayscale(1) opacity(.55); }
.thumb-empty { display: grid; place-items: center; height: 100%; color: var(--ink-3); }

/* The live browser */
/* overflow: the cover's loading bar slides past the right edge; unclipped, it
   made the whole console wider than a phone, which then scrolled sideways. */
.viewer { position: relative; flex: 1; min-height: 0; background: var(--bg); overflow: hidden; }
/* iOS sizes a frame to its content unless its width starts at 1px. */
.viewer iframe { position: absolute; inset: 0; width: 1px; min-width: 100%; height: 100%; border: 0; display: block; }
.viewer-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(2px); }
.viewer-overlay-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 24px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); text-align: center; max-width: 320px; color: var(--ink-2); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line-2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.addressbar { display: flex; align-items: center; gap: 2px; padding: 6px 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
.address { flex: 1; min-width: 0; margin: 0 6px; }
.address input { width: 100%; height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid transparent; background: var(--sunk); color: var(--ink-2); font-size: 13px; outline: none; }
.address input:focus { background: var(--panel); border-color: var(--accent); color: var(--ink); }
.tabsmenu { position: relative; }
.tabcount span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 4px; border: 1.6px solid currentColor; border-radius: 5px; font-size: 11px; font-weight: 600; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 320px; max-height: 60vh; overflow: auto; padding: 6px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.menu-row { display: flex; align-items: center; border-radius: 6px; }
.menu-row.on { background: var(--accent-tint); }
.menu-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border: 0; background: none; text-align: left; border-radius: 6px; }
.menu-item:hover { background: var(--sunk); }
.menu-item.add { flex-direction: row; align-items: center; gap: 6px; color: var(--accent-ink); font-weight: 500; }
.menu-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.menu-sub { font-size: 12px; color: var(--ink-3); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px;
  border-radius: 10px; background: var(--ink); color: var(--bg); box-shadow: var(--shadow-lg); font-weight: 500; animation: rise .18s ease-out; max-width: calc(100vw - 32px); }
.toast .btn { color: var(--bg); }
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }

.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--ink-3); }
.empty strong { color: var(--ink); font-size: 16px; }
.scroll { overflow: auto; min-height: 0; overscroll-behavior: contain; }
textarea, input.field { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); outline: none; }
textarea:focus, input.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 8px; font-weight: 600; letter-spacing: .02em;
  background: hsl(var(--h) 70% 92%); color: hsl(var(--h) 55% 30%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 70% 80%); } }
.facts { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 12px; font-size: 13px; }
.facts-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; color: var(--ink-2); margin-bottom: 6px; flex-wrap: wrap; }
.facts-head .muted { font-weight: 400; }
.facts-h { font-weight: 600; margin-bottom: 4px; }
.facts dl { display: grid; grid-template-columns: minmax(80px, max-content) 1fr; gap: 3px 12px; margin: 0; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
:root[data-theme="dark"] .avatar { background: hsl(var(--h) 35% 22%); color: hsl(var(--h) 70% 80%); }
/* Opening a browser: its last picture, small and centred, until its page shows (Viewer in fleet.js). */
.viewer-cover { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--bg); animation: cover-in .12s ease-out; }
.viewer-cover img { width: min(420px, 70%); max-height: 60%; object-fit: contain; border-radius: 10px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.viewer-cover-words { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); text-align: center; max-width: 320px; }
.viewer-cover-bar { position: absolute; left: 0; top: 0; height: 2px; width: 30%; background: var(--accent); animation: cover-bar 1.1s ease-in-out infinite; }
@keyframes cover-bar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@keyframes cover-in { from { opacity: 0; } }
/* Lost the connection after the page showed: keep it readable, dimmed, with a note. */
.viewer.dimmed iframe { opacity: .55; transition: opacity .3s; }
.viewer-note { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--panel); box-shadow: var(--shadow); font-size: 13px; color: var(--ink-2); }
.viewer-note .spinner { width: 14px; height: 14px; border-width: 2px; }
@media (prefers-reduced-motion: reduce) { .viewer-cover-bar { animation: none; width: 100%; opacity: .5; } .viewer-cover { animation: none; } }