/* ============================================================
   Spatial portfolio · system-a  (contact · ask)
   Everything is scoped to .sa-win windows and sa- classes.
   ============================================================ */

@property --sa-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.sa-win { --sa-green: 52 199 89; --sa-red: 255 128 128; --sa-err: 255 176 176; }

/* ---------- entrance (added on show, skipped under reduced motion) ---------- */
@keyframes sa-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sa-fade { from { opacity: 0; } to { opacity: 1; } }
.sa-win .is-play [data-st] { animation: sa-rise .8s var(--vx-spring-smooth) backwards; animation-delay: calc(var(--i, 0) * 90ms + 60ms); }

/* ============================================================
   contact
   ============================================================ */
.sa-win--contact > .vx-window__body { padding: 40px 44px 36px; }
.sa-cq { container: sa-contact / inline-size; min-height: 100%; display: flex; }
.sa-contact { position: relative; flex: 1; display: grid; grid-template-columns: minmax(250px, 300px) 1fr; gap: 40px; min-width: 0; }

/* side */
.sa-c-side { display: flex; flex-direction: column; min-width: 0; }
.sa-c-eyebrow { margin: 0 0 12px; }
.sa-c-title { margin: 0; font-size: 36px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.sa-c-lede { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: var(--vx-label-2); text-wrap: pretty; }

/* the links follow the lede (no empty hole where the old status block sat); the list bleeds 8px so the
   icons, not the hover pads, line up with the title's left edge */
.sa-links { margin: 32px -8px 0; padding-top: 0; display: grid; background: none; }
.sa-links__k { margin: 0 0 8px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--vx-label-3); }
.sa-link {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 8px 12px 8px 8px; border-radius: 18px;
  color: var(--vx-label-1); transition: background .2s, scale .45s var(--vx-spring);
}
.sa-link:hover { background: rgb(255 255 255 / 0.08); }
.sa-link:active { scale: 0.98; background: rgb(255 255 255 / 0.12); }
.sa-link:focus-visible { outline-offset: 0; }
.sa-link__ic { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--vx-fill); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.2); transition: background .2s, scale .45s var(--vx-spring); }
.sa-link:hover .sa-link__ic { background: var(--vx-fill-hi); scale: 1.06; }
.sa-link__ic .vx-ico { width: 18px; height: 18px; }
.sa-link__txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sa-link__k { font-size: 15px; font-weight: 600; line-height: 1.25; }
.sa-link__v { font-size: 13px; line-height: 1.3; color: var(--vx-label-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-link__go { width: 15px; height: 15px; color: var(--vx-label-3); transition: translate .35s var(--vx-spring), color .2s; }
.sa-link:hover .sa-link__go { color: var(--vx-label-1); translate: 2px 0; }
.sa-link__kbd { flex: none; }
.sa-win .is-play .sa-link { animation: sa-rise .7s var(--vx-spring-smooth) backwards; }
.sa-win .is-play .sa-link:nth-child(2) { animation-delay: .32s; }
.sa-win .is-play .sa-link:nth-child(3) { animation-delay: .38s; }
.sa-win .is-play .sa-link:nth-child(4) { animation-delay: .44s; }
.sa-win .is-play .sa-link:nth-child(5) { animation-delay: .5s; }

/* main */
.sa-c-main { position: relative; min-width: 0; display: flex; flex-direction: column; }
.sa-form { flex: 1; display: flex; flex-direction: column; gap: 14px; transition: opacity .35s, filter .45s, scale .5s var(--vx-spring-smooth); }
.sa-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.sa-field { position: relative; display: flex; flex-direction: column; min-width: 0; }
.sa-label { display: block; margin: 0 0 8px 4px; font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--vx-label-2); }
.sa-label em { font-style: normal; font-weight: 400; color: var(--vx-label-3); margin-left: 4px; }

.sa-input {
  width: 100%; min-width: 0; height: 50px; margin: 0; padding: 0 16px; border: 0; border-radius: 16px;
  font: 400 16px/1.3 var(--vx-font); letter-spacing: -0.01em; color: var(--vx-label-1);
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), inset 0 1px 2px rgb(0 0 0 / 0.18);
  transition: background .2s, box-shadow .25s;
  -webkit-appearance: none; appearance: none;
}
.sa-input::placeholder { color: rgb(255 255 255 / 0.5); opacity: 1; }
.sa-input:hover { background: rgb(255 255 255 / 0.11); }
.sa-input:focus, .sa-input:focus-visible { outline: none; background: rgb(255 255 255 / 0.13); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.62), 0 0 0 4px rgb(255 255 255 / 0.1); }
.sa-field--msg { flex: 1; }
.sa-textarea { flex: 1; height: auto; min-height: 138px; padding: 14px 16px; line-height: 1.5; resize: none; display: block; }
.sa-field.invalid .sa-input, .sa-field.invalid .sa-dial { background: rgb(255 90 90 / 0.1); box-shadow: inset 0 0 0 1.5px rgb(var(--sa-red) / 0.9), 0 0 0 4px rgb(255 90 90 / 0.1); }

