/* Phase 1: dashboard + dashboard2 (order preserved). */
/* === migrated: dashboard.css === */
/* ---------- DASHBOARD THEME (namespaced) ---------- */
:root {
  --dash-bg: #0b0f16;
  --dash-panel: rgba(255, 255, 255, 0.06);
  --dash-panel-2: rgba(255, 255, 255, 0.03);
  --dash-text: #e7eef7;
  --dash-muted: #9eb1cc;

  --dash-accent-1: #0ea5e9; /* bright blue */
  --dash-accent-2: #22d3ee; /* cyan glow */
  --dash-accent-3: #60a5fa; /* soft blue */
  --dash-accent-green: #22c55e; /* optional secondary */

  --dash-radius: 16px;
  --dash-glow: 0 10px 40px rgba(0, 0, 0, 0.35);

  --wmz-dock-panel-height: 68px;
  --wmz-dock-base-size: 50px;
  --wmz-dock-max-size: 70px;
  --wmz-dock-distance: 200px;
  --wmz-dock-bg: #060010;
  --wmz-dock-border: #222;

  /* Multi-circle progress ring colors */
  --p-c-track-color: rgba(30, 64, 175, 0.4);
  --ring-1: #22c55e; /* green - innermost (Idea) */
  --ring-2: #1976d2; /* dark rich blue (Brand) */
  --ring-3: #2196f3; /* vibrant electric blue (Launch) */
  --ring-4: #00d9ff; /* light neon blue (Growth) */
  --ring-5: #ff8c69; /* sunset peach - outermost (Automate) */
}

/* ---------- CONTAINER + STAGE ---------- */
.wm-dashboard {
  position: absolute;
  inset: 0;
  padding: 16px 16px var(--dash-input-pad, 140px) 16px; /* leaves room for .ai-input-wrapper */
  display: flex;
  flex-direction: column;
  color: var(--dash-text);
  pointer-events: auto;
  z-index: 20; /* chat input sits above */
  overflow: visible;
  min-height: 0; /* Allow flex child to shrink below content size */
}

.wm-dashboard.wm-dashboard-ghost {
  pointer-events: none;
}

.wm-dashboard.wm-dashboard-ghost .wmz-dock-outer,
.wm-dashboard.wm-dashboard-ghost .wmz-dock-panel,
.wm-dashboard.wm-dashboard-ghost .wmz-dock-panel * {
  pointer-events: auto;
}

.wm-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0; /* Allow grid to shrink in flex container */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(
    6,
    minmax(0, 1fr)
  ); /* Use 0 minimum to allow shrinking */
  gap: 16px;
  perspective: 1100px;
  max-width: 1600px;
  margin: 0 auto;
  overflow: visible;
}

.wm-stage.wm-stage-hidden {
  visibility: hidden;
  pointer-events: none;
}

/* ---------- CENTER HUB ---------- */
.wm-hub {
  grid-column: 5 / span 4;
  grid-row: 3 / span 2;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 3; /* above the tiles */
  pointer-events: none;
}
.wm-circle-wrapper {
  position: relative;
  z-index: 19;
  overflow: visible;
  /* Flex (not grid): extra in-flow siblings used to create implicit grid rows and squash .wm-circle */
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(100px, 12.5vw, 160px); /* 2/3 of original size */
  height: clamp(100px, 12.5vw, 160px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  box-shadow:
    0 0 34px rgba(59, 130, 246, 1),
    0 0 46px rgba(37, 68, 155, 1),
    0 0 58px rgba(15, 23, 42, 1);
  transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Square box that only sizes the orb; tooltips/chips are position:absolute inside this */
.wm-hub-orb-content {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  max-width: 100%;
  max-height: 100%;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
  overflow: visible; /* mini-orbs orbit outside the square; match wm-circle pivot */
}

.wm-circle-wrapper.wm-circle-wrapper--hover {
  box-shadow:
    0 0 24px rgba(96, 165, 250, 0.95),
    0 0 32px rgba(59, 130, 246, 0.8),
    0 0 42px rgba(37, 99, 235, 0.65);
}
.wm-circle {
  position: relative;
  z-index: 20;
  /* Percentages are relative to .wm-hub-orb-content (square), not mixed grid rows */
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  margin: -3px;
  aspect-ratio: 1; /* Maintain circle shape */
  border-radius: 50%;
  pointer-events: auto; /* Re-enable pointer events so hover works */
  cursor: pointer;
  background:
    radial-gradient(
      circle at center,
      rgb(6 14 33) 0%,
      rgb(37 68 155 / 85%) 30%,
      rgba(15, 23, 42, 0.95) 60% 60%,
      rgba(11, 15, 22, 1) 100%
    ),
    linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(11, 15, 22, 1));
  background-color: rgba(11, 15, 22, 1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 60px rgba(34, 211, 238, 0.15),
    0 0 120px rgba(96, 165, 250, 0.1);
  overflow: hidden;
  /* 0% matches 100% so hover doesn't flash when animation restarts */
  --wm-circle-shadow-0-1: #ffffff80;
  --wm-circle-shadow-0-2: #0d0fb980;
  --wm-circle-shadow-0-3: #2563eb80;
  --wm-circle-shadow-50-1: #ffffff80;
  --wm-circle-shadow-50-2: #3b82f680;
  --wm-circle-shadow-50-3: #1d4ed880;
  --wm-circle-shadow-100-1: #ffffff80;
  --wm-circle-shadow-100-2: #0d0fb980;
  --wm-circle-shadow-100-3: #2563eb80;
  animation: wm-circle-rotate 5s linear infinite; /* Always set to infinite */
  animation-fill-mode: forwards; /* Keep final state */
  animation-play-state: paused; /* Start paused */
  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition when hover ends */
}

.venture-ring {
  /* Same box as .wm-hub-orb-content so the hub center === wm-circle center (pivot via --wmz-ring-pivot-* from JS). */
  --wmz-ring-pivot-x: 50%;
  --wmz-ring-pivot-y: 50%;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  transform: scale(0.4);
  transform-origin: center center;
  opacity: 0;
  visibility: hidden;
  display: block;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(12, 20, 40, 0.38) 0%,
    rgba(12, 20, 40, 0.24) 55%,
    transparent 75%
  );
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    visibility 0.3s ease;
  z-index: 32;
}

.venture-ring.active {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.venture-ring.active .mini-orb {
  filter: drop-shadow(0 24px 40px rgba(10, 16, 34, 0.7));
}

.venture-ring.active .mini-orb.is-selected {
  filter: blur(0.5px);
  box-shadow:
    0 10px 25px -4px rgba(0, 0, 0, 0.4),
    inset 0 -8px 25px -1px rgba(255, 255, 255, 0.9),
    0 -10px 15px -1px rgba(255, 255, 255, 0.6),
    inset 0 8px 20px 0 rgba(0, 0, 0, 0.2),
    inset 0 0 5px 1px rgba(255, 255, 255, 0.6);
}

.venture-ring.active .mini-orb::before {
  animation-play-state: running;
}

.venture-ring .mini-orb {
  --mini-orb-size: clamp(54px, 6vw, 72px);
  width: var(--mini-orb-size);
  height: var(--mini-orb-size);
  border-radius: 50%;
  background: #151515;
  display: grid;
  place-items: center;
  cursor: pointer;
  outline: none;
  position: absolute;
  left: var(--wmz-ring-pivot-x);
  top: var(--wmz-ring-pivot-y);
  overflow: visible;
  transition:
    box-shadow 220ms cubic-bezier(0.23, 1, 0.32, 1),
    filter 220ms ease;
  will-change: transform;
  box-shadow:
    0 15px 25px -4px rgba(255, 255, 255, 0.5),
    inset 0 -3px 4px -1px rgba(255, 255, 255, 0.2),
    0 -10px 15px -1px rgba(0, 0, 0, 0.6),
    inset 0 3px 4px -1px rgba(0, 0, 0, 0.2),
    inset 0 0 5px 1px rgba(0, 0, 0, 0.8),
    inset 0 20px 30px 0 rgba(0, 0, 0, 0.2);
  pointer-events: auto;
  touch-action: manipulation;
}

/* Glow Halo Background */
.venture-ring .mini-orb::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  height: calc(var(--mini-orb-size) * 1.046);
  width: calc(var(--mini-orb-size) * 1.046);
  margin-left: calc(var(--mini-orb-size) * -0.523);
  margin-top: calc(var(--mini-orb-size) * -0.523);
  background: #000;
  opacity: 0.2;
  border-radius: 50%;
  box-shadow: 0;
  pointer-events: none;
  z-index: -1;
  transition: opacity 300ms ease;
}

.venture-ring .mini-orb::after {
  display: none;
}

/* Transform / scale come from JS (polar layout + dock-style magnet). */

.venture-ring .mini-orb:hover::before,
.venture-ring .mini-orb:focus-visible::before {
  opacity: 0.3;
}

.venture-ring .mini-orb.is-selected::before {
  opacity: 0.5;
  box-shadow:
    0 0 30px rgba(96, 165, 250, 0.8),
    0 0 50px rgba(96, 165, 250, 0.5);
}

.venture-ring .mini-orb__label,
.venture-ring .mini-orb__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: var(--mini-orb-size);
  text-align: center;
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 28px);
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
  transition:
    color 300ms ease-out,
    font-size 200ms ease-out,
    opacity 200ms ease;
  pointer-events: none;
  z-index: 2;
}

.venture-ring .mini-orb__icon {
  font-size: clamp(0.9rem, 1.2vw, 1.1rem);
  line-height: var(--mini-orb-size);
}

.venture-ring .mini-orb__initials {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: 78%;
  max-height: 78%;
  letter-spacing: 0.02em;
  user-select: none;
}

.venture-ring .mini-orb__initials.mini-orb__initials--hidden {
  display: none;
}

.venture-ring .mini-orb__thumb {
  grid-area: 1 / 1;
  width: 78%;
  height: 78%;
  max-width: 78%;
  max-height: 78%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 240ms ease;
}

.venture-ring .mini-orb__thumb[hidden] {
  display: none !important;
}

.venture-ring .mini-orb__thumb:not([hidden]) {
  display: block;
  opacity: 1;
}

.venture-ring.venture-ring--dense
  .mini-orb:not(.new-venture-btn)
  .mini-orb__initials {
  font-size: clamp(14px, 1.6vw, 22px);
}

.venture-ring .mini-orb.new-venture-btn .mini-orb__icon {
  font-size: clamp(14px, 1vw, 12px);
  line-height: calc(var(--mini-orb-size) * 0.75);
  color: rgba(255, 255, 255, 0.9);
  opacity: 0.9;
}

