/* ═══ B平台表格修正（自动注入）═══ */
.rili-markdown-renderer table {
    display: table !important;
    table-layout: auto !important;
    width: 100% !important;
    border-collapse: collapse !important;
}
.rili-markdown-renderer table caption {
    display: table-caption !important;
    caption-side: top !important;
    text-align: center !important;
    padding: 8px !important;
}
.rili-markdown-renderer thead { display: table-header-group !important; }
.rili-markdown-renderer tbody { display: table-row-group !important; }
.rili-markdown-renderer tr { display: table-row !important; }
.rili-markdown-renderer th,
.rili-markdown-renderer td {
    display: table-cell !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}

/* ═══ B平台按钮组保护（自动注入 — 防止按钮消失）═══
   原理：B平台消息操作按钮结构为：
   .flex.items-center.gap-1.ml-auto (hover显隐包装)
     └── .bg-muted.rounded.flex.p-0.5 (按钮组容器)
           └── button.rounded-full.size-7 (单个按钮)
   以下规则使用高specificity + !important确保按钮
   不被任何转换后/透传的CSS规则意外隐藏
   ═══════════════════════════════════════════════ */
/* 按钮组容器保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5,
.is-user .bg-muted.rounded.flex.p-0\.5,
.is-assistant .bg-muted.rounded.flex.p-0\.5 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    pointer-events: auto !important;
    clip: auto !important;
    clip-path: none !important;
}
/* 单个按钮保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5 > button,
.is-user .bg-muted.rounded.flex.p-0\.5 > button,
.is-assistant .bg-muted.rounded.flex.p-0\.5 > button {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    clip: auto !important;
    clip-path: none !important;
}
/* hover显隐包装层保护 — 仅保留B平台原生的opacity过渡 */
.flex.items-center.gap-1.ml-auto.md\:opacity-0.group-hover\:opacity-100 {
    visibility: visible !important;
    display: flex !important;
    pointer-events: auto !important;
    overflow: visible !important;
}
/* 操作行保护 */
.flex.w-full.items-center.justify-between.gap-2.px-2 {
    display: flex !important;
    visibility: visible !important;
    overflow: visible !important;
}

/* ================================================================
   🌸 真实恋爱模拟器 - 全界面沉浸式 UI（优化版）
   ----------------------------------------------------------------
   · 全部颜色写死为十六进制，不依赖 CSS 变量
   · 固定 px 字号，不加媒体查询 → 手机/网页呈现一致
   【本次优化修复点】：
     F1  Part 4.1 背景简写语法不严谨 → 拆分为 background-color / background-image
     F2  Part 4.2 气泡缺少 position:relative → 樱花动画锚点错乱
     F3  Part 4.7 樱花规则选择器写错（content 写在普通元素上不生效，
         且只有 assistant 侧有 ::after）→ 拆开分别对两个伪元素生效
     F4  减少动态媒体查询里同样引用错误选择器 → 同步修正
     F5  Part 7 .love-actions br 的 content 属性无效 → 移除
     F6  输入框 transition:all 浪费性能 → 收敛为必要属性
   ================================================================ */


/* ================================================================
   Part 1 · 主角状态栏卡片
   ================================================================ */
.love-panel {
    background: #fff0f3;
    padding: 12px;
    border-radius: 20px;
    border: 2px solid #ffb7c5;
    font-family: sans-serif;
    color: #664d52;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.love-card {
    background: #ffffff;
    border-radius: 15px;
    margin-bottom: 10px;
    border: 1px solid #ffcad4;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 183, 197, 0.2);
}
.love-header {
    background: linear-gradient(90deg, #ffb7c5, #ff9a9e);
    color: #ffffff;
    padding: 10px 15px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(233, 30, 99, 0.25);
}
.love-header:hover {
    background: linear-gradient(90deg, #ff9a9e, #ff7eb3);
}
.love-body {
    padding: 12px;
    color: #664d52;
    font-size: 14px;
    line-height: 1.7;
}
.love-text { margin: 4px 0; }

.love-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 8px 0;
}
.love-item {
    background: #fff5f6;
    padding: 6px 10px;
    border-radius: 8px;
    border-left: 3px solid #ff9a9e;
    font-size: 13px;
}
.love-tags {
    background: #ffebee;
    padding: 8px;
    border-radius: 8px;
    margin: 5px 0;
    border: 1px dashed #ffb7c5;
    font-size: 13px;
}

/* 进度条 */
.love-progress-container { margin: 10px 0; }
.love-progress-label { font-size: 13px; margin-bottom: 4px; }
.love-progress-bar {
    height: 10px;
    background: #f8dce2;
    border-radius: 5px;
    overflow: hidden;
}
.love-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff758c, #ff7eb3);
    transition: width .5s ease;
}
.love-diag {
    background: #fff0f3;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    margin: 6px 0;
}
.love-memo {
    background: #fffafb;
    border: 1px solid #ffe4e8;
    border-radius: 10px;
    padding: 10px;
    font-size: 13px;
    line-height: 1.8;
    margin: 6px 0;
}


