/* ============================================================
 * chat-timeline.css —— 思维链时间线组件样式
 *
 * 来源：static/css/index_v2.css 第 523-685 行原样搬移（2026-10-18）
 * 覆盖：.reasoning-bubble / .reasoning-summary / .tl-wrap / .tl-item
 *       .tl-dot / .tl-icon / .tool-timer / .tool-call-line
 * ============================================================ */
        /* 思考折叠条 - 位于气泡内部 */
        .reasoning-bubble {
            margin-bottom: 12px;
            border-radius: 16px;
            overflow: hidden;
            background: #0f172a;
            border-left: none;
        }

        .reasoning-summary {
            display: flex;
            align-items: center;
            padding: 10px 16px;
            background: #0f172a;
            color: #cbd5e1;
            font-size: 0.9rem;
            cursor: pointer;
            user-select: none;
            transition: background 0.2s;
        }

        .reasoning-summary:hover {
            background: #1e293b;
        }

        .reasoning-summary i {
            margin-right: 10px;
            font-size: 0.9rem;
            color: #3b82f6;
            transition: transform 0.2s;
        }

        /* 2026-10-17 图标由 chevron 改为原子轨道（fa-atom），旋转无意义，改用颜色变化表示展开态 */
        /* 2026-10-17 折叠箭头：文字后缀，展开时旋转 90 度 */
        .reasoning-summary .fold-arrow {
            margin-left: 8px;
            margin-right: 0;
            font-size: 0.75rem;
            color: #64748b;
            transition: transform 0.2s;
        }
        .reasoning-summary.open .fold-arrow {
            transform: rotate(90deg);
        }

        .reasoning-summary.open i {
            color: #93c5fd;
        }

        .reasoning-content.collapsed {
            display: none;
        }

        /* 2026-10-17 工具调用行：贴最左，不缩进、不折行，与思维链正文区分 */
        .tool-call-line {
            margin-left: -16px;
            margin-right: -16px;
            padding: 2px 16px;
            white-space: normal;
            word-break: break-word;
            font-size: 0.88rem;
            color: #cbd5e1;
        }

        /* 2026-10-17 思维链时间线：一条左侧竖线贯穿，圆点/图标压在线上 */
        .tl-wrap {
            position: relative;
            padding-left: 20px;
            margin: 4px 0;
        }
        .tl-wrap::before {
            content: "";
            position: absolute;
            left: 6px;
            top: 8px;
            bottom: 8px;
            width: 2px;
            background: #334155;
            border-radius: 1px;
        }
        .tl-item {
            position: relative;
            margin: 0 0 10px 0;
            padding-left: 0;
        }
        .tl-item:last-child { margin-bottom: 0; }
        .tl-dot {
            position: absolute;
            left: -17px;
            top: 7px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #64748b;
            box-shadow: 0 0 0 3px #0f172a;
        }
        /* 2026-10-17 图标压在竖线正中（与圆点同一纵坐标）：
           竖线中心相对 .tl-item = 6+1-20 = -13px；
           .tl-dot 已验证对齐（left:-17 width:8 -> 中心 -13px），图标同样用中心锚定，不再依赖宽度相加。 */
        .tl-icon {
            position: absolute;
            left: -13px;
            top: 1px;                  /* 2026-10-17 固定对齐首行中线，不用 50% 居中：多行文字时 50% 会落到中间行，导致图标看起来偏低 */
            transform: translateX(-50%);
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            line-height: 1;
            text-align: center;
            background: #0f172a;
            border-radius: 50%;
            z-index: 5;
        }
        .tl-body {
            color: #94a3b8;
            font-size: 0.9rem;
            line-height: 1.5;
            white-space: pre-wrap;
            word-break: break-word;
        }
        .tl-tool .tl-body { color: #cbd5e1; }
        .tl-tool .tl-body {
            color: #cbd5e1;
        }

        .reasoning-content {
            padding: 16px;
            background: #0f172a;
            color: #94a3b8;
            font-size: 0.9rem;
            white-space: pre-wrap;
            line-height: 1.5;
            border-top: 1px solid #1e293b;
        }

        .message-content {
            padding: 14px 18px;
            border-radius: 20px;
            line-height: 1.6;
            word-wrap: break-word;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            font-size: 0.95rem;
            white-space: pre-wrap;
            word-break: break-word;
            width: 100%;
            max-width: 100%;
        }

        .user-message .message-content {
            background: #2563eb;
            color: white;
            border-bottom-right-radius: 4px;
        }

        .assistant-message .message-content {
            background: #1e293b;
            color: #e2e8f0;
            border-bottom-left-radius: 4px;
        }

        /* 消息底部操作栏 */