/* =========================================
   PERSONA STYLE CHATBOX THEME
   Design: P3 (Day) / P5 (Night)
   ========================================= */

/* 1. 隐藏顶部默认颜色装饰条 (强制) */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* =========================================
   2. 聊天框主体美化 - 通用结构
   ========================================= */
.bg-gray-100\/90.relative.inline-block {
    /* 字体优化 */
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important; /* 加粗以匹配Persona风格 */
    letter-spacing: 0.5px !important;
    
    /* 形状与边框基础 */
    border-radius: 0 !important; /* 去除圆角，采用锐利边缘 */
    box-shadow: 5px 5px 0px rgba(0,0,0,0.3) !important; /* 硬阴影 */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    
    /* 稍微扩充内边距以适应切角 */
    padding: 15px 20px !important;
    
    /* 关键：不规则切角造型 (轻微切割，不影响阅读) */
    clip-path: polygon(
        2% 0%, 100% 0%, 
        100% 95%, 98% 100%, 
        0% 100%, 0% 5%
    ) !important;
}

/* =========================================
   3. 白昼模式样式 (Persona 3 - 蓝/金)
   默认状态 (适用于 Light Mode)
   ========================================= */
.bg-gray-100\/90.relative.inline-block {
    /* P3 影时间风格蓝 */
    background: linear-gradient(135deg, #002B49 0%, #005691 100%) !important;
    /* 月光金边框 */
    border: 2px solid #D4AF37 !important;
    border-left: 6px solid #D4AF37 !important; /* 左侧加粗强调 */
}

/* 白昼模式下的文字颜色 - 强制白色 */
.bg-gray-100\/90.relative.inline-block .markdown-body {
    color: #FFFFFF !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; /* 增加文字立体感 */
}

/* =========================================
   4. 黑夜模式样式 (Persona 5 - 红/黄)
   当 html 或 body 拥有 dark 类时触发
   ========================================= */
html.dark .bg-gray-100\/90.relative.inline-block,
:root[class~="dark"] .bg-gray-100\/90.relative.inline-block {
    /* P5 风格躁动红 */
    background: 
        repeating-linear-gradient(
            45deg,
            #D00000,
            #D00000 10px,
            #B00000 10px,
            #B00000 20px
        ) !important;
    /* 亮黄色装饰 */
    border: 2px solid #000000 !important;
    border-left: 6px solid #FEE834 !important; /* P5黄 */
    box-shadow: 6px 6px 0px #000000 !important;
}

/* 黑夜模式下的文字颜色 - 保持白色高对比 */
html.dark .bg-gray-100\/90.relative.inline-block .markdown-body,
:root[class~="dark"] .bg-gray-100\/90.relative.inline-block .markdown-body {
    color: #FFFFFF !important;
    text-shadow: 2px 2px 0px #000000 !important; /* 黑色硬阴影，漫画感 */
}

/* =========================================
   5. 底部附加元素美化 (按钮、Token等)
   确保在深色背景上清晰可见
   ========================================= */
/* 底部操作按钮 (复制/编辑等) */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #EAEAEA !important;
    font-weight: bold !important;
    opacity: 0.9 !important;
}

/* 模型名称 */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #FFD700 !important; /* 金色文字 */
    font-family: monospace !important;
    text-transform: uppercase !important;
}

/* Token 消耗 */
.text-orange-500 {
    color: #FEE834 !important; /* P5黄 */
    font-weight: 800 !important;
}

/* =========================================
   6. 加载动画替换 (Take Your Heart)
   ========================================= */

/* 隐藏默认的三个点加载动画 */
.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

/* 设置加载动画容器 */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 80px !important;  /* 调整宽度以容纳GIF */
    height: 80px !important; /* 调整高度 */
    overflow: visible !important;
}

