/**
 * Premium Scrollbar Styles
 * 高级滚动条设计 - 支持深色/浅色主题
 */

/* ========================================
   全局滚动条基础样式
   ======================================== */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 6px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.35) 0%, 
    rgba(139, 92, 246, 0.3) 30%,
    rgba(168, 85, 247, 0.28) 50%,
    rgba(139, 92, 246, 0.3) 70%,
    rgba(99, 102, 241, 0.35) 100%
  );
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 2px 8px rgba(99, 102, 241, 0.15);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.55) 0%, 
    rgba(139, 92, 246, 0.5) 30%,
    rgba(168, 85, 247, 0.45) 50%,
    rgba(139, 92, 246, 0.5) 70%,
    rgba(99, 102, 241, 0.55) 100%
  );
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 16px rgba(99, 102, 241, 0.25);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.75) 0%, 
    rgba(139, 92, 246, 0.7) 30%,
    rgba(168, 85, 247, 0.65) 50%,
    rgba(139, 92, 246, 0.7) 70%,
    rgba(99, 102, 241, 0.75) 100%
  );
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 6px 20px rgba(99, 102, 241, 0.35);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/* 滚动条两端的按钮 */
::-webkit-scrollbar-button {
  height: 0;
  width: 0;
  display: none;
}

/* ========================================
   深色主题滚动条
   ======================================== */

body.app-theme-dark ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.app-theme-dark ::-webkit-scrollbar-track {
  background: linear-gradient(180deg, 
    rgba(15, 23, 42, 0.2) 0%,
    rgba(15, 23, 42, 0.4) 50%,
    rgba(15, 23, 42, 0.2) 100%
  );
  border-radius: 6px;
}

body.app-theme-dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.45) 0%, 
    rgba(139, 92, 246, 0.4) 30%,
    rgba(168, 85, 247, 0.35) 50%,
    rgba(139, 92, 246, 0.4) 70%,
    rgba(99, 102, 241, 0.45) 100%
  );
  border: 3px solid rgba(15, 23, 42, 0.4);
  background-clip: padding-box;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 12px rgba(99, 102, 241, 0.2);
}

body.app-theme-dark ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.65) 0%, 
    rgba(139, 92, 246, 0.6) 30%,
    rgba(168, 85, 247, 0.55) 50%,
    rgba(139, 92, 246, 0.6) 70%,
    rgba(99, 102, 241, 0.65) 100%
  );
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 4px 20px rgba(99, 102, 241, 0.3);
}

/* ========================================
   浅色主题滚动条
   ======================================== */

body.app-theme-light ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.app-theme-light ::-webkit-scrollbar-track {
  background: linear-gradient(180deg, 
    rgba(241, 245, 249, 0.5) 0%,
    rgba(226, 232, 240, 0.6) 50%,
    rgba(241, 245, 249, 0.5) 100%
  );
  border-radius: 6px;
  border: 1px solid rgba(203, 213, 225, 0.3);
}

body.app-theme-light ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.3) 0%, 
    rgba(139, 92, 246, 0.25) 30%,
    rgba(168, 85, 247, 0.22) 50%,
    rgba(139, 92, 246, 0.25) 70%,
    rgba(99, 102, 241, 0.3) 100%
  );
  border: 3px solid rgba(255, 255, 255, 0.8);
  background-clip: padding-box;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 2px 8px rgba(99, 102, 241, 0.1);
}

body.app-theme-light ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.5) 0%, 
    rgba(139, 92, 246, 0.45) 30%,
    rgba(168, 85, 247, 0.4) 50%,
    rgba(139, 92, 246, 0.45) 70%,
    rgba(99, 102, 241, 0.5) 100%
  );
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 4px 16px rgba(99, 102, 241, 0.2);
}

/* ========================================
   特定区域滚动条
   ======================================== */

/* 时间轴滚动条 - 水平 */
.timeline-scroll::-webkit-scrollbar,
.timeline-container::-webkit-scrollbar {
  height: 10px;
}

.timeline-scroll::-webkit-scrollbar-thumb,
.timeline-container::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, 
    rgba(99, 102, 241, 0.4),
    rgba(139, 92, 246, 0.35),
    rgba(168, 85, 247, 0.3),
    rgba(139, 92, 246, 0.35),
    rgba(99, 102, 241, 0.4)
  );
  border-radius: 5px;
}

/* 字幕编辑器滚动条 */
.subtitle-list::-webkit-scrollbar {
  width: 8px;
}

.subtitle-list::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.1);
  border-radius: 4px;
}

.subtitle-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.35),
    rgba(168, 85, 247, 0.3)
  );
  border-radius: 4px;
}

/* AI聊天滚动条 */
.ai-chat-messages::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, 
    rgba(99, 102, 241, 0.3),
    rgba(168, 85, 247, 0.25)
  );
  border-radius: 3px;
}

/* 代码块滚动条 */
pre::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

pre::-webkit-scrollbar-thumb {
  background: rgba(99, 102, 241, 0.3);
  border-radius: 3px;
}

/* ========================================
   Firefox 滚动条
   ======================================== */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, 0.35) transparent;
}

body.app-theme-dark * {
  scrollbar-color: rgba(99, 102, 241, 0.45) rgba(15, 23, 42, 0.3);
}

body.app-theme-light * {
  scrollbar-color: rgba(99, 102, 241, 0.28) rgba(241, 245, 249, 0.5);
}

/* ========================================
   隐藏滚动条但保留功能
   ======================================== */

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ========================================
   平滑滚动
   ======================================== */

.smooth-scroll {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .smooth-scroll {
    scroll-behavior: auto;
  }
}

/* ========================================
   滚动条动画效果
   ======================================== */

/* 滚动时滚动条发光效果 */
@keyframes scrollbarGlow {
  0%, 100% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 2px 8px rgba(99, 102, 241, 0.15);
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.15),
      0 2px 16px rgba(99, 102, 241, 0.3);
  }
}

::-webkit-scrollbar-thumb:active {
  animation: scrollbarGlow 0.5s ease-in-out;
}