/* css/echo.css -- ECHO (GHOST OS native app)
 *
 * App styles for js/modes/echo.js. Written against the LEGACY variables
 * (--fg, --cyan, --border, --bg-soft, ...), NOT the --nos-* ones: inside
 * GHOST OS, desktop.css remaps those legacy names onto the OS palette on
 * body.null-os .nos-win-body, so a sheet written this way follows the
 * player's own THE JUJU theme instead of fighting it. The --nos-* tokens
 * are for GHOST's own chrome, not for an app sheet.
 *
 * Do not hardcode colours here. The one exception is the launcher accent
 * (orange), which lives in desktop.css beside the other per-app accents.
 *
 * VARIABLES USED ARE ALL REAL. Checked against styles.css :root and the
 * remap block: --bg, --bg-elev, --bg-panel, --bg-soft, --fg, --fg-bright,
 * --fg-dim, --fg-faint, --border, --border-bright, --cyan, --amber, --red,
 * --magenta, --font-mono, --font-display, --pad-sm/md/lg, --r-sm, --r-md.
 * NOT --bg-dim: that one is defined nowhere in the project, so anything
 * using it renders transparent.
 *
 * ECHO is GHOST-only, so these classes never appear in the legacy UI.
 */

.echo-app { height: 100%; overflow-y: auto; }
.echo-wrap {
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
}

/* ---- header: who ECHO is + when it next wakes ---- */
.echo-head {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center; justify-content: space-between;
  padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid var(--border); background: var(--bg-soft);
}
.echo-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.echo-name {
  color: var(--cyan); font-weight: 600;
  font-size: 14px; letter-spacing: 2px;
}
.echo-tag {
  color: var(--fg-faint); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase;
}
/* Running, not idling. Slow so it reads as a heartbeat rather than an
   alarm; reduced-motion drops it to a static dot. */
.echo-dot {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-radius: 50%; background: var(--cyan);
  animation: echo-pulse 2.4s ease-in-out infinite;
}
@keyframes echo-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .echo-dot { animation: none; }
}
.echo-next { color: var(--fg-dim); font-size: 11px; white-space: nowrap; }
.echo-next b { color: var(--fg-bright); font-weight: 600; }

/* ---- transient note (a failed call, nothing more) ---- */
.echo-note {
  padding: 7px 10px; margin-bottom: 8px;
  border-left: 2px solid var(--cyan);
  background: var(--bg-soft); color: var(--fg-dim);
  font-size: 11px;
}
.echo-note-bad { border-left-color: var(--red); color: var(--fg); }

/* ---- "while you were gone" ---- */
.echo-alert {
  padding: 9px 11px; margin-bottom: 10px;
  border: 1px solid var(--amber); background: var(--bg-panel);
}
.echo-alert-h {
  color: var(--amber); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 7px;
}

/* ---- the log ---- */
.echo-logwrap {
  padding: 9px 11px;
  border: 1px solid var(--border); background: var(--bg-soft);
}
.echo-log-h {
  color: var(--fg-faint); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 7px;
}
.echo-empty { color: var(--fg-faint); font-size: 11px; margin: 4px 0; }

/* ---- rows ---- */
.echo-list { list-style: none; margin: 0; padding: 0; }
.echo-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.echo-row:last-child { border-bottom: 0; }
.echo-when {
  flex: 0 0 68px;
  color: var(--fg-faint); font-size: 10px;
  text-align: right; white-space: nowrap;
}
.echo-what { flex: 1 1 auto; min-width: 0; line-height: 1.45; }
/* The amount is money ECHO brought IN -- cyan, not the warm colour. It
   was red while ECHO skimmed its owner; now that it raids for them, red
   would read as a loss on every line that is a win. */
.echo-what b { color: var(--cyan); font-weight: 600; }
.echo-fee { color: var(--fg-faint); font-size: 10px; margin-left: 4px; }

/* A refused cycle is not a failure -- it is the floor doing its job, so
   it reads quiet rather than alarming. An error does read alarming. */
.echo-refused .echo-what { color: var(--fg-dim); }
.echo-refused .echo-what b { color: var(--fg-dim); }
.echo-error .echo-what { color: var(--red); }
.echo-row-new { background: rgba(255, 157, 46, 0.05); }