.venture-ring .mini-orb:active .mini-orb__label,
.venture-ring .mini-orb:active .mini-orb__icon {
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  color: rgba(255, 255, 255, 0.45);
}

.venture-ring .mini-orb.is-selected .mini-orb__label,
.venture-ring .mini-orb.is-selected .mini-orb__icon {
  color: rgba(255, 255, 255, 0.8);
}

.venture-ring .mini-orb.new-venture-btn.is-selected .mini-orb__icon {
  font-size: clamp(14px, 1vw, 12px);
}

.venture-ring .mini-orb.new-venture-btn {
  background: #151515;
  width: calc(var(--mini-orb-size) * 0.75);
  height: calc(var(--mini-orb-size) * 0.75);
  box-shadow:
    0 15px 25px -4px rgba(255, 255, 255, 0.5),
    inset 0 -3px 4px -1px rgba(255, 255, 255, 0.2),
    0 -10px 15px -1px rgba(0, 0, 0, 0.6),
    inset 0 3px 4px -1px rgba(0, 0, 0, 0.2),
    inset 0 0 5px 1px rgba(0, 0, 0, 0.8),
    inset 0 20px 30px 0 rgba(0, 0, 0, 0.2);
}

.venture-ring .mini-orb.new-venture-btn::before {
  height: calc(var(--mini-orb-size) * 0.75 * 1.046);
  width: calc(var(--mini-orb-size) * 0.75 * 1.046);
  margin-left: calc(var(--mini-orb-size) * 0.75 * -0.523);
  margin-top: calc(var(--mini-orb-size) * 0.75 * -0.523);
}

.venture-ring .mini-orb.new-venture-btn::after {
  display: none;
}

/* NEW orb: centered on pivot, lifted above wm-circle (JS translate); venture mini-orbs get polar transform + intro/magnet */

.venture-ring .mini-orb.new-venture-btn:active {
  filter: blur(0.5px);
  box-shadow:
    0 12px 25px -4px rgba(255, 255, 255, 0.4),
    inset 0 -8px 30px 1px rgba(0, 0, 0, 0.9),
    0 -10px 15px -1px rgba(0, 0, 0, 0.6),
    inset 0 8px 25px 0 rgba(255, 255, 255, 0.4),
    inset 0 0 10px 1px rgba(0, 0, 0, 0.6);
}

.venture-ring .mini-orb.new-venture-btn:active .mini-orb__icon {
  font-size: clamp(14px, 1vw, 12px);
  color: rgba(255, 255, 255, 0.45);
}

/* ---------- Orb status: global-tooltip centered on hub / orb (OrbState) ---------- */
/* Inherit look from .global-tooltip (chat-box.css); override position:fixed → center on .wm-hub-orb-content */
.wm-hub-orb-content > #wm-orb-status.global-tooltip.wm-orb-status-tooltip {
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 50;
  width: max-content;
  max-width: min(236px, 78vw);
  min-width: 0;
  transform-origin: center center;
  text-align: center;
  line-height: 1.35;
  /* Same duration on opacity + transform so transitionend (orb-state-manager) does not fire early */
  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

/* No .visible: fully hidden “far” pose */
.wm-hub-orb-content
  > #wm-orb-status.global-tooltip.wm-orb-status-tooltip:not(.visible) {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(-50%, calc(-50% + 8px), 0) scale(0.86) !important;
  pointer-events: none !important;
}

/* .visible but not yet revealed: beat chat-box .global-tooltip.visible { opacity: 1 } */
.wm-hub-orb-content
  > #wm-orb-status.global-tooltip.wm-orb-status-tooltip.visible:not(
    .wm-orb-status--gate-ready
  ) {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(-50%, -50%, 0) scale(0.86) !important;
  pointer-events: none !important;
}

body.wmz-dashboard-hub-pending
  .wm-hub-orb-content
  > #wm-orb-status.global-tooltip.wm-orb-status-tooltip.visible {
  transition: none;
}

.wm-hub-orb-content
  > #wm-orb-status.global-tooltip.wm-orb-status-tooltip.visible.wm-orb-status--gate-ready {
  opacity: 1 !important;
  visibility: visible;
  transform: translate3d(-50%, -50%, 0) scale(1) !important;
  /* Clicks pass through to .wm-circle; buttons opt in with pointer-events: auto */
  pointer-events: none;
}

.wm-hub-orb-content
  > #wm-orb-status.global-tooltip.wm-orb-status-tooltip.visible.wm-orb-status--gate-ready.wm-orb-status--hover {
  transform: translate3d(-50%, calc(-50% - 2px), 0) scale(1) !important;
}

/* Contract away while leaving */
.wm-hub-orb-content
  > #wm-orb-status.global-tooltip.wm-orb-status-tooltip.visible.wm-orb-status--gate-ready.wm-orb-status--exiting {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translate3d(-50%, -50%, 0) scale(0.86) !important;
  pointer-events: none !important;
}

/* Inner chrome lives in .global-tooltip; card does not capture orb clicks */
.wm-orb-status-tooltip .wm-orb-status__card {
  pointer-events: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-auto-rows: auto;
  row-gap: 4px;
  column-gap: 4px;
  align-items: center;
  text-align: center;
}

