/* ==========================================================================
   project-workspace.css — Orcheum Code / Preview workspace (Phase 2)
   --------------------------------------------------------------------------
   The workspace GROWS OUT OF the conversation: when a buildable project is
   generated, the main column splits into a project panel (left) + the existing
   conversation (right). No page change, no reload — the conversation matures
   into a working project in place. Implements Figma 437:2137 (Code) / 472:1845
   (Preview). Motion is a single calm expansion (Constitution 5.4).
   ========================================================================== */

:root {
  /* editorial code palette — calm on cream (implementation, per 11.2) */
  --code-com:  #9f9792;
  --code-kw:   #9a3d1f;
  --code-str:  #4b7a52;
  --code-num:  #9a3d1f;
  --code-tag:  #3a6ea5;
  --code-attr: #7a5c1e;
  --code-sel:  #3a6ea5;
  --code-prop: #566273;
  --code-val:  #24252d;

  --ws-panel-line: rgba(50, 47, 47, 0.08);
  --ws-transition: 320ms;     /* workspace open — within 250–400ms */
}

/* ============================ Split layout ============================== */
/* Empty state: only the centered composition shows. Conversation wrapper is
   dormant until a turn begins. */
.ws-conversation { display: none; position: relative; min-height: 0; }
.ws-main.is-conversation .ws-conversation { display: flex; flex: 1 1 auto; flex-direction: column; }

/* The project panel is dormant until a project is generated. */
.ws-project { display: none; min-width: 0; }

/* Workspace mode: main becomes a row — project (fluid) + conversation (fixed).
   Grows in with one calm expansion; the conversation slides to its column. */
.ws-main.is-workspace { flex-direction: row; align-items: stretch; }
.ws-main.is-workspace .ws-project {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  border-right: 1px solid var(--ws-panel-line);
  animation: ws-proj-in var(--ws-transition) var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) both;
}
.ws-main.is-workspace .ws-conversation {
  flex: 0 0 clamp(360px, 40%, 522px);
  width: clamp(360px, 40%, 522px);
  animation: ws-conv-settle var(--ws-transition) var(--ease-standard, cubic-bezier(0.4,0,0.2,1)) both;
}
/* The docked composer belongs to the conversation column in workspace mode
   and uses the wider platform conversation measure where space permits. */
.ws-main.is-workspace .ws-composer-dock .oc-composer { max-width: min(100%, 720px); }

@keyframes ws-proj-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes ws-conv-settle {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* ========================= Project panel ============================== */
.ws-proj {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  position: relative;
  z-index: 1;
  background: var(--color-background);   /* sit cleanly above the spectre glow */
}

/* -- header: Code/Preview toggle + Export -------------------------------- */
.ws-proj__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  height: 56px;
  flex: 0 0 auto;
}
.ws-proj__toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: #ffffff;                       /* switch area — Figma 461:981 */
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-10);
}
.ws-proj__seg {
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  color: #19213d;                            /* Tabs & Tables / Text Dark */
  padding: 7px 18px;
  border-radius: var(--radius-8);
  cursor: pointer;
  transition: background 150ms var(--ease-standard, ease), color 150ms var(--ease-standard, ease);
}
.ws-proj__seg:hover:not(.is-active) { background: rgba(25, 33, 61, 0.05); }
.ws-proj__seg.is-active {
  background: var(--color-button-primary-bg);   /* #838b8e — active switch button */
  color: var(--color-button-primary-fg);        /* near-white label */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ws-proj__seg:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }

.ws-proj__export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-button-secondary-bg);
  border: 1px solid var(--color-button-secondary-border);
  border-radius: var(--radius-8);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-foreground);
  cursor: pointer;
  transition: background 150ms var(--ease-standard, ease);
}
.ws-proj__export img { width: 14px; height: 14px; display: block; }
.ws-proj__export:hover { background: rgba(225, 229, 230, 0.95); }
.ws-proj__export:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }

