/* AI conversation: the voice call (templates/ai/_talk.html, static/js/talk.js) and the text chat's finishing touches.
   Uses the site tokens only (app.css :root), logical properties (RTL first), transform/opacity motion, and the motion
   tiers: html[data-motion="0"] and prefers-reduced-motion stop every loop. */

/* ---------------------------------------------------------------- text chat */
.chat-actions { gap: 6px; align-items: center; }
.call-btn { display: inline-flex; align-items: center; gap: 6px; min-block-size: var(--ctl); padding-inline: 12px 14px;
  border: 0; border-radius: 999px; background: color-mix(in srgb, var(--teal) 14%, transparent); color: var(--teal);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color .2s var(--ease-std), transform .2s var(--ease-out); }
.call-btn .ic { inline-size: 18px; block-size: 18px; }
.call-btn:hover { background: color-mix(in srgb, var(--teal) 22%, transparent); }
.call-btn:active { transform: scale(.97); }
.call-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@media (max-width: 420px) { .call-btn span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .call-btn { padding-inline: 10px; } }

.talk-chat .msg.fresh, .talk-chat .msg.learner:last-child { animation: talk-rise .32s var(--ease-out) both; }
@keyframes talk-rise { from { opacity: 0; transform: translateY(6px); } }
.talk-chat .play-btn.mine { justify-self: start; display: inline-flex; gap: 4px; align-items: center; min-block-size: 30px;
  padding-inline: 8px 10px; border-radius: 999px; font-size: var(--fs-xs); }
.talk-chat .fix-card { border-inline-start: 3px solid var(--saffron); }
.talk-chat .fix del { text-decoration-color: var(--bad); }
.talk-chat .fix ins { text-decoration: none; color: var(--ok); font-weight: 600; }
.voice-start { display: inline-flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------------- the call */
body.talk-open { overflow: hidden; }
.talk { --talk-c: var(--indigo); position: fixed; inset: 0; z-index: 80; display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; color: var(--ink); background: var(--paper);
  padding: max(10px, var(--safe-t)) max(var(--gutter), var(--safe-r)) max(14px, var(--safe-b)) max(var(--gutter), var(--safe-l));
  opacity: 0; transform: scale(.985); transition: opacity .28s var(--ease-out), transform .36s var(--ease-out); overscroll-behavior: contain; }
.talk[hidden] { display: none; }
.talk.in { opacity: 1; transform: none; }
.talk[data-state="listening"], .talk[data-state="hearing"] { --talk-c: var(--teal); }
.talk[data-state="thinking"] { --talk-c: var(--saffron); }
.talk[data-state="muted"], .talk[data-state="paused"] { --talk-c: var(--line); }
.talk-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 38%, color-mix(in srgb, var(--talk-c) 16%, transparent), transparent 70%);
  transition: background .6s var(--ease-std); }
.talk > * { position: relative; }

.talk-top { display: flex; align-items: center; gap: 10px; }
.talk-who { flex: 1; min-inline-size: 0; text-align: center; }
.talk-who h2 { margin: 0; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-who p { margin: 0; display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: var(--fs-xs); }
.talk-ic { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; padding: 0;
  background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); cursor: pointer; transition: background-color .2s; }
.talk-ic:hover { background: color-mix(in srgb, var(--ink) 11%, transparent); }
.talk-ic .ic { inline-size: 20px; block-size: 20px; }
.talk button:focus-visible { outline: 2px solid var(--talk-c); outline-offset: 3px; }

.talk-opts { display: grid; gap: 2px; margin-block-start: 10px; padding: 6px; border-radius: var(--r-lg); background: var(--card);
  border: 1px solid var(--hair); box-shadow: var(--e2); max-inline-size: 30rem; inline-size: 100%; justify-self: center; }
.talk-opts[hidden] { display: none; }
.talk-switch { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--r-md); cursor: pointer; }
.talk-switch:hover { background: var(--paper-2); }
.talk-switch span { display: grid; gap: 2px; }
.talk-switch b { font-size: var(--fs-sm); }
.talk-switch small { color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.6; }
.talk-switch input { appearance: none; -webkit-appearance: none; flex: none; position: relative; inline-size: 42px; block-size: 26px; margin: 0;
  border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); cursor: pointer; transition: background-color .2s; }
.talk-switch input::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .25s var(--ease-out); }
.talk-switch input:checked { background: var(--teal); }
.talk-switch input:checked::after { transform: translateX(-16px); }
[dir="ltr"] .talk-switch input:checked::after { transform: translateX(16px); }
.talk-switch input:disabled { opacity: .45; }

