/*update time: 2025.09.05 11:23*/
:root {
            --primary: #008890;
            --secondary: #7FCBCD;
            --accent: #2273B7;
            --dark: #1A1A1A;
            --light: #f5f5f7;
            --gray-5:#1A1A1A;
            --gray-4:#333333;
            --gray-3:#595959;
            --gray-2:#909FAC;
            --gray-1:#8C8C8C;
            --gray-0:#CCCCCC;
            
            --red:#D33941;
            --orange:#DB6500;
            --yellow:#F0C800;
            --green:#008890;
            --blue:#2273B7;
            --purple:#4C4D8E;
            --red_1:#F06B72;
            --orange_1:#FFA54F;
            --yellow_1:#FFDF6E;
            --green_1:#7FCBCD;
            --blue_1:#67A2D7;
            --purple_1:#9191C9;
            --red_2:#F7A0A5;
            --orange_2:#FFCC99;
            --yellow_2:#FEEBA3;
            --green_2:#B3E0E2;
            --blue_2:#A4C6E7;
            --purple_2:#C8C8E6;
            --red_3:#FCE0E2;
            --orange_3:#FFF0E0;
            --yellow_3:#FEFBE6;
            --green_3:#E6F4F5;
            --blue_3:#E1EDF7;
            --purple_3:#F1F1F8;
        }

        .citations-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 20px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .citation-component {
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }

        /* 标签和按钮的容器 - 使用flex布局实现同行显示 */
        .tags-and-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-end;
            gap: 10px;
        }

        .dynamic-tags {
            display: inline;
            white-space: normal;
            flex: 1;
        }
        .citation-text {
            color: var(--gray-4);
            margin-bottom: 8px;
        }

        .tag {
            display: inline-block;
            margin-left: 5px;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: var(--gray-3); /* 默认文字颜色 */
        }

        /* 预设标签颜色类 */
        .tag-red { background-color: var(--red_3); }
        .tag-orange { background-color: var(--orange_3); }
        .tag-yellow { background-color: var(--yellow_3); }
        .tag-green { background-color: var(--green_3); }
        .tag-blue { background-color: var(--blue_3); }
        .tag-purple { background-color: var(--purple_3); }
        .tag-gray {background-color: var(--gray-0);}

        .interactive-buttons {
            display: flex;
            gap: 8px;
            margin-left: auto; /* 推到右侧 */
        }
        
        .custom-button {
            padding: 5px 12px;
            border: none;
            border-radius: 15px;
            color: white;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.2s;
        }

        .custom-button:disabled {
            background-color: #ccc;
            cursor: not-allowed;
            opacity: 0.3;
        }
        
        /* 按钮组布局样式 */
        .button-group-tool {
            display: flex;
            gap: 30px; /* 按钮之间的间距 */
            padding: 20px;
            flex-wrap: wrap; /* 适配小屏幕自动换行 */
        }
		
        .btn-tool {
            background-color: var(--primary);
			padding: 12px 20px;
            border: none;
            border-radius: 15px;
            color: white;
            cursor: pointer;
            font-size: 1.5vh;
            transition: background-color 0.2s;
        }
        
        .btn-tool:hover {
            transform: scale(1.05) translateY(-1px); 
        }

        .interactive-tag {
            padding: 5px 12px;
            border: none;
            border-radius: 15px;
            color: white;
            cursor: pointer;
            font-size: 12px;
        }

        .link-tag {background-color: var(--primary);}
        .abstract-tag {background-color: var(--accent);}
        .abstract-tag.active {background-color: var(--red);}

        .abstract-content {
            display: none;
            max-height: 0; /* 初始高度为0 */
            opacity: 0; /* 初始透明度为0 */
            margin: 0;
            padding: 0 15px;
            border-top: 1px dashed #ccc;
            color: var(--gray-3); /* 默认文字颜色 */
            transition: all 0.5s ease; /* 添加过渡效果 */
            height: 0; /* 初始高度为0，不占位 */
        }
        
        .abstract-content.expanded {
            max-height: 10000px; /* 足够大的高度容纳内容 */
            opacity: 1; /* 完全显示 */
            padding: 15px; /* 恢复内边距 */
            margin-top: 15px; /* 展开时添加顶部间距 */
            height: auto; /* 高度自动适应内容 */
        }

        .abstract-content p {
            margin: 0 0 10px 0;
            line-height: 1.6;
        }

        .abstract-image {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin-top: 10px;
        }