/**
 * 设置界面样式
 */

/* Z-index 层级管理 */
:root {
    --settings-modal-z-index: 9203;
    --settings-dropdown-z-index: 9204;
    --settings-overlay-z-index: 9202;
}

/* 遮罩层样式 */
.settings-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--settings-overlay-z-index);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.settings-modal-overlay.overlay-show {
    opacity: 1;
    visibility: visible;
}

.settings-modal-overlay.overlay-hide {
    opacity: 0;
    visibility: hidden;
}

/* 设置面板容器 */
.settings-panel {
    padding: 1rem;
}

/* 设置项组 */
.settings-group {
    margin-bottom: 1.5rem;
}

/* 设置项标题 */
.settings-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--fg-color);
}

/* 服务申请链接容器样式 */
.settings-service-links {
    display: inline-flex;
    align-items: center;
    background-color: var(--p-button-secondary-background);
    border-radius: 10px;
    padding: 2px 8px;
}


/* 服务申请前缀文本样式（与链接字号一致） */
.settings-service-prefix {
    color: var(--p-button-text-primary-color);
    font-size: 14px;
    padding: 2px 4px;
}

/* 服务申请链接样式 */
.settings-service-link {
    display: inline-block;
    padding: 2px 4px;
    color: var(--p-button-text-primary-color) !important;
    text-decoration: none;
    font-size: 14px;
    font-weight: normal;
    transition: color 0.2s ease;
}

.settings-service-link:hover {
    color: var(--p-button-text-primary-color) !important;
    text-decoration: none !important;
}

/* 服务链接分隔符 */
.settings-service-separator {
    color: var(--p-button-text-primary-color);
    opacity: 0.5;
    padding: 0 2px;
    user-select: none;
}

/* 设置项内容 */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* 按钮组样式 */
.button-group {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* 设置弹窗样式 */
.settings-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    /* 响应式宽度设置 */
    width: min(90vw, 800px);
    min-width: 400px;
    /* 响应式高度设置 */
    max-height: 90vh;
    min-height: 300px;
    margin: 0;
    z-index: var(--settings-modal-z-index);
    background-color: var(--p-dialog-background);
    border: 1px solid var(--p-dialog-border-color);
    border-radius: var(--p-dialog-border-radius);
    box-shadow: var(--p-dialog-shadow);
    color: var(--p-dialog-color);
    /* 添加弹性布局 */
    display: flex;
    flex-direction: column;
    /* 添加动画属性 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 弹窗显示动画类 */
.settings-modal.modal-show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* 弹窗隐藏动画类 */
.settings-modal.modal-hide {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(0.8);
}

/* 拖动时的状态 */
.settings-modal.dragging {
    transition: none;
    cursor: move;
}

/* 标题栏样式 */
.settings-modal .p-dialog-header {
    padding: var(--p-dialog-header-padding);
    border-bottom: 1px solid var(--p-dialog-border-color);

    /* 固定头部 */
    flex: 0 0 auto;
    user-select: none;
}

.settings-modal .p-dialog-content {
    padding: 10px 40px;
    position: relative;
    /* 作为二维码的定位参照，避免被外层裁剪 */
    /* 内容区域自适应 */
    flex: 1 1 auto;
    overflow-y: auto;
    /* 添加平滑滚动 */
    scroll-behavior: smooth;
    /* 优化滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: var(--p-scrollpanel-bar-background) transparent;
}

/* 自定义滚动条样式 */
.settings-modal .p-dialog-content::-webkit-scrollbar {
    width: 10px;
}

.settings-modal .p-dialog-content::-webkit-scrollbar-track {
    background: transparent;
}

.settings-modal .p-dialog-content::-webkit-scrollbar-thumb {
    background: var(--p-scrollpanel-bar-background);
    border-radius: 4px;
}

.settings-modal .p-dialog-content::-webkit-scrollbar-thumb:hover {
    background: var(--p-scrollpanel-bar-background);
}

.settings-modal .p-dialog-footer {
    padding: 10px 40px 20px 40px;


    gap: 0.9rem;
    /* 固定底部 */
    flex: 0 0 auto;
}

/* 表单部分样式 */
.settings-form-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--p-dialog-border-color);
}

