/* App chrome keeps its own visual language. Raven owns only the rising surface. */
.scene--replies { --reply-icon-size: clamp(58px,19.4cqw,72px); --reply-grid-gap: 38px; --reply-screen-tone: 7 7 7; container-type: inline-size; }
.reply-content { position: absolute; top: 7%; left: 1%; right: 1%; height: 82%; color: #f0f1f2; }
.reply-content p, .reply-content h3 { margin: 0; }
.reply-content svg { display: block; width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reply-launcher { position: absolute; z-index: 3; inset: 0; container-type: size; font-family: Geist,Arial,sans-serif; }
.reply-launch-title { position: absolute; top: 5%; left: 50%; width: calc(3 * var(--reply-icon-size) + 2 * var(--reply-grid-gap)); transform: translateX(-50%); color: #e9ebed; font-size: 2.25rem; line-height: 1.1; font-weight: 400; letter-spacing: -.055em; opacity: var(--reply-launcher-other-opacity,1); }
.reply-launch-grid { position: absolute; top: 19%; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3,var(--reply-icon-size)); gap: 22px var(--reply-grid-gap); }
.reply-launch-app { display: flex; flex-direction: column; align-items: center; min-width: 0; opacity: var(--reply-launcher-other-opacity,1); }
.reply-launch-app[data-app="slack"] { position: relative; z-index: 2; opacity: 1; }
.reply-launch-icon { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border: 1px solid #ffffff0b; border-radius: 25%; background: linear-gradient(145deg,#ffffff02,transparent 65%); box-shadow: inset 0 1px 0 #ffffff12,inset 0 -1px 0 #ffffff05; }
.reply-launch-icon::before { content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; background: linear-gradient(135deg,#e4eaf080,#6f767d25 27%,#ffffff09 65%,#bec8d135); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; }
.reply-launch-app[data-app="slack"] .reply-launch-icon { transform: translate(calc((var(--reply-icon-size) + var(--reply-grid-gap)) * var(--reply-open,0)),calc((28cqh - var(--reply-icon-size) / 2) * var(--reply-open,0))) scale(calc(1 + var(--reply-open,0) * 3)); }
.reply-launch-name { margin-top: 8px; color: #b9bcc0; font-size: 11px; line-height: 1.3; letter-spacing: -.015em; }
.reply-launch-app[data-app="slack"] .reply-launch-name { opacity: max(0,calc(1 - var(--reply-open,0) * 4)); }
.reply-launch-mark { display: block; width: 48%; height: 48%; background: linear-gradient(150deg,#f1f3f5,#b2b8bf 60%,#77818b); mask: var(--reply-mark) center / contain no-repeat; }
[data-app="slack"] { --reply-mark: url('/assets/reply-apps/slack.svg'); }
[data-app="x"] { --reply-mark: url('/assets/reply-apps/x.svg'); }
[data-app="instagram"] { --reply-mark: url('/assets/reply-apps/instagram.svg'); }
[data-app="uber"] { --reply-mark: url('/assets/reply-apps/uber.svg'); }
[data-app="youtube"] { --reply-mark: url('/assets/reply-apps/youtube.svg'); }
[data-app="notion"] { --reply-mark: url('/assets/reply-apps/notion.svg'); }
[data-app="linkedin"] { --reply-mark: url('/assets/reply-apps/linkedin.svg'); }
[data-app="wechat"] { --reply-mark: url('/assets/reply-apps/wechat.svg'); }
[data-app="uber"] .reply-launch-mark { width: 66%; height: 66%; }
.reply-view { --reply-panel: 0; --reply-keyboard-height: max(128px,calc(34cqh - 16px)); --reply-panel-rise: var(--reply-keyboard-height); --reply-nav-height: 42px; --reply-nav-gap: 8px; --reply-composer-height: 72px; --reply-header-height: 43px; --reply-tabs-height: 31px; container-type: size; position: absolute; inset: 0; overflow: hidden; font-family: Arial,Helvetica,sans-serif; font-size: 14px; opacity: 0; visibility: hidden; mask-image: linear-gradient(#000 0%,#000 calc(100% - 24px),transparent 100%); }
.reply-view--slack { color: #d1d2d3; }
/* Slack shares the handset's black canvas. Its native chrome, typography and
   controls define the interface without an enclosing frame or edge fade. */
.reply-app-shell { position: absolute; top: 8px; left: 7px; right: 7px; bottom: calc(22px + max(0px,var(--reply-keyboard-height) - 10px) * var(--reply-panel)); transform-origin: 0 0; transform: translate(calc((50cqw - 1.5 * var(--reply-icon-size) - var(--reply-grid-gap) - 7px) * (1 - var(--reply-open,1))),calc((19cqh - 8px) * (1 - var(--reply-open,1)))) scale(calc(.22 + var(--reply-open,1) * .78)); }
.reply-app-shell::before { content: ''; position: absolute; inset: 0; border-radius: 24px; background: #030405; opacity: calc(1 - var(--reply-open,1)); }
.reply-app-window { position: absolute; inset: 0; overflow: hidden; background: transparent; opacity: calc(1 - .18 * var(--reply-notice-backdrop,0)); }
.reply-avatar { display: block; width: 34px; height: 34px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.slack-header { display: flex; align-items: center; gap: 8px; height: var(--reply-header-height); padding: 7px 11px; color: #f8f8f8; opacity: calc(1 - var(--reply-notice-backdrop,0)); }
.slack-header > svg { width: 18px; height: 18px; }
.slack-header h3 { font-size: 19px; font-weight: 700; line-height: 1; }
.slack-header h3 span { font-weight: 400; margin-right: 3px; }
.slack-header-end { display: flex; gap: 15px; margin-left: auto; }
.slack-tabs { display: flex; align-items: center; gap: 17px; height: var(--reply-tabs-height); padding: 0 11px; border-bottom: 1px solid #ffffff24; font-size: 11px; color: #b9bbbe; opacity: calc(1 - var(--reply-notice-backdrop,0)); }
.slack-tabs > span { display: flex; align-items: center; gap: 5px; height: 100%; }
.slack-tabs > span:first-child { color: #fff; border-bottom: 2px solid #fff; font-weight: 700; }
.slack-tabs svg { width: 14px; height: 14px; }
.reply-conversation { position: absolute; top: calc(var(--reply-header-height) + var(--reply-tabs-height)); bottom: calc(var(--reply-composer-height) + 16px + (var(--reply-nav-height) + var(--reply-nav-gap) - 8px) * (1 - var(--reply-panel))); left: 0; right: 0; overflow: hidden; mask-image: linear-gradient(transparent,#000 8px); }
.reply-thread { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 11px 0; }
.slack-history { display: grid; gap: 18px; padding-bottom: 16px; }
.slack-message { display: flex; align-items: flex-start; gap: 8px; line-height: 1.36; font-size: clamp(12px,3.85cqw,15px); }
.slack-message > div { min-width: 0; }
.slack-person { margin-bottom: 3px !important; font-weight: 700; color: #f8f8f8; font-size: 13px; }
.slack-person time { margin-left: 5px; font-size: 10px; color: #a4a7ab; font-weight: 400; white-space: nowrap; }
.slack-reaction { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 2px 7px; border-radius: 11px; background: #263b4c; border: 1px solid #82b4de66; font-size: 11px; }
.slack-date { position: relative; display: flex; align-items: center; justify-content: center; margin: 9px -11px 15px; height: 22px; font-size: 11px; font-weight: 700; }
.slack-date::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #ffffff22; }
.slack-date span { position: relative; padding: 4px 13px; background: #000; border: 1px solid #ffffff28; border-radius: 14px; }
.reply-compose { position: absolute; bottom: calc(8px + (var(--reply-nav-height) + var(--reply-nav-gap) - 8px) * (1 - var(--reply-panel))); left: 0; right: 0; }
.slack-compose { height: var(--reply-composer-height); margin: 0 8px; padding: 9px 10px 7px; border: 1px solid #62666b; border-radius: 9px; background: transparent; }
.slack-compose > p { font-size: 13px; color: #a6a7a9; }
.slack-compose-tools { display: flex; align-items: center; gap: 12px; margin-top: 3px; height: 24px; color: #c3c6ca; }
.slack-compose-tool { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; line-height: 1; }
.slack-compose-tools svg { width: 18px; height: 18px; stroke-width: 1.7; }
.slack-plus { border-radius: 50%; background: #ffffff0b; }
.slack-format { font-size: 15px; letter-spacing: -.08em; }
.slack-send { margin-left: auto; opacity: .55; }
.reply-app-navigation { position: absolute; left: 0; right: 0; bottom: 0; height: var(--reply-nav-height); }
.slack-navigation { display: flex; align-items: center; justify-content: space-around; background: transparent; }
.slack-navigation > span { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #b5b8bb; font-size: 8px; }
.slack-navigation > span:first-child { color: #f4f4f5; }
.slack-navigation svg, .slack-navigation .reply-avatar { width: 17px; height: 17px; border-radius: 5px; }
/* The full-width reply surface rises into the same black screen. */
.reply-surface { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: var(--reply-keyboard-height); padding: 4px 14px 32px; background: transparent; transform: translateY(105%); visibility: hidden; font-family: Geist,Arial,sans-serif; }
.reply-choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; height: 100%; margin: 0; padding: 0; list-style: none; }
.reply-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 7px; min-width: 0; min-height: 0; padding: 8px 10px 10px 8px; border: 1px solid transparent; border-radius: 14px; background: linear-gradient(150deg,#090a0b,#010101 65%) padding-box,linear-gradient(145deg,#ffffff60,#ffffff18 30%,#ffffff0b 65%,#ffffff28) border-box; box-shadow: inset 0 1px 0 #ffffff0b; }
.reply-intent { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 21px; padding: 3px 7px; border: 1px solid #b9c3cc32; border-radius: 7px; background: linear-gradient(155deg,#bfc8d329,#66707c17); color: #d1d6dc; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.reply-calendar img { width: 12px; height: 12px; }
.reply-card--secondary { background: linear-gradient(150deg,#050506,#010101 65%) padding-box,linear-gradient(145deg,#ffffff24,#ffffff09 55%,#ffffff13) border-box; }
.reply-card--secondary .reply-intent { background: #ffffff03; border-color: #ffffff12; color: #858c94; }
.reply-choice p { color: #e7e8eb; font-size: clamp(12px,3.85cqw,14px); line-height: 1.34; letter-spacing: -.02em; }
.reply-card--primary { transform-origin: 50% 55%; }
.reply-card--primary::after { content: ''; position: absolute; inset: -1px; border: 1px solid #d9e4ed; border-radius: inherit; opacity: var(--reply-selection,0); box-shadow: inset 0 0 16px #b2d8ef0c,0 0 16px #dcefff0a; }
.reply-tap { position: absolute; left: 55%; top: 56%; width: 27px; height: 27px; border: 1px solid #ffffffb3; border-radius: 50%; background: #ffffff18; opacity: 0; }
.reply-orb { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: 86px; height: 86px; margin-top: 0; transform: translate(-50%,-50%); border-radius: 50%; background: transparent; }
.reply-orb img { display: block; width: 78px; height: 78px; filter: drop-shadow(0 0 12px #99c8ee14); }
.reply-undo { position: absolute; z-index: 3; top: calc(42% + 31px); left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-width: 48px; min-height: 24px; padding: 3px 12px; border: 1px solid #ffffff14; border-radius: 999px; color: #8f969d; font-size: 11px; background: #ffffff03; opacity: 0; visibility: hidden; }
.reply-system-controls { position: absolute; left: 23px; right: 23px; bottom: 8px; display: flex; justify-content: space-between; color: #697179; }
.reply-system-controls svg { width: 16px; height: 16px; }
.slack-compose-copy { display: grid; min-height: 30px; align-items: start; }
.slack-compose-copy > p { grid-area: 1 / 1; font-size: 12px; line-height: 1.3; }
.slack-draft-placeholder { color: #a6a7a9; }
.slack-draft-text { color: #f6f6f6; opacity: 0; visibility: hidden; }
.slack-sent-message, .slack-confirmation { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; }
.slack-sent-message > .slack-message, .slack-confirmation > .slack-message { min-height: 0; overflow: hidden; }
.slack-sent-message .slack-message > div, .slack-confirmation .slack-message > div { padding-top: 8px; }
.slack-sent-message .reply-avatar, .slack-confirmation .reply-avatar { margin-top: 8px; }
/* Match the sampled handset screen; neither surface paints a darker black. */
.reply-notice-shade { position: absolute; z-index: 4; inset: 0; pointer-events: none; opacity: var(--reply-notice-backdrop,0); background: radial-gradient(ellipse 95% 65% at 50% 0%,rgb(var(--reply-screen-tone)) 0%,rgb(var(--reply-screen-tone)) 48%,rgb(var(--reply-screen-tone) / .8) 62%,rgb(var(--reply-screen-tone) / .33) 80%,rgb(var(--reply-screen-tone) / 0) 100%); mask-image: linear-gradient(90deg,transparent 0%,#0002 2%,#0008 5%,#000 10%,#000 90%,#0008 95%,#0002 98%,transparent 100%),linear-gradient(transparent 0%,#0002 3%,#0009 7%,#000 12%,#000 80%,transparent 100%); mask-composite: intersect; filter: blur(12px); }
.reply-scheduling { position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 25px 20px 45px; background: transparent; opacity: 0; visibility: hidden; }
.reply-scheduling > img { width: 58px; height: 58px; flex-shrink: 0; }
.reply-scheduling p { color: #f3f4f5; font-family: Geist,Arial,sans-serif; font-size: clamp(14px,4.6cqw,17px); line-height: 1.35; letter-spacing: -.025em; }
.reply-scheduling span { display: block; margin-top: 6px; color: #a1a8af; font-family: Geist,Arial,sans-serif; font-size: 11px; line-height: 1.4; }
.scene--replies[data-active="true"][data-phase="scheduling"] .reply-scheduling > img { animation: reply-notice-orb 2.8s ease-in-out 3; }
@keyframes reply-notice-orb { 0%,100% { transform: translateY(0) rotate(-5deg) scale(1); filter: drop-shadow(0 0 9px #b6dcff0d); } 50% { transform: translateY(-2px) rotate(9deg) scale(1.045); filter: drop-shadow(0 0 14px #b6dcff28); } }
.scene--replies[data-active="true"][data-phase="thinking"] .reply-view--slack .reply-orb img { animation: reply-orb-arrival 1s ease-out both; }
.scene--replies[data-active="true"][data-phase="selection"] .reply-view--slack .reply-tap { animation: reply-tap .55s ease-out both; }
@keyframes reply-orb-arrival { 0% { opacity: .5; transform: scale(.88); } 55% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes reply-tap { 0% { opacity: 0; transform: scale(1.4); } 35% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion:reduce) { .scene--replies .reply-orb img, .scene--replies .reply-tap, .scene--replies .reply-scheduling > img { animation: none !important; } }
.reply-copy-stack { display: grid; }
.side-narrative .reply-copy-stack > p { grid-area: 1 / 1; align-self: center; margin: 0; }
.reply-copy-intelligence { opacity: 0; visibility: hidden; }
.reply-copy-but { display: block; margin-bottom: 13px; color: #a5a6a8; font-size: 17px; line-height: 1.3; letter-spacing: -.02em; }
.reply-reader { max-width: 430px; margin-top: 32px; }
.reply-reader-launch-title { margin-top: 28px; font-size: 2rem; font-weight: 400; letter-spacing: -.05em; }
.reply-reader-launcher { --reply-icon-size: 78px; --reply-grid-gap: 24px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; width: min(100%,300px); margin: 22px 0 32px; }
.reply-reader-description { max-width: 420px; color: #a5a6a8; font-size: 16px; line-height: 1.6; }
.reply-reader-example + .reply-reader-example { margin-top: 36px; }
.reply-reader-example h3 { margin: 0 0 10px; color: #b8c6d0; font-size: 15px; font-weight: 400; }
.reply-reader-example > p { margin: 0 0 16px; font-size: 17px; line-height: 1.5; }
.reply-reader .reply-choices { height: auto; }
.reply-reader .reply-choice { min-height: 150px; padding: 16px; gap: 22px; }
.reply-reader .reply-choice p { margin: 0; font-size: 16px; }
.reply-reader .reply-intent { font-size: 11px; }
@media (max-width:760px) {
  .side-narrative .reply-copy-stack > p { font-size: clamp(28px,8.2vw,34px); line-height: 1.1; }
  .reply-copy-but { font-size: 14px; margin-bottom: 9px; }
}
.is-compact .reply-content { top: 7%; height: 73%; }
.is-compact .reply-view { --reply-keyboard-height: max(120px,calc(40cqh - 16px)); --reply-composer-height: 62px; --reply-header-height: 33px; --reply-tabs-height: 24px; }
.is-compact .scene--replies { --reply-icon-size: 58px; --reply-grid-gap: 28px; }
.is-compact .reply-launch-title, .is-compact-roster .reply-launch-title { font-size: 2rem; }
.is-compact .reply-launch-title { top: 2%; }
.is-compact .reply-launch-grid { top: 19%; row-gap: 16px; }
.is-compact .reply-launch-app[data-app="slack"] .reply-launch-icon { transform: translate(calc((var(--reply-icon-size) + var(--reply-grid-gap)) * var(--reply-open,0)),calc((28cqh - var(--reply-icon-size) / 2) * var(--reply-open,0))) scale(calc(1 + var(--reply-open,0) * 3)); }
.is-compact .reply-app-shell { left: 6px; right: 6px; transform: translate(calc((50cqw - 1.5 * var(--reply-icon-size) - var(--reply-grid-gap) - 6px) * (1 - var(--reply-open,1))),calc((19cqh - 8px) * (1 - var(--reply-open,1)))) scale(calc(.22 + var(--reply-open,1) * .78)); }
.is-compact .reply-launch-name { font-size: 10px; margin-top: 7px; }
.is-compact .reply-copy-stack > p { font-size: 28px; }
.is-compact .slack-header { padding-inline: 9px; }
.is-compact .slack-header h3 { font-size: 16px; }
.is-compact .slack-tabs { padding-inline: 9px; }
.is-compact .reply-thread { padding-inline: 9px; }
.is-compact .slack-date { margin-bottom: 10px; opacity: calc((1 - var(--reply-panel)) * (1 - var(--reply-scheduling,0))); }
.is-compact .slack-compose { padding: 6px 8px 4px; }
.is-compact .slack-compose-copy { min-height: 24px; }
.is-compact .slack-compose > p { font-size: 11px; }
.is-compact .slack-compose-tools { margin-top: 3px; gap: 10px; height: 22px; }
.is-compact .slack-compose-tool { flex-basis: 22px; width: 22px; height: 22px; }
.is-compact .slack-compose-tools svg { width: 16px; height: 16px; }
.is-compact .slack-format { font-size: 14px; }
.is-compact .reply-avatar { width: 28px; height: 28px; }
.is-compact .slack-message { font-size: 12px; gap: 7px; }
.is-compact .slack-person { font-size: 12px; }
.is-compact .slack-person time { font-size: 9px; }
.is-compact .slack-navigation .reply-avatar { width: 17px; height: 17px; }
.is-compact .reply-surface { padding: 3px 12px 28px; }
.is-compact .reply-choice { padding: 6px 8px 8px 6px; gap: 6px; border-radius: 12px; }
.is-compact .reply-choice p { font-size: 12px; line-height: 1.3; }
.is-compact .reply-intent { font-size: 9px; min-height: 19px; padding: 3px 5px; gap: 4px; }
.is-compact .reply-orb { width: 78px; height: 78px; }
.is-compact .reply-orb img { width: 70px; height: 70px; }
.is-compact .reply-system-controls { bottom: 6px; }
.is-compact .slack-compose-copy > p { font-size: 11px; }
.is-compact .reply-scheduling { padding: 19px 14px 40px; gap: 8px; }
.is-compact .reply-scheduling > img { width: 48px; height: 48px; }
.is-compact .reply-scheduling span { font-size: 10px; }
@media (max-width:360px) {
  .reply-reader .reply-choices { grid-template-columns: 1fr; }
  .reply-reader .reply-choice { min-height: 120px; }
}

.reply-reader .reply-card--primary { transform: none; }
.reply-reader .reply-card--primary::after, .reply-reader .reply-tap { display: none; }
.reply-reader .reply-reader-followup { margin-top: 20px; color: #a5a6a8; font-size: 15px; line-height: 1.6; }