/* Think Tag Styles - Doubao Style (Dark Theme) */

.think-container {
    /* 🛡️ 布局隔离：强制独占一行，防止流式输出时内容并排 */
    display: block !important;
    width: 100% !important;

    /* 🎨 [边距统一v1] 思考卡片使用全宽 */
    /* bubble padding 已移除，不需要负margin */
    margin: 8px 0 12px 0 !important;

    clear: both !important;
    float: none !important;
    box-sizing: border-box !important;

    /* 建立独立渲染层，防止重排影响周围元素 */
    position: relative;

    border: 1px solid rgba(3, 218, 198, 0.3);
    border-radius: 8px;
    background: rgba(15, 15, 35, 0.6);
    overflow: hidden;

    /* 🛡️ [核心修复] 禁用过渡，防止折叠延迟 */
    transition: none !important;

    /* 🛡️ [核心修复] flex-grow: 0 防止容器被撑大 */
    flex-shrink: 0;
    flex-grow: 0 !important;
}

/* 🔒 [核心修复] 在思维链卡片后强制换行 */
.think-container::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}

.think-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: rgba(3, 218, 198, 0.05);
    transition: background 0.2s ease;
}

.think-header:hover {
    background: rgba(3, 218, 198, 0.1);
}

.think-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* 思维链标题右侧操作区：翻译按钮（在箭头左侧）- 主题色细圆角边框 + 主题色文字 */
.think-header-actions {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.think-translate-btn {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    color: rgba(3, 218, 198, 0.95);
    background: transparent;
    border: 1px solid rgba(3, 218, 198, 0.45);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.2s, color 0.2s, opacity 0.2s;
}

.think-translate-btn:hover:not(:disabled) {
    color: #03dac6;
    border-color: rgba(3, 218, 198, 0.7);
}

.think-translate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 浅色模式：翻译按钮适配 */
body.light-theme .think-translate-btn {
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.55);
}

body.light-theme .think-translate-btn:hover:not(:disabled) {
    color: #0f766e;
    border-color: rgba(13, 148, 136, 0.8);
}

body.light-theme .think-translate-btn:disabled {
    color: #0d9488;
    opacity: 0.65;
}

.think-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.think-status.thinking {
    color: #ffbb00;
}

.think-status.completed {
    color: var(--secondary-color);
}

.think-icon {
    font-size: 1rem;
}

.think-status.thinking .think-icon {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* 🔧 [新增] 思考字数统计样式 */
.think-char-count {
    display: inline;
    font-size: 0.85rem;
    font-weight: inherit;
    /* 继承父元素 .think-status 的颜色，无需单独设置 */
}

/* 🔧 [已移除] 思考中三个点动画 - 保留代码备用
.thinking-dots {
    display: inline;
    letter-spacing: 2px;
}

.thinking-dots span {
    display: inline-block;
    font-weight: bold;
    opacity: 0.3;
    will-change: opacity, transform;
    -webkit-animation: dotsAnimation 1.4s infinite ease-in-out both;
    animation: dotsAnimation 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.thinking-dots span:nth-child(2) {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

.thinking-dots span:nth-child(3) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

@-webkit-keyframes dotsAnimation {
    0% {
        opacity: 0.3;
        -webkit-transform: scale(1);
    }

    50% {
        opacity: 1;
        -webkit-transform: scale(1.2) translateY(-2px);
    }

    100% {
        opacity: 0.3;
        -webkit-transform: scale(1);
    }
}

@keyframes dotsAnimation {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2) translateY(-2px);
    }

    100% {
        opacity: 0.3;
        transform: scale(1);
    }
}
*/



/* 🔧 [新增] 生成中禁用点击 */
.think-container.disabled .think-header {
    cursor: default;
    pointer-events: none;
}

.think-container.disabled:hover .think-header {
    background: rgba(3, 218, 198, 0.05);
}

/* 🔧 [新增] 生成中状态的思考容器样式 - 保持宽度100% */
.think-container.thinking {
    border-color: rgba(255, 187, 0, 0.3);
    background: rgba(25, 20, 10, 0.6);
    width: 100% !important;
    min-width: 100% !important;
}

.think-container.thinking .think-header {
    background: rgba(255, 187, 0, 0.05);
}

/* 🔧 [新增] 思考中状态文字颜色增强 */
.think-status.thinking {
    color: #ffbb00;
    font-weight: 500;
}

/* 🔧 [修复] 思考中状态不应受 collapsed 影响宽度 */
.think-container.thinking.collapsed {
    width: 100% !important;
    min-width: 100% !important;
}

/* 🔧 [新增] 完成状态可点击提示 */
.think-container.completed:not(.disabled) .think-header:hover {
    background: rgba(3, 218, 198, 0.15);
}

.think-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.think-toggle ion-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.think-container.collapsed .think-toggle ion-icon {
    transform: rotate(180deg);
}

/* 🛡️ [核心修复] 折叠状态下的容器 - 禁止被撑大 */
.think-container.collapsed {
    /* 🔧 [边距统一v1] 保持顶部margin与展开状态一致(8px)，避免展开/折叠时位置跳变 */
    /* 只减小底部margin以节省折叠时的空间 */
    margin: 8px 0 4px 0 !important;
    height: auto !important;
    flex-grow: 0 !important;
    flex-basis: auto !important;
    transition: none !important;
}

.think-content {
    /* 🔧 [滚动条分离v1] padding-right: 0，滚动条在最右边
     * 内容的右边距通过 padding-left 和文字自然换行来保证 */
    padding: 12px 0 12px 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
    border-top: 1px solid rgba(3, 218, 198, 0.15);
    background: rgba(0, 0, 0, 0.2);
    max-height: 500px;
    overflow-y: auto;
    /* 🛡️ [流式修复] 仅对 padding 应用过渡，max-height 由 JS 控制或立即生效 */
    transition: padding 0.2s ease, border-top 0.2s ease;

    /* 🔧 [触摸优化v1] 提升移动端滚动流畅度 */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    /* 防止滚动穿透到父容器 */
}

/* 🔧 [滚动条分离v1] 内容区右边距补偿 */
.think-content>* {
    padding-right: 18px;
}

.think-container.collapsed .think-content {
    /* 高度归零 */
    max-height: 0 !important;
    height: 0 !important;
    min-height: 0 !important;

    /* 内边距归零 */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    /* 边框隐藏 */
    border-top: none !important;

    /* 防止内容溢出 */
    overflow: hidden !important;

    /* 视觉隐藏备用 */
    visibility: hidden !important;
    opacity: 0 !important;

    /* 移除行高占位 */
    line-height: 0 !important;
    font-size: 0 !important;

    /* 🛡️ [流式修复] 折叠时禁用过渡，确保立即生效 */
    transition: none !important;
}

.think-content::-webkit-scrollbar {
    width: 6px;
}

.think-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.think-content::-webkit-scrollbar-thumb {
    background: rgba(3, 218, 198, 0.3);
    border-radius: 3px;
}

.think-content::-webkit-scrollbar-thumb:hover {
    background: rgba(3, 218, 198, 0.5);
}