.settings-form-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.settings-form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    color: var(--p-dialog-header-color);
}

/* 表单组样式 */
.settings-form-group {
    margin-bottom: 1rem;
}

/* 水平布局的表单组 */
.settings-form-group.horizontal {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.settings-form-group.horizontal>* {
    flex: 1;
    min-width: 0;
    /* 防止flex项溢出 */
}

/* 调整水平布局中标签的样式 */
.settings-form-group.horizontal .settings-form-label {
    margin-bottom: 0.5rem;
}

/* 调整下拉选择器在水平布局中的样式 */
.settings-form-group.horizontal .p-dropdown,
.settings-form-group.horizontal .p-inputtext {
    width: 100%;
    min-width: 0;
}

/* 确保下拉选择器的容器不会被挤压 */
.settings-form-group.horizontal .p-dropdown-container {
    min-width: 150px;
}

/* 确保输入框容器不会被挤压 */
.settings-form-group.horizontal .p-input-wrapper {
    min-width: 150px;
}

.settings-form-group:last-child {
    margin-bottom: 0;
}

.settings-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--p-text-color);
}

/* 输入框容器样式 */
.flex-1 {
    flex: 1;
    width: 100%;
}

/* 优化关闭按钮悬停效果 */
.settings-modal .p-dialog-header-icon.p-dialog-header-close {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    color: var(--p-button-text-secondary-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.settings-modal .p-dialog-header-icon.p-dialog-header-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.settings-modal .p-dialog-header-icon.p-dialog-header-close .pi-times {
    font-size: 1rem;

}

/* 独立下拉选择组件样式（不依赖 PrimeVue 全局样式） */
/* 仅影响通过小助手创建的选择框，不改变ComfyUI内置组件 */
.pa-dropdown {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    background: var(--p-inputtext-background);
    border: 1px solid var(--p-inputtext-border-color);
    border-radius: 6px;
    transition: border-color 0.2s;
    width: 100%;
    box-shadow: var(--p-inputtext-shadow);
    height: 2.5rem;
}

.pa-dropdown:hover {
    border-color: var(--p-form-field-hover-border-color);
}

.pa-dropdown.p-focus {
    border-color: var(--p-form-field-focus-border-color);
}

.pa-dropdown .pa-dropdown-label {
    flex: 1 1 auto;
    border: 0 none;
    color: var(--p-inputtext-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 1%;
    height: 100%;
    cursor: pointer;
}

.pa-dropdown .pa-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    color: var(--p-form-field-hover-border-color);
    height: 100%;
}

/* 下拉面板（独立样式） */
.pa-dropdown-panel {
    z-index: var(--settings-dropdown-z-index);
    background: var(--p-inputtext-background);
    border: 1px solid var(--p-inputtext-border-color);
    box-shadow: var(--p-inputtext-shadow);
    border-radius: 6px;
    transform-origin: center top;
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
        opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}

.pa-dropdown-panel.p-hidden {
    opacity: 0;
    transform: scaleY(0.8);
    pointer-events: none;
}

.pa-dropdown-panel.p-enter-active {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}

/* 隐藏辅助可访问性选择器（在未加载PrimeVue时也生效） */
.p-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

/* 面板内容滚动容器（独立样式） */
.pa-dropdown-panel .p-dropdown-items-wrapper {
    max-height: 240px;
    overflow: auto;
}


/* 列表与选项（独立样式） */
.pa-dropdown-panel .p-dropdown-items {
    padding: 4px;
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pa-dropdown-panel .p-dropdown-item {
    padding: 10px 12px;
    margin: 0;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s;
    color: var(--p-select-option-color);
}

.pa-dropdown-panel .p-dropdown-item:hover {
    background-color: var(--p-form-field-filled-hover-background);
}

.pa-dropdown-panel .p-dropdown-item.p-highlight {
    background-color: var(--p-list-option-selected-focus-background);
    color: var(--p-form-field-focus-border-color);
}

/* 水平表单布局中的宽度适配 */
.settings-form-group.horizontal .pa-dropdown,
.settings-form-group.horizontal .p-inputtext {
    width: 100%;
    min-width: 0;
}

.settings-form-group.horizontal .pa-dropdown-container {
    min-width: 150px;
}


/* 选择器控件样式 */
.settings-modal .p-dropdown:not(.pa-dropdown) {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    user-select: none;
    background: var(--p-select-background);
    border: 1px solid var(--p-select-border-color);
    border-radius: var(--p-select-border-radius);
    transition: border-color 0.2s;
    width: 100%;
    box-shadow: var(--p-select-shadow);
    height: 2.5rem;
}

.settings-modal .p-dropdown:not(.pa-dropdown):hover {
    border-color: var(--p-form-field-hover-border-color);
}

.settings-modal .p-dropdown:not(.pa-dropdown).p-focus {
    border-color: var(--p-primary-color);
}

.settings-modal .p-dropdown-label:not(.pa-dropdown-label) {
    flex: 1 1 auto;
    padding: var(--p-select-padding-y) var(--p-select-padding-x);
    padding-right: 0;
    background: transparent;
    border: 0 none;
    color: var(--p-select-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 1%;
    height: 100%;
    cursor: pointer;
}

.settings-modal .p-dropdown-trigger:not(.pa-dropdown-trigger) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    color: var(--p-button-text-secondary-color);
    height: 100%;
}

/* 下拉面板动画相关样式（排除小助手下拉） */
.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel),
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) {
    z-index: var(--settings-dropdown-z-index);
    background: var(--p-dialog-background);
    border: 1px solid var(--p-select-overlay-border-color);
    box-shadow: var(--p-select-overlay-shadow);
    border-radius: var(--p-select-overlay-border-radius);
    transform-origin: center top;
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
        opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
}

.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel).p-hidden,
.settings-modal-dropdown-panel:not(.pa-dropdown-panel).p-hidden {
    opacity: 0;
    transform: scaleY(0.8);
    pointer-events: none;
}

