/* 对白 (web/js/talk.js): her lines on the left, yours on the right, in one column as wide as the input row. */
.subtitle-area {
  --tk-her: #f6ecd2; --tk-her-zh: rgba(226, 222, 236, .72); --tk-her-rule: rgba(242, 212, 138, .55); --tk-her-glow: rgba(120, 140, 230, .45);
  --tk-you: #a9d8ea; --tk-you-rule: rgba(159, 216, 232, .55); --tk-you-glow: rgba(110, 190, 220, .35);
  --tk-shadow: 0 1px 3px rgba(4, 8, 32, .6);
}
:root[data-theme="soft-anime"] .subtitle-area {
  --tk-her: #4e3348; --tk-her-zh: rgba(102, 86, 109, .78); --tk-her-rule: rgba(208, 111, 140, .6); --tk-her-glow: transparent;
  --tk-you: #5f50a0; --tk-you-rule: rgba(143, 124, 192, .6); --tk-you-glow: transparent;
  --tk-shadow: 0 1px 8px rgba(255, 255, 255, .7);
}
.tk-log { display: none; }
:root[data-talk="on"] .subtitle-area[data-talk="on"] .tk-log {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  height: clamp(150px, 25vh, 236px); overflow: hidden; padding: 0 2px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34px); mask-image: linear-gradient(180deg, transparent 0, #000 34px);
}
/* while the log speaks, the single subtitle and the old echo lines step aside (they stay for other layers and screen readers) */
:root[data-talk="on"] .subtitle-area[data-talk="on"] #current-subtitle,
:root[data-talk="on"] .subtitle-area[data-talk="on"] #current-subtitle-zh {
  position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; margin: 0 !important; padding: 0 !important;
}
:root[data-talk="on"] .subtitle-area[data-talk="on"] .tm-prev,
:root[data-talk="on"] .call-room:has(.subtitle-area[data-talk="on"]) .tm-you { display: none !important; }
/* one column, as wide as the input row under it */
:root[data-talk="on"][data-tm="on"] .subtitle-area[data-talk="on"] { width: min(560px, 100%); text-align: left; }
:root[data-talk="on"] .subtitle-area[data-talk="on"] #subtitle-status { text-align: center; }

/* ---------- a line ---------- */
.tk-row { position: relative; max-width: 86%; transition: opacity 1.2s ease, font-size .8s ease; }
.tk-row .tk-text { margin: 0; line-height: 1.75; letter-spacing: .06em; overflow-wrap: anywhere; }
.tk-row .tk-zh { display: block; margin-top: 2px; font-size: 12px; line-height: 1.6; letter-spacing: .06em; color: var(--tk-her-zh); }
.tk-row::before { content: ''; position: absolute; top: .55em; bottom: .45em; width: 1px; }
/* her: left, warm, in the room's Mincho */
.tk-her { align-self: flex-start; padding-left: 14px; text-align: left; }
.tk-her::before { left: 0; background: var(--tk-her-rule); }
.tk-her .tk-text { font-family: var(--tm-mincho, "Yu Mincho", "Noto Serif JP", serif); font-weight: 500; color: var(--tk-her); text-shadow: 0 0 18px var(--tk-her-glow), var(--tk-shadow); font-size: 15px; }
/* you: right, cool, plain */
.tk-you { align-self: flex-end; padding-right: 14px; text-align: right; }
.tk-you::before { right: 0; background: var(--tk-you-rule); }
.tk-you .tk-text { color: var(--tk-you); text-shadow: 0 0 14px var(--tk-you-glow), var(--tk-shadow); font-size: 14.5px; letter-spacing: .08em; }
/* older lines step back; the newest of each voice is read in full */
.tk-row:not(.tk-now) { opacity: .46; }
.tk-row:not(.tk-now) .tk-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-row:not(.tk-now) .tk-zh { display: none; }
.tk-her.tk-now .tk-text { font-size: 20px; line-height: 1.8; }
:root[data-tmx-im="on"] .tk-her.tk-now .tk-text { font-size: 21px; }
.tk-her.tk-now:not(.tk-last) .tk-text { font-size: 17px; }
.tk-you.tk-now .tk-text { font-size: 15.5px; }
/* a new line arrives out of a soft blur */
.tk-row.tk-new { opacity: 0; transform: translateY(10px); filter: blur(4px); }
@media (prefers-reduced-motion: no-preference) {
  body[data-motion="gentle"] .tk-row { transition: opacity 1.2s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1), filter 1.4s ease; }
}

@media (max-width: 640px) {
  :root[data-talk="on"] .subtitle-area[data-talk="on"] .tk-log { height: clamp(130px, 24vh, 200px); gap: 10px; }
  .tk-row { max-width: 92%; }
  .tk-her.tk-now .tk-text, :root[data-tmx-im="on"] .tk-her.tk-now .tk-text { font-size: 17px; }
  .tk-her.tk-now:not(.tk-last) .tk-text { font-size: 15px; }
  .tk-you.tk-now .tk-text { font-size: 14.5px; }
}