.wm-orb-status__spinner {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(148, 163, 184, 0.25);
  border-top-color: var(--dash-accent-2, #22d3ee);
  animation: wm-orb-spin 0.75s linear infinite;
  pointer-events: none;
  margin-right: 4px;
}

@keyframes wm-orb-spin {
  to {
    transform: rotate(360deg);
  }
}

.wm-orb-status__complete {
  grid-row: 1 / span 2;
  align-self: center;
  pointer-events: none;
}

.wm-orb-status__neon-check {
  transform: scale(0.42);
  transform-origin: center center;
  margin: -10px;
  margin-right: 4px;
  pointer-events: none;
}

.wm-orb-status-tooltip .wm-orb-status__title {
  grid-column: 2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: inherit;
  line-height: 1.25;
  pointer-events: none;
}

.wm-orb-status-tooltip .wm-orb-status__subtitle {
  grid-column: 2;
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  opacity: 0.88;
  max-width: 36ch;
  pointer-events: none;
}

/* Gradient text sweep — uses @keyframes shimmer from chat-box.css (loaded after this file). */
.wm-orb-status-tooltip .wm-orb-shimmer-text {
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.42) 45%,
    rgba(255, 255, 255, 0.9) 88%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

.wm-orb-status-tooltip .wm-orb-status__cta {
  grid-column: 1 / -1;
  margin-top: 6px;
  justify-self: center;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dash-text, #e7eef7);
  background: var(--dash-panel, rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 10px rgba(0, 0, 0, 0.22);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.wm-orb-status-tooltip .wm-orb-status__cta:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(34, 211, 238, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 0 0 1px rgba(34, 211, 238, 0.12),
    0 4px 14px rgba(0, 0, 0, 0.28);
}

.wm-orb-status-tooltip .wm-orb-status__cta:active {
  transform: scale(0.98);
}

/* Resume pill: inside tooltip card (same surface as CTA), not below the orb */
.wm-orb-status-tooltip .wm-orb-resume-chip[hidden] {
  display: none !important;
}

.wm-orb-status-tooltip .wm-orb-resume-chip {
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 4px;
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 6px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(6, 10, 20, 0.88);
  color: var(--dash-text, #e7eef7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.wm-orb-status-tooltip .wm-orb-resume-chip:hover {
  border-color: rgba(125, 211, 252, 0.45);
  background: rgba(12, 18, 32, 0.95);
}

.wm-orb-status-tooltip .wm-orb-resume-chip:active {
  transform: scale(0.98);
}

.wm-orb-resume-chip__icon {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: contain;
}

.wm-circle.initial-animation-running {
  animation-play-state: running; /* Run initial animation */
  animation-iteration-count: 2; /* Run 2 times */
  transition: none; /* No transition during initial animation */
}

.wm-circle.initial-animation-complete {
  animation-play-state: paused; /* Pause at final state after initial animation */
  animation-iteration-count: infinite; /* Ready for infinite on hover */
}

.wm-circle:hover {
  animation-play-state: running; /* Resume animation on hover */
  animation-iteration-count: infinite; /* Infinite loop on hover */
  transition: none; /* Disable transition during animation */
}

.wm-circle:not(:hover).initial-animation-complete {
  transition:
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth transition when hover ends */
}

@keyframes wm-circle-rotate {
  0% {
    transform: rotate(90deg);
    box-shadow:
      0 10px 20px 0 var(--wm-circle-shadow-0-1, #ffffff80) inset,
      0 20px 30px 0 var(--wm-circle-shadow-0-2, #0d0fb980) inset,
      0 60px 60px 0 var(--wm-circle-shadow-0-3, #2563eb80) inset;
  }
  50% {
    transform: rotate(270deg);
    box-shadow:
      0 10px 20px 0 var(--wm-circle-shadow-50-1, #ffffff80) inset,
      0 20px 10px 0 var(--wm-circle-shadow-50-2, #3b82f680) inset,
      0 40px 60px 0 var(--wm-circle-shadow-50-3, #1d4ed880) inset;
  }
  100% {
    transform: rotate(450deg);
    box-shadow:
      0 10px 20px 0 var(--wm-circle-shadow-100-1, #ffffff80) inset,
      0 20px 30px 0 var(--wm-circle-shadow-100-2, #0d0fb980) inset,
      0 60px 60px 0 var(--wm-circle-shadow-100-3, #2563eb80) inset;
  }
}

.glass-icon.smart .magic-wand {
  transform-origin: 80% 80%;
}

.glass-icon.smart .sparkle {
  opacity: 1;
  transform: scale(1);
  fill: currentColor;
  transition: all 0.3s ease;
}

.wm-tile:hover .glass-icon.smart .sparkle {
  opacity: 0;
  transform: scale(0.8);
}

.wm-tile:hover .glass-icon.smart .magic-wand {
  animation: wandTap 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wm-tile:hover .glass-icon.smart .sparkle-top {
  animation: sparkleReappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.6s;
  fill: #00f0ff; /* neon blue */
}

.wm-tile:hover .glass-icon.smart .sparkle-middle {
  animation: sparkleReappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.8s;
  fill: #ff6a1a; /* sunset orange */
}

.wm-tile:hover .glass-icon.smart .sparkle-bottom {
  animation: sparkleReappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1s;
  fill: #ffd700; /* yellow */
}

.wm-circle::after {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    200px 200px at var(--mx, 50%) var(--my, 50%),
    rgba(59, 130, 246, 0.4),
    rgba(37, 99, 235, 0.2) 40%,
    transparent 70%
  );
  pointer-events: none;
  transition: opacity 0.15s ease;
  opacity: 0.8;
  mix-blend-mode: screen; /* brightens the dark blue when spotlight is active */
}

.wm-circle.idea,
.venture-ring .mini-orb.idea {
  /* 0% matches 100% for smooth hover - blue shades */
  --wm-circle-shadow-0-2: #60a5fa80;
  --wm-circle-shadow-0-3: #1d4ed880;
  --wm-circle-shadow-50-2: #3b82f680;
  --wm-circle-shadow-50-3: #1d4ed880;
  --wm-circle-shadow-100-2: #60a5fa80;
  --wm-circle-shadow-100-3: #1d4ed880;
}

.wm-circle.in_development,
.venture-ring .mini-orb.in_development {
  /* 0% matches 100% for smooth hover - blue shades */
  --wm-circle-shadow-0-2: #0d0fb980;
  --wm-circle-shadow-0-3: #2563eb80;
  --wm-circle-shadow-50-2: #2563eb80;
  --wm-circle-shadow-50-3: #0f172a80;
  --wm-circle-shadow-100-2: #0d0fb980;
  --wm-circle-shadow-100-3: #2563eb80;
}

.wm-circle.launched,
.venture-ring .mini-orb.launched {
  /* 0% matches 100% for smooth hover - blue shades */
  --wm-circle-shadow-0-2: #3b82f680;
  --wm-circle-shadow-0-3: #1d4ed880;
  --wm-circle-shadow-50-2: #60a5fa80;
  --wm-circle-shadow-50-3: #1e40af80;
  --wm-circle-shadow-100-2: #3b82f680;
  --wm-circle-shadow-100-3: #1d4ed880;
}

.wm-circle.on_hold,
.venture-ring .mini-orb.on_hold {
  /* 0% matches 100% for smooth hover */
  --wm-circle-shadow-0-2: #47556980;
  --wm-circle-shadow-0-3: #1e293b80;
  --wm-circle-shadow-50-2: #94a3b880;
  --wm-circle-shadow-50-3: #1f293780;
  --wm-circle-shadow-100-2: #47556980;
  --wm-circle-shadow-100-3: #1e293b80;
}

.wm-circle.archived,
.venture-ring .mini-orb.archived {
  /* 0% matches 100% for smooth hover */
  --wm-circle-shadow-0-2: #37415180;
  --wm-circle-shadow-0-3: #11182780;
  --wm-circle-shadow-50-2: #6b728080;
  --wm-circle-shadow-50-3: #11182780;
  --wm-circle-shadow-100-2: #37415180;
  --wm-circle-shadow-100-3: #11182780;
}

.venture-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 18.75vw, 240px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  color: var(--dash-text);
  pointer-events: none;
  z-index: 25;
}

.venture-name {
  font-size: clamp(1.2rem, 1.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: opacity 0.3s ease;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(226, 232, 240, 0.18);
}

.status-badge.idea {
  background: rgba(124, 58, 237, 0.16);
  border-color: rgba(139, 92, 246, 0.45);
}

.status-badge.in_development {
  background: rgba(37, 99, 235, 0.16);
  border-color: rgba(59, 130, 246, 0.45);
}

.status-badge.launched {
  background: rgba(245, 158, 11, 0.18);
  border-color: rgba(251, 191, 36, 0.45);
}

.status-badge.on_hold {
  background: rgba(100, 116, 139, 0.16);
  border-color: rgba(148, 163, 184, 0.4);
}

.status-badge.archived {
  background: rgba(75, 85, 99, 0.14);
  border-color: rgba(107, 114, 128, 0.35);
}

/* ---------- TILES CONTAINER (with cutout mask) ---------- */
.wm-tiles {
  position: absolute;
  inset: -8px; /* extend outside to allow tiles to scale/transform without clipping */
  padding: 8px; /* give tiles room to expand */
  z-index: 2; /* below hub */
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 16px;
  pointer-events: none; /* allow clicks through to hub */
}

.wm-tiles > * {
  pointer-events: auto; /* restore pointer events on tiles */
}

/* ---------- TILES (Bento-style) ---------- */
.wm-tile {
  z-index: 1;
  background: radial-gradient(circle 250px at 0% 0%, #173151e3, #0c0e10c4);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: var(--dash-radius);
  padding: clamp(4px, 0.525vw, 7px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.25s ease;
  cursor: pointer;
  min-height: 0;
  min-width: 0;
  /* Removed all mask and mask-image properties */
}
.wm-tile::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    300px 300px at var(--mx, 50%) var(--my, 50%),
    rgba(14, 165, 233, 0.35),
    rgba(96, 165, 250, 0.15) 40%,
    transparent 70%
  );
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.wm-tile:hover::before {
  opacity: 1;
}

/* Spotlight effect (full tile, not just border) */
.wm-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  /* blue spot that follows the cursor */
  background: radial-gradient(
    220px 220px at var(--mx, 50%) var(--my, 50%),
    rgba(33, 73, 137, 0.4),
    rgba(37, 99, 235, 0.2) 50%,
    rgba(59, 130, 246, 0) 70%
  );

  opacity: 0;
  transition:
    opacity 0.25s ease,
    filter 0.25s ease;
  filter: blur(0.5px); /* slight bloom */
  z-index: 0;
}

/* turn the spotlight on when hovered/focused */
.wm-tile:hover::after,
.wm-tile:focus-visible::after {
  opacity: 1;
}

.wm-tile:hover {
  border-color: rgba(
    255,
    255,
    255,
    0.15
  ); /* slightly more visible but still subtle */
  transform: translateY(-3px) scale(1.01);
}

.wm-tile:active {
  transform: translateY(-1px) scale(1.005);
}

.wm-tile > * {
  position: relative;
  z-index: 1;
}

/* ----- tile-inner gap halved ----- */
.tile-inner {
  background: radial-gradient(circle 250px at 0% 0%, #173151e3, #0c0e10c4);
  border-radius: calc(var(--dash-radius) - 6px);
  padding: clamp(7px, 0.8vw, 11px);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.6vw, 9px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0px 0px 25px 20px rgb(72 78 126 / 32%);
  box-sizing: border-box;
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}

.tile-inner > * {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  min-height: 0;
}

.tile-inner :is(p, h1, h2, h3, .text, .task-label) {
  overflow-wrap: break-word;
}

.tile-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  min-height: clamp(24px, 3vw, 32px);
  position: relative;
}

.tile-header .lab-divider-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  max-height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(148, 163, 184, 0.3),
    transparent
  );
  pointer-events: none;
}

.tile-header .label-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(4px, 0.5vw, 6px);
  font-size: clamp(0.5rem, 0.65vw, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--dash-muted);
  line-height: 1.2;
  text-align: center;
  margin-bottom: clamp(2px, 0.3vw, 4px);
  white-space: nowrap;
  z-index: 1;
  pointer-events: none;
}

#tile-description .tile-header {
  justify-content: center;
  width: 80%;
  text-align: center;
  flex-shrink: 0;
  margin-bottom: clamp(5px, 0.6vw, 9px);
}

#tile-description .tile-header h4.venture-name {
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  flex: 1 1 auto;
  margin: 0;
  opacity: 1;
}

/* Vertically center content in description tile */
#tile-description .tile-inner {
  justify-content: flex-start;
  gap: 0;
}

@media (max-width: 768px) {
  #tile-description .tile-header {
    margin: auto auto;
  }
  #tile-description .venture-description {
    display: none !important;
  }
}

#tile-description .venture-description {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: auto;
  margin-bottom: auto;
  min-height: 0;
}

.tile-header .glass-icon,
.smart-action-btn .glass-icon {
  --glass-size: clamp(32px, 3vw, 42px);
  --glass-radius: 14px;
  display: inline-grid;
  place-items: center;
  width: var(--glass-size);
  height: var(--glass-size);
  border-radius: var(--glass-radius);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.16),
      rgba(255, 255, 255, 0.04)
    ),
    radial-gradient(
      100% 120% at 50% 0%,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 70%
    );
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 0 0.5px rgba(255, 255, 255, 0.35),
    0 6px 18px rgba(0, 0, 0, 0.35);
  color: #cfe8ff;
  position: absolute;
  overflow: visible;
  transition:
    box-shadow 220ms ease,
    color 220ms ease,
    border-color 220ms ease;
  flex-shrink: 0;
}

.smart-action-btn .glass-icon {
  top: clamp(7px, 0.9vw, 10px);
  left: clamp(7px, 0.9vw, 10px);
  pointer-events: none;
  z-index: 1;
}

.tile-header .glass-icon::after,
.smart-action-btn .glass-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow:
    inset 0 0 0.5px rgba(255, 255, 255, 0.25),
    0 8px 20px rgba(0, 0, 0, 0.35);
  transform: translate(6px, -6px) scale(0.9);
  opacity: 0.5;
  transition:
    transform 220ms ease,
    opacity 220ms ease;
  z-index: -1;
}

.tile-header .glass-icon::before,
.smart-action-btn .glass-icon::before {
  content: "";
  position: absolute;
  inset: -30%;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  transition: opacity 220ms ease;
}

.tile-header .glass-icon svg,
.smart-action-btn .glass-icon svg {
  width: clamp(18px, 1.6vw, 24px);
  height: clamp(18px, 1.6vw, 24px);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
  transition:
    transform 220ms ease,
    color 220ms ease;
  pointer-events: none;
}

.tile-header .glass-icon img {
  width: clamp(18px, 1.6vw, 24px);
  height: clamp(18px, 1.6vw, 24px);
  filter: brightness(0) invert(1) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
  transition: transform 220ms ease;
  pointer-events: none;
}

.wm-tile:hover .tile-header .glass-icon,
.wm-tile:focus-within .tile-header .glass-icon,
.wm-tile:hover .smart-action-btn .glass-icon,
.wm-tile:focus-within .smart-action-btn .glass-icon {
  box-shadow:
    inset 0 0 0.5px rgba(255, 255, 255, 0.45),
    0 12px 30px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(0, 153, 255, 0.25);
  color: #e9f4ff;
  border-color: rgba(255, 255, 255, 0.32);
  z-index: 1;
}

.tile-header .glass-icon.smart svg {
  width: clamp(18px, 1.6vw, 24px);
  height: clamp(18px, 1.6vw, 24px);
}

/* Dashboard smart-action tiles only: wand chip scales with viewport like default glass SVGs */
.smart-action-btn .glass-icon.smart {
  --glass-size: clamp(32px, 3vw, 44px);
  --glass-radius: clamp(12px, 1.4vw, 16px);
}

.smart-action-btn .glass-icon.smart svg {
  width: clamp(18px, 1.6vw, 24px);
  height: clamp(18px, 1.6vw, 24px);
}

.wm-tile:hover .tile-header .glass-icon::after,
.wm-tile:focus-within .tile-header .glass-icon::after,
.wm-tile:hover .smart-action-btn .glass-icon::after,
.wm-tile:focus-within .smart-action-btn .glass-icon::after {
  opacity: 0.65;
  transform: translate(9px, -9px);
  z-index: -1;
}

#tile-tasks .tile-inner {
  overflow: hidden;
  position: relative;
  gap: 0;
}