/* ---- buttons ---- */
.echo-ack, .echo-more {
  margin-top: 8px; padding: 6px 13px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--cyan); background: transparent;
  border: 1px solid var(--cyan); border-radius: var(--r-sm);
  cursor: pointer;
}
.echo-ack:hover, .echo-more:hover { color: var(--fg-bright); }
.echo-ack[disabled], .echo-more[disabled] {
  opacity: 0.45; cursor: default;
}
.echo-more { color: var(--fg-dim); border-color: var(--border-bright); }
.echo-more:hover { color: var(--fg); }

/* ---- portrait: the window is fullscreen, so give rows the width ---- */
@media (orientation: portrait) {
  .echo-wrap { padding: 8px; }
  .echo-head { gap: 6px; }
  .echo-when { flex-basis: 56px; }
}

/* ============================================================
   LEGACY TEASER (screen-echo, js/modes/echoteaser.js)
   ------------------------------------------------------------
   Lives in the LEGACY UI, not under body.null-os, which is why it
   matters that this whole sheet is written against the legacy variable
   names: styles.css :root defines them directly, and GHOST's remap
   covers the same names inside a window body. One sheet, both skins,
   no duplication.

   The panel is deliberately styled as something switched OFF: the live
   parts of the app are cyan, and everything here that would be a
   control is dimmed. The only full-strength element is the button.
   ============================================================ */

.echo-t-wrap {
  max-width: 720px; margin: 0 auto; padding: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg);
}

.echo-t-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid var(--border); background: var(--bg-soft);
}
.echo-t-name {
  color: var(--cyan); font-weight: 600;
  font-size: 14px; letter-spacing: 2px;
}
.echo-t-tag {
  color: var(--fg-faint); font-size: 10px;
  letter-spacing: 1px; text-transform: uppercase;
}
/* Running, but not for you: the pulse is the one thing here that is
   alive, and it is the thing you do not own. */
.echo-t-dot {
  width: 7px; height: 7px; flex: 0 0 auto;
  border-radius: 50%; background: var(--cyan);
  animation: echo-t-pulse 2.4s ease-in-out infinite;
}
@keyframes echo-t-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .echo-t-dot { animation: none; }
}

.echo-t-blurb { padding: 0 2px 8px; color: var(--fg-dim); }
.echo-t-blurb p { margin: 0 0 7px; line-height: 1.5; }
.echo-t-blurb strong { color: var(--fg); font-weight: 600; }

.echo-t-feedwrap {
  padding: 9px 11px; margin-bottom: 8px;
  border: 1px solid var(--border); background: var(--bg-soft);
}
.echo-t-feed-h {
  color: var(--fg-faint); font-size: 10px;
  letter-spacing: 2px; text-transform: uppercase; margin-bottom: 7px;
}
.echo-t-list { list-style: none; margin: 0; padding: 0; }
.echo-t-row {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.echo-t-row:last-child { border-bottom: 0; }
.echo-t-when {
  flex: 0 0 68px; text-align: right; white-space: nowrap;
  color: var(--fg-faint); font-size: 10px;
}
.echo-t-amt { color: var(--cyan); font-weight: 600; }
.echo-t-note { color: var(--fg-faint); font-size: 10px; }
.echo-t-empty { color: var(--fg-faint); font-size: 11px; padding: 4px 0; }
.echo-t-redact {
  margin-top: 8px; padding-top: 7px;
  border-top: 1px solid var(--border);
  color: var(--fg-faint); font-size: 10px; line-height: 1.5;
}
.echo-t-redact strong { color: var(--fg-dim); }

/* The dead console. Nothing here is interactive and it should look it. */
.echo-t-dead {
  padding: 9px 11px; margin-bottom: 10px;
  border: 1px dashed var(--border); background: transparent;
}
.echo-t-dead-row {
  display: flex; justify-content: space-between;
  padding: 3px 0; color: var(--fg-dim); font-size: 11px;
}
.echo-t-off { color: var(--fg-faint); }

.echo-t-cta {
  display: block; width: 100%;
  padding: 11px 14px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--cyan); background: transparent;
  border: 1px solid var(--cyan); border-radius: var(--r-sm);
  cursor: pointer;
}
.echo-t-cta:hover { color: var(--fg-bright); border-color: var(--fg-bright); }