/* ================================================================
   Part 2 · 移动终端（恋爱游戏UI风 · 无手机框）
   ================================================================ */
.phone-ui {
    background: #fff7f9;
    border: 1.5px dashed #ffcdd6;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(255, 154, 158, 0.18);
}
.phone-top-bar {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #b08a93;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ffd9e0;
    margin-bottom: 6px;
}
.phone-top-bar span:first-child { font-weight: 700; color: #8a6a72; letter-spacing: .5px; }
.phone-top-bar span:nth-child(2) { font-weight: 700; color: #5f5257; }
.phone-top-bar span:last-child {
    background: #ffd9e6;
    color: #ff4d8d;
    font-weight: 700;
    padding: 1px 10px;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(255, 77, 141, .3);
}

.phone-app-sect { margin-top: 12px; }
.app-label {
    font-weight: bold;
    color: #ff4d8d;
    margin: 10px 0 6px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    letter-spacing: .3px;
}
.unread-count {
    background: #ff4d6d;
    color: #ffffff;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(255, 77, 109, .4);
}

.chat-box {
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 14px;
    margin-bottom: 8px;
    border: 1px solid #fbe3e8;
    box-shadow: 0 2px 8px rgba(255, 154, 158, .12);
}
.chat-info { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.chat-info b { color: #4a3b40; }
.chat-time { font-size: 11px; color: #c0a2a9; }
.chat-preview {
    font-size: 12px;
    color: #9a8289;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
}

.moment-card {
    background: #ffffff;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid #fbe3e8;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(255, 154, 158, .10);
}
.moment-author { font-weight: 700; font-size: 13px; color: #4a3b40; margin-bottom: 3px; }
.moment-content { font-size: 12.5px; color: #6a545b; line-height: 1.6; }
.moment-img {
    background: #fdf1f3;
    border-radius: 10px;
    padding: 6px 8px;
    margin-top: 6px;
    font-size: 11.5px;
    color: #b08a93;
}
.moment-footer { display: flex; gap: 12px; margin-top: 6px; font-size: 11px; color: #c0a2a9; }
.moment-time { margin-left: auto; }

.sys-notice {
    background: #fff3f6;
    border-left: 3px solid #ff9a9e;
    border-radius: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    font-size: 12.5px;
    color: #7a5259;
    line-height: 1.5;
}


/* ================================================================
   Part 3 · 聊天对话气泡
   ================================================================ */
.ai-speech-bubble {
    background: #ffffff;
    color: #4a4a4a;
    padding: 15px;
    border-radius: 18px 18px 18px 2px;
    margin: 10px 0;
    border: 1.5px solid #ffcad4;
    box-shadow: 3px 3px 0 #ffdeeb;
    line-height: 1.6;
    position: relative;
    font-size: 14px;
    word-break: break-word;
}
.user-speech-bubble {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    color: #ffffff;
    padding: 12px 15px;
    border-radius: 18px 18px 2px 18px;
    margin: 10px 0 10px auto;
    max-width: 85%;
    text-align: right;
    box-shadow: 0 4px 10px rgba(255, 154, 158, .3);
    font-size: 14px;
}

/* 身体特征折叠层：标题 + 内容区统一美化 */
.love-sub-card {
    margin-top: 10px;
    border: 1px solid #ffcad4;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
}
.love-sub-card > summary {
    background: linear-gradient(90deg, #ffb7c5, #ff9a9e);
    color: #ffffff;
    padding: 8px 14px;
    font-weight: bold;
    cursor: pointer;
    font-size: 13px;
    letter-spacing: .3px;
    list-style: none;
    text-shadow: 0 1px 2px rgba(233, 30, 99, 0.25);
}
/* 隐藏系统自带箭头，改用「➕/➖」文字提示展开状态 */
.love-sub-card > summary::-webkit-details-marker { display: none; }
.love-sub-card > summary::after {
    content: " ➕";
    float: right;
    opacity: .8;
}
.love-sub-card[open] > summary { background: linear-gradient(90deg, #ff9a9e, #ff7eb3); }
.love-sub-card[open] > summary::after { content: " ➖"; }
.love-sub-card > summary:hover { background: linear-gradient(90deg, #ff9a9e, #ff7eb3); }
.love-sub-body {
    background: #fffafb;
    padding: 10px;
    font-style: italic;
    font-size: 13px;
    line-height: 1.8;
}


/* ================================================================
   Part 4 · 全局界面美化
   ================================================================ */

/* 4.1 全局背景：粉色梦幻渐变
   【F1修复】原先用 background 简写且把颜色写在最前面，
   语法不规范（颜色须位于最后一层之后），部分解析器会忽略整条。
   现拆为 background-color + background-image，稳妥。 */
body,
#__next,
.layout-main {
    background-color: #fff5f6 !important;
    background-image:
        radial-gradient(at 0% 0%, rgba(255, 192, 203, .35), transparent 50%),
        radial-gradient(at 100% 100%, rgba(255, 228, 225, .35), transparent 50%) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* 4.2 聊天气泡：适配模拟器风格
   【F2修复】补 position:relative，让 Part 4.7 的樱花 ::after
   能锚定在气泡内而不是飞到页面其他角落。 */
.is-user > .border.border-muted,
.is-assistant > .border.border-muted {
    position: relative !important;
    background: rgba(255, 255, 255, .85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 3px solid #ffb7c5 !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(255, 183, 197, .3) !important;
    max-width: 90% !important;
    word-break: break-word !important;
}

/* 4.3 代码块：系统日志 / 属性面板风格 */
.rili-markdown-renderer pre {
    background: rgba(255, 240, 245, .8) !important;
    border: 2px dashed #ffb7c5 !important;
    border-radius: 15px !important;
    padding: 0 !important;
    margin: 15px 0 !important;
    overflow: hidden !important;
}
.rili-markdown-renderer pre > div > div.flex.justify-between.h-8 {
    background: #ffb7c5 !important;
    height: 30px !important;
}
.rili-markdown-renderer pre > div > div.flex.justify-between > div.text-\[13px\] {
    color: #ffffff !important;
    font-weight: 800 !important;
    padding-left: 10px;
    font-family: 'Comic Sans MS', cursive !important;
}
.rili-markdown-renderer pre > div > div[node] {
    padding: 15px !important;
    background: transparent !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* 4.4 输入框：情书输入框
   【F6优化】transition:all → 只过渡真正变化的属性，减少性能开销 */
textarea,
.chat-input-container {
    background: #ffffff !important;
    border: 2px solid #ffb7c5 !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 12px rgba(255, 183, 197, .2) !important;
    transition: border-color .3s ease, box-shadow .3s ease !important;
    caret-color: #ff69b4 !important;
}
textarea:focus {
    border-color: #ff69b4 !important;
    box-shadow: 0 0 15px rgba(255, 105, 180, .4) !important;
    outline: none !important;
}
textarea::placeholder { color: #c0a2a9 !important; }

/* 4.5 侧边栏：半透明粉色玻璃感 */
.sidebar,
.nav-container,
.css-175oi2r {
    background: rgba(255, 255, 255, .6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-right: 1px solid rgba(255, 183, 197, .3) !important;
}

/* 4.6 按钮：粉底白字，保证可读（hover 不消失） */
button,
.MuiButton-root {
    background: linear-gradient(135deg, #ffb7c5 0%, #ff69b4 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease !important;
}
/* 按钮内部所有子元素：透明背景 + 白字（根治 hover 变透明字） */
button span, button div, button a, button i, button em, button strong, button svg,
.MuiButton-root span, .MuiButton-root div, .MuiButton-root a, .MuiButton-label {
    background: transparent !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
    font-weight: 700 !important;
}
button:hover,
.MuiButton-root:hover {
    background: linear-gradient(135deg, #ff9a9e 0%, #ff1493 100%) !important;
    color: #ffffff !important;
}
button:hover span, button:hover div, button:hover a, button:hover svg,
.MuiButton-root:hover span, .MuiButton-root:hover div, .MuiButton-root:hover a {
    background: transparent !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}
button:disabled,
.MuiButton-root:disabled {
    background: #ffd3db !important;
    color: #ffffff !important;
    opacity: .7 !important;
}

/* 4.7 樱花粒子动画
   【F3修复】原选择器把 content 写在普通元素上（content 只对
   ::before/::after 生效），导致 user 侧樱花完全不出现、
   assistant 侧仅靠第二个选择器生效。
   现拆开：两侧气泡都用 ::after 挂樱花。 */
.is-user > .border.border-muted::after,
.is-assistant > .border.border-muted::after {
    content: "🌸" !important;
    position: absolute !important;
    right: 10px;
    bottom: 10px;
    font-size: 20px !important;
    line-height: 1 !important;
    opacity: .6;
    pointer-events: none !important;
    animation: rotateSakura 5s linear infinite;
}
@keyframes rotateSakura {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 4.8 文本高亮与链接 */
::selection {
    background: #ffb7c5 !important;
    color: #ffffff !important;
}
.rili-markdown-renderer strong {
    color: #ff1493 !important;
    text-shadow: 1px 1px 0 rgba(255, 183, 197, .2);
}

/* 4.9 次要文字弱化 */
.flex.items-center.gap-2.text-xs.font-mono.text-muted-foreground,
.text-gray-500 {
    color: #c4737a !important;
}


/* ================================================================
   Part 5 · 恋爱氛围补丁（u / gf 发言标签）
   ================================================================ */
u {
    color: #5DADE2;
    text-decoration: none !important;
    font-weight: 600;
}
gf {
    color: #EC7063;
    font-weight: 600;
    text-shadow: 0 0 2px rgba(236, 112, 99, 0.1);
    animation: gf-breath 3s infinite ease-in-out;
    display: inline-block;
}
@keyframes gf-breath {
    0%, 100% {
        text-shadow: 0 0 2px rgba(236, 112, 99, 0.2);
        opacity: 0.95;
    }
    50% {
        text-shadow: 0 0 8px rgba(236, 112, 99, 0.5);
        opacity: 1;
    }
}


/* ================================================================
   Part 6 · 场景卡（状态栏同款格式）
   ----------------------------------------------------------------
   HTML 直接复用状态栏卡片结构：
     <details class="love-card" open>
       <summary class="love-header">📍 场景</summary>
       <div class="love-body"> ... </div>
     </details>
   外观自动继承 Part 1 的 .love-card 粉色样式。
   ================================================================ */
.love-card.scene-card .love-body p.love-text {
    margin: 3px 0;
    line-height: 1.9;
}
.love-card.scene-card .love-text.phase {
    background: #ffebee;
    border: 1px dashed #ffb7c5;
    border-radius: 8px;
    padding: 4px 10px;
    display: inline-block;
    font-weight: 600;
    color: #ff4d8d;
    margin-top: 6px !important;
}


/* ================================================================
   Part 7 · 行动推荐分行修复
   【F5修复】br 上的 content 属性无效（br 没有 ::before/::after
   渲染管道），去掉后不影响分行效果。
   ================================================================ */
.love-actions,
.love-actions p,
.love-actions li,
.love-actions div {
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.8 !important;
    margin: 2px 0 !important;
}
.love-actions br { display: block !important; }


/* ================================================================
   Part 8 · 记忆矩阵表格 + 行动推荐分行（状态栏配套）
   ================================================================ */
.memory-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin: 6px 0 2px;
}
.memory-table th {
    background: linear-gradient(90deg, #ffb7c5, #ff9a9e);
    color: #ffffff;
    font-weight: 700;
    padding: 5px 8px;
    text-align: left;
    border: 1px solid #ffcad4;
}
.memory-table td {
    background: #fffafb;
    color: #664d52;
    padding: 5px 8px;
    border: 1px solid #ffcad4;
    word-break: break-word;
    line-height: 1.5;
}
.memory-table tr:nth-child(even) td { background: #fff5f6; }

.love-actions .love-text {
    display: block;
    margin: 3px 0;
    white-space: normal;
    word-break: break-word;
    line-height: 1.8;
}


/* ================================================================
   无障碍：用户开启「减少动态」时，关闭花哨动画
   【F4修复】选择器与 F3 同步修正为 ::after 伪元素
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
    .is-user > .border.border-muted::after,
    .is-assistant > .border.border-muted::after { animation: none !important; }
    gf { animation: none !important; }
    button:hover { transform: none !important; }
    .love-progress-fill { transition: none !important; }
}
/* ================================================================
   🔥 强制祛除最外层大框（红圈部分）
   把粉色底色、边框、阴影、内外边距全部清零
   ================================================================ */
.love-panel {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important; /* 确保它不因为清除样式而变成行内元素 */
}

/* 为了保证外面那个大方框完全消失，顺带把父级可能自带的白底也清掉 */
.love-panel > div:first-child {
    margin-top: 0 !important;
}