/* taskpane.css (Final Version with Comments) */

/* --- 全局样式 --- */
/* 作用于整个插件的根基，定义了基本字体、布局和背景色 */
body, html {
    height: 100%; /* 让插件内容区域占满整个侧边栏高度 */
    margin: 0; /* 移除默认的页面边距 */
    font-family: "Segoe UI", "Microsoft YaHei UI", sans-serif; /* 使用Windows/Office的默认字体，保证风格统一 */
    display: flex; /* 使用Flexbox布局，便于头部、内容、页脚的垂直排列 */
    flex-direction: column; /* 设置Flexbox的主轴方向为垂直 */
    background-color: #f7f9fc; /* 设置一个非常淡的灰色作为页面背景色 */
    color: #333; /* 设置默认的文字颜色 */
}
/* 一个通用的内边距类，用于给容器增加空间 */
.padding { padding: 15px; }

/* --- 头部与标签页 --- */
/* 控制整个顶部区域（标题、信息栏、标签页）的样式 */
.header { 
    padding: 15px 15px 0 15px; /* 设置内边距 (上、左右、下) */
    background-color: #ececec; /* 设置头部的背景色 */
    border-bottom: 1px solid #e1e5eb; /* 在头部下方添加一条细线，与内容区分隔 */
}
/* 控制主标题 "智能编辑助手" 的样式 */
h1.ms-font-xl { 
    color: #3a6ea1; /* 设置标题文字颜色 */
    margin-bottom: 12px; /* 设置标题与下方元素的间距 */
}
/* 控制两个标签页 ("文本校对", "参考文献") 的容器 */
.tab-bar { 
    display: flex; /* 让两个标签页按钮水平排列 */
    border-bottom: 2px solid #e1e5eb; /* 标签页下方的灰色底线 */
}
/* 控制单个标签页按钮的通用样式 */
.tab-button {
    flex: 1; /* 让两个按钮平均分配容器宽度 */
    padding: 10px 15px; /* 设置按钮的内边距，增加点击区域 */
    border: none; /* 移除按钮的默认边框 */
    background-color: transparent; /* 使按钮背景透明 */
    cursor: pointer; /* 鼠标悬停时显示手形光标 */
    text-align: center; /* 文字居中 */
    font-size: 14px; /* 设置字体大小 */
    color: #5a6e82; /* 设置未选中时的文字颜色 */
    border-bottom: 2px solid transparent; /* 预留一个透明的下边框，用于激活时变色 */
    margin-bottom: -2px; /* 让按钮的下边框与容器的下边框重合 */
    transition: all 0.3s ease; /* 为所有属性变化添加平滑的过渡效果 */
}
/* 鼠标悬停在标签页按钮上时的样式 */
.tab-button:hover { 
    background-color: rgba(74, 144, 226, 0.05); /* 添加一个非常淡的蓝色背景 */
    color: #4a90e2; /* 文字变为蓝色 */
}
/* 当前被选中的标签页按钮的样式 (带有 .active 类) */
.tab-button.active { 
    color: #4a90e2; /* 文字变为蓝色 */
    font-weight: 600; /* 字体加粗 */
    border-bottom: 2px solid #4a90e2; /* 下边框变为蓝色，形成选中效果 */
}

/* --- 视图切换 --- */
/* 控制主要内容区域的容器 */
.main-content { 
    flex-grow: 1; /* 让内容区域自动填充头部和页脚之外的所有可用空间 */
    overflow-y: auto; /* 如果内容超出高度，则显示垂直滚动条 */
}
/* 默认情况下，所有视图 (文本校对、参考文献) 都是隐藏的 */
.view { display: none; }
/* 只有带有 .active-view 类的视图才会被显示出来 */
.view.active-view { display: block; }

/* --- 按钮样式 --- */
/* 控制所有通用按钮 (如“校对选中内容”、“清除标记”等) 的基本外观 */
.ms-Button {
    border-radius: 4px; /* 设置圆角 */
    padding: 8px 16px; /* 设置内边距 */
    border: 1px solid #c8d0d8; /* 设置边框颜色 */
    background-color: #ffffff; /* 设置背景色 */
    color: #333; /* 设置文字颜色 */
    transition: all 0.2s ease-in-out; /* 添加平滑过渡效果 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 添加一个轻微的阴影，增加立体感 */
}
/* 鼠标悬停在通用按钮上时的样式 */
.ms-Button:hover { 
    border-color: #a8b4c0; /* 边框颜色变深 */
    background-color: #f5f5f5; /* 背景色变灰 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* 阴影加深 */
}
/* 控制主要操作按钮 (蓝色按钮) 的样式 */
.ms-Button--primary { 
    background-color: #4a90e2; /* 背景色变为蓝色 */
    border-color: #4a90e2; /* 边框色变为蓝色 */
    color: #ffffff; /* 文字变为白色 */
}
/* 鼠标悬停在主要操作按钮上时的样式 */
.ms-Button--primary:hover { 
    background-color: #357abd; /* 蓝色加深 */
    border-color: #357abd; /* 边框色加深 */
}

