/* ============================================================
   DASHBOARD DEMO — shell (scene-agnostic)

   Reusable 612x440 canvas for portfolio dashboard demos.
   Scene-specific content and timelines live in separate files
   (chatbot-scene.css for scene 1; scene 2 TBD).

   All styles are scoped under .dd-root. The component is
   plug-and-play: include this file + one scene file + the
   markup block; no JS required beyond the optional carousel
   activation hook.
============================================================ */

.dd-root {
  /* Canvas geometry */
  --dd-canvas-w: 612px;
  --dd-canvas-h: 440px;
  --dd-left-w:   372px;
  --dd-right-w:  240px;
  --dd-radius:   16px;

  /* Palette (from design tokens) */
  --dd-bg:           #ffffff;
  --dd-border:       rgba(0, 0, 0, 0.08);
  --dd-grey-block:   #F1F5F9;
  --dd-grey-bar:     #E1E8EF;
  --dd-text:         #1E293B;
  --dd-stalled-fg:   #B91C1C;
  --dd-stalled-bg:   #FEE2E2;
  --dd-select:       #2F80ED;
  --dd-input-a:      #2DD4BF;
  --dd-input-b:      #7886FC;

  position: relative;
  width: var(--dd-canvas-w);
  height: var(--dd-canvas-h);
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--dd-text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  cursor: default;
}

/* Canvas ------------------------------------------------------ */

.dd-root .dd-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--dd-bg);
  border: 1px solid var(--dd-border);
  border-radius: var(--dd-radius);
  overflow: hidden;
  display: flex;
}

/* Override carousel visual wrapper styling when holding the demo */
.carousel__visual--demo {
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  align-items: center;
  justify-content: center;
}

/* LEFT PANEL ------------------------------------------------- */

.dd-root .dd-left {
  position: relative;
  flex: 0 0 var(--dd-left-w);
  width: var(--dd-left-w);
  height: 100%;
  padding: 22px 20px;
  border-right: 1px solid var(--dd-border);
  box-sizing: border-box;
}

.dd-root .dd-view {
  position: absolute;
  inset: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  will-change: opacity, transform;
}

.dd-root .dd-view__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--dd-text);
}

.dd-root .dd-view__head-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dd-root .dd-view__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.dd-root .dd-tile {
  background: var(--dd-grey-block);
  border-radius: 10px;
  flex: 1;
  min-height: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
}

.dd-root .dd-tile--wide {
  flex: 0 0 140px;
}

.dd-root .dd-tile-row {
  display: flex;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.dd-root .dd-tile-row .dd-tile {
  flex: 1 1 50%;
}

/* Empty tiles hide their inner bars in the home view */
.dd-root .dd-view--home .dd-bar { display: none; }

/* RIGHT PANEL (chatbot shell) -------------------------------- */

.dd-root .dd-right {
  position: relative;
  flex: 0 0 var(--dd-right-w);
  width: var(--dd-right-w);
  height: 100%;
  padding: 16px 12px 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.dd-root .dd-chat-clip {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

.dd-root .dd-chat-track {
  display: flex;
  flex-direction: column;
  gap: 16px;
  will-change: transform;
}

/* Input bar -------------------------------------------------- */

.dd-root .dd-input {
  flex: 0 0 44px;
  height: 44px;
  border-radius: 999px;
  padding: 1px; /* room for gradient border */
  background: linear-gradient(90deg, var(--dd-input-a) 0%, var(--dd-input-b) 100%);
  display: flex;
  align-items: center;
  position: relative;
}

.dd-root .dd-input::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 999px;
  background: var(--dd-bg);
}

.dd-root img.dd-input__plus {
  position: relative;
  width: 12px;
  height: 12px;
  margin-left: 14px;
}

.dd-root .dd-input__send {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dd-root .dd-input__send img {
  width: 12px;
  height: 12px;
  opacity: 0.75;
}

/* Skeleton bar (shared shape) -------------------------------- */

.dd-root .dd-bar {
  display: block;
  width: var(--w, 100%);
  height: 8px;
  border-radius: 999px;
  background: var(--dd-grey-bar);
}

/* Pills ------------------------------------------------------ */

.dd-root .dd-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  background: var(--dd-stalled-bg);
  color: var(--dd-stalled-fg);
}

.dd-root .dd-pill--compact {
  padding: 2px 8px;
  font-size: 11px;
}

/* Cursor glyph ----------------------------------------------- */

.dd-root .dd-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
  will-change: transform, opacity;
}