/* ═══════════════════════════════════════════════════════════
   CENTURY HEADQUARTERS  ·  ECHO

   Built from the existing tokens. ECHO is a console attached to
   the command bar, not a chat page. The dashboard stays primary.
   ═══════════════════════════════════════════════════════════ */

/* ── alignment ──────────────────────────────────────────────
   The bottom rail was a flex row with space-between, so the left
   group (DATA) and the right group (BUILD) being different widths
   pushed ECHO off true centre. A three column grid with equal side
   tracks centres it on the workspace instead. Both modes use
   symmetric stage columns, so viewport centre is workspace centre. */

.rail--bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px) minmax(0, 1fr);
  align-items: end;
  gap: 18px;
}
.rail--bottom .rail__l { justify-self: start; }
.rail--bottom .rail__r { justify-self: end; }

/* the track owns the width, so the element is simply full bleed in it */
.echo { position: relative; width: 100%; }

/* ECHO stays operable while a module is expanded. The base sheet dims
   the command bar for focus; ECHO is the one control that must keep
   working, since "open revenue" is followed by another question. */
body.is-expanded .echo { opacity: 1; pointer-events: auto; }
body.is-expanded .echo .echo__frame { border-color: var(--edge-2); }

/* ── console above the input ── */

/* The console sits flush on the input so the two share an edge and
   read as one instrument, not two stacked rectangles. */
.ec {
  position: absolute; bottom: 100%; left: 0; right: 0;
  display: flex; flex-direction: column;
  z-index: 30;
  background: linear-gradient(180deg, rgba(10, 19, 32, 0.975), rgba(8, 14, 24, 0.975));
  border: 1px solid var(--edge-2);
  border-bottom: 0;
  clip-path: polygon(0 10px, 10px 0, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 -2px 40px rgba(0, 0, 0, 0.55);
}
.ec[hidden] { display: none; }

/* short connector back toward the core above */
.ec__tether {
  position: absolute; left: 50%; bottom: 100%;
  width: 1px; height: 16px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, transparent, var(--cy));
  opacity: 0.55;
}
.ec__tether::after {
  content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 5px; height: 5px; margin-left: -2.5px;
  background: var(--cy); transform: rotate(45deg);
  box-shadow: 0 0 7px var(--cy-glow);
}
/* Simple mode has no core to connect to */
body.is-simple .ec__tether { display: none; }

/* header rail */
.ec__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px 7px;
  border-bottom: 1px solid var(--edge-1);
  background: rgba(16, 30, 48, 0.5);
  flex: none;
}
.ec__id { font-size: 8px; letter-spacing: 0.22em; color: var(--cy-hi); }
.ec__slash { font-size: 8px; color: var(--ink-4); }
.ec__sys { font-size: 8px; letter-spacing: 0.2em; color: var(--ink-4); }
.ec__state {
  margin-left: auto;
  font-size: 7.5px; letter-spacing: 0.2em; color: var(--ink-3);
  padding-left: 9px; border-left: 1px solid var(--edge-1);
}
.ec__state[data-state="thinking"], .ec__state[data-state="acting"] { color: var(--cy-hi); }
.ec__state[data-state="speaking"] { color: var(--cy); }
.ec__state[data-state="done"] { color: var(--ok); }
.ec__state[data-state="error"] { color: var(--warn); }

/* while the console is open the input is its command line, not a
   separate control: square off the joining edge */
.echo.is-live .echo__frame {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  /* side edges continue the console's, the shared edge stays quiet */
  border-color: var(--edge-2);
  border-top-color: var(--edge-1);
  background: linear-gradient(to bottom, rgba(12, 22, 36, 0.975), rgba(8, 14, 24, 0.975));
}

.ec__log {
  display: flex; flex-direction: column;
  max-height: 230px; overflow-y: auto;
  padding: 4px 0 6px;
  scrollbar-width: thin; scrollbar-color: var(--edge-2) transparent;
}
.ec__log::-webkit-scrollbar { width: 3px; }
.ec__log::-webkit-scrollbar-track { background: transparent; }
.ec__log::-webkit-scrollbar-thumb { background: var(--edge-2); }

/* One turn: label above its text, so the eye reads speaker then
   content in one vertical move rather than tracking across a gutter.
   This is what separates an authored log from a chat table. */
.ec__line {
  display: block;
  padding: 9px 14px 10px 12px;
  border-left: 2px solid transparent;
}

/* a separator only at turn boundaries, never between every line */
.ec__line.is-user + .ec__line { margin-top: 0; }
.ec__line:not(.is-user) + .ec__line.is-user {
  border-top: 1px solid rgba(146, 194, 240, 0.09);
  margin-top: 4px;
}

