/* ==========================================
   蜜桃粉樱 · AVG游戏级卡片式状态栏UI
   ========================================== */

/* 1. 正文故事区美化 */
.romcom-story {
    line-height: 1.8;
    font-size: 16px;
    color: #5C464A;
    margin: 15px 0;
    padding: 10px;
}

/* 旁白与动作 */
.romcom-story narrative {
    display: block;
    padding: 8px 12px;
    color: #7A6266;
    font-style: italic;
    position: relative;
}

/* 苏婉清的专属对话气泡 */
.romcom-story su-speech {
    display: block;
    background: linear-gradient(135deg, #FFF0F2 0%, #FFE3E8 100%);
    border: 1.5px solid #FFB3C1;
    border-left: 5px solid #FF6B8B;
    padding: 12px 16px;
    margin: 14px 0;
    border-radius: 0px 16px 16px 16px;
    font-weight: 500;
    color: #2D1A1C;
    box-shadow: 0 4px 12px rgba(255, 107, 139, 0.08);
    position: relative;
}

.romcom-story su-speech::before {
    content: "🌸 苏婉清";
    display: block;
    font-size: 12px;
    color: #FF5274;
    font-weight: bold;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

/* 2. 状态栏折叠面板美化 */
details.romcom-status {
    background: #FFFFFF;
    border: 1.5px solid #FFE3E8;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(255, 107, 139, 0.04);
    transition: all 0.3s ease;
}

details.romcom-status[open] {
    border-color: #FF8E53;
    box-shadow: 0 6px 16px rgba(255, 142, 83, 0.12);
}

details.romcom-status summary {
    background: linear-gradient(90deg, #FFEBF0 0%, #FFF5F7 100%);
    color: #FF5274;
    font-weight: bold;
    padding: 14px 18px;
    cursor: pointer;
    outline: none;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.3s;
    font-size: 15px;
}

details.romcom-status summary:hover {
    background: linear-gradient(90deg, #FFE3E9 0%, #FFEBF0 100%);
    color: #FF2A55;
}

details.romcom-status summary::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5274' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

details.romcom-status[open] summary::after {
    transform: rotate(180deg);
}

details.romcom-status summary::-webkit-details-marker {
    display: none;
}

/* 3. 状态栏内部网格化排版 */
.romcom-content {
    padding: 14px;
    background: #FFFFFF;
}

/* 网格容器 */
.status-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 完美两列平分 */
    gap: 10px;
}

/* 单个属性卡片 */
.status-card {
    background: #FFF8F9;
    border: 1px solid #FFE3E8;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 6px rgba(255, 107, 139, 0.02);
}

/* 占满整行的卡片 */
.status-card.full-row {
    grid-column: span 2;
}

.status-label {
    font-size: 12px;
    color: #FF5274;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}

.status-value {
    font-size: 14px;
    color: #4A3538;
    line-height: 1.5;
}

/* 4. 动态进度条 */
.progress-container {
    width: 100%;
    height: 8px;
    background: #FFE3E8;
    border-radius: 4px;
    margin-top: 6px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #FF8E53 0%, #FF5274 100%);
    border-radius: 4px;
}

/* 5. 微信聊天气泡样式 */
.chat-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.chat-title {
    font-size: 12px;
    color: #998084;
    border-bottom: 1px dashed #FFE3E8;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
}

/* 老婆发来的微信（粉色左侧） */
.chat-bubble.wife {
    background: #FFF0F2;
    border: 1px solid #FFD1DC;
    color: #4A3538;
    align-self: flex-start;
    border-top-left-radius: 2px;
}

/* 你回复的微信（绿色右侧） */
.chat-bubble.husband {
    background: #EEFBE7;
    border: 1px solid #C8E8B7;
    color: #2E4A1E;
    align-self: flex-end;
    border-top-right-radius: 2px;
}

/* 6. 记忆区表格美化 */
.romcom-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
    font-size: 13px;
}

.romcom-content th {
    background-color: #FFEBF0;
    color: #FF5274;
    font-weight: bold;
    padding: 8px;
    border: 1px solid #FFE3E8;
}

.romcom-content td {
    padding: 8px;
    border: 1px solid #FFE3E8;
    color: #5C464A;
}

.romcom-content tr:nth-child(even) {
    background-color: #FFF9FA;
}

/* 7. 行动推荐美化 */
.romcom-actions {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.romcom-actions li {
    background: #FFF0F3;
    border: 1.5px dashed #FFB3C1;
    padding: 12px 16px;
    border-radius: 10px;
    color: #D93856;
    font-weight: bold;
    transition: all 0.2s ease;
    font-size: 14px;
}

.romcom-actions li:hover {
    background: linear-gradient(135deg, #FFD6E0 0%, #FFC2D1 100%);
    border-style: solid;
    transform: translateX(4px);
}
/* ==========================================
   蜜桃粉樱 · 拍立得拍立现CG相框
   ========================================== */
romcom-cg {
    display: block;
    margin: 15px auto;
    max-width: 100%;
    background: #FFFFFF;
    border: 1.5px solid #FFE3E8;
    border-radius: 16px;
    padding: 10px 10px 24px 10px; /* 底部留宽，模拟拍立得相框 */
    box-shadow: 0 8px 20px rgba(255, 107, 139, 0.12);
    position: relative;
    overflow: hidden;
    transform: rotate(-1deg); /* 微微倾斜，增加俏皮感 */
    transition: all 0.3s ease;
}

romcom-cg:hover {
    transform: rotate(0deg) scale(1.02); /* 悬停时放大并摆正 */
    box-shadow: 0 12px 28px rgba(255, 107, 139, 0.2);
}

/* CG图片本身 */
romcom-cg img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    object-fit: cover;
}

/* “CG UNLOCKED” 萌系角标 */
romcom-cg::before {
    content: "📸 CG UNLOCKED";
    position: absolute;
    top: 18px;
    left: 18px;
    background: linear-gradient(135deg, #FF8E53 0%, #FF5274 100%);
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(255, 82, 116, 0.4);
    letter-spacing: 1px;
    z-index: 10;
}