/**
 * 通用弹窗样式
 * 提供可复用的弹窗组件样式
 */

/* 弹窗基础样式 */
.popup_container {
    position: fixed;
    z-index: 10180;
    /* background-color: rgba(30, 30, 30, 0.95); */
    background-color: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-width: 600px;
    max-width: 600px;
    min-height: 200px;
    max-height: 80vh;
    /* 使用视窗高度的80%作为最大高度 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(8px) !important;
    padding: 0;
    transform-origin: top center;
    will-change: transform, opacity, left, top;
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* 弹窗动画类 */
.popup-up {
    animation: clipFadeInDown 0.2s ease-in-out;
}

.popup-down {
    animation: clipFadeInUp 0.2s ease-in-out;
}

.popup-closing-up {
    animation: clipFadeOutUp 0.2s ease-in-out forwards;
    pointer-events: none;
}

.popup-closing-down {
    animation: clipFadeOutDown 0.2s ease-in-out forwards;
    pointer-events: none;
}

/* 弹窗标题栏 */
.popup_title_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0;
    user-select: none;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
}

.popup_title {
    font-size: 12px;
    font-weight: bold;
    /* color: rgba(255, 255, 255, 0.8); */
    color: var(--p-text-color);
    white-space: nowrap;
}

/* 弹窗按钮基础样式 */
.popup_btn {
    background: none;
    border: none;
    /* color: rgba(255, 255, 255, 0.6); */
    color: var(--p-button-text-secondary-color);
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    transition: all 0.2s ease;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

/* 添加 PrimeIcons 尺寸控制 */
.popup_btn .pi {
    font-size: 12px;
}

.popup_btn:hover {
    /* color: rgba(255, 255, 255, 0.9); */
    color: var(--p-button-text-secondary-color);
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 50%);
}

/* 弹窗中的SVG图标继承基础样式，无需重复定义 */

/* 弹窗按钮图标样式 - 兼容旧的img和新的svg */
.popup_btn_icon {
    width: 12px;
    height: 12px;
}

/* 搜索框容器 */
.popup_search_container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    min-width: 100px;
    justify-content: flex-end;
    z-index: 2;
    /* 确保搜索框在标题栏之上 */
}

.popup_search_input {
    width: 200px;
    padding: 4px 28px 4px 8px;
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
    border: none;
    border-radius: 10px;
    color: var(--p-inputtext-color);
    font-size: 12px;
    outline: none;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
    /* 确保输入框在标题栏之上 */
}

.popup_search_input:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 95%);
    width: 260px;
    z-index: 2;
    /* 确保聚焦时在标题栏之上 */
}

/* 搜索框清除按钮 */
.popup_search_container .popup_btn {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    z-index: 3;
    /* 确保清除按钮在最上层 */
}

/* 操作按钮容器 */
.popup_actions {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    z-index: 2;
    /* 确保操作按钮在标题栏之上 */
}

/* 搜索结果列表 */
.tag_search_result_list {
    padding: 8px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%) transparent;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4px;
    justify-content: flex-start;
}

.search_result_tag_item {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    white-space: nowrap;
    font-size: 13px;
}

.search_result_tag_item:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

.search_result_tag_item .tag_category_path {
    margin-left: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.search_result_tag_item.used {
    background-color: rgba(40, 120, 40, 0.4);
    border-color: rgba(40, 120, 40, 0.6);
}

.search_result_tag_item.used:hover {
    background-color: rgba(40, 120, 40, 0.6);
    border-color: rgba(40, 120, 40, 0.8);
}

/* 弹窗操作按钮 */
.popup_action_btn {
    background: none;
    border: none;
    color: var(--p-text-muted-color);
    cursor: pointer;
    font-size: 10px;
    padding: 5px 8px;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.popup_action_btn:hover {
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 50%);
    color: var(--p-text-muted-color);
}

.popup_action_btn:active {
    transform: scale(0.95);
}

/* 弹窗内容区域 */
.popup_content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%) transparent;
    min-height: 0;
    /* 允许flex收缩 */
}

