/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ========================================
   腾讯体字体 - 用于品牌 Logo
   ======================================== */
@font-face {
  font-family: 'TencentSans';
  src: url("/fonts/TencentSans.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 品牌 Logo 字体样式 */
.font-brand {
  font-family: 'TencentSans', -apple-system, 'system-ui', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 0.5px;
}

/* Sidebar CSS Variables */
:root {
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
  --sidebar-width-mobile: 18rem;
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-fade-out {
  animation: fade-out 0.3s ease-out forwards;
}

/* ========================================
   自定义滚动条 - 悬停显示
   用于侧边栏历史对话等区域
   ======================================== */

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

.scrollbar-hidden::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

/* 悬停时显示的细滚动条 */
.scrollbar-hover {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.2s ease;
}

.scrollbar-hover:hover {
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
}

/* Chrome/Safari/Edge */
.scrollbar-hover::-webkit-scrollbar {
  width: 4px;
}

.scrollbar-hover::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-hover::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
  transition: background 0.2s ease;
}

.scrollbar-hover:hover::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
}

.scrollbar-hover::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* ========================================
   AI Thinking 指示器 - 脉冲光球 + 流光文字
   用于聊天消息流式输出等待状态
   ======================================== */

/* --- 光球呼吸动画 --- */
@keyframes orb-breathe {
  0%, 100% {
    transform: scale(0.85);
    opacity: 0.65;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.3);
  }
  50% {
    transform: scale(1.25);
    opacity: 1;
    box-shadow: 0 0 18px rgba(52, 211, 153, 0.7), 0 0 40px rgba(52, 211, 153, 0.2);
  }
}

/* --- 光球辉光动画 --- */
@keyframes orb-glow {
  0%, 100% { transform: scale(0.8); opacity: 0.15; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* --- 涟漪扩散动画 --- */
@keyframes orb-ripple {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(3); opacity: 0; }
}

/* --- 流光文字动画 --- */
@keyframes shimmer-flow {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.ai-thinking {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}

/* 光球容器 */
.thinking-orb {
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

/* 光球核心 */
.thinking-orb-core {
  border-radius: 50%;
  background: linear-gradient(135deg, #34d399 0%, #10b981 50%, #6ee7b7 100%);
  animation: orb-breathe 2s ease-in-out infinite;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}

/* 光球辉光 */
.thinking-orb-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52, 211, 153, 0.45) 0%, rgba(52, 211, 153, 0.1) 40%, transparent 70%);
  animation: orb-glow 2s ease-in-out infinite;
  z-index: 1;
}

/* 涟漪波纹 */
.thinking-orb-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(52, 211, 153, 0.5);
  animation: orb-ripple 2.4s ease-out infinite;
  z-index: 0;
}

.thinking-orb-ripple-2 {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(52, 211, 153, 0.35);
  animation: orb-ripple 2.4s ease-out infinite;
  animation-delay: 0.8s;
  z-index: 0;
}

/* 流光文字 */
.shimmer-text {
  font-weight: 500;
  background: linear-gradient(
    90deg,
    #059669 0%,
    #6ee7b7 20%,
    #34d399 40%,
    #6ee7b7 60%,
    #059669 80%,
    #6ee7b7 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-flow 2.5s linear infinite;
}

/* 尺寸变体 */
.ai-thinking-xs .thinking-orb { width: 10px; height: 10px; }
.ai-thinking-xs .thinking-orb-core { width: 10px; height: 10px; }
.ai-thinking-xs .shimmer-text { font-size: 12px; }

.ai-thinking-sm .thinking-orb { width: 14px; height: 14px; }
.ai-thinking-sm .thinking-orb-core { width: 14px; height: 14px; }
.ai-thinking-sm .shimmer-text { font-size: 13px; }

.ai-thinking-md .thinking-orb { width: 18px; height: 18px; }
.ai-thinking-md .thinking-orb-core { width: 18px; height: 18px; }
.ai-thinking-md .shimmer-text { font-size: 14px; }