/* --- 卡片样式 --- */
/* 控制所有建议卡片所在的容器区域 */
.results-container { padding: 8px; }
/* 控制单个建议卡片 (文本校对或参考文献) 的基本外观 */
.suggestion-card {
    background-color: #ffffff; /* 卡片背景为白色 */
    border: 1px solid #e1e5eb; /* 卡片边框 */
    border-radius: 6px; /* 卡片圆角 */
    padding: 15px; /* 卡片内边距 */
    margin-bottom: 12px; /* 卡片之间的垂直间距 */
    box-shadow: 0 2px 5px rgba(44, 62, 80, 0.08); /* 卡片阴影 */
    transition: box-shadow 0.3s ease; /* 为阴影添加过渡效果 */
}
/* 鼠标悬停在建议卡片上时的样式 */
.suggestion-card:hover { 
    box-shadow: 0 4px 12px rgba(44, 62, 80, 0.12); /* 阴影加深，有上浮效果 */
}
/* 控制卡片内所有 <p> 标签的样式 */
.suggestion-card p { 
    margin: 5px 0; /* 设置段落的垂直边距 */
    line-height: 1.5; /* 设置行高，增加可读性 */
}
/* 控制参考文献卡片中“原文”和“建议”文本框的样式 */
.ref-text {
    background-color: rgba(247, 249, 252, 0.7); /* 淡灰色背景 */
    padding: 8px; /* 内边距 */
    border-radius: 4px; /* 圆角 */
    font-family: "Consolas", "Courier New", monospace; /* 使用等宽字体，便于对比 */
    font-size: 13px; /* 字体大小 */
    border: 1px solid #e8edf3; /* 边框 */
}
/* 控制卡片底部“接受/忽略”按钮区域的容器 */
.actions { 
    margin-top: 15px; /* 与上方内容的间距 */
    padding-top: 10px; /* 顶部内边距 */
    border-top: 1px solid #f0f3f7; /* 在按钮区上方添加一条非常淡的分割线 */
}

/* --- 校对卡片专用样式 --- */
/* 控制文本校对卡片中差异对比视图的文字样式 */
.suggestion-diff-view { 
    font-size: 14px; 
    line-height: 1.6; 
    color: #333; 
}
/* 控制文本校对卡片中“类型:”文字的样式 */
.suggestion-type { 
    font-size: 12px; 
    color: #5a6e82; /* 使用较柔和的灰色 */
    margin-top: 8px !important; /* 强制设置与上方内容的间距 */
}

/* --- 差异对比视图的颜色样式 --- */
/* 控制差异对比中被删除文字 (被<del>标签包裹) 的样式 */
.diff-view del, .suggestion-diff-view del {
    background-color: #ffebe9; /* 淡红色背景 */
    color: #c0392b; /* 深红色文字 */
    text-decoration: line-through; /* 添加删除线 */
    padding: 1px 3px; /* 内边距 */
    border-radius: 3px; /* 圆角 */
}
/* 控制差异对比中新增文字 (被<ins>标签包裹) 的样式 */
.diff-view ins, .suggestion-diff-view ins {
    background-color: #e6ffed; /* 淡绿色背景 */
    color: #27ae60; /* 深绿色文字 */
    text-decoration: none; /* 移除下划线 */
    padding: 1px 3px; /* 内边距 */
    border-radius: 3px; /* 圆角 */
}

/* --- 其他组件 --- */
/* (这是一个通用的类，目前可能未被直接使用，但可用于未来的下拉菜单) */
.ms-Dropdown { width: 100%; }
/* 控制状态标签 (如参考文献校对时的“正在处理...”) 的样式 */
.status-label { 
    font-size: 13px; 
    color: #5a6e82; 
    margin-top: 10px; 
    min-height: 1.2em; /* 设置最小高度，防止文本消失时布局跳动 */
}