.popup_content::-webkit-scrollbar {
    width: 6px;
}

.popup_content::-webkit-scrollbar-track {
    background: transparent;
}

.popup_content::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%);
    border-radius: 3px;
}

/* 弹窗列表项 */
.popup_list_item {
    padding: 10px 10px;
    font-size: 14px;
    cursor: pointer;
    /* color: rgba(255, 255, 255, 0.7); */
    color: var(--p-text-muted-color);
    transition: all 0.2s ease;
    /* border-bottom: 0px solid rgba(255, 255, 255, 0.05); */
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 70%);
    position: relative;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-height: 24px;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 添加原生tooltip的样式优化 */
.popup_list_item[title] {
    position: relative;
}

/* 确保tooltip在其他元素之上 */
.popup_list_item[title]:hover {
    z-index: 1000;
}

/* 交替背景色 */
.popup_list_item:nth-child(even) {
    background-color: var(--p-dialog-background);
}

/* 当前节点的标识（左侧色条） */
.popup_list_item.current_node::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: rgba(0, 255, 100, 0.7);
    z-index: 1;
    /* 确保色条在内容之上 */
}

/* 鼠标悬停效果 */
.popup_list_item:hover {
    /* background-color: rgba(211, 16, 16, 0.862); */
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 84%);
}

/* 历史记录标识信息 */
.popup_list_item .history_meta {
    display: flex;
    gap: 4px;
    font-size: 11px;
    /* color: rgba(255, 255, 255, 0.5); */
    color: var(--p-text-muted-color);
    flex-shrink: 0;
    min-width: 4px;
    margin-top: 2px;
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 30%);
    border-radius: 6px;
}

.popup_list_item .history_meta .node_id,
.popup_list_item .history_meta .input_id,
.popup_list_item .history_meta .translated,
.popup_list_item .history_meta .original,
.popup_list_item .history_meta .expanded {
    background-color: var(--comfy-menu-secondary-bg);
    padding: 1px 4px;
    border-radius: 3px;
    font-family: monospace;
}

.popup_list_item .history_meta .node_id {
    color: rgb(100, 200, 255);
}

.popup_list_item .history_meta .input_id {
    color: rgb(135, 133, 131);
}

/* 译文标签样式 - 紫色 */
.popup_list_item .history_meta .translated {
    color: rgb(180, 120, 255);
}

/* 反推提示词标签样式 - 蓝色 */
.popup_list_item .history_meta .caption {
    color: rgb(64, 158, 255);
}

/* 原文标签样式 - 蓝色 */
.popup_list_item .history_meta .original {
    color: rgb(100, 160, 255);
}

/* 扩写标签样式 - 绿色 */
.popup_list_item .history_meta .expanded {
    color: var(--p-green-500);
}

/* 历史内容样式 */
.popup_list_item .history_content {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    font-size: 14px;
    min-width: 0;
}

/* 弹窗空状态提示 */
.popup_empty {
    padding: 20px;
    text-align: center;
    /* color: rgba(255, 255, 255, 0.4); */
    color: var(--p-text-muted-color);
    font-size: 14px;
    user-select: none;
}

/* 危险操作按钮样式 */
.popup_action_btn.danger {
    color: rgba(255, 100, 100, 0.8);
}

.popup_action_btn.danger:hover {
    background-color: rgba(255, 100, 100, 0.2);
    color: rgba(255, 100, 100, 1);
}

/* 手风琴样式 */
.tag_accordion {
    transition: all 0.3s ease;
    width: 100%;
    margin-bottom: 4px;
    border-radius: 6px;
    overflow: hidden;
    /* 移除整体的指针样式，只在标题和标签上保留 */
    /* background-color: rgba(40, 40, 40, 0.5); */
}

