app/static/css/session.css

/* app/static/css/session.css - 会话标签样式 */

/* app/static/css/session.css - 会话标签样式 */

/* 整体会话和模型控制区域的容器 */
.session-and-model-controls {
    display: flex;
    flex-direction: column; /* 垂直堆叠 */
    gap: 10px; /* 元素之间的间距 */
    margin-bottom: 15px;
    padding: 10px;
    background-color: var(--bg-light); /* 使用变量 */
    border-radius: var(--border-radius); /* 使用变量 */
    box-shadow: var(--card-shadow); /* 使用变量 */
}

/* 会话操作按钮和状态文本的容器 */
.session-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* 按钮和文本之间的间距 */
    flex-wrap: wrap; /* 允许换行 */
}

/* 新建会话和删除当前按钮的通用样式 */
.action-button {
    padding: 8px 15px;
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-color);
    color: white;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

.action-button:hover {
    background-color: var(--primary-color-dark);
}

/* 会话状态文本样式 */
.session-status-text {
    font-size: 0.9em;
    color: var(--text-color-secondary);
    margin-left: auto; /* 推到最右边 */
    padding-right: 10px; /* 右侧内边距 */
}

/* 会话标签容器 */
.session-tabs-container {
    overflow-x: auto; /* 允许水平滚动 */
    white-space: nowrap; /* 防止标签换行 */
    padding-bottom: 5px; /* 滚动条的间距 */
    -webkit-overflow-scrolling: touch; /* 改善移动端滚动体验 */
}

#session-tabs {
    display: flex; /* 启用flex布局，使标签水平排列 */
    gap: 8px; /* 标签之间的间距 */
    padding: 5px 0; /* 上下内边距 */
}

.session-tab {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
    color: var(--text-color-primary);
    cursor: pointer;
    font-size: 0.85em;
    transition: all 0.2s ease;
    flex-shrink: 0; /* 防止标签缩小 */
}

.session-tab:hover {
    background-color: var(--bg-hover);
    border-color: var(--primary-color);
}

.session-tab.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color-dark);
    font-weight: bold;
}

/* 模型选择区域的样式 */
.model-selector-area {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 5px; /* 与上方会话标签的间距 */
}

.model-select-label {
    font-size: 0.9em;
    color: var(--text-color-primary);
    white-space: nowrap; /* 防止换行 */
}

.model-select-dropdown {
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background-color: var(--bg-secondary);
    color: var(--text-color-primary);
    font-size: 0.9em;
    cursor: pointer;
    flex-grow: 1; /* 允许下拉框占据剩余空间 */
    max-width: 250px; /* 最大宽度 */
}

.model-select-dropdown:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}