/* the orb: three soft layers that breathe with the microphone level (--lvl, 0..1, set by talk.js) */
.talk-stage { display: grid; place-items: center; align-content: center; gap: 18px; min-block-size: 0; }
.orb { --lvl: 0; position: relative; display: grid; place-items: center; inline-size: min(52vw, 32vh, 230px); aspect-ratio: 1;
  border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.orb i, .orb .orb-core { position: absolute; inset: 0; border-radius: 50%; }
.orb i { background: conic-gradient(from 0deg, var(--indigo), var(--teal), var(--saffron), var(--indigo)); filter: blur(18px); opacity: .5;
  transform: scale(calc(.78 + var(--lvl) * .3)); transition: transform .12s linear, opacity .4s; }
.orb i:nth-child(2) { opacity: .35; transform: scale(calc(.7 + var(--lvl) * .45)) rotate(120deg); }
.orb i:nth-child(3) { opacity: .25; filter: blur(30px); transform: scale(calc(.9 + var(--lvl) * .2)) rotate(240deg); }
.orb .orb-core { inset: 17%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, #fff 55%, var(--talk-c)), var(--talk-c) 72%);
  box-shadow: inset 0 -10px 30px color-mix(in srgb, var(--ink) 18%, transparent), 0 10px 40px -12px var(--talk-c);
  transform: scale(calc(1 + var(--lvl) * .1)); transition: transform .1s linear, background .5s var(--ease-std); }
.orb[data-state="speaking"] i { animation: talk-breathe 1.6s var(--ease-std) infinite alternate; }
.orb[data-state="speaking"] i:nth-child(2) { animation-delay: -.5s; }
.orb[data-state="speaking"] i:nth-child(3) { animation-delay: -1s; }
.orb[data-state="thinking"] i { animation: talk-spin 2.4s linear infinite; opacity: .45; }
.orb[data-state="thinking"] .orb-core { animation: talk-pulse 1.2s var(--ease-std) infinite alternate; }
.orb[data-state="idle"] i, .orb[data-state="ready"] i { animation: talk-breathe 3.2s var(--ease-std) infinite alternate; opacity: .3; }
.orb[data-state="muted"] i, .orb[data-state="paused"] i { opacity: .12; }
.orb[data-state="muted"] .orb-core, .orb[data-state="paused"] .orb-core { filter: grayscale(1); opacity: .6; }
@keyframes talk-breathe { from { transform: scale(.8); } to { transform: scale(1.08); } }
@keyframes talk-spin { to { transform: rotate(1turn) scale(.9); } }
@keyframes talk-pulse { from { transform: scale(.97); } to { transform: scale(1.03); } }
.talk-state { margin: 0; min-block-size: 1.85em; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; text-align: center; max-inline-size: 26rem; }

/* captions */
.talk-cap { display: grid; gap: 10px; justify-items: center; max-inline-size: 36rem; inline-size: 100%; justify-self: center;
  max-block-size: 34vh; overflow-y: auto; padding-block: 4px 10px; }
.cap-you { display: grid; gap: 2px; justify-items: center; text-align: center; }
.cap-you[hidden], .cap-fix[hidden] { display: none; }
.cap-k { color: var(--ink-2); font-size: var(--fs-xs); }
.cap-you p { margin: 0; color: var(--ink-2); font-family: var(--f-display); font-size: var(--fs-base); line-height: 1.55; }
.cap-partner { margin: 0; text-align: center; font-family: var(--f-display); font-size: clamp(1.125rem, 1.6vw + .85rem, 1.5rem);
  font-weight: 600; line-height: 1.5; letter-spacing: -.01em; transition: filter .3s, opacity .3s; }
.cap-partner span { transition: color .3s var(--ease-std), opacity .3s; }
.cap-partner span { display: inline; }
.cap-partner span.cap-said { color: var(--ink-2); }
.cap-partner span.cap-now { color: var(--ink); }
.talk.no-text .cap-partner:not(.peek) { filter: blur(7px); opacity: .55; cursor: pointer; user-select: none; }
.cap-fix { display: grid; gap: 2px; inline-size: min(100%, 30rem); padding: 10px 14px; border-radius: var(--r-md); background: var(--card);
  border: 1px solid var(--hair); border-inline-start: 3px solid var(--saffron); font-size: var(--fs-sm); animation: talk-rise .3s var(--ease-out) both; }
.cap-fix strong { font-size: var(--fs-xs); color: var(--ink-2); }
.cap-fix p { margin: 0; }
.cap-fix .fix { font-family: var(--f-display); font-size: var(--fs-md); }
.cap-fix del { text-decoration-color: var(--bad); color: var(--ink-2); }
.cap-fix ins { text-decoration: none; color: var(--ok); font-weight: 700; }
.cap-tip { color: var(--ink-2); font-size: var(--fs-xs); }

/* helpers + dock */
.talk-help { display: flex; justify-content: center; gap: clamp(10px, 4vw, 22px); padding-block: 4px 14px; }
.talk-help button { display: grid; justify-items: center; gap: 4px; min-inline-size: 64px; padding: 0; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: var(--fs-xs); cursor: pointer; }
.talk-help button .ic { box-sizing: content-box; inline-size: 20px; block-size: 20px; padding: 13px; border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 8%, transparent); transition: background-color .2s, transform .15s var(--ease-out); }
.talk-help button:hover .ic { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.talk-help button:active .ic { transform: scale(.94); }
.talk-help button:disabled { opacity: .4; cursor: default; }
.talk-help button[aria-pressed="false"] .ic { background: none; box-shadow: inset 0 0 0 1px var(--hair); }

.talk-dock { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 14px;
  max-inline-size: 26rem; inline-size: 100%; justify-self: center; }
.talk-key, .talk-end { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border: 0; border-radius: 50%; cursor: pointer;
  transition: transform .15s var(--ease-out), background-color .2s; }
.talk-key { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.talk-end { background: var(--bad); color: #fff; }
.talk-key .ic, .talk-end .ic { inline-size: 22px; block-size: 22px; }
.talk-mic { display: grid; justify-items: center; gap: 6px; min-inline-size: 88px; border: 0; padding: 0; background: none; color: var(--ink);
  font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; }
.talk-mic .ic { box-sizing: content-box; inline-size: 30px; block-size: 30px; padding: 22px; border-radius: 50%; background: var(--talk-c);
  color: #fff; box-shadow: 0 10px 30px -10px var(--talk-c); transition: background-color .3s, transform .15s var(--ease-out); }
.talk-mic.on .ic { animation: talk-ring 1.8s var(--ease-std) infinite; }
.talk-mic.off .ic { background: color-mix(in srgb, var(--ink) 30%, transparent); }
.talk-mic:disabled { cursor: default; opacity: .7; }
.talk-mic:active .ic, .talk-key:active, .talk-end:active { transform: scale(.94); }
@keyframes talk-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--talk-c) 45%, transparent); }
  100% { box-shadow: 0 0 0 18px transparent; } }