.tag_accordion_header {
    padding: 4px 14px;
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
    cursor: pointer;
    user-select: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.tag_accordion_header:hover {
    background-color: color-mix(in srgb, var(--p-surface-400), transparent 80%);

}

.tag_accordion_header.active {
    background-color: color-mix(in srgb, var(--p-primary-400), transparent 85%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tag_accordion_title {
    flex: 1;
    font-size: 12px;
    /* color: rgba(255, 255, 255, 0.9); */
    color: var(--p-text-muted-color);
    font-weight: 500;
}

.tag_accordion_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    /* color: rgba(255, 255, 255, 0.6); */
    color: var(--p-text-muted-color);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 添加手风琴图标尺寸控制 */
.tag_accordion_icon .pi {
    font-size: 12px;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 加号图标样式 */
.accordion_add_icon {
    margin-right: 6px;
    cursor: pointer;
    opacity: 0.6;
    transition: all 0.2s ease;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.accordion_add_icon:hover {
    opacity: 1;
    color: var(--p-primary-500);
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 85%);
    transform: scale(1.1);
}

.tag_accordion_icon img,
.tag_accordion_icon .svg-icon,
.accordion_arrow_icon {
    width: 10px;
    height: 10px;
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tag_accordion_icon img,
.tag_accordion_icon .svg-icon svg {
    filter: brightness(1.5);
}

.tag_accordion_content {
    display: block;
    max-height: 0;
    padding: 0;
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 90%);
    overflow: hidden;
    cursor: default;
    /* 确保内容区域使用默认指针 */
    /* 移除CSS过渡，改为JavaScript控制动画 */
}

.tag_accordion_content.active {
    display: block;
    max-height: none;
    /* 移除高度限制，让内容自适应 */
    padding: 2px 0;
    overflow: visible;
    /* 移除滚动条，让父容器处理滚动 */
    cursor: default;
    /* 确保激活状态下内容区域也使用默认指针 */
}

/* 优化手风琴动画性能 */
.tag_accordion_content {
    will-change: max-height, padding;
    /* 提示浏览器优化这些属性的动画 */
    transform: translateZ(0);
    /* 启用硬件加速 */
    backface-visibility: hidden;
    /* 避免背面可见性问题 */
}

/* 旋转图标优化 */
.rotate-180 {
    transform: rotate(180deg);
}

.pi.rotate-180,
.accordion_arrow_icon.rotate-180 {
    transform: rotate(180deg);
}

/* 标签容器样式 */
.tag_category_container {
    flex: 1;
    overflow: visible;
    /* 移除滚动条，让父容器处理滚动 */
    padding: 4px;
    position: relative;
    min-height: 0;
    /* 允许flex收缩 */
}

/* 标签项样式 */
.tag_item {
    display: inline-block;
    margin: 4px;
    padding: 4px 10px;
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 10%);
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    border-radius: 12px;
    cursor: pointer;
    /* 确保默认使用指针光标 */
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    user-select: none;
}

.tag_item:hover {
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 84%);
    ;
    border-color: rgba(255, 255, 255, 0.2);
    z-index: 10210;
}

.tag_item_text {
    font-size: 14px;
    /* color: rgba(255, 255, 255, 0.731); */
    color: var(--p-inputtext-color);
}

/* 标签使用状态样式 */
.tag_item.used {
    background-color: rgba(40, 120, 40, 0.8);
    border-color: rgba(100, 255, 100, 0.2);
}

.tag_item.used:hover {
    background-color: rgba(50, 140, 50, 0.9);
}

.tag_item.used .tag_item_text {
    color: rgba(200, 255, 200, 0.9);
}

/* 自定义滚动条样式 */
.tag_category_container::-webkit-scrollbar {
    width: 6px;
}

.tag_category_container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
}

.tag_category_container::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%);
    border-radius: 3px;
}

.tag_category_container::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%);
}