/* 插入 GIF */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    
    /* 用户指定的 GIF */
    background-image: url('https://i.postimg.cc/Z5pYPNgG/433c5bba-b893-4601-848f-611ec3d8a2ad-watermark.gif') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    
    /* 确保层级 */
    z-index: 10 !important;
}
/* =========================================
   女神异闻录5 (Persona 5) 风格美化主题
   ========================================= */

/* --- 1. 顶部栏 (Top Bar) --- */
/* 核心背景：使用动态GIF，增加底部粗边框分割 */
.sticky.w-full.top-0.flex.items-center {
    background-image: url('https://i.postimg.cc/htT48m6n/R.gif') !important;
    background-size: cover !important;
    background-position: center !important;
    border-bottom: 4px solid #000 !important;
    box-shadow: 0 4px 0 #e60012 !important; /* 红色阴影 */
}

/* 模型选择器容器：倾斜黑底白字风格 */
#ai-model-selector .group.flex.items-center {
    background-color: #000 !important;
    transform: skewX(-15deg) !important;
    padding: 2px 15px !important;
    border: 2px solid #fff !important;
    box-shadow: 3px 3px 0 #e60012 !important;
}

/* 模型名称：反向倾斜文字以保持直立，高对比度 */
#ai-model-selector .truncate.text-\[13px\] {
    color: #fff !important;
    font-weight: 900 !important;
    font-family: sans-serif !important;
    transform: skewX(15deg) !important; /* 抵消容器倾斜 */
    letter-spacing: 1px !important;
}

/* 下拉箭头：变白 */
#ai-model-selector .shrink-0.flex.items-center svg {
    color: #fff !important;
    transform: skewX(15deg) !important;
}

/* 顶部右侧设置按钮：红底白图标 */
#header-setting-button {
    background-color: #e60012 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    transform: rotate(5deg) !important; /* 俏皮旋转 */
}

/* --- 2. 底部栏输入框 (Bottom Input) --- */
/* 输入框容器：清除默认背景，避免干扰 */
#ai-chat-bottom-input {
    background: transparent !important;
    padding-top: 10px !important;
}

/* 主输入框：黑底白字，锐利边框 */
#ai-chat-input {
    background-color: rgba(0, 0, 0, 0.9) !important;
    border: 3px solid #e60012 !important;
    color: #fff !important;
    border-radius: 0 !important; /* 极其锐利 */
    font-weight: bold !important;
    box-shadow: 5px 5px 0 #333 !important;
}

/* 占位符颜色 */
#ai-chat-input::placeholder {
    color: #aaa !important;
    font-style: italic !important;
}

/* 选中文字效果：红底白字 */
#ai-chat-input::selection {
    background-color: #e60012 !important;
    color: #fff !important;
}

/* --- 3. 底部按钮栏 (Button Bar) --- */
/* 按钮容器背景：透明，不需要额外装饰 */
#ai-mod-button2 {
    background: transparent !important;
}

/* 按钮本体：怪盗风格，倾斜且高对比 */
#ai-mod-button2 button.MuiButton-root {
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 0 !important;
    transform: skewX(-10deg) !important;
    margin: 0 4px !important;
    font-weight: 800 !important;
    transition: all 0.2s ease !important;
}

/* 按钮悬停态：变成P5红 */
#ai-mod-button2 button.MuiButton-root:hover {
    background-color: #e60012 !important;
    color: #000 !important;
    border-color: #000 !important;
    transform: skewX(-10deg) translate(-2px, -2px) !important;
    box-shadow: 4px 4px 0 #000 !important;
}

/* 按钮图标 */
#ai-mod-button2 button.MuiButton-root svg {
    transform: skewX(10deg) !important; /* 修正图标倾斜 */
}

/* --- 4. 分页栏 (Pagination) --- */
/* 分页按钮：黑色方块，旋转效果 */
.MuiPaginationItem-root {
    border-radius: 0 !important;
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
    transform: rotate(-3deg) !important;
    font-weight: bold !important;
    margin: 0 2px !important;
}

