/* ==========================================================================
   orchestration.css — Orcheum live orchestration panel + conversation thread
   ------------------------------------------------------------------------
   Figma authority: node 568:1920 (AI actions). Live chronological timeline of
   authentic Conductor stage events — never fabricated, never replaced on settle.

     .is-orchestrating  → status line + growing timeline
     .is-synthesizing   → synthesizing beat
     .is-done           → timeline preserved + Synthesized N models + footer

   The component owns ONLY the provenance/timeline. The answer is a sibling.
   ========================================================================== */

:root {
  --orch-ink:            #24252d;
  --orch-muted:          #9f9792;
  --orch-count:          rgba(234, 67, 53, 0.6);
  --orch-file:           #6b6560;
  --orch-divider:        rgba(50, 47, 47, 0.08);
  --orch-hover:          rgba(50, 47, 47, 0.035);
  --orch-tip-bg:         #20242b;
  --orch-spine:          rgba(159, 151, 146, 0.45);

  --orch-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --orch-appear:         360ms;
  --orch-settle:         320ms;
  --orch-expand:         300ms;
  --orch-font:           11.793px;
}

/* ============================ Conversation thread ======================== */

.ws-main.is-conversation .ws-main__scroll { display: none; }
.ws-main.is-conversation { display: flex; flex-direction: column; }

.ws-thread {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  overflow-x: clip;
  flex-direction: column;
  align-items: center;
  padding: 24px 20px 176px;
}
.ws-main.is-conversation .ws-thread { display: flex; }

.ws-composer-dock { display: none; }
.ws-main.is-conversation .ws-composer-dock { display: flex; }

.ws-thread__inner {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 23px;
}

.ws-composer-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 0 20px 20px;
  pointer-events: none;
  background: linear-gradient(to top, var(--color-background) 55%, transparent);
}
.ws-composer-dock .oc-composer {
  pointer-events: auto;
  max-width: 720px;
  min-height: 144px;
}

/* ============================ One turn ================================== */

.orch-turn {
  display: flex;
  flex-direction: column;
  gap: 23px;
  width: 100%;
}

.msg-user {
  align-self: flex-end;
  max-width: 78%;
  padding: 12px;
  border-radius: 18px;
  background: #ecece9;
  -webkit-backdrop-filter: blur(19.65px);
  backdrop-filter: blur(19.65px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.3;
}

/* ======================= Orchestration panel ============================ */

.orch {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 340px;
}

/* --------------------------- working beat ------------------------------- */
.orch__working {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
}
.orch.is-done .orch__working { display: none; }

.orch__sun {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  object-fit: contain;
  display: block;
}
.orch.is-orchestrating .orch__sun,
.orch.is-synthesizing  .orch__sun,
.orch.is-generating    .orch__sun,
.orch.is-iterating     .orch__sun {
  animation: orch-breathe 2.8s var(--orch-ease) infinite;
}

.orch__working-label {
  font-family: var(--font-sans);
  font-size: var(--orch-font);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: 0.118px;
  color: var(--orch-muted);
  white-space: nowrap;
}
.orch__elapsed {
  color: var(--orch-muted);
  opacity: 0.85;
  margin-left: 2px;
}
.orch__ellipsis::after {
  content: "…";
  animation: orch-ellipsis 1.4s steps(4, end) infinite;
}

/* ===================== model marks — quiet provenance ==================== */
.orch-marks {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0;
}

.orch-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-left: 0;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: default;
}
.orch-mark + .orch-mark { margin-left: 4px; }
.orch-mark img {
  width: 15px;
  height: 15px;
  display: block;
  filter: none;
  opacity: 1;
  transition: opacity 200ms var(--orch-ease);
}
.orch-mark:hover { z-index: 3; }
.orch-mark:focus-visible {
  outline: 2px solid var(--orch-count);
  outline-offset: 2px;
  z-index: 3;
}

.orch-mark__tip {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%) translateY(3px);
  min-width: max-content;
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--orch-tip-bg);
  color: #fff;
  text-align: left;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms var(--orch-ease), transform 140ms var(--orch-ease);
  z-index: 6;
}
.orch-mark__tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--orch-tip-bg);
}
.orch-mark__tip b {
  display: block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}
.orch-mark__tip span {
  display: block;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 10.5px;
  line-height: 1.3;
  opacity: 0.72;
  white-space: nowrap;
}
.orch-mark:hover .orch-mark__tip,
.orch-mark:focus-visible .orch-mark__tip,
.orch-mark:focus-within .orch-mark__tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================= activity rows ============================= */
.orch__acts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.orch__acts:empty { display: none; }

.act-row { display: flex; flex-direction: column; }

.act-row__head {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 8px;
  cursor: default;
  animation: orch-row-in var(--orch-appear) var(--orch-ease) both;
}
.act-row.is-expandable .act-row__head { cursor: pointer; }
.act-row.is-expandable .act-row__head:hover { background: var(--orch-hover); }
.act-row__head:focus-visible { outline: 2px solid var(--orch-count); outline-offset: 1px; }

/* Figma: collapsed chevron points right; expanded points down */
.act-row__chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
  opacity: 0.55;
  transform: rotate(-90deg);
  transition: transform 240ms var(--orch-ease);
}
.act-row:not(.is-expandable) .act-row__chevron { visibility: hidden; }
.act-row.is-expanded .act-row__chevron { transform: rotate(0deg); }