#tile-tasks .tile-inner::-webkit-scrollbar {
  width: 6px;
}

#tile-tasks .tile-inner::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.35);
}

#tile-tasks .tile-inner::-webkit-scrollbar-track {
  background: transparent;
}

/* ===== Tile 3 Tools list (wm-t3-tools) ===== */
.wm-t3-tools {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 8px,
    black calc(100% - 8px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 8px,
    black calc(100% - 8px),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.wm-t3-tool-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.wm-t3-tool-row:hover {
  background: rgba(255, 255, 255, 0.06);
}

.wm-t3-tool-row:focus-visible {
  outline: 1px solid rgba(108, 172, 223, 0.8);
  outline-offset: 2px;
}

.wm-t3-tool-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.wm-t3-tool-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 0 7px rgb(120 170 255));
}

/* Built but not connected: 60–70% opacity + slight desaturation */
.wm-t3-tool-logo--faded {
  opacity: 0.65;
  filter: saturate(0.8);
}

/* Not built: fully grey monochrome */
.wm-t3-tool-logo--grey {
  opacity: 1;
  filter: saturate(0) brightness(0.75);
}

.wm-t3-tool-name {
  font-size: 0.8125rem;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wm-t3-tool-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
}

.wm-t3-tool-status-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wm-t3-tool-status-icon .wm-t3-status-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.wm-t3-tool-status--launch .wm-t3-status-img {
  opacity: 0.95;
}

.wm-t3-tool-status--connect .wm-t3-status-img {
  opacity: 0.9;
}

.wm-t3-tool-status--build .wm-t3-status-img {
  opacity: 0.6;
}

/* ===== Task Status Styles ===== */

/* Task item with content wrapper */
.task-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.task-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* Task metadata row */
.task-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Status indicator styles */
.task-status {
  font-size: 0.65rem;
  line-height: 1;
}

.task-status.status-not-started {
  color: var(--dash-muted);
}

.task-status.status-in-progress {
  color: #fbbf24;
  animation: pulse-glow 2s ease-in-out infinite;
}

.task-status.status-done {
  color: #22c55e;
}

.task-status.status-done-assumed {
  color: #38bdf8;
}

.task-status.status-skipped {
  color: var(--dash-muted);
  text-decoration: line-through;
}

/* Task item status classes */
.task-item.status-done .task-label,
.task-item.status-done-assumed .task-label {
  opacity: 0.6;
  text-decoration: line-through;
}

.task-item.status-in-progress {
  border-left: 2px solid #fbbf24;
  padding-left: 8px;
  margin-left: -2px;
}

/* Confidence badge */
.task-confidence {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 500;
}

/* Artifact link */
.task-artifact-link {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.task-artifact-link:hover {
  transform: scale(1.2);
}

/* Dependencies indicator */
.task-dependencies {
  color: var(--dash-muted);
  font-size: 0.6rem;
}

/* Pulse animation for in-progress */
@keyframes pulse-glow {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===== End Task Status Styles ===== */

.venture-description {
  padding: clamp(5px, 0.6vw, 7px);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: clamp(0.8rem, 1vw, 0.95rem);
  color: var(--dash-muted);
  box-sizing: border-box;
  line-height: 1.5;
  overflow-wrap: anywhere;
  overflow: hidden;
  overflow-y: auto;
  text-align: center;
  transition: opacity 0.3s ease;
}

@media (max-width: 600px) {
  .venture-description {
    display: none;
  }
}

.venture-description p {
  margin: 0;
}

.media-grid {
  gap: clamp(8px, 1vw, 12px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  overflow: visible;
  justify-content: center;
  align-items: stretch;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Vertically center media-grid in Media Lab tile */
#tile-media-lab .tile-inner {
  justify-content: flex-start;
  gap: 0;
}

#tile-media-lab .tile-header {
  flex-shrink: 0;
  margin-bottom: clamp(5px, 0.6vw, 9px);
}

#tile-media-lab .media-grid {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-bottom: auto;
  min-height: 0;
  position: relative;
  overflow: visible;
}

.media-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px dashed rgba(148, 163, 184, 0.3);
  flex: 1 1 0; /* allow grow and shrink based on available space */
  min-width: 0; /* remove hard floor so thumbs can shrink when the tile gets shorter */
  max-width: 96px; /* keep them from getting huge on very wide layouts */
  aspect-ratio: 1;
  height: auto;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

.media-thumb:hover {
  transform: scale(1.05);
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 0 20px rgba(77, 95, 255, 0.45),
    0 12px 24px rgba(0, 0, 0, 0.25);
  background: rgba(10, 13, 22, 0.9);
  z-index: 1;
}

.media-thumb.has-media {
  border-style: solid;
  border-color: rgba(148, 163, 184, 0.15);
  background: rgba(10, 13, 22, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 10px 20px rgba(15, 23, 42, 0.45);
}

.media-thumb.has-media:hover {
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow:
    0 0 24px rgba(77, 95, 255, 0.55),
    0 14px 28px rgba(0, 0, 0, 0.35);
}

.media-thumb.has-media img,
.media-thumb.has-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.media-thumb.has-media video {
  pointer-events: none;
}

.media-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 15, 22, 0.05),
    rgba(11, 15, 22, 0.3)
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-thumb.has-media::after {
  opacity: 1;
}

.media-thumb-type {
  position: absolute;
  bottom: 8px;
  padding: 2px 8px;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--dash-muted);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.media-thumb.placeholder {
  background: rgba(15, 23, 42, 0.65);
  border: 1px dashed rgba(148, 163, 184, 0.3);
  border-style: dashed;
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  max-width: 96px;
  aspect-ratio: 1;
  height: auto;
}

.media-thumb.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.08),
    rgba(14, 165, 233, 0.05)
  );
  border-radius: inherit;
  opacity: 0.6;
  z-index: 0;
}

.media-thumb.placeholder:hover {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.75);
}

/* Ensure placeholder styles don't apply when media is loaded */
.media-thumb.placeholder.has-media::after {
  content: "";
  background: linear-gradient(
    180deg,
    rgba(11, 15, 22, 0.05),
    rgba(11, 15, 22, 0.3)
  );
  opacity: 1;
  z-index: 0;
}

#media-lab-generate-button {
  height: fit-content;
  align-self: center;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

#media-lab-generate-button .generate-icon {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#media-lab-generate-button .generate-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#media-lab-generate-button .generate-text {
  display: inline;
}

.icon-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(90px, 30%, 120px);
  height: clamp(90px, 30%, 120px);
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.35);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}

.persona-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid rgba(148, 163, 184, 0.2);
  color: var(--dash-muted);
  font-size: 0.9rem;
  box-sizing: border-box;
  overflow: hidden;
}

.persona-card .avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.2);
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.smart-actions {
  gap: clamp(14px, 1.6vw, 24px);
  align-items: stretch;
}

.smart-action-body {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(0.25rem, 3cqw, 1rem) clamp(0.35rem, 2.2cqw, 1rem);
  text-align: center;
}

.smart-action-btn {
  /* Inline-size container: cqw tracks pill width as the dashboard grid shrinks (avoid size containment on auto-height) */
  container-type: inline-size;
  container-name: smart-action-btn;
  --smart-action-media-max-w: min(94%, clamp(2.45rem, 38cqw, 4.35rem));
  --smart-action-media-max-h: min(44%, 9.25rem);
  --smart-action-label-fs: clamp(0.68rem, calc(0.35rem + 4.2cqw), 1.06rem);
  position: relative;
  padding: clamp(0.45rem, 3.5cqw, 1.15rem) clamp(0.55rem, 2.8cqw, 1.35rem);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: none;
  color: var(--dash-text);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
  text-align: center;
  overflow: hidden;
  box-shadow:
    inset 0px -1px 1px rgba(255, 255, 255, 0.2),
    inset 0px -2px 2px rgba(255, 255, 255, 0.15),
    inset 0px -4px 4px rgba(255, 255, 255, 0.1),
    inset 0px 0px 8px rgba(255, 255, 255, 0.05),
    inset 0px -16px 16px rgba(255, 255, 255, 0.05),
    1px 1px 1px rgba(0, 0, 0, 0.02),
    2px 2px 2px rgba(0, 0, 0, 0.03),
    4px 4px 4px rgba(0, 0, 0, 0.05),
    8px 8px 8px rgba(0, 0, 0, 0.06),
    16px 16px 16px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.wm-tile:hover .smart-action-btn,
#tile-smart-actions-primary.wmz-smart-action-pulse-hover .smart-action-btn {
  box-shadow:
    inset 0px -4px 4px rgba(255, 255, 255, 0.3),
    inset 0px -8px 8px rgba(255, 255, 255, 0.25),
    inset 0px -16px 16px rgba(255, 255, 255, 0.2),
    inset 0px 0px 32px rgba(255, 255, 255, 0.15),
    inset 0px -48px 48px rgba(255, 255, 255, 0.12),
    4px 4px 4px rgba(0, 0, 0, 0.03),
    8px 8px 8px rgba(0, 0, 0, 0.04),
    16px 16px 16px rgba(0, 0, 0, 0.06),
    32px 32px 32px rgba(0, 0, 0, 0.08),
    64px 64px 64px rgba(0, 0, 0, 0.1);
}

.smart-action-icon {
  width: auto;
  height: auto;
  max-width: var(--smart-action-media-max-w);
  max-height: var(--smart-action-media-max-h);
  flex-shrink: 1;
  min-height: 0;
  display: block;
  object-fit: contain;
  box-sizing: border-box;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.6);
  padding: clamp(3px, 1.2cqw, 8px);
  box-shadow:
    inset 0 0 0.5px rgba(255, 255, 255, 0.25),
    0 6px 18px rgba(0, 0, 0, 0.35);
}

.smart-action-btn .task-label {
  white-space: normal;
  font-size: var(--smart-action-label-fs);
  line-height: 1.2;
  max-width: 100%;
}

.smart-action-body .task-label {
  flex: 0 0 auto;
}

#tile-smart-actions-primary .tile-inner {
  gap: clamp(6px, 0.7vw, 10px); /* halved */
}

#tile-smart-actions-secondary .tile-inner {
  align-items: stretch;
  text-align: center;
  gap: clamp(6px, 0.7vw, 10px); /* halved */
}

.glass-icon.smart .magic-wand {
  transform-origin: 80% 80%;
}