/* 自定义 tooltip 样式 */
.tag_tooltip {
    position: fixed;
    padding: 8px 12px;
    background-color: color-mix(in srgb, var(--bg-color), transparent 10%);
    /* color: white; */
    color: var(--p-inputtext-color);
    font-size: 12px;
    border-radius: 8px;
    white-space: pre-line;
    max-width: 300px;
    word-wrap: break-word;
    line-height: 1.6;
    z-index: 10250;
    pointer-events: none;
    animation: clipFadeInDown 0.2s ease-in-out;
    transform-origin: top center;
    will-change: transform, opacity;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 添加 tooltip 中分类路径的样式 */
.tag_tooltip .tooltip_path {
    display: block;
    font-size: 12px;
    color: color-mix(in srgb, var(--p-inputtext-color), transparent 60%);
    margin-top: 4px;
}

/* ---可滚动Tabs栏样式--- */
.popup_container .popup_tabs_container {
    position: relative;
    border-bottom: 1px solid var(--p-content-border-color);
    /* background-color: rgba(30, 30, 30, 0.8); */
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
    user-select: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
}

/* 滚动区域 */
.popup_container .popup_tabs_scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 0;
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    width: 100%;
}

/* 隐藏滚动条 */
.popup_container .popup_tabs_scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Tabs栏 */
.popup_container .popup_tabs {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: 2px;
    padding: 4px 0 0;
    position: relative;
}

/* 为第一个标签添加左侧边距 */
.popup_container .popup_tabs .popup_tab:first-child {
    margin-left: 6px;
}

/* 单个Tab标签 */
.popup_container .popup_tab {
    display: inline-block;
    padding: 4px 10px 8px 10px;
    font-size: 12px;
    /* color: rgba(255, 255, 255, 0.6); */
    color: var(--p-text-muted-color);
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 120px;
    position: relative;
    border-radius: 0;
}

/* Tab激活状态 - 添加底部高亮条 */
.popup_container .popup_tab.active {
    /* color: rgba(255, 255, 255, 0.9); */
    color: var(--p-listbox-option-selected-color);
    background-color: transparent;
    box-shadow: none;
}

/* 底部高亮条基础样式 */
.popup_container .popup_tab::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: rgba(100, 180, 255, 0.8);
    border-radius: 2px 2px 0 0;
    transform-origin: center;
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* 底部高亮条激活状态 */
.popup_container .popup_tab.active::after {
    transform: translateX(-50%) scaleX(1);
}

/* 底部高亮条退出动画 */
.popup_container .popup_tab.active.exiting::after {
    transform: translateX(-50%) scaleX(0);
}

/* 当前节点的底部高亮条颜色 */
.popup_container .popup_tab.current_node::after {
    background-color: var(--p-green-500);
}

/* Tab悬停效果 */
.popup_container .popup_tab:hover {
    /* color: rgba(255, 255, 255, 0.9); */
    color: var(--p-inputtext-color);

}

/* 当前节点标识 */
.popup_container .popup_tab.current_node {
    background-color: transparent;
    /* color: rgba(200, 255, 200, 0.8); */
    color: var(--p-listbox-option-selected-color);
}

.popup_container .popup_tab.current_node.active {
    background-color: transparent;
    color: var(--p-green-500);
    box-shadow: none;
}

.popup_container .popup_tab.current_node:hover {
    background-color: rgba(0, 170, 80, 0.1);
    border-radius: 8px 8px 0 0;
}

/* Tab内容容器 */
.popup_container .popup_tab_content {
    display: none;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%) transparent;
    padding-bottom: 8px;
    min-height: 0;
    /* 允许flex收缩 */
}

.popup_container .popup_tab_content::-webkit-scrollbar {
    width: 6px;
}

.popup_container .popup_tab_content::-webkit-scrollbar-track {
    background: transparent;
}

.popup_container .popup_tab_content::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%);
    border-radius: 3px;
}

.popup_container .popup_tab_content.active {
    display: flex;
    flex-direction: column;
}

/* 滚动指示器 - 漂浮设计 */
.popup_container .tabs_scroll_indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--p-text-muted-color);
    cursor: pointer;
    z-index: 10;
    pointer-events: auto;
    transition: color 0.2s ease;
    border: none;
}

