/* ============================================================
   1. 顶部状态栏 (Top Bar)
   ============================================================ */
.sticky.w-full.top-0.flex.items-center {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 2px solid rgba(167, 139, 250, 0.3) !important;
    box-shadow: 0 4px 15px rgba(167, 139, 250, 0.1) !important;
    z-index: 50 !important;
}

#ai-model-selector .group.flex.items-center {
    background: linear-gradient(135deg, #f472b6 0%, #a78bfa 100%) !important;
    border-radius: 12px !important;
    padding: 4px 12px !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* ============================================================
   2. 聊天气泡 (Chat Box)
   ============================================================ */
[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] {
    display: none !important;
}

.bg-gray-100\/90.relative.inline-block {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(167, 139, 250, 0.4) !important;
    border-radius: 20px !important;
    box-shadow: 5px 5px 0px 0px rgba(244, 114, 182, 0.2), 10px 10px 0px 0px rgba(167, 139, 250, 0.1) !important;
    padding: 14px 18px !important;
    margin: 12px 0 !important;
}

/* ============================================================
   3. 状态栏互动美化 (Status Box Interaction)
   ============================================================ */
.markdown-body details.status-box {
    border: 1px solid rgba(167, 139, 250, 0.4) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(8px) !important;
    margin: 15px 0 !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* 平滑过渡 */
}

/* 核心互动：光标落在状态栏上时的效果 */
.markdown-body details.status-box:hover {
    border-color: #f472b6 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px) !important; /* 轻微上浮 */
    box-shadow: 0 8px 20px rgba(167, 139, 250, 0.2) !important;
}

.markdown-body details summary {
    list-style: none !important;
    padding: 10px 15px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    outline: none !important;
}

/* 展开箭头美化 */
.markdown-body details summary::before {
    content: "▶" !important;
    display: inline-block !important;
    margin-right: 10px !important;
    color: #a78bfa !important;
    font-size: 10px !important;
    transition: transform 0.3s ease !important;
}

.markdown-body details[open] > summary::before {
    transform: rotate(90deg) !important;
    color: #f472b6 !important;
}

.markdown-body details.status-box summary h1 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #be185d !important;
    border: none !important;
}

/* ============================================================
   4. 叙事正文 (Plot - 已去互动效果)
   ============================================================ */
.markdown-body plot {
    display: block !important;
    padding: 20px 25px !important;
    margin: 20px 0 !important;
    background: rgba(244, 114, 182, 0.03) !important; /* 保持静态背景 */
    border-left: 4px solid #f472b6 !important;
    border-radius: 4px 15px 15px 4px !important;
    font-size: 15.5px !important;
    line-height: 1.8 !important;
    color: #1f2937 !important;
    position: relative !important;
    /* 移除 hover 变换 */
}

.markdown-body plot::after {
    content: "DIMENSION CONNECTED" !important;
    position: absolute !important;
    top: -10px !important;
    right: 20px !important;
    font-size: 9px !important;
    background: #f472b6 !important;
    color: white !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
    font-weight: bold !important;
}

/* ============================================================
   5. 选项方框化 (Option Boxes Interaction)
   ============================================================ */
.markdown-body hr.separator {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.5), transparent) !important;
    border: none !important;
    margin: 25px 0 !important;
}

/* 将选项 P 标签转化为方框 */
.markdown-body hr.separator ~ p {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    margin: 10px 0 !important;
    font-size: 14px !important;
    color: #4b5563 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    box-shadow: 2px 2px 0px rgba(167, 139, 250, 0.1) !important;
}

/* 选项悬停互动效果 */
.markdown-body hr.separator ~ p:hover {
    background: #ffffff !important;
    border-color: #f472b6 !important;
    color: #be185d !important;
    transform: scale(1.02) !important;
    box-shadow: 0 5px 15px rgba(244, 114, 182, 0.15) !important;
}

/* 排除“👉选项：”这一行不作为方框（如果是紧跟在hr后的第一个P） */
.markdown-body hr.separator + p {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 10px 0 !important;
    font-weight: bold !important;
    color: #a78bfa !important;
    cursor: default !important;
}
.markdown-body hr.separator + p:hover {
    transform: none !important;
}

/* ============================================================
   6. 底部输入栏 (Input Field)
   ============================================================ */
#ai-chat-bottom-input {
    background: rgba(255, 252, 254, 0.95) !important;
    border-top: 2px solid rgba(167, 139, 250, 0.4) !important;
}

#ai-chat-input {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
    border-radius: 12px !important;
    color: #111827 !important;
}

#ai-chat-input:focus {
    border-color: #f472b6 !important;
    box-shadow: 0 0 0 4px rgba(244, 114, 182, 0.1) !important;
}

/* ============================================================
   7. 加载动画 (Loading)
   ============================================================ */
.style_dot-flashing__8L91Q.style_text__zGhNq { display: none !important; }
.flex.items-center.justify-center.w-6.h-5 {
    width: 42px !important;
    height: 42px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='45' stroke='%23a78bfa' stroke-width='2' fill='none' stroke-dasharray='20 10'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='50' r='35' stroke='%23f472b6' stroke-width='1' fill='none' stroke-dasharray='5 5'%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 50 50' to='0 50 50' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}