/* error slot: collapses to nothing until there's something to say */
.sa-err { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--vx-spring-smooth); }
.sa-err__in { display: flex; align-items: center; gap: 6px; overflow: hidden; min-height: 0; font-size: 13px; font-weight: 500; line-height: 1.35; color: rgb(var(--sa-err)); opacity: 0; translate: 0 -4px; transition: opacity .2s, translate .35s var(--vx-spring); }
.sa-err__in .vx-ico { width: 14px; height: 14px; margin-left: 4px; flex: none; }
.sa-field.invalid .sa-err { grid-template-rows: 1fr; }
.sa-field.invalid .sa-err__in { opacity: 1; translate: 0 0; padding-top: 7px; }

/* phone: country code segment + number */
.sa-phone { display: flex; gap: 8px; }
.sa-dial {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 50px; padding: 0 10px 0 12px; border: 0; border-radius: 16px; cursor: pointer;
  font: 500 16px/1 var(--vx-font); color: var(--vx-label-1); font-variant-numeric: tabular-nums;
  background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: background .2s, box-shadow .25s, scale .4s var(--vx-spring);
}
.sa-dial:hover, .sa-dial[aria-expanded="true"] { background: rgb(255 255 255 / 0.14); }
.sa-dial:active { scale: 0.96; }
.sa-dial:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.62), 0 0 0 4px rgb(255 255 255 / 0.1); }
.sa-dial__flag { font-size: 20px; line-height: 1; }
.sa-dial__caret, .sa-select__caret { width: 14px; height: 14px; color: var(--vx-label-3); transition: rotate .35s var(--vx-spring); }
[aria-expanded="true"] > .sa-dial__caret, [aria-expanded="true"] > .sa-select__caret { rotate: 180deg; }
.sa-input--phone { flex: 1; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* subject pop up button */
.sa-select { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; padding: 0 14px 0 14px; }
.sa-select__v { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; white-space: nowrap; }
.sa-select__v > span { overflow: hidden; text-overflow: ellipsis; }
.sa-select__ic { width: 18px; height: 18px; color: var(--vx-label-2); }
.sa-select__note { color: var(--vx-label-3); }
.sa-select[aria-expanded="true"] { background: rgb(255 255 255 / 0.14); }
.sa-select.is-flash { animation: sa-flash .9s var(--vx-ease-out); }
@keyframes sa-flash { 0% { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.9), 0 0 0 8px rgb(255 255 255 / 0.18); } 100% { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1), 0 0 0 0 rgb(255 255 255 / 0); } }