.glass-icon.smart .sparkle {
  opacity: 1;
  transform: scale(1);
  fill: currentColor;
  transition: all 0.3s ease;
}

.wm-tile:hover .glass-icon.smart .sparkle {
  opacity: 0;
  transform: scale(0.8);
}

.wm-tile:hover .glass-icon.smart .magic-wand {
  animation: wandTap 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wm-tile:hover .glass-icon.smart .sparkle-top {
  animation: sparkleReappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.6s;
  fill: #ffd700;
}

.wm-tile:hover .glass-icon.smart .sparkle-middle {
  animation: sparkleReappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.8s;
  fill: #ffd700;
}

.wm-tile:hover .glass-icon.smart .sparkle-bottom {
  animation: sparkleReappear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 1s;
  fill: #ffd700;
}

.icon-large {
  width: clamp(90px, 30%, 120px);
  height: clamp(90px, 30%, 120px);
  max-width: 100%;
  max-height: 160px;
}

.venture-description,
.persona-card {
  box-sizing: border-box;
}

#tile-quick-search .tile-inner {
  align-items: center;
  justify-content: center;
}

.dash-search-container {
  position: relative;
  width: min(320px, 100%);
}

.dash-search-bar {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(9, 13, 24, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 14px;
  padding: 10px 12px;
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dash-search-input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  color: var(--dash-text);
  font-size: 0.95rem;
  padding: 6px 0;
  outline: none;
}

.dash-search-input::placeholder {
  color: rgba(148, 163, 184, 0.7);
}

.dash-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(96, 165, 250, 0.32);
  color: #e8f2ff;
  margin-left: 12px;
  cursor: pointer;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
  pointer-events: auto;
}

.dash-search-icon:hover {
  background: rgba(59, 130, 246, 0.25);
  box-shadow: 0 6px 15px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.dash-search-bar:hover {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.32);
  border-color: rgba(148, 163, 184, 0.35);
}

.dash-search-bar:focus-within {
  box-shadow: 0 0 28px rgba(59, 130, 246, 0.45);
  border-color: rgba(148, 163, 184, 0.45);
}

.dash-search-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 220%;
  border-radius: 120px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.18),
    transparent 65%
  );
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
}

.dash-search-bar:hover + .dash-search-glow {
  transform: translate(-50%, -50%) scale(1);
  opacity: 0.8;
}

.dash-search-bar:focus-within + .dash-search-glow {
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 1;
  background: radial-gradient(
    circle,
    rgba(96, 165, 250, 0.32),
    transparent 75%
  );
}

/* ─── Quick Search Results Panel ─── */

.wm-quick-search-panel {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 100%;
  max-height: 340px;
  overflow-y: auto;
  background: rgba(9, 13, 24, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 14px;
  box-shadow:
    0 -8px 32px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.2) transparent;
}

/* Portaled to document.body — escapes .wm-tile / .tile-inner overflow:hidden */
.wm-quick-search-panel.wm-quick-search-panel--portal {
  position: fixed;
  z-index: 10050;
  left: 0;
  width: min(320px, 100vw);
  bottom: auto;
  top: auto;
  /* left, width, bottom, max-height tuned by quick-search.js from #quick-search rect */
}

.wm-qs-panel--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Cards */

.wm-qs-card {
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.wm-qs-card:hover,
.wm-qs-card--active {
  background: rgba(59, 130, 246, 0.1);
}

.wm-qs-card + .wm-qs-card {
  margin-top: 2px;
}

.wm-qs-card-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wm-qs-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.wm-qs-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  flex: 0 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.7);
  color: rgba(226, 232, 240, 0.86);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wm-qs-download-btn:hover,
.wm-qs-download-btn:focus-visible {
  background: rgba(30, 41, 59, 0.92);
  border-color: rgba(96, 165, 250, 0.5);
  color: #dbeafe;
  outline: none;
}

.wm-qs-download-btn svg {
  width: 12px;
  height: 12px;
}

.wm-qs-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
  background: rgba(148, 163, 184, 0.12);
  color: rgba(226, 232, 240, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.12);
}

.wm-qs-badge--conversation {
  color: #93c5fd;
  border-color: rgba(96, 165, 250, 0.25);
}
.wm-qs-badge--artifact,
.wm-qs-badge--task {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.25);
}
.wm-qs-badge--venture {
  color: #6ee7b7;
  border-color: rgba(110, 231, 183, 0.25);
}
.wm-qs-badge--tool,
.wm-qs-badge--agent {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
}
.wm-qs-badge--file {
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.25);
}
.wm-qs-badge--image {
  color: #f472b6;
  border-color: rgba(244, 114, 182, 0.25);
}
.wm-qs-badge--video {
  color: #fb923c;
  border-color: rgba(251, 146, 60, 0.25);
}

.wm-qs-title {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dash-text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.wm-qs-subtitle {
  font-size: 0.74rem;
  color: rgba(148, 163, 184, 0.7);
  margin-top: 2px;
  padding-left: 1px;
}

.wm-qs-preview {
  font-size: 0.76rem;
  color: rgba(148, 163, 184, 0.55);
  margin-top: 3px;
  padding-left: 1px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Empty / loading states */

.wm-qs-empty {
  text-align: center;
  padding: 18px 12px;
  font-size: 0.82rem;
  color: rgba(148, 163, 184, 0.5);
}

.wm-qs-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 12px;
}

.wm-qs-loading-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(96, 165, 250, 0.5);
  animation: wm-qs-pulse 1s ease-in-out infinite;
}

.wm-qs-loading-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.wm-qs-loading-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes wm-qs-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---------- WEBMOZ DOCK ---------- */
.wmz-dock-outer {
  margin: 0 8px;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  position: relative;
}

.wmz-dock-panel {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  width: fit-content;
  gap: 16px;
  border-radius: 16px;
  background-color: var(--wmz-dock-bg);
  border: 1px solid var(--wmz-dock-border);
  padding: 0 8px 8px;
  height: var(--wmz-dock-panel-height);
  transition: height 160ms ease;
  will-change: height;
  z-index: 40;
}

.wmz-dock-item {
  --size: var(--wmz-dock-base-size);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  border-radius: 10px;
  background-color: var(--wmz-dock-bg);
  border: 1px solid var(--wmz-dock-border);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  outline: none;
  transition:
    width 140ms ease,
    height 140ms ease,
    transform 160ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
  color: #fff;
  transform-origin: bottom center;
  transform: translateY(0) scale(1);
}

.wmz-dock-item:hover {
  border-color: rgba(162, 188, 255, 0.35);
  box-shadow:
    0 5px 12px rgb(96 165 250 / 37%),
    0 2px 7px rgb(14 165 233 / 24.5%);
}

.wmz-dock-item.wmz-active {
  border-color: rgba(162, 188, 255, 0.7);
  box-shadow:
    0 6px 18px rgb(96 165 250 / 74%),
    0 2px 10px rgb(14 165 233 / 49%);
  background-color: rgba(6, 0, 16, 0.9);
}

.wmz-dock-item:focus-visible {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.6);
}

.wmz-dock-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

body.wm-mode-dashboard #chat-container {
  background: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0px solid transparent;
}

body.wm-mode-dashboard .ai-messages-container,
body.wm-mode-dashboard .ai-new-chat-button {
  display: none !important;
}

/* Layout placement for tiles around the hub - Bento Box Style */
/* Hub is at columns 5-8, rows 2-4 - tiles extend to middle (column 7) without overlapping each other */
/* Top row */
.wm-t1 {
  grid-column: 1 / 5; /* Extends to middle, overlaps hub */
  grid-row: 1 / span 2;
}
.wm-t2 {
  grid-column: 5 / 9; /* Starts at middle, overlaps hub */
  grid-row: 1 / span 2;
  cursor: default;
}

.wm-t3 {
  grid-column: 9 / -1; /* Below wm-t2 */
  grid-row: 1 / span 2;
}

/* Middle row - cards around the hub */
.wm-t4 {
  grid-column: 1 / 6; /* Extends to middle */
  grid-row: 3 / span 2;
}
.wm-t5 {
  grid-column: 8 / -1; /* Starts at middle */
  grid-row: 3 / span 2;
}

/* Main action tiles (wm-t4, wm-t5) – much rounder corners */
.wm-t4,
.wm-t5 {
  border-radius: 100px;
}
.wm-t4 .tile-inner,
.wm-t5 .tile-inner {
  border-radius: 96px;
  padding: 0;
}
.wm-t4 .smart-action-btn,
.wm-t5 .smart-action-btn {
  border-radius: 96px;
  margin: -1px 0px;
}
.wm-t4 .smart-action-btn .glass-icon.smart,
.wm-t5 .smart-action-btn .glass-icon.smart {
  --glass-radius: clamp(14px, 2.2vw, 24px);
  margin: clamp(0.35rem, 1.2vw, 0.6rem) 0 0 clamp(0.65rem, 2.4vw, 1.5rem);
}
.wm-t4 .smart-action-icon,
.wm-t5 .smart-action-icon {
  border-radius: 24px;
}

.wm-t8 {
  grid-column: 1 / 6; /* Starts at middle */
  grid-row: 5 / span 2;
}
.wm-t10 {
  grid-column: 8 / -1;
  grid-row: 5 / span 2;
}

/* ---------- MOBILE DASHBOARD TILE LAYOUT (max-width: 768px) ---------- */
/* Override dashboard2.css .wm-tile { grid-column/grid-row !important } so our placement wins */
/*
@media (max-width: 768px) {
  .wm-tiles {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(11, minmax(0, 1fr));
  }

  .wm-t3,
  .wm-t8,
  .wm-t10 {
    display: none !important;
  }

  .wm-tiles .wm-t2 {
    grid-column: 1 / -1 !important;
    grid-row: 1 / span 2 !important;
  }

  .wm-tiles .wm-t1 {
    grid-column: 1 / -1 !important;
    grid-row: 3 / span 3 !important;
  }

  .wm-tiles .wm-t1 .tile-header {
    display: none !important;
  }

  .wm-tiles .wm-t4 {
    grid-column: 1 / span 3 !important;
    grid-row: 7 / span 4 !important;
  }
  .wm-tiles .wm-t5 {
    grid-column: 4 / span 3 !important;
    grid-row: 7 / span 4 !important;
  }

  .wm-t4,
  .wm-t5 {
    border-radius: 50px;
  }
  .wm-t4 .tile-inner,
  .wm-t5 .tile-inner {
    border-radius: 48px;
  }
  .wm-t4 .smart-action-btn,
  .wm-t5 .smart-action-btn {
    border-radius: 40px;
  }
  .wm-t4 .smart-action-btn .glass-icon,
  .wm-t5 .smart-action-btn .glass-icon {
    --glass-radius: 12px;
    margin: 0.3rem 0 0 0.75rem;
  }
  .wm-t4 .smart-action-icon,
  .wm-t5 .smart-action-icon {
    border-radius: 12px;
  }

  .wm-dashboard {
    margin-top: 2rem;
  }

  .progress-content {
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
  }
}
*/

