/* ================================================================
   QBot Web — 全局样式
   这个文件管页面的"外貌"：颜色、大小、阴影、动画等。
   index.html 通过 <link rel="stylesheet" href="styles.css"> 引用它。
   ================================================================ */

/* -------- 背景渐变：页面中央的淡蓝色光晕 -------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 55% 55%, rgba(170, 210, 255, 0.65) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 70% 40%, rgba(150, 195, 255, 0.40) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* -------- 输入框的柔和阴影 -------- */
.input-shadow {
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.04),
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 8px 32px rgba(0, 0, 0, 0.03);
}

/* ================================================================
   发送按钮蓝色主题 —— 当按钮处于 "send"（有文字待发送）状态时，
   按钮背景变为浅蓝色（#e8f0fe），图标变为深蓝色（#1967d2）
   与右上角「升级」按钮的颜色保持一致，视觉语言统一
   ================================================================ */
.action-btn-send {
  background-color: #e8f0fe;  /* 浅蓝色背景 */
  color: #1967d2;             /* 深蓝色文字/图标颜色 */
}
.action-btn-send:hover {
  background-color: #d9e8ff;  /* 鼠标悬浮时稍深一点的蓝 */
}

/* -------- AI Logo 四角星多彩渐变色 -------- */
.ai-logo-gradient {
  background: linear-gradient(135deg, #4285f4, #ea4335, #fbbc04, #34a853);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   侧边栏专用样式
   Tailwind Play CDN 的 @apply 不支持 absolute/opacity/invisible
   等关键类，导致 tooltip 退化为普通行内文字撑破布局。
   以下全部使用原生 CSS 属性。
   ================================================================ */

/* -------- 每个图标按钮的包裹容器（relative 定位，子绝父相） -------- */
.sidebar-btn-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* -------- 图标按钮本体 -------- */
.sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;          /* w-10 */
  height: 2.5rem;         /* h-10 */
  border-radius: 0.75rem; /* rounded-xl */
  color: #6b7280;         /* text-gray-500 */
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.sidebar-btn:hover {
  background-color: #e3e8ef; /* hover:bg-[#e3e8ef] */
  color: #111827;            /* text-gray-900 */
}

/* -------- 通用的黑色 Tooltip（默认隐藏，hover 时淡入）-------- */
.sidebar-tooltip {
  position: absolute;
  left: calc(100% + 12px);   /* left-full + ml-3 */
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 0.375rem 0.625rem; /* px-2.5 py-1.5 */
  border-radius: 0.375rem;    /* rounded-md */
  background-color: #2d2d2d;
  color: #fff;
  font-size: 0.8125rem;       /* text-sm */
  line-height: 1.125rem;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out, transform 0.15s ease-out;
  z-index: 999;
}
.sidebar-btn-wrap:hover .sidebar-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* -------- 用户账号信息卡（更宽，两行文字）-------- */
.account-card {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 0.625rem 0.875rem; /* px-3.5 py-2.5 */
  border-radius: 0.375rem;
  background-color: #2d2d2d;
  color: #fff;
  min-width: 200px;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-out, visibility 0.15s ease-out, transform 0.15s ease-out;
  z-index: 999;
}
.sidebar-btn-wrap:hover .account-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}
/* ================================================================
   输入框滚动条 —— 完全隐藏，但鼠标滚轮仍可滚动
   scrollbar-width: none 在 Firefox 中隐藏滚动条
   ::-webkit-scrollbar 在 Chrome/Safari 中隐藏
   用户用鼠标滚轮即可上下滑动内容，视觉上保持干净
   ================================================================ */
#chat-input {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE/Edge 旧版 */
}
#chat-input::-webkit-scrollbar {
  display: none;               /* Chrome/Safari/Edge 新版 */
}

/* ================================================================
   输入框宽度：强制 1360px，确保不被其他样式覆盖
   ================================================================ */
#input-area .input-bar-width {
  max-width: 816px !important;
}

/* ================================================================
   设置侧栏选项样式
   ================================================================ */
.settings-option {
  transition: all 0.15s ease;
}