/* claude.ai light theme replica for the Ceviche MCP scenes (2026-10-22, Luka: copy claude.ai, trust matters).
   Layout and colors follow claude.ai; Anthropic's own fonts can't be bundled, so the response serif is Source Serif 4
   and the UI is the system sans. Sizes run ~1.2x the real app so text stays legible when the stage is scaled down. */
.cl { position: absolute; display: flex; overflow: hidden; border-radius: 14px; border: 1px solid #e3e0d6;
  background: #faf9f5; color: #141413; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 1px 2px rgba(31,30,26,.05), 0 18px 48px rgba(31,30,26,.08); }
.cl * { box-sizing: border-box; }
.cl svg { flex: none; }

/* sidebar */
.cl-side { width: 272px; flex: none; background: #f5f4ee; border-right: 1px solid #e8e6dc; padding: 18px 14px; display: flex; flex-direction: column; gap: 2px; }
.cl-brand { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 8px; margin-bottom: 14px; }
.cl-word { font-family: "Source Serif 4", Georgia, serif; font-size: 25px; font-weight: 500; letter-spacing: -.01em; color: #141413; }
.cl-ic { width: 20px; height: 20px; stroke: #73726c; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cl-item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 10px; border-radius: 9px; font-size: 16px; color: #3d3d3a; }
.cl-item.new { color: #141413; font-weight: 500; }
.cl-plus { width: 26px; height: 26px; border-radius: 50%; background: #d97757; display: grid; place-items: center; }
.cl-plus svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.2; fill: none; }
.cl-rec-h { font-size: 13.5px; color: #8b897f; margin: 22px 10px 8px; }
.cl-rec { height: 36px; display: flex; align-items: center; padding: 0 10px; border-radius: 9px; font-size: 15px; color: #3d3d3a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-rec.on { background: #ebe9e1; color: #141413; }
.cl-user { margin-top: auto; display: flex; align-items: center; gap: 11px; padding: 10px 8px 2px; border-top: 1px solid #e8e6dc; }
.cl-av { width: 34px; height: 34px; border-radius: 50%; background: #3d3d3a; color: #faf9f5; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.cl-user b { display: block; font-size: 15px; font-weight: 500; } .cl-user span { font-size: 13px; color: #8b897f; }

/* main column */
.cl-main { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cl-top { height: 62px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 22px; font-size: 16px; color: #141413; }
.cl-top .chev { width: 14px; height: 14px; stroke: #73726c; fill: none; stroke-width: 2; }
.cl-share { margin-left: auto; height: 36px; padding: 0 14px; border-radius: 9px; border: 1px solid #dedcd1; background: #fff; display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; }
.cl-scroll { position: relative; flex: 1; overflow: hidden; }
.cl-thread { position: absolute; left: 50%; top: 10px; width: 900px; margin-left: -450px; }

.cl-umsg { margin-left: auto; width: fit-content; max-width: 720px; background: #f0eee6; border-radius: 18px; padding: 15px 20px; font-size: 18px; line-height: 1.5; color: #141413; }
.cl-used { display: flex; align-items: center; gap: 7px; margin: 26px 0 12px 4px; font-size: 17px; color: #3d3d3a; }
.cl-used svg { width: 15px; height: 15px; stroke: #73726c; fill: none; stroke-width: 2; }
.cl-steps { border: 1px solid #e3e1d8; border-radius: 14px; overflow: hidden; background: #faf9f5; }
.cl-step { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; font-size: 16px; border-top: 1px solid #ebe9e1; white-space: nowrap; overflow: hidden; }
.cl-step:first-child { border-top: 0; }
.cl-step .l { color: #8b897f; flex: none; } .cl-step .v { color: #141413; overflow: hidden; text-overflow: ellipsis; }
.cl-step .n { color: #8b897f; }
.cl-step .gt { color: #a3a198; margin-left: 2px; flex: none; }
.cl-step .v code { font-family: inherit; }

.cl-ans { font-family: "Source Serif 4", Georgia, serif; font-size: 20px; line-height: 1.55; color: #141413; margin-top: 24px; }
.cl-ans p + p, .cl-ans p + .cl-tbl, .cl-ans .cl-tbl + p { margin-top: 16px; }
.cl-ans a { color: #2c5e9e; text-decoration: underline; text-underline-offset: 3px; }
.cl-tbl { border: 1px solid #e3e1d8; border-radius: 12px; overflow: hidden; font-size: 18px; }
.cl-tbl .r { display: grid; grid-template-columns: 1.3fr 1.5fr .7fr 1.4fr; padding: 13px 20px; border-top: 1px solid #ebe9e1; }
.cl-tbl .r:first-child { border-top: 0; font-weight: 600; }
.cl-tbl .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 26px; }
.cl-chip { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; height: 42px; padding: 0 15px; border-radius: 10px; background: #f0eee6; font-family: ui-sans-serif, system-ui, sans-serif; font-size: 16px; color: #141413; }
.cl-chip svg { width: 18px; height: 18px; stroke: #3d3d3a; fill: none; stroke-width: 1.7; }
.cl-spark { display: block; width: 30px; height: 30px; margin-top: 18px; }

/* composer */
.cl-comp { flex: none; width: 900px; margin: 0 auto 22px; border: 1px solid #dedcd1; border-radius: 22px; background: #fff; padding: 16px 18px 12px; box-shadow: 0 4px 18px rgba(31,30,26,.05); }
.cl-input { min-height: 30px; font-size: 18px; color: #141413; }
.cl-input .ph { color: #8b897f; }
.cl-caret { display: inline-block; width: 2px; height: 22px; background: #141413; vertical-align: -4px; margin-left: 1px; }
.cl-crow { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.cl-btn { width: 36px; height: 36px; border-radius: 9px; border: 1px solid #e3e1d8; display: grid; place-items: center; }
.cl-btn svg { width: 18px; height: 18px; stroke: #3d3d3a; fill: none; stroke-width: 1.8; }
.cl-model { margin-left: auto; font-size: 15px; color: #3d3d3a; display: flex; align-items: center; gap: 6px; }
.cl-send { width: 38px; height: 38px; border-radius: 10px; background: #c6613f; display: grid; place-items: center; }
.cl-send svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2.4; }
.cl-send.off { background: #e0bcae; }

/* artifact panel (dashboard scene) */
.cl-art { flex: none; display: flex; flex-direction: column; background: #f5f4ee; border-left: 1px solid #e8e6dc; }
.cl-art-top { height: 62px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; font-size: 16px; color: #141413; border-bottom: 1px solid #e8e6dc; }
.cl-art-body { position: relative; flex: 1; overflow: hidden; padding: 22px; }
.cl-doc { background: #fff; border: 1px solid #e8e6dc; border-radius: 12px; height: 100%; overflow: hidden; }