/* Replicas of five assistant apps for the replay in replay.js. Fonts are freely available stand-ins:
   Inter (OpenAI Sans), Google Sans (Gemini), Open Sans (Segoe UI), DM Sans + Source Serif 4 (Anthropic Sans/Serif), JetBrains Mono. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Google+Sans:wght@400;500&family=Google+Sans+Text:wght@400;500&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&family=Open+Sans:wght@400;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

[data-replay-window] {
  height: 500px;
  overflow: hidden;
  border-radius: 12px;
  container-type: inline-size;
}

/* ---------- shared bits ---------- */
.hx {
  height: 100%;
  display: flex;
  overflow: hidden;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  letter-spacing: normal;
  font-weight: 400;
}
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx b, .hx strong { font-weight: 600; }
.hx p { margin: 0; }
.hx-ic { width: 18px; height: 18px; flex: none; display: block; }
.hx-ls { width: 18px; height: 18px; flex: none; display: block; }
.hx-sp { flex: 1; }
.hx-log { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.hx-list { display: flex; flex-direction: column; }
.hx-input { flex: 1; min-width: 0; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; }
.hx-input:empty::before { content: attr(data-ph); color: var(--hx-ph, #8F8F8F); pointer-events: none; }
[data-state="playing"] .hx-input:not(:empty)::after {
  content: ""; display: inline-block; width: 1.5px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em;
  background: currentColor; animation: hx-blink 1s steps(1) infinite;
}
.hx-send .is-text { display: none; }
.hx-typed .hx-send .is-text { display: block; }
.hx-typed .hx-send .is-idle { display: none; }
.hx-pdf {
  width: 36px; height: 36px; border-radius: 8px; flex: none;
  display: grid; place-items: center; background: #FA423E; color: #FA423E;
}
.hx-pdf svg { width: 20px; height: 20px; }
.hx-lights { display: inline-flex; gap: 8px; flex: none; }
.hx-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.hx-lights i:nth-child(2) { background: #FEBC2E; }
.hx-lights i:nth-child(3) { background: #28C840; }
.is-pressed { filter: brightness(.82); transform: scale(.97); }
@keyframes hx-blink { 50% { opacity: 0; } }
@keyframes hx-spin { to { transform: rotate(360deg); } }
@keyframes hx-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes hx-pulse { 50% { opacity: .35; } }
@keyframes hx-in { from { opacity: 0; transform: translateY(4px); } }
.hx-list > * { animation: hx-in .25s ease-out both; }

/* ---------- ChatGPT ---------- */
.hx-gpt {
  --hx-ph: #8F8F8F;
  background: #FFFFFF; color: #0D0D0D;
  font: 400 15px/1.6 Inter, ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
.gpt-rail {
  width: 52px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 14px 0 12px; background: #F9F9F9; border-right: 1px solid #ECECEC; color: #5D5D5D;
}
.gpt-logo { width: 22px; height: 22px; margin-bottom: 6px; }
.gpt-avatar { width: 28px; height: 28px; border-radius: 50%; background: #0F7B6C; color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; }
.gpt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gpt-top { height: 50px; flex: none; display: flex; align-items: center; justify-content: center; position: relative; padding: 0 12px; }
.gpt-seg { display: inline-flex; font-size: 14px; color: #0D0D0D; }
.gpt-seg span { padding: 5px 16px; border-radius: 999px; border: 1px solid transparent; }
.gpt-seg .is-on { background: #fff; border-color: #E3E3E3; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.gpt-share { position: absolute; right: 12px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #0D0D0D; }
.gpt-share .hx-ic { width: 16px; height: 16px; }
.gpt-log { padding: 6px 22px 10px; }
.gpt-col { gap: 14px; max-width: 640px; margin: 0 auto; }
.gpt-you { align-self: flex-end; max-width: 78%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gpt-bubble { background: #F4F4F4; border-radius: 18px; padding: 8px 15px; }
.gpt-file { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid #E5E5E5; border-radius: 16px; background: #fff; line-height: 1.3; }
.gpt-file b { display: block; font-size: 13.5px; font-weight: 600; }
.gpt-file small { color: #8F8F8F; font-size: 12.5px; }
.gpt-a strong { font-weight: 600; }
.gpt-tool { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; color: #5D5D5D; font-size: 14px; margin-bottom: -6px; }
.gpt-tool .hx-ls { width: 16px; height: 16px; }
.gpt-tool .hx-ic { width: 14px; height: 14px; }
.gpt-tool .is-run {
  background: linear-gradient(90deg, #8F8F8F 35%, #0D0D0D 50%, #8F8F8F 65%) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: hx-shimmer 1.4s linear infinite;
}
.gpt-tool .is-fin, .gpt-tool.is-done .is-run, .gpt-tool:not(.is-done) .hx-ic { display: none; }
.gpt-tool.is-done .is-fin { display: inline; }
.gpt-card { border: 1px solid #E5E5E5; border-radius: 20px; padding: 14px 16px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.04); font-size: 14px; line-height: 1.45; }
.gpt-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.gpt-card-h b { font-weight: 600; }
.gpt-card p { color: #5D5D5D; }
.gpt-card p b { color: #0D0D0D; font-weight: 600; }
.gpt-card-f { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.gpt-check { display: inline-flex; align-items: center; gap: 8px; color: #5D5D5D; font-size: 13px; }
.gpt-check i { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #C4C4C4; display: grid; place-items: center; color: transparent; }
.gpt-check .hx-ic { width: 12px; height: 12px; stroke-width: 2.6; }
.is-remembered .gpt-check i { background: #0D0D0D; border-color: #0D0D0D; color: #fff; }
.gpt-btn { padding: 6px 14px; border-radius: 999px; border: 1px solid #E3E3E3; font-size: 13.5px; font-weight: 500; }
.gpt-btn.is-primary { background: #0D0D0D; border-color: #0D0D0D; color: #fff; }
.gpt-ok { display: none; align-items: center; gap: 4px; color: #5D5D5D; font-size: 13px; }
.gpt-ok .hx-ic { width: 14px; height: 14px; }
.gpt-card.is-done { padding: 10px 14px; }
.gpt-card.is-done .gpt-card-h { margin-bottom: 2px; }
.gpt-card.is-done .gpt-card-f { display: none; }
.gpt-card.is-done .gpt-ok { display: inline-flex; }
.gpt-actions { display: flex; gap: 12px; color: #5D5D5D; margin-top: -8px; }
.gpt-actions .hx-ic { width: 17px; height: 17px; }
.gpt-composer {
  flex: none; margin: 0 16px; padding: 12px 10px 10px 16px; border: 1px solid #E3E3E3; border-radius: 26px;
  background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.gpt-composer .hx-input { min-height: 24px; padding-right: 6px; }
.gpt-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; color: #0D0D0D; }
.gpt-row > .hx-ic:first-child { width: 20px; height: 20px; color: #5D5D5D; }
.gpt-model { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; color: #0D0D0D; }
.gpt-model span { color: #8F8F8F; }
.gpt-model .hx-ic { width: 14px; height: 14px; color: #8F8F8F; }
.gpt-mic { color: #5D5D5D; }
.gpt-send { width: 34px; height: 34px; border-radius: 50%; background: #0D0D0D; color: #fff; display: grid; place-items: center; }
.gpt-send .hx-ic { width: 18px; height: 18px; stroke-width: 2.2; }
.gpt-foot { flex: none; text-align: center; font-size: 11.5px; color: #5D5D5D; padding: 7px 8px 9px; }

/* ---------- Gemini (for work) ---------- */
.hx-gem {
  --hx-ph: #5F6368;
  flex-direction: column; color: #1F1F1F;
  background: radial-gradient(70% 55% at 50% 100%, #DCE8FB 0%, rgba(220,232,251,0) 70%), #F8F9FA;
  font: 400 15px/1.6 "Google Sans Text", "Google Sans", Roboto, system-ui, sans-serif;
}
.gem-top { height: 46px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px; color: #444746; }
.gem-top > .hx-ic { width: 19px; height: 19px; }
.gem-brand { display: inline-flex; align-items: center; gap: 7px; font: 400 18px/1 "Google Sans", system-ui, sans-serif; color: #1F1F1F; }
.gem-logo { width: 18px; height: 18px; }
.gem-avatar { width: 28px; height: 28px; border-radius: 50%; background: #7B5CC4; color: #fff; display: grid; place-items: center; font: 500 13px/1 "Google Sans", sans-serif; }
.gem-log { padding: 8px 26px 12px; }
.gem-col { gap: 16px; max-width: 640px; margin: 0 auto; }
.gem-you { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.gem-bubble { background: #E9EEF6; border-radius: 24px 4px 24px 24px; padding: 10px 16px; }
.gem-file { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 16px; background: #fff; border: 1px solid #DDE3EA; line-height: 1.3; }
.gem-file .hx-pdf { background: #EA4335; color: #EA4335; }
.gem-file b { display: block; font-size: 13.5px; font-weight: 500; }
.gem-file small { color: #5F6368; font-size: 12.5px; }
.gem-a strong { font-weight: 500; }
.gem-a { color: #1F1F1F; }
.gem-tool { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13.5px; color: #444746; margin-bottom: -6px; }
.gem-tool .hx-ls { width: 16px; height: 16px; }
.gem-tool .is-fin, .gem-tool.is-done .is-run { display: none; }
.gem-tool.is-done .is-fin { display: inline; }
.gem-tool:not(.is-done) .is-run { animation: hx-pulse 1.2s ease-in-out infinite; }
.gem-chip { padding: 1px 10px; border-radius: 8px; background: #E9EEF6; color: #1F1F1F; font-size: 12.5px; }
.gem-card { background: #fff; border: 1px solid #DDE3EA; border-radius: 20px; padding: 14px 16px; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 3px rgba(60,64,67,.08); }
.gem-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-family: "Google Sans", sans-serif; }
.gem-card-h b { font-weight: 500; }
.gem-card p { color: #444746; }
.gem-card p b { color: #1F1F1F; font-weight: 500; }
.gem-card-f { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; font-family: "Google Sans", sans-serif; }
.gem-btn { padding: 7px 18px; border-radius: 999px; color: #0B57D0; font-weight: 500; font-size: 14px; }
.gem-btn.is-primary { background: #0B57D0; color: #fff; }
.gem-ok { display: none; align-items: center; gap: 4px; font-size: 13px; color: #146C2E; }
.gem-ok .hx-ic { width: 14px; height: 14px; }
.gem-card.is-done { padding: 10px 16px; }
.gem-card.is-done .gem-card-h { margin-bottom: 2px; }
.gem-card.is-done .gem-card-f { display: none; }
.gem-card.is-done .gem-ok { display: inline-flex; }
.gem-actions { display: flex; gap: 14px; color: #444746; margin-top: -8px; }
.gem-actions .hx-ic { width: 17px; height: 17px; }
.gem-composer {
  flex: none; margin: 0 20px 18px; padding: 12px 10px 8px 16px; border-radius: 24px; background: #fff;
  box-shadow: 0 2px 6px rgba(60,64,67,.06), 0 8px 28px rgba(66,133,244,.16);
}
.gem-composer .hx-input { min-height: 24px; }
.gem-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: #444746; font-family: "Google Sans", sans-serif; font-size: 13px; }
.gem-row > .hx-ic:first-child { width: 20px; height: 20px; }
.gem-mode, .gem-model { display: inline-flex; align-items: center; gap: 5px; color: #1F1F1F; }
.gem-mode .hx-ic:first-child { width: 17px; height: 17px; }
.gem-mode .hx-ic:last-child, .gem-model .hx-ic { width: 15px; height: 15px; }
.gem-send { width: 32px; height: 32px; border-radius: 50%; background: #F0F2F5; color: #80868B; display: grid; place-items: center; }
.hx-typed .gem-send { background: #0B57D0; color: #fff; }
.gem-send .hx-ic { width: 17px; height: 17px; display: block; stroke-width: 2; }

/* ---------- Microsoft 365 Copilot ---------- */
.hx-cop {
  --hx-ph: #707070;
  background: #FAFAFA; color: #242424;
  font: 400 15px/1.55 "Segoe UI Variable Text", "Segoe UI", "Open Sans", system-ui, sans-serif;
}
.cop-rail { width: 50px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 13px 0 12px; border-right: 1px solid #EBEBEB; background: #FAFAFA; color: #424242; }
.cop-rail .hx-ic { width: 19px; height: 19px; }
.cop-chat { width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px #E0E0E0; display: grid; place-items: center; }
.cop-chat .hx-ic { width: 17px; height: 17px; }
.cop-avatar { width: 28px; height: 28px; border-radius: 50%; background: #C4314B; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.cop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #FFFFFF; }
.cop-top { height: 48px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 14px; }
.cop-iq { padding: 4px 10px; border-radius: 8px; background: #EBEBEB; font-weight: 600; }
.cop-auto { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; }
.cop-auto .hx-ic { width: 14px; height: 14px; }
.cop-shield { color: #107C41; }
.cop-top .hx-ic { width: 18px; height: 18px; }
.cop-log { padding: 4px 22px 12px; }
.cop-col { gap: 16px; max-width: 640px; margin: 0 auto; }
.cop-you { align-self: flex-end; max-width: 80%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cop-bubble { background: #EFEFEF; border-radius: 12px; padding: 9px 15px; }
.cop-file { display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border: 1px solid #E0E0E0; border-radius: 10px; background: #fff; line-height: 1.3; }
.cop-file .hx-pdf { width: 32px; height: 32px; border-radius: 6px; background: #D13438; color: #D13438; }
.cop-file b { display: block; font-size: 13.5px; font-weight: 600; }
.cop-file small { color: #616161; font-size: 12px; }
.cop-a strong { font-weight: 600; }
.cop-confirm { display: flex; flex-direction: column; gap: 8px; }
.cop-status { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 14px; color: #242424; }
.cop-glyph { width: 16px; height: 16px; flex: none; }
.cop-status .hx-ic { width: 14px; height: 14px; color: #616161; }
.cop-status .is-fin, .cop-confirm.is-done .is-wait, .cop-tool .is-fin { display: none; }
.cop-confirm.is-done .is-fin, .cop-tool:not(.is-running) .is-fin { display: inline; }
.cop-tool:not(.is-running) .is-run { display: none; }
.is-running .cop-glyph { animation: hx-pulse 1s ease-in-out infinite; }
.cop-tool { margin-bottom: -6px; }
.cop-card { border: 1px solid #E0E0E0; border-radius: 16px; padding: 12px 14px; background: #fff; font-size: 14px; line-height: 1.45; }
.cop-card-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cop-card-h b { font-weight: 600; }
.cop-card p { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cop-card p .hx-ic { width: 14px; height: 14px; }
.cop-card-f { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.cop-note { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; line-height: 1.35; color: #424242; min-width: 0; flex: 1; }
.cop-note .hx-ic { width: 13px; height: 13px; }
.cop-btn { padding: 5px 11px; border-radius: 8px; background: #F0F0F0; font-size: 13.5px; white-space: nowrap; }
.cop-btn.is-primary { background: #242424; color: #fff; }
.cop-split { display: inline-flex; position: relative; }
.cop-split > .cop-btn:first-child { border-radius: 8px 0 0 8px; }
.cop-caret { border-radius: 0 8px 8px 0 !important; padding: 5px 7px; border-left: 1px solid #616161; display: grid; place-items: center; }
.cop-caret .hx-ic { width: 14px; height: 14px; }
.cop-menu {
  display: none; position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 2; min-width: 210px;
  background: #fff; border-radius: 10px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06);
}
.cop-menu span { display: block; padding: 6px 10px; border-radius: 6px; font-size: 13.5px; white-space: nowrap; }
.cop-menu .is-hover { background: #F0F0F0; }
.is-menu .cop-menu { display: block; }
.cop-ok { display: none; align-items: center; gap: 5px; color: #616161; font-size: 13px; }
.cop-ok .hx-ic { width: 14px; height: 14px; color: #107C41; }
.cop-confirm.is-done .cop-card { padding: 10px 14px; }
.cop-confirm.is-done .cop-card-f { margin-top: 6px; }
.cop-confirm.is-done .cop-note, .cop-confirm.is-done .cop-card-f > .cop-btn, .cop-confirm.is-done .cop-split { display: none; }
.cop-confirm.is-done .cop-ok { display: inline-flex; }
.cop-actions { display: flex; gap: 12px; color: #616161; margin-top: -8px; }
.cop-actions .hx-ic { width: 17px; height: 17px; }
.cop-composer {
  flex: none; margin: 0 18px; display: flex; align-items: flex-end; gap: 10px; padding: 11px 10px 10px 16px;
  border: 1px solid #E0E0E0; border-radius: 26px; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.06); color: #424242;
}
.cop-composer > .hx-ic { width: 20px; height: 20px; margin-bottom: 3px; }
.cop-composer .hx-input { color: #242424; align-self: center; }
.cop-send { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.hx-typed .cop-send { background: #242424; color: #fff; }
.cop-send .hx-ic { width: 18px; height: 18px; }
.cop-foot { flex: none; text-align: center; font-size: 10.5px; color: #616161; padding: 7px 10px 9px; line-height: 1.35; }

/* ---------- Claude ---------- */
.hx-cl {
  --hx-ph: #73726C;
  flex-direction: column; background: #FAF9F5; color: #141413;
  font: 400 15px/1.55 "DM Sans", ui-sans-serif, system-ui, sans-serif;
}
.cl-top { height: 46px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 14px; color: #3D3D3A; }
.cl-top > .hx-ic { width: 18px; height: 18px; margin-left: 4px; }
.cl-title { display: inline-flex; align-items: center; gap: 4px; font-size: 14.5px; font-weight: 500; color: #141413; }
.cl-title .hx-ic { width: 15px; height: 15px; color: #73726C; }
.cl-log { padding: 8px 26px 4px; }
.cl-col { gap: 16px; max-width: 640px; margin: 0 auto; }
.cl-you { align-self: flex-end; max-width: 82%; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cl-bubble { background: #F0EEE6; border-radius: 12px; padding: 9px 14px; }
.cl-file { width: 124px; padding: 10px 12px; border: 1px solid #E3E1D7; border-radius: 10px; background: #fff; line-height: 1.3; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.cl-file b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; font-weight: 500; }
.cl-file small { display: inline-block; margin-top: 8px; padding: 1px 6px; border: 1px solid #E3E1D7; border-radius: 5px; font-size: 10.5px; color: #73726C; }
.cl-a { font: 400 16px/1.6 "Source Serif 4", "Tiempos Text", Georgia, serif; color: #141413; }
.cl-a strong { font-weight: 600; }
.cl-tool { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; color: #73726C; font-size: 14px; margin-bottom: -6px; }
.cl-tool .hx-ls { width: 16px; height: 16px; }
.cl-tool .hx-ic { width: 14px; height: 14px; }
.cl-dots { width: 16px; height: 16px; border-radius: 50%; border: 2px dotted #D97757; animation: hx-spin 1.6s linear infinite; }
.cl-tool .is-fin, .cl-tool.is-done .is-run, .cl-tool.is-done .cl-dots, .cl-tool:not(.is-done) .hx-ls, .cl-tool:not(.is-done) .hx-ic { display: none; }
.cl-tool.is-done .is-fin { display: inline; }
.cl-card { border: 1px solid #DEDCD1; border-radius: 12px; background: #fff; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.cl-card-h { display: flex; align-items: center; gap: 10px; }
.cl-card-h b { font-weight: 600; }
.cl-card-f { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.cl-cbtn { padding: 5px 12px; border-radius: 8px; border: 1px solid #DEDCD1; font-size: 13.5px; font-weight: 500; background: #fff; white-space: nowrap; }
.cl-cbtn.is-primary { background: #141413; border-color: #141413; color: #FAF9F5; }
.cl-ok { display: none; align-items: center; gap: 5px; color: #73726C; font-size: 13px; }
.cl-ok .hx-ic { width: 14px; height: 14px; }
.cl-card.is-done .cl-card-f { margin-top: 6px; }
.cl-card.is-done .cl-cbtn { display: none; }
.cl-card.is-done .cl-ok { display: inline-flex; }
.cl-idle { max-width: 640px; margin: 12px auto 6px; }
.cl-idle .hx-spark { width: 26px; height: 26px; display: block; }
.cl-col:not(:has(.cl-a)) + .cl-idle { visibility: hidden; }
.hx-busy .cl-idle .hx-spark { animation: hx-spin 2.4s linear infinite; }
.cl-composer {
  flex: none; margin: 4px 18px 16px; padding: 12px 10px 9px 15px; border: 1px solid #E3E1D7; border-radius: 20px;
  background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.04);
}
.cl-composer .hx-input { min-height: 24px; }
.cl-row { display: flex; align-items: center; gap: 6px; margin-top: 8px; color: #3D3D3A; }
.cl-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid #E3E1D7; display: grid; place-items: center; }
.cl-btn .hx-ic { width: 16px; height: 16px; }
.cl-model { display: inline-flex; align-items: center; gap: 3px; font-size: 13.5px; color: #3D3D3A; margin-right: 6px; }
.cl-model .hx-ic { width: 14px; height: 14px; }
.cl-send { width: 32px; height: 32px; border-radius: 9px; background: #D97757; opacity: .45; color: #fff; display: grid; place-items: center; }
.hx-typed .cl-send { opacity: 1; }
.cl-send .hx-ic { width: 17px; height: 17px; display: block; stroke-width: 2.2; }

/* ---------- Claude Code (default dark theme) ---------- */
.hx-cc {
  flex-direction: column; background: #1E1E1E; color: #FFFFFF;
  font: 400 12.5px/1.55 "JetBrains Mono", "SF Mono", Menlo, ui-monospace, monospace;
}
.cc-top {
  height: 34px; flex: none; display: flex; align-items: center; padding: 0 12px; position: relative;
  background: #E9E9EB; color: #2A2A2A; border-bottom: 1px solid #CFCFD2;
  font: 600 13px/1 -apple-system, "Segoe UI", system-ui, sans-serif;
}
.cc-title { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.cc-key { margin-left: auto; color: #6A6A6A; font-weight: 500; font-size: 12px; }
.cc-log { padding: 12px 14px 10px; }
.cc-dim { color: #999999; }
.cc-welcome { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; }
.cc-welcome .hx-spark { width: 40px; height: 40px; flex: none; margin: 0 6px 0 4px; }
.cc-welcome b { font-weight: 700; }
.cc-list { gap: 12px; }
.cc-you { display: flex; gap: 1ch; padding: 3px 8px 3px 0; background: #2C2C2C; color: #C8C8C8; margin-left: -4px; padding-left: 4px; }
.cc-gt { color: #999999; flex: none; }
.cc-mention { color: #B1B9F9; }
.cc-a, .cc-call, .cc-res { display: flex; gap: 1ch; }
.cc-dot { flex: none; color: #FFFFFF; }
.cc-a strong { font-weight: 700; }
.cc-tool .cc-dot { color: #999999; animation: hx-blink 1s steps(1) infinite; }
.cc-tool.is-done .cc-dot { color: #4EBA65; animation: none; }
.cc-call b { font-weight: 700; }
.cc-res { padding-left: 2ch; color: #FFFFFF; }
.cc-hook { color: #999999; flex: none; }
.cc-tool:not(.is-done) .cc-res { visibility: hidden; }
.cc-spin { display: none; color: #D77757; margin-top: 12px; }
.hx-busy .cc-spin { display: block; }
.cc-star { display: inline-block; animation: hx-spin 2s linear infinite; }
.cc-prompt { display: flex; gap: 1ch; margin-top: 12px; padding: 6px 0; border-top: 1px solid #5A5A5A; border-bottom: 1px solid #5A5A5A; }
.cc-prompt .hx-input { min-height: 1.55em; }
.cc-prompt .hx-input::after {
  content: ""; display: inline-block; width: 1ch; height: 1.25em; vertical-align: -0.25em; background: #BFBFBF;
}
[data-state="playing"] .cc-prompt .hx-input::after { animation: none; }
.cc-status { padding: 4px 0 0 2ch; }
.cc-perm { display: none; margin-top: 12px; }
.is-asking .cc-perm { display: block; }
.is-asking .cc-prompt, .is-asking .cc-status, .is-asking .cc-spin { display: none; }
.cc-box { border: 1px solid #B1B9F9; border-radius: 8px; padding: 6px 10px 8px; }
.cc-box > b { color: #B1B9F9; font-weight: 700; }
.cc-pad { padding: 4px 0 6px 2ch; }
.cc-opt { padding-left: 5ch; text-indent: -5ch; }
.cc-opt.is-sel { color: #B1B9F9; }

/* ---------- narrow windows (phones) ---------- */
@container (max-width: 460px) {
  .gpt-rail, .cop-rail { display: none; }
  .gpt-log, .gem-log, .cop-log, .cl-log { padding-inline: 14px; }
  .gpt-composer, .cop-composer { margin-inline: 10px; }
  .gem-composer, .cl-composer { margin-inline: 10px; margin-bottom: 10px; }
  .gpt-model { display: none; }
  .gem-mode { font-size: 0; gap: 0; }
  .gem-mode .hx-ic:last-child { display: none; }
  .gpt-you, .gem-you, .cop-you, .cl-you { max-width: 88%; }
  .cop-note { display: none; }
  .gpt-check { font-size: 12px; }
  .cl-card-f { flex-wrap: wrap; }
  .gpt-foot, .cop-foot { font-size: 10px; }
  .hx-cc { font-size: 11.5px; }
  .cc-welcome .hx-spark { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
}