/* 桌面：工具条 / 明信片 / 网格 / 文件夹 / 拖拽占位
   —— 由 styles.css 第 235–540 行原样切分，规则与顺序未改动。 */
/* Main */
.main-screen{width:100%;height:100%;display:flex;flex-direction:column;position:relative;}

.status-bar{
  height:40px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;color:#fff;font-size:12px;font-weight:500;
  background:rgba(255,255,255,0.08);backdrop-filter:blur(15px);
  border-bottom:1px solid rgba(255,255,255,0.1);
  flex-shrink:0;
}
.status-bar.hidden{display:none;}

/* 主内容区 */
.main-content{
  flex:1;overflow-y:auto;overflow-x:hidden;
  padding:16px 16px 36px; /* 底部留出 36px 给分页指示器，防止覆盖最后一行应用 */
  position:relative;
  /* 允许垂直方向的原生滑动，防止长按/拖拽逻辑把滚动完全吃掉 */
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.main-content::-webkit-scrollbar{display:none;}

/* 桌面顶部工具条 */
.desktop-toolbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
  height:36px;
}
.toolbar-btn{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,0.5);
  backdrop-filter:blur(10px);
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  transition:all 0.2s ease;
}
.toolbar-btn svg{width:18px;height:18px;fill:#333;}
.toolbar-btn:active{transform:scale(0.9);}

/* 明信片 */
.profile-card{
  width:100%;height:240px;
  margin-bottom:16px;
  position:relative;border-radius:24px;overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.card-bg-base{position:absolute;inset:0;background:linear-gradient(135deg,#FFE5F1 0%,#E5F1FF 100%);}
.card-bg-custom{
  position:absolute;top:0;left:0;width:100%;height:66.67%;
  background:linear-gradient(135deg,rgba(255,182,193,0.3),rgba(173,216,230,0.3));
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(to bottom,black 0%,black 60%,transparent 100%);
  mask-image:linear-gradient(to bottom,black 0%,black 60%,transparent 100%);
  cursor:pointer;
}
.card-content{
  position:relative;width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:16px;
}
.card-avatar{
  width:88px;height:88px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;box-shadow:0 4px 12px rgba(0,0,0,0.1);
  border:4px solid #fff;margin-bottom:12px;cursor:pointer;
  background-size:cover;background-position:center;overflow:hidden;
}
.card-nickname{
  font-size:20px;font-weight:600;color:#333;margin-bottom:4px;
  cursor:pointer;padding:4px 12px;border-radius:12px;
}
.card-signature{
  font-size:12px;color:#666;cursor:pointer;
  padding:4px 12px;border-radius:12px;text-align:center;
}

/* 小对话组件 */
.chat-bubble-widget{
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(20px);
  border-radius:24px;
  padding:16px;
  margin-bottom:16px;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  position:relative;
}
.bubble-row{display:flex;align-items:flex-start;gap:8px;}
.bubble-row.right{flex-direction:row-reverse;}
.bubble-avatar{
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,0.8);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;cursor:pointer;
  background-size:cover;background-position:center;overflow:hidden;
}
.bubble-text{
  background:#fff;border-radius:14px;
  padding:8px 14px;font-size:13px;color:#333;
  max-width:200px;word-break:break-all;cursor:pointer;
  line-height:1.4;
}
.bubble-row.right .bubble-text{background:#d4e8ff;}

/* 网格 */
.app-grid-wrapper{
  position:relative;
  overflow:hidden;
  min-height:280px;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
}
.app-grid{
  display:grid;
  position:relative;
  grid-template-columns:repeat(4,minmax(0,1fr));
  /* 行数由 JS 根据真实可用高度写入，避免"下半部分没有格子"导致拖不进去 */
  grid-template-rows:repeat(var(--desk-rows,3),minmax(0,1fr));
  grid-auto-rows:minmax(72px,1fr);
  gap:12px;
  padding:8px;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
}
.app-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;position:relative;
  height:100%;min-width:0;
  transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),opacity 0.2s;
  touch-action:none;user-select:none;
}
.app-item.dragging{opacity:0.35;transform:scale(0.9);}
.app-item:active{transform:scale(0.92);}
/* 拖拽进行中禁止抖动动画，否则内联的让位 transform 会被动画覆盖 */
.app-grid.desktop-dragging .app-item{animation:none !important;}
.app-item.shift-left{animation:shiftLeft 0.28s ease;}
.app-item.shift-right{animation:shiftRight 0.28s ease;}
@keyframes shiftLeft{
  0%{transform:translateX(0);}
  50%{transform:translateX(-10px);}
  100%{transform:translateX(0);}
}
@keyframes shiftRight{
  0%{transform:translateX(0);}
  50%{transform:translateX(10px);}
  100%{transform:translateX(0);}
}
.app-grid.edit-mode .app-item:not(.dragging){animation:shake 0.8s ease-in-out infinite;}
.bottom-dock.edit-mode .dock-item:not(.dragging){animation:shake 0.8s ease-in-out infinite;}
@keyframes shake{
  0%,100%{transform:rotate(0deg);}
  25%{transform:rotate(-0.6deg);}
  75%{transform:rotate(0.6deg);}
}

/* 文件夹：多图标堆叠 */
.folder-icon{
  position:relative;
  overflow:hidden;
  width:64px;height:64px;
  border-radius:18px;
  background:rgba(255,255,255,0.38);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.45);
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  flex-shrink:0;
}
.folder-icon .folder-empty{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;
}
.folder-icon .folder-stack{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:2px;
  padding:6px;
}
.folder-icon .folder-mini{
  width:100%;height:100%;
  border-radius:6px;
  background:rgba(255,255,255,0.9);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
  overflow:hidden;
}
.folder-icon .folder-mini svg{width:60%;height:60%;fill:#666;}
.folder-icon .folder-mini div{font-size:12px !important;line-height:1;}

/* 文件夹展开面板 */
.folder-panel{
  position:absolute;inset:0;z-index:9000;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn 0.25s ease;
}
.folder-panel-box{
  width:min(86%,320px);
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.5);
  padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,0.3);
}
.folder-panel-title{
  font-size:15px;font-weight:600;color:#fff;
  margin-bottom:16px;text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,0.2);
}
.folder-panel-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:14px 8px;
}
.folder-panel-item{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  cursor:pointer;
}
.folder-panel-item .app-icon{
  width:52px;height:52px;border-radius:14px;font-size:24px;
  background:linear-gradient(135deg, rgba(255,214,232,0.95), rgba(212,232,255,0.95));
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 2px 8px rgba(0,0,0,0.06);
}
.folder-panel-item .app-icon svg{fill:#4a5568;width:26px;height:26px;}
.folder-panel-item .app-name{
  font-size:10px;max-width:56px;
}
.folder-panel-actions{
  margin-top:16px;
  display:flex;justify-content:center;
}
.folder-panel-ungroup{
  padding:7px 16px;border-radius:14px;
  border:1px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.75);
  color:#666;font-size:12px;font-weight:600;
  font-family:inherit;cursor:pointer;
}
.folder-panel-ungroup:active{transform:scale(0.96);}

/* 拖拽占位虚影 */
.drop-placeholder{
  border:2px dashed rgba(255,255,255,0.7);
  border-radius:20px;
  background:rgba(255,255,255,0.15);
  pointer-events:none;
  transition:all 0.22s cubic-bezier(0.4,0,0.2,1);
}

.app-icon{
  width:64px;height:64px;border-radius:18px;
  background:rgba(255,255,255,0.35);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:all 0.25s ease;
}
.app-icon svg{width:32px;height:32px;fill:#fff;}
/* 窄屏（320~350px）缩小图标，避免 4 列放不下导致视觉上互相压住 */
@media (max-width:350px){
  .app-icon{width:52px;height:52px;border-radius:15px;}
  .app-icon svg{width:26px;height:26px;}
  .folder-icon{width:52px;height:52px;border-radius:15px;}
  .app-name{font-size:10px;max-width:52px;}
}

.app-name{
  font-size:11px;color:#fff;text-align:center;
  font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,0.15);
  max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.delete-btn{
  position:absolute;top:-4px;right:8px;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,59,48,0.95);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
  z-index:5;
}

/* 浮动拖拽图标 */
.drag-ghost{
  position:fixed;left:0;top:0;z-index:10005;
  pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  will-change:transform;
  filter:drop-shadow(0 16px 32px rgba(0,0,0,0.28));
  transition:transform 0.05s linear;
}
.drag-ghost .app-icon{
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(30px);
  border:2px solid rgba(255,255,255,0.7);
  transform:scale(1.15);
}