/* --- 下拉菜单（Dropdown/Select）的样式 --- */
/* 控制下拉菜单的外部容器，模拟Office风格的边框和背景 */
.ms-Dropdown-container {
    position: relative;
    box-sizing: border-box;
    border: 1px solid #605e5c; /* 默认边框颜色 */
    border-radius: 2px; /* 轻微圆角 */
    background-color: #ffffff; /* 白色背景 */
    height: 23px; /* 设置固定高度 */
    margin-top: 4px; /* 与上方标签的间距 */
    transition: border-color 0.2s ease; /* 为边框颜色变化添加过渡效果 */
}
/* 鼠标悬停在下拉菜单上时的样式 */
.ms-Dropdown-container:hover {
    border-color: #212121; /* 边框颜色加深 */
}
/* 当下拉菜单获得焦点时的样式 (蓝色外发光效果) */
.ms-Dropdown-container:focus-within {
    border-color: #0078d4; /* Office 蓝色 */
    outline: 1px solid #0078d4;
    outline-offset: -1px;
}
/* 控制原生的 <select> 元素本身 */
.ms-Dropdown-select {
    width: 100%;
    height: 100%;
    padding: 0 20px 0 12px; /* 内边距 (上、右、下、左)，为右侧箭头留出空间 */
    border: none; /* 移除自己的边框，使用容器的边框 */
    background-color: transparent; /* 背景透明，显示容器的背景 */
    color: #323130;
    font-size: 12px;
    cursor: pointer;
    -webkit-appearance: none; /* 移除浏览器在 Webkit 内核下的默认下拉箭头 */
    -moz-appearance: none; /* 移除浏览器在 Gecko 内核下的默认下拉箭头 */
    appearance: none; /* 移除标准浏览器下的默认下拉箭头 */
}
/* 使用伪元素 ::after 来创建一个自定义的下拉箭头 */
.ms-Dropdown-container::after {
    content: '▼'; /* 使用一个Unicode字符作为箭头 */
    font-size: 10px;
    color: #605e5c;
    position: absolute; /* 绝对定位，相对于容器 */
    right: 12px; /* 距离右侧12px */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 精确垂直居中 */
    pointer-events: none; /* 让箭头不响应鼠标事件，以便用户可以点击到下面的 <select> */
}

/* --- API Key 输入框下方的描述文字样式 --- */
.input-description {
    font-size: 12px;
    color: #605e5c;
    margin: 4px 0 0 0;
    padding: 0;
    font-weight: normal;
}

/* --- 通用输入框（TextField）的样式 --- */
/* (这是一个容器，目前主要用于结构) */
.ms-TextField {
    margin-top: 0;
}
/* 控制实际的 <input> 元素 */
.ms-TextField-field {
    margin-top: 4px;
}

/* --- 顶部激活信息栏的样式 --- */
.activation-info-bar {
    font-size: 12px;
    color: #605e5c;
    background-color: #f3f2f1; /* 淡灰色背景 */
    padding: 6px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    text-align: center;
}

/* --- 头部第一行（标题和退出按钮）的样式 --- */
.header-top-row {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 两端对齐：标题在左，按钮在右 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 12px;
}
/* 移除标题的默认边距，以便在Flexbox中更好地对齐 */
.header-top-row .ms-font-xl {
    margin: 0;
}
/* 控制右上角的“退出”按钮 */
.logout-button {
    background-color: transparent;
    border: none;
    color: #605e5c;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-shadow: none;
}
/* 鼠标悬停在“退出”按钮上时的样式 */
.logout-button:hover {
    background-color: #edebe9;
    color: #201f1e;
    border: none;
    box-shadow: none;
}

/* --- 参考文献样式选项容器的样式 --- */
.style-options-container {
    display: flex; /* 让三个下拉菜单水平排列 */
    justify-content: space-between;
    gap: 10px; /* 设置下拉菜单之间的间距 */
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e1e5eb; /* 在上方添加一条分割线 */
}
/* 控制单个样式选项（标签+下拉菜单）的容器 */
.style-option-group {
    flex: 1; /* 让每个选项组平均分配宽度 */
    display: flex;
    flex-direction: column; /* 让标签在下拉菜单的上方 */
}

/* --- Segment Controls Styling --- */
.segment-controls {
    display: flex;
    gap: 10px;
}
.segment-controls .ms-Button {
    flex: 1;
}

.style-option-group .ms-Label {
    font-size: 13px; /* 您可以根据需要调整这个数值，例如 13px */
    font-weight: 600; /* 可选：让字体稍微加粗，更清晰 */
    margin-bottom: 2px; /* 可选：微调标签与下方下拉框的间距 */
}

/* --- 关键修复：调整段落选择按钮的大小和样式 --- */
.segment-controls .ms-Button {
    padding-top: 6px;    /* 减小垂直内边距 */
    padding-bottom: 6px; /* 减小垂直内边距 */
    padding-left: 6px;  /* 减小水平内边距 */
    padding-right: 6px; /* 减小水平内边距 */
    
    /* 可选：让字体也稍微变小一点，以匹配按钮大小 */
    font-size: 13px; 
}

/* --- 可选修复：确保所有按钮组垂直对齐 --- */
.ms-StackItem {
    display: flex;
    align-items: center; /* 确保按钮组内的元素垂直居中对齐 */
    gap: 10px; /* 为按钮之间提供一些间距 */
}

.ms-TextField {
    font-size: 12px;
}