/* Computers panel — styles for app/os/computers.js.
   Reuses the color/spacing tokens defined on :root in app/css/member.css (--bg, --panel,
   --ink, --dim, --rule, --accent, --pill, --radius) rather than redefining them. Phone-first
   at 390px; every tap target is at least 44px tall. */

/* Drive handoff — Needs your attention over the Live View thumbnail (Grok chrome, On Easy copy). */
.oe-computer-stage {
  margin: 0.35rem 0 0.85rem;
  display: grid;
  gap: 0.55rem;
}
.oe-computer-stage-inner { display: grid; gap: 0.55rem; }
.oe-attn {
  background: #3a2a12;
  border: 1px solid #6a4e22;
  border-radius: 1.15rem;
  padding: 0.9rem 1rem 0.85rem;
  color: #f6f1e6;
}
.oe-attn-kicker {
  margin: 0 0 0.35rem;
  color: #f0a04a;
  font-weight: 650;
  font-size: 1.02rem;
}
.oe-attn-body { margin: 0 0 0.75rem; line-height: 1.35; font-size: 0.95rem; }
.oe-attn-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oe-attn-skip,
.oe-attn-go {
  min-height: 44px;
  padding: 0 0.95rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
.oe-attn-skip { background: #2a241c; color: #f6f1e6; }
.oe-attn-go { background: #f4f4f7; color: #14120e; font-weight: 650; }
/* Over the stream, not instead of it. The page stays tappable underneath for password and 2FA.
   The card itself does not eat taps — only Skip / I'm done do — so a login field under it still focuses. */
#computer-preview .oe-attn--overlay {
  position: absolute;
  z-index: 5;
  left: 0.45rem;
  right: 0.45rem;
  top: 0.45rem;
  bottom: auto;
  max-height: calc(100% - 4.8rem);
  overflow: auto;
  margin: 0;
  pointer-events: none;
}
#computer-preview .oe-attn--overlay .oe-attn-actions { pointer-events: auto; }
.oe-live-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin: 0.45rem 0 0;
}
.oe-live-keys[hidden] { display: none; }
.oe-live-key-input {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 44px;
  font-size: 16px;
  padding: 0.4rem 0.7rem;
  border-radius: 0.7rem;
  border: 1px solid var(--rule, #f4f4f714);
  background: #fff;
  color: #111;
}
.oe-live-key-input[hidden],
#btn-computer-key-backspace[hidden] { display: none; }
#btn-computer-keyboard,
#btn-computer-key-backspace { min-height: 44px; }
.oe-live-key-status {
  flex: 0 0 100%;
  min-height: 1.1em;
  color: var(--muted, #a4a5ad);
  font-size: 0.72rem;
}
.oe-live-key-status.is-error { color: var(--danger, #ff8d8d); }
#computer-preview .oe-attn--overlay[hidden] { display: none; }
.oe-live-thumb {
  position: relative;
  border-radius: 0.9rem;
  overflow: hidden;
  background: #111;
  aspect-ratio: 16 / 10;
  height: 11.5rem;
  border: 1px solid var(--rule, #f4f4f714);
}
.oe-live-thumb iframe,
.oe-live-empty {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border: 0;
  color: #111;
}
.oe-live-thumb iframe {
  background: #0c0c0e;
  object-fit: contain;
  object-position: center top;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}
.oe-live-touch {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.oe-live-empty { background: #fff; }
.oe-live-empty { display: grid; place-content: center; gap: .35rem; padding: 1rem; text-align: center; }
.oe-live-empty strong { color:#17171a; font-size:1rem; letter-spacing:-.01em; }
.oe-live-empty span { color:#6f7078; font-size:.82rem; line-height:1.35; }
.oe-computer-presence {
  display:flex; align-items:center; gap:.45rem; min-height:1.6rem; margin:.1rem 0 .5rem;
  padding:0 .15rem; color:var(--oe-meta,#dddde8);
}
.oe-computer-presence .oe-hint { font-size:.78rem; line-height:1.2; }
.oe-computer-presence #computer-preview-kicker { color:var(--ink,#f4f4f7); font-weight:650; }
.oe-computer-presence #computer-preview-status { margin-left:auto; }
.oe-computer-presence-dot { width:.5rem; height:.5rem; border-radius:50%; background:#7dffa6; box-shadow:0 0 0 .2rem rgba(125,255,166,.12); }
.oe-computer-details { margin:.35rem 0 0; border-top:1px solid var(--rule,#f4f4f714); }
.oe-computer-details summary { min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--oe-meta,#dddde8); font-size:.82rem; font-weight:650; }
.oe-computer-details[open] { padding-bottom:.35rem; }
.oe-computer-details .oe-hint { margin:0 0 .55rem; max-width:46rem; }
.oe-live-open {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  min-height: 44px;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  background: rgba(20, 20, 24, 0.72);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}
.oe-live-caption {
  margin: 0;
  text-align: center;
  color: var(--dim, #9a9aa8);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Computer chip peek. Same mechanics on phone and desktop.
   Layout difference (named): phone is a bottom sheet; desktop (>=900px) is a
   right-third rail over the chat. Open adds .is-expanded and grows Live View
   inside that same dock. No second modal. No full-viewport dim. Chat outside
   the dock stays clickable (non-modal open attribute, never showModal). */
#computer-preview.oe-computer-rail[open] {
  display: flex;
  flex-direction: column;
  position: fixed;
  z-index: 80;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(78dvh, 100%);
  margin: 0;
  transform: none;
  border-radius: 1.25rem 1.25rem 0 0;
  background: #0c0c0e;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.45);
  overflow-x: clip;
  overflow-y: auto;
  pointer-events: auto;
}
#computer-preview.oe-computer-rail::backdrop { background: transparent; }
#computer-preview.oe-computer-rail[open].is-expanded {
  height: min(92dvh, 100%);
  max-height: 92dvh;
  width: 100%;
  max-width: 100%;
  margin: 0;
  inset: auto 0 0 0;
}
#computer-preview.oe-computer-rail[open] .oe-cpv {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
#computer-preview.oe-computer-rail[open].is-expanded .oe-cpv {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#computer-preview.oe-computer-rail[open].is-expanded .oe-cpv-screen[data-surface="browser"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#computer-preview.oe-computer-rail[open] > .btn { align-self: flex-start; }
#computer-preview #btn-computer-preview-close {
  width: auto;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.75rem;
}
#computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  min-height: min(52vh, 28rem);
  aspect-ratio: auto;
}
/* Drag edge is desktop only (>=900px), matching the home column gutter.
   Phone keeps the full-width bottom sheet; this handle stays hidden there. */
#gutter-computer {
  display: none;
}
@media (min-width: 900px) {
  #computer-preview.oe-computer-rail[open],
  #computer-preview.oe-computer-rail[open].is-expanded {
    inset: 0 0 0 auto;
    width: var(--oe-computer, clamp(18rem, 33.333vw, 36vw));
    min-width: 18rem;
    max-width: min(72vw, 56rem);
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.45);
  }
  /* Same grab as #gutter-left: 8px column, col-resize, native title pill.
     Home paints --rule until hover. That hairline disappears on this black rail,
     so the accent (the purple line in the home tooltip shot) stays on. */
  #gutter-computer {
    display: block;
    position: absolute;
    z-index: 90;
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: col-resize;
    touch-action: none;
    background: var(--accent, #8b7cff);
    pointer-events: auto;
  }
  #gutter-computer::after {
    content: "";
    position: absolute;
    inset: 0 -10px 0 0;
  }
  #gutter-computer:hover,
  body.oe-computer-drag #gutter-computer {
    background: var(--accent, #8b7cff);
  }
  /* Live View, the connection-refused page, and the Open overlay sit under this edge.
     While dragging, they must not take the pointer. */
  body.oe-computer-drag #computer-preview iframe,
  body.oe-computer-drag #computer-preview .oe-live-open,
  body.oe-computer-drag #computer-preview .oe-attn--overlay,
  body.oe-computer-drag #computer-preview .oe-attn--overlay .oe-attn-actions {
    pointer-events: none;
  }
  #computer-preview.oe-computer-rail[open] .oe-live-thumb {
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 12rem;
    max-height: min(38vh, 22rem);
    aspect-ratio: 16 / 10;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
    flex: 1 1 auto;
    height: auto;
    min-height: min(42vh, 24rem);
    max-height: none;
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
  }
}
/* Phone sheet: match the mobile session (390×780) so the stream fills the dock width. */
@media (max-width: 899px) {
  .oe-live-touch:not([hidden]) { display: block; }
  .oe-page-fallback { display: none !important; }
  #computer-preview-live-external { display: none !important; }
  #computer-preview.oe-computer-rail[open] .oe-live-thumb,
  #computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 16rem;
    aspect-ratio: 390 / 780;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-live-thumb {
    flex: 1 1 auto;
    min-height: min(62vh, 36rem);
  }
  /* Expanded Live View is taller than the sheet. Keep Browser / Files / Terminal
     on the visible bottom — the 390×780 stream still scrolls underneath. */
  #computer-preview.oe-computer-rail[open].is-expanded {
    overflow: hidden;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-cpv {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }
  #computer-preview.oe-computer-rail[open].is-expanded .oe-vm-dock {
    position: sticky;
    bottom: 0;
    z-index: 6;
    pointer-events: auto;
  }
}
.oe-cpv {
  position: relative;
  display: grid;
  min-height: 13rem;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0.9rem;
  background: #111;
}
/* Stay inside the dock. The shared 16:10 thumb is for the in-thread stage;
   here it was wider than the rail and cropped Live View over the chat. */
#computer-preview .oe-live-thumb {
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: 14rem;
  aspect-ratio: auto;
  box-sizing: border-box;
}
.oe-cpv-screen[hidden] { display: none; }
.oe-cpv-app {
  min-height: 14rem;
  background: #111;
  padding: 1rem 1rem 5.2rem;
}
.oe-cpv-app-name { margin: 0 0 0.35rem; font-weight: 650; }
.oe-cpv-prompt {
  margin: 0 0 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #9dffb0;
}
/* A real workspace switcher. Names stay visible so these read as tools, not decorative icons. */
.oe-vm-dock {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.35rem;
  height: 4.7rem;
  margin: 0;
  padding: 0.45rem 0.55rem max(0.45rem, env(safe-area-inset-bottom));
  border-radius: 0;
  background: rgba(12, 12, 15, 0.96);
  border-top: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
}
.oe-vm-dock[hidden] { display: none; }
.oe-vm-dock button {
  position: relative;
  min-height: 48px;
  min-width: 4.3rem;
  width: auto;
  flex: 0 1 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0.75rem;
  background: transparent;
  color: #f4f4f7;
  padding: 0.3rem 0.45rem;
  gap: 0.2rem;
  flex-direction: column;
  cursor: pointer;
}
.oe-vm-dock button[aria-pressed="true"] {
  background: rgba(139,124,255,.16);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(139,124,255,.55);
}
.oe-vm-dock button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.45rem;
  width: 1.5rem;
  height: 3px;
  margin-left: -0.75rem;
  border-radius: 50%;
  background: #4c8bf5;
}
.oe-vm-ico { width: 1.75rem; height: 1.75rem; display: block; flex:none; }
.oe-vm-name {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  font-size: .68rem;
  line-height: 1;
  font-weight: 650;
  color: var(--dim,#b7b7c3);
}
.oe-vm-dock button[aria-pressed="true"] .oe-vm-name { color:#fff; }
@media (max-width: 430px) {
  .oe-vm-dock { gap:.15rem; padding-left:.25rem; padding-right:.25rem; }
  .oe-vm-dock button { min-width:0; padding-left:.2rem; padding-right:.2rem; }
  .oe-vm-name { font-size:.62rem; }
}
.oe-access-list { margin: 0.4rem 0 0.7rem; padding-left: 1.1rem; }
.oe-access-list li { margin: 0.25rem 0; }
#btn-computer-access-settings:disabled { opacity: 0.45; cursor: default; }
.oe-access-kicker { font-weight: 650; margin: 0.2rem 0 0.4rem; }
.oe-access-fail { color: #ffb4a8; margin: 0.35rem 0; }
.oe-access-priv { margin: 0.55rem 0 0.8rem; }
.oe-tcc { margin: 0.6rem 0; }
.oe-tcc-pane {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.oe-tcc-side { padding: 0.45rem 0.7rem; font-size: 0.78rem; color: var(--oe-meta, #c4c4d0); }
.oe-tcc-row { display: flex; align-items: center; justify-content: space-between; padding: 0.45rem 0.7rem; }
.oe-tcc-row.is-on { outline: 2px solid #7aa2ff; outline-offset: -2px; background: rgba(122, 162, 255, 0.16); }
.oe-tcc-app { font-weight: 650; }
.oe-tcc-knob {
  width: 2rem; height: 1.15rem; border-radius: 999px; background: #3ddc97; position: relative;
}
.oe-tcc-knob:after {
  content: ""; position: absolute; top: 0.12rem; right: 0.12rem; width: 0.9rem; height: 0.9rem;
  border-radius: 50%; background: #fff;
}
.oe-tcc figcaption { margin-top: 0.35rem; font-size: 0.88rem; }
.oe-access-guide {
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  width: min(28rem, calc(100vw - 1.5rem));
  padding: 0.8rem 0.9rem 0.7rem;
  border-radius: 14px;
  background: var(--oe-panel, #1c1c24);
  color: inherit;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
.oe-access-guide[hidden] { display: none; }

.oe-cp-header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem 0.25rem;
}
.oe-cp-header h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink, #f4f4f7);
}
.oe-cp-lead { margin: 0.35rem 0 0; color: var(--dim, #9a9aa8); font-size: 0.86rem; line-height: 1.4; }

#computer-drive {
  position: fixed; inset: 0; z-index: 90; background: var(--bg, #08080b); color: var(--ink, #f4f4f7); overflow: auto;
  padding: var(--oe-sat, 0) var(--oe-sar, 0) var(--oe-sab, 0) var(--oe-sal, 0);
}
.oe-drive-wrap { max-width: 44rem; margin: 0 auto; padding: 0.75rem 1rem 2rem; display: grid; gap: 0.85rem; }
.oe-drive-head { display: flex; align-items: flex-start; gap: 0.65rem; }
.oe-drive-titles { flex: 1; min-width: 0; }
.oe-drive-titles h2 { margin: 0 0 0.25rem; font-size: 1.2rem; }
.oe-drive-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.oe-drive-actions .btn { min-height: 44px; }

.oe-cp-body { padding: 0.5rem 1rem 2rem; }

.oe-cp-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border-radius: var(--radius, 1.25rem);
  background: var(--panel, #131319);
  border: 1px solid var(--rule, #f4f4f714);
}

.oe-cp-card-head { display: flex; align-items: center; gap: 0.75rem; }
.oe-cp-face { width: 44px; height: 44px; flex: none; display: inline-block; border-radius: 50%; overflow: hidden; background: var(--panel-2, #1a1a22); }
.oe-cp-face svg { width: 100%; height: 100%; display: block; }
.oe-cp-ring { fill: none; stroke: var(--accent, #8b7cff); stroke-width: 4; opacity: 0.55; }
.oe-cp-line { fill: none; stroke: var(--accent, #8b7cff); stroke-width: 4; stroke-linecap: round; }

.oe-cp-card-main { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; flex: 1; }
.oe-cp-name { font-size: 1rem; font-weight: 600; color: var(--ink, #f4f4f7); display: flex; align-items: baseline; gap: 0.4rem; }
.oe-cp-version { font-size: 0.75rem; font-weight: 400; color: var(--dim, #9a9aa8); }

.oe-cp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--pill, 999px);
  font-size: 0.78rem;
  border: 1px solid var(--rule, #f4f4f714);
  color: var(--dim, #9a9aa8);
  background: var(--panel-2, #1a1a22);
  width: fit-content;
}
.oe-cp-pill--online { color: #6ee7a0; border-color: #6ee7a055; }
.oe-cp-pill--offline { color: var(--dim, #9a9aa8); }
.oe-cp-pill--off, .oe-cp-pill--optional, .oe-cp-pill--not-paired { color: var(--dim, #9a9aa8); }
.oe-cp-pill--done { color: #6ee7a0; }
.oe-cp-pill--failed { color: #ff8a8a; }
.oe-cp-pill--needs_input { color: #ffcf7a; }
.oe-cp-pill--queued, .oe-cp-pill--presented { color: var(--dim, #9a9aa8); }

.oe-cp-section { display: flex; flex-direction: column; gap: 0.5rem; }
.oe-cp-section h3 {
  margin: 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dim, #9a9aa8);
}

.oe-cp-hint { margin: 0; color: var(--dim, #9a9aa8); font-size: 0.86rem; line-height: 1.4; }
.oe-cp-draft { margin-top: 0.35rem; }
.oe-cp-note {
  width: 100%;
  min-height: 8rem;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--rule, #f4f4f714);
  background: var(--panel-2, #1a1a22);
  color: var(--ink, #f4f4f7);
  font: inherit;
  resize: vertical;
}

.oe-cp-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.oe-cp-chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.7rem;
  min-height: 44px;
  justify-content: center;
  border-radius: var(--radius, 1.25rem);
  background: var(--panel-2, #1a1a22);
  border: 1px solid var(--rule, #f4f4f714);
  color: var(--ink, #f4f4f7);
  font-size: 0.85rem;
}
.oe-cp-chip-sub { color: var(--dim, #9a9aa8); font-size: 0.72rem; }

.oe-cp-add-site {
  align-self: flex-start;
}

.oe-cp-jobs { display: flex; flex-direction: column; gap: 0.5rem; }
.oe-cp-job {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius, 1.25rem);
  background: var(--panel-2, #1a1a22);
  border: 1px solid var(--rule, #f4f4f714);
  color: var(--ink, #f4f4f7);
  font: inherit;
  text-align: left;
}
.oe-cp-job--attention { border-color: color-mix(in srgb, var(--warning, #ffcf7a) 34%, transparent); }
.oe-cp-job-open { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.oe-cp-job-action { min-height: 36px; padding: 0 .8rem; border-radius: var(--pill, 999px); border: 1px solid var(--rule, #f4f4f714); background: var(--panel, #131319); color: var(--ink, #f4f4f7); font: inherit; font-size: .78rem; font-weight: 650; cursor: pointer; }
.oe-cp-job--attention .oe-cp-job-action { border-color: color-mix(in srgb, var(--warning, #ffcf7a) 42%, transparent); }
.oe-work-plan { order: 3; flex: 1 0 100%; padding-top: .5rem; border-top: 1px solid var(--rule, #f4f4f714); }
.oe-work-plan-summary { margin: 0 0 .45rem; color: var(--dim, #9a9aa8); font-size: .72rem; }
.oe-work-plan-sources { display: flex; align-items: baseline; gap: .45rem; margin: 0 0 .25rem; font-size: .76rem; }
.oe-work-plan-sources strong { color: var(--ink, #f4f4f7); font-weight: 650; }
.oe-work-plan-sources span { min-width: 0; overflow: hidden; color: var(--dim, #9a9aa8); text-overflow: ellipsis; white-space: nowrap; }
.oe-work-plan ul { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.oe-work-plan li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 24px; font-size: .78rem; }
.oe-work-branch { color: var(--dim, #9a9aa8); white-space: nowrap; }
.oe-work-branch--active { color: var(--ink, #f4f4f7); }
.oe-work-branch--attention { color: var(--warning, #ffcf7a); }
.oe-work-branch--done { color: var(--success, #53d18b); }
@media (max-width: 520px) {
  .oe-cp-job { flex-wrap: wrap; }
  .oe-cp-job-open { flex-basis: 100%; }
  .oe-cp-job-action { margin-left: auto; min-height: 40px; }
}
.oe-cp-job-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.oe-cp-job-label { font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-cp-job-time { font-size: 0.72rem; color: var(--dim, #9a9aa8); }
.oe-cp-job--pending .oe-cp-job-time { color: var(--oe-meta, #dddde8); }

.oe-cp-pair { display: flex; flex-direction: column; gap: 0.6rem; }
.oe-cp-pair-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; min-width: 0; }
.oe-cp-pair-mint { align-self: stretch; min-height: 44px; }
.oe-cp-pair-input {
  flex: 1 1 8rem;
  min-width: 0;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 0.9rem;
  border-radius: var(--radius, 1.25rem);
  border: 1px solid var(--rule, #f4f4f714);
  background: var(--panel-2, #1a1a22);
  color: var(--ink, #f4f4f7);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.oe-cp-pair-input::placeholder { color: var(--dim, #9a9aa8); text-transform: none; letter-spacing: normal; }
.oe-note-editor { min-height: 12rem; resize: vertical; font-family: inherit; line-height: 1.45; text-transform: none; letter-spacing: normal; white-space: pre-wrap; }
.oe-note-review { border: 1px solid color-mix(in srgb, var(--accent, #8367ff) 58%, transparent); border-radius: 0.8rem; padding: 0.8rem; }
.oe-cp-pair-btn { min-height: 44px; flex: 0 1 auto; }
@media (max-width: 420px) {
  .oe-cp-pair-row { flex-direction: column; align-items: stretch; }
  .oe-cp-pair-btn, .oe-cp-pair-input, .oe-cp-pair-mint { width: 100%; }
}
.oe-cp-link {
  background: none;
  border: none;
  color: var(--accent, #8b7cff);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.6rem 0;
  min-height: 44px;
  text-align: left;
}
.oe-cp-code {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: var(--ink, #f4f4f7);
  text-align: center;
}

.oe-cp-thread-stack {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.05rem;
  flex: none;
  min-width: 0;
}
.oe-cp-thread-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 2.75rem;
  min-height: 44px;
  min-width: 44px;
  padding: 0 0.55rem;
  gap: 0.28rem;
  border-radius: 999px;
  border: 1px solid var(--oe-frost-line, rgba(255, 255, 255, 0.14));
  background: transparent;
  color: var(--ink, #f4f4f7);
  cursor: pointer;
  flex: none;
  position: relative;
  z-index: 4;
  pointer-events: auto;
}
.oe-cp-thread-chip:hover, .oe-cp-thread-chip:focus-visible {
  border-color: #8b7cff88;
  background: rgba(139, 124, 255, 0.12);
}
.oe-cp-thread-chip:active,
.oe-cp-thread-chip[aria-pressed="true"] {
  border-color: #8b7cff;
  background: rgba(139, 124, 255, 0.22);
  color: #fff;
}
.oe-cp-thread-icon { width: 1.2rem; height: 1.2rem; display: block; flex: none; }
.oe-cp-thread-word {
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}
.oe-cp-thread-chip--offline, .oe-cp-thread-chip--off, .oe-cp-thread-chip--not-paired { color: var(--oe-meta, #dddde8); }
.oe-cp-thread-chip--online { color: #7dffa6; }
.oe-cp-thread-chip--failed { color: #ff8a8a; }
.oe-cp-stop { color: #ffb0c0; border-color: rgba(255, 176, 192, 0.35); }

.oe-cp-danger-link { color: #ff8a8a; }
.oe-cp-forget-confirm { display: flex; flex-direction: column; gap: 0.5rem; }
.oe-cp-danger { min-height: 44px; background: #3a1a1a; border-color: #ff8a8a55; color: #ff8a8a; }
.oe-cp-cancel { min-height: 44px; }

.oe-cp-card--hosted { border-color: #8b7cff55; }
.oe-cp-hosted-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.oe-cp-hosted-actions .btn { min-height: 44px; }
.oe-cp-settings { margin: 1.1rem 0 0; }
.oe-cp-settings > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  color: var(--ink, #f4f4f7); font-weight: 600;
}
.oe-cp-settings-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.35rem 0 0.2rem; }
.oe-cp-glow-spot {
  position: fixed;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 34%, rgba(255,255,255,0.03) 55%, transparent 74%);
  pointer-events: none;
  z-index: 8;
  display: none;
}
#computers.oe-cp-glow .oe-cp-glow-spot { display: block; }
@media (prefers-reduced-motion: reduce) {
  #computers.oe-cp-glow .oe-cp-glow-spot { display: none; }
}

/* Desktop Computer is part of the active task, so its resting place is the
   reserved right rail. A draggable window and a reserved rail cannot coexist:
   moving the window used to leave a dead third of the app behind. Full screen
   remains available for focused work; closing the rail returns the space. */
@media (min-width: 900px) {
  #computer-preview.oe-computer-rail.oe-tool-window[open] {
    inset: 0 0 0 auto !important;
    width: var(--oe-computer, clamp(18rem, 33.333vw, 36vw));
    min-width: 18rem;
    max-width: min(72vw, 56rem);
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    box-shadow: var(--oe-elevation-float, -24px 0 48px rgba(0,0,0,.45));
    resize: none;
    overflow: hidden;
  }
  #computer-preview.oe-tool-window.is-maximized[open] {
    inset: 0 !important;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-left: 0;
  }
  #computer-preview.oe-tool-window .oe-tool-titlebar {
    cursor: default;
    padding: .65rem .7rem;
    gap: .35rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  #computer-preview.oe-tool-window.is-maximized .oe-tool-titlebar { cursor: default; }
  #btn-computer-preview-collapse,
  #computer-preview.oe-tool-window .oe-tool-resize { display:none !important; }
  #computer-preview.oe-tool-window #gutter-computer { display:block; }
  body.oe-tool-drag #computer-preview iframe,
  body.oe-tool-drag #computer-preview .oe-live-open,
  body.oe-tool-drag #computer-preview .oe-attn--overlay { pointer-events:none; }
}
.oe-tool-origin {
  min-width:0;
  max-width:12rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--dim,#9a9aa8);
  font-size:.75rem;
  margin-right:auto;
}
.oe-tool-titlebar h2 { flex:none; }
.oe-tool-titlebar .oe-icon-btn { flex:none; }
#computer-preview-artifacts,
#computer-preview-activity { display:grid; gap:.55rem; }
.oe-tool-row { display:grid; gap:.18rem; padding:.65rem .7rem; border:1px solid var(--rule,#f4f4f714); border-radius:.7rem; background:#17171d; }
.oe-tool-row strong { font-size:.86rem; }
.oe-tool-row span { color:var(--dim,#9a9aa8); font-size:.76rem; overflow-wrap:anywhere; }
.oe-tool-section { margin:.8rem 0 .35rem; color:var(--dim,#9a9aa8); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.oe-session-row { margin-bottom:.42rem; }
.oe-session-actions { display:flex; flex-wrap:wrap; gap:.38rem; margin-top:.25rem; }
.oe-session-actions button { border:1px solid var(--rule,#f4f4f724); border-radius:999px; background:#24242c; color:var(--ink,#f4f4f7); padding:.28rem .58rem; font:inherit; font-size:.72rem; cursor:pointer; }
.oe-session-actions button:hover,.oe-session-actions button:focus-visible { border-color:#8b7cff; outline:none; }

@media (max-width: 899px) {
  #computer-preview.oe-computer-rail.oe-tool-window[open],
  #computer-preview.oe-computer-rail.oe-tool-window[open].is-expanded,
  #computer-preview.oe-computer-rail.oe-tool-window[open].is-maximized {
    inset:0 !important;
    width:100vw;
    max-width:100vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
  }
  #computer-preview .oe-tool-titlebar { padding-top:calc(.65rem + var(--oe-sat,0px)); }
  #btn-computer-preview-collapse,
  #btn-computer-preview-maximize,
  #computer-preview-resize { display:none !important; }
  #computer-preview.oe-computer-rail.oe-tool-window[open] { padding-left:max(.8rem,var(--oe-sal,0px)); padding-right:max(.8rem,var(--oe-sar,0px)); }
  #computer-preview .oe-cpv { flex:1 1 auto; min-height:16rem; }
  #computer-preview .oe-live-thumb { height:100%; min-height:16rem; aspect-ratio:auto; }

  /* v231.9 — the phone Computer is a workspace, not a sheet inside the app.
     Keep one compact escape hatch and give the portrait browser the remaining
     safe viewport so it does not shrink into a letterboxed preview. */
  #computer-preview.oe-computer-rail.oe-tool-window[open].is-maximized {
    box-sizing:border-box;
    padding:
      env(safe-area-inset-top, 0px)
      env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px)
      env(safe-area-inset-left, 0px);
    overflow:hidden;
    border:0;
    box-shadow:none;
  }
  #computer-preview.is-maximized .oe-tool-titlebar {
    flex:0 0 auto;
    min-height:3.25rem;
    padding:.35rem .65rem;
    border-bottom:1px solid rgba(255,255,255,.1);
  }
  #computer-preview.is-maximized .oe-tool-titlebar h2 { font-size:1rem; }
  #computer-preview.is-maximized .oe-tool-origin { font-size:.68rem; }
  #computer-preview.is-maximized #btn-computer-preview-return {
    min-height:2.5rem;
    padding:0 .7rem;
    font-size:.78rem;
  }
  #computer-preview.is-maximized #btn-computer-preview-close {
    min-width:2.5rem;
    width:2.5rem;
    height:2.5rem;
    padding:0;
  }
  #computer-preview.is-maximized .oe-computer-presence {
    flex:0 0 auto;
    min-height:2rem;
    margin:0;
    padding:.25rem .65rem;
  }
  #computer-preview.is-maximized .oe-cpv {
    flex:1 1 0;
    min-height:0;
    margin:0;
    border-radius:0;
    overflow:hidden;
  }
  #computer-preview.is-maximized .oe-cpv-screen[data-surface="browser"] {
    flex:1 1 auto;
    min-height:0;
  }
  #computer-preview.is-maximized .oe-live-thumb,
  #computer-preview.oe-computer-rail[open].is-maximized .oe-live-thumb {
    height:100%;
    min-height:0;
    border:0;
    border-radius:0;
  }
  #computer-preview.is-maximized .oe-vm-dock {
    position:absolute;
    bottom:0;
  }
  #computer-preview.is-maximized .oe-live-keys {
    flex:0 0 auto;
    margin:0;
    padding:.4rem .55rem;
    background:#0c0c0e;
    border-top:1px solid rgba(255,255,255,.1);
  }
  #computer-preview.is-maximized .oe-live-key-status { min-height:0; }
  #computer-preview.is-maximized .oe-sheet-actions,
  #computer-preview.is-maximized .oe-computer-details {
    display:none !important;
  }
}


/* wave1-390-clip */
#computers, #computers .oe-screen-body, #computers-panel, .oe-cp-body, .oe-cp-card {
  max-width: 100%;
  box-sizing: border-box;
}
#computers .oe-screen-body, #computers-panel, .oe-cp-body {
  overflow-x: hidden;
}
.oe-cp-pair-row, .oe-cp-card-head, .oe-cp-actions {
  max-width: 100%;
  min-width: 0;
}
@media (max-width: 520px) {
  #computers, #settings.oe-sheet { overflow-x: hidden; }
  .oe-cp-name { overflow-wrap: anywhere; }
}

.oe-cp-thread-chip--starting, .oe-cp-chip--starting {
  color: #f0d878;
}

/* wave1-390-clip-v2 */
#computers, #computers * { box-sizing: border-box; }
#computers {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}
#computers .oe-cp-body,
#computers .oe-drive-wrap,
#computers .oe-cp-card,
#computers .oe-cp-card-head,
#computers .oe-cp-pair-row,
#computers .oe-cp-actions {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#computers .oe-cp-card-head,
#computers .oe-cp-actions {
  flex-wrap: wrap;
}
@media (max-width: 420px) {
  #computers .oe-drive-wrap { padding-left: 0.75rem; padding-right: 0.75rem; }
  #computers .oe-cp-name { overflow-wrap: anywhere; word-break: break-word; }
  #computers .oe-cp-pill { max-width: 100%; }
}