/* pop up menu (listbox) */
.sa-pophost { position: relative; }
.sa-pop {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 8px); width: 100%; min-width: 250px; max-height: var(--sa-pop-max, 300px);
  display: flex; flex-direction: column; padding: 6px; border-radius: 22px;
  --vx-glass-a: 0.97; --vx-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6), 0 10px 24px -10px rgb(0 0 0 / 0.45);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 0; scale: 0.94; translate: 0 -8px; transform-origin: 30% 0;
  transition: opacity .18s, scale .42s var(--vx-spring), translate .42s var(--vx-spring);
}
.sa-pop[hidden] { display: none; }
.sa-pop.is-up { top: auto; bottom: calc(100% + 8px); transform-origin: 30% 100%; translate: 0 8px; }
.sa-pop.is-open { opacity: 1; scale: 1; translate: 0 0; }
.sa-pop--dial { width: 340px; max-width: calc(100cqi - 0px); }
.sa-pop__search { position: relative; flex: none; margin: 0 0 6px; }
.sa-pop__search .vx-ico { position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--vx-label-3); pointer-events: none; }
.sa-pop__search input {
  width: 100%; height: 42px; padding: 0 12px 0 36px; border: 0; border-radius: 14px; font: 400 16px var(--vx-font); color: var(--vx-label-1);
  background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
.sa-pop__search input::placeholder { color: rgb(255 255 255 / 0.5); }
.sa-pop__search input:focus { outline: none; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); }
.sa-pop__list { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.25) transparent; border-radius: 16px; }
.sa-pop__list:focus { outline: none; }
.sa-pop__list:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.4); }
.sa-pop__empty { margin: 0; padding: 14px 12px; font-size: 14px; color: var(--vx-label-3); }
.sa-opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer; font-size: 15px; color: var(--vx-label-1); }
.sa-opt[hidden] { display: none; }
.sa-opt__main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.sa-opt__flag { font-size: 20px; line-height: 1; flex: none; }
.sa-opt__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sa-opt__dial, .sa-opt__note { flex: none; font-size: 13px; color: var(--vx-label-3); font-variant-numeric: tabular-nums; }
.sa-opt__ic { width: 18px; height: 18px; color: var(--vx-label-2); }
.sa-opt__check { width: 16px; height: 16px; flex: none; opacity: 0; scale: 0.6; transition: opacity .15s, scale .3s var(--vx-spring); }
.sa-opt[aria-selected="true"] .sa-opt__check { opacity: 1; scale: 1; }
.sa-opt[aria-selected="true"] { font-weight: 600; }
.sa-opt.is-active { background: rgb(255 255 255 / 0.13); }

