/* 双人小功能:心情状态 / 见面倒计时 / 定时发送(extras.js)。
   沿用默认皮肤的色板(暮蓝 accent、surface、ink),深色走 html[data-scheme="dark"],动森走 html[data-theme="island"]。 */

/* ---- 左上在线胶囊:带上对方的状态,过长省略,不碰正中的未读胶囊 ---- */
#presence-word.has-status { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* ---- 倒计时小牌:聊天列表最上方,安静,随列表滚走 ---- */
.ex-countdown {
  display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 32px);
  margin: 6px auto 10px; padding: 5px 12px 5px 10px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--surface, #fff) 82%, transparent);
  box-shadow: 0 0 0 .5px var(--surface-line, #E3E7EA);
  color: var(--ink-soft, #5F6A71); font: 500 12px/1.3 var(--font-family, -apple-system, 'PingFang SC', sans-serif);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-xs, 120ms) var(--ease-out, ease-out);
}
.ex-countdown b { color: var(--accent-text, #3B5B7A); font-weight: 700; font-variant-numeric: tabular-nums; }
.ex-countdown:active { transform: scale(.97); }
.ex-countdown:focus-visible { outline: 2px solid var(--accent, #3B5B7A); outline-offset: 2px; }
.ex-cd-mark { width: 6px; height: 6px; border-radius: 50%; background: var(--who-sunshine-edge, #EDBF4A); flex: none; }
.ex-countdown.is-today { color: var(--ink, #1E2529); font-weight: 600; }
.ex-countdown.is-today .ex-cd-mark { background: #E5484D; box-shadow: 0 0 0 3px color-mix(in srgb, #E5484D 22%, transparent); }
.ex-countdown.is-past { opacity: .75; }

/* ---- 底部弹层 ---- */
.ex-sheet-ov { position: fixed; inset: 0; z-index: 12100; }
.ex-scrim { position: absolute; inset: 0; background: rgba(20, 25, 29, .32); animation: exFade var(--dur-m, 240ms) var(--ease-out, ease-out); }
.ex-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: min(82dvh, 640px); overflow: auto;
  padding: 6px 20px calc(env(safe-area-inset-bottom, 0px) + 20px);
  background: var(--surface, #fff); color: var(--ink, #1E2529);
  border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(20, 25, 29, .14);
  font-family: var(--font-family, -apple-system, 'PingFang SC', sans-serif);
  animation: exUp var(--dur-m, 240ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.ex-sheet-ov.closing .ex-scrim { animation: exFade var(--dur-s, 180ms) var(--ease-in, ease-in) reverse forwards; }
.ex-sheet-ov.closing .ex-sheet { animation: exDown var(--dur-s, 180ms) var(--ease-in, ease-in) forwards; }
@keyframes exFade { from { opacity: 0; } }
@keyframes exUp { from { transform: translateY(24px); opacity: .6; } }
@keyframes exDown { to { transform: translateY(28px); opacity: 0; } }
.ex-head { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.ex-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.ex-x { width: 44px; height: 44px; margin-right: -12px; border: 0; background: transparent; color: var(--ink-soft, #5F6A71); font-size: 24px; line-height: 1; cursor: pointer; border-radius: 50%; }
.ex-x:focus-visible { outline: 2px solid var(--accent, #3B5B7A); outline-offset: -4px; }
.ex-body { display: flex; flex-direction: column; gap: 12px; }
.ex-label { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--ink-soft, #5F6A71); }
.ex-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ex-chip {
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--ink, #1E2529) 6%, var(--surface, #fff)); color: var(--ink, #1E2529);
  font-family: inherit; font-weight: 500; font-size: 14px; line-height: 1; transition: background var(--dur-xs, 120ms), transform var(--dur-xs, 120ms);
}
.ex-chip:active { transform: scale(.96); }
.ex-chip.on { background: var(--accent, #3B5B7A); color: var(--accent-on, #fff); font-weight: 600; }
.ex-chip:focus-visible, .ex-btn:focus-visible, .ex-item:focus-visible { outline: 2px solid var(--accent, #3B5B7A); outline-offset: 2px; }
.ex-row { display: flex; }
.ex-input {
  flex: 1; min-width: 0; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 12px;
  background: color-mix(in srgb, var(--ink, #1E2529) 5%, var(--surface, #fff)); color: var(--ink, #1E2529);
  font-family: inherit; font-weight: 400; font-size: 16px; line-height: 1.4; box-shadow: inset 0 0 0 1px var(--surface-line, #E3E7EA);
}
.ex-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent, #3B5B7A); }
.ex-area { resize: none; min-height: 84px; }
.ex-actions { display: flex; gap: 10px; margin-top: 4px; }
.ex-btn { flex: 1; min-height: 46px; border: 0; border-radius: 14px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 15px; line-height: 1; transition: transform var(--dur-xs, 120ms), background var(--dur-xs, 120ms); }
.ex-btn:active { transform: scale(.98); }
.ex-btn:disabled { opacity: .45; cursor: default; }
.ex-primary { background: var(--accent, #3B5B7A); color: var(--accent-on, #fff); }
.ex-ghost { background: color-mix(in srgb, var(--ink, #1E2529) 6%, var(--surface, #fff)); color: var(--ink, #1E2529); }
.ex-ghost.ex-danger { color: #C2413B; }
.ex-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft, #5F6A71); text-wrap: pretty; }
.ex-empty { margin: 8px 0 4px; text-align: center; font-size: 14px; line-height: 1.7; color: var(--ink-soft, #5F6A71); }
.ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ex-item {
  width: 100%; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "when chev" "text chev";
  gap: 3px 10px; padding: 12px 14px; border: 0; border-radius: 14px; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--ink, #1E2529) 5%, var(--surface, #fff)); color: var(--ink, #1E2529); font: inherit;
}
.ex-item-when { grid-area: when; font-size: 12px; font-weight: 600; color: var(--accent-text, #3B5B7A); font-variant-numeric: tabular-nums; }
.ex-item-text { grid-area: text; font-size: 15px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ex-item.is-failed .ex-item-when { color: #C2413B; }
.ex-chev { grid-area: chev; align-self: center; font-size: 20px; color: #8A939A; }

/* ---- 账号面板里的「状态」一段 ---- */
.ex-status-sec { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.ex-status-line {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; font: inherit; text-align: left;
  background: color-mix(in srgb, var(--ink, #1E2529) 4%, var(--surface, #fff)); color: var(--ink, #1E2529);
}
button.ex-status-line { cursor: pointer; }
.ex-who { font-size: 13px; font-weight: 600; color: var(--ink-soft, #5F6A71); }
.ex-st { font-size: 15px; font-weight: 600; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-st small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-soft, #5F6A71); }
.ex-st em { font-style: normal; font-weight: 400; color: var(--ink-soft, #5F6A71); }
.ex-status-line .ex-chev { grid-area: auto; font-size: 18px; }   /* 别用 .ex-item 的命名区域,否则另起一行 */

/* ---- 深色 ---- */
html[data-scheme="dark"] .ex-scrim { background: rgba(0, 0, 0, .5); }
html[data-scheme="dark"] .ex-sheet { box-shadow: 0 -8px 30px rgba(0, 0, 0, .5), 0 0 0 1px var(--surface-line); }
html[data-scheme="dark"] .ex-chip, html[data-scheme="dark"] .ex-ghost, html[data-scheme="dark"] .ex-item,
html[data-scheme="dark"] .ex-input, html[data-scheme="dark"] .ex-status-line { background: rgba(255, 255, 255, .07); }
html[data-scheme="dark"] .ex-chip.on, html[data-scheme="dark"] .ex-primary { background: var(--accent); color: var(--accent-on); }
html[data-scheme="dark"] .ex-ghost.ex-danger, html[data-scheme="dark"] .ex-item.is-failed .ex-item-when { color: #FF8A80; }
html[data-scheme="dark"] .ex-countdown { background: rgba(255, 255, 255, .07); box-shadow: 0 0 0 .5px var(--surface-line); }
html[data-scheme="dark"] .ex-chev { color: var(--ink-soft); }

/* ---- 动森:奶油纸 + 沙色边 + 青色主按钮(与皮肤其它弹层一致) ---- */
html[data-theme="island"] .ex-sheet { background: #FFFBEA; color: #5B4631; border-top: 3px solid #E6DAC0; font-family: var(--font-family); }
html[data-theme="island"] .ex-head h3 { color: #5B4631; font-weight: 800; }
html[data-theme="island"] .ex-chip, html[data-theme="island"] .ex-ghost, html[data-theme="island"] .ex-item,
html[data-theme="island"] .ex-status-line { background: #F7F0DC; color: #5B4631; box-shadow: 0 2px 0 #E6DAC0; }
html[data-theme="island"] .ex-input { background: #FFFEF8; color: #5B4631; box-shadow: inset 0 0 0 2px #E3D3A8; }
html[data-theme="island"] .ex-input:focus { box-shadow: inset 0 0 0 2px #19c8b9; }
html[data-theme="island"] .ex-chip.on, html[data-theme="island"] .ex-primary { background: #19c8b9; color: #0B4A44; box-shadow: 0 3px 0 #11A89B; font-weight: 800; }
html[data-theme="island"] .ex-label, html[data-theme="island"] .ex-note, html[data-theme="island"] .ex-who,
html[data-theme="island"] .ex-st small, html[data-theme="island"] .ex-st em, html[data-theme="island"] .ex-empty, html[data-theme="island"] .ex-x { color: #7A6548; }
html[data-theme="island"] .ex-item-when { color: #0E7A70; }
html[data-theme="island"] .ex-ghost.ex-danger { color: #BE4536; }
html[data-theme="island"] .ex-countdown { background: rgba(255, 249, 230, .92); color: #5b4631; box-shadow: 0 2px 0 var(--isl-paper-edge, #e8dab2); font-weight: 700; }
html[data-theme="island"] .ex-countdown b { color: #0E7A70; }

@media (prefers-reduced-motion: reduce) {
  .ex-scrim, .ex-sheet, .ex-sheet-ov.closing .ex-scrim, .ex-sheet-ov.closing .ex-sheet { animation: none !important; }
  .ex-countdown, .ex-chip, .ex-btn { transition: none; }
}

/* 抽屉开着时提示条放到顶部(底部 96px 正好是抽屉按钮行;复审 F1) */
body.ex-sheet-open .toast-msg,
html[data-theme="island"] body.ex-sheet-open .toast-msg { top: calc(env(safe-area-inset-top, 0px) + 64px) !important; bottom: auto !important; }
/* 倒计时小牌点击区扩到 44px(外观不变) */
.ex-countdown { position: relative; }
.ex-countdown::before { content: ''; position: absolute; inset: -9px 0; }

/* ================= v559(v558 审 #12–18、#20)================= */
/* 长按发送键:外圈 500ms 填满的进度环 + 到点轻弹(iOS 没有震动,这是唯一的长按反馈) */
@property --ex-p { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
#btn-send { position: relative; }
#btn-send.ex-holding::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--accent, #3B5B7A) var(--ex-p), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  animation: exRing .5s linear forwards;
}
@keyframes exRing { from { --ex-p: 0%; } to { --ex-p: 100%; } }
#btn-send.ex-fired { animation: exFire .24s var(--ease-out, cubic-bezier(.22, 1, .36, 1)); }
@keyframes exFire { 40% { transform: scale(.9); } }
html[data-theme="island"] #btn-send.ex-holding::after { background: conic-gradient(#0E7A70 var(--ex-p), transparent 0); }

/* 发送键旁的一次性小气泡提示 */
.ex-tip {
  position: fixed; z-index: 12050; max-width: min(260px, calc(100vw - 24px)); padding: 8px 12px; border-radius: 12px;
  background: var(--ink, #1E2529); color: #fff; font: 600 13px/1.4 var(--font-family, -apple-system, 'PingFang SC', sans-serif);
  box-shadow: 0 6px 18px rgba(20, 25, 29, .22); animation: exTipIn var(--dur-s, 180ms) var(--ease-out, ease-out);
  text-wrap: balance; cursor: pointer;
}
.ex-tip::after { content: ''; position: absolute; top: 100%; left: calc(var(--tip-x, 50%) - 6px); border: 6px solid transparent; border-top-color: var(--ink, #1E2529); }
@keyframes exTipIn { from { opacity: 0; transform: translateY(4px); } }
html[data-scheme="dark"] .ex-tip { background: #E6EBEE; color: #14191D; }
html[data-scheme="dark"] .ex-tip::after { border-top-color: #E6EBEE; }
html[data-theme="island"] .ex-tip { background: #7A4A25; color: #FFF7E8; box-shadow: 0 3px 0 #4A2C12; }
html[data-theme="island"] .ex-tip::after { border-top-color: #7A4A25; }

/* 输入栏上沿的「⏰ N 条将在… 发出」细条:作为 .chat-input-area 的第一行(换行) */
.chat-input-area.has-ex-strip { flex-wrap: wrap; row-gap: 6px; }
.ex-sched-strip {
  order: -1; flex: 0 0 100%; display: flex; align-items: center; gap: 6px; min-height: 28px; margin: -2px 0 0; padding: 0 6px 0 8px;
  border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--accent, #3B5B7A) 9%, transparent); color: var(--accent-text, #3B5B7A);
  font: 600 12.5px/1.2 var(--font-family, -apple-system, 'PingFang SC', sans-serif); font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent; transition: background var(--dur-xs, 120ms);
}
.ex-sched-strip:active { background: color-mix(in srgb, var(--accent, #3B5B7A) 16%, transparent); }
.ex-sched-strip:focus-visible { outline: 2px solid var(--accent, #3B5B7A); outline-offset: 1px; }
.ex-strip-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-sched-strip .ex-chev { font-size: 16px; color: inherit; opacity: .7; }
.ex-strip-ic { width: 12px; height: 12px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.6px currentColor;
  background: linear-gradient(currentColor, currentColor) 50% 30% / 1.6px 4px no-repeat, linear-gradient(currentColor, currentColor) 62% 50% / 3px 1.6px no-repeat; }
.ex-sched-strip.is-failed { background: color-mix(in srgb, #C2413B 10%, transparent); color: #A8352F; }
html[data-scheme="dark"] .ex-sched-strip { background: rgba(143, 179, 214, .12); color: #A9C6E3; }
html[data-scheme="dark"] .ex-sched-strip.is-failed { background: rgba(255, 138, 128, .12); color: #FF8A80; }
html[data-theme="island"] .ex-sched-strip { background: #F2EAD3; color: #0E7A70; box-shadow: 0 2px 0 #E6DAC0; font-weight: 800; }

/* 定时清单:左滑露出「立即发送 / 取消」 */
.ex-li { position: relative; border-radius: 14px; overflow: hidden; }
.ex-li-acts { position: absolute; inset: 0 0 0 auto; display: flex; align-items: stretch; gap: 0; }
.ex-li-btn { width: 76px; border: 0; color: #fff; font-family: inherit; font-weight: 600; font-size: 13px; line-height: 1.2; cursor: pointer; }
.ex-now { background: var(--accent, #3B5B7A); }
.ex-del { background: #C2413B; }
.ex-li .ex-item { position: relative; z-index: 1; transition: transform var(--dur-m, 240ms) var(--ease-out, cubic-bezier(.22, 1, .36, 1)); touch-action: pan-y; }
.ex-li.dragging .ex-item { transition: none; }
.ex-li.open .ex-item, .ex-li:focus-within:not(.dragging) .ex-li-btn:focus-visible ~ .ex-item { transform: translateX(-152px); }
.ex-li:has(.ex-li-btn:focus-visible) .ex-item { transform: translateX(-152px); }
.ex-li.leaving { animation: exLeave var(--dur-m, 240ms) var(--ease-in, ease-in) forwards; pointer-events: none; }
@keyframes exLeave { to { opacity: 0; transform: translateX(-24px); max-height: 0; margin: 0; } }
.ex-swipe-tip { text-align: center; font-size: 12px; }
html[data-scheme="dark"] .ex-now { background: color-mix(in srgb, var(--accent) 52%, #14191D); color: #EAF2FA; }
html[data-scheme="dark"] .ex-del { background: #B83A34; }
html[data-theme="island"] .ex-now { background: #19c8b9; color: #0B4A44; font-weight: 800; }
html[data-theme="island"] .ex-del { background: #BE4536; color: #FFF7E8; font-weight: 800; }

/* 定时面板:自定义时间默认收起 */
.ex-custom[hidden] { display: none; }

/* 深色主按钮/选中 chip:原来是全页最亮的一块(#8FB3D6 底)→ 压到暮蓝和夜底之间,白字 ≈5:1 */
html[data-scheme="dark"] .ex-chip.on, html[data-scheme="dark"] .ex-primary { background: color-mix(in srgb, var(--accent, #8FB3D6) 52%, #14191D); color: #EAF2FA; }

/* 倒计时当天:小牌闪 3 下金光(减弱动态效果时不闪) */
/* 用背景位移做光带(不靠 overflow:hidden,免得裁掉 ::before 扩出来的 44px 点击区) */
.ex-countdown.is-today::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 218, 122, .8) 50%, transparent 60%) 0 0 / 300% 100% no-repeat;
  background-position: 100% 0; animation: exShine 2s ease-in-out 3;
}
@keyframes exShine { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }

/* 账号面板里没设状态时的「＋ 设一个」 */
.ex-st em.ex-add { color: var(--accent-text, #3B5B7A); font-weight: 600; }
html[data-scheme="dark"] .ex-st em.ex-add { color: #A9C6E3; }
html[data-theme="island"] .ex-st em.ex-add { color: #0E7A70; font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  #btn-send.ex-holding::after { animation: none; --ex-p: 100%; }
  #btn-send.ex-fired, .ex-tip, .ex-li.leaving { animation: none; }
  .ex-countdown.is-today::after { animation: none; display: none; }
  .ex-li .ex-item { transition: none; }
}
/* 深色:列表行背景不透明,没滑开的行不透出底下的「立即发送/取消」(v559 预审 F3) */
html[data-scheme="dark"] .ex-li .ex-item { background: color-mix(in srgb, #fff 7%, var(--surface, #1E252A)); }
.ex-li:not(.open):not(.dragging) .ex-li-acts { visibility: hidden; }

/* 一次性提示行(输入栏上方,内联;和定时细条同一套) */
.ex-hint {
  order: -2; flex: 0 0 100%; display: flex; align-items: center; gap: 6px; min-height: 28px; margin: -2px 0 0; padding: 0 4px 0 8px;
  border: 0; border-radius: 10px; cursor: pointer; text-align: left;
  background: color-mix(in srgb, var(--accent, #3B5B7A) 9%, transparent); color: var(--accent-text, #3B5B7A);
  font: 600 12.5px/1.25 var(--font-family, -apple-system, 'PingFang SC', sans-serif);
  -webkit-tap-highlight-color: transparent; animation: exHintIn var(--dur-s, 180ms) var(--ease-out, ease-out);
}
.ex-hint-ic { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: .8; }
.ex-hint-t { flex: 1; min-width: 0; text-wrap: pretty; padding: 5px 0; }
.ex-hint-x { flex: none; width: 24px; text-align: center; font-size: 15px; opacity: .7; }
.ex-hint:focus-visible { outline: 2px solid var(--accent, #3B5B7A); outline-offset: 1px; }
@keyframes exHintIn { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ex-hint { animation: none; } }
html[data-scheme="dark"] .ex-hint { background: rgba(143, 179, 214, .14); color: #CFE0F2; }
html[data-theme="island"] .ex-hint { background: #F4EBCF; color: #5B4631; box-shadow: inset 0 0 0 1.5px #E3D3A8; }
/* 换行只看里面有没有提示行/细条,不依赖类名同步(v568 复审:细条消失时输入框被挤成 12px) */
.chat-input-area:has(> .ex-hint, > .ex-sched-strip) { flex-wrap: wrap; row-gap: 6px; }
/* 动森定时细条:字色加深到 AA(原 #0E7A70 在奶油底上 4.33:1),箭头不再降透明 */
html[data-theme="island"] .ex-sched-strip { color: #0B6B63; }
html[data-theme="island"] .ex-sched-strip .ex-chev { opacity: .85; }

/* v576 设计审计 P3:选项视觉 36px,点击范围外扩到 44px(左右各 4px = 间距一半,不与邻居重叠) */
.ex-chip { position: relative; }
.ex-chip::after { content: ''; position: absolute; inset: -4px; }