/* Demo kit: standard panes for sequence / wire / chat demos. */
.dk { display: grid; gap: 22px; height: 402px; }
.dk.tall { height: 452px; }
.dk-seq-wire { grid-template-columns: 1fr 1fr; }
.dk-chat-wire { grid-template-columns: .85fr 1.15fr; }
.dk-chat-seq-wire { grid-template-columns: 250px 1fr 1.1fr; gap: 16px; }
.dk-seq, .dk-wire { grid-template-columns: 1fr; }
.dk-pane { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* caption + callout */
.dk-caption {
  position: absolute; left: 56px; right: 56px; bottom: 4px; min-height: 44px;
  font-size: 19px; line-height: 1.3;
  border-left: 6px solid var(--teal); background: var(--teal-pale); padding: 8px 18px;
}
.dk-callout {
  position: absolute; width: 420px; z-index: 5;
  background: var(--amber-light); border-left: 6px solid var(--amber); padding: 16px 20px;
  font-size: 20px; line-height: 1.35; box-shadow: 0 10px 30px #0002;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s; pointer-events: none;
}
.dk-callout.shown { opacity: 1; transform: none; pointer-events: auto; }
/* calloutAt: where the final-beat callout sits (pick the spot that hides the least) */
.dk-callout.at-bottom-right { right: 70px; bottom: 64px; }
.dk-callout.at-top-right { right: 70px; top: 120px; }
.dk-callout.at-bottom-left { left: 70px; bottom: 64px; }
.dk-callout.at-centre { left: 50%; top: 50%; translate: -50% -50%; width: 560px; font-size: 24px; }

/* chat pane */
.dk-chat { border: 1px solid var(--rule); background: #fafbfb; padding: 12px; gap: 8px; overflow-y: auto; }
.dk-msg { max-width: 92%; padding: 8px 12px; font-size: 15px; line-height: 1.35; border-radius: 4px; overflow-wrap: anywhere; }
.dk-msg .who { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: 2px; }
.dk-msg.user { align-self: flex-end; background: var(--teal); color: #fff; }
.dk-msg.assistant { align-self: flex-start; background: #fff; border: 1px solid var(--rule); }
.dk-msg.system { align-self: stretch; max-width: none; background: #eef0f0; color: #444; font-size: 13px; font-style: italic; }
.dk-msg.toolcall { align-self: flex-start; background: #f4efff; border: 1px solid #d9ccff; font-size: 13px; }
.dk-msg.toolcall code { font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; }
.dk-msg.toolresult.error { background: var(--warn-light); color: var(--warn); border: 1px solid #e8b4ab; }
.dk-msg.toolresult { align-self: flex-start; background: var(--code-bg); color: var(--code-ink); font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; }

/* wire pane */
.dk-wire-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-height: 24px; }
.dk-wire-title { font-size: 14px; font-weight: 600; color: #333; }
.dk-badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; color: #fff; background: var(--teal); }
.dk-badge.k-llm { background: #6b4fbb; }
.dk-badge.k-http, .dk-badge.k-auth { background: #1d70b8; }
.dk-badge.k-code { background: #505a5f; }
.dk-badge.k-user { background: #8a6d00; }
.dk-badge.k-a2a { background: #b4581e; }
.dk-code { position: relative; flex: 1; font-size: 13.5px; line-height: 1.45; overflow: auto; scroll-behavior: smooth; white-space: pre-wrap; overflow-wrap: anywhere; }
.dk-code .k.focus, .dk-code .hfocus { background: var(--amber); color: #111; border-radius: 2px; padding: 0 2px; }
.dk-wire-note { font-size: 15px; background: var(--teal-pale); border-left: 4px solid var(--teal); padding: 6px 12px; margin-top: 8px; }
.dk-wire-empty { flex: 1; display: grid; place-items: center; color: #999; border: 1px dashed var(--rule); font-size: 15px; }

/* sequence pane */
.dk-seq { border: 1px solid var(--rule); background: #fff; }
.dk-actors { display: flex; border-bottom: 2px solid var(--rule); background: var(--teal-pale); }
.dk-actor { flex: 1; text-align: center; font-size: 13.5px; font-weight: 700; padding: 8px 4px; }
.dk-seq-body { position: relative; flex: 1; overflow-y: auto; scroll-behavior: smooth; padding: 10px 0 14px; }
.dk-lifelines span { position: absolute; top: 0; bottom: 0; border-left: 2px dashed #d0d7d5; }
.dk-rows { position: relative; }
.dk-arrow { position: absolute; height: 40px; cursor: pointer; }
.dk-arrow::before { content: ""; position: absolute; left: 0; right: 6px; bottom: 9px; border-top: 2px solid currentColor; }
.dk-arrow::after { content: ""; position: absolute; right: 0; bottom: 4px; border: 6px solid transparent; border-left: 9px solid currentColor; border-right: 0; }
.dk-arrow.rev::before { left: 6px; right: 0; }
.dk-arrow.rev::after { right: auto; left: 0; border-left: 0; border-right: 9px solid currentColor; }
.dk-arrow-l { position: absolute; left: 50%; bottom: 13px; transform: translateX(-50%); font-size: 12.5px; color: #222; white-space: nowrap; padding: 0 6px; font-family: var(--mono); background: #fffc; border-radius: 2px; z-index: 1; }
.dk-arrow { color: var(--teal); }
.dk-arrow.k-llm { color: #6b4fbb; }
.dk-arrow.k-http, .dk-arrow.k-auth { color: #1d70b8; }
.dk-arrow.k-code { color: #505a5f; }
.dk-arrow.k-user { color: #8a6d00; }
.dk-arrow.k-a2a { color: #b4581e; }
.dk-arrow.k-err { color: var(--warn); }
.dk-arrow { opacity: .55; }
.dk-arrow.cur { opacity: 1; }
.dk-arrow.cur .dk-arrow-l { font-weight: 700; background: var(--amber-light); }
.dk-note {
  position: absolute; transform: translateX(-50%); margin-top: 6px; font-size: 12px; max-width: 46%;
  background: var(--amber-light); border: 1px solid #e8d48a; padding: 3px 8px; white-space: nowrap; cursor: pointer;
  opacity: .6;
}
.dk-note.cur { opacity: 1; font-weight: 700; }
.dk-divider { position: absolute; left: 0; right: 0; height: 40px; display: flex; align-items: center; cursor: pointer; }
.dk-divider::before { content: ""; position: absolute; left: 8px; right: 8px; border-top: 2px solid var(--ink); }
.dk-divider span { position: relative; margin: 0 auto; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; letter-spacing: .06em; }

/* ---------- motion: only the newest beat animates ---------- */
.dk [data-d="1"] { --d: .35s; } .dk [data-d="2"] { --d: .7s; } .dk [data-d="3"] { --d: 1.05s; } .dk [data-d="4"] { --d: 1.4s; }
@keyframes dk-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dk-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes dk-travel { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes dk-travel-rev { 0% { left: 100%; opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
@keyframes dk-pulse { 0%, 100% { box-shadow: 0 0 0 0 #f0b40000; } 40% { box-shadow: 0 0 0 5px #f0b40066; } }

.dk-arrow.enter::before { transform-origin: left center; animation: dk-grow .45s cubic-bezier(.3,.7,.3,1) var(--d, 0s) both; }
.dk-arrow.rev.enter::before { transform-origin: right center; }
.dk-arrow.enter::after { animation: dk-fade .15s calc(var(--d, 0s) + .38s) both; }
.dk-arrow.enter .dk-arrow-l { animation: dk-rise .3s calc(var(--d, 0s) + .15s) both; }
.dk-packet {
  position: absolute; bottom: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 0 4px #fff, 0 0 12px currentColor; opacity: 0;
  animation: dk-travel .5s cubic-bezier(.3,.7,.3,1) var(--d, 0s) both;
}
.dk-arrow.rev .dk-packet { animation-name: dk-travel-rev; }
.dk-note.enter, .dk-divider.enter { animation: dk-rise .35s var(--d, 0s) both; }
.dk-msg.enter { animation: dk-rise .35s cubic-bezier(.3,.7,.3,1) both; }
.dk-wire-inner { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.dk-wire-inner.enter { animation: dk-rise .4s cubic-bezier(.3,.7,.3,1) .15s both; }
.dk-wire-inner.enter .k.focus, .dk-wire-inner.enter .hfocus { animation: dk-pulse 1s .6s 2; }
.dk-caption.enter { animation: dk-rise .35s both; }

@media (prefers-reduced-motion: reduce) {
  .dk *, .dk-caption, .dk-callout { animation: none !important; transition: none !important; }
}