/* Live demo window on the home page. Sizes itself from its container. */
.csd {
  --amber: #f59e0b; --red: #ef4444;
  --mac: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  container-type: inline-size;
  display: flex; flex-direction: column; height: 100%; min-height: 0;
  border-radius: 14px; overflow: hidden; background: #181818; border: 1px solid #3a3a3e;
  font-family: var(--mac); color: #ccc; text-align: left;
}
.csd-strip { flex: none; display: flex; align-items: center; gap: 4px; height: 44px; padding: 0 10px; background: #2c2c2e; border-bottom: 1px solid #000; overflow-x: auto; scrollbar-width: none; }
.csd-strip::-webkit-scrollbar { display: none; }
.csd-lights { display: flex; gap: 8px; margin-right: 10px; flex: none; }
.csd-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.csd-brand { flex: none; font: 700 14px var(--mac); color: #fff; margin-right: 4px; letter-spacing: -0.01em; }
.csd-sep { flex: none; width: 1px; height: 20px; background: #4a4a4c; margin: 0 8px 0 6px; }
.csd-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 6px; border: 0; background: transparent;
  font: 500 13px var(--mac); color: rgba(255,255,255,.78); cursor: pointer; transition: background-color .12s; }
.csd-tab:hover { background: rgba(255,255,255,.08); }
.csd-tab[aria-selected="true"] { background: rgba(10,132,255,.38); color: #fff; font-weight: 600; }
.csd-mark { width: 8px; height: 8px; border-radius: 50%; flex: none; display: none; }
.csd-tab[data-state="working"] .csd-mark { display: block; border: 2px solid var(--amber); }
.csd-tab[data-state="attention"] .csd-mark { display: block; background: var(--amber); }
.csd-end { margin-left: auto; display: flex; gap: 6px; flex: none; padding-left: 12px; }
.csd-end span { font: 500 12px var(--mac); color: rgba(255,255,255,.8); padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.07); }

.csd-app { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; font-size: 13px; }
.csd-side { display: none; background: #1f1f1f; border-right: 1px solid #2b2b2b; padding: 12px 0; overflow: hidden; }
.csd-side h4 { margin: 0 14px 8px; font: 600 11px var(--mac); color: #999; letter-spacing: .02em; }
.csd-side ul { list-style: none; margin: 0; padding: 0; }
.csd-side li { padding: 3px 14px 3px 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.csd-side li.dir { padding-left: 14px; }
.csd-side li.on { background: #37373d; color: #fff; }
.csd-side li.mod { color: #e2c08d; }
.csd-editor { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.csd-edtabs { flex: none; display: flex; height: 32px; background: #1f1f1f; border-bottom: 1px solid #2b2b2b; }
.csd-edtabs span { padding: 0 14px; display: flex; align-items: center; border-right: 1px solid #2b2b2b; color: #999; white-space: nowrap; }
.csd-edtabs span.on { background: #181818; color: #fff; }
.csd-code { margin: 0; padding: 12px 0; font: 12.5px/1.7 var(--mono); color: #d4d4d4; overflow: hidden; flex: 1; }
.csd-code .line { display: block; white-space: pre; }
.csd-code .ln { display: inline-block; width: 40px; padding-right: 12px; text-align: right; color: #5a5a5a; user-select: none; }
.csd-code .add { background: rgba(35,134,54,.22); }
.csd-code .del { background: rgba(218,54,51,.18); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); }
.k { color: #c586c0; } .s { color: #ce9178; } .f { color: #dcdcaa; } .t { color: #4ec9b0; } .c { color: #6a9955; } .n { color: #b5cea8; } .v { color: #9cdcfe; }
.csd-chat { display: flex; flex-direction: column; gap: 8px; background: #1f1f1f; border-top: 1px solid #2b2b2b; padding: 12px 14px; overflow: hidden; }
.csd-chat h4 { margin: 0; font: 600 12px var(--mac); color: #bbb; }
.csd-chat .me { display: none; }
.csd-msg { border-radius: 8px; padding: 8px 10px; line-height: 1.45; margin: 0; }
.csd-msg.me { background: #2a2d33; color: #e6e6e6; align-self: flex-end; max-width: 92%; }
.csd-msg.bot { color: #cfcfcf; padding-left: 0; }
.csd-msg code { font: 12px var(--mono); }
.csd-step { font: 12px var(--mono); color: #8a8a8a; display: flex; gap: 8px; align-items: center; }
.csd-step::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #3fb950; flex: none; }
.csd-step.live::before { background: var(--amber); }
.csd-ask { border: 1px solid rgba(245,158,11,.55); background: rgba(245,158,11,.09); border-radius: 8px; padding: 10px 12px; color: #f2e3c4; line-height: 1.45; }
.csd-ask .row { display: flex; gap: 8px; margin-top: 10px; }
.csd-ask button { font: 600 12px var(--mac); border-radius: 6px; padding: 6px 12px; border: 0; cursor: pointer; }
.csd-ask .yes { background: var(--amber); color: #1a1100; }
.csd-ask .no { background: #333; color: #ddd; }
.csd-typing { display: inline-flex; gap: 4px; }
.csd-typing i { width: 5px; height: 5px; border-radius: 50%; background: #888; display: block; }

@container (min-width: 620px) {
  .csd-app { grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .csd-side { display: block; grid-row: span 2; }
}
@container (min-width: 940px) {
  .csd-app { grid-template-columns: 200px minmax(0, 1fr) 320px; grid-template-rows: minmax(0, 1fr); }
  .csd-side { grid-row: auto; }
  .csd-chat { border-top: 0; border-left: 1px solid #2b2b2b; }
  .csd-chat .me { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .csd-tab[data-state="working"] .csd-mark { border-top-color: transparent; animation: csd-spin 1s linear infinite; }
  .csd-tab[data-state="attention"] .csd-mark { animation: csd-ping 1.6s ease-out infinite; }
  .csd-tab.arrived { animation: csd-nudge .5s ease-out; }
  .csd-typing i { animation: csd-blink 1.2s infinite; }
  .csd-typing i:nth-child(2) { animation-delay: .2s; } .csd-typing i:nth-child(3) { animation-delay: .4s; }
}
@keyframes csd-spin { to { transform: rotate(360deg); } }
@keyframes csd-ping { 0% { box-shadow: 0 0 0 0 rgba(245,158,11,.7); } 80%, 100% { box-shadow: 0 0 0 8px rgba(245,158,11,0); } }
@keyframes csd-nudge { 30% { transform: translateY(-3px); } }
@keyframes csd-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }