@import url("./sizes.css"); /* 引入尺寸与变量 */

/* === 弹窗与覆盖层（Modals & Overlays） === */

/* 统一圆角 */
#history-overlay,
#feedback-overlay,
#loader,
#image-comparison-container {
  /* 统一弹窗圆角，与卡片保持一致 */
  border-radius: var(--card-radius); /* 圆角与卡片一致 */
}

/* Loader 进度条与动画 */
#loader-progress {
  width: var(--loader-width); /* 进度条宽度 */
  height: var(--loader-height); /* 进度条高度 */
  border-radius: var(--loader-radius); /* 胶囊圆角 */
  background: var(--loader-progress-bg); /* 容器背景 */
  box-shadow: inset var(--loader-shadow-dims) var(--loader-progress-inset-shadow),
              0 0 0 var(--outline-1) var(--loader-progress-outline); /* 内阴影与外描边 */
  overflow: hidden; /* 隐藏溢出，约束填充动画 */
}
#loader-progress-fill {
  height: 100%; /* 填充层高度占满 */
  width: 0%; /* 初始宽度为 0% */
  background: var(--loader-progress-fill-gradient); /* 渐变填充 */
  background-size: 200% 100%; /* 渐变平移范围 */
  box-shadow: var(--loader-fill-outer-dims) var(--loader-progress-fill-shadow-outer),
              var(--loader-fill-inner-dims) var(--loader-progress-fill-shadow-inner) inset; /* 内外发光阴影 */
  animation: loaderShimmer 1.6s linear infinite; /* 闪动动画 */
  transition: width 0.25s ease; /* 进度宽度过渡 */
}
#loader-progress-text {
  /* 预留百分比文案（默认隐藏） */
  display: none !important; /* 默认不显示文字 */
}
@keyframes loaderShimmer {
  0% { background-position: 0% 0; } /* 渐变起点在左 */
  100% { background-position: 200% 0; } /* 渐变移动到右 */
}

/* 悬浮提示：车融合上传说明面板箭头（容器伪元素） */
#car-blend-hover-tip .arrow-down,
#car-blend-hover-tip .arrow-up {
  display: none !important; /* 隐藏旧箭头元素 */
}
#car-blend-hover-tip.tip-down::before,
#car-blend-hover-tip.tip-down::after,
#car-blend-hover-tip.tip-up::before,
#car-blend-hover-tip.tip-up::after {
  content: ''; /* 空内容（伪元素） */
  position: absolute; /* 绝对定位 */
  left: 50%; /* 水平居中线 */
  transform: translateX(-50%); /* 修正水平居中 */
  width: 0; /* 三角由边框生成 */
  height: 0; /* 三角由边框生成 */
}
/* 下箭头 */
#car-blend-hover-tip.tip-down::before {
  bottom: calc(-1 * var(--car-arrow-outer)); /* 位置下移到容器外 */
  border-left: var(--car-arrow-outer) solid transparent; /* 左边透明 */
  border-right: var(--car-arrow-outer) solid transparent; /* 右边透明 */
  border-top: var(--car-arrow-outer) solid var(--car-blend-tip-arrow-outline); /* 外层白边三角 */
}
#car-blend-hover-tip.tip-down::after {
  bottom: calc(-1 * var(--car-arrow-inner)); /* 内层位置下移 */
  border-left: var(--car-arrow-inner) solid transparent; /* 左边透明 */
  border-right: var(--car-arrow-inner) solid transparent; /* 右边透明 */
  border-top: var(--car-arrow-inner) solid var(--car-blend-tip-arrow-inner-down); /* 内层面板色三角 */
}
/* 上箭头 */
#car-blend-hover-tip.tip-up::before {
  top: calc(-1 * var(--car-arrow-outer)); /* 位置上移到容器外 */
  border-left: var(--car-arrow-outer) solid transparent; /* 左边透明 */
  border-right: var(--car-arrow-outer) solid transparent; /* 右边透明 */
  border-bottom: var(--car-arrow-outer) solid var(--car-blend-tip-arrow-outline-up); /* 外层白边三角（向上） */
}
#car-blend-hover-tip.tip-up::after {
  top: calc(-1 * var(--car-arrow-inner)); /* 内层位置上移 */
  border-left: var(--car-arrow-inner) solid transparent; /* 左边透明 */
  border-right: var(--car-arrow-inner) solid transparent; /* 右边透明 */
  border-bottom: var(--car-arrow-inner) solid var(--car-blend-tip-arrow-inner-up); /* 内层面板色三角（向上） */
}

/* 登录弹窗样式 */
#login-modal .login-card,
#register-modal .login-card {
  width: 306px;
  height: 440px;
  background: #ffffff;
  color: #000000;
  border-radius: var(--card-radius);
  border: var(--card-border) solid var(--left-card-border);
  box-shadow: 0px 10px 10px 5px rgba(228, 232, 234, 0.75);
  padding: 48px 40px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.login-body { flex: 0 0 auto; display: flex; flex-direction: column; padding-bottom: 44px; margin-top: auto; }
#login-modal .login-title,
#register-modal .login-title { text-align: center; font-size: 16px; font-weight: 600; color: #374151; }
#login-modal .login-brand,
#register-modal .login-brand {
  text-align: center;
  margin: 0;
}
#login-modal .login-logo,
#register-modal .login-logo {
  display: inline-block;
  width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
}

#login-modal { background: #ffffff; }
#register-modal { background: #ffffff; }
#login-modal .login-label,
#register-modal .login-label { display:block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 10px; }
#login-modal .login-field,
#register-modal .login-field { margin-top: 0; }
#login-modal .login-field + .login-field,
#register-modal .login-field + .login-field { margin-top: 22px; }
#login-modal .login-input,
#register-modal .login-input { width: 100%; height: 36px; border-radius: 10px; border: var(--card-border) solid var(--select-border-color); background: linear-gradient(to bottom, var(--select-bg-top), var(--select-bg-bottom)); padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 12px; font-size: 13px; color: #808080; line-height: 20px; outline: none; margin-bottom: 0; }
#login-modal .login-input::placeholder { color: #9aa0a6; }
#login-modal .login-input:focus { border-color: var(--select-border-color); box-shadow: var(--focus-ring-dims) var(--focus-border-color); }
#login-modal .login-actions,
#register-modal .login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0;
  margin-bottom: 0;
}
#login-modal #register-btn { width: 106px; height: 36px; border-radius: 15px; border: 1px solid #e5e7eb; background: #ffffff; color: #374151; font-size: 13px; }
#login-modal #register-btn:hover { background: #f9fafb; }
#login-modal #login-btn,
#register-modal #register-confirm-btn { width: 106px; height: 36px; border-radius: 15px; background: #8ba1e8; color: #ffffff; font-size: 13px; }