/* 选中状态：P5红，放大 */
.MuiPaginationItem-root.Mui-selected {
    background-color: #e60012 !important;
    border-color: #000 !important;
    transform: rotate(3deg) scale(1.1) !important;
    box-shadow: 2px 2px 0 #000 !important;
}

/* 翻页箭头图标颜色 */
.MuiPaginationItem-icon {
    color: #fff !important;
}

/* 跳转输入框容器 */
.MuiStack-root.css-1uwir8f {
    background: #fff !important;
    padding: 2px !important;
    border: 2px solid #000 !important;
    transform: skewX(-10deg) !important;
}
/* 跳转输入框文字 */
.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #000 !important;
    font-weight: bold !important;
}

/* --- 5. 评论区 (Comments Section) --- */
/* 主背景容器：使用用户提供的动态GIF */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-image: url('https://i.postimg.cc/m202FjXB/1769242301387.gif') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important; /* 视差滚动感 */
    border-top: 5px solid #000 !important;
}

/* 顶部标题 "评论(x)"：白底黑字剪报风格 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] > div.text-lg.font-bold {
    background-color: #fff !important;
    color: #000 !important;
    display: inline-block !important;
    padding: 5px 15px !important;
    transform: skewX(-10deg) !important;
    border: 3px solid #000 !important;
    box-shadow: 4px 4px 0 #e60012 !important;
    margin-bottom: 10px !important;
}

/* 评论输入框容器：强烈的黑白对比 */
div.flex.flex-col.border-gray-200 {
    background-color: #fff !important;
    border: 3px solid #000 !important;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.5) !important;
}

/* 输入框本体 */
textarea.rc-textarea {
    background: transparent !important;
    color: #000 !important;
    font-weight: 500 !important;
}

/* 发送按钮：红色突击风格 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background-color: #e60012 !important;
    border-left: 3px solid #000 !important;
}
div.cursor-pointer.group.flex.items-center.justify-center svg {
    color: #fff !important;
}

/* --- 评论列表美化 (关键：确保可读性) --- */
/* 单条评论容器：漫画对话框风格 */
div.group.ml-0 {
    background-color: rgba(255, 255, 255, 0.95) !important; /* 高不透明度白底 */
    border: 2px solid #000 !important;
    margin-bottom: 12px !important;
    padding: 12px !important;
    border-left: 8px solid #e60012 !important; /* 红色左边框 */
    /* 模拟剪纸/漫画格子的不规则感 */
    box-shadow: 4px 4px 0 #000 !important;
    transform: perspective(500px) rotateY(1deg) !important;
    transition: transform 0.2s !important;
}

div.group.ml-0:hover {
    transform: perspective(500px) rotateY(0deg) scale(1.01) !important;
    border-color: #e60012 !important;
    box-shadow: 6px 6px 0 #e60012 !important;
}

/* 用户名：加粗红字 */
div.text-sm.text-grey-600 span.font-bold {
    color: #e60012 !important;
    font-size: 1.1em !important;
    text-transform: uppercase !important;
    background: #000 !important;
    color: #fff !important;
    padding: 0 4px !important;
}

/* 评论内容：纯黑文字，清晰易读 */
div.break-all {
    color: #000 !important;
    font-weight: 600 !important;
    font-family: sans-serif !important;
    line-height: 1.5 !important;
    margin-top: 5px !important;
}

/* 时间戳：灰色 */
div.text-xs.text-grey-600 {
    color: #666 !important;
    font-weight: bold !important;
}

/* 分割线：红色虚线 */
div.style_divider__mW0YX {
    background-color: transparent !important;
    border-bottom: 2px dashed #e60012 !important;
    height: 0 !important;
    margin: 10px 0 !important;
}

