/* Windows inside a task: busy ring, bar, room for the next window, drop target, dividers; the answer text. */
/* A window waiting for the model: the same ring a working parked task shows. */
.win-busy {
  position: absolute;
  z-index: 5;
  width: 14px; height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(#22d3ee, #8b5cf6, #ec4899, #f59e0b, #22d3ee);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 0.9s linear infinite;
}
.win-busy[hidden] { display: none; }

/* The ✕ on an extra window, at its top right corner (placed by app.js). */
/* The bar on every window: grip, set aside, split right, split down, ✕ (none on the app's window beside others). Faint until pointed at (or reached by keyboard). */
.win-bar {
  position: absolute;
  z-index: 5;
  transform: translateX(-100%);
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  opacity: 0.3;
  transition: opacity 0.15s;
}
.win-bar:hover, .win-bar:has(:focus-visible) { opacity: 1; }
.win-bar button {
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  font: 600 12px/1 var(--sans, inherit);
  border: 0; border-radius: 50%;
  background: transparent; color: var(--muted);
  cursor: pointer;
}
.win-bar button:hover, .win-bar button:focus-visible { background: var(--surface-2); color: var(--fg); }
.win-bar button[hidden] { display: none; }
.win-bar .win-grip { cursor: grab; touch-action: none; }
.win-bar .win-close:hover, .win-bar .win-close:focus-visible { color: var(--danger); }
/* Parked tasks are small previews in the rail: no controls on them. */
.task.paused .win-bar, .task.paused .split-gutter, .task.paused .win-room { display: none; }
/* Room kept for the next window, exactly where it will land. */
.win-room {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  padding: 12px;
  border: 2px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.win-room button {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%;
  background: var(--surface); color: var(--muted); cursor: pointer;
}
.win-room button:hover { color: var(--danger); }
/* Where a dragged window will land: half of the window under the pointer, or all of it to swap. */
.win-drop {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  transition: left 0.08s, top 0.08s, width 0.08s, height 0.08s;
}
.win-drop.swap { border-style: dashed; }
.win-drop[hidden] { display: none; }
.frame-wrap.moving { cursor: grabbing; }
/* Dividers between windows: an 8px grab area over the 1px border, a line in the accent colour when found. */
.split-gutter { position: absolute; z-index: 4; touch-action: none; }
.split-gutter.x { width: 8px; cursor: col-resize; }
.split-gutter.y { height: 8px; cursor: row-resize; }
.split-gutter::after { content: ""; position: absolute; background: var(--accent); opacity: 0; transition: opacity 0.15s; }
.split-gutter.x::after { inset: 0 3px; }
.split-gutter.y::after { inset: 3px 0; }
.split-gutter:hover::after, .split-gutter:focus-visible::after, .split-gutter.active::after { opacity: 1; }
.split-gutter:focus-visible { outline: 0; }
.frame-wrap:not(.split) .split-gutter { display: none; }
.frame-wrap.resizing iframe { pointer-events: none; } /* the pointer stays with the divider */
.frame-wrap.resizing { cursor: grabbing; user-select: none; }

/* split_ui: the windows fill a grid; app.js sets each iframe's top, left,
   width, height and borders from the layout. */

.task .answer {
  position: absolute;
  inset: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  padding: 24px 16px;
}
.task .answer > .md { max-width: 720px; width: 100%; font-size: 18px; line-height: 1.65; }
.md p { margin: 0 0 0.8em; }
.md p:last-child { margin-bottom: 0; }
.md code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 6px; }
.md pre { background: var(--surface-2); padding: 12px 14px; border-radius: 10px; overflow: auto; }
.md pre code { background: none; padding: 0; }