/* Only shrink/center input on desktop; on mobile keep full width when toggling dashboard */
@media (min-width: 769px) {
  body.wm-mode-dashboard .ai-input-wrapper {
    width: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border: 1px solid #a2bcff !important;
  }
}

body.wm-mode-dashboard .ai-utility-bar {
  padding: 0 !important;
}

body.wm-mode-dashboard .ai-controls-row {
  overflow-x: auto;
}

/* === migrated: dashboard2.css === */
/* ---------- RESPONSIVE ---------- */
@media (max-width: 1400px) {
  .wm-stage {
    grid-template-rows: repeat(6, minmax(0, 1fr)); /* Allow shrinking */
    gap: clamp(8px, 1vw, 16px); /* Responsive gap */
  }
  .wm-tiles {
    gap: clamp(8px, 1vw, 16px); /* Match stage gap */
  }
  .wm-circle-wrapper {
    width: clamp(90px, 11vw, 140px); /* 2/3 of previous size */
    height: clamp(90px, 11vw, 140px);
  }
  .media-grid {
    gap: clamp(6px, 0.8vw, 10px);
  }
  .media-thumb {
    flex-basis: 80px; /* preferred size, still allowed to shrink */
    max-width: 88px;
  }
  .media-thumb.placeholder {
    flex-basis: 80px;
    max-width: 88px;
  }
}

@media (max-width: 1200px) {
  .wm-stage {
    gap: clamp(8px, 1.2vw, 14px);
  }
  .wm-tiles {
    gap: clamp(8px, 1.2vw, 14px); /* Match stage gap */
  }
  .wm-circle-wrapper {
    width: clamp(100px, 12.5vw, 160px); /* 2/3 of previous size */
    height: clamp(100px, 12.5vw, 160px);
  }
  .media-grid {
    gap: clamp(5px, 0.7vw, 8px);
  }
  .media-thumb {
    flex-basis: 68px;
    max-width: 76px;
  }
  .media-thumb.placeholder {
    flex-basis: 68px;
    max-width: 76px;
  }
}

@media (max-width: 980px) {
  .wm-stage {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(min-content, 1fr);
    gap: 12px;
  }
  .wm-tiles {
    /* Must stay 6 columns: .wm-t4/.wm-t5 use span 3 each (was overridden here pre-merge). */
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(11, minmax(0, 1fr));
    gap: 12px;
  }
  .wm-hub {
    grid-column: 2 / span 4;
    grid-row: 3 / span 2;
  }
  .wm-circle-wrapper {
    width: clamp(95px, 11.5vw, 145px);
    height: clamp(95px, 11.5vw, 145px);
  }

  .wm-t3,
  .wm-t8,
  .wm-t10 {
    display: none !important;
  }

  .wm-tiles .wm-t2 {
    grid-column: 1 / -1 !important;
    grid-row: 1 / span 2 !important;
  }

  .wm-tiles .wm-t1 {
    grid-column: 1 / -1 !important;
    grid-row: 3 / span 3 !important;
  }

  .wm-tiles .wm-t1 .tile-header {
    display: none !important;
  }

  .wm-tiles .wm-t4 {
    grid-column: 1 / span 3 !important;
    grid-row: 7 / span 4 !important;
  }
  .wm-tiles .wm-t5 {
    grid-column: 4 / span 3 !important;
    grid-row: 7 / span 4 !important;
  }

  .wm-t4,
  .wm-t5 {
    border-radius: 50px;
  }
  .wm-t4 .tile-inner,
  .wm-t5 .tile-inner {
    border-radius: 48px;
  }
  .wm-t4 .smart-action-btn,
  .wm-t5 .smart-action-btn {
    border-radius: 40px;
  }
  .wm-t4 .smart-action-btn .glass-icon.smart,
  .wm-t5 .smart-action-btn .glass-icon.smart {
    --glass-radius: clamp(10px, 2vw, 14px);
    margin: clamp(0.25rem, 1vw, 0.35rem) 0 0 clamp(0.45rem, 1.8vw, 0.85rem);
  }
  .wm-t4 .smart-action-icon,
  .wm-t5 .smart-action-icon {
    border-radius: 12px;
  }

  .wm-dashboard {
    margin-top: 2rem;
  }

  .progress-content {
    grid-template-columns: 1fr;
    gap: clamp(16px, 2vw, 24px);
  }
  .media-grid {
    gap: clamp(4px, 0.6vw, 6px);
  }
  .media-thumb {
    flex-basis: 60px;
    max-width: 68px;
  }
  .media-thumb.placeholder {
    flex-basis: 60px;
    max-width: 68px;
  }
}

/* ---------- HIDDEN STATES (toggle visibility) ---------- */
.wm-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.wm-gone {
  display: none;
}

.neon-checkbox {
  --primary: #00ffaa;
  --primary-dark: #00cc88;
  --primary-light: #88ffdd;
  --size: clamp(13px, 1.3vw, 16px);
  position: relative;
  width: var(--size);
  height: var(--size);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  margin-bottom: 0px;
}

.neon-checkbox input {
  display: none;
}

.neon-checkbox__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.neon-checkbox__box {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  border: 2px solid var(--primary-dark);
  transition: all 0.4s ease;
}

.neon-checkbox__check-container {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neon-checkbox__check {
  width: 80%;
  height: 80%;
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.neon-checkbox__glow {
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  background: var(--primary);
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.2);
  transition: all 0.4s ease;
}

.neon-checkbox__borders {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
}

.neon-checkbox__borders span {
  position: absolute;
  width: 40px;
  height: 1px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.neon-checkbox__borders span:nth-child(1) {
  top: 0;
  left: -100%;
  animation: borderFlow1 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow2 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(3) {
  bottom: 0;
  right: -100%;
  animation: borderFlow3 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow4 2s linear infinite;
}

.neon-checkbox__effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.neon-checkbox__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 6px var(--primary);
}

.neon-checkbox__rings {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}

.neon-checkbox__rings .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--primary);
  opacity: 0;
  transform: scale(0);
  transform-origin: center center; /* Explicitly center the transform origin */
}

.neon-checkbox__sparks span {
  position: absolute;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0;
}

.neon-checkbox:hover .neon-checkbox__box {
  border-color: var(--primary);
  transform: scale(1.05);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__box {
  border-color: var(--primary);
  background: rgba(0, 255, 170, 0.1);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__check {
  stroke-dashoffset: 0;
  transform: scale(1.1);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__glow {
  opacity: 0.2;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__borders
  span {
  opacity: 1;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__particles
  span {
  animation: particleExplosion 0.6s ease-out forwards;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__rings
  .ring {
  animation: ringPulse 0.6s ease-out forwards;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__sparks
  span {
  animation: sparkFlash 0.6s ease-out forwards;
}

.neon-checkbox__particles span:nth-child(1) {
  --x: 25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(2) {
  --x: -25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(3) {
  --x: 25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(4) {
  --x: -25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(5) {
  --x: 35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(6) {
  --x: -35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(7) {
  --x: 0px;
  --y: 35px;
}
.neon-checkbox__particles span:nth-child(8) {
  --x: 0px;
  --y: -35px;
}
.neon-checkbox__particles span:nth-child(9) {
  --x: 20px;
  --y: -30px;
}
.neon-checkbox__particles span:nth-child(10) {
  --x: -20px;
  --y: 30px;
}
.neon-checkbox__particles span:nth-child(11) {
  --x: 30px;
  --y: 20px;
}
.neon-checkbox__particles span:nth-child(12) {
  --x: -30px;
  --y: -20px;
}

.neon-checkbox__sparks span:nth-child(1) {
  --r: 0deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(2) {
  --r: 90deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(3) {
  --r: 180deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(4) {
  --r: 270deg;
  top: 50%;
  left: 50%;
}

.neon-checkbox__rings .ring:nth-child(1) {
  animation-delay: 0s;
}
.neon-checkbox__rings .ring:nth-child(2) {
  animation-delay: 0.1s;
}
.neon-checkbox__rings .ring:nth-child(3) {
  animation-delay: 0.2s;
}

@keyframes borderFlow1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes borderFlow2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(200%);
  }
}

@keyframes borderFlow3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

@keyframes borderFlow4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200%);
  }
}

@keyframes particleExplosion {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--x, 20px)),
        calc(-50% + var(--y, 20px))
      )
      scale(0);
    opacity: 0;
  }
}

@keyframes ringPulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes sparkFlash {
  0% {
    transform: rotate(var(--r, 0deg)) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--r, 0deg)) translateX(30px) scale(0);
    opacity: 0;
  }
}

.media-lab-header {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  pointer-events: auto;
}

.media-lab-header .label-title {
  flex: 1 1 auto;
  margin: 0;
}

.media-lab-header #media-lab-generate-button {
  height: fit-content;
  align-self: center;
  margin-left: auto;
  pointer-events: auto;
}

/* Responsive: Switch to icon-only when dashboard container is narrow */
.wm-dashboard-narrow .media-lab-header {
  gap: clamp(4px, 1vw, 8px);
}

.wm-dashboard-narrow .media-lab-header #media-lab-generate-button {
  padding: 0.5rem;
  min-width: 37px;
  width: 37px;
}

.wm-dashboard-narrow
  .media-lab-header
  #media-lab-generate-button
  .generate-icon {
  display: block;
  transform: translate(1px, -2px);
}

.wm-dashboard-narrow
  .media-lab-header
  #media-lab-generate-button
  .generate-text {
  display: none;
}

/* ---------- MULTI-CIRCLE PROGRESS (Progress Tile) ---------- */

#tile-progress .tile-inner {
  padding: clamp(8px, 1vw, 14px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 0.8vw, 10px);
  overflow: visible;
}

.progress-content {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1vw, 14px);
  min-height: 0;
  min-width: 0;
  overflow: visible;
  align-items: stretch;
}

.progress-content > * {
  min-width: 0;
  min-height: 0;
}

.progress-pillars {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.6vw, 8px);
  justify-content: flex-start;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: clamp(4px, 0.5vw, 6px);
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 8px,
    black calc(100% - 8px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0px,
    black 8px,
    black calc(100% - 8px),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.progress-pillars::-webkit-scrollbar {
  width: 4px;
}

.progress-pillars::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.3);
}

.progress-pillars::-webkit-scrollbar-track {
  background: transparent;
}

.pillar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(3px, 0.5vw, 6px) 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  flex-shrink: 0;
  min-height: clamp(20px, 2.5vw, 28px);
  transition: opacity 0.3s ease;
}