/* 排序按钮：黑白切换 */
button.MuiButton-containedPrimary {
    background-color: #e60012 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
}
button.MuiButton-outlinedPrimary {
    color: #000 !important;
    border: 2px solid #000 !important;
    background: #fff !important;
    border-radius: 0 !important;
}
/* --- 全局基础设置 --- */
body {
  font-family: 'Impact', 'Arial Black', sans-serif; /* 选用更粗犷的字体 */
  background-color: #1a1a1a; /* 深灰背景 */
  /* 背景添加动态斜纹理 */
  background-image: repeating-linear-gradient(
    45deg,
    #1a1a1a,
    #1a1a1a 10px,
    #222 10px,
    #222 20px
  );
  color: #fff;
  line-height: 1.5;
  margin: 0;
  padding: 20px;
  overflow-x: hidden; /* 防止倾斜元素撑开横向滚动条 */
}

/* 滚动条 P5化 */
::-webkit-scrollbar {
  width: 12px;
  background: #000;
}
::-webkit-scrollbar-track {
  background: #000;
  border-left: 2px solid #e60012;
}
::-webkit-scrollbar-thumb {
  background: #e60012;
  border: 2px solid #fff;
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: #fff;
}

/* --- 标题样式：剪报与撞色 --- */
h1, h2, h3, h4 {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  transform: skewX(-10deg); /* 整体倾斜 */
  margin-top: 10px;
}

h1 {
  color: #fff;
  background-color: #000;
  padding: 10px 20px;
  border: 3px solid #e60012;
  display: inline-block;
  box-shadow: 5px 5px 0 rgba(0,0,0,0.5);
  font-size: 32px;
  margin-bottom: 25px;
}

h2 {
  color: #000;
  background-color: #e60012; /* 红底黑字 */
  padding: 5px 15px;
  font-size: 24px;
  display: inline-block;
  transform: skewX(-10deg) rotate(-2deg); /* 稍微旋转 */
  border: 2px solid #fff;
}

h3 {
  color: #e60012;
  border-bottom: 3px solid #fff;
  display: inline-block;
  font-size: 20px;
  margin-bottom: 15px;
}

/* --- 核心容器 (Details/气泡框) --- */
/* 这里实现了“右侧带有缩小的图片” */
details {
  background-color: #fff; /* 白底，模拟预告信纸 */
  color: #000; /* 黑字 */
  border: 4px solid #000;
  margin-bottom: 30px;
  padding: 0;
  position: relative;
  transition: all 0.2s ease;
  box-shadow: 8px 8px 0 #e60012; /* 红色硬阴影 */
  transform: rotate(-1deg); /* 整体微调角度 */
  
  /* --- 右侧图片装饰 --- */
  background-image: url('https://i.postimg.cc/m202FjXB/1769242301387.gif');
  background-repeat: no-repeat;
  background-position: right 10px bottom 10px; /* 定位在右下角 */
  background-size: 60px auto; /* 缩小图片尺寸 */
}

details:hover {
  transform: rotate(0deg) scale(1.01);
  box-shadow: 10px 10px 0 #000;
  z-index: 10;
}

details[open] {
  border-color: #e60012;
}

/* Summary (标题栏) */
summary {
  background-color: #000;
  color: #fff;
  padding: 15px 20px;
  cursor: pointer;
  font-weight: 900;
  font-size: 18px;
  list-style: none;
  position: relative;
  transition: all 0.2s ease;
  border-bottom: 3px solid #e60012;
}

summary:hover {
  background-color: #e60012;
  color: #000;
}

/* 自定义箭头 */
summary::after {
  content: "★";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 16px;
}
details[open] summary::after {
  content: "★";
  color: #000;
  transform: translateY(-50%) rotate(180deg);
}

/* 分隔线 */
hr {
  border: none;
  height: 4px;
  background: #000;
  transform: skewX(-20deg);
  width: 95%;
  margin: 20px auto;
}

/* 内容区域 */
details > div {
  padding: 20px;
  /* 确保内容不遮挡右下角的背景图 */
  padding-bottom: 40px; 
  background: rgba(255,255,255,0.9); /* 轻微透明以显示背景图 */
}

