/* Product moments: the dashboard's own light material inside the site. Sequences run while the figure is visible. */
.moment { --ui-ink: #1b1f2a; --ui-2: #6b7280; --ui-line: #e5e7eb; --ui-soft: #f6f7fa; --ui-accent: #5b4bd6; position: relative; width: min(100%, 560px); margin: 0 auto; background: #fff; border: 1px solid #dfe4ea; border-radius: 16px; box-shadow: 0 30px 60px -36px #38435866, 0 2px 4px -2px #42587226; overflow: hidden; text-align: left; font-size: 14px; line-height: 1.45; color: var(--ui-ink); }
.moment--wide { width: min(100%, 780px); }
.moment__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--ui-line); font-size: 12.5px; color: var(--ui-2); background: #fbfbfd; }
.moment__brand { display: inline-flex; align-items: center; gap: 6px; color: #d92332; font-weight: 600; font-size: 12.5px; }
.moment__nav { display: inline-flex; justify-self: center; gap: 2px; padding: 3px; border-radius: 999px; background: #eef0f4; }
.moment__nav i { font-style: normal; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; color: #5c6370; }
.moment__nav i.is-on { background: #fff; color: var(--ui-ink); font-weight: 560; box-shadow: 0 1px 2px #1f293722; }
.moment--hero { width: min(100%, 1120px); border-radius: 18px; }
.moment__body--hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; padding: 22px 24px 24px; }
.ui-pane { min-width: 0; }
.ui-pane--right { display: flex; flex-direction: column; gap: 16px; }
.ui-pane--right .ui-context { padding: 12px 14px 4px; border: 1px solid var(--ui-line); border-radius: 12px; }
.ui-pane--right .ui-context .ui-cites__label { margin-top: 0; }
.ui-pane--right .ui-ctx { grid-template-columns: 92px 1fr; }
.ui-pane--right .ui-ctx .chip { grid-column: 2; justify-self: start; }
.ui-pane--right .ui-ctx:last-child { border-bottom: 0; }
.peek { position: relative; width: 100%; aspect-ratio: 380 / 236; overflow: hidden; border-radius: 18px; border: 1px solid #dfe4ea; background: #fff; box-shadow: 0 30px 50px -36px #38435866, 0 2px 4px -2px #42587226; }
.peek .moment { position: absolute; left: 0; top: 0; width: 600px; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: scale(var(--peek-scale, .64)); transform-origin: 0 0; }
.peek .moment--wide { width: 600px; }
.peek .moment__body--split { grid-template-columns: 1fr; }
.peek .moment__meta, .peek figcaption { display: none; }
.peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(transparent, #fff); pointer-events: none; }
.moment__meta { justify-self: end; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.moment__body { padding: 18px 20px 20px; }
.moment__body--split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
.moment figcaption { padding: 9px 16px; border-top: 1px solid var(--ui-line); font-size: 11.5px; color: #7a828f; background: #fafbfc; }
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 540; line-height: 1.4; white-space: nowrap; }
.chip--amber { background: #f3ecd9; color: #7a5a12; } .chip--green { background: #e4f3ea; color: #0d7a50; } .chip--red { background: #fbe6e9; color: #a72135; } .chip--grey { background: #eef1f5; color: #39414d; } .chip--purple { background: #ece9fb; color: #4b3fb8; }
.ui-cites__label { display: block; margin: 12px 0 6px; font-size: 11.5px; font-weight: 560; letter-spacing: .02em; color: var(--ui-2); }
.ui-btn { padding: 7px 12px; border: 1px solid #d7dce4; border-radius: 9px; background: #fff; font-size: 12.5px; font-weight: 520; color: var(--ui-ink); pointer-events: none; }
.ui-btn--primary { background: var(--ui-ink); border-color: var(--ui-ink); color: #fff; }
.ui-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.ui-actions small { margin-left: auto; font-size: 11.5px; color: var(--ui-2); }
.ui-press { }
 43% { transform: scale(.96); } 46%, 100% { transform: none; } }
/* Staged appearance: fade-N shows at step N of a nine second loop; hide-N disappears at step N. */
 6%, 92% { opacity: 1; transform: none; } 100% { } }
.ui-hide-2 { }
.ui-hide-2 + .chip { position: relative; }
 18%, 92% { position: absolute; } 100% { opacity: 1; } }
/* Chat */
.ui-user { display: flex; justify-content: flex-end; }
.ui-user__bubble { display: inline-block; padding: 9px 14px; border-radius: 16px 16px 4px 16px; background: #e8effc; font-size: 14px; }
.ui-typing { display: flex; gap: 4px; margin: 12px 0 0 2px; height: 10px; }
.ui-typing i { width: 6px; height: 6px; border-radius: 50%; background: #c3c9d3; } .ui-typing i:nth-child(2) { } .ui-typing i:nth-child(3) { }
 10%, 22% { opacity: 1; } 24%, 100% { height: 0; margin: 0; } }
 50% { transform: translateY(-3px); } }
.ui-answer { margin-top: 10px; }
.ui-answer__who { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.ui-answer__line { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; }
.ui-cite { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 9px 12px; border: 1px solid var(--ui-line); border-radius: 10px; margin-top: 6px; color: inherit; }
.ui-cite span { font-weight: 560; font-size: 13.5px; } .ui-cite small { grid-column: 1; font-size: 12px; color: var(--ui-2); } .ui-cite i { grid-row: 1 / span 2; font-style: normal; color: var(--ui-accent); }
.ui-cites .ui-cites__label { }
/* Call */
.ui-call__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ui-call__head > strong { font-size: 17px; letter-spacing: -.01em; }
.ui-call__meta { width: 100%; font-size: 12.5px; color: var(--ui-2); }
.ui-player { position: relative; margin: 14px 0 0; padding: 10px 12px 6px; border: 1px solid var(--ui-line); border-radius: 12px; height: 62px; }
.ui-wave { display: block; width: 100%; height: 40px; }
.ui-marker { position: absolute; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ui-accent); }
.ui-marker::after { content: ""; position: absolute; left: 3px; top: 8px; width: 2px; height: 8px; background: var(--ui-accent); }
.ui-marker--a { left: 62%; } .ui-marker--b { left: 71%; }
.ui-playhead { position: absolute; top: 8px; bottom: 6px; left: 12px; width: 2px; background: var(--ui-accent); }
 100% { left: calc(100% - 12px); } }
.ui-transcript { margin-top: 12px; }
.ui-turn { display: grid; grid-template-columns: 38px 1fr; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.45; }
.ui-turn span { font-size: 12px; color: var(--ui-2); padding-top: 2px; } .ui-turn strong { display: block; font-size: 12px; margin-bottom: 2px; }
.ui-turn--hot { background: #eef0fc; box-shadow: inset 2px 0 0 var(--ui-accent); }
 62%, 100% { background: #eef0fc; box-shadow: inset 2px 0 0 var(--ui-accent); } }
/* Text and email */
.ui-thread { display: flex; flex-direction: column; gap: 8px; }
.ui-msg { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; }
.ui-msg b { display: block; font-size: 11px; font-weight: 600; color: var(--ui-2); margin-bottom: 2px; }
.ui-msg--in { align-self: flex-start; background: #eef1f5; border-bottom-left-radius: 4px; }
.ui-msg--out { align-self: flex-end; background: #e8effc; border-bottom-right-radius: 4px; }
.ui-thread__status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--ui-line); }
.ui-thread__status small { font-size: 12px; color: var(--ui-2); }
.ui-mail { padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 12px; margin-bottom: 8px; }
.ui-mail--out { background: var(--ui-soft); }
.ui-mail__head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; } .ui-mail__head small { color: var(--ui-2); }
.ui-mail p { margin: 0; font-size: 13.5px; line-height: 1.45; }
/* Rep */
.ui-rep { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.ui-avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #eef1f5; font-size: 12px; font-weight: 600; color: #39414d; }
.ui-rep strong { display: block; font-size: 15px; } .ui-rep small { display: block; font-size: 12px; color: var(--ui-2); }
.ui-rep__rate { text-align: right; } .ui-rep__rate strong { font-size: 18px; }
.ui-bar { display: block; width: 90px; height: 5px; margin: 4px 0 0 auto; border-radius: 3px; background: #eef1f5; overflow: hidden; }
.ui-bar__fill { display: block; width: 20%; height: 100%; background: #39414d; border-radius: 3px; transform-origin: 0 50%; }
 12%, 100% { transform: scaleX(1); } }
.ui-moment { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ui-line); }
.ui-moment strong { display: block; font-size: 13.5px; } .ui-moment small { font-size: 12px; color: var(--ui-2); } .ui-moment em { font-style: normal; font-size: 12px; color: #7a5a12; }
.ui-play { width: 26px; height: 26px; border-radius: 50%; background: var(--ui-accent); position: relative; }
.ui-play::after { content: ""; position: absolute; left: 10px; top: 7px; border-left: 8px solid #fff; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
/* Roleplay */
.ui-feedback { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--ui-soft); }
.ui-feedback .ui-cites__label { margin-top: 0; }
.ui-fb { position: relative; padding: 6px 0 6px 24px; font-size: 13.5px; line-height: 1.45; }
.ui-fb::before { content: ""; position: absolute; left: 0; top: 10px; width: 14px; height: 14px; border-radius: 50%; }
.ui-fb--ok::before { background: #0d7a50; } .ui-fb--miss::before { background: #c98a0a; }
/* Record */
.ui-field { display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--ui-line); font-size: 13.5px; }
.ui-field span { font-size: 12.5px; color: var(--ui-2); } .ui-field strong { font-weight: 500; }
.ui-field--diff strong { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ui-field--diff .chip { grid-column: 2; justify-self: start; }
.ui-old { color: var(--ui-2); text-decoration: none; }
 24%, 100% { text-decoration: line-through; } }
.ui-new { font-style: normal; color: #a72135; font-weight: 560; }
/* Proposal and receipt */
.ui-proposal { padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 12px; }
.ui-proposal__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.ui-proposal__why { margin: 6px 0 0; font-size: 13px; color: var(--ui-2); line-height: 1.45; }
.ui-preview { margin-top: 10px; padding: 9px 12px; border-radius: 12px 12px 12px 4px; background: #e8effc; font-size: 13px; line-height: 1.45; }
.ui-receipt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; } .ui-receipt small { font-size: 12px; color: var(--ui-2); }
/* Voice */
.ui-voice__row { display: flex; align-items: center; gap: 8px; position: relative; } .ui-voice__time { font-size: 13px; font-weight: 560; }
/* Context */
.ui-ctx { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--ui-line); }
.ui-ctx span { font-size: 13px; color: var(--ui-2); } .ui-ctx strong { font-size: 14px; font-weight: 500; line-height: 1.4; }
/* Overview */
.ui-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ui-stat { padding: 10px 12px; border: 1px solid var(--ui-line); border-radius: 12px; }
.ui-stat span { display: block; font-size: 12px; color: var(--ui-2); } .ui-stat strong { display: block; margin-top: 4px; font-size: 26px; letter-spacing: -.02em; } .ui-stat small { display: block; font-size: 11.5px; color: var(--ui-2); }

/* Sequences play once, when the figure first becomes visible, and hold the finished state. Without JavaScript every moment shows its finished state. */
.ui-typing, .ui-hide-2 { display: none; }
.ui-old { position: relative; }
.ui-old::after { content: ""; position: absolute; left: 0; right: 0; top: 55%; height: 1.5px; background: #6b7280; transform-origin: 0 50%; }
.moment[data-running] .ui-typing { display: flex; animation: ui-typing 1.6s .5s both; }
.moment[data-running] .ui-hide-2 { display: inline-block; animation: ui-hide .4s .8s both; }
.moment[data-running] .ui-user__bubble { animation: ui-fade .6s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-answer__line--1 { animation: ui-fade .6s 2s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-answer__line--2 { animation: ui-fade .6s 2.7s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-cites .ui-cites__label { animation: ui-fade .6s 3.3s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-cite--1 { animation: ui-fade .6s 3.5s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-cite--2 { animation: ui-fade .6s 3.9s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-fade-1 { animation: ui-fade .6s .2s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-fade-2 { animation: ui-fade .6s .9s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-fade-3 { animation: ui-fade .6s 1.6s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-fade-4 { animation: ui-fade .6s 2.3s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-fade-5 { animation: ui-fade .6s 3s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-fade-6 { animation: ui-fade .6s 3.7s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-msg--1 { animation: ui-fade .6s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-msg--2 { animation: ui-fade .6s .9s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-msg--3 { animation: ui-fade .6s 1.8s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-msg--4 { animation: ui-fade .6s 2.7s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-moment--1 { animation: ui-fade .6s .8s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-moment--2 { animation: ui-fade .6s 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-moment--3 { animation: ui-fade .6s 2s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-stat--1 { animation: ui-fade .6s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-stat--2 { animation: ui-fade .6s .3s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-stat--3 { animation: ui-fade .6s .6s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-stat--4 { animation: ui-fade .6s .9s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-ctx--1 { animation: ui-fade .6s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-ctx--2 { animation: ui-fade .6s .7s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-ctx--3 { animation: ui-fade .6s 1.4s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-bar__fill { animation: ui-grow 1.2s .3s cubic-bezier(.22, 1, .36, 1) both; transform-origin: 0 50%; }
.moment[data-running] .ui-playhead { animation: ui-playhead 8s linear infinite; }
.moment[data-running] .ui-turn--hot { animation: ui-hot .8s 2.6s both; }
.moment[data-running] .ui-old::after { animation: ui-strike .5s 1.1s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-new { animation: ui-fade .6s 1.7s cubic-bezier(.22, 1, .36, 1) both; }
.moment[data-running] .ui-press { animation: ui-press .5s 2.4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ui-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ui-typing { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; height: 0; margin: 0; } }
@keyframes ui-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ui-hide { to { opacity: 0; visibility: hidden; position: absolute; } }
@keyframes ui-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ui-playhead { 0% { left: 12px; } 100% { left: calc(100% - 12px); } }
@keyframes ui-hot { from { background: transparent; box-shadow: none; } to { background: #eef0fc; box-shadow: inset 2px 0 0 var(--ui-accent); } }
@keyframes ui-strike { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ui-press { 0%, 100% { transform: none; } 50% { transform: scale(.96); } }
.moment[data-running] .ui-typing i { animation: ui-dot 1s ease-in-out infinite; } .moment[data-running] .ui-typing i:nth-child(2) { animation-delay: .15s; } .moment[data-running] .ui-typing i:nth-child(3) { animation-delay: .3s; }
@media (max-width: 900px) { .moment__body--hero { grid-template-columns: 1fr; } .moment__nav { display: none; } .moment__bar { grid-template-columns: auto 1fr; } }
@media (max-width: 700px) { .moment__body--split { grid-template-columns: 1fr; } .ui-stats { grid-template-columns: 1fr 1fr; } .ui-ctx { grid-template-columns: 1fr; gap: 4px; } .ui-field { grid-template-columns: 1fr; gap: 2px; } .moment__meta { display: none; } }
@media (prefers-reduced-motion: reduce) { .moment[data-running] * { animation: none !important; } .moment[data-running] .ui-typing, .moment[data-running] .ui-hide-2 { display: none; } }