/* footer */
.sa-foot { display: flex; align-items: center; gap: 16px 18px; flex-wrap: wrap; margin-top: 6px; }
.sa-send { min-height: 50px; padding: 0 24px; font-weight: 600; }
.sa-send__ic { transition: translate .4s var(--vx-spring); }
.sa-send:hover .sa-send__ic { translate: 3px 0; }
.sa-send__spin { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgb(18 18 22 / 0.2); border-top-color: rgb(18 18 22 / 0.85); animation: sa-spin .8s linear infinite; }
.sa-send.is-sending .sa-send__spin { display: block; }
.sa-send.is-sending .sa-send__ic { display: none; }
.sa-send:disabled { cursor: progress; }
.sa-send.is-shake { animation: sa-shake .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes sa-shake { 10%, 90% { translate: -1px 0; } 20%, 80% { translate: 3px 0; } 30%, 50%, 70% { translate: -6px 0; } 40%, 60% { translate: 6px 0; } }
@keyframes sa-spin { to { transform: rotate(360deg); } }
.sa-note { margin: 0; flex: 1 1 200px; font-size: 13px; line-height: 1.45; color: var(--vx-label-3); }
.sa-note.is-warn { color: rgb(255 214 150); }

/* success */
.is-done .sa-form { opacity: 0; filter: blur(10px); scale: 0.97; pointer-events: none; }
.sa-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.sa-done[hidden] { display: none; }
.sa-done:focus { outline: none; }
.sa-done__badge { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, rgb(var(--sa-green) / 0.28), rgb(var(--sa-green) / 0) 100%); }
.sa-done__badge svg { width: 88px; height: 88px; overflow: visible; }
.sa-done__ring { fill: rgb(var(--sa-green) / 0.14); stroke: rgb(var(--sa-green)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 176; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 50% 50%; }
.sa-done__tick { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.sa-done__title { margin: 22px 0 0; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -0.025em; }
.sa-done__text { margin: 10px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.5; color: var(--vx-label-2); text-wrap: pretty; }
.sa-done__actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sa-done.is-in .sa-done__badge { animation: sa-badge .9s var(--vx-spring-bouncy) backwards; }
.sa-done.is-in .sa-done__ring { animation: sa-draw-ring .8s var(--vx-ease-out) .1s both; }
.sa-done.is-in .sa-done__tick { animation: sa-draw-tick .45s var(--vx-ease-out) .55s both; }
.sa-done.is-in .sa-done__title { animation: sa-rise .7s var(--vx-spring-smooth) .35s backwards; }
.sa-done.is-in .sa-done__text { animation: sa-rise .7s var(--vx-spring-smooth) .45s backwards; }
.sa-done.is-in .sa-done__actions { animation: sa-rise .7s var(--vx-spring-smooth) .55s backwards; }
@keyframes sa-badge { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sa-draw-ring { from { stroke-dashoffset: 176; } to { stroke-dashoffset: 0; } }
@keyframes sa-draw-tick { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }

/* narrow windows and phone sheets */
@container sa-contact (max-width: 760px) {
  .sa-contact { grid-template-columns: 1fr; gap: 26px; }
  .sa-c-title { font-size: 32px; }
  .sa-links { margin: 0; padding-top: 18px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .sa-links__k { grid-column: 1 / -1; margin: 0; }
  .sa-link { min-height: 50px; padding: 6px 10px 6px 6px; background: rgb(255 255 255 / 0.06); border-radius: 16px; }
  .sa-link__ic { width: 36px; height: 36px; border-radius: 11px; }
  .sa-link__v, .sa-link__kbd, .sa-link__go { display: none; }
  .sa-link__k { font-size: 14px; }
  .sa-done { position: relative; inset: auto; padding: 36px 8px 12px; }
  .is-done .sa-form { display: none; }
}
@container sa-contact (max-width: 520px) {
  .sa-row2 { grid-template-columns: 1fr; }
  .sa-c-title { font-size: 30px; }
  .sa-c-lede { font-size: 15px; }
  .sa-pop--dial { width: 100%; }
  .sa-send { flex: 1 1 100%; }
  .sa-note { flex-basis: 100%; text-align: center; }
}
/* mobile sheet: no ornament or tab bar below, so give the room back */
.vx-item.is-sheet.sa-win--contact > .vx-window__body { padding: 60px 20px calc(max(16px, env(safe-area-inset-bottom)) + 24px); }

/* ============================================================
   ask
   ============================================================ */
.sa-win--ask > .vx-window__body { padding: 0; overflow: hidden; }
.vx-item.is-sheet.sa-win--ask > .vx-window__body { padding: 0; overflow: hidden; }
.sa-ask { --orb: 164px; position: relative; height: 100%; border-radius: inherit; display: flex; flex-direction: column; isolation: isolate; }

/* Apple Intelligence style edge glow while thinking */
.sa-ask__glow { position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s var(--vx-ease-out); }
.sa-ask__glow::before, .sa-ask__glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--sa-a), rgb(84 190 255), rgb(118 102 255), rgb(255 92 168), rgb(255 176 110), rgb(96 240 210), rgb(84 190 255));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sa-turn 4s linear infinite; animation-play-state: paused;
}
.sa-ask__glow::after { padding: 10px; filter: blur(14px); opacity: 0.55; }
.sa-ask.is-thinking .sa-ask__glow { opacity: 0.9; }
.sa-ask.is-thinking .sa-ask__glow::before, .sa-ask.is-thinking .sa-ask__glow::after { animation-play-state: running; }
@keyframes sa-turn { to { --sa-a: 360deg; } }

/* header (chat mode) */
.sa-ask__head {
  position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 76px; display: flex; align-items: center; gap: 12px; padding: 0 20px 0 82px;
  opacity: 0; pointer-events: none; transition: opacity .3s;
}
.sa-ask.is-chat .sa-ask__head { opacity: 1; pointer-events: auto; transition-delay: .12s; }
.sa-ask__who { margin: 0; flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.sa-ask__name { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; }
.sa-ask__sub { font-size: 13px; color: var(--vx-label-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-ask__new { width: 44px; height: 44px; min-height: 44px; }
.sa-ask__new .vx-ico { width: 17px; height: 17px; }

/* the orb */
.sa-orbwrap { position: absolute; z-index: 4; left: 50%; top: 56px; width: var(--orb); height: var(--orb); margin-left: calc(var(--orb) / -2); pointer-events: none; transform-origin: 0 0;
  transition: left .7s var(--vx-spring-smooth), top .7s var(--vx-spring-smooth), margin-left .7s var(--vx-spring-smooth), scale .7s var(--vx-spring-smooth); }
.sa-ask.is-chat .sa-orbwrap { left: 26px; top: 16px; margin-left: 0; scale: calc(44 / 164); }
.sa-orb { --sa-e: 0.3; position: relative; width: 100%; height: 100%; border-radius: 50%; }
.sa-orb::before { /* bloom */
  content: ""; position: absolute; inset: -22%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgb(150 130 255 / 0.55), rgb(84 190 255 / 0.22) 55%, transparent 72%);
  opacity: calc(0.35 + var(--sa-e) * 0.55); scale: calc(0.9 + var(--sa-e) * 0.2);
}
.sa-orb__cv { display: block; width: 100%; height: 100%; border-radius: 50%; }
.sa-orb__rim { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(46% 30% at 36% 18%, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0) 72%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22), inset 0 -10px 24px rgb(0 0 0 / 0.25), 0 18px 40px -16px rgb(0 0 0 / 0.6); }
.sa-ask.is-play .sa-orbwrap { animation: sa-orb-in 1s var(--vx-spring-bouncy) backwards; }
@keyframes sa-orb-in { from { opacity: 0; transform: scale(0.5); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* scroll area */
.sa-ask__scroll { position: relative; flex: 1; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; }
.sa-ask__scroll::-webkit-scrollbar { display: none; }
.sa-ask.is-chat .sa-ask__scroll { -webkit-mask: linear-gradient(to bottom, transparent 58px, #000 96px, #000 calc(100% - 14px), transparent); mask: linear-gradient(to bottom, transparent 58px, #000 96px, #000 calc(100% - 14px), transparent); }
.sa-ask__intro { padding: calc(56px + var(--orb) + 30px) 40px 0; text-align: center; }
.sa-ask__title { margin: 0; font-size: 34px; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; }
.sa-ask__hint { margin: 10px auto 0; max-width: 36ch; font-size: 16px; line-height: 1.5; color: var(--vx-label-2); text-wrap: balance; }
.sa-ask.is-play .sa-ask__title { animation: sa-rise .8s var(--vx-spring-smooth) .15s backwards; }
.sa-ask.is-play .sa-ask__hint { animation: sa-rise .8s var(--vx-spring-smooth) .24s backwards; }
.sa-ask.is-chat .sa-ask__intro { display: none; }

.sa-ask__thread { display: flex; flex-direction: column; gap: 10px; padding: 0 28px 18px; }
.sa-ask.is-chat .sa-ask__thread { padding-top: 92px; }
.sa-ask:not(.is-chat) .sa-ask__thread { display: none; }
.sa-msg { display: flex; max-width: 100%; }
.sa-msg--user { justify-content: flex-end; }
.sa-msg__b { max-width: min(82%, 520px); padding: 11px 16px; font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; text-wrap: pretty; }
.sa-msg--user .sa-msg__b { background: rgb(255 255 255 / 0.93); color: rgb(18 18 24); border-radius: 22px 22px 8px 22px; box-shadow: 0 8px 22px -12px rgb(0 0 0 / 0.5); }
.sa-msg--bot .sa-msg__b { max-width: min(88%, 560px); background: rgb(255 255 255 / 0.1); color: var(--vx-label-1); border-radius: 22px 22px 22px 8px; box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.16), inset 0 0 0 1px rgb(255 255 255 / 0.05); }
.sa-msg--bot b { font-weight: 650; color: #fff; }
.sa-msg--bot a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.45); text-underline-offset: 3px; text-decoration-thickness: 1px; border-radius: 4px; transition: text-decoration-color .2s, background .2s; }
.sa-msg--bot a:hover { text-decoration-color: #fff; background: rgb(255 255 255 / 0.08); }
.sa-msg.is-new .sa-msg__b { animation: sa-bubble .6s var(--vx-spring) backwards; }
.sa-msg--user.is-new .sa-msg__b { transform-origin: 100% 100%; }
.sa-msg--bot.is-new .sa-msg__b { transform-origin: 0 100%; }
.sa-msg.is-answer.is-new .sa-msg__b { animation: sa-grow .5s var(--vx-spring-smooth) backwards; }
@keyframes sa-bubble { from { opacity: 0; transform: translateY(12px) scale(0.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sa-grow { from { opacity: 0.6; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.sa-msg a.sa-w { display: inline; }
.sa-w { display: inline-block; animation: sa-word .55s var(--vx-ease-out) backwards; animation-delay: var(--d, 0ms); }
@keyframes sa-word { from { opacity: 0; filter: blur(5px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
.sa-dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.sa-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgb(255 255 255 / 0.85); animation: sa-dot 1.2s ease-in-out infinite; }
.sa-dots i:nth-child(2) { animation-delay: .15s; }
.sa-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes sa-dot { 0%, 70%, 100% { opacity: 0.3; transform: translateY(0) scale(0.85); } 35% { opacity: 1; transform: translateY(-4px) scale(1); } }

/* bottom: suggestions + composer */
.sa-ask__bottom { position: relative; z-index: 2; flex: none; padding: 8px 22px 16px; }
.sa-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 6px 14px; }
.sa-chips[hidden] { display: none; }
.sa-ask.is-chat .sa-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 4px 6px 12px; margin: 0 -22px; padding-inline: 28px;
  -webkit-mask: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.sa-ask.is-chat .sa-chips::-webkit-scrollbar { display: none; }
.sa-chip {
  flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--vx-r-pill); cursor: pointer;
  font: 500 14px/1.2 var(--vx-font); color: var(--vx-label-1); background: var(--vx-fill); box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.16);
  transition: background .2s, scale .4s var(--vx-spring);
}
.sa-chip:hover { background: var(--vx-fill-hi); }
.sa-chip:active { scale: 0.95; }
.sa-chip:focus-visible { outline-offset: 2px; }
.sa-ask.is-play .sa-chip { animation: sa-rise .7s var(--vx-spring-smooth) backwards; animation-delay: calc(var(--i, 0) * 60ms + 320ms); }
.sa-ask.is-busy .sa-chip { opacity: 0.5; pointer-events: none; }

.sa-composer {
  position: relative; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 7px 0 18px; border-radius: var(--vx-r-pill);
  background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 1px 2px rgb(0 0 0 / 0.2);
  transition: background .2s, box-shadow .25s;
}
.sa-composer:focus-within { background: rgb(255 255 255 / 0.13); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.45), 0 0 0 4px rgb(255 255 255 / 0.07); }
.sa-composer__ic { display: grid; color: var(--vx-label-3); }
.sa-composer__ic .vx-ico { width: 18px; height: 18px; }
.sa-composer__in { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 400 16px var(--vx-font); letter-spacing: -0.01em; color: var(--vx-label-1); }
.sa-composer__in::placeholder { color: rgb(255 255 255 / 0.55); }
.sa-composer__in:focus, .sa-composer__in:focus-visible { outline: none; }
.sa-composer__send {
  flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: #fff; color: rgb(18 18 22); box-shadow: 0 6px 16px -8px rgb(0 0 0 / 0.5);
  transition: background .2s, color .2s, scale .4s var(--vx-spring), opacity .2s;
}
.sa-composer__send .vx-ico { width: 18px; height: 18px; stroke-width: 2.4; }
.sa-composer__send:hover:not(:disabled) { scale: 1.07; }
.sa-composer__send:active:not(:disabled) { scale: 0.9; }
.sa-composer__send:disabled { background: rgb(255 255 255 / 0.14); color: rgb(255 255 255 / 0.5); box-shadow: none; cursor: default; }
.sa-composer__send:focus-visible { outline-offset: 2px; }
.sa-ask__foot { margin: 10px 0 0; text-align: center; font-size: 12px; line-height: 1.4; color: var(--vx-label-3); }
.sa-ask__foot a { color: var(--vx-label-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgb(255 255 255 / 0.3); }

/* Big window: the conversation keeps a readable column in the middle */
.sa-ask__thread, .sa-ask__bottom { width: 100%; max-width: 820px; margin-inline: auto; }
.sa-ask { --orb: 180px; }
.sa-ask.is-chat .sa-orbwrap { scale: calc(44 / 180); }
.sa-ask__title { font-size: 40px; }
.sa-ask__hint { font-size: 17px; }

/* phone sheet: clear the sheet handle, respect the home indicator */
.vx-item.is-sheet .sa-ask { --orb: 136px; }
.vx-item.is-sheet .sa-orbwrap { top: 64px; }
.vx-item.is-sheet .sa-ask.is-chat .sa-orbwrap { left: 20px; top: 56px; scale: calc(40 / 136); }
.vx-item.is-sheet .sa-ask__head { top: 44px; height: 64px; padding: 0 64px 0 72px; }
.vx-item.is-sheet .sa-ask__intro { padding: calc(64px + var(--orb) + 26px) 24px 0; }
.vx-item.is-sheet .sa-ask__title { font-size: 30px; }
.vx-item.is-sheet .sa-ask.is-chat .sa-ask__thread { padding-top: 124px; }
.vx-item.is-sheet .sa-ask.is-chat .sa-ask__scroll { -webkit-mask: linear-gradient(to bottom, transparent 100px, #000 128px, #000 calc(100% - 14px), transparent); mask: linear-gradient(to bottom, transparent 100px, #000 128px, #000 calc(100% - 14px), transparent); }
.vx-item.is-sheet .sa-ask__thread { padding-inline: 16px; }
.vx-item.is-sheet .sa-ask__bottom { padding: 6px 14px calc(max(12px, env(safe-area-inset-bottom)) + 6px); }
.vx-item.is-sheet .sa-ask.is-chat .sa-chips { margin: 0 -14px; padding-inline: 18px; }
.vx-item.is-sheet .sa-msg__b { max-width: 86%; }
/* touch: every target at least 44px */
@media (pointer: coarse) {
  .sa-chip { min-height: 44px; padding: 0 18px; }
  .sa-composer { height: 58px; }
  .sa-composer__send { width: 46px; height: 46px; }
}
/* mobile card preview in the story (not yet opened as a sheet) */
.vx-item.is-mcard .sa-ask__bottom .sa-ask__foot { display: none; }

/* ---------- reduced motion (system setting or the in app switch) ---------- */
@media (prefers-reduced-motion: reduce) {
  .sa-win *, .sa-win *::before, .sa-win *::after { animation: none !important; }
  .sa-orbwrap, .sa-err, .sa-err__in, .sa-pop, .sa-form { transition: none !important; }
  .sa-ask.is-thinking .sa-ask__glow { opacity: 0.6; }
}
html.vx-reduced .sa-win *, html.vx-reduced .sa-win *::before, html.vx-reduced .sa-win *::after { animation: none !important; }
html.vx-reduced .sa-orbwrap, html.vx-reduced .sa-err, html.vx-reduced .sa-err__in, html.vx-reduced .sa-pop, html.vx-reduced .sa-form { transition: none !important; }
@media (prefers-contrast: more) {
  .sa-input, .sa-dial, .sa-composer { box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / 0.5); }
  .sa-input::placeholder, .sa-composer__in::placeholder { color: rgb(255 255 255 / 0.7); }
}

/* The engine hides its card "Open" overlay with [hidden] once a card becomes a sheet;
   make sure [hidden] wins inside these windows so the form stays usable. */
.sa-win > .vx-mcard__open[hidden] { display: none; }