:root {
  color-scheme: light;
  --background: #f7f9f9;
  --surface: #ffffff;
  --surface-raised: #eef3f2;
  --border: #71847f;
  --text: #172326;
  --muted: #526560;
  --link: #09695d;
  --focus: #0b7f70;
  font: 14px system-ui, sans-serif;
  background: var(--background);
  color: var(--text);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --background: #101316;
  --surface: #191e22;
  --surface-raised: #242b30;
  --border: #69777d;
  --text: #f0f4f4;
  --muted: #b4c0c2;
  --link: #83d9cd;
  --focus: #62cfc0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --background: #101316;
    --surface: #191e22;
    --surface-raised: #242b30;
    --border: #69777d;
    --text: #f0f4f4;
    --muted: #b4c0c2;
    --link: #83d9cd;
    --focus: #62cfc0;
  }
}

html,
body,
main {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

main {
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: var(--background);
}

#toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

button, select {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
}

select option { background: var(--surface); color: var(--text); }
button:focus-visible, select:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

button:disabled {
  opacity: 0.45;
}

#status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen {
  min-width: 0;
  min-height: 0;
  background: #000;
}

#identity { font-size: 11px; color: var(--muted); }
#popout { color: var(--link); }
#clipboard-panel { padding: 0.3rem 0.6rem; background: var(--surface); }
#manual-paste { box-sizing: border-box; width: 100%; height: 4rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); }

.control-help { position: relative; }
.tooltip {
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(100% + 0.4rem);
  width: min(18rem, 72vw);
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 0.35rem;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.2);
  visibility: hidden;
}
.control-help:hover .tooltip,
.control-help:focus-within .tooltip { visibility: visible; }

[hidden] { display: none !important; }
#desktop { max-width: 100%; }

/* Browser | Computer: shown only for an agent that has both (18 Sep 2026). */
#screens { display: inline-flex; }
#screens button { border-radius: 0; }
#screens button:first-child { border-radius: 0.35rem 0 0 0.35rem; }
#screens button:last-child { border-radius: 0 0.35rem 0.35rem 0; border-left: none; }
#screens button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--link);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--link);
}