/* ============================================================
   CHATBOT SCENE (scene 1 of 2)

   Scene-specific content styling + 8s animation timeline.
   Shell lives in dashboard-demo.css.

   Timeline (% of 8s total):
      0 - 25    Hold on initial frame (user msg + AI response loaded)
     25 - 62    Gentle scroll down to Frame 4
     62 - 66    Rest on Frame 4
     66 - 80    Cursor glides in and clicks Acme renewal card
     80 - 100   Acme selected + left panel crossfades Home -> detail

   Plays once per activation (.is-playing toggled by carousel
   on slide entry; restarting forces a reflow).
============================================================ */

/* ---------- CONTENT STYLING ---------------------------------- */

/* Section titles inside chat */
.dd-root .dd-section {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dd-text);
  margin-top: 4px;
}

/* User message bubble (pushed right, max 192px) */
.dd-root .dd-msg-user {
  align-self: flex-end;
  max-width: 192px;
  background: var(--dd-grey-block);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.38;
  color: var(--dd-text);
}

/* AI wireframe response (stacked skeleton lines) */
.dd-root .dd-wire {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* AI-Card-Item: horizontal layout, icon + body */
.dd-root .dd-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--dd-grey-block);
  border-radius: 8px;
}

.dd-root img.dd-card__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-self: center;
}

.dd-root .dd-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dd-root .dd-card__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--dd-text);
}

/* Acme renewal card carries a compact Stalled pill on the right */
.dd-root .dd-card .dd-pill--compact {
  flex: 0 0 auto;
  align-self: center;
}

/* Meeting prep card — vertical, contains title + bars + notes pill */
.dd-root .dd-card--meeting {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 14px;
}

.dd-root .dd-card--meeting .dd-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--dd-text);
  line-height: 1.25;
}

.dd-root .dd-pill-notes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px 3px 3px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--dd-text);
  align-self: flex-start;
  margin-top: 6px;
}

.dd-root img.dd-pill-notes__icon {
  width: 18px;
  height: 18px;
}

/* ---------- INITIAL (pre-play) STATE ------------------------- */

.dd-root .dd-chat-track {
  transform: translateY(0);
}

.dd-root .dd-view--detail {
  opacity: 0;
  pointer-events: none;
}

/* ---------- PLAYING STATE (animations) ----------------------- */

.dd-root.is-playing .dd-chat-track {
  animation: dd-track 8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.dd-root.is-playing [data-click-target] {
  animation: dd-select 8s ease-out forwards;
}

.dd-root.is-playing .dd-cursor {
  animation: dd-cursor 8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dd-root.is-playing .dd-view--home {
  animation: dd-home-exit 8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.dd-root.is-playing .dd-view--detail {
  animation: dd-detail-enter 8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ---------- KEYFRAMES --------------------------------------- */

/* Main scroll: hold 2s, scroll 3s, hold */
@keyframes dd-track {
  0%, 25%   { transform: translateY(0); }
  62%, 100% { transform: translateY(-504px); }
}

/* Cursor: fades in bottom-right, glides to Acme card, clicks, fades */
@keyframes dd-cursor {
  0%, 64%   { opacity: 0; transform: translate(545px, 335px); }
  68%       { opacity: 1; transform: translate(545px, 335px); }
  78%       { opacity: 1; transform: translate(487px, 169px); }
  80%       { opacity: 1; transform: translate(487px, 169px) scale(0.85); }
  82%       { opacity: 1; transform: translate(487px, 169px) scale(1); }
  92%       { opacity: 1; transform: translate(487px, 169px); }
  97%, 100% { opacity: 0; transform: translate(487px, 169px); }
}

/* Selection ring — inset so it isn't clipped by the scroll container */
@keyframes dd-select {
  0%, 80%   { box-shadow: inset 0 0 0 2px transparent; }
  82%, 100% { box-shadow: inset 0 0 0 2px var(--dd-select); }
}

/* Home view exit */
@keyframes dd-home-exit {
  0%, 82%   { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* Detail view enter */
@keyframes dd-detail-enter {
  0%, 84%   { opacity: 0; transform: translateY(6px); }
  92%, 100% { opacity: 1; transform: translateY(0); }
}