/* 添加滚动指示器图标尺寸控制 */
.popup_container .tabs_scroll_indicator .pi {
    font-size: 14px;
    transition: transform 0.2s ease;
}

/* 左侧滚动指示器 */
.popup_container .tabs_scroll_indicator.left {
    left: 0;
    background: linear-gradient(to right,
            var(--p-content-background) 0%,
            var(--p-content-background) 40%,
            transparent 100%);
}

/* 右侧滚动指示器 */
.popup_container .tabs_scroll_indicator.right {
    right: 0;
    background: linear-gradient(to left,
            var(--p-content-background) 0%,
            var(--p-content-background) 40%,
            transparent 100%);
}

.popup_container .tabs_scroll_indicator:hover {
    color: var(--p-text-color);
}

.popup_container .tabs_scroll_indicator:hover .pi {
    transform: scale(1.2);
}

/* 滚动指示器图标样式 */
.popup_container .scroll_indicator_icon {
    width: 12px;
    height: 12px;
    display: block;
    filter: brightness(1.5);
}

/* 左侧滚动指示器图标旋转 */
.popup_container .rotate_left {
    transform: rotate(-90deg);
}

/* 右侧滚动指示器图标旋转 */
.popup_container .rotate_right {
    transform: rotate(-90deg);
}

.popup_container .rotate-180 {
    transform: rotate(180deg);
}

/* 拖动时的样式 */
.popup_container.dragging {
    opacity: 0.95;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.popup_title_bar.dragging {
    cursor: grabbing !important;
}

/* ---窗口大小调节功能样式--- */
/* 窗口大小调节手柄 */
.popup_resize_handle {
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 14px !important;
    height: 18px !important;
    cursor: se-resize !important;
    border-radius: 0 0 8px 0;
    z-index: 1001 !important;
    /* 确保在最上层 */
    background: transparent;
    transition: opacity 0.2s ease;
    color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%);
    opacity: 0.7;
    pointer-events: auto !important;
    /* 确保可以接收鼠标事件 */
}

.popup_resize_handle:hover {
    opacity: 1 !important;
    color: var(--fg-color);
}

/* 确保图标正确显示 */
.popup_resize_handle .svg-icon {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
    pointer-events: none;
    /* 图标不接收事件，让父元素处理 */
}

/* 窗口调节中的样式 */
.popup_container.resizing {
    transition: none !important;
    user-select: none;
}

.popup_container.resizing .popup_resize_handle {
    opacity: 1 !important;
}

/* 标签弹窗特定样式 */
.popup_container.tag_popup {
    resize: none;
    /* 禁用原生的resize功能，使用自定义的 */
    max-width: none;
    /* 移除宽度限制，允许调节宽度 */
    min-width: 300px;
    /* 设置最小宽度 */
    min-height: 200px;
    /* 设置最小高度 */
    max-height: none;
    /* 移除高度限制，允许调节高度 */
}

/* 确保内容在调节时不会溢出 */
.popup_container.resizing .tag_category_container,
.popup_container.resizing .popup_tab_content {
    overflow: hidden;
}

/* 标签弹窗的内容区域适应动态高度 */
.popup_container.tag_popup .popup_tab_content {
    flex: 1;
    min-height: 0;
    /* 允许flex收缩 */
    overflow-y: auto;
    /* 只有标签页内容容器有滚动条 */
    overflow-x: hidden;
}

.popup_container.tag_popup .tag_category_container {
    flex: 1;
    min-height: 0;
    /* 允许flex收缩 */
    overflow: visible;
    /* 移除滚动条，让父容器处理 */
}

/* 确保手风琴内容不产生滚动条 */
.popup_container.tag_popup .tag_accordion_content {
    overflow: visible !important;
}

.popup_container.tag_popup .tag_accordion_content.active {
    overflow: visible !important;
}

