/* Compact Draggable Instructions Card */
:root {
  --card-bg: #ffffff;
  --card-border: #d8e1e8;
  --card-text: #182026;
  --card-subtext: #5c7080;
  --card-primary: #215DB0;
  --card-shadow: 0 4px 12px rgba(16,22,26,0.15), 0 2px 4px rgba(16,22,26,0.1);
}

.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Square Instructions Modal */
.instructions-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 520px;
  height: auto;
  max-height: 80vh;
  background: #ffffff;
  border: 1px solid #d8e1e8;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16,22,26,0.2), 0 2px 8px rgba(16,22,26,0.15);
  font-family: 'JetBrains Mono', 'IBM Plex Sans', monospace;
  z-index: 9999;
  user-select: none;
  opacity: 1;
  visibility: visible;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.instructions-card.minimized .card-content,
.instructions-card.minimized .card-tabs,
.instructions-card.minimized .asset-tabs {
  display: none;
}

.instructions-card.minimized {
  width: 200px;
}

/* Card Header */
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px; /* tighter header */
  background: var(--card-bg);
  border-bottom: 1px solid var(--card-border);
  border-radius: 8px 8px 0 0;
  cursor: move;
}

.card-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--card-text);
}

.card-controls {
  display: flex;
  gap: 4px;
}

.card-btn {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  color: var(--card-subtext);
  cursor: pointer;
  transition: all 0.15s ease;
}

.card-btn:hover {
  background: #f5f8fa;
  color: var(--card-text);
}

/* Reuse the asset tab buttons inside the instructions card */
.instructions-card .asset-tabs { border-bottom: 1px solid var(--card-border); }
.instructions-card .asset-tab { display:inline-flex; align-items:center; gap:6px; }
.instructions-card .asset-tab img { width:14px; height:14px; filter:brightness(0); flex-shrink:0; }

/* Card Content */
.card-content {
  flex: 0 0 auto; /* don't force extra blank space */
  overflow-y: auto;
  background: var(--card-bg);
}

.card-step {
  display: none;
  padding: 10px;
}

.card-step.active {
  display: block;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step-media {
  width: 100%;
  aspect-ratio: 16 / 9; /* widescreen to reduce height */
  height: auto;
  max-height: 260px; /* keep videos compact to avoid pixel stretch */
  border-radius: 12px;
  overflow: hidden;
  background: #f5f8fa;
  box-shadow: 0 2px 8px rgba(16,22,26,0.15);
}

.step-media iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.step-text {
  font-size: 11px;
  color: var(--card-text);
}

.step-text ul {
  margin: 0;
  padding-left: 16px;
  line-height: 1.4;
}

.step-text li {
  margin-bottom: 4px;
  color: var(--card-subtext);
}

.bp-row { display: flex; gap: 12px; align-items: flex-start; }
.bp-col { flex: 1 1 0; }
.bp-list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
  color: #394b59;
  font-size: 14px;
}
.bp-list li {
  margin-bottom: 8px;
}

/* Media container for Drive preview iframes */
.bp-media {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.bp-media iframe, .bp-media video {
  width: 400px;
  height: 400px;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  background: #f5f8fa;
  object-fit: cover;
}

.bp-modal-actions{display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid #e6e8eb; background:#f8fafc; justify-content:flex-end;}
.bp-modal-actions .spacer { flex: 1 1 auto; }

.bp-btn{all:unset; display:inline-flex; align-items:center; justify-content:center; height:26px; padding:0 10px; background:#215DB0; color:#fff; font-weight:700; text-decoration:none; border:1px solid #215DB0; border-radius:3px; white-space:nowrap; font-size:12px; line-height:26px; cursor:pointer; font-family:'JetBrains Mono','IBM Plex Sans', monospace;}
.bp-btn:hover {
  background: #184990;
  border-color: #184990;
  color: #d0d6dc;
}
.bp-btn:active, .bp-btn:focus {
  color: #d0d6dc;
}
.bp-btn.bp-primary {
  background: #215DB0;
  color: #fff;
  border-color: #215DB0;
}
.bp-btn.bp-primary:hover {
  background: #184990;
  border-color: #184990;
  color: #d0d6dc;
}
.bp-btn.bp-success {
  background: #215DB0;
  color: #fff;
  border-color: #215DB0;
}

/* Dragging cursor */
.instructions-card.dragging {
  cursor: grabbing;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .instructions-card {
    width: 90vw;
    max-width: 400px;
  }

  .step-media {
    aspect-ratio: 16 / 9;
    height: auto;
    max-height: 220px;
  }

  .step-text {
    font-size: 11px;
  }

  .card-tab {
    font-size: 10px;
    padding: 6px 8px;
  }

  .card-tab span {
    display: inline; /* Keep text visible on mobile */
  }
}
.bp-btn.bp-success:hover {
  background: #184990;
  border-color: #184990;
  color: #d0d6dc;
}