.pillar-item:last-child {
  border-bottom: none;
}

.pillar-name {
  font-size: clamp(0.65rem, 0.8vw, 0.85rem);
  font-weight: 500;
  color: var(--dash-text);
  letter-spacing: 0.02em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pillar-name-text {
  display: inline;
}

.pillar-icon {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--dash-text);
  opacity: 0.9;
}

.pillar-percent {
  font-size: clamp(0.75rem, 0.95vw, 1rem);
  font-weight: 700;
  color: var(--dash-text);
  letter-spacing: 0.01em;
  opacity: 0.9;
  line-height: 1.2;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}

.multi-circle-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: visible;
}

.multi-circle-progress__svg {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  height: auto;
  overflow: visible !important;
  aspect-ratio: 1;
}

/* Base track for each ring */
.ring {
  transform-origin: 120px 120px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ring__hit-area {
  pointer-events: all;
  cursor: pointer;
}

.ring__track {
  fill: none;
  stroke: var(--p-c-track-color);
  stroke-width: 10;
  pointer-events: none;
  transition: stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress arcs */
.ring__value {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 0 999;
  stroke-dashoffset: 0;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition:
    stroke-dashoffset 0.9s ease-out,
    stroke-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
  pointer-events: none;
}

/* Ring colors + glow */
.ring-1 .ring__value {
  stroke: var(--ring-1);
  filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.9));
}

.ring-2 .ring__value {
  stroke: var(--ring-2);
  filter: drop-shadow(0 0 10px rgba(25, 118, 210, 0.9));
}

.ring-3 .ring__value {
  stroke: var(--ring-3);
  filter: drop-shadow(0 0 10px rgba(33, 150, 243, 0.9));
}

.ring-4 .ring__value {
  stroke: var(--ring-4);
  filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.9));
}

.ring-5 .ring__value {
  stroke: var(--ring-5);
  filter: drop-shadow(0 0 10px rgba(255, 140, 105, 0.9));
}

/* Label elements - separate positioning */
#tile-progress .label-title {
  font-size: clamp(0.5rem, 0.65vw, 0.7rem);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--dash-muted);
  line-height: 1.2;
  flex-shrink: 0;
  text-align: center;
  margin-bottom: clamp(2px, 0.3vw, 4px);
}

.label-value {
  font-size: 20px; /* SVG text size - scales with viewBox (240x240) */
  font-weight: 600;
  fill: var(--dash-text);
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.85));
  pointer-events: none;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    sans-serif;
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ---------- MEDIA LAB GENERATE BUTTON (Responsive) ---------- */

#media-lab-generate-button {
  height: fit-content;
  align-self: center;
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

#media-lab-generate-button .generate-icon {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#media-lab-generate-button .generate-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#media-lab-generate-button .generate-text {
  display: inline;
}

.media-lab-header {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  pointer-events: auto;
}

.media-lab-header .label-title {
  flex: 1 1 auto;
  margin: 0;
}

.media-lab-header #media-lab-generate-button {
  height: fit-content;
  align-self: center;
  margin-left: auto;
  pointer-events: auto;
}

/* Responsive: Switch to icon-only when dashboard container is narrow */
.wm-dashboard-narrow .media-lab-header {
  gap: clamp(4px, 1vw, 8px);
}

.wm-dashboard-narrow .media-lab-header #media-lab-generate-button {
  padding: 0.5rem;
  min-width: 37px;
  width: 37px;
}

.wm-dashboard-narrow
  .media-lab-header
  #media-lab-generate-button
  .generate-icon {
  display: block;
}

.wm-dashboard-narrow
  .media-lab-header
  #media-lab-generate-button
  .generate-text {
  display: none;
}

/* Backup: Also switch to icon-only when sidebar is expanded */
#chat-container.sidebar-expanded .media-lab-header {
  gap: clamp(4px, 1vw, 8px);
}

#chat-container.sidebar-expanded .media-lab-header #media-lab-generate-button {
  padding: 0.5rem;
  min-width: 37px;
  width: 37px;
}

#chat-container.sidebar-expanded
  .media-lab-header
  #media-lab-generate-button
  .generate-icon {
  display: block;
}

#chat-container.sidebar-expanded
  .media-lab-header
  #media-lab-generate-button
  .generate-text {
  display: none;
}

/* Pillar icons: Show icons and hide text when sidebar is expanded */
#chat-container.sidebar-expanded .pillar-name-text {
  display: none;
}

#chat-container.sidebar-expanded .pillar-icon {
  display: block;
}

/* ========== EMPTY STATE STYLES ========== */

/* Tile content wrappers (for wm-t2 description tile) */
.tile-content {
  display: flex;
  position: relative;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.tile-content--normal {
  display: flex;
  align-items: center;
}

.tile-content--empty {
  display: none;
}

/* Toggle content visibility in empty state (for wm-t2) */
.wm-dashboard-empty-state .tile-content--normal {
  display: none !important;
}

.wm-dashboard-empty-state .tile-content--empty {
  display: flex !important;
}

/* Smart action body content variants (for wm-t4 and wm-t5) */
.smart-action-body--normal {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  gap: clamp(0.1rem, 2.2cqw, 0.55rem);
}

.smart-action-body--empty {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  /* Gap tracks pill width (cqw) so it shrinks with the grid */
  gap: clamp(0.1rem, 2.2cqw, 0.55rem);
}

/* Toggle smart action body content in empty state */
.wm-dashboard-empty-state .smart-action-body--normal {
  display: none !important;
}

.wm-dashboard-empty-state .smart-action-body--empty {
  display: flex !important;
}

/* Empty state text styling within smart action buttons */
.smart-action-body--empty .empty-state-illustration {
  width: auto;
  max-width: var(--smart-action-media-max-w);
  /* % of column height: shrinks when the pill is short even if width is unchanged */
  max-height: var(--smart-action-media-max-h);
  height: auto;
  flex-shrink: 1;
  min-height: 0;
  display: block;
  object-fit: contain;
}

.smart-action-body--empty .empty-state-title {
  font-size: var(--smart-action-label-fs);
  font-weight: 600;
  color: var(--dash-text);
  line-height: 1.2;
  max-width: 100%;
  flex-shrink: 0;
}

/* Feature line divider in empty state (wm-t2) */
.empty-state-content .feature-line-divider {
  width: 80%;
  min-height: 2px;
  height: 2px;
  flex-shrink: 0;
  border-radius: 1px;
  margin: 0.5rem 0;
}

/* Lab divider line in empty state smart action buttons */
.smart-action-body--empty .lab-divider-line {
  width: min(50%, clamp(2rem, 22cqw, 5rem));
  max-width: 100%;
  min-height: 1px;
  height: 1px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(191 187 244 / 30%),
    rgb(220 219 255 / 50%),
    rgb(219 216 255 / 30%),
    transparent
  );
  margin: 0;
}

/* Blurred tiles in empty state */
.wm-tile.wm-tile-hidden {
  filter: blur(6px) saturate(0.5);
  pointer-events: none;
  user-select: none;
  transition:
    filter 0.4s ease,
    opacity 0.4s ease;
}

.wm-tile.wm-tile-hidden::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 22, 0.4);
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
}

/* Disable all hover effects and interactions on blurred tiles */
.wm-tile.wm-tile-hidden * {
  pointer-events: none !important;
}

.wm-tile.wm-tile-hidden .ring__hit-area,
.wm-tile.wm-tile-hidden .multi-circle-progress__svg,
.wm-tile.wm-tile-hidden .ring {
  cursor: default !important;
}

/* Empty state tiles - interactive styling */
.wm-dashboard-empty-state .wm-tile.wm-tile-empty-state {
  cursor: pointer;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* wm-t2 (venture description) only: edge fade in empty state */
.wm-dashboard-empty-state .wm-tile.wm-t2.wm-tile-empty-state {
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
  mask-image:
    linear-gradient(
      to right,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    ),
    linear-gradient(
      to bottom,
      transparent 0%,
      black 12%,
      black 88%,
      transparent 100%
    );
  -webkit-mask-size:
    100% 100%,
    100% 100%;
  mask-size:
    100% 100%,
    100% 100%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  border-radius: var(--dash-radius);
}

.wm-dashboard-empty-state .wm-tile.wm-tile-empty-state:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 12px 40px rgba(14, 165, 233, 0.2),
    0 0 0 1px rgba(14, 165, 233, 0.3);
}

/* Pulsing glow animation for empty state smart action buttons */
@keyframes emptyStatePulse {
  0%,
  100% {
    box-shadow:
      inset 0px -2px 2px rgba(255, 255, 255, 0.15),
      inset 0px -4px 4px rgba(255, 255, 255, 0.1),
      inset 0px -8px 8px rgba(255, 255, 255, 0.05),
      inset 0px 0px 8px rgba(255, 255, 255, 0.03),
      inset 0px -16px 16px rgba(255, 255, 255, 0.03),
      0 0 8px rgba(14, 165, 233, 0.1),
      0 0 0 1px rgba(14, 165, 233, 0.08);
  }
  50% {
    box-shadow:
      inset 0px -4px 6px rgba(255, 255, 255, 0.4),
      inset 0px -8px 12px rgba(255, 255, 255, 0.35),
      inset 0px -16px 20px rgba(255, 255, 255, 0.25),
      inset 0px 0px 24px rgba(255, 255, 255, 0.2),
      inset 0px -32px 40px rgba(255, 255, 255, 0.15),
      0 0 32px rgba(14, 165, 233, 0.45),
      0 0 0 1px rgba(14, 165, 233, 0.35);
  }
}

/* Apply pulsing animation to smart action buttons in empty state */
.wm-dashboard-empty-state .wm-t4 .smart-action-btn {
  animation: emptyStatePulse 3s ease-in-out infinite;
}

.wm-dashboard-empty-state .wm-t5 .smart-action-btn {
  animation: emptyStatePulse 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* Empty state content within tiles */
.empty-state-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  padding: 1.5rem;
}

.empty-state-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  color: var(--dash-text);
  margin: 0;
  line-height: 1.3;
}

.empty-state-desc {
  font-size: clamp(0.75rem, 1.2vw, 0.85rem);
  color: var(--dash-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 280px;
}

/* Hide empty-state-desc when sidebar is expanded (saves space) */
#chat-container.sidebar-expanded .empty-state-desc {
  display: none !important;
}

/* Never show empty-state-desc on mobile */
@media (max-width: 768px) {
  .empty-state-desc {
    display: none !important;
  }
}

/* ========== NEW VENTURE MODAL STYLES ========== */

.new-venture-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vh, 32px);
  background: rgba(8, 12, 29, 0.38);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  border: 0.5px solid rgb(63 81 157 / 68%);
  border-radius: 20px;
}