.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel).p-enter-active,
.settings-modal-dropdown-panel:not(.pa-dropdown-panel).p-enter-active {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}

.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-items,
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-items {
    padding: var(--p-list-padding, 0.5rem 0);
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--p-select-list-gap);
}

.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item,
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item {
    padding: var(--p-list-item-padding, 0.75rem 1rem);
    margin: 0;
    cursor: pointer;
    border-radius: var(--p-select-option-border-radius);
    transition: background-color 0.2s;
    color: var(--p-list-item-color);
}

.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item:hover,
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item:hover {
    background-color: var(--p-select-option-focus-background);
    color: var(--p-select-option-focus-color);
}

.settings-modal .p-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item.p-highlight,
.settings-modal-dropdown-panel:not(.pa-dropdown-panel) .p-dropdown-item.p-highlight {
    background-color: var(--p-select-option-selected-background);
    color: var(--p-select-option-selected-color);
}

/* 响应式布局媒体查询 */
@media screen and (max-width: 640px) {
    .settings-modal {
        width: 95vw;
        min-width: 320px;
        margin: 0.5rem;
    }

    .settings-form-group {
        margin-bottom: 0.75rem;
    }

    .settings-form-section {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
    }
}

/* 拖拽排序相关样式 */
.tags-manager-container .tag_accordion.dragging,
.tags-manager-container .tag_item.dragging {
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.tags-manager-container .tag_accordion.drag-over-top {
    border-top: 3px solid var(--p-primary-500) !important;
    margin-top: -1px;
}

.tags-manager-container .tag_accordion.drag-over-bottom {
    border-bottom: 3px solid var(--p-primary-500) !important;
    margin-bottom: -1px;
}

.tags-manager-container .tag_item.drag-over-left {
    border-left: 3px solid var(--p-primary-500) !important;
    margin-left: -1px;
}

.tags-manager-container .tag_item.drag-over-right {
    border-right: 3px solid var(--p-primary-500) !important;
    margin-right: -1px;
}

/* 标签管理界面特有样式 */
.tags-manager-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tags-scroll-container {
    min-height: 300px;
}

.tags-manager-container .tag_item {
    cursor: grab;
    user-select: none;
}

.tags-manager-container .tag_item:active {
    cursor: grabbing;
}

.tags-manager-container .tag_accordion {
    cursor: grab;
    user-select: none;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.tags-manager-container .tag_accordion:active {
    cursor: grabbing;
}

/* 标签配置管理器样式 */
.tags-config-container {
    width: 800px;
    height: 600px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tags-config-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

/* 标签管理弹窗大小 */
.tags-config-dialog {
    width: 760px;
    height: 600px;
}

.tag-management-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tags-action-container {
    display: flex;
    gap: 8px;
    background: transparent;
}

.tags-scroll-container {
    flex: 1;
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 10px;
    border: 1px solid var(--comfy-menu-secondary-bg);
    border-radius: 8px;
    background-color: var(--p-listbox-background);
    margin-top: 10px;
    margin-bottom: 10px;
}

.settings-action-btn {
    margin: 0 4px;
}

/* 删除按钮样式 */

.tag_delete_button {
    background: none;
    border: none;
    color: var(--p-button-text-secondary-color);
    cursor: pointer;
    padding: 2px;
    margin-left: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    /* 添加最小宽度 */
    min-height: 24px;
    /* 添加最小高度 */
    transition: all 0.2s;
    opacity: 0.5;
    box-sizing: border-box;
    /* 确保padding不会影响整体大小 */
}

.tag_delete_button.small {
    width: 20px;
    height: 20px;
    min-width: 20px;
    /* 添加最小宽度 */
    min-height: 20px;
    /* 添加最小高度 */
    padding: 2px;
    box-sizing: border-box;
    /* 确保padding不会影响整体大小 */
}

.tag_delete_button:hover {
    background: rgba(255, 100, 100, 0.2);
    color: rgba(255, 100, 100, 1);
    opacity: 1;
}

.tag_delete_icon {
    width: 14px;
    height: 14px;
    min-width: 14px;
    /* 添加最小宽度 */
    min-height: 14px;
    /* 添加最小高度 */
    flex-shrink: 0;
    /* 防止图标被压缩 */
    display: block;
    /* 确保图标显示为块级元素 */
}

.tag_delete_icon.small {
    width: 12px;
    height: 12px;
    min-width: 12px;
    /* 添加最小宽度 */
    min-height: 12px;
    /* 添加最小高度 */
}

/* 编辑按钮样式 */
.tag_edit_button {
    background: none;
    border: none;
    color: var(--p-text-muted-color);
    cursor: pointer;
    padding: 2px;
    margin-left: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    /* 添加最小宽度 */
    min-height: 24px;
    /* 添加最小高度 */
    transition: all 0.2s;
    opacity: 0.5;
    box-sizing: border-box;
    /* 确保padding不会影响整体大小 */
}

.tag_edit_button.small {
    width: 20px;
    height: 20px;
    min-width: 20px;
    /* 添加最小宽度 */
    min-height: 20px;
    /* 添加最小高度 */
    padding: 2px;
    box-sizing: border-box;
    /* 确保padding不会影响整体大小 */
}

.tag_edit_button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: rgb(207, 215, 211);
    opacity: 1;
}

.tag_edit_icon {
    color: var(--p-button-text-secondary-color);
    font-size: 12px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.tag_edit_icon.small {
    width: 10px;
    height: 10px;
}

.tag_action_icon {
    font-size: 14px;
    width: 14px;
    /* 添加固定宽度 */
    height: 14px;
    /* 添加固定高度 */
    min-width: 14px;
    /* 添加最小宽度 */
    min-height: 14px;
    /* 添加最小高度 */
    flex-shrink: 0;
    /* 防止图标被压缩 */
    display: flex;
    /* 使用flex布局确保内容居中 */
    align-items: center;
    justify-content: center;
}

.tag_action_icon.small {
    font-size: 12px;
    width: 12px;
    /* 添加固定宽度 */
    height: 12px;
    /* 添加固定高度 */
    min-width: 12px;
    /* 添加最小宽度 */
    min-height: 12px;
    /* 添加最小高度 */
}

/* 确保图标在按钮中居中显示 */
.tag_accordion_icon {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 添加右对齐 */
    gap: 4px;
    height: 24px;
    /* 保持固定高度 */
    min-width: 80px;
    /* 确保容器有足够的宽度容纳所有图标 */
}

.tag_accordion_icon .accordion_arrow_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 2px;
    border-radius: 50%;
    color: var(--p-button-text-secondary-color);
    opacity: 0.5;
    transition: all 0.2s;
    box-sizing: border-box;
    cursor: pointer;
}

.tag_accordion_icon .accordion_arrow_icon:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

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

/* 调整图标容器内部布局 */
.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;
    min-height: 32px;
    /* 确保标题栏有足够的高度 */
}

.tag_accordion_title {
    flex: 1;
    font-size: 12px;
    color: var(--p-text-muted-color);
    font-weight: 500;
    margin-right: 8px;
    /* 添加右边距，与图标保持距离 */
    overflow: hidden;
    /* 防止文本溢出 */
    text-overflow: ellipsis;
    /* 文本溢出时显示省略号 */
    white-space: nowrap;
    /* 保持单行 */
}

.tags_container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px;
    background-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 90%);
    border-radius: 0 0 4px 4px;
}

