/* ============================================
   AI EXPLORATIONS PAGE — isolated styles
   Only linked from work/ai-explorations.html
   Uses design tokens already defined in tokens.css
============================================ */

/* --- WATERMARK --- */
.ai-watermark {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}

/* --- AGENT DETAIL DIALOG --- */
.ai-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
  background: rgba(6, 6, 5, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}

.ai-dialog-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 0s linear 0s;
}

.ai-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1040px;
  margin: auto 0;
  overflow: hidden;
  background: #141412;
  border: 1px solid #2A2A26;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  transform: scale(0.96) translateY(8px);
  transition: transform 200ms ease;
}

.ai-dialog-overlay.is-open .ai-dialog {
  transform: scale(1) translateY(0);
}

.ai-dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #2A2A26;
  border-radius: 6px;
  background: #1A1A18;
  color: #7A7972;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.ai-dialog-close:hover {
  background: #232320;
  color: #F0EEE9;
}

.ai-dialog-body {
  flex: 1 1 auto;
  padding: 36px;
}

.ai-dialog-footer {
  display: none;
  flex-shrink: 0;
}

.ai-dialog-cta--fixed {
  display: none;
}

.ai-dialog-layout {
  display: flex;
  gap: 108px;
  align-items: flex-start;
}

.ai-dialog-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-dialog-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.ai-dialog-status {
  margin: 0;
  font-size: 12px;
  color: #4ADE80;
}

.ai-dialog-title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: #F0EEE9;
}

.ai-dialog-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
}

.ai-dialog-section-label {
  margin: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #5A5952;
}

.ai-dialog-capabilities {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ai-dialog-capabilities li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #A6A49E;
}

.ai-dialog-cap-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: #4ADE80;
}

.ai-dialog-date {
  margin: 0;
  font-size: 11px;
  color: #5A5952;
}

.ai-dialog-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 10px 16px;
  border: 1px solid #4ADE80;
  border-radius: 6px;
  background: transparent;
  color: #4ADE80;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.ai-dialog-cta:hover {
  background: #4ADE80;
  color: #0D0D0C;
}

/* .ai-dialog-text uses a 10px flex gap between all rows; add the remaining
   54px here so only the capabilities-to-CTA gap grows to 64px. */
.ai-dialog-cta--inline {
  margin-top: 54px;
}

.ai-dialog-media {
  flex: 0 0 600px;
  width: 600px;
  margin-top: 48px;
}

.ai-dialog-media-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid #2A2A26;
  background-color: #0F0F0D;
  overflow: hidden;
}

.ai-term {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 18px 20px;
  font-size: 11.5px;
  line-height: 1.9;
}

.ai-term-line {
  display: flex;
  gap: 8px;
  color: #A6A49E;
  opacity: 0;
}

