/* ============================================================
   Xucho — Surface engine + motion keyframes
   Verbatim 1:1 port of @phreshos/react-ui's injected stylesheets.
   One element + ::before (paint/grain/frost/spill) + ::after (rim).
   ============================================================ */

/* ---------- Surface (source/surface/surface.tsx) ---------- */
:where(.surface) { position: relative; isolation: isolate; }

.surface::before,
.surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.surface::before {
  z-index: -1;
  background-color: var(--surface-paint);
  background-image: var(--surface-spill-top), var(--surface-spill-bottom), var(--surface-grain);
  background-size: 100% min(6px, 12%), 100% min(6px, 12%), 64px 64px;
  background-position: center top, center bottom, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  -webkit-backdrop-filter: var(--surface-frost);
  backdrop-filter: var(--surface-frost);
  transition: background-color var(--surface-duration) var(--surface-easing);
}

.surface::after {
  z-index: 1;
  padding: 0.5px;
  background: var(--surface-rim);
  -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 exclude, linear-gradient(#000 0 0);
}

/* Default surface variables (overridden per-instance inline) */
:root {
  --surface-paint: var(--color-default);
  --surface-grain: none;
  --surface-frost: none;
  --surface-rim: none;
  --surface-spill-top: none;
  --surface-spill-bottom: none;
  --surface-duration: var(--duration);
  --surface-easing: var(--easing);
}

/* Dimmed (disabled) — only the outermost disabled element dims */
:where(.dimmed:not(.dimmed .dimmed)) { opacity: var(--disabled-opacity); }

/* ---------- Motion stylesheet (foundation/motion-style.tsx) ---------- */
.ui-overlay[data-entering] {
  animation: ui-overlay-enter var(--motion-duration) var(--motion-easing) both;
}
.ui-overlay[data-exiting] {
  animation: ui-overlay-enter var(--motion-duration) var(--motion-easing) reverse both;
  pointer-events: none;
}
.ui-backdrop[data-entering] {
  animation: ui-backdrop-enter var(--motion-duration) var(--motion-easing) both;
}
.ui-backdrop[data-exiting] {
  animation: ui-backdrop-enter var(--motion-duration) var(--motion-easing) reverse both;
  pointer-events: none;
}
@keyframes ui-overlay-enter { from { opacity: 0; scale: 1.05; } to { opacity: 1; scale: 1; } }
@keyframes ui-backdrop-enter { from { opacity: 0; } to { opacity: 1; } }

.ui-text-control::placeholder { color: inherit; opacity: var(--control-placeholder-opacity); }
.ui-text-control::-webkit-search-cancel-button,
.ui-text-control::-webkit-search-decoration { display: none; }

.ui-drawer[data-state="opening"] { animation: ui-drawer-in var(--motion-duration) var(--motion-easing); }
.ui-drawer[data-state="closing"] { animation: ui-drawer-out var(--motion-duration) var(--motion-easing) forwards; }
@keyframes ui-drawer-in { from { translate: calc(-100% - 1rem) 0; } }
@keyframes ui-drawer-out { to { translate: calc(-100% - 1rem) 0; } }
@keyframes ui-drawer-in-rtl { from { translate: calc(100% + 1rem) 0; } }
@keyframes ui-drawer-out-rtl { to { translate: calc(100% + 1rem) 0; } }
:dir(rtl).ui-drawer[data-state="opening"] { animation-name: ui-drawer-in-rtl; }
:dir(rtl).ui-drawer[data-state="closing"] { animation-name: ui-drawer-out-rtl; }

@keyframes ui-spin { to { rotate: 360deg; } }
@keyframes ui-pulse { 50% { opacity: 0.55; } }
@keyframes ui-sweep { from { inset-inline-start: -40%; } to { inset-inline-start: 100%; } }

/* Spinner arc uses ui-spin 900ms linear infinite */
.spinner { display: inline-grid; place-items: center; }
.spinner > svg { animation: ui-spin 900ms linear infinite; }

/* Skeleton pulse */
.skeleton { animation: ui-pulse 900ms ease-out infinite; background: var(--separator); border-radius: var(--radius-s); }

/* Indeterminate progress sweep chip */
.progress-indeterminate .progress-fill {
  width: 40%;
  animation: ui-sweep 900ms ease-out infinite;
}

/* ---------- Base resets for the desktop host ---------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-ui);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body { background: var(--color-background); color: var(--color-foreground); }

img { display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--selection); }

/* Scrollbars (ScrollArea look: 12px, pill thumb, fg@10%) */
.scroll-area { overflow: auto; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.scroll-area:hover, .scroll-area.scrolling { scrollbar-color: var(--separator) transparent; }
.scroll-area::-webkit-scrollbar { width: 12px; height: 12px; }
.scroll-area::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: transparent;
  border: 4px solid transparent;
  background-clip: padding-box;
}
.scroll-area:hover::-webkit-scrollbar-thumb,
.scroll-area.scrolling::-webkit-scrollbar-thumb { background: var(--separator); background-clip: padding-box; }
.scroll-area::-webkit-scrollbar-corner { background: transparent; }