/* 使用popup.css中定义的标签样式，只修改cursor为grab */
.tags-manager-container .tag_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: grab;
}

.tags-manager-container .tag_item:active {
    cursor: grabbing;
}

.tags-manager-container .tag_accordion {
    position: relative;
    margin-bottom: 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: default;
    /* 标签管理页面中使用默认指针 */
    user-select: none;
}

.tags-manager-container .tag_accordion:hover {
    border-color: color-mix(in srgb, var(--comfy-menu-secondary-bg), transparent 60%);
}

.tags-manager-container .tag_accordion_header {
    cursor: grab;
    /* 只有标题部分可拖动 */
}

.tags-manager-container .tag_accordion_header:active {
    cursor: grabbing;
    /* 拖动时显示抓取光标 */
}

/* 拖拽状态样式 */
.tags-manager-container .tag_accordion.dragging,
.tags-manager-container .tag_item.dragging {
    opacity: 0.5;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

/* 新增拖拽动画样式 */
.tags-manager-container .tag-dragging,
.tags-manager-container .category-dragging {
    opacity: 0.6 !important;
    /* 移除缩放效果 */
    /* transform: scale(1.02); */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    z-index: 100 !important;
}

/* 拖拽过程中的目标位置指示器 */
.tag-ghost,
.category-ghost {
    opacity: 0.3;
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 85%) !important;
    border: 1px dashed var(--p-primary-500) !important;
}

