/* 0.4 对话分段（顶栏标题下拉）的样式（施工图 §3.0：归 WA2）。第 0 波由 P-COPY 建空文件并挂进 index.html（conversation.css 之后），规则由 WA2 填。 */

/*
 * 顶栏标题下拉（features/ai-chat/segments-menu.js）。与 iPhone 顶栏标题 Menu 同一种长相：
 * 标题还是那枚粗体字，末尾一个下拉记号；展开是一张贴着标题的纸面列表，当前那段打勾。
 * 不用玻璃（J2 白名单只有五个面）、不加进场动画（J7）；只读既有令牌，深浅两套由令牌自己换。
 */

.chat-segments { position: relative; min-width: 0; }

.chat-segments__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; margin: 0; padding: 0;
  border: 0; border-radius: var(--radius-xs); background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chat-segments__trigger b {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.chat-segments__trigger:hover b { color: var(--accent); }
.chat-segments__trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-segments__caret {
  flex: none; font-size: var(--fs-micro); color: var(--text-faint);
  transition: transform var(--dur-fast) var(--ease);
}
.chat-segments__trigger[aria-expanded="true"] .chat-segments__caret { transform: rotate(180deg); }

.chat-segments__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
  width: min(320px, calc(100vw - 32px)); max-height: min(60vh, 440px); overflow: auto;
  padding: 6px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.chat-segments__day {
  margin: 8px 8px 4px; font-size: var(--fs-micro); font-weight: 600; color: var(--text-faint);
}
.chat-segments__group:first-child .chat-segments__day { margin-top: 4px; }

.chat-segments__item,
.chat-segments__more {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px;
  width: 100%; margin: 0; padding: 7px 8px;
  border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text); font: inherit; font-size: var(--fs-small); text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-segments__item:hover,
.chat-segments__more:hover { background: var(--surface-hover); }
.chat-segments__item:focus-visible,
.chat-segments__more:focus-visible { background: var(--surface-hover); outline: 2px solid var(--accent); outline-offset: -2px; }
.chat-segments__item[aria-checked="true"] { background: var(--accent-soft); }
.chat-segments__item[aria-checked="true"] .chat-segments__title::before { content: '✓ '; color: var(--accent); }
.chat-segments__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-segments__item time { font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.chat-segments__more { display: block; margin-top: 4px; text-align: center; color: var(--text-muted); }

.chat-segments__empty { margin: 10px 8px; font-size: var(--fs-small); color: var(--text-muted); }
.chat-segments__note { margin: 0 0 12px; font-size: var(--fs-small); color: var(--text-muted); }

/*
 * 0.4.3 G：标题下面那一行里的「云上多端同步」（features/ai-chat/thread-sync.js）。
 * 它是这一段对话的一个事实（与「12 条消息」同一行、同一种字号），不是一枚要人猜意思的按钮：
 * 开关的长相就是侧栏「浮窗便利贴」那一枚（components.css .deskrow__switch / __knob），这里只把它缩到这一行的字高，
 * 开着的那一格照那边写的 is-on 规则填强调色——同一个角色一种长相（UI_PATTERNS 总纲），不另造开关。
 */
.chat-sync-slot { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; vertical-align: middle; }
.chat-sync-slot:not(:empty)::before { content: '·'; margin: 0 6px; color: var(--text-faint); }
.chat-sync-control { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; }
.chat-sync__availability { color: var(--text-muted); font-size: var(--fs-micro); overflow-wrap: anywhere; }
.chat-sync__retry {
  min-height: 24px; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-muted); font: inherit; cursor: pointer;
}
.chat-sync__retry:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-sync__retry:disabled { cursor: default; color: var(--text-muted); background: var(--surface-2); }

.chat-sync {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
  margin: 0; padding: 1px 6px 1px 2px;
  border: 0; border-radius: var(--radius-pill); background: none;
  color: var(--text-faint); font: inherit; font-size: var(--fs-micro); line-height: 1.4; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chat-sync:hover { background: var(--surface-hover); color: var(--text-muted); }
.chat-sync:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chat-sync .deskrow__switch { width: 24px; height: 14px; }
.chat-sync .deskrow__knob { top: 2px; left: 2px; width: 10px; height: 10px; }
.chat-sync.is-on .deskrow__switch { background: var(--accent); box-shadow: none; }
.chat-sync.is-on .deskrow__knob { transform: translateX(10px); }
.chat-sync__label { flex: none; color: var(--text-muted); }
.chat-sync__state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-sync.is-on .chat-sync__state { color: var(--accent-ink); }
.chat-sync.is-pending .chat-sync__state { color: var(--text-muted); }
.chat-sync.is-failed .chat-sync__state { color: var(--warning-ink); }

/* 开之前那一句告知 / 关之前那一句确认：贴在顶栏下沿的一张纸（与标题下拉同一种纸：--surface、发丝边、长而淡的影）。 */
.chat-sync__sheet {
  position: absolute; top: calc(100% - 6px); left: 22px; z-index: 41;
  width: min(400px, calc(100vw - 32px));
  padding: 14px 16px 12px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.chat-sync__sheet b { display: block; font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--tracking-title); }
.chat-sync__sheet p { margin: 6px 0 0; font-size: var(--fs-small); line-height: 1.65; color: var(--text-muted); }
.chat-sync__sheet .chat-sync__changed { margin: 0 0 8px; color: var(--warning-ink); }
.chat-sync__sheet footer {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline);
}

/*
 * 0.4.3（设计 §4 Q）：侧栏对话面纸上的「以前的对话」。行高节奏与「接下来」（.upnext__item）、日历源（.callist__toggle）
 * 同一个数（6px 7px），当前那段用淡强调底（与标题下拉 aria-checked 同一种选中）；开了云上同步的那一段标题前一枚小点，
 * 颜色取强调色——它说的是「这一段在云上」，不是日历色。
 */
.side-segments { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.side-segments__item {
  display: flex; align-items: baseline; gap: 8px; width: 100%; min-width: 0;
  margin: 0; padding: 6px 7px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--dur-fast) var(--ease);
}
.side-segments__item:hover { background: var(--surface-hover); }
.side-segments__item.is-current { background: var(--accent-soft); }
.side-segments__item.is-cloud .side-segments__title::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; vertical-align: 0.1em;
  border-radius: 50%; background: var(--accent);
}
.side-segments__title { flex: 1 1 auto; min-width: 0; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-segments__item time { flex: none; font-size: var(--fs-micro); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.side-segments__empty { padding: 6px 7px; font-size: var(--fs-small); color: var(--text-muted); }
.side-segments__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 7px 0; }

@media (max-width: 820px) {
  .side-segments__item { min-height: var(--touch-target); align-items: center; }
  /* 窄屏：这一行放不下「云上多端同步」四个字，留开关与状态；完整说法在 aria-label 里。命中区补到 44（UI_PATTERNS §9）。 */
  .chat-sync__label { display: none; }
  /* 这一行在手机上装不下「N 条消息」和开关状态两件事：留状态（它回答「这段话在不在云上」），条数让位——对话本身就在眼前。 */
  .chat-topbar__identity small:has(.chat-sync) .chat-topbar__count { display: none; }
  .chat-topbar__identity small:has(.chat-sync) .chat-sync-slot::before { display: none; }
  .chat-sync, .chat-sync__retry { min-height: var(--touch-target); }
  .chat-sync__sheet { left: 16px; right: 16px; width: auto; }
  .chat-sync__sheet footer .btn { min-height: var(--touch-target); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-segments__caret, .chat-segments__trigger b { transition: none; }
  .chat-sync { transition: none; }
}