/* sheets: hint / translation; intro and confirm cards */
.talk-sheet { position: absolute; inset-inline: max(var(--gutter), var(--safe-l)); inset-block-end: calc(150px + var(--safe-b));
  z-index: 3; max-inline-size: 32rem; margin-inline: auto; max-block-size: 45vh; overflow-y: auto; padding: 14px 16px; padding-inline-end: 52px;
  border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); animation: talk-rise .25s var(--ease-out) both; }
.talk-sheet[hidden] { display: none; }
.talk-sheet-x { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; inline-size: 36px; block-size: 36px; }
.talk-sheet .hint-box { display: grid; gap: 8px; }
.talk-sheet .suggs { display: grid; gap: 6px; }
.talk-sheet .sugg { text-align: left; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--hair); background: var(--paper);
  font-family: var(--f-display); font-size: var(--fs-base); color: var(--ink); cursor: default; }
.talk-sheet .hint-close { display: none; }
.talk-sheet .tr-fa { margin: 0 0 6px; font-size: var(--fs-md); }

.talk-intro, .talk-confirm { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: var(--gutter);
  background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.talk-intro[hidden], .talk-confirm[hidden] { display: none; }
.talk-intro-in { display: grid; gap: 12px; justify-items: center; inline-size: min(100%, 26rem); padding: 26px 22px; border-radius: var(--r-xl);
  background: var(--card); border: 1px solid var(--hair); box-shadow: var(--shadow); text-align: center; }
.talk-intro-in h3 { margin: 0; font-size: var(--fs-lg); }
.talk-intro-in ul { margin: 0; padding-inline-start: 1.1em; display: grid; gap: 4px; text-align: start; font-size: var(--fs-sm); justify-self: stretch; }
.talk-badge { display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 18px; color: #fff;
  background: linear-gradient(135deg, var(--indigo), var(--teal)); box-shadow: 0 10px 24px -10px var(--indigo); }
.talk-badge .ic { inline-size: 28px; block-size: 28px; }
.talk-consent { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.8; }
.talk-go { inline-size: 100%; min-block-size: var(--ctl-lg); justify-content: center; border-radius: 999px; }
.talk-err { margin: 0; color: var(--bad); font-size: var(--fs-sm); }
.talk-err[hidden] { display: none; }

@media (min-width: 900px) {
  .talk { padding-block: 22px 26px; }
  .talk-sheet { inset-block-end: 170px; }
}
@media (max-height: 640px) {
  .orb { inline-size: min(40vw, 24vh, 160px); }
  .talk-cap { max-block-size: 30vh; }
  .talk-help { padding-block: 4px 8px; }
}

html[data-motion="0"] .talk, html[data-motion="0"] .orb i, html[data-motion="0"] .orb .orb-core, html[data-motion="0"] .talk-mic .ic,
html[data-motion="0"] .cap-fix, html[data-motion="0"] .talk-sheet, html[data-motion="0"] .talk-chat .msg { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .talk, .orb i, .orb .orb-core, .talk-mic .ic, .cap-fix, .talk-sheet, .talk-chat .msg { animation: none !important; transition: none !important; }
}
.talk-sheet .hint-box > p .muted { display: none; }  /* "tap to copy into the message box" is for the typed chat */