.ai-term-prompt { color: #5A5952; flex-shrink: 0; }
.ai-term-ok { color: #4ADE80; flex-shrink: 0; }
.ai-term-result { padding-left: 18px; color: #F0EEE9; }
.ai-term-score { color: #4ADE80; }

.ai-term-cursor {
  display: inline-block;
  width: 6px;
  height: 12px;
  background: #4ADE80;
  margin-left: 2px;
  vertical-align: -2px;
}

/* Terminal lines only animate while the dialog is actually open — otherwise
   they'd play once on page load and be long finished before anyone clicks
   the card. Once the log finishes, it fades out and the result card fades
   in behind it, in the same panel. */
.ai-dialog-overlay.is-open .ai-term-line {
  animation: ai-term-in 400ms ease forwards;
}

.ai-dialog-overlay.is-open .ai-term-line:nth-child(1) { animation-delay: 0ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(2) { animation-delay: 260ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(3) { animation-delay: 640ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(4) { animation-delay: 900ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(5) { animation-delay: 1280ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(6) { animation-delay: 1660ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(7) { animation-delay: 1920ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(8) { animation-delay: 2080ms; }
.ai-dialog-overlay.is-open .ai-term-line:nth-child(9) { animation-delay: 2460ms; }

.ai-dialog-overlay.is-open .ai-term-cursor {
  animation: ai-term-blink 1s step-end infinite;
}

.ai-dialog-overlay.is-open .ai-term {
  animation: ai-term-exit 400ms ease forwards;
  animation-delay: 3560ms;
}

@keyframes ai-term-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ai-term-blink {
  50% { opacity: 0; }
}

@keyframes ai-term-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* --- RESULT CARD: second frame the terminal leads into --- */
.ai-media-result {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  background-image: radial-gradient(circle, #201F1C 1px, transparent 1px);
  background-size: 14px 14px;
}

.ai-dialog-overlay.is-open .ai-media-result {
  animation: ai-result-in 500ms ease forwards;
  animation-delay: 3800ms;
}

@keyframes ai-result-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.ai-result-card {
  width: 100%;
  max-width: 320px;
  background: #141412;
  border: 1px solid #2A2A26;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transition: opacity 260ms ease;
}

.ai-result-card.is-swapping {
  opacity: 0;
}

.ai-result-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-result-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #234A34;
  color: #4ADE80;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-result-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.ai-result-role {
  font-size: 12.5px;
  color: #F0EEE9;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-result-co {
  font-size: 10.5px;
  color: #5A5952;
}

.ai-result-pill {
  font-size: 10px;
  color: #4ADE80;
  border: 1px solid #4ADE80;
  border-radius: 20px;
  padding: 2px 8px;
  flex-shrink: 0;
}

.ai-result-why {
  font-size: 11.5px;
  line-height: 1.55;
  color: #A6A49E;
  margin: 0;
}

.ai-result-time {
  font-size: 10px;
  color: #5A5952;
}

@media (prefers-reduced-motion: reduce) {
  .ai-dialog-overlay.is-open .ai-term-line { animation: none; opacity: 1; }
  .ai-dialog-overlay.is-open .ai-term-cursor { animation: none; }
  .ai-dialog-overlay.is-open .ai-term { animation: none; opacity: 1; }
  .ai-dialog-overlay.is-open .ai-media-result { animation: none; opacity: 0; }
}

/* --- EXPERIMENTS CANVAS SECTION --- */
.ai-canvas-section {
  padding-top: var(--nav-height);
  padding-bottom: var(--space-24);
}

.ai-canvas-viewport {
  position: relative;
  width: 100%;
  height: 340px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  background-image: radial-gradient(circle, var(--color-border) 1px, transparent 1px);
  background-size: 22px 22px;
}

.ai-canvas-viewport.is-dragging {
  cursor: grabbing;
}

.ai-canvas-spotlight {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(40, 93, 198, 0.45) 1.8px, transparent 1.8px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(200px circle at var(--spot-x, 50%) var(--spot-y, 50%), black 0%, transparent 70%);
  mask-image: radial-gradient(200px circle at var(--spot-x, 50%) var(--spot-y, 50%), black 0%, transparent 70%);
  opacity: 0;
  transition: opacity 250ms ease;
  pointer-events: none;
}

.ai-canvas-spotlight.is-active {
  opacity: 1;
}

.ai-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 2600px;
  height: 1400px;
  will-change: transform;
}

/* --- DRAG HINT --- */
.ai-drag-hint {
  position: absolute;
  top: 250px;
  left: 400px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  opacity: 1;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.ai-drag-hint svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ai-drag-hint.is-hidden {
  opacity: 0;
}

/* --- CARDS (terminal / build-log) --- */
.ai-card {
  --tm-bg: #141412;
  --tm-border: #2A2A26;
  --tm-text: #F0EEE9;
  --tm-muted: #7A7972;
  --tm-dim: #5A5952;
  --tm-live: #4ADE80;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 380px;
  border-radius: 12px;
  border: 1px solid var(--tm-border);
  background: var(--tm-bg);
  overflow: hidden;
  cursor: grab;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.ai-canvas .ai-card {
  touch-action: none;
  user-select: none;
}

/* Window chrome — traffic-light dots, like a terminal tab */
.ai-card-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--tm-border);
}

.ai-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #38362F;
}

.ai-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

/* Identity — avatar + name/status, the agent's "face" */
.ai-card-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 4px;
}

.ai-card-identity-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ai-card-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--tm-border);
  background: #0F0F0D;
  overflow: hidden;
}

/* Pixel magnifying glass — the agent's identity mark, built from box-shadow "pixels" */
.ai-card-avatar-glass-wrap {
  position: absolute;
  inset: 0;
  transform-origin: 40px 40px;
}

.ai-card-avatar-glass {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 5px;
  height: 5px;
  background: transparent;
  box-shadow:
    15px 5px 0 0 var(--tm-live),
    20px 5px 0 0 var(--tm-live),
    25px 5px 0 0 var(--tm-live),
    10px 10px 0 0 var(--tm-live),
    30px 10px 0 0 var(--tm-live),
    10px 15px 0 0 var(--tm-live),
    30px 15px 0 0 var(--tm-live),
    10px 20px 0 0 var(--tm-live),
    30px 20px 0 0 var(--tm-live),
    15px 25px 0 0 var(--tm-live),
    20px 25px 0 0 var(--tm-live),
    25px 25px 0 0 var(--tm-live),
    35px 30px 0 0 var(--tm-dim),
    40px 35px 0 0 var(--tm-dim),
    45px 40px 0 0 var(--tm-dim);
  transition: box-shadow 200ms ease;
}

.ai-card-avatar--idle .ai-card-avatar-glass {
  box-shadow:
    15px 5px 0 0 var(--tm-dim),
    20px 5px 0 0 var(--tm-dim),
    25px 5px 0 0 var(--tm-dim),
    10px 10px 0 0 var(--tm-dim),
    30px 10px 0 0 var(--tm-dim),
    10px 15px 0 0 var(--tm-dim),
    30px 15px 0 0 var(--tm-dim),
    10px 20px 0 0 var(--tm-dim),
    30px 20px 0 0 var(--tm-dim),
    15px 25px 0 0 var(--tm-dim),
    20px 25px 0 0 var(--tm-dim),
    25px 25px 0 0 var(--tm-dim),
    35px 30px 0 0 var(--tm-border),
    40px 35px 0 0 var(--tm-border),
    45px 40px 0 0 var(--tm-border);
}

/* Hover — tilts and pans like it's actively scanning, and glows amber like it just spotted a lead */
.ai-card-avatar:not(.ai-card-avatar--idle):hover .ai-card-avatar-glass-wrap {
  animation: ai-avatar-scan 1.1s ease-in-out infinite;
}

@keyframes ai-avatar-scan {
  0%, 100% { transform: rotate(-14deg) translateX(-1px); }
  50% { transform: rotate(14deg) translateX(1px); }
}

.ai-card-avatar:not(.ai-card-avatar--idle):hover .ai-card-avatar-glass {
  box-shadow:
    15px 5px 0 0 #FBBF24,
    20px 5px 0 0 #FBBF24,
    25px 5px 0 0 #FBBF24,
    10px 10px 0 0 #FBBF24,
    30px 10px 0 0 #FBBF24,
    10px 15px 0 0 #FBBF24,
    30px 15px 0 0 #FBBF24,
    10px 20px 0 0 #FBBF24,
    30px 20px 0 0 #FBBF24,
    15px 25px 0 0 #FBBF24,
    20px 25px 0 0 #FBBF24,
    25px 25px 0 0 #FBBF24,
    35px 30px 0 0 #C99A2E,
    40px 35px 0 0 #C99A2E,
    45px 40px 0 0 #C99A2E;
}

@media (prefers-reduced-motion: reduce) {
  .ai-card-avatar:hover .ai-card-avatar-glass-wrap {
    animation: none;
  }
}

.ai-card-status {
  margin: 0;
  font-size: 14px;
  color: var(--tm-live);
}

.ai-card--idea .ai-card-status {
  color: var(--tm-dim);
}

.ai-card-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  margin-left: 2px;
  background: var(--tm-live);
  vertical-align: middle;
  animation: ai-card-blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ai-card-cursor {
    animation: none;
  }
}

@keyframes ai-card-blink {
  50% { opacity: 0; }
}

.ai-card-date {
  font-size: 13px;
  color: var(--tm-dim);
  margin-top: var(--space-2);
}

.ai-card-title {
  font-size: 16px;
  font-weight: 400;
  color: var(--tm-text);
  line-height: 1.5;
  margin: 0;
}

.ai-card-title--muted {
  color: var(--tm-muted);
}

.ai-card-sub {
  font-size: 14px;
  line-height: 1.65;
  color: var(--tm-muted);
  margin: 0;
}

.ai-card-sub--muted {
  color: var(--tm-dim);
}

/* Active card — primary, interactive */
.ai-card--active {
  border-color: var(--tm-border);
}

.ai-card--active:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.55);
  border-color: #3A3D37;
}

@keyframes ai-card-click-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

.ai-card--active.ai-card--clicked {
  animation: ai-card-click-pulse 220ms ease;
}

/* Idea cards — flatter, non-interactive */
.ai-card--idea {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Card actively being dragged — lifts, like picking up a floating window */
.ai-card.ai-card--dragging {
  cursor: grabbing;
  transform: scale(1.03);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
  transition: transform 100ms ease, box-shadow 100ms ease;
}

/* Desktop scattered positions */
.ai-canvas .ai-card {
  position: absolute;
  z-index: 1;
}

.ai-card--pos-1 {
  left: 60px;
  top: 60px;
}

.ai-card--pos-2 {
  left: 560px;
  top: 220px;
}

.ai-card--pos-3 {
  left: 980px;
  top: 560px;
}

.ai-card--pos-4 {
  left: 1500px;
  top: 280px;
}

/* Mobile stacked list — hidden on desktop */
.ai-card-list {
  display: none;
}

/* --- FULL-PAGE CANVAS (desktop) --- */
@media (min-width: 769px) {
  html, body {
    height: 100%;
    overflow: hidden;
  }

  .page-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  .ai-canvas-section {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 0;
  }

  .ai-canvas-viewport {
    height: 100%;
  }
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  /* main.css sets .page-wrapper { overflow-x: hidden }, which per spec forces
     overflow-y to compute as "auto" too, silently turning it into its own
     scroll container and hijacking position:sticky away from the real page
     scroll. Nothing on this page's mobile layout needs the horizontal clip
     (the wide desktop canvas is display:none here), so undo it locally. */
  .page-wrapper {
    overflow-x: visible;
  }

  .ai-canvas-viewport {
    display: none;
  }

  .ai-canvas-section {
    padding-top: calc(var(--nav-height) + 20px);
    padding-bottom: 0;
  }

  .ai-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: 0 20px;
  }

  .ai-card-list .ai-card {
    width: 100%;
  }

  /* Cards 3+ are plain, permanent list items — not pinned, not separate from
     the list. They just start coiled tightly behind the previous card and
     straighten out (margin-top animates toward 0) as the user scrolls to
     them, like pulling slack thread straight. */
  .ai-card--stacked {
    will-change: margin-top;
  }

  /* On mobile the watermark is normal flow content after the last card,
     not a floating fixed label sitting over the list the whole time. */
  .ai-watermark {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    display: block;
    padding: 24px 20px 20px;
  }

  /* Agent detail dialog becomes a bottom sheet on mobile: anchored to the
     bottom edge, full-width, slides up instead of scaling in from center. */
  .ai-dialog-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .ai-dialog {
    width: 100%;
    max-width: none;
    max-height: 85vh;
    margin: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    padding-top: 6px;
    transform: translateY(100%);
    transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Bottom sheet is viewport-capped by design, so it keeps its own
     internal scroll instead of growing past the screen. */
  .ai-dialog-body {
    overflow-y: auto;
  }

  .ai-dialog-overlay.is-open .ai-dialog {
    transform: translateY(0);
  }

  .ai-dialog::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 2px;
    background: #3A3A36;
  }

  /* Bottom sheet dismisses via the drag handle / swipe / tapping the
     overlay — no cross icon needed. */
  .ai-dialog-close {
    display: none;
  }

  /* Two-column layout stacks — image leads, text follows, both full-width. */
  .ai-dialog-layout {
    flex-direction: column;
    gap: 20px;
  }

  .ai-dialog-media {
    order: -1;
    width: 100%;
    flex: 0 0 auto;
    margin-top: 0;
  }

  /* The inline CTA (inside the scrollable text column) is replaced by a
     fixed footer bar outside the scroll area, always reachable regardless
     of how far the content above has scrolled. */
  .ai-dialog-cta--inline {
    display: none;
  }

  .ai-dialog-footer {
    display: flex;
    padding: 14px 20px;
    border-top: 1px solid #2A2A26;
    background: #141412;
  }

  .ai-dialog-cta--fixed {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    border-radius: 8px;
  }
}