/* Studio chatbox chrome — mirrors Generate / Director composer (Hyperframes-safe). */
.hw-studio-root {
  --hw-accent: var(--accent, #0a84ff);
  --hw-chat-surface: #141416;
  --hw-chat-border: rgba(255, 255, 255, 0.14);
  --hw-chat-shadow: 0 24px 64px rgba(0, 0, 0, 0.78), 0 0 0 1px var(--hw-chat-border);
  --hw-prompt-bg: color-mix(in srgb, var(--hw-accent) 14%, #121214);
  --hw-prompt-border: color-mix(in srgb, var(--hw-accent) 32%, rgba(255, 255, 255, 0.1));
  --hw-text: #f5f5f7;
  --hw-muted: rgba(245, 245, 247, 0.58);
  width: 100%;
  max-width: 920px;
  margin-inline: auto;
}
html[data-ec-theme="light"] .hw-studio-root {
  --hw-chat-surface: #ffffff;
  --hw-chat-border: rgba(15, 23, 42, 0.14);
  --hw-chat-shadow: 0 20px 52px rgba(15, 23, 42, 0.16), 0 0 0 1px var(--hw-chat-border);
  --hw-prompt-bg: color-mix(in srgb, var(--hw-accent) 7%, #f1f5f9);
  --hw-prompt-border: color-mix(in srgb, var(--hw-accent) 28%, rgba(15, 23, 42, 0.12));
  --hw-text: #0f1117;
  --hw-muted: rgba(15, 17, 23, 0.58);
}

.hw-studio-wrap {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  width: 100%;
}

.hw-studio-wrap--solo {
  gap: 0;
}

.hw-studio-chatbox {
  flex: 1;
  min-width: 0;
  border-radius: 22px;
  border: 1px solid var(--hw-chat-border);
  background: var(--hw-chat-surface);
  box-shadow: var(--hw-chat-shadow);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
  padding: 16px 16px 14px;
}

.hw-studio-prompt-field {
  display: flex;
  align-items: flex-start;
  min-height: 56px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--hw-prompt-bg) 88%, #ffffff) 0%,
    var(--hw-prompt-bg) 55%,
    color-mix(in srgb, var(--hw-accent) 10%, var(--hw-chat-surface)) 100%
  );
  border: 1px solid var(--hw-prompt-border);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
    0 1px 3px rgba(0, 0, 0, 0.25);
  font-size: 18px;
  line-height: 1.45;
  color: var(--hw-text);
  text-align: left;
}
html[data-ec-theme="light"] .hw-studio-prompt-field {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 55%, transparent),
    0 1px 2px color-mix(in srgb, var(--hw-accent) 8%, transparent);
}

.hw-studio-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.hw-studio-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hw-studio-chip {
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--line);
  color: var(--hw-muted);
  background: rgba(255, 255, 255, 0.04);
}

.hw-studio-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.hw-studio-dictate {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--hw-accent) 35%, transparent);
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--hw-accent) 22%, var(--hw-chat-surface)) 0%,
    color-mix(in srgb, var(--hw-accent) 10%, var(--hw-chat-surface)) 100%
  );
  display: grid;
  place-items: center;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hw-accent) 18%, transparent);
}

.hw-studio-generate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--hw-accent) 40%, transparent);
  background: color-mix(in srgb, var(--hw-accent) 18%, var(--hw-chat-surface));
  color: var(--hw-text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.hw-studio-generate .ec-lucide {
  width: 18px;
  height: 18px;
  color: var(--hw-accent);
}

.hw-dictate-mic {
  width: 20px;
  height: 20px;
  color: color-mix(in srgb, var(--hw-accent) 72%, var(--hw-text));
  stroke: currentColor;
  fill: none;
}

.hw-thinking-orb {
  display: none;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  animation: none;
}

.hw-thinking-orb.hw-thinking-orb--live {
  border-radius: 0;
}

.hw-studio-dictate.is-listening {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.hw-studio-dictate.is-listening .hw-dictate-mic {
  display: none;
}

.hw-studio-dictate.is-listening .hw-thinking-orb {
  display: block;
}

.hw-thinking-orb:not(.hw-thinking-orb--live)::before,
.hw-thinking-orb:not(.hw-thinking-orb--live)::after {
  display: none;
}
@keyframes hw-orb-ring {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Jumping bot avatar (marketing agent) */
.hw-bot-jump {
  flex-shrink: 0;
  animation: hw-bot-jump 1.15s ease-in-out infinite;
  filter: drop-shadow(0 14px 28px color-mix(in srgb, var(--hw-accent) 35%, transparent));
}
@keyframes hw-bot-jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hw-bot-avatar {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(145deg, #5eead4 0%, #22d3ee 40%, #6366f1 100%);
  position: relative;
  box-shadow:
    inset 0 -8px 16px rgba(0, 0, 0, 0.18),
    inset 0 2px 0 rgba(255, 255, 255, 0.35);
}
.hw-bot-avatar::before,
.hw-bot-avatar::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #0f1117;
  top: 28px;
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.25);
}
.hw-bot-avatar::before { left: 22px; }
.hw-bot-avatar::after { right: 22px; }
.hw-bot-avatar .mouth {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 22px;
  height: 8px;
  border-radius: 0 0 12px 12px;
  background: rgba(15, 17, 23, 0.75);
}
.hw-bot-avatar .antenna {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.65);
}
.hw-bot-avatar .antenna::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hw-accent);
  box-shadow: 0 0 10px var(--hw-accent);
}

/* Jenga feature stack */
.jenga-stage {
  position: relative;
  width: min(440px, 92vw);
  height: 300px;
  margin-top: 28px;
  perspective: 1100px;
}
.jenga-block {
  position: absolute;
  left: 50%;
  width: 380px;
  margin-left: -190px;
  height: 68px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--hw-accent) 28%, var(--line));
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  transform-origin: center bottom;
}
html[data-ec-theme="light"] .jenga-block {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 247, 0.88));
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}
.jenga-block .jb-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--hw-accent) 18%, transparent);
  color: var(--hw-accent);
}
.jenga-block .jb-icon .ec-lucide { width: 20px; height: 20px; }
.jenga-block .jb-title { font-size: 17px; font-weight: 800; color: var(--ink); }
.jenga-block .jb-sub {
  font-size: 13px;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
  margin-top: 2px;
}