/* The approved glass screen, rendered as responsive, accessible HTML. */
.demo-surround.demo-surround--screens { padding: 0; border: 0; background: none; }
[data-memory-demo] { min-width: 0; }
.agent-workspace {
  --agent-green: #294329;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 18px 36px 32px;
  border: 1px solid #fff;
  border-radius: 30px;
  background: radial-gradient(ellipse at 3% 66%, #a8b5a18a, transparent 48%), radial-gradient(ellipse at 90% 28%, #f8edde, transparent 55%), linear-gradient(135deg, #e1e6dc, #f0f1e8 46%, #c6d0ba);
  box-shadow: inset 0 0 0 2px #ffffff70, 0 20px 55px -38px #34422d65;
  font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", sans-serif;
  color: #242c29;
}
.agent-workspace::before { content: ""; position: absolute; inset: 47px 12px 12px; border: 1px solid #ffffffb8; border-radius: 25px; background: linear-gradient(130deg, #ffffff62, #ffffff15 65%, #ffffff35); z-index: -1; pointer-events: none; }
.agent-wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.agent-wallpaper path { fill: none; stroke: url(#agency-wave); stroke-width: 2; }
.agent-wallpaper path:nth-of-type(odd) { stroke-width: 65; filter: blur(13px); opacity: .7; }
.agent-window-dots { display: flex; gap: 8px; margin: 0 0 22px -12px; }
.agent-window-dots i { width: 12px; height: 12px; border-radius: 50%; background: #f36b56; box-shadow: inset 0 0 0 1px #00000008; }
.agent-window-dots i:nth-child(2) { background: #efbf47; }
.agent-window-dots i:nth-child(3) { background: #6cac69; }
.agent-workspace-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.agent-workspace-title { font-size: clamp(24px, 3vw, 38px); font-weight: 600; letter-spacing: -.055em; line-height: 1.15; }
.agent-workspace-brand { color: var(--agent-green); font-size: clamp(16px, 2.2vw, 28px); font-weight: 400; letter-spacing: -.045em; }
.agent-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.agent-step { display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 6px 10px; min-height: 48px; min-width: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #60675f; font-size: 15px; transition: background 160ms, color 160ms; }
.agent-step-number { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: #60675f12; color: #394238; font-size: 17px; }
.agent-step[aria-current="step"] { background: #d1ddc2ba; border-color: #ffffff68; color: #263f26; font-weight: 600; }
.agent-step[aria-current="step"] .agent-step-number { background: var(--agent-green); color: white; box-shadow: inset 0 1px 2px #ffffff20; }
.agent-step:hover:not(:disabled):not([aria-current]) { background: #ffffff60; }
.agent-step:disabled { opacity: .5; cursor: not-allowed; }
.agent-panels { display: grid; gap: 18px; }
.agent-panel { display: grid; gap: 18px; min-width: 0; outline: none; }
/* Shared tracks reserve the tallest card in each row, at every viewport width. */
[data-demo-mounted="true"] .agent-panels { grid-template-rows: auto auto auto; }
[data-demo-mounted="true"] .agent-panel { grid-column: 1; grid-row: 1 / span 3; grid-template-rows: subgrid; }
.agent-panel[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
.agent-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; width: 84%; padding: 22px 24px; border: 1px solid #ffffffeb; border-radius: 22px; background: linear-gradient(120deg, #ffffffe0, #ffffffe0 30%, #ffffffa8); box-shadow: 0 8px 30px -22px #46523b4a, inset 0 1px 0 #fff; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); align-items: start; min-width: 0; }
.agent-card-content { min-width: 0; }
.agent-source { align-items: center; }
.agent-reply .agent-card-content { display: flex; flex-direction: column; height: 100%; }
.agent-reply .agent-actions { margin-top: auto; padding-top: 17px; }
.agent-card-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; background: #ffffffde; color: var(--agent-green); }
.agent-card-icon svg { width: 30px; height: 30px; }
.agent-client-icon img { width: 38px; height: 38px; }
.agent-avatar { background: linear-gradient(140deg, #42563a, #1b2e1d); box-shadow: inset 0 1px 1px #ffffff22; }
.agent-avatar img { width: 36px; height: 36px; }
.agent-card-label { font-size: 14px; line-height: 1.5; font-weight: 600; letter-spacing: -.01em; color: #354332; margin: 0 0 9px; }
.agent-client-name { font-weight: 500; }
.agent-card-body { font-size: clamp(16px, 1.55vw, 19px); letter-spacing: -.025em; line-height: 1.55; }
.agent-card-body p { line-height: inherit; }
.agent-card-body p + p { margin-top: 9px; }
.agent-card-body ul { list-style: none; padding: 0; margin: 0; }
.agent-card-body .agent-card-note { margin-top: 12px; font-size: 13px; color: #687263; letter-spacing: 0; }
.agent-rules { display: grid; gap: 10px; }
.agent-rules li { display: grid; gap: 1px; }
.agent-rules strong { font-size: 15px; font-weight: 600; }
.agent-rules span { font-size: 16px; }
.agent-card-body .agent-proposal { margin-top: 10px; }
.agent-proposal li + li { margin-top: 3px; }
.agent-proposal strong { font-weight: 600; }
.agent-checks li { padding-left: 27px; position: relative; }
.agent-checks li + li { margin-top: 10px; }
.agent-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--agent-green); font-weight: 600; }
.agent-user { justify-self: end; width: 70%; grid-template-columns: minmax(0, 1fr) 40px; background: linear-gradient(120deg, #ffffffe0, #f9f8e6a8); }
.agent-user .agent-card-icon { grid-column: 2; grid-row: 1; width: 40px; height: 40px; border-radius: 50%; background: #8f9984; color: white; }
.agent-user .agent-card-icon svg { width: 24px; height: 24px; }
.agent-user .agent-card-content { grid-column: 1; grid-row: 1; }
.agent-actions { display: flex; align-items: center; gap: 14px; margin-top: 17px; }
.agent-action, .agent-back { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 17px; border-radius: 11px; font-size: 14px; line-height: 1.4; }
.agent-action { border: 1px solid #30472a; background: var(--agent-green); color: white; box-shadow: inset 0 1px 0 #ffffff18, 0 4px 10px #1e331210; transition: background 160ms, box-shadow 160ms; }
.agent-action:hover { background: #405e36; box-shadow: 0 5px 14px #1e331224; }
.agent-action:active { background: #20381f; }
.agent-action > span { font-size: 18px; line-height: 1; }
.agent-back { border: 1px solid transparent; background: transparent; color: #52624a; padding-inline: 10px; }
.agent-back:hover:not(:disabled) { background: #d7dfcd55; }
.agent-back:disabled { visibility: hidden; }
.agent-workspace button:focus-visible { outline: 3px solid #395820; outline-offset: 3px; }
.agent-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-memory-demo]:not([data-demo-mounted="true"]) .agent-steps,
[data-memory-demo]:not([data-demo-mounted="true"]) .agent-actions { display: none; }
@media (max-width: 900px) {
  .agent-workspace { padding: 16px 24px 26px; }
  .agent-steps { gap: 5px; }
  .agent-step { gap: 7px; font-size: 13px; padding-inline: 5px; }
  .agent-step-number { width: 30px; height: 30px; font-size: 15px; }
  .agent-card { width: 92%; gap: 16px; padding: 20px; }
  .agent-user { width: 80%; }
}
@media (max-width: 600px) {
  .agent-workspace { padding: 14px 14px 20px; border-radius: 22px; }
  .agent-workspace::before { inset: 39px 5px 5px; border-radius: 18px; }
  .agent-window-dots { margin: 0 0 20px 2px; gap: 6px; }
  .agent-window-dots i { width: 9px; height: 9px; }
  .agent-workspace-header { margin: 0 2px 18px; gap: 10px; }
  .agent-workspace-title { font-size: 24px; }
  .agent-workspace-brand { font-size: 15px; }
  .agent-steps { gap: 3px; margin-bottom: 18px; }
  .agent-step { flex-direction: column; justify-content: center; gap: 5px; min-height: 66px; padding: 5px 0; border-radius: 15px; font-size: clamp(10px, 2.8vw, 12px); letter-spacing: -.025em; }
  .agent-step-number { width: 27px; height: 27px; font-size: 14px; }
  .agent-panels, .agent-panel { gap: 12px; }
  .agent-card, .agent-user { width: 100%; padding: 15px; border-radius: 17px; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; }
  .agent-card-content, .agent-user .agent-card-content, .agent-reply .agent-card-content { display: contents; }
  .agent-card-icon, .agent-user .agent-card-icon { width: 34px; height: 34px; grid-row: 1; grid-column: 1; border-radius: 10px; }
  .agent-card-icon svg { width: 23px; height: 23px; }
  .agent-client-icon img { width: 25px; height: 25px; }
  .agent-avatar img { width: 25px; height: 25px; }
  .agent-card-label { grid-column: 2; align-self: center; margin: 0; font-size: 13px; }
  .agent-card-body, .agent-actions { grid-column: 1 / -1; }
  .agent-card-body { font-size: 16px; line-height: 1.55; letter-spacing: -.018em; }
  .agent-card-body .agent-card-note { font-size: 12px; }
  .agent-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; margin-top: 4px; align-self: end; }
  .agent-reply .agent-actions { padding-top: 4px; margin-top: 0; }
  .agent-action { min-height: 48px; padding: 10px 9px; font-size: 13px; }
  .agent-action > span { display: none; }
  .agent-back { width: 44px; height: 48px; padding: 0; font-size: 0; }
  .agent-back span { font-size: 18px; }
}
@media (max-width: 360px) {
  .agent-workspace { padding-inline: 10px; }
  .agent-workspace-title { font-size: 21px; }
  .agent-workspace-brand { font-size: 13px; }
  .agent-card, .agent-user { padding: 13px; }
  .agent-action { min-height: 60px; }
  .agent-back { height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .agent-step, .agent-action { transition: none; } }