/* 被选中的元素样式 */
.tag-chosen,
.category-chosen {
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 90%);
    border-color: var(--p-primary-500) !important;
}

/* 拖拽时的样式 */
.tag-drag,
.category-drag {
    opacity: 0.8;
}

/* 添加元素移动的过渡动画 */
.tags-manager-container .tag_accordion,
.tags-manager-container .tag_item {
    /* 移除transform过渡效果 */
    transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* 拖拽排序时的位置指示 */
.sortable-fallback {
    opacity: 0 !important;
}

.sortable-ghost {
    position: relative;
}

.sortable-ghost::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: color-mix(in srgb, var(--p-primary-500), transparent 90%);
    border: 1px dashed var(--p-primary-500);
    z-index: -1;
    border-radius: 4px;
}

.tags-manager-container .tag_accordion.drag-over-top {
    border-top: 2px solid var(--p-primary-500);
}

.tags-manager-container .tag_accordion.drag-over-bottom {
    border-bottom: 2px solid var(--p-primary-500);
}

.tags-manager-container .tag_item.drag-over-left {
    border-left: 2px solid var(--p-primary-500);
}

.tags-manager-container .tag_item.drag-over-right {
    border-right: 2px solid var(--p-primary-500);
}

/* tooltip处理 */
.has-tooltip {
    position: relative;
}

/* 标签容器布局 */
.tags-manager-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 弹窗表单内容样式 */
.dialog-form-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.dialog-form-content .settings-form-group {
    margin-bottom: 1rem;
}

.dialog-form-content .settings-form-group:last-child {
    margin-bottom: 0;
}

/* 确保下拉框和输入框有合适的宽度和间距 */
.dialog-form-content .p-dropdown,
.dialog-form-content .p-inputtext {
    width: 100%;
    box-sizing: border-box;
}

/* 规则配置表单样式 */
.rules-config-form {
    max-height: 70vh;
    overflow: auto;
}

