/* ────────────────────────────────────────────────
   styles.css — only special cases not in Tailwind
   ──────────────────────────────────────────────── */

/* ── Chartoy logo text (when logo.png is absent) ── */
.chartoy-logo {
  color: #f5c42a;
  -webkit-text-stroke: 1.5px #b87200;
  paint-order: stroke fill;
}

/* ── Run button shimmer animation ── */
@keyframes shimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}

 

.btn-running {
  background: linear-gradient(
    90deg,
    #fbbf24 0%,
    #f59e0b 20%,
    #fde68a 50%,
    #f59e0b 80%,
    #fbbf24 100%
  ) !important;
  background-size: 300% 100% !important;
  animation: shimmer 1.5s linear infinite !important;
  border-color: transparent !important;
  color: white !important;
  pointer-events: none !important;
  cursor: default !important;
}

/* ── Collapsible row content ── */
.row-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.3s ease;
}

/* ── Tag pills ── */
.tag {
  display: inline-flex;
  align-items: center;
  border: 1px solid #cac6be;
  border-radius: 9999px;
  padding: 3px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: #4a4540;
  white-space: nowrap;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ── Inner field label (gray subheading) ── */
.inner-key {
  font-size: 12.5px;
  font-weight: 500;
  color: #9b9186;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: 0.01em;
}

/* ── Toggle icon ── */
.toggle-icon {
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  color: #666;
  transition: opacity 0.15s ease;
  user-select: none;
}

/* ── Subtle row hover ── */
.row-header:hover .toggle-icon {
  opacity: 0.6;
}

#assets-children {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#assets-children.open {
  max-height: 200px;
  opacity: 1;
}

.asset-children {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.asset-children.open {
  max-height: 600px;
  opacity: 1;
}

#main-panel ::-webkit-scrollbar {
  display: none;
}

@media (max-width: 640px) {
  .home-card-wrap:has(> div[data-type="actor"]) { display: none !important; }

  .home-card[data-type="video"] {
    width: 90vw !important;
    height: auto !important;
    aspect-ratio: 223 / 298;
  }
  .home-card-wrap:has([data-type="video"]) p,
  .home-card-wrap:has([data-type="video"]) button.home-create-btn {
    width: 90vw !important;
  }

  .home-row { padding-right: 0 !important; gap: 16px !important; }
 
  aside { display: none !important; }

  #app { border-radius: 0 !important; border: none !important; }
  body { padding: 0 !important; }

  #main-panel { padding-left: 12px !important; padding-right: 12px !important; }
}