.new-venture-modal-backdrop.visible {
  opacity: 1;
}

.new-venture-modal-backdrop:focus {
  outline: none;
}

.new-venture-modal {
  max-width: 560px;
  width: 100%;
}

.new-venture-modal .lab-inner {
  padding: 2rem 2rem 1rem 2rem;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 400px;
}

/* Idea generator "Finding ideas for you" loading only: tighten bottom spacing (restored when ideas list shows). */
.new-venture-modal .lab-inner.new-venture-inner--idea-gen-loading {
  padding-bottom: 0;
}

.new-venture-modal
  .lab-inner.new-venture-inner--idea-gen-loading
  .idea-generator-loading {
  padding-bottom: 0;
}

/*
 * Idea generator loading: artifacts.css pins .artifacts-loading-context-container to bottom:0 of
 * .idea-generator-loading, which overlaps the blueprint. Use normal flow only in this modal.
 */
.new-venture-modal .idea-generator-loading:has(.idea-generator-context) {
  gap: 1rem;
}

.new-venture-modal
  .idea-generator-loading:has(.idea-generator-context)
  .idea-generator-context.artifacts-loading-context-container {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  max-height: min(38vh, 260px);
  border-radius: 12px;
  border-bottom: 1px solid rgb(91 130 253 / 33%);
  pointer-events: auto;
}

.new-venture-modal
  .idea-generator-loading:has(.idea-generator-context)
  .idea-generator-loading-graphic {
  flex: 0 0 auto;
  min-height: 0;
}

.new-venture-modal
  .idea-generator-loading:has(.idea-generator-context)
  .idea-generator-loading-body {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
}

/* ASCII Background for new venture modal - uses shared .lab-ascii-bg styles from chatBoxStyle9.css */
/* Canvas styling handled by the shared .lab-ascii-bg canvas rule */

.new-venture-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--dash-muted);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.new-venture-modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--dash-text);
}

.new-venture-modal-close svg {
  width: 18px;
  height: 18px;
}

.new-venture-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
  z-index: 1;
}

.new-venture-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.new-venture-header {
  text-align: center;
  padding-top: 1rem;
  flex-shrink: 0;
  -webkit-box-decoration-break: clone;
}

.new-venture-title {
  font-family:
    "Montserrat",
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  font-size: clamp(1.35rem, 5.2vw, 2.125rem);
  font-weight: 900;
  margin: 0 0 0.5rem 0;
  line-height: 1.2;
  letter-spacing: -0.03em;
  position: relative;
  top: 0;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #bdd3f8 32%,
    #8598c4 53%,
    #758ab8 60%,
    #667cae 68%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.new-venture-subtitle {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: var(--dash-muted);
  margin: 0;
  line-height: 1.5;
}

.new-venture-input-area {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 1rem 0;
  min-height: 0;
}

/* Textarea wrapper - starts at 120px, grows with content, caps at parent */
.new-venture-textarea-wrapper {
  width: 100%;
  min-height: 120px;
  max-height: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(5px);
  cursor: text;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.new-venture-textarea-wrapper:focus-within {
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* "Bring your own idea" — needs text after the protected prefix */
.new-venture-view[data-view='idea-input'] .new-venture-textarea-wrapper.is-idea-empty {
  border-color: rgba(249, 115, 22, 0.55);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

.new-venture-view[data-view='idea-input']
  .new-venture-textarea-wrapper.is-idea-empty:focus-within {
  border-color: rgba(249, 115, 22, 0.78);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18);
}

.new-venture-actions .lab-button.primary#new-venture-submit-idea:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.new-venture-textarea {
  width: 100%;
  min-height: 120px;
  max-height: 100%;
  padding: 1rem;
  background: transparent;
  border: none;
  color: var(--dash-text);
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
  resize: none;
  outline: none;
  field-sizing: content;
  overflow-y: auto;
}

.new-venture-textarea::placeholder {
  color: var(--dash-muted);
  opacity: 0.6;
}

.new-venture-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  flex-shrink: 0;
  margin-top: auto;
}

.new-venture-input-area--idea-gen-prompt .new-venture-idea-gen-attach-row {
  margin-top: 0.75rem;
}

.new-venture-input-area--idea-gen-prompt .artifacts-clarification-attachments {
  margin-top: 0.5rem;
}

/* Idea Generator */
.idea-generator-error-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgb(21 0 0 / 80%);
  border-radius: 20px;
  backdrop-filter: blur(6px);
  z-index: 10;
  padding: 20px;
  margin: 40px;
}

.idea-generator-loading {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex: 1;
  min-height: 0;
  padding: 1.25rem 1rem 2rem;
  gap: 0.5rem;
}

.idea-generator-loading-graphic {
  flex: 1 1 50%;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.idea-generator-loading-graphic img {
  width: min(264px, 72vw);
  height: auto;
  max-height: min(280px, 42vh);
  object-fit: contain;
  display: block;
}

.idea-generator-loading-body {
  flex: 1 1 50%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* "Creating your venture" / post-submit loading: no context strip — center graphic */
.idea-generator-loading:not(:has(.artifacts-loading-context-container)) {
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.idea-generator-loading:not(:has(.artifacts-loading-context-container))
  .idea-generator-loading-graphic {
  flex: 0 0 auto;
  min-height: 0;
}

.idea-generator-loading:not(:has(.artifacts-loading-context-container))
  .idea-generator-loading-body {
  flex: 0 0 auto;
  min-height: 0;
  justify-content: flex-start;
}

.idea-generator-error {
  color: #f87171;
  font-size: 0.95rem;
  margin: 0 0 1rem 0;
}

.idea-generator-list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: visible;
  padding: 0.5rem;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 5%,
    black 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 5%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Idea Cards */
.idea-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  margin: 0.5rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
  flex-shrink: 0;
}

.idea-card:hover {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.3);
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.15);
}

/* Selected state: green border and box shadow (matches Artifacts clarification answered) */
.idea-card.selected {
  border-color: rgba(34, 197, 94, 0.6);
  box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
  background: rgba(34, 197, 94, 0.06);
}
.idea-card.selected:hover {
  border-color: rgba(34, 197, 94, 0.7);
  box-shadow: 0 0 18px rgba(34, 197, 94, 0.35);
}

/* Detail section (Monetization + Why you): hidden by default, expands when selected */
.idea-card-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease,
    margin 0.25s ease;
  margin-top: 0;
  font-size: 0.9rem;
  color: var(--dash-muted);
  line-height: 1.5;
}

.idea-card-detail p {
  margin: 0.5rem 0 0 0;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid #ffffff69;
}

.idea-card-detail p:first-child {
  margin-top: 0;
}

.idea-card.selected .idea-card-detail {
  max-height: 280px;
  opacity: 1;
  margin-top: 0.75rem;
}

.idea-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dash-text);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.idea-card-desc {
  font-size: 0.9rem;
  color: var(--dash-muted);
  margin: 0;
  line-height: 1.5;
}

/* Single actions row at bottom of idea generator (Approve only) */
.idea-generator-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1rem 0.5rem 0;
  margin-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.idea-generator-actions .lab-button.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* New Venture Modal - Confirmation View */
.new-venture-confirmation-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 1rem;
}

.new-venture-confirmation-container .venture-confirmation-container {
  width: 100%;
}

.new-venture-confirmation-container .venture-confirmation-wrapper {
  padding: 1.5rem;
}

/* Ensure ASCII background has 80% opacity in new venture modal */
.new-venture-modal .lab-ascii-bg {
  opacity: 0.25;
}

/* Responsive adjustments for modals */
@media (max-width: 768px) {
  /*
   * .lab-modal is 100dvh on mobile (chat-box.css). Vertical backdrop padding made the
   * flex content box shorter than the modal, clipping the bottom (e.g. Approve).
   */
  .new-venture-modal-backdrop {
    padding: 0;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .new-venture-modal .lab-inner {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  .new-venture-modal .lab-inner.new-venture-inner--idea-gen-loading {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

@media (max-width: 600px) {
  .new-venture-modal .lab-inner {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem;
    min-height: 350px;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .new-venture-modal .lab-inner.new-venture-inner--idea-gen-loading {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ===== Venture Menu Button Styles ===== */
.venture-menu-wrapper {
  position: absolute;
  right: clamp(8px, 1vw, 12px);
  z-index: 10;
}

.venture-menu-trigger {
  background: none;
  border: none;
  padding: 4px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s ease;
  border-radius: 6px;
}

#tile-description:hover .venture-menu-trigger {
  opacity: 0.7;
}

.venture-menu-trigger:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 0.08);
}

.venture-menu-trigger img,
.venture-menu-trigger svg {
  width: 16px;
  height: 16px;
  display: block;
}

.venture-menu-trigger svg {
  color: var(--dash-muted, #94a3b8);
}

.venture-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.15s ease;
}

/* Portaled to document.body — escapes .wm-tile / .tile-inner overflow:hidden (same idea as .wm-quick-search-panel--portal) */
.venture-menu-dropdown.venture-menu-dropdown--portal {
  position: fixed;
  z-index: 10050;
  top: auto;
  right: auto;
  left: auto;
  margin-top: 0;
}

.venture-menu-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.venture-menu-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  width: 100%;
  border: none;
  background: none;
  color: var(--dash-muted, #94a3b8);
  cursor: pointer;
  white-space: nowrap;
  font-size: 0.875rem;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.venture-menu-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.venture-menu-option.venture-delete-option {
  color: #ef4444;
}

.venture-menu-option.venture-delete-option:hover {
  background: rgba(239, 68, 68, 0.15);
}

.venture-menu-option svg,
.venture-menu-option img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

/* ===== Venture Delete Modal Styles ===== */
.venture-delete-modal-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vh, 32px);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 9999;
}

.venture-delete-modal-backdrop.active {
  display: flex;
}

.venture-delete-modal {
  background: linear-gradient(
    145deg,
    rgb(2 4 11) 0%,
    rgb(49 44 72) 100%
  ) !important;
  border-radius: 12px;
  padding: 24px;
  width: 90%;
  margin-bottom: 15vh;
  max-width: 400px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.venture-modal-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  color: #ef4444;
}

.venture-modal-icon svg {
  width: 100%;
  height: 100%;
}

.venture-modal-title {
  color: #e5e7eb;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.venture-modal-message {
  color: #94a3b8;
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.venture-modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.venture-modal-button {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}

.venture-modal-button.cancel {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.venture-modal-button.cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

.venture-modal-button.delete {
  background: #ef4444;
  color: white;
  border: none;
}

.venture-modal-button.delete:hover {
  background: #dc2626;
}

.venture-modal-button.delete:disabled {
  background: #6b7280;
  cursor: not-allowed;
}