/* =========================================================
   Amber Gold Luxe / 琥珀金边奢华版
   目标：更显高级、更亮眼，但仍保证清晰可读
========================================================= */

.sticky.w-full.top-0.flex.items-center,
.bg-gradient-to-t,
#ai-chat-bottom-input,
#ai-mod-button2 button.MuiButton-root,
#ai-model-selector .group.flex.items-center,
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
}

/* ========== 顶部栏：更深一点的琥珀金边 ========== */
.sticky.w-full.top-0.flex.items-center {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, 0.60) 0 2px, transparent 2.3px),
    radial-gradient(circle at 22% 16%, rgba(214, 153, 58, 0.18) 0 2px, transparent 2.2px),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.42) 0 2px, transparent 2.4px),
    linear-gradient(180deg, rgba(255, 247, 228, 0.98), rgba(240, 214, 173, 0.94)) !important;
  color: #4b341d !important;
  border-bottom: 1px solid rgba(152, 104, 34, 0.22) !important;
  box-shadow:
    0 12px 30px rgba(96, 63, 18, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 顶部交互块：金边 + 轻微浮雕感 */
#ai-model-selector .group.flex.items-center,
#header-setting-button,
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(248, 235, 209, 0.96)) !important;
  border: 1px solid rgba(152, 104, 34, 0.26) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 18px rgba(96, 63, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.70) !important;
  color: #4b341d !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

#ai-model-selector .group.flex.items-center:hover,
#header-setting-button:hover,
.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
  background:
    linear-gradient(180deg, rgba(255, 250, 239, 1), rgba(243, 221, 179, 0.98)) !important;
  border-color: rgba(152, 104, 34, 0.40) !important;
  box-shadow:
    0 14px 28px rgba(96, 63, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  transform: translateY(-1px);
}

#ai-model-selector .truncate.text-\[13px\] {
  color: #4b341d !important;
  font-weight: 800 !important;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68);
}

#ai-model-selector .shrink-0.flex.items-center svg,
#header-setting-button svg,
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2,
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]),
.sticky.w-full.top-0 svg.lucide-clock-8 {
  color: #9b6820 !important;
  fill: #9b6820 !important;
  stroke: #9b6820 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background: linear-gradient(180deg, #ffd46b, #cc8a19) !important;
  box-shadow: 0 0 0 2px rgba(255, 247, 228, 0.98) !important;
}

/* ========== 开场白选择器：更像抛光金属 ========== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"],
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]) {
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(247, 233, 208, 0.97)) !important;
  border: 1px solid rgba(152, 104, 34, 0.22) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 20px rgba(96, 63, 18, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover,
div.h-9.rounded-md.cursor-pointer.group:has(svg[data-icon="SlidersH"]):hover {
  border-color: rgba(152, 104, 34, 0.40) !important;
  box-shadow:
    0 12px 24px rgba(96, 63, 18, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.74) !important;
  transform: translateY(-1px);
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #9b6820 !important;
  fill: #9b6820 !important;
  stroke: #9b6820 !important;
}

/* ========== 底部输入栏：琥珀奶咖 + 金边焦点感 ========== */
#ai-chat-bottom-input {
  background:
    radial-gradient(circle at 16px 18px, rgba(191, 124, 35, 0.10) 0 2px, transparent 2.2px),
    radial-gradient(circle at 48px 20px, rgba(255, 255, 255, 0.52) 0 1.5px, transparent 1.7px),
    linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(247, 232, 206, 0.97)) !important;
  border: 1px solid rgba(152, 104, 34, 0.26) !important;
  border-radius: 20px !important;
  box-shadow:
    0 14px 32px rgba(96, 63, 18, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  color: #4b341d !important;
}

#ai-chat-bottom-input:focus-within {
  border-color: rgba(175, 120, 37, 0.45) !important;
  box-shadow:
    0 16px 36px rgba(96, 63, 18, 0.14),
    0 0 0 1px rgba(224, 171, 72, 0.22) !important;
}

/* ========== 输入框 ========== */
#ai-chat-input {
  background: transparent !important;
  color: #452f18 !important;
  caret-color: #b97a1f !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

#ai-chat-input::placeholder {
  color: rgba(97, 71, 37, 0.56) !important;
}

#ai-chat-input::selection {
  background: rgba(216, 159, 61, 0.40) !important;
  color: #33220f !important;
}

/* ========== 底部按钮：更像抛光金属徽章 ========== */
#ai-mod-button2 button.MuiButton-root {
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 1), rgba(242, 221, 180, 0.98)) !important;
  color: #4b341d !important;
  border: 1px solid rgba(152, 104, 34, 0.28) !important;
  border-radius: 999px !important;
  box-shadow:
    0 10px 22px rgba(96, 63, 18, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  text-transform: none !important;
  font-weight: 800 !important;
  letter-spacing: 0.15px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
  background:
    linear-gradient(180deg, rgba(255, 248, 226, 1), rgba(238, 209, 155, 0.98)) !important;
  border-color: rgba(152, 104, 34, 0.42) !important;
  box-shadow:
    0 14px 28px rgba(96, 63, 18, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
  transform: translateY(-1px);
}

#ai-mod-button2 button.MuiButton-root:active {
  transform: translateY(0) scale(0.99);
}

#ai-mod-button2 button.MuiButton-root svg {
  color: #9b6820 !important;
  fill: #9b6820 !important;
  stroke: #9b6820 !important;
}

/* ========== 可选：金边高光细节（更奢华，但不影响可读性） ========== */
/*
#ai-mod-button2 button.MuiButton-root::before,
#header-setting-button::before,
#ai-model-selector .group.flex.items-center::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(120deg,
      rgba(255, 255, 255, 0.00) 0%,
      rgba(255, 255, 255, 0.26) 18%,
      rgba(255, 255, 255, 0.05) 36%,
      rgba(255, 255, 255, 0.00) 56%);
}
*/

#header-setting-button,
#ai-model-selector .group.flex.items-center,
#ai-mod-button2 button.MuiButton-root {
  position: relative;
}

/* =========================
   状态栏：表格样式 / 琥珀金格纹
   仅覆盖视觉，不改布局
========================= */

.bg-gradient-to-t {
  background-color: #f7ecd5 !important;
  color: #4b341d !important;
  border-top: 1px solid rgba(152, 104, 34, 0.24) !important;
  box-shadow:
    0 -10px 28px rgba(96, 63, 18, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  background-image:
    /* 顶部高光带 */
    linear-gradient(180deg, rgba(255, 252, 246, 0.92), rgba(255, 252, 246, 0.20) 18%, transparent 38%),
    /* 横向表格线 */
    repeating-linear-gradient(
      to bottom,
      rgba(152, 104, 34, 0.14) 0 1px,
      transparent 1px 38px
    ),
    /* 纵向表格线 */
    repeating-linear-gradient(
      to right,
      rgba(152, 104, 34, 0.10) 0 1px,
      transparent 1px 120px
    ),
    /* 底色渐变 */
    linear-gradient(180deg, rgba(255, 249, 236, 0.98), rgba(240, 219, 180, 0.96)) !important;
  background-blend-mode: normal, normal, normal, normal !important;
}

/* 状态栏内文字 / 图标统一更清晰 */
.bg-gradient-to-t,
.bg-gradient-to-t * {
  color: #4b341d !important;
}

.bg-gradient-to-t svg {
  color: #9b6820 !important;
  fill: #9b6820 !important;
  stroke: #9b6820 !important;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
}

/* 可选：如果状态栏里有若干文本块，轻微像“单元格” */
.bg-gradient-to-t > * {
  background: rgba(255, 251, 243, 0.18) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}