/* The Terminal (Sage and the team), plan.txt, and the plan in Start a project. Our own CSS. */
.window--terminal .window__status { display: none; }
.terminal { background: #0c0c0c; color: #d6d6d6; font: 13px/1.5 "Lucida Console", "Courier New", ui-monospace, monospace; }

.terminal__form { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #333; }
.terminal__prompt { color: #7fd17f; }
.terminal__input {
  flex: 1; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: #f0f0f0;
  font: inherit; caret-color: #7fd17f;
}
.terminal__input:focus-visible { outline: 1px dotted #7fd17f; outline-offset: 2px; }
.terminal__input:disabled { color: #bdbdbd; opacity: 1; }

.terminal__panes {
  flex: 1; min-height: 0; overflow: auto;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(118px, auto); gap: 3px;
  padding: 6px; background: #0c0c0c; align-content: start;
}
.terminal__panes[data-count="1"] { grid-template-columns: 1fr; }
.terminal__panes[data-count="3"] .team-pane[data-agent="sage"] { grid-column: 1 / -1; }

/* A pane waiting its turn is dimmed by its background only, so its text keeps full contrast. */
.team-pane { min-width: 0; padding: 8px 10px; background: #1a1d26; border: 1px solid #2c4a9a; border-radius: 2px; }
.team-pane[data-status] { background: #0c0c0c; }
.team-pane__head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 700 13px var(--ui-font); }
.team-pane__av { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background: #1d1d1d; opacity: 0.3; filter: grayscale(1); transition: opacity 0.3s, filter 0.3s; }
.team-pane.is-landed .team-pane__av { opacity: 1; filter: none; } /* waiting animals show faint until they arrive */
.team-pane__av.is-done { animation: team-done-bump 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes team-done-bump { 40% { transform: scale(1.35); } }
.team-pane__lines { margin: 0; padding: 0; list-style: none; }
.team-line { overflow-wrap: anywhere; animation: team-line-in 0.25s ease-out both; }
.team-line--ok { color: #7fd17f; }
.team-line--notice { color: #f0f0f0; }
/* A blinking cursor after the newest line of a working pane: the wait is visibly alive. */
.team-pane[data-status="working"] .team-line:last-child::after { content: "▌"; margin-left: 4px; color: #7fd17f; animation: team-blink 1s steps(1) infinite; }
@keyframes team-blink { 50% { opacity: 0; } }
@keyframes team-line-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.terminal__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 10px; border-top: 1px solid #333; }
.terminal__actions:empty { display: none; }
.terminal__label { align-self: center; color: #d6d6d6; font: 12px var(--ui-font); }
.button--primary { border-color: #001f6b; box-shadow: inset 0 0 0 1px #6d8fdf; font-weight: 700; }

/* An animal popping out beside the window, and its one-line bubble (fixed lines only). */
.team-actor {
  position: fixed; z-index: 9004; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 0.5)); transform: scale(0);
  transition: transform 0.32s cubic-bezier(0.3, 1.6, 0.5, 1), left 0.45s ease-out, top 0.45s ease-out,
    width 0.45s ease-out, height 0.45s ease-out, opacity 0.45s;
}
.team-actor.is-popped { transform: scale(1); }
.team-bubble {
  position: fixed; z-index: 9005; max-width: 190px; margin: 0; padding: 6px 10px;
  background: #ffffe1; color: var(--ink); border: 1px solid #000; border-radius: 10px;
  font: 12px/1.35 var(--ui-font); opacity: 0; transition: opacity 0.2s; pointer-events: none;
}
.team-bubble.is-shown { opacity: 1; }

/* plan.txt: Notepad look, read-only; the title line stands apart */
.plan__text { flex: 1; padding: 8px 10px; overflow: auto; background: var(--white); }
.plan__title { margin: 0 0 6px; font: 700 14px/1.35 var(--ui-font); }
.plan__head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: #0c0c0c; color: #f0f0f0; }
.plan__faces { display: flex; gap: 2px; }
.plan__faces img { width: 44px; height: 44px; object-fit: contain; }
.plan__madeby { margin: 0; font: 12px/1.35 var(--ui-font); }
.plan__next { margin: 12px 0 0; padding-top: 8px; border-top: 1px dashed var(--face-dark); font: 12px/1.4 var(--ui-font); color: #333; }
.plan__lines { margin: 0; font: 13px/1.5 "Lucida Console", "Courier New", ui-monospace, monospace; white-space: pre-wrap; }
.plan__text:focus-visible { outline: 1px dotted #000; outline-offset: -3px; }
.plan__bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px; background: var(--face); }
.plan__status { font-size: 12px; }

.start-project__plan {
  margin: 0 0 10px; padding: 8px; max-height: 180px; overflow: auto; background: var(--white);
  border: 1px solid var(--face-dark); font: 12px/1.4 "Lucida Console", "Courier New", ui-monospace, monospace; white-space: pre-wrap;
}

@media (max-width: 720px), (pointer: coarse) and (max-height: 500px) {
  .terminal__panes { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .terminal__panes[data-count="3"] .team-pane[data-agent="sage"] { grid-column: auto; }
  /* While the team works only the active pane is open; every pane opens once the run ends. */
  .terminal[data-busy="true"] .team-pane:not(.is-active) .team-pane__lines { display: none; }
  .team-pane { padding: 6px 8px; }
  .plan__text { flex: none; } /* on a phone the buttons follow the plan, not the bottom of the screen */
  .window[data-id="plan"] .window__body { background: var(--face); }
}
@media (prefers-reduced-motion: reduce) { .team-line, .team-pane .team-line::after, .team-pane__av.is-done { animation: none; } }
/* 16 px stops phones zooming in on focus, upright or turned sideways. */
@media (max-width: 720px), (pointer: coarse) { .terminal__input { font-size: 16px; } }