.popup_container.tag_popup .tag_search_result_list {
    max-height: none !important;
    /* 移除固定高度限制 */
    height: 100% !important;
    /* 占满可用高度 */
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    position: relative !important;
    /* 为无匹配消息的绝对定位提供参考 */
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    /* 确保垂直滚动可用 */
    overflow-x: hidden !important;
    /* 防止水平滚动 */
    box-sizing: border-box !important;
    /* 确保padding计算在内 */
    min-height: 0 !important;
    /* 允许flex收缩 */
}

/* 搜索结果列表的滚动条样式 */
.tag_search_result_list::-webkit-scrollbar {
    width: 6px;
}

.tag_search_result_list::-webkit-scrollbar-track {
    background: transparent;
}

.tag_search_result_list::-webkit-scrollbar-thumb {
    background-color: color-mix(in srgb, var(--p-button-text-secondary-color), transparent 50%);
    border-radius: 3px;
}

/* 搜索结果空消息样式 */
.search_empty_message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--p-text-muted-color);
    font-size: 14px;
    width: 100%;
    pointer-events: none;
    user-select: none;
}

/* 搜索状态下的特殊样式 */
.popup_container.tag_popup:has(.tag_search_result_list) .popup_tabs_container,
.popup_container.tag_popup:has(.tag_search_result_list) .tag_category_container {
    display: none !important;
    visibility: hidden !important;
}

/* 确保搜索结果列表的父容器有正确的高度和溢出设置 */
.popup_container.tag_popup:has(.tag_search_result_list) {
    overflow: hidden;
}

.popup_container.tag_popup:has(.tag_search_result_list)>*:not(.popup_title_bar) {
    height: calc(100% - 60px);
    /* 减去标题栏高度 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.popup_container.tag_popup .tag_search_result_list:empty::after {
    content: '';
    display: block;
    height: 100%;
    min-height: 300px;
}

/* ====================== 按钮右键菜单样式 ====================== */

/* 菜单容器样式 */
.button-context-menu {
    position: fixed;
    background-color: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: 8px;
    min-width: 100px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10215;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: var(--p-text-color, #ddd);
    backdrop-filter: blur(8px) !important;
    overflow: hidden;
}

/* 菜单显示状态 */
.button-context-menu.button-menu-visible {
    opacity: 1;
    transform: translateY(0);
    animation: clipFadeInDown 0.2s ease-in-out;
}

/* 菜单项列表 */
.button-menu-list {
    list-style: none;
    margin: 0;
    padding: 4px;
}

/* 菜单项 */
.button-menu-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
    user-select: none;
}

/* 菜单项悬停状态 */
.button-menu-item:hover {
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 84%);
    border-radius: 4px;
}