.ec__who {
  display: block;
  font-size: 7px; letter-spacing: 0.24em;
  color: var(--ink-4);
  margin-bottom: 5px;
}
.ec__txt {
  display: block;
  font-size: 11.5px; line-height: 1.62;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

/* the command you gave is secondary: it is already known */
.ec__line.is-user { background: rgba(6, 12, 21, 0.55); }
.ec__line.is-user .ec__who { color: rgba(138, 168, 199, 0.32); }
.ec__line.is-user .ec__txt { font-size: 10px; color: var(--ink-3); }

/* the answer is the thing being read */
.ec__line:not(.is-user) { border-left-color: var(--cy); }
.ec__line:not(.is-user) .ec__who { color: var(--cy-hi); opacity: 0.6; }

/* ── confirmation card ── */

/* a distinct artifact docked inside the console, not a floating card */
.ec__confirm {
  margin: 0 10px 10px;
  background: rgba(14, 22, 34, 0.96);
  border: 1px solid rgba(255, 184, 77, 0.42);
  border-left: 2px solid var(--warn);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
  padding: 12px 14px 13px;
}
.ec__confirm[hidden] { display: none; }

.ecc__h { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ecc__mark { width: 7px; height: 7px; background: var(--warn); transform: rotate(45deg); box-shadow: 0 0 9px var(--warn-glow); flex: none; }
.ecc__t { font-size: 9px; letter-spacing: 0.2em; color: var(--warn); }

.ecc__big {
  font-family: var(--sans); font-size: 30px; font-weight: 300; line-height: 1;
  color: var(--ink-max); font-variant-numeric: tabular-nums;
  margin-bottom: 11px;
}

.ecc__rows { display: grid; gap: 5px; padding-bottom: 11px; border-bottom: 1px solid var(--edge-1); }
.ecc__r { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ecc__k { font-size: 8.5px; letter-spacing: 0.15em; color: var(--ink-4); }
.ecc__v { font-size: 10px; letter-spacing: 0.08em; color: var(--ink-1); text-align: right; }

.ecc__warn { margin-top: 9px; font-size: 9px; line-height: 1.5; color: var(--warn); }

.ecc__a { display: flex; gap: 9px; margin-top: 11px; }
.btn--confirm { border-color: rgba(255, 184, 77, 0.5); color: var(--warn); }
.btn--confirm .btn__mark { border-color: var(--warn); }
.btn--confirm:hover { border-color: var(--warn); background: rgba(70, 48, 12, 0.4); color: #ffd08a; }
.btn--confirm:hover .btn__mark { background: var(--warn); border-color: var(--warn); }

/* ── state orb, replaces the static glyph ── */

.ec-orb { position: relative; width: 10px; height: 10px; flex: none; display: block; }
.ec-orb__core {
  position: absolute; inset: 2px;
  background: var(--cy); transform: rotate(45deg);
  box-shadow: 0 0 8px var(--cy-glow);
  transition: background 240ms var(--ease-m), box-shadow 240ms var(--ease-m), inset 240ms var(--ease-m);
}
.ec-orb__ring {
  position: absolute; inset: 0;
  border: 1px solid var(--edge-2); transform: rotate(45deg);
  opacity: 0; transition: opacity 240ms var(--ease-m);
}

.ec-orb[data-state="thinking"] .ec-orb__core { animation: ecThink 1.5s var(--ease-m) infinite; }
.ec-orb[data-state="thinking"] .ec-orb__ring { opacity: 1; animation: ecRing 2.4s linear infinite; }
@keyframes ecThink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ecRing { to { transform: rotate(405deg); } }

.ec-orb[data-state="acting"] .ec-orb__core { background: var(--cy-hi); animation: ecAct 0.7s var(--ease-m) infinite; }
.ec-orb[data-state="acting"] .ec-orb__ring { opacity: 1; }
@keyframes ecAct { 0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); } 50% { opacity: 0.55; transform: rotate(45deg) scale(0.78); } }

.ec-orb[data-state="speaking"] .ec-orb__core { background: var(--cy-hi); box-shadow: 0 0 14px rgba(69,210,255,0.75); animation: ecSpeak 0.42s ease-in-out infinite; }
@keyframes ecSpeak { 0%, 100% { transform: rotate(45deg) scale(0.9); } 50% { transform: rotate(45deg) scale(1.25); } }

.ec-orb[data-state="done"] .ec-orb__core { background: var(--ok); box-shadow: 0 0 12px rgba(82,224,164,0.6); }
.ec-orb[data-state="error"] .ec-orb__core { background: var(--warn); box-shadow: 0 0 12px var(--warn-glow); }

body.is-simple .ec-orb__core,
body.is-simple .ec-orb__ring { animation: none !important; }

/* ── settings ── */

.ec-gear {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  width: 16px; height: 16px; padding: 0; flex: none;
  background: none; border: 0; cursor: pointer;
}
.ec-gear__b { display: block; height: 1px; background: var(--ink-4); transition: background 180ms var(--ease-m); }
.ec-gear__b:nth-child(1) { width: 11px; }
.ec-gear__b:nth-child(2) { width: 7px; }
.ec-gear__b:nth-child(3) { width: 13px; }
.ec-gear:hover .ec-gear__b { background: var(--cy); }

.ec-set {
  position: absolute; bottom: calc(100% + 10px); right: 0; width: 280px; z-index: 40;
  background: rgba(11, 20, 34, 0.98);
  border: 1px solid var(--edge-2);
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.72);
  padding: 11px 13px 12px;
}
.ec-set[hidden] { display: none; }

.ec-set__h { display: flex; align-items: center; justify-content: space-between; font-size: 8.5px; letter-spacing: 0.2em; color: var(--ink-3); padding-bottom: 9px; border-bottom: 1px solid var(--edge-1); margin-bottom: 10px; }
.ec-set__status { font-size: 8px; letter-spacing: 0.14em; color: var(--ink-4); }
.ec-set__status[data-tone="live"] { color: var(--cy-hi); }
.ec-set__status[data-tone="warn"] { color: var(--warn); }

.ec-set__r { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ec-set__k { font-size: 8.5px; letter-spacing: 0.15em; color: var(--ink-3); flex: 1; }
.ec-set__v { font-size: 9px; color: var(--ink-2); width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.ec-set__note { margin: 8px 0 0; font-size: 8.5px; line-height: 1.55; color: var(--ink-4); }

.ec-tog { display: flex; align-items: center; gap: 7px; font-family: inherit; font-size: 8px; letter-spacing: 0.14em; padding: 4px 8px; color: var(--ink-4); background: none; border: 1px solid var(--edge-1); cursor: pointer; transition: color 180ms var(--ease-m), border-color 180ms var(--ease-m); }
.ec-tog__d { width: 5px; height: 5px; background: var(--ink-4); transform: rotate(45deg); transition: background 180ms var(--ease-m), box-shadow 180ms var(--ease-m); }
.ec-tog.is-on { color: var(--cy-hi); border-color: rgba(69, 210, 255, 0.45); }
.ec-tog.is-on .ec-tog__d { background: var(--cy); box-shadow: 0 0 7px var(--cy-glow); }
.ec-tog:hover { border-color: var(--edge-3); }
.ec-tog:active { transform: translateY(1px); }

.ec-range { -webkit-appearance: none; appearance: none; flex: 1; height: 3px; background: rgba(120,165,210,0.2); outline: none; cursor: pointer; }
.ec-range::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 9px; background: var(--cy); transform: rotate(45deg); cursor: pointer; box-shadow: 0 0 7px var(--cy-glow); }
.ec-range::-moz-range-thumb { width: 9px; height: 9px; background: var(--cy); border: 0; cursor: pointer; }

.ec-sel { flex: 1; min-width: 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em; color: var(--ink-2); background: var(--surf-3); border: 1px solid var(--edge-1); padding: 4px 6px; outline: none; cursor: pointer; }
.ec-sel:disabled { opacity: 0.4; cursor: default; }

/* ── money moment, restrained ── */

.ec-cer {
  position: fixed; inset: 0; z-index: 800;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0; transition: opacity 380ms var(--ease-m);
}
.ec-cer[hidden] { display: none; }
.ec-cer.is-on { opacity: 1; }

.ec-cer__c {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 26px 42px;
  background: rgba(9, 17, 29, 0.94);
  border: 1px solid rgba(82, 224, 164, 0.45);
  clip-path: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 0 70px rgba(82, 224, 164, 0.18), 0 30px 80px rgba(0, 0, 0, 0.8);
  transform: translateY(8px) scale(0.985);
  transition: transform 480ms var(--ease);
}
.ec-cer.is-on .ec-cer__c { transform: none; }

.ec-cer__amt { font-family: var(--sans); font-size: 46px; font-weight: 200; line-height: 1; color: var(--ok); font-variant-numeric: tabular-nums; text-shadow: 0 0 30px rgba(82, 224, 164, 0.35); }
.ec-cer__path { font-size: 9.5px; letter-spacing: 0.22em; color: var(--ink-3); }

/* the HQ yields for the moment, then returns */
body.is-ceremony .stage { filter: brightness(0.55); transition: filter 380ms var(--ease-m); }
body.is-ceremony .core { opacity: 0.4; }
.stage { transition: filter 380ms var(--ease-m); }

@media (prefers-reduced-motion: reduce) {
  .ec-orb__core, .ec-orb__ring { animation: none !important; }
  .ec-cer, .ec-cer__c { transition-duration: 120ms !important; }
}

/* ── responsive ──────────────────────────────────────────────
   The centre track is capped, not fixed, so it shrinks before the
   side groups do. Below tablet the rail metadata steps aside and
   ECHO takes the full width rather than being squeezed. */

@media (max-width: 1100px) {
  .rail--bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 460px) minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 820px) {
  .rail--bottom { grid-template-columns: 1fr; gap: 8px; }
  .rail--bottom .rail__l, .rail--bottom .rail__r { display: none; }
  .ec__log { max-height: 160px; }
  .ec-set { width: min(280px, calc(100vw - 48px)); }
}

@media (max-height: 780px) {
  .ec__log { max-height: 150px; }
}