#register-modal #switch-to-login-btn { width: 106px; height: 36px; border-radius: 15px; border: 1px solid #e5e7eb; background: #ffffff; color: #374151; font-size: 13px; }
#login-modal #login-btn:hover { background: #4f46e5; }
.modal-overlay { background-color: rgba(44,44,58,0.69) !important; }
.expand-grid { background-image: radial-gradient(#f7f7f8 3px, transparent 3px); background-size: 23px 23px; }
/* 登录/注册页：背景改为纯白，不使用半透明遮罩 */
#login-modal.modal-overlay,
#register-modal.modal-overlay { background-color: #ffffff !important; }
#processing-overlay { background-color: rgba(44,44,58,0.69) !important; }

/* 生成遮罩页（参考 loading.html） */
#loader .loader-board{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#ffffff; overflow:hidden; }
#loader .loader-orb-1{ position:absolute; width:1200px; height:1200px; background:radial-gradient(circle, #ebf0ff 0%, rgba(255,255,255,0) 70%); top:-40%; left:-20%; border-radius:50%; opacity:.5; animation:loader-float 20s infinite ease-in-out; }
#loader .loader-orb-2{ position:absolute; width:1000px; height:1000px; background:radial-gradient(circle, #ebf0ff 0%, rgba(255,255,255,0) 70%); bottom:-30%; right:-20%; border-radius:50%; opacity:.5; animation:loader-float 25s infinite ease-in-out reverse; }
@keyframes loader-float{ 0%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(60px,40px) scale(1.05);} 66%{ transform:translate(-40px,60px) scale(.95);} 100%{ transform:translate(0,0) scale(1);} }
#loader .loader-glass{ position:absolute; inset:0; backdrop-filter:blur(60px); pointer-events:none; z-index:3; }
#loader .loader-dot{ position:absolute; inset:-50px; background-image:radial-gradient(#d1dbe8 1.5px, transparent 1.5px); background-size:24px 24px; opacity:.3; z-index:2; animation:loader-drift 60s linear infinite; }
@keyframes loader-drift{ 0%{ transform:translate(0,0);} 100%{ transform:translate(-48px,-48px);} }
#loader .loader-center{ position:relative; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; }
#loader .siri-blob-wrapper{ width:200px; height:200px; position:relative; display:flex; align-items:center; justify-content:center; mix-blend-mode:multiply; margin-bottom:20px; }
#loader .siri-blob{ position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; filter:blur(10px); opacity:.8; animation:loader-spin 8s linear infinite; }
#loader .blob-1{ background:linear-gradient(45deg, #ebf0ff 20%, #c7d2fe 80%); animation:loader-morph 6s ease-in-out infinite alternate, loader-spin 10s linear infinite; }
#loader .blob-2{ background:linear-gradient(135deg, #e0e7ff 0%, #ebf0ff 100%); animation:loader-morph 8s ease-in-out infinite alternate-reverse, loader-spin 12s linear infinite reverse; opacity:.6; }
#loader .blob-3{ width:80%; height:80%; top:10%; left:10%; background:#ffffff; opacity:.5; filter:blur(20px); animation:loader-pulse 3s ease-in-out infinite; }
@keyframes loader-spin{ 0%{ transform:rotate(0);} 100%{ transform:rotate(360deg);} }
@keyframes loader-morph{ 0%{ border-radius:40% 60% 60% 40% / 60% 30% 70% 40%; } 100%{ border-radius:40% 60%; } 50%{ border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; } }
@keyframes loader-pulse{ 0%,100%{ transform:scale(.8); opacity:.3;} 50%{ transform:scale(1.1); opacity:.6;} }
#loader .process-text{ font-size:18px; color:#64748B; font-weight:500; letter-spacing:2px; margin-bottom:20px; animation:loader-text 3s infinite ease-in-out; }
@keyframes loader-text{ 0%,100%{ opacity:.6;} 50%{ opacity:1;} }
#loader #stop-btn{ background:#EF4444; color:#fff; border:none; padding:12px 36px; border-radius:50px; font-size:15px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:8px; box-shadow:0 8px 20px rgba(239,68,68,.25); transition:all .2s cubic-bezier(.25,.8,.25,1); }
#loader #stop-btn:hover{ transform:scale(1.05); background:#DC2626; box-shadow:0 12px 24px rgba(239,68,68,.35); }
#loader #stop-btn:active{ transform:scale(.95); }

/* Canvas Pop Animation */
@keyframes canvasPop {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.canvas-anim {
  animation: canvasPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Expand Modal Ratio Buttons */
.expand-ratio-btn {
  width: 60px;
  height: 23px;
  font-size: 12px;
  background: #ffffff;
  color: #374151;
  border: 1px solid #ffffff;
  border-radius: 0;
  font-weight: var(--function-btn-font-weight);
  cursor: pointer;
  padding: 0;
}
/* Corner Radii for the "Whole" look (Grid 3 cols) */
/* 1 2 3 */
/* 4 5 6 */
#expand-ratio-group .expand-ratio-btn:nth-child(1) { border-top-left-radius: 10px; }
#expand-ratio-group .expand-ratio-btn:nth-child(3) { border-top-right-radius: 10px; }
#expand-ratio-group .expand-ratio-btn:nth-child(4) { border-bottom-left-radius: 10px; }
#expand-ratio-group .expand-ratio-btn:nth-child(6) { border-bottom-right-radius: 10px; }

.expand-ratio-btn:hover {
  background: #f9fafb;
}
.expand-ratio-btn.active {
  background: #ebf0ff !important;
  color: var(--function-btn-active-border) !important;
  border: 1px solid var(--function-btn-active-border) !important;
}