/* ── VIVIAN PHASE 3 — Site Build, Content Studio, Fable Engine ── */
/* © 2026 Vivere. Proprietary and confidential. */

/* ── SITE BUILD (via Vivian Engine) ── */
.build-log { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.build-log-empty { margin: auto; text-align: center; color: var(--text-l); font-size: 13px; max-width: 340px; line-height: 1.7; }
.build-note { align-self: flex-start; max-width: 90%; padding: 10px 14px; border-radius: 8px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; background: var(--bg-b); border: 1px solid var(--border); }
.build-note.tool { font-family: 'SF Mono', Consolas, monospace; font-size: 11.5px; border-left: 3px solid var(--purple); color: var(--text-m); }
.build-note.error { border-color: rgba(224,82,82,0.3); color: var(--red); background: var(--red-bg); }

/* ── CONTENT STUDIO ── */
.studio-tabs { display: flex; gap: 4px; background: var(--bg-b); border: 1px solid var(--border); border-radius: 8px; padding: 4px; margin-bottom: 16px; width: fit-content; }
.studio-tab { background: none; border: none; color: var(--text-m); font-size: 12.5px; padding: 8px 16px; border-radius: 6px; }
.studio-tab.active { background: var(--purple-bg); color: var(--purple); }
.studio-layout { display: grid; grid-template-columns: 360px 1fr; gap: 12px; align-items: start; }
.studio-output-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.studio-image-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.studio-image-card img { width: 100%; display: block; }
.studio-image-actions { padding: 10px; display: flex; gap: 6px; }
.studio-audio-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; }
.studio-audio-card audio { width: 100%; margin-top: 10px; }
.studio-handoff-note { font-size: 12.5px; color: var(--text-m); line-height: 1.7; }

/* ── FABLE ENGINE ── */
.fable-layout { display: grid; grid-template-columns: 380px 1fr; gap: 12px; align-items: start; }
.fable-guide { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--amber); border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; }
.fable-guide h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--amber); }
.fable-guide p { font-size: 12.5px; color: var(--text-m); line-height: 1.7; margin-bottom: 6px; }
.fable-output { background: var(--bg-b); border: 1px solid var(--border); border-radius: 8px; padding: 18px; font-size: 13px; line-height: 1.75; white-space: pre-wrap; color: var(--text); min-height: 200px; }