/* Defaults are layered so a host can override the supported properties once. */
@layer rpd-defaults {
  rails-phone-demo, .rails-phone-demo {
    --rpd-width: 320px;
    --rpd-ground: var(--ground, #FFFFFF);
    --rpd-surface: var(--surface, #F5F5F7);
    --rpd-raised: var(--raised, #FFFFFF);
    --rpd-ink: var(--ink, #1D1D1F);
    --rpd-muted: var(--muted, #636368);
    --rpd-hairline: var(--hairline, #E3E3E8);
    --rpd-soft: var(--soft, #E8E8ED);
    --rpd-accent: var(--accent, #0071E3);
    --rpd-agent-tint: transparent;
    --rpd-fill: rgb(255 255 255 / .72);
    --rpd-face-fill: rgb(255 255 255 / .42);
    --rpd-saturate: 1.6;
    --rpd-rim-a: .55; --rpd-rim-b: .20;
    --rpd-face-rim-a: .70; --rpd-face-rim-b: .25;
    --rpd-thick: rgb(0 0 0 / .06);
    --rpd-shade: rgb(29 29 31 / .06);
    --rpd-shadow: rgb(0 0 0 / .12);
    --rpd-radius-message: 20px;
    --rpd-spring-standard: 400ms cubic-bezier(.22,1,.36,1);
    --rpd-spring-quick: 250ms cubic-bezier(.2,.8,.2,1);
    --rpd-fade-fast: 120ms ease-out;
    --rpd-ease-morph: linear(0 0%, 0.0113 2.5%, 0.0417 5%, 0.0862 7.5%, 0.1406 10%, 0.2017 12.5%, 0.2666 15%, 0.3331 17.5%, 0.3993 20%, 0.4638 22.5%, 0.5257 25%, 0.5842 27.5%, 0.6387 30%, 0.689 32.5%, 0.7348 35%, 0.7763 37.5%, 0.8134 40%, 0.8463 42.5%, 0.8753 45%, 0.9005 47.5%, 0.9223 50%, 0.941 52.5%, 0.9567 55%, 0.97 57.5%, 0.9809 60%, 0.9898 62.5%, 0.997 65%, 1.0026 67.5%, 1.0069 70%, 1.0101 72.5%, 1.0124 75%, 1.0139 77.5%, 1.0148 80%, 1.0151 82.5%, 1.0151 85%, 1.0147 87.5%, 1.0141 90%, 1.0133 92.5%, 1.0124 95%, 1.0115 97.5%, 1 100%);
    --rpd-spring-morph: 550ms var(--rpd-ease-morph);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) { rails-phone-demo, .rails-phone-demo {
    --rpd-ground: var(--ground, #101012); --rpd-surface: var(--surface, #161618);
    --rpd-raised: var(--raised, #1E1E21); --rpd-ink: var(--ink, #F5F5F7);
    --rpd-muted: var(--muted, #A1A1A8); --rpd-hairline: var(--hairline, #2C2C31);
    --rpd-soft: var(--soft, #2A2A2E); --rpd-accent: var(--accent, #0071E3);
    --rpd-fill: rgb(28 28 31 / .72); --rpd-face-fill: rgb(28 28 31 / .46);
    --rpd-saturate: 1.4; --rpd-rim-a: .32; --rpd-rim-b: .08;
    --rpd-face-rim-a: .35; --rpd-face-rim-b: .08;
    --rpd-thick: rgb(0 0 0 / .30); --rpd-shade: rgb(245 245 247 / .08);
    --rpd-shadow: rgb(0 0 0 / .40); color-scheme: dark;
  } }
  :where([data-theme="dark"], [data-scheme="dark"]) :is(rails-phone-demo, .rails-phone-demo),
  :is(rails-phone-demo, .rails-phone-demo):where([data-theme="dark"], [data-scheme="dark"]) {
    --rpd-ground: var(--ground, #101012); --rpd-surface: var(--surface, #161618);
    --rpd-raised: var(--raised, #1E1E21); --rpd-ink: var(--ink, #F5F5F7);
    --rpd-muted: var(--muted, #A1A1A8); --rpd-hairline: var(--hairline, #2C2C31);
    --rpd-soft: var(--soft, #2A2A2E); --rpd-accent: var(--accent, #0071E3);
    --rpd-fill: rgb(28 28 31 / .72); --rpd-face-fill: rgb(28 28 31 / .46);
    --rpd-saturate: 1.4; --rpd-rim-a: .32; --rpd-rim-b: .08;
    --rpd-face-rim-a: .35; --rpd-face-rim-b: .08;
    --rpd-thick: rgb(0 0 0 / .30); --rpd-shade: rgb(245 245 247 / .08);
    --rpd-shadow: rgb(0 0 0 / .40); color-scheme: dark;
  }
  :where([data-theme="light"], [data-scheme="light"]) :is(rails-phone-demo, .rails-phone-demo),
  :is(rails-phone-demo, .rails-phone-demo):where([data-theme="light"], [data-scheme="light"]) {
    --rpd-ground: var(--ground, #FFFFFF); --rpd-surface: var(--surface, #F5F5F7);
    --rpd-raised: var(--raised, #FFFFFF); --rpd-ink: var(--ink, #1D1D1F);
    --rpd-muted: var(--muted, #636368); --rpd-hairline: var(--hairline, #E3E3E8);
    --rpd-soft: var(--soft, #E8E8ED); --rpd-accent: var(--accent, #0071E3);
    --rpd-fill: rgb(255 255 255 / .72); --rpd-face-fill: rgb(255 255 255 / .42);
    --rpd-saturate: 1.6; --rpd-rim-a: .55; --rpd-rim-b: .20;
    --rpd-face-rim-a: .70; --rpd-face-rim-b: .25;
    --rpd-thick: rgb(0 0 0 / .06); --rpd-shade: rgb(29 29 31 / .06);
    --rpd-shadow: rgb(0 0 0 / .12); color-scheme: light;
  }
  .rails-phone-demo[data-agent-tint="hiring"] { --rpd-agent-tint: var(--rails-color-agent-hiring, #4F5BD5); }
  .rails-phone-demo[data-agent-tint="tutor"] { --rpd-agent-tint: var(--rails-color-agent-tutor, #1F8A8A); }
  .rails-phone-demo[data-agent-tint="poker"] { --rpd-agent-tint: var(--rails-color-agent-poker, #2E8B57); }
}

rails-phone-demo, .rails-phone-demo {
  display: block; position: relative; width: min(100%, var(--rpd-width, 320px));
  aspect-ratio: 320 / 660; box-sizing: border-box; border: 1px solid var(--rpd-hairline);
  border-radius: 44px; background: var(--rpd-ground); color: var(--rpd-ink);
  overflow: clip; isolation: isolate;
  font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.rails-phone-demo :where(*, *::before, *::after) { box-sizing: border-box; }
.rails-phone-demo :where(p, h3) { margin: 0; }
.rails-phone-demo .rpd { position: absolute; inset: 5px; display: flex; flex-direction: column; border-radius: 39px; overflow: hidden; background: var(--rpd-surface); }
.rails-phone-demo .rpd-t-body { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 400; }
.rails-phone-demo .rpd-t-foot { font-size: .8125rem; line-height: 1.125rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.rails-phone-demo .rpd-t-sub { font-size: .9375rem; line-height: 1.25rem; font-weight: 400; }
.rails-phone-demo .rpd-t-head { font-size: 1.0625rem; line-height: 1.375rem; font-weight: 600; }
.rails-phone-demo .rpd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.rails-phone-demo .rpd-glass {
  background: var(--rpd-fill); color: var(--rpd-ink);
  -webkit-backdrop-filter: blur(20px) saturate(var(--rpd-saturate));
  backdrop-filter: blur(20px) saturate(var(--rpd-saturate));
  box-shadow: inset 0 -1px 0 var(--rpd-thick);
}
.rails-phone-demo .rpd-glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgb(255 255 255 / var(--rpd-rim-a)), rgb(255 255 255 / var(--rpd-rim-b)));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.rails-phone-demo .rpd-bar { position: relative; flex: none; z-index: 3; min-height: 92px; padding: 16px 16px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; }
.rails-phone-demo .rpd-time { grid-column: 1 / -1; }
.rails-phone-demo .rpd-name { min-width: 0; overflow-wrap: anywhere; }
.rails-phone-demo .rpd-pause, .rails-phone-demo .rpd-action {
  min-width: 44px; min-height: 44px; border-radius: 999px; border: 1px solid var(--rpd-hairline);
  background: var(--rpd-raised); color: var(--rpd-ink); font-family: inherit; cursor: pointer; padding: 8px 12px;
}
.rails-phone-demo .rpd-pause { opacity: 0; transition: opacity var(--rpd-fade-fast); }
.rails-phone-demo:hover .rpd-pause, .rails-phone-demo:focus-within .rpd-pause { opacity: 1; }
@media (hover: none) { .rails-phone-demo .rpd-pause { opacity: 1; } }
.rails-phone-demo .rpd-pause[hidden] { display: none; }
.rails-phone-demo :where(button, a, [tabindex]):focus-visible { outline: 2px solid var(--rpd-accent); outline-offset: 2px; }
.rails-phone-demo .rpd-thread { flex: 1; min-height: 0; padding: 16px 12px 80px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rails-phone-demo .rpd-turn { margin: 0 0 12px; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity var(--rpd-spring-standard), transform var(--rpd-spring-standard); overflow-wrap: anywhere; }
.rails-phone-demo .rpd-turn.rpd-on, .rails-phone-demo .rpd-is-typing { opacity: 1; transform: none; }
.rails-phone-demo .rpd-person { display: flex; justify-content: flex-end; }
.rails-phone-demo .rpd-message { border-radius: var(--rpd-radius-message); padding: 10px 12px; }
.rails-phone-demo .rpd-person .rpd-message { max-width: 90%; background: var(--rpd-accent); color: #FFF; }
.rails-phone-demo .rpd-agent { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; align-items: end; }
.rails-phone-demo .rpd-agent .rpd-message { grid-column: 2; grid-row: 1; background: var(--rpd-soft); }
.rails-phone-demo .rpd-avatar-slot { grid-column: 1; grid-row: 1; width: 28px; height: 28px; }
.rails-phone-demo .rpd-face { display: block; position: relative; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  --rpd-rim-a: var(--rpd-face-rim-a); --rpd-rim-b: var(--rpd-face-rim-b);
  background: radial-gradient(closest-side, transparent 70%, var(--rpd-shade)), linear-gradient(color-mix(in oklch, var(--rpd-agent-tint) 12%, transparent), color-mix(in oklch, var(--rpd-agent-tint) 12%, transparent)), var(--rpd-face-fill);
  -webkit-backdrop-filter: blur(2px) saturate(var(--rpd-saturate)); backdrop-filter: blur(2px) saturate(var(--rpd-saturate));
  box-shadow: inset 0 -1px 0 var(--rpd-thick), 0 2.52px 7.56px var(--rpd-shadow);
}
.rails-phone-demo .rpd-face svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; color: var(--rpd-ink); }
.rails-phone-demo .rpd-sheen { position: absolute; inset: 0; border-radius: inherit; opacity: 0; filter: blur(1.68px); background: conic-gradient(in oklch shorter hue, oklch(84% .11 230), oklch(82% .12 300), oklch(86% .10 350), oklch(82% .12 300), oklch(84% .11 230), oklch(88% .09 150), oklch(84% .11 230)); mask: radial-gradient(closest-side, transparent 30%, #000 100%); }
.rails-phone-demo .is-active .rpd-sheen { opacity: .7; animation: rpd-drift 12s linear infinite; }
@keyframes rpd-drift { to { transform: rotate(360deg); } }
.rails-phone-demo .rpd-is-typing .rpd-message { opacity: 0; }
.rails-phone-demo .rpd-typing { grid-column: 2; grid-row: 1; align-self: end; display: flex; align-items: center; gap: 4px; padding: 14px; width: fit-content; border-radius: 20px; background: var(--rpd-soft); }
.rails-phone-demo .rpd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rpd-muted); animation: rpd-dot 800ms ease-out infinite; transition: opacity var(--rpd-fade-fast); }
.rails-phone-demo .rpd-dot:nth-child(2) { animation-delay: 120ms; }
.rails-phone-demo .rpd-dot:nth-child(3) { animation-delay: 240ms; }
@keyframes rpd-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.rails-phone-demo .rpd-tool { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-block: 1px solid var(--rpd-hairline); color: var(--rpd-muted); }
.rails-phone-demo .rpd-check { color: var(--rpd-receipt-mark, var(--rpd-ink)); }
.rails-phone-demo :is(.rpd-tool, .rpd-link) { transition-duration: 250ms; transition-timing-function: cubic-bezier(.2,.8,.2,1); }
.rails-phone-demo .rpd-card { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--rpd-hairline); border-radius: 16px; background: var(--rpd-raised); color: var(--rpd-ink); text-decoration: none; }
.rails-phone-demo .rpd-host { color: var(--rpd-muted); }
.rails-phone-demo .rpd-composer { position: absolute; inset: auto 8px 8px; z-index: 3; border-radius: 999px; min-height: 48px; padding: 14px 20px; pointer-events: none; }
.rails-phone-demo .rpd-sheet { position: absolute; inset: auto 0 0; z-index: 4; padding: 24px 16px; margin: 0; border-radius: 28px 28px 0 0; min-height: 48%; max-height: 80%; overflow-y: auto; transform: translateY(100%); opacity: 1; transition: transform var(--rpd-spring-morph); }
.rails-phone-demo .rpd-sheet.rpd-on { transform: translateY(0); }
.rails-phone-demo .rpd-sheet.rpd-retreat { transform: translateY(100%); transition-duration: 500ms; }
.rails-phone-demo .rpd-sheet-line { padding-top: 12px; }
.rails-phone-demo .rpd-action { margin-top: 20px; width: 100%; transition: background var(--rpd-fade-fast), color var(--rpd-fade-fast); }
.rails-phone-demo .rpd-lit .rpd-action { background: var(--rpd-ink); color: var(--rpd-ground); }
.rails-phone-demo .rpd-sheet.rpd-filed { position: relative; inset: auto; z-index: auto; transform: none; min-height: 0; max-height: none; padding: 12px; margin-bottom: 12px; border: 1px solid var(--rpd-hairline); border-radius: 16px; background: var(--rpd-raised); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.rails-phone-demo .rpd-filed::before { content: none; }
.rails-phone-demo[data-state="paused"] * { animation-play-state: paused !important; }
.rails-phone-demo[still] *, .rails-phone-demo[data-state="done"] * { transition: none !important; animation: none !important; }
.rails-phone-demo .rpd-error { padding: 32px; }
@media (prefers-reduced-motion: reduce) { .rails-phone-demo * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-transparency: reduce) { .rails-phone-demo .rpd-glass { background: var(--rpd-soft); -webkit-backdrop-filter: none; backdrop-filter: none; } }
:where([data-glass="less"]) .rails-phone-demo .rpd-glass { background: var(--rpd-soft); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-contrast: more) { .rails-phone-demo .rpd-glass { background: var(--rpd-ground); border: 1px solid var(--rpd-ink); -webkit-backdrop-filter: none; backdrop-filter: none; } .rails-phone-demo :is(.rpd-card, .rpd-tool) { border-color: var(--rpd-ink); } }


/* The shared class supplies tokens and turn styles; the hero owns its layout. */
rails-hero-demo.rails-hero-demo {
  width: 100%; aspect-ratio: auto; border: 0; border-radius: 0;
  overflow: visible; background: transparent; container: rhd / inline-size;
}
.rails-hero-demo .rhd { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: center; }
.rails-hero-demo .rhd-chat { min-width: 0; display: grid; gap: 20px; }
.rails-hero-demo .rhd-notice, .rails-hero-demo .rhd-add { color: var(--rpd-muted); }
.rails-hero-demo .rhd-tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--rpd-hairline); }
.rails-hero-demo .rhd-tab { min-height: 44px; padding: 8px 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--rpd-muted); font-family: inherit; cursor: pointer; }
.rails-hero-demo .rhd-tab[aria-selected="true"] { color: var(--rpd-ink); border-bottom-color: var(--rpd-ink); }
.rails-hero-demo .rhd-thread { min-width: 0; }
.rails-hero-demo .rhd-thread .rpd-person .rpd-message { background: var(--rpd-soft); color: var(--rpd-ink); }
.rails-hero-demo .rhd-thread .rpd-agent .rpd-message { background: transparent; }
.rails-hero-demo .rhd-add-link { color: inherit; text-underline-offset: 3px; }
.rails-hero-demo .rhd-composer { border: 1px solid var(--rpd-hairline); border-radius: 24px; min-height: 48px; padding: 14px 20px; color: var(--rpd-muted); background: var(--rpd-ground); }
.rails-hero-demo .rhd-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 16px; border: 0; border-radius: 24px; }
.rails-hero-demo .rhd-bar .rpd-pause { opacity: 1; }
.rails-hero-demo .rhd-device { position: relative; width: 100%; aspect-ratio: 320 / 660; border: 1px solid var(--rpd-hairline); border-radius: 44px; background: var(--rpd-ground); overflow: clip; }
.rails-hero-demo .rpd-thread { padding-bottom: 16px; }
.rails-hero-demo .rhd-frame { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border: 0; border-radius: 39px; background: var(--rpd-surface); opacity: 0; pointer-events: none; }
.rails-hero-demo .rhd-frame-loaded { opacity: 1; }
@container rhd (max-width: 700px) {
  .rails-hero-demo .rhd { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rails-hero-demo .rhd-device { aspect-ratio: auto; min-height: 540px; border: 0; border-radius: 0; background: transparent; }
  .rails-hero-demo .rpd { inset: 0; border-radius: 0; }
  .rails-hero-demo .rpd-bar { min-height: 56px; background: var(--rpd-surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .rails-hero-demo .rpd-bar::before { content: none; }
  .rails-hero-demo .rpd-time { font-size: 0; line-height: 0; }
  .rails-hero-demo .rhd-frame { inset: 0; width: 100%; height: 100%; border-radius: 0; }
}

/* Pin the receipt below the header while completion reveals the closing turn. */
rails-phone-demo[data-state="done"] .rpd-tool {
  position: sticky; top: 0; z-index: 2; background: var(--rpd-surface);
}

/* Still frames reserve no input overlay; playback retains its composer. */
rails-phone-demo[data-still="true"] .rpd-thread { padding-bottom: 12px; }
rails-phone-demo[data-still="true"] .rpd-composer { opacity: 0; pointer-events: none; }