/* ==========================================================================
   execution-surface.css — the working surface beside the conversation
   Source of truth: Figma 916:14664 ("Conversation" — main area 1 / main area 2)

   The frame is one row of two panes: the conversation on the LEFT (724 of 1433)
   and whatever the run produced on the RIGHT (709). The split only exists while
   a deliverable does; at rest the conversation is the whole frame, which is why
   every rule here hangs off `.ws-main.is-surface` rather than restyling the
   conversation permanently.

   Nothing in this file draws a document. The deliverable inside the panel is
   rendered by the SAME `.msg-answer--md` grammar the thread uses (markdown.css)
   or by ProjectWorkspace (project-workspace.css); this file owns the container,
   its bar, and how the two panes share the frame.
   ========================================================================== */

:root {
  --ws-surface-line: #bdc4c6;
  --ws-surface-bar-h: 66px;              /* the answer header's own band height */
  --ws-surface-pad-x: 24px;              /* 916:14680 — the document's margin */
  --ws-surface-ink: #24252d;
  --ws-surface-muted: #73726c;
  --ws-surface-chip: #f0eee6;
}

/* ============================== Split layout ============================= */
/* Conversation LEFT, deliverable RIGHT — the frame's own order. `is-surface`
   is set by the host only while a surface is mounted, so an ordinary
   conversation is untouched by every rule below. */
.ws-main.is-surface {
  flex-direction: row;
  align-items: stretch;
}
.ws-main.is-surface .ws-conversation {
  display: flex;
  flex: 1 1 50%;
  min-width: 0;
  border-right: 1px solid var(--ws-surface-line);
}
.ws-main.is-surface .ws-surface-host {
  display: flex;
  flex: 1 1 50%;
  min-width: 0;
  animation: ws-surface-in var(--ws-transition, 320ms)
    var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) both;
}

/* The answer header travels INTO the panel when one is open (916:15141), so the
   conversation column keeps its thread and composer and nothing else. The NODE
   is re-parented — not rebuilt — so the controller behind it, its run
   ownership and the one Share button never restart; there is no rule here
   hiding a second copy, because there is no second copy.

   The docked composer belongs to the narrower conversation column. */
.ws-main.is-surface .ws-composer-dock .oc-composer { max-width: min(100%, 720px); }

.ws-surface-host { display: none; min-width: 0; }

@keyframes ws-surface-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ============================== The panel =============================== */
.ws-surface {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  position: relative;
  z-index: 1;
  background: var(--color-background);
}

/* -- the bar (916:15141) --------------------------------------------------
   The answer's metadata row on the left, Export / Share / Close on the right.
   Same height and same rule as the header it replaces, so opening a surface
   moves the band sideways rather than changing the frame's horizon. */
.ws-surface__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ws-surface-bar-h);
  padding: 16px var(--ws-surface-pad-x);
  border-bottom: 1px solid var(--ws-surface-line);
  container-type: inline-size;
  container-name: ws-surface-bar;
}
.ws-surface__meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The re-parented header sheds the band it wore in the conversation — it is a
   row inside this bar now, not a bar of its own. */
.ws-surface__meta .ws-answer-header {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  padding: 0;
  border-bottom: 0;
}
/* The header keeps its own container query, so everything it already knows
   about being narrow — dropping the plan chip first, then the words around the
   numbers — applies unchanged in this narrower bar. Nothing is re-decided
   here; the band simply found itself somewhere smaller. */

.ws-surface__actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Export — 916:15176. The same chip the Share control wears, so the pair reads
   as one set of actions rather than two visiting buttons. */
.ws-surface__action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 2px 8px;
  border: 0;
  border-radius: 7px;
  background: var(--ws-surface-chip);
  color: var(--ws-surface-ink);
  font-family: Geist, Inter, var(--font-sans);
  font-size: 10px;
  line-height: 20px;
  cursor: pointer;
}
.ws-surface__action:hover { filter: brightness(0.97); }
/* Share is the same control it is everywhere else; in this group it simply
   stands beside Export instead of at the end of a band. */
.ws-surface__actions .ws-share {
  flex: 0 0 auto;
  gap: 3px;
  min-width: 54px;
  height: 24px;
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--ws-surface-chip);
  font-size: 10px;
  line-height: 20px;
}
.ws-surface__actions .ws-share:disabled {
  opacity: var(--state-disabled-opacity, 0.5);
  cursor: default;
  filter: none;
}
.ws-surface__action-icon { width: 13px; height: 13px; display: block; }

.ws-surface__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  cursor: pointer;
}
.ws-surface__close:hover { background: var(--ws-surface-chip); }
.ws-surface__close-icon { width: 14px; height: 14px; display: block; opacity: 0.7; }

/* -- the body ------------------------------------------------------------- */
.ws-surface__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* A files surface hands its whole body to ProjectWorkspace, which scrolls its
   own panes. */
.ws-surface[data-format='files'] .ws-surface__body { overflow: hidden; display: flex; }
.ws-surface[data-format='files'] .ws-proj { flex: 1 1 auto; }