/* 菜单分隔线 */
.button-menu-separator {
    height: 1px;
    margin: 4px 0;
    background-color: var(--p-content-border-color, #444);
}

/* 菜单图标 */
.button-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: var(--p-text-muted-color, #aaa);
}

/* 菜单图标中的SVG */
.button-menu-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* 菜单标签 */
.button-menu-label {
    flex: 1;
    color: var(--p-text-muted-color, #aaa);
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 过长时显示省略号 */
}

/* 快捷键提示 */
.button-menu-shortcut {
    color: var(--p-text-muted-color, #999);
    margin-left: 8px;
    font-size: 12px;
    opacity: 0.7;
}

/* 禁用菜单项 */
.button-menu-item-disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

/* 禁用菜单项悬停状态 */
.button-menu-item-disabled:hover {
    background-color: transparent;
}

/* 选中状态的菜单项 */
.button-menu-item.selected {
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 90%);
}

.button-menu-item.selected .button-menu-label,
.button-menu-item.selected .button-menu-icon {
    color: var(--p-listbox-option-selected-color, #fff);
}

/* 菜单项激活状态 */
.button-menu-item:active {
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 70%);
}

/* 菜单项键盘焦点状态 */
.button-menu-item-focus {
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 84%);
    outline: none;
}

/* 菜单项键盘焦点状态下的标签 */
.button-menu-item-focus .button-menu-label {
    color: var(--p-inputtext-color, #fff);
}

/* 激活状态图标样式 */
.active-status {
    color: var(--p-green-500, #4caf50) !important;
}

/* 未激活状态图标样式 */
.inactive-status {
    color: var(--p-text-muted-color, #aaa) !important;
}

/* ===== 子菜单扩展样式（按钮右键菜单） ===== */
/* 允许容器显示子菜单 */
.button-context-menu {
    overflow: visible;
    min-width: 140px;
}

/* 右侧箭头图标 */
.button-menu-right-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: var(--p-text-muted-color, #aaa);
    font-size: 12px;
}

/* 子菜单容器（默认在父项右侧，位置由JS动态调整） */
.button-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: 2px;
    background-color: var(--p-content-background);
    border: 1px solid var(--p-content-border-color);
    border-radius: 8px;
    min-width: 20px;
    /* 增加宽度以容纳长模型名 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    overflow: visible;
    /* 改为visible以支持嵌套子菜单溢出 */
    z-index: 10216;
    /* 高于父菜单 */
}

/* 第三级及更深层子菜单的z-index递增 */
.button-submenu .button-submenu {
    z-index: 10217;
}

.button-submenu .button-submenu .button-submenu {
    z-index: 10218;
}

/* 悬停显示子菜单 - 支持嵌套 */
.button-menu-item.submenu-open>.button-submenu,
.button-menu-item-has-children:hover>.button-submenu {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

/* 确保所有有子菜单的菜单项都有 position: relative，作为子菜单的定位参考点 */
.button-menu-item-has-children {
    position: relative;
}

/* 确认对话框特定样式 - 紧凑型 */
.popup_container.confirm-dialog {
    min-width: 320px !important;
    max-width: 420px !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
}

.popup_container.confirm-dialog .popup_content {
    flex: 0 0 auto !important;
    min-height: auto !important;
    overflow: visible !important;
}

/* ---标签跨分类拖拽样式--- */

/* 拖拽时标签的样式 */
.tag_item.tag-dragging {
    opacity: 0.8;
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    cursor: grabbing;
}

/* 可放置区域的高亮样式 */
.tag-drop-zone {
    position: relative;
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 92%) !important;
    border: 2px dashed var(--p-primary-400) !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}

/* 可放置区域的脉冲动画 */
.tag-drop-zone::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--p-primary-400);
    border-radius: 10px;
    opacity: 0;
    animation: dropZonePulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes dropZonePulse {

    0%,
    100% {
        opacity: 0;
        transform: scale(1);
    }

    50% {
        opacity: 0.5;
        transform: scale(1.02);
    }
}

/* 拖拽时的幽灵元素 */
.tag-ghost {
    opacity: 0.4;
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 85%) !important;
    border: 1px dashed var(--p-primary-500) !important;
}

/* 标签抓取光标 */
.tag_popup .tag_item {
    cursor: pointer;
}

.tag_popup .tag_item:active {
    cursor: grabbing;
}

/* ---添加分类按钮样式--- */

/* Tab 栏中的添加分类按钮 */
.popup_container .popup_tab.add_category_tab {
    padding: 4px 10px 8px 10px;
    opacity: 0.6;
    transition: all 0.2s ease;
    min-width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup_container .popup_tab.add_category_tab:hover {
    opacity: 1;
    color: var(--p-primary-500);
}

.popup_container .popup_tab.add_category_tab .pi {
    font-size: 10px;
}

/* 添加分类按钮不显示底部高亮条 */
.popup_container .popup_tab.add_category_tab::after {
    display: none;
}

/* 手风琴列表末尾的添加子分类按钮 */
.add_subcategory_button {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
    padding: 8px 16px;
    border: 1px dashed transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--p-text-muted-color);
    opacity: 0.5;
}

.add_subcategory_button:hover {
    opacity: 1;
    border-color: var(--p-content-border-color);
    color: var(--p-text-muted-color);
    background-color: transparent;
}

.add_subcategory_button .pi {
    font-size: 10px;
}