/**
 * Canvas CSS Styles - 画板相关样式
 * Requirements: 3.3, 3.4, 4.3, 4.4
 */

/* ========== 画板容器 ========== */
.canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-content {
  width: 100%;
  height: 100%;
  transition: padding 0.2s ease;
}

/* ========== 布局容器 ========== */
.layout-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.layout-container.selected {
  outline: 2px solid #007AFF;
  outline-offset: 4px;
}

/* ========== 槽位样式 ========== */
.slot {
  position: relative;
  min-height: 100px;
  border-radius: inherit;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.02);
  border: 2px dashed rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all 0.2s ease;
}

.slot-empty:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.25);
}

.slot-empty-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(0, 0, 0, 0.3);
}

.slot-empty-icon .material-symbols-outlined {
  font-size: 32px;
}

.slot-empty-icon span:last-child {
  font-size: 12px;
  font-weight: 500;
}

/* ========== 图片样式 ========== */
.slot-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;      /* 保持原始比例，不裁切 */
  object-position: center;
  display: block;
}

/* Linear 布局图片样式 - 统一宽度 */
.slot-image-linear {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

/* Linear 布局容器 */
.layout-linear {
  width: 100%;
  height: auto !important;
}

.layout-linear .slot {
  width: 100%;
  height: auto;
}

.layout-linear .slot-filled {
  display: block;
}

.layout-linear .slot-empty {
  min-height: 120px;
}

.slot-filled {
  position: relative;
}

.slot-filled:hover .slot-delete-btn {
  opacity: 1;
  transform: translateY(0);
}

/* ========== 删除按钮 ========== */
.slot-delete-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.slot-delete-btn:hover {
  background: #ef4444;
}

.slot-delete-btn .material-symbols-outlined {
  font-size: 16px;
}

/* ========== 框架样式 ========== */
.frame-browser {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.frame-browser-header {
  height: 36px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  border-bottom: 1px solid #e5e5e5;
}

.frame-browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.frame-browser-dot.red { background: #FF5F57; }
.frame-browser-dot.yellow { background: #FEBC2E; }
.frame-browser-dot.green { background: #28C840; }

.frame-browser-content {
  flex: 1;
  overflow: hidden;
}

.frame-phone {
  display: flex;
  flex-direction: column;
  background: #1a1a1a;
  border-radius: 40px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.frame-phone-notch {
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame-phone-notch-inner {
  width: 80px;
  height: 6px;
  background: #333;
  border-radius: 3px;
}

.frame-phone-content {
  flex: 1;
  background: white;
  border-radius: 28px;
  overflow: hidden;
}

/* ========== 拖放高亮 ========== */
.slot-dragover {
  background: rgba(0, 122, 255, 0.1) !important;
  border-color: #007AFF !important;
}

/* ========== 添加槽位按钮 ========== */
.add-slot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  background: transparent;
  border: 2px dashed rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.add-slot-btn:hover {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.2);
  color: rgba(0, 0, 0, 0.5);
}

.add-slot-btn .material-symbols-outlined {
  font-size: 24px;
}

/* ========== 暗色模式 ========== */
.dark .slot-empty {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.15);
}

.dark .slot-empty:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.25);
}

.dark .slot-empty-icon {
  color: rgba(255, 255, 255, 0.3);
}

.dark .frame-browser {
  background: #1c1c1e;
}

.dark .frame-browser-header {
  background: #2c2c2e;
  border-color: #3c3c3e;
}

.dark .add-slot-btn {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
}

.dark .add-slot-btn:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.5);
}

/* ========== 画板拖拽样式 ========== */
main {
  overflow: hidden;
  user-select: none;
}

main.panning {
  cursor: grabbing !important;
}

main.space-pressed {
  cursor: grab !important;
}

/* 防止拖拽时选中文字和交互 */
main.panning *,
main.space-pressed * {
  user-select: none;
}

main.panning [data-canvas-root] * {
  pointer-events: none;
}

[data-canvas-root] {
  transition: box-shadow 0.3s ease;
  will-change: transform;
  transform-origin: center center;
}