.settings-form-textarea {
    width: 100%;
    min-height: 150px;
    height: calc(100% - 30px);
    resize: vertical;
    font-family: monospace;
    padding: 8px;
    background-color: var(--p-inputtext-background);
    border: 1px solid var(--p-inputtext-border-color);
    border-radius: 4px;
    color: var(--p-inputtext-color);
    flex-grow: 1;
}

/* API配置表单样式 */
.api-config-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* 刷新按钮样式 */
.settings-refresh-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--p-message-info-color);
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.settings-refresh-button:hover {
    background-color: color-mix(in srgb, var(--p-message-info-color), transparent 90%);
}

.refresh-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 表单分组的间距 */
.settings-form-section {
    margin-bottom: 10px;
}

/* 表单输入组件的样式 */
.settings-form-group {
    margin-bottom: 12px;
}

/* 水平布局组的样式 */
.settings-form-group.horizontal {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.settings-form-group.horizontal>div {
    flex: 1;
    min-width: 200px;
}

/* 添加标签管理部分的样式 */
.tag-management-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.tags-config-container {
    width: 100%;
    max-width: 100%;
}

.tags-config-form {
    width: 100%;
    max-width: 100%;
}

.tags-manager-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.tags-scroll-container {
    width: 100%;
    max-width: 100%;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* 确保标签手风琴适配宽度 */
.tag_accordion {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* 确保标签项目不会导致容器溢出 */
.tags_container {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag_item {
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 修复弹窗样式，确保内容不会溢出 */
.settings-dialog {
    max-width: 90vw;
    width: 600px;
}

.settings-dialog-content {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.settings-form-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* 提示词列表样式 */
.prompt-list-container {
    border: 1px solid var(--p-dialog-border-color);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--p-listbox-background);
    height: 250px;
    display: flex;
    flex-direction: column;
}

/* 反推规则配置列表特定高度 */
.vision-prompt-list-container {
    height: 150px;
}

.prompt-list-header {
    display: flex;
    background-color: var(--p-button-secondary-background);
    border-bottom: 1px solid var(--p-dialog-border-color);
    font-weight: 600;
    color: var(--p-dialog-header-color);
    flex-shrink: 0;
    position: relative;
}

.prompt-scroll-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.prompt-list-row {
    display: flex;
    border-bottom: 1px solid var(--p-dialog-border-color);
    transition: background-color 0.2s ease;
    cursor: move;
}

.prompt-list-row:hover {
    background-color: var(--p-select-option-focus-background);
}

.prompt-list-row:last-child {
    border-bottom: none;
}

.prompt-list-row.sortable-ghost {
    opacity: 0.4;
}

.prompt-list-row.sortable-chosen {
    background-color: var(--p-select-option-selected-background);
}

.prompt-list-cell {
    padding: 8px 12px;
    border-right: 1px solid var(--p-dialog-border-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
}

.prompt-list-cell:last-child {
    border-right: none;
}

.prompt-list-cell.status-cell {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
    cursor: pointer;
}

.prompt-list-cell.name-cell {
    width: 150px;
    flex-shrink: 0;
    min-width: 100px;
}

.prompt-list-cell.content-cell {
    flex: 1;
    min-width: 200px;
}

.prompt-list-cell.action-cell {
    width: 100px;
    flex-shrink: 0;
    text-align: center;
    min-width: 80px;
}

/* 列宽调整手柄 */
.column-resizer {
    position: absolute;
    top: 0;
    right: -2px;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    transition: background-color 0.2s ease;
}

.column-resizer:hover {
    background: var(--p-primary-500);
    opacity: 0.8;
}

.column-resizer.resizing {
    background: var(--p-primary-500);
    opacity: 1;
}

/* 确保列单元格有相对定位以支持绝对定位的调整手柄 */
.prompt-list-cell {
    position: relative;
}

/* 拖拽时的全局样式 */
body.column-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

body.column-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* 拖拽排序样式 */
.sortable-drag {
    opacity: 0.8;
    transform: rotate(2deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.prompt-list-row.sortable-ghost {
    opacity: 0.4;
    background: var(--p-primary-100);
}

.prompt-list-row.sortable-chosen {
    background: var(--p-select-option-selected-background);
    border: 1px solid var(--p-primary-500);
}

/* 状态图标样式优化 */
.status-cell .active-status {
    color: var(--p-green-500);
    cursor: pointer;
    transition: color 0.2s ease;
}

.status-cell .inactive-status {
    color: var(--p-surface-400);
    cursor: pointer;
    transition: color 0.2s ease;
}

.status-cell:hover .active-status {
    color: var(--p-green-600);
}

.status-cell:hover .inactive-status {
    color: var(--p-primary-500);
}

/* 状态图标样式 */
.active-status {
    color: var(--p-message-success-color);
}

.inactive-status {
    color: var(--p-message-warn-color);
}

/* 操作按钮样式 */
.prompt-action-btn {
    background: transparent;
    border: none;
    padding: 4px 6px;
    margin: 0 2px;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--p-button-text-secondary-color);
}

.prompt-action-btn:hover {
    background-color: var(--p-button-secondary-background);
}

.prompt-action-btn.toggle-btn:hover {
    color: var(--p-message-info-color);
}

.prompt-action-btn.edit-btn:hover {
    color: var(--p-message-warn-color);
}

.prompt-action-btn.delete-btn:hover {
    color: var(--p-message-error-color);
}

/* 规则配置对话框样式 */
.rules-config-form {
    max-height: 70vh;
    overflow-y: auto;
}

.settings-modal.prompt-edit-dialog {
    width: 600px !important;
    height: 600px !important;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.rules-config-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rules-section {
    margin-bottom: 30px;
}

.rules-section h3 {
    margin: 0 0 15px 0;
    color: var(--p-dialog-header-color);
    font-size: 16px;
    font-weight: 600;
}

/* 标签页样式 */
.settings-modal .popup_tabs_container {
    margin-bottom: 10px;
}

.settings-modal .popup_tabs_scroll {
    overflow-x: hidden;
    overflow-y: hidden;
}

.settings-modal .popup_tabs {
    display: flex;
    border-bottom: 1px solid var(--p-dialog-border-color);
    min-width: max-content;
}

.settings-modal .popup_tab {
    padding: 8px 16px;
    background: var(--p-button-secondary-background);
    border: 1px solid var(--p-dialog-border-color);
    border-bottom: none;
    cursor: pointer;
    margin-right: 2px;
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    font-size: 13px;
    color: var(--p-button-text-secondary-color);
    transition: background-color 0.2s ease;
}

.settings-modal .popup_tab.active {
    background: var(--p-dialog-background);
    border-bottom: 1px solid var(--p-dialog-background);
    margin-bottom: -1px;
    font-weight: 500;
    color: var(--p-dialog-header-color);
}

.settings-modal .popup_tab:hover {
    background: var(--p-select-option-focus-background);
}

.settings-modal .popup_tab.active:hover {
    background: var(--p-dialog-background);
}

.settings-modal .popup_tab_content {
    display: none;
}

.settings-modal .popup_tab_content.active {
    display: block;
}

/* 对话框按钮样式 */
.dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--p-dialog-border-color);
}

.dialog-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.dialog-btn.primary {
    background: var(--p-button-primary-background);
    color: var(--p-button-primary-color);
}

.dialog-btn.primary:hover {
    background: var(--p-button-primary-hover-background);
}

.dialog-btn.secondary {
    background: var(--p-button-secondary-background);
    color: var(--p-button-secondary-color);
}

.dialog-btn.secondary:hover {
    background: var(--p-button-secondary-hover-background);
}



/* 微信徽标悬浮二维码 */
.pa-wechat-badge {
    position: relative;
    /* 作为二维码定位参照 */
    /* 让绝对定位参照到内容容器 */
}

.pa-wechat-qr {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: calc(100% + 6px);
    right: 10px;
    /* 向左偏移，避免被滚动条遮挡 */
    transform: none;
    background: var(--p-dialog-background);
    border: 1px solid var(--p-dialog-border-color);
    border-radius: 10px;
    padding: 6px;
    box-shadow: var(--p-dialog-shadow);
    z-index: calc(var(--settings-modal-z-index) + 5);
    /* 淡入淡出动画 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.pa-wechat-badge:hover .pa-wechat-qr {
    opacity: 1;
    visibility: visible;
}

.pa-wechat-qr-img {
    display: block;
    width: 256px;
    height: auto;
}