/* The deliverable itself. `.msg-answer--md` carries the type; this only gives it
   the panel's margin and a reading measure of its own. */
.ws-surface__doc {
  max-width: 680px;
  padding: 28px var(--ws-surface-pad-x) 64px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
/* On the panel the document's own opening heading IS the title, so it carries
   the weight the conversation's headings do not have to. */
.ws-surface__doc > .msg-md__h--1:first-child { margin-bottom: 4px; }

/* A follow-up that revised THIS artifact rather than making a new one. One calm
   pass of the panel's edge — enough to notice, not enough to interrupt. */
.ws-surface.is-updated .ws-surface__body {
  animation: ws-surface-touched 1.2s var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) both;
}
@keyframes ws-surface-touched {
  0%   { background: rgba(240, 88, 34, 0.05); }
  100% { background: transparent; }
}

/* ==================== The card the conversation keeps ==================== */
/* 916:15307. The thread never carries the deliverable twice: when the work is on
   the panel, the conversation keeps a pointer to it. */
.msg-artifact {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--color-card-border, #e2e0d8);
  border-radius: var(--radius-10, 10px);
  background: var(--color-card, #fff);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.msg-artifact:hover {
  border-color: var(--ws-surface-line);
  box-shadow: 0 1px 3px rgba(36, 37, 45, 0.06);
}
.msg-artifact__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg-artifact__title {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: var(--font-weight-medium, 500);
  color: var(--ws-surface-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.msg-artifact__kind {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ws-surface-muted);
}
.msg-artifact__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}
.msg-artifact__icon { width: 20px; height: 20px; display: block; opacity: 0.75; }

/* A card whose deliverable is no longer the one on the panel. It stays in the
   thread — it is what that turn produced — but it stops offering to open
   something that has been superseded. */
.msg-artifact.is-superseded {
  cursor: default;
  opacity: 0.72;
}
.msg-artifact.is-superseded:hover {
  border-color: var(--color-card-border, #e2e0d8);
  box-shadow: none;
}

/* ============================== Responsive ============================== */
/* The frame's split is a two-pane frame, and two panes need room. Below the
   width where both stay usable Orcheum does NOT squeeze them: one pane is in
   focus and the other is one control away. The focus switch is the only new
   affordance, and it exists only here. */
.ws-surface__focus { display: none; }
/* The mirror of that switch, in the conversation column. Same rule: it only
   exists where the panes are exclusive. */
.ws-surface-return { display: none; }

@media (max-width: 1000px) {
  .ws-main.is-surface { position: relative; }

  /* Both panes take the whole frame; `data-focus` on the host says which one is
     on top. Neither is unmounted — scroll position, the open document and the
     composer's contents all survive switching. */
  .ws-main.is-surface .ws-conversation,
  .ws-main.is-surface .ws-surface-host {
    flex: 1 1 100%;
    width: 100%;
    border-right: 0;
  }
  .ws-main.is-surface[data-focus='surface'] .ws-conversation { display: none; }
  .ws-main.is-surface[data-focus='conversation'] .ws-surface-host { display: none; }

  /* With the panes exclusive, the conversation needs its own way back to the
     deliverable — the artifact card in the thread is it, and it is always
     present. The panel's switch is what returns you. */
  .ws-surface__focus {
    display: inline-flex;
    align-self: flex-start;
    margin: 12px var(--ws-surface-pad-x) 0;
    padding: 3px;
    gap: 2px;
    border: 1px solid var(--color-card-border, #e2e0d8);
    border-radius: 9px;
    background: var(--ws-surface-chip);
  }
  .ws-surface__focus-btn {
    padding: 4px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ws-surface-muted);
    cursor: pointer;
  }
  .ws-surface__focus-btn.is-active {
    background: #fff;
    color: var(--ws-surface-ink);
  }

  /* The reader is in the conversation and their deliverable is behind it. This
     is the only control that brings it back, so it is present the whole time
     that is true — it sits above the docked composer, out of the thread. */
  .ws-main.is-surface[data-focus='conversation'] .ws-surface-return {
    /* Floated above the docked composer rather than stacked with it: the dock
       is the column's own bottom furniture, and a control that pushed it would
       move the composer every time a deliverable opened. */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 132px;                   /* clear of the docked composer */
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    box-shadow: 0 2px 8px rgba(36, 37, 45, 0.08);
    border: 1px solid var(--color-card-border, #e2e0d8);
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--ws-surface-ink);
    cursor: pointer;
  }
  .ws-main.is-surface[data-focus='conversation'] .ws-surface-return:hover {
    border-color: var(--ws-surface-line);
  }
}

@media (max-width: 640px) {
  .ws-surface__bar { padding: 12px 16px; }
  .ws-surface__doc { padding: 20px 16px 56px; }
  .ws-surface__focus { margin: 10px 16px 0; }
}

/* ============================ Reduced motion ============================ */
@media (prefers-reduced-motion: reduce) {
  .ws-main.is-surface .ws-surface-host,
  .ws-surface.is-updated .ws-surface__body {
    animation-duration: 1ms !important;
    transform: none !important;
  }
}