/* features.css - 特殊功能样式 */

/* Grounding 相关样式 */
.grounding-info {
  margin-top: 16px;
  padding: 0;
  border-radius: var(--border-radius);
  font-size: 14px;
  color: var(--text-secondary);
  overflow: hidden;
  box-shadow: var(--box-shadow-sm);
  border: 1px solid var(--grounding-border);
}

.grounding-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--grounding-bg);
  border-bottom: 1px solid var(--grounding-border);
}

.grounding-header svg {
  margin-right: 8px;
  color: var(--primary);
  width: 16px;
  height: 16px;
}

.grounding-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.grounding-content {
  padding: 16px;
  background-color: white;
}

.grounding-section {
  margin-bottom: 16px;
}

.grounding-section:last-child {
  margin-bottom: 0;
}

.grounding-section h5 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.grounding-sources ul,
.search-queries ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.grounding-sources li {
  margin-bottom: 8px;
  padding: 8px 10px;
  background-color: var(--surface-2);
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color-light);
  display: flex;
  align-items: center;
}

.grounding-sources li::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234263eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.grounding-sources li a {
  color: var(--primary);
  text-decoration: none;
  word-break: break-all;
  display: inline-block;
  transition: color var(--transition-fast);
}

.grounding-sources li a:hover {
  text-decoration: underline;
  color: var(--primary-hover);
}

/* Google搜索建议样式 */
.search-suggestions-container {
  margin-bottom: 16px;
  padding: 0;
  border-radius: var(--border-radius);
  background-color: white;
  border: 1px solid var(--border-color);
  overflow: hidden;
}

.google-search-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-color-light);
}

.google-search-header img {
  height: 24px;
  margin-right: 12px;
}

.search-links-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
}

.search-link {
  display: inline-block;
  padding: 6px 14px;
  background-color: var(--surface-2);
  border-radius: 20px;
  border: 1px solid var(--border-color-light);
  color: var(--primary);
  text-decoration: none;
  font-size: 13px;
  transition: all var(--transition-fast);
}

.search-link:hover {
  background-color: var(--primary-light);
  border-color: var(--primary);
}

.search-queries li {
  background-color: var(--surface-2);
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--border-color-light);
  display: inline-block;
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

/* 引用支持表格样式 */
.supports-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background-color: white;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: var(--box-shadow-sm);
  border: 1px solid var(--border-color);
}

.supports-table th {
  text-align: left;
  padding: 10px 12px;
  background-color: var(--surface-2);
  border-bottom: 1px solid var(--border-color);
  font-weight: 500;
  color: var(--text-secondary);
}

.supports-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color-light);
  vertical-align: top;
}

.supports-table tr:last-child td {
  border-bottom: none;
}

.segment-text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confidence-bar {
  height: 8px;
  width: 100%;
  background-color: var(--gray-200);
  border-radius: 4px;
  margin-bottom: 6px;
  overflow: hidden;
}

.confidence-value {
  height: 100%;
  border-radius: 4px;
}

.high-confidence {
  background-color: var(--high-confidence);
}

.medium-confidence {
  background-color: var(--medium-confidence);
}

.low-confidence {
  background-color: var(--low-confidence);
}

/* 高级设置功能 */
/* 思考设置区域 */
.thinking-settings {
  margin-bottom: 20px;
}

.thinking-presets {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.thinking-preset-btn {
  background-color: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.thinking-preset-btn:hover,
.thinking-preset-btn.active {
  background-color: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-light);
}

.thinking-preset-btn.active {
  font-weight: 500;
}

/* 生成参数控制 */
.generation-params .setting-item {
  margin-bottom: 16px;
}

.preset-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.preset-btn {
  background-color: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.preset-btn:hover,
.preset-btn.active {
  background-color: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-light);
}

/* 会话管理 */
.saved-conversations {
  margin-top: 12px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
}

.saved-conversation-item {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-color-light);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.saved-conversation-item:last-child {
  border-bottom: none;
}

.saved-conversation-item:hover {
  background-color: var(--surface-2);
}

.saved-conversation-name {
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.saved-conversation-actions {
  display: flex;
  gap: 4px;
}

.saved-conversation-action {
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-muted);
  margin: 0;
  cursor: pointer;
}

.saved-conversation-action:hover {
  color: var(--primary);
}

/* 导出对话选项 */
.export-options {
  margin-top: 12px;
}

.export-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-color-light);
  border-radius: var(--border-radius);
  margin-bottom: 8px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.export-option:hover {
  background-color: var(--surface-2);
}

.export-option-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.export-option-details {
  flex-grow: 1;
}

.export-option-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.export-option-desc {
  font-size: 12px;
  color: var(--text-muted);
}

/* 键盘快捷键提示 */
.keyboard-shortcuts {
  margin-top: 20px;
}

.shortcut-list {
  margin-top: 8px;
}

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-color-light);
}

.shortcut-item:last-child {
  border-bottom: none;
}

.shortcut-keys {
  display: flex;
  gap: 4px;
}

.key {
  display: inline-block;
  padding: 2px 6px;
  background-color: var(--surface-2);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-sm);
  font-size: 11px;
  font-family: 'SFMono-Regular', Consolas, monospace;
  color: var(--text-secondary);
}

.shortcut-action {
  font-size: 12px;
  color: var(--text-secondary);
}