/* 拖曳功能樣式 */

/* Action 2 按鈕 - 拖曳觸發區域 */
.card-menu-actions button:nth-child(2) {
  cursor: grab;
  transition: transform 0.2s ease;
}

.card-menu-actions button:nth-child(2):hover {
  transform: scale(1.05);
}

.card-menu-actions button:nth-child(2):active {
  cursor: grabbing;
}

/* 拖曳狀態 */
.storyboard-card.is-dragging {
  opacity: 0.5;
  transform: scale(0.95);
  transition: all 0.2s ease;
}

.is-dragging.body {
  cursor: grabbing;
  user-select: none;
}

/* 拖曳預覽 */
.drag-preview {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 2px solid #007AFF;
  background: #fff;
  transition: none !important;
}

/* 佔位符 */
.storyboard-card-placeholder {
  margin: 16px 0;
  border: 2px dashed #007AFF;
  border-radius: 12px;
  background: rgba(0, 122, 255, 0.05);
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.placeholder-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #007AFF;
  font-size: 14px;
  font-weight: 500;
}

.placeholder-icon {
  font-size: 24px;
  margin-bottom: 8px;
  opacity: 0.7;
}

/* 卡片編號調整 */
.card-main-row {
  display: flex;
  align-items: center;
}

.card-number {
  flex-shrink: 0;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .card-menu-actions button:nth-child(2) {
    padding: 8px;
  }
  
  .storyboard-card-placeholder {
    min-height: 80px;
    margin: 12px 0;
  }
  
  .placeholder-content {
    font-size: 12px;
  }
  
  .placeholder-icon {
    font-size: 20px;
    margin-bottom: 6px;
  }
}

/* 觸控設備優化 */
@media (hover: none) and (pointer: coarse) {
  .card-menu-actions button:nth-child(2) {
    padding: 12px;
  }
  
  .card-menu-actions button:nth-child(2):active {
    transform: scale(1.1);
  }
  
  .storyboard-card {
    touch-action: pan-y;
  }
  
  .storyboard-card.is-dragging {
    touch-action: none;
  }
}

/* 動畫效果 */
.storyboard-card {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.storyboard-card:not(.is-dragging) {
  transform: translateY(0);
}

/* 拖曳時禁用其他互動 */
.is-dragging .card-actions-section button,
.is-dragging .card-media-section,
.is-dragging .card-subtitle-section textarea,
.is-dragging .checkbox-control,
.is-dragging .radio-control {
  pointer-events: none;
}

/* 焦點狀態 */
.card-menu-actions button:nth-child(2):focus {
  outline: 2px solid #007AFF;
  outline-offset: 2px;
  border-radius: 4px;
}

/* 高對比度模式支援 */
@media (prefers-contrast: high) {
  .storyboard-card-placeholder {
    border-color: #000;
    background: rgba(0, 0, 0, 0.1);
  }
  
  .placeholder-content {
    color: #000;
  }
}

/* 深色模式支援 */
@media (prefers-color-scheme: dark) {
  .storyboard-card-placeholder {
    border-color: #0A84FF;
    background: rgba(10, 132, 255, 0.1);
  }
  
  .placeholder-content {
    color: #0A84FF;
  }
  
  .drag-preview {
    border-color: #0A84FF;
    background: #1c1c1e;
  }
}