@keyframes classUI-magic-shimmer {
0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.88); }
50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes classUI-wand-trace {
0% { transform: translateY(0) rotate(0deg); opacity: 0.8; }
100% { transform: translateY(-5px) rotate(3deg); opacity: 0.3; }
}
div.group.relative > div.relative.inline-block.bg-gray-100\/90 {
background: linear-gradient(135deg, rgba(200, 215, 240, 0.75), rgba(210, 225, 245, 0.72));
color: #2a2a2a;
border-radius: 18px;
border: 1px solid rgba(230, 210, 175, 0.6);
box-shadow: 0 16px 60px -12px rgba(230, 210, 175, 0.4), inset 0 2px 4px rgba(220, 235, 250, 0.3), 0 0 0 2px rgba(220, 200, 170, 0.45);
backdrop-filter: blur(28px) saturate(160%);
-webkit-backdrop-filter: blur(28px) saturate(160%);
position: relative;
overflow: hidden;
}
div.group.relative > div.relative.inline-block.bg-gray-100\/90::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle at 2px 2px, rgba(250, 240, 215, 0.2) 1px, transparent 0);
background-size: 30px 30px;
opacity: 0.7;
pointer-events: none;
z-index: 0;
}
div.group.relative > div.relative.inline-block.bg-gray-100\/90::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(250, 240, 215, 0.22) 0%, transparent 50%);
transform: translate(-50%, -50%);
animation: classUI-magic-shimmer 9s infinite ease-in-out;
z-index: 0;
pointer-events: none;
}
.styled-prose-container {
font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', 'Georgia', serif;
position: relative;
z-index: 1;
}
.styled-prose-container details {
background: linear-gradient(145deg, rgba(210, 225, 245, 0.55), rgba(200, 215, 240, 0.45));
border-radius: 10px;
margin: 14px 0;
overflow: hidden;
border: 1px solid rgba(230, 210, 175, 0.55);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(230, 245, 255, 0.35), inset 0 -1px 0 rgba(220, 200, 170, 0.4);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 15px;
line-height: 1.9;
padding: 0 22px 18px 22px;
color: #2a2a2a;
}
.styled-prose-container details:hover {
transform: translateY(-2px) scale(1.008);
box-shadow: 0 8px 25px rgba(230, 210, 175, 0.45), inset 0 1px 1px rgba(230, 245, 255, 0.35), inset 0 -1px 0 rgba(220, 200, 170, 0.4);
border-color: rgba(240, 220, 190, 0.7);
}
.styled-prose-container details summary {
background: transparent;
padding: 16px 50px 16px 22px;
margin: 0 -22px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
color: #1a1a1a;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
letter-spacing: 1px;
position: relative;
list-style: none;
border-bottom: 1px solid rgba(230, 210, 175, 0.5);
transition: all 0.3s ease;
}
.styled-prose-container details summary::-webkit-details-marker {
display: none;
}
.styled-prose-container details summary::before {
content: '✦';
position: absolute;
right: 22px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: rgba(180, 140, 80, 0.9);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}
.styled-prose-container details[open] > summary::before {
transform: translateY(-50%) rotate(180deg);
}
.styled-prose-container details summary:hover::before {
color: #a0752d;
}
.styled-prose-container details[open] > summary {
background: linear-gradient(180deg, rgba(230, 210, 175, 0.28), transparent);
border-bottom-color: rgba(240, 220, 190, 0.7);
color: #0a0a0a;
padding-top: 18px;
margin-bottom: 18px;
}
.styled-prose-container details > *:not(summary) {
padding: 0;
line-height: inherit;
font-size: inherit;
color: inherit;
background: transparent;
}
.classUI-story {
background: linear-gradient(145deg, rgba(215, 230, 250, 0.6), rgba(205, 220, 245, 0.5));
border: 1px solid rgba(230, 210, 175, 0.5);
border-radius: 12px;
padding: 24px 28px;
margin: 20px 0;
color: #2a2a2a;
font-size: 15px;
line-height: 2;
box-shadow: inset 0 2px 8px rgba(180, 195, 230, 0.2), 0 0 0 1px rgba(220, 200, 170, 0.45);
position: relative;
letter-spacing: 0.3px;
}
.classUI-story::before, .classUI-story::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-color: rgba(180, 140, 80, 0.75);
border-style: solid;
transition: all 0.4s ease;
}
.classUI-story::before {
top: 8px;
left: 8px;
border-width: 2px 0 0 2px;
border-top-left-radius: 3px;
}
.classUI-story::after {
bottom: 8px;
right: 8px;
border-width: 0 2px 2px 0;
border-bottom-right-radius: 3px;
}
.classUI-story:hover::before, .classUI-story:hover::after {
transform: scale(1.15);
border-color: #a0752d;
}
.classUI-subsection {
font-weight: 700;
color: #1a1a1a;
margin: 16px 0 10px 0;
padding-bottom: 8px;
border-bottom: 1px solid rgba(230, 210, 175, 0.5);
font-size: 16px;
letter-spacing: 0.8px;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.classUI-npc-card {
background: rgba(220, 235, 250, 0.6);
border: 1px solid rgba(230, 210, 175, 0.45);
border-radius: 8px;
padding: 16px;
margin: 10px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.classUI-npc-card:hover {
background: rgba(225, 240, 255, 0.7);
border-color: rgba(240, 220, 190, 0.6);
box-shadow: 0 4px 12px rgba(230, 210, 175, 0.35);
}
.classUI-npc-name {
font-size: 17px;
font-weight: 700;
color: #8b6914;
margin-bottom: 12px;
padding-bottom: 10px;
border-bottom: 2px solid rgba(240, 220, 190, 0.55);
letter-spacing: 0.8px;
}
.classUI-memory {
background: rgba(210, 225, 245, 0.6);
border-color: rgba(240, 220, 190, 0.65);
padding-bottom: 0;
}
.classUI-memory-section {
margin: 0 0 18px 0;
padding: 0;
background: transparent;
border: none;
}
.classUI-table {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
border-radius: 6px;
overflow: hidden;
border: 1px solid rgba(230, 210, 175, 0.5);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.classUI-table thead th {
background: linear-gradient(160deg, rgba(225, 240, 255, 0.8), rgba(215, 230, 250, 0.65));
color: #1a1a1a;
padding: 14px 10px;
font-weight: 700;
font-size: 13px;
text-align: center;
border-bottom: 2px solid rgba(240, 220, 190, 0.7);
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.classUI-table tbody td {
padding: 12px 10px;
border-bottom: 1px solid rgba(220, 200, 170, 0.5);
background: rgba(215, 230, 250, 0.65);
font-size: 13px;
color: #2a2a2a;
vertical-align: middle;
transition: background-color 0.3s ease;
}
.classUI-table tbody tr:last-child td {
border-bottom: none;
}
.classUI-table tbody tr:hover td {
background: rgba(225, 240, 255, 0.75);
}
.classUI-actions {
background: linear-gradient(180deg, rgba(210, 225, 245, 0.6), rgba(205, 220, 245, 0.5));
border: 1px solid rgba(230, 210, 175, 0.6);
border-radius: 10px;
padding: 18px 22px;
margin-top: 18px;
color: #1a1a1a;
font-weight: 600;
font-size: 15px;
line-height: 1.9;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
letter-spacing: 0.3px;
}
.styled-prose-container br {
line-height: 1.2;
}
.sticky.w-full.top-0.flex.items-center {
background: rgba(200, 215, 240, 0.85) !important;
border-bottom: 1px solid rgba(230, 210, 175, 0.6) !important;
backdrop-filter: blur(28px) saturate(160%) !important;
-webkit-backdrop-filter: blur(28px) saturate(160%) !important;
height: 3.1rem !important;
color: #2a2a2a !important;
font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
font-weight: 600 !important;
z-index: 10 !important;
padding-top: max(0px, env(safe-area-inset-top)) !important;
height: calc(3.5rem + max(0px, env(safe-area-inset-top))) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.sticky.w-full.top-0.flex.items-center .inline-flex.items-center {
background: rgba(230, 210, 175, 0.28) !important;
color: #1a1a1a !important;
border: 1px solid rgba(230, 210, 175, 0.5) !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em;
border-radius: 6px;
box-shadow: inset 0 0 4px rgba(250, 240, 215, 0.3);
}
#ai-model-selector .group {
background: rgba(215, 230, 250, 0.7) !important;
border: 1px solid rgba(220, 200, 170, 0.65) !important;
border-radius: 8px !important;
padding: 0 8px !important;
height: 2rem !important;
transition: all 0.3s ease;
}
#ai-model-selector .group:hover {
border-color: rgba(230, 210, 175, 0.85) !important;
box-shadow: 0 0 8px rgba(250, 240, 215, 0.4);
background: rgba(220, 235, 255, 0.8) !important;
}
#ai-model-selector .truncate {
font-size: 13px !important;
font-weight: 600 !important;
color: #2a2a2a !important;
font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
transition: color 0.3s ease;
}
#ai-model-selector .group:hover .truncate {
color: #1a1a1a !important;
}
#ai-model-selector svg {
color: #2a2a2a !important;
transition: color 0.3s ease;
}
#ai-model-selector .group:hover svg {
color: #1a1a1a !important;
}
#header-setting-button {
border-radius: 8px !important;
background: rgba(215, 230, 250, 0.7) !important;
border: 1px solid rgba(220, 200, 170, 0.65) !important;
transition: all 0.3s ease;
}
#header-setting-button:hover {
border-color: rgba(230, 210, 175, 0.85) !important;
box-shadow: 0 0 8px rgba(250, 240, 215, 0.4);
background: rgba(220, 235, 255, 0.8) !important;
}
#header-setting-button svg {
color: #2a2a2a !important;
}
.p-\[5\.5px\].max-h-\[150px\] {
background: rgba(200, 215, 240, 0.8) !important;
border: 1.5px solid rgba(230, 210, 175, 0.6) !important;
border-radius: 14px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
padding: 6px !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
width: auto !important;
max-width: 95% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 纯 CSS 自适应高度（含移动端），不改变你原有视觉样式 */
#ai-chat-input {
  background: rgba(210, 225, 245, 0.8) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(220, 200, 170, 0.7) !important;
  font-family: "Georgia", "Noto Sans SC", "Microsoft YaHei", serif !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: #2a2a2a !important;
  caret-color: #8b6914 !important;
  padding: 10px 44px 10px 10px !important;
  height: auto !important;
  max-height: 120px !important;
  resize: none !important;
  outline: none !important;
  transition: all 0.3s ease;

  /* 关键：纯 CSS 自动增高（现代移动端/桌面均支持） */
  field-sizing: content !important;
  /* 兼容实现与移动端体验增强（不改视觉） */
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-text-size-adjust: 100% !important;
  overflow-y: auto !important;                /* 超出时滚动（iOS/Android） */
  -webkit-overflow-scrolling: touch !important;/* iOS 惯性滚动 */
  white-space: pre-wrap !important;            /* 与 textarea 默认一致，确保换行 */
  word-break: break-word !important;
}