/* --- 列表与文字 --- */
ul, ol {
  margin: 10px 0;
  padding-left: 30px;
}
li {
  margin-bottom: 8px;
  font-weight: 700;
}
li::marker {
  color: #e60012;
  font-size: 1.2em;
}
strong {
  color: #e60012;
  background: #000;
  padding: 0 4px;
}
em {
  color: #000;
  font-style: italic;
  font-weight: 900;
  text-decoration: underline decoration-e60012;
}

/* --- 表格样式 --- */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  margin: 15px 0;
  border: 2px solid #000;
  background: #000;
}
th {
  background-color: #e60012;
  color: #fff;
  padding: 10px;
  text-align: left;
  font-weight: 900;
  text-transform: uppercase;
  border: 1px solid #000;
  transform: skewX(-5deg);
}
td {
  padding: 8px;
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
  font-weight: bold;
}
tr:nth-child(even) td {
  background-color: #eee;
}
tr:hover td {
  background-color: #000;
  color: #e60012;
  cursor: crosshair;
}

/* --- 进度条 (HP/SP) --- */
.progress-container {
  background-color: #000;
  border: 2px solid #fff;
  height: 24px;
  margin: 8px 0;
  position: relative;
  transform: skewX(-15deg); /* 强烈的倾斜感 */
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}

.progress-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  position: relative;
}

/* HP: 红色斜纹 */
.progress-bar.hp {
  background: repeating-linear-gradient(
    45deg,
    #c00,
    #c00 10px,
    #e60012 10px,
    #e60012 20px
  );
}
/* SP: 蓝色斜纹 (P5中SP通常也是暖色或蓝，这里保留蓝色作为区分但加深) */
.progress-bar.sp {
  background: repeating-linear-gradient(
    45deg,
    #0033a0,
    #0033a0 10px,
    #0055cc 10px,
    #0055cc 20px
  );
}

/* --- 属性与技能标签 --- */
.stat-rank {
  display: inline-block;
  padding: 2px 8px;
  background-color: #000;
  color: #fff;
  border: 2px solid #e60012;
  font-size: 12px;
  font-weight: 900;
  margin: 0 5px 5px 0;
  transform: skewX(-10deg);
}

.skill {
  display: inline-block;
  padding: 5px 10px;
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  margin: 5px 5px 5px 0;
  font-weight: 800;
  box-shadow: 2px 2px 0 #ccc;
  transition: transform 0.1s;
}
.skill:hover {
  background-color: #e60012;
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 #000;
}

/* 抗性 */
.resistance {
  display: inline-block;
  padding: 4px 8px;
  margin: 0 5px 5px 0;
  font-weight: 900;
  font-size: 12px;
  text-transform: uppercase;
  border: 2px solid #000;
}
.resistance.weak {
  background-color: #000;
  color: #e60012;
  border-color: #e60012;
  animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0.7; } }

.resistance.resist {
  background-color: #ccc;
  color: #000;
}
.resistance.null {
  background-color: #555;
  color: #fff;
  text-decoration: line-through;
}

/* --- 动作按钮 --- */
.action-recommendation {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 20px;
}

.action-btn {
  flex: 1;
  min-width: 150px;
  padding: 15px;
  background-color: #000;
  border: 2px solid #fff;
  color: #fff;
  font-weight: 900;
  text-align: center;
  cursor: pointer;
  transform: skewX(-10deg);
  transition: all 0.1s;
  box-shadow: 4px 4px 0 #e60012;
  text-transform: uppercase;
}

.action-btn:hover {
  background-color: #e60012;
  color: #000;
  border-color: #000;
  transform: skewX(-10deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

/* --- 特殊区块 --- */
.npc-details {
  border-color: #e60012;
}
.npc-details summary {
  background-color: #e60012;
  color: #000;
  border-bottom-color: #000;
}

.memory-palette {
  border-color: #fff;
  background-color: #000;
  color: #fff;
}
.memory-palette summary {
  background-color: #fff;
  color: #000;
}
.memory-palette > div {
  background-color: #111;
  color: #ccc;
}