/*
 * DF AI 对话内搜索 · v1.56 样式参考
 * 来源：10月分支原型-v1.56.html（含2026-10-29高亮更新）
 * 整理日期：2026-10-29（已同步深浅黄色高亮）；尺寸单位为CSS逻辑像素。
 * 原型主要使用内联样式，此文件将其整理为独立类名，供开发参考。
 * 使用 .conversation-search 包裹组件，主题通过祖先 data-theme 属性继承。
 * 浮层使用 Portal 时也需添加 conversation-search 类以继承变量。
 * 不包含检索、定位、日期计算或浮层坐标计算的交互逻辑；未改变原型样式。
 */
.conversation-search {
  --cs-bg: #fff;
  --cs-field-bg: #fff;
  --cs-text: #1f2329;
  --cs-secondary: #4e5969;
  --cs-muted: #68717b;
  --cs-placeholder: #666e78;
  --cs-border: #dadce0;
  --cs-hover: #eee;
  --cs-accent: #1a73e8;
  --cs-contrast: #fff;
  --cs-tint: #e8f0fe;
  --cs-shadow: 0 12px 32px rgba(60,64,67,.16);
  box-sizing: border-box;
  color: var(--cs-text);
  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
[data-theme="dark"] .conversation-search {
  --cs-bg: #292c32;
  --cs-field-bg: #111318;
  --cs-text: #f1f3f4;
  --cs-secondary: #c8cdd4;
  --cs-muted: #aeb5bd;
  --cs-placeholder: #979fa8;
  --cs-border: rgba(255,255,255,.1);
  --cs-hover: #30343b;
  --cs-accent: #8ab4f8;
  --cs-contrast: #111318;
  --cs-tint: rgba(138,180,248,.16);
  --cs-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.conversation-search *, .conversation-search *::before,
.conversation-search *::after { box-sizing: border-box; }
.conversation-search button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
.conversation-search [hidden] { display: none !important; }

/* 默认入口：32×32热区，17px搜索图标。 */
.conversation-search .cs-trigger { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--cs-secondary); }
.cs-trigger svg { width: 17px; height: 17px; }

/* 组合栏：时间范围 / 关键词 / 计数 / 上下定位 / 关闭。 */
.cs-bar { width: 430px; max-width: calc(100vw - 180px); height: 36px; padding: 0 4px; display: flex; align-items: center; gap: 2px; border: 1px solid var(--cs-border); border-radius: 10px; background: var(--cs-bg); }
.conversation-search .cs-range { height: 28px; max-width: 124px; padding: 0 6px 0 8px; display: flex; align-items: center; gap: 3px; flex-shrink: 0; border-radius: 7px; color: var(--cs-secondary); font-size: 12px; }
.cs-range span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-range svg { width: 12px; height: 12px; flex-shrink: 0; transition: transform .15s ease; }
.conversation-search .cs-range[aria-expanded="true"] { background: var(--cs-hover); color: var(--cs-accent); }
.cs-range[aria-expanded="true"] svg { transform: rotate(180deg); }
.conversation-search .cs-range[data-filtered="true"] { color: var(--cs-accent); }
.cs-divider { width: 1px; height: 16px; flex-shrink: 0; background: var(--cs-border); }
.cs-query { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 0 4px; }
.cs-query svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--cs-muted); }
.cs-query input { flex: 1; min-width: 0; height: 26px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--cs-text); font: inherit; font-size: 13px; }
.cs-status { font-size: 11px; white-space: nowrap; flex-shrink: 0; color: var(--cs-secondary); }
.cs-status[data-state="pending"], .cs-status[data-state="empty"] { color: var(--cs-muted); }
.conversation-search .cs-icon { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border-radius: 6px; color: var(--cs-secondary); }
.cs-icon svg { width: 15px; height: 15px; }
.cs-icon.cs-close svg { width: 14px; height: 14px; }
.conversation-search .cs-icon:disabled { opacity: .35; cursor: default; }

/* 浮层坐标由锚点计算；默认下间距6px、距视口左右至少8px。 */
.cs-popup { position: fixed; border: 1px solid var(--cs-border); border-radius: 10px; background: var(--cs-bg); box-shadow: var(--cs-shadow); z-index: 2300; }
.cs-menu { width: 176px; padding: 6px; }
.conversation-search .cs-option { width: 100%; height: 32px; padding: 0 8px; display: flex; align-items: center; gap: 8px; border-radius: 7px; font-size: 12px; text-align: left; }
.cs-option span { flex: 1; }
.cs-option svg { width: 13px; height: 13px; }
.conversation-search .cs-option[aria-selected="true"] { color: var(--cs-accent); background: var(--cs-tint); font-weight: 500; }
.conversation-search .cs-option:hover { background: var(--cs-hover); }

/* 自定义面板：实测268×150；月历：实测294×301。 */
.cs-custom { width: 268px; padding: 12px; }
.cs-date-fields { display: flex; flex-direction: column; gap: 8px; }
.conversation-search .cs-date-field { height: 36px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-field-bg); font-size: 13px; }
.conversation-search .cs-date-field[data-empty="true"] { color: var(--cs-placeholder); }
.cs-date-field svg { width: 15px; height: 15px; color: var(--cs-secondary); flex-shrink: 0; }
.conversation-search .cs-date-field[aria-expanded="true"] { border-color: var(--cs-accent); box-shadow: 0 0 0 2px var(--cs-tint); }
.cs-date-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.conversation-search .cs-date-actions button { height: 32px; padding: 0 14px; border-radius: 8px; font-size: 13px; }
.conversation-search .cs-cancel { border: 1px solid var(--cs-border); color: var(--cs-secondary); }
.conversation-search .cs-apply { background: var(--cs-accent); color: var(--cs-contrast); font-weight: 500; }
.conversation-search .cs-apply:disabled { opacity: .45; cursor: default; }
.cs-calendar { width: 294px; padding: 12px; z-index: 2400; }
.cs-month { height: 32px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cs-month strong { font-size: 13px; }
.cs-month button { color: var(--cs-secondary); width: 28px; height: 28px; display: grid; place-items: center; }
.cs-month svg { width: 16px; height: 16px; }
.cs-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cs-weekday { height: 27px; display: grid; place-items: center; font-size: 11px; color: var(--cs-muted); }
.conversation-search .cs-day { height: 33px; border-radius: 7px; font-size: 12px; }
.conversation-search .cs-day[aria-selected="true"] { color: var(--cs-contrast); background: var(--cs-accent); font-weight: 600; }
.conversation-search .cs-day:disabled { opacity: .5; color: var(--cs-placeholder); cursor: not-allowed; }
.conversation-search .cs-day[data-outside="true"]:not([aria-selected="true"]):not(:disabled) { color: var(--cs-muted); }

/* 关键词高亮：名称与原型一致，由交互逻辑注册CSS Highlight。 */
::highlight(df-search-hit) { background-color: rgba(255,213,79,.22); color: #fff3c4; }
::highlight(df-search-current) { background-color: #ffd54f; color: #1f2329; }
[data-theme="light"] ::highlight(df-search-hit) { background-color: #fff3c4; color: #1f2329; }
[data-theme="light"] ::highlight(df-search-current) { background-color: #ffd54f; color: #1f2329; }