@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #__next {
    height: 100%;
  }
}


@layer utilities {
  /* 隐藏 Chrome, Safari 和 Opera 的滚动条 */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* 隐藏 IE, Edge 和 Firefox 的滚动条 */
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE 和 Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .full-height-minus-64px {
    height: calc(100vh - 64px);
  }

  /* 聊天消息滚动条样式 */
  .chat-scrollbar::-webkit-scrollbar {
    width: 8px;
  }

  .chat-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  .chat-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
  }

  .chat-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
  }

  /* 科技感文本框滚动条样式 */
  .tech-scrollbar::-webkit-scrollbar {
    width: 6px;
  }

  .tech-scrollbar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
  }

  .tech-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(100, 150, 255, 0.5);
    border-radius: 3px;
  }

  .tech-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 150, 255, 0.7);
  }

  .tech-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: rgba(100, 150, 255, 0.5) rgba(0, 0, 0, 0.2);
  }

  /* 隐藏滚动条但保持滚动功能 */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE 和 Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari 和 Opera */
  }
}

/* 高级科技感动画 */
@keyframes shimmer {
  0%, 100% {
    opacity: 0.6;
    transform: scaleX(1);
  }
  50% {
    opacity: 1;
    transform: scaleX(1.05);
  }
}

/* 边框旋转动画 - 完美科技感 */
@keyframes borderRotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 外发光脉冲动画 - 增强边缘感 */
@keyframes glowPulse {
  0%, 100% {
    opacity: 1;
    filter: blur(0px);
  }
  50% {
    opacity: 0.8;
    filter: blur(2px);
  }
}

/* 渐变移动动画 - 用于按钮边框 */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 扫描线动画 - 科技感扫描效果 */
@keyframes scanLine {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* 脉冲动画 - 用于悬停效果 */
@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* 隐藏 Next.js 开发工具的路由标签或"Static route"标签 */
[data-nextjs-scroll-focus-boundary],
[class*="__nextjs"],
[class*="nextjs"],
[title*="Static route"],
[title*="static route"],
[title*="Static Route"] {
  display: none !important;
}

/* 隐藏左下角的标签/chip元素（通常是Next.js开发工具的路由指示器） */
.fixed.bottom-4.left-4[class*="route"],
.fixed.bottom-4.left-4[title*="route"],
body > div:last-child [class*="static"][class*="route"] {
  display: none !important;
}

/* 更通用的隐藏方式：隐藏包含"Static route"文本的元素 */
body *[aria-label*="Static route"],
body *[aria-label*="static route"] {
  display: none !important;
}