/* -- file tabs ----------------------------------------------------------- */
.ws-proj__tabs {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ws-panel-line);
  flex: 0 0 auto;
}
.ws-proj__tab {
  appearance: none;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--color-text-secondary);
  padding: 9px 10px;
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  margin-bottom: -1px;
  transition: color 150ms var(--ease-standard, ease), border-color 150ms var(--ease-standard, ease);
}
.ws-proj__tab:hover { color: var(--color-foreground); }
.ws-proj__tab.is-active { color: var(--color-foreground); border-bottom-color: var(--color-foreground); }
.ws-proj__tab:focus-visible { outline: 2px solid #0f172a; outline-offset: -2px; border-radius: 4px; }

/* -- body: code view + preview surface (both persistent) ----------------- */
.ws-proj__body { position: relative; flex: 1 1 auto; min-height: 0; }
.ws-proj__codeview,
.ws-proj__previewview {
  position: absolute;
  inset: 0;
  overflow: auto;
}
/* view switch = visibility only. Nothing reloads. Preview fades in (150–200ms). */
.ws-proj__previewview { opacity: 0; pointer-events: none; }
.ws-proj.is-preview .ws-proj__codeview { opacity: 0; pointer-events: none; }
.ws-proj.is-preview .ws-proj__previewview {
  opacity: 1; pointer-events: auto;
  animation: ws-preview-in 180ms var(--ease-standard, ease) both;
}
@keyframes ws-preview-in { from { opacity: 0; } to { opacity: 1; } }

/* code view */
.ws-proj__lines {
  padding: 20px 16px 40px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 24px;
}
.ws-proj__line { display: flex; align-items: baseline; gap: 16px; border-radius: 6px; padding: 0 8px; }
.ws-proj__line:hover { background: rgba(50, 47, 47, 0.03); }
.ws-proj__ln {
  flex: 0 0 auto;
  width: 24px;
  text-align: right;
  color: var(--color-text-placeholder);
  user-select: none;
  font-size: 12.5px;
}
.ws-proj__code { white-space: pre-wrap; word-break: break-word; color: var(--code-val); }

.tok-com  { color: var(--code-com); font-style: italic; }
.tok-kw   { color: var(--code-kw); }
.tok-str  { color: var(--code-str); }
.tok-num  { color: var(--code-num); }
.tok-tag  { color: var(--code-tag); }
.tok-attr { color: var(--code-attr); }
.tok-sel  { color: var(--code-sel); }
.tok-prop { color: var(--code-prop); }
.tok-val  { color: var(--code-val); }

/* preview surface — the generated page on a white card over the cream page */
.ws-proj__previewview { padding: 20px; background: transparent; }
.ws-proj__frame {
  display: block;
  width: 100%;
  min-height: calc(100% - 0px);
  height: 100%;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-10);
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}

/* ===================== Iteration (Phase 3) feedback =================== */
/* preview refreshes without a white flash: CSS is patched live; HTML changes
   crossfade. */
.ws-proj__frame { transition: opacity 180ms var(--ease-standard, ease); }
.ws-proj__frame.is-refreshing { opacity: 0; }

/* brief "Updated" badge on the changed file's tab, then it returns to normal */
.ws-proj__tab-badge {
  margin-left: 8px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: #2f7d55;
  background: rgba(47, 125, 85, 0.12);
  padding: 2px 6px;
  border-radius: 999px;
  animation: ws-badge-in 200ms var(--ease-standard, ease) both;
}
@keyframes ws-badge-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* briefly highlight only the changed code lines, then fade */
.ws-proj__line.is-changed { background: rgba(47, 125, 85, 0.10); transition: background 250ms var(--ease-standard, ease); }
.ws-proj__line.is-changed.is-fading { background: transparent; }

/* compact, recoverable inline error — the workspace survives a failed update */
.msg-error {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(220, 38, 38, 0.06);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: #b91c1c;
}
.msg-error__retry {
  appearance: none;
  border: 1px solid rgba(220, 38, 38, 0.3);
  background: #ffffff;
  color: #b91c1c;
  font: inherit;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.msg-error__retry:hover { background: rgba(220, 38, 38, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .ws-proj__frame, .ws-proj__line.is-changed { transition-duration: 1ms !important; }
  .ws-proj__tab-badge { animation-duration: 1ms !important; }
}

/* ===================== File card (in the answer) ====================== */
.msg-file {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: var(--color-card-background);
  border: 1px solid var(--color-card-border);
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-foreground);
  text-align: left;
  cursor: pointer;
  transition: background 150ms var(--ease-standard, ease);
}
.msg-file:hover { background: rgba(225, 229, 230, 0.85); }
.msg-file:focus-visible { outline: 2px solid #0f172a; outline-offset: 2px; }
.msg-file img { width: 16px; height: 16px; display: block; flex: 0 0 auto; }

/* ===================== Preparing-workspace bridge ====================== */
/* The brief completion beat before the workspace grows in. Lives in the
   generation card row; a spinner step whose completion opens the workspace. */
.orch-gen__step.is-bridge .orch-gen__label { font-weight: 500; }

/* ============================= Responsive ============================== */
@media (max-width: 900px) {
  /* stack: project on top, conversation below — still one continuous view */
  .ws-main.is-workspace { flex-direction: column; }
  .ws-main.is-workspace .ws-project {
    flex: 1 1 auto;
    border-right: 0;
    border-bottom: 1px solid var(--ws-panel-line);
  }
  .ws-main.is-workspace .ws-conversation {
    flex: 0 0 46%;
    width: 100%;
  }
}

/* ============================ Reduced motion =========================== */
@media (prefers-reduced-motion: reduce) {
  .ws-main.is-workspace .ws-project,
  .ws-main.is-workspace .ws-conversation,
  .ws-proj.is-preview .ws-proj__previewview {
    animation-duration: 1ms !important;
    transform: none !important;
  }
}