/* 占位符颜色 */
#ai-chat-input::placeholder {
  color: rgba(42, 42, 42, 0.5) !important;
}

/* 聚焦态 */
#ai-chat-input:focus {
  border-color: #a0752d !important;
  box-shadow: 0 0 8px rgba(160, 117, 45, 0.4) !important;
  background: rgba(215, 230, 250, 0.85) !important;
}

/* 父容器内的计数器与分隔条（保持你原样式语义） */
.p-\[5\.5px\]\.max-h-\[150px\] .flex.items-center.px-1 {
  background: rgba(230, 210, 175, 0.28) !important;
  color: #1a1a1a !important;
  border-radius: 6px !important;
  border: 1px solid rgba(230, 210, 175, 0.45) !important;
}
.p-\[5\.5px\]\.max-h-\[150px\] .mx-1 {
  background: rgba(230, 210, 175, 0.45) !important;
}

/* 回退：不支持 field-sizing 的浏览器保持当前样式与滚动，不做视觉改动 */
@supports not (field-sizing: content) {
  #ai-chat-input { /* 已设置 overflow-y:auto; 这里无需额外改动以避免视觉变化 */ }
}

#ai-send-button {
border-radius: 8px !important;
background: rgba(215, 230, 250, 0.7) !important;
border: 1px solid rgba(220, 200, 170, 0.65) !important;
transition: all 0.3s ease;
}
#ai-send-button:hover {
background: rgba(230, 210, 175, 0.4) !important;
border-color: rgba(230, 210, 175, 0.85) !important;
box-shadow: 0 0 8px rgba(250, 240, 215, 0.4);
}
#ai-send-button svg {
color: #2a2a2a !important;
transition: color 0.3s ease;
}
#ai-send-button:hover svg {
color: #1a1a1a !important;
}
.style_dot-flashing__8L91Q {
display: none !important;
}
div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq) {
width: 100% !important;
height: auto !important;
min-height: 80px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
background: linear-gradient(135deg, rgba(200, 215, 240, 0.88), rgba(205, 220, 245, 0.9)) !important;
border: 1px solid rgba(230, 210, 175, 0.5) !important;
border-radius: 16px !important;
backdrop-filter: blur(24px) !important;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(230, 245, 255, 0.4) !important;
position: relative !important;
overflow: hidden !important;
}
div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::before {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 60px !important;
height: 60px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cdefs%3E%3ClinearGradient id='wandGrad' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23a0752d'%3E%3Canimate attributeName='stop-color' values='%23a0752d;%23b88b3d;%238b6914;%23a0752d' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%238b6914'%3E%3Canimate attributeName='stop-color' values='%238b6914;%23a0752d;%23b88b3d;%238b6914' dur='3s' repeatCount='indefinite'/%3E%3C/stop%3E%3C/linearGradient%3E%3CradialGradient id='sparkGrad'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='1'/%3E%3Cstop offset='100%25' stop-color='%23a0752d' stop-opacity='0.6'/%3E%3C/radialGradient%3E%3Cfilter id='wandGlow'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(60,60)'%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;360' dur='6s' repeatCount='indefinite'/%3E%3Ccircle cx='0' cy='-30' r='2' fill='%23a0752d' opacity='0.95'%3E%3Canimate attributeName='opacity' values='0.95;0.6;0.95' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='21' cy='-21' r='1.5' fill='%23b88b3d' opacity='0.85'/%3E%3Ccircle cx='30' cy='0' r='2' fill='%238b6914' opacity='0.95'%3E%3Canimate attributeName='opacity' values='0.6;0.95;0.6' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='21' cy='21' r='1.5' fill='%23a0752d' opacity='0.85'/%3E%3Ccircle cx='0' cy='30' r='2' fill='%23b88b3d' opacity='0.95'%3E%3Canimate attributeName='opacity' values='0.95;0.6;0.95' dur='1.5s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='-21' cy='21' r='1.5' fill='%238b6914' opacity='0.85'/%3E%3Ccircle cx='-30' cy='0' r='2' fill='%23a0752d' opacity='0.95'%3E%3Canimate attributeName='opacity' values='0.6;0.95;0.6' dur='1.5s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='-21' cy='-21' r='1.5' fill='%23b88b3d' opacity='0.85'/%3E%3C/g%3E%3Cpath d='M 0,-8 L 2,-40 L 0,-45 L -2,-40 Z' fill='url(%23wandGrad)' filter='url(%23wandGlow)' opacity='1'/%3E%3Ccircle cx='0' cy='0' r='8' fill='url(%23sparkGrad)' opacity='1'%3E%3Canimate attributeName='r' values='6;10;6' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='1;0.75;1' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;-360' dur='8s' repeatCount='indefinite'/%3E%3Cpath d='M 0,-20 L 2,-15 L 0,-10' stroke='%23a0752d' stroke-width='1' fill='none' opacity='0.75'/%3E%3Cpath d='M 14,-14 L 11,-11 L 7,-7' stroke='%23b88b3d' stroke-width='1' fill='none' opacity='0.75'/%3E%3Cpath d='M 20,0 L 15,2 L 10,0' stroke='%238b6914' stroke-width='1' fill='none' opacity='0.75'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
filter: drop-shadow(0 0 10px rgba(160, 117, 45, 0.5)) !important;
}
div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::after {
content: 'Casting Spell...' !important;
position: absolute !important;
bottom: 16px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-family: "Cinzel", "Georgia", "Microsoft YaHei", serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #8b6914 !important;
letter-spacing: 0.2em !important;
animation: wand-glow 2.5s ease-in-out infinite alternate !important;
text-shadow: 0 0 8px rgba(160, 117, 45, 0.5) !important;
}
@keyframes wand-glow {
0% {
opacity: 0.85;
text-shadow: 0 0 6px rgba(160, 117, 45, 0.45);
}
50% {
opacity: 0.97;
text-shadow: 0 0 10px rgba(160, 117, 45, 0.6);
}
100% {
opacity: 1;
text-shadow: 0 0 14px rgba(160, 117, 45, 0.7), 0 0 20px rgba(160, 117, 45, 0.45);
}
}
.mb-2 > .shrink-0.w-10.h-10 {
    display: none;
}
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
background: rgba(210, 225, 245, 0.8) !important;
border: 1px solid rgba(230, 210, 175, 0.55) !important;
border-radius: 8px !important;
padding: 6px 12px !important;
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 0 12px !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
margin-top: 4px !important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2 {
color: #1a1a1a !important;
font-weight: 600 !important;
font-size: 14px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2::after {
content: '显示消耗' !important;
background: rgba(230, 210, 175, 0.28) !important;
color: #8b6914 !important;
border: 1px solid rgba(230, 210, 175, 0.45) !important;
border-radius: 4px !important;
padding: 2px 8px !important;
font-size: 12px !important;
margin-left: 10px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
font-weight: 600 !important;
white-space: nowrap;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover::after {
background: rgba(160, 117, 45, 0.92) !important;
border-color: rgba(160, 117, 45, 0.7) !important;
color: #ffffff !important;
box-shadow: 0 0 8px rgba(160, 117, 45, 0.5) !important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-1x48u03 {
color: #a0752d !important;
font-size: 13px !important;
font-weight: 600 !important;
margin: 0 !important;
padding: 2px 6px !important;
background: rgba(160, 117, 45, 0.15) !important;
border-radius: 4px !important;
opacity: 0 !important;
max-width: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
transition: opacity 0.3s ease, max-width 0.4s ease, padding 0.4s ease !important;
}
.MuiStack-root.css-1kz283j > p.MuiTypography-root.css-6c0gf2:hover ~ p.MuiTypography-root.css-1x48u03 {
opacity: 1 !important;
max-width: 200px !important;
}
@media (max-width: 768px) {
.styled-prose-container details {
font-size: 14px;
line-height: 1.8;
padding: 0 16px 14px 16px;
}
.styled-prose-container details summary {
padding: 14px 45px 14px 16px;
margin: 0 -16px;
font-size: 15px;
}
.styled-prose-container details[open] > summary {
padding-top: 16px;
margin-bottom: 16px;
}
.classUI-table tbody td, .classUI-table thead th {
font-size: 12px;
padding: 10px 8px;
}
.classUI-story {
font-size: 15px;
padding: 20px 22px;
}
.classUI-npc-card {
padding: 14px;
}
.classUI-actions {
font-size: 14px;
padding: 16px 18px;
}
.classUI-subsection {
font-size: 15px;
}
}
think {
  display: none !important;
}
/* ============================================
   【新增】底部栏外层背景美化
   ============================================ */
.bg-gradient-to-t {
  background: linear-gradient(
    to top,
    rgba(200, 215, 240, 0.95) 0%,
    rgba(205, 220, 245, 0.85) 40%,
    rgba(210, 225, 250, 0.6) 70%,
    transparent 100%
  ) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
}

/* ============================================
   【新增】分页栏美化
   ============================================ */

/* 分页按钮通用样式 */
.MuiPaginationItem-root {
  background: rgba(215, 230, 250, 0.7) !important;
  border: 1px solid rgba(220, 200, 170, 0.6) !important;
  border-radius: 8px !important;
  color: #2a2a2a !important;
  font-weight: 600 !important;
  font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
  transition: all 0.3s ease !important;
  min-width: 32px !important;
  height: 32px !important;
}

.MuiPaginationItem-root:hover {
  background: rgba(225, 240, 255, 0.85) !important;
  border-color: rgba(230, 210, 175, 0.85) !important;
  box-shadow: 0 0 8px rgba(250, 240, 215, 0.5) !important;
  color: #1a1a1a !important;
}

/* 当前选中页码 */
.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg, rgba(230, 210, 175, 0.6), rgba(240, 220, 190, 0.5)) !important;
  border-color: rgba(180, 140, 80, 0.7) !important;
  color: #8b6914 !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(180, 140, 80, 0.3), inset 0 1px 2px rgba(255, 255, 255, 0.4) !important;
}

.MuiPaginationItem-root.Mui-selected:hover {
  background: linear-gradient(135deg, rgba(240, 220, 190, 0.7), rgba(250, 230, 200, 0.6)) !important;
  border-color: #a0752d !important;
}

/* 禁用状态 */
.MuiPaginationItem-root.Mui-disabled {
  background: rgba(200, 215, 240, 0.4) !important;
  border-color: rgba(220, 200, 170, 0.3) !important;
  color: rgba(42, 42, 42, 0.35) !important;
  opacity: 1 !important;
}

/* 翻页箭头图标 */
.MuiPaginationItem-icon {
  color: inherit !important;
  transition: transform 0.2s ease !important;
}

.MuiPaginationItem-root:hover .MuiPaginationItem-icon {
  transform: scale(1.15) !important;
}

/* 跳转输入区域容器 */
.MuiStack-root.css-1uwir8f {
  background: rgba(210, 225, 245, 0.6) !important;
  border: 1px solid rgba(220, 200, 170, 0.5) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
}

/* 跳转区域文字 */
.MuiStack-root.css-1uwir8f .MuiBox-root {
  color: #2a2a2a !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', Arial, sans-serif !important;
}

/* 跳转输入框 */
.MuiInputBase-input {
  background: rgba(220, 235, 250, 0.8) !important;
  border: 1px solid rgba(220, 200, 170, 0.6) !important;
  border-radius: 6px !important;
  color: #2a2a2a !important;
  font-weight: 600 !important;
  text-align: center !important;
  caret-color: #8b6914 !important;
  transition: all 0.3s ease !important;
}

.MuiInputBase-input:focus {
  border-color: #a0752d !important;
  box-shadow: 0 0 6px rgba(160, 117, 45, 0.4) !important;
  background: rgba(225, 240, 255, 0.9) !important;
  outline: none !important;
}

/* ============================================
   【新增】输入框移动端适配增强
   ============================================ */
@media (max-width: 768px) {
  /* 输入框容器移动端优化 */
  #ai-chat-bottom-input {
    padding: 4px !important;
  }

  .p-\[5\.5px\].max-h-\[150px\] {
    max-width: 98% !important;
    border-radius: 12px !important;
    padding: 5px !important;
  }

  /* 输入框移动端自动撑大 */
  #ai-chat-input {
    font-size: 16px !important; /* 防止iOS自动缩放 */
    line-height: 1.5 !important;
    padding: 12px 44px 12px 12px !important;
    min-height: 44px !important; /* 触摸友好最小高度 */
    max-height: 150px !important; /* 移动端允许更大高度 */
    border-radius: 10px !important;
    /* 增强触摸滚动体验 */
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
  }

  #ai-chat-input:focus {
    box-shadow: 0 0 0 3px rgba(160, 117, 45, 0.25), 0 0 8px rgba(160, 117, 45, 0.3) !important;
  }

  #ai-chat-input::placeholder {
    font-size: 15px !important;
  }

  /* 发送按钮移动端优化 */
  #ai-send-button {
    min-width: 40px !important;
    min-height: 40px !important;
  }

  /* 分页栏移动端适配 */
  .MuiPaginationItem-root {
    min-width: 28px !important;
    height: 28px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
  }

  .MuiStack-root.css-1uwir8f {
    padding: 3px 8px !important;
  }

  .MuiStack-root.css-1uwir8f .MuiBox-root {
    font-size: 12px !important;
  }

  .MuiInputBase-input {
    font-size: 14px !important;
    min-width: 40px !important;
  }
}

/* 超小屏幕额外适配 (iPhone SE等) */
@media (max-width: 375px) {
  #ai-chat-input {
    padding: 10px 40px 10px 10px !important;
  }

  .MuiPaginationItem-root {
    min-width: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
  }
}
/* === 隐藏特定背景元素 === */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none;
}