.act-row__stat { position: relative; width: 15px; height: 15px; flex: 0 0 auto; }
.act-row__stat img {
  position: absolute; inset: 0;
  width: 15px; height: 15px; display: block;
  transition: opacity 200ms var(--orch-ease);
}
.act-row__spin { animation: orch-spin 0.8s linear infinite; }
.act-row__check { opacity: 0; transform: scale(0.6); transition: opacity 180ms var(--orch-ease), transform 180ms var(--orch-ease); }
.act-row[data-state="complete"] .act-row__spin  { opacity: 0; animation: none; }
.act-row[data-state="complete"] .act-row__check { opacity: 1; transform: scale(1); }

.act-row__desc {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--orch-font);
  line-height: 1.25;
  letter-spacing: 0.118px;
  color: var(--orch-muted);
  min-width: 0;
}
.act-row__file {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11.5px;
  color: var(--orch-file);
}

.act-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--orch-expand) var(--orch-ease),
              opacity var(--orch-settle) var(--orch-ease);
}
.act-row.is-expanded .act-row__panel { grid-template-rows: 1fr; opacity: 1; }
.act-row__clip { overflow: hidden; min-height: 0; }
.act-row__inner {
  padding: 6px 4px 4px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.act-row__attr {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-sans);
  font-size: var(--orch-font);
  line-height: 1.45;
  color: var(--orch-muted);
}
.act-row__attr b { font-weight: 500; color: var(--orch-ink); }
.act-row__explain {
  padding-left: 12px;
  border-left: 1.5px solid var(--orch-divider);
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-foreground);
}

.act-contrib { display: flex; flex-direction: column; gap: 4px; }
.act-contrib__title {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orch-muted);
}
.act-contrib__body {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--orch-ink);
}
.act-contrib__list {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--orch-ink);
}
.act-contrib__list--links a {
  color: var(--orch-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.act-contrib__images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.act-contrib__images img {
  max-width: 120px;
  max-height: 80px;
  border-radius: 8px;
  object-fit: cover;
}

/* ========================= synthesis block (done) ======================== */
.act-synth { display: none; flex-direction: column; gap: 7px; }
.orch.is-done .act-synth { display: flex; }

.act-synth__head {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
}
.act-synth__head:hover { background: var(--orch-hover); }
.act-synth__head:focus-visible { outline: 2px solid var(--orch-count); outline-offset: 1px; }

.act-synth__sun { width: 15px; height: 15px; flex: 0 0 auto; object-fit: contain; display: block; }
.act-synth__label {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--orch-font);
  line-height: 1.25;
  letter-spacing: 0.118px;
  color: var(--orch-muted);
  white-space: nowrap;
}
.act-synth__label b { font-weight: 400; color: var(--orch-muted); }
.act-synth__sep-dot { opacity: 0.55; margin: 0 1px; }
.act-synth__chevron {
  width: 15px; height: 15px; flex: 0 0 auto; display: block;
  opacity: 0.55;
  transform: rotate(-90deg);
  transition: transform 240ms var(--orch-ease);
}
.orch.is-expanded .act-synth__chevron { transform: rotate(0deg); }

.act-synth__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--orch-expand) var(--orch-ease),
              opacity var(--orch-settle) var(--orch-ease);
}
.orch.is-expanded .act-synth__panel { grid-template-rows: 1fr; opacity: 1; }
.act-synth__clip { overflow: hidden; min-height: 0; }

.act-synth__receipt {
  margin-top: 8px;
  padding: 12px;
  background: #f7f7f5;
  border: 1px solid var(--orch-divider);
  border-radius: 8px;
}
.act-synth__pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--orch-ink);
  white-space: pre-wrap;
  word-break: break-all;
}

.act-synth__foot {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--orch-font);
  line-height: 1.25;
  letter-spacing: 0.118px;
  color: var(--orch-muted);
}

/* ============================ Answer body =============================== */

.msg-answer {
  display: flex;
  flex-direction: column;
  gap: 23px;
  width: 100%;
  color: var(--color-foreground);
  font-family: var(--font-sans);
}
.msg-answer__intent {
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-foreground);
}
.msg-answer__lede { font-size: 14px; line-height: 1.4; }
.msg-answer__rule { height: 0; border-top: 1px solid var(--orch-divider); width: 100%; }
.msg-answer__section { display: flex; flex-direction: column; gap: 14px; }
.msg-answer__h {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.2px;
  line-height: 1.15;
  color: var(--color-foreground);
}
.msg-answer__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.msg-answer__list li { font-size: 13.5px; line-height: 1.6; letter-spacing: -0.2px; }

.msg-answer > * {
  opacity: 0;
  transform: translateY(4px);
  animation: orch-answer-in 420ms var(--orch-ease) forwards;
  animation-delay: var(--reveal-delay, 0ms);
}

.orch-provenance {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.orch-provenance__title {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orch-muted);
}
.orch-provenance__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.orch-provenance__links a {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--orch-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.orch-provenance__images {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.orch-provenance__images img {
  max-width: 160px;
  max-height: 100px;
  border-radius: 10px;
  object-fit: cover;
}

@keyframes orch-answer-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes orch-row-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes orch-spin {
  to { transform: rotate(360deg); }
}
@keyframes orch-breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
@keyframes orch-ellipsis {
  0%   { content: ""; }
  25%  { content: "·"; }
  50%  { content: "··"; }
  75%, 100% { content: "···"; }
}

@media (max-width: 560px) {
  .ws-thread { padding: 20px 14px 128px; }
  .msg-user { max-width: 88%; }
  .orch { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .orch__sun { animation: none !important; }
  .act-row__head { animation-duration: 1ms !important; transform: none !important; }
  .orch-mark img { transition: none; }
  .act-row__spin { animation: none !important; }
  .orch__ellipsis::after { animation: none; content: "…"; }
  .act-row__panel, .act-synth__panel { transition: opacity 1ms; }
  .msg-answer > * { animation-duration: 1ms !important; transform: none !important; }
}