body { margin: 0; background: #f8f8f8; }
:where(.dark, [data-theme="dark"]) body { background: #0e0e10; }
#root { height: 100dvh; }
.ui-as-app { height: 100%; min-height: 0; }

/* user initials (avatar fallback) */
.ui-as-user__initials {
  display: grid; place-items: center; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--chip); color: var(--ink);
  font-size: 9px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}

/* setup guide (expanded) */
.ui-as-guideopen { display: grid; gap: 2px; padding: 10px; text-align: left; }
.ui-as-guideopen__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px; }
.ui-as-guideopen__head b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.ui-as-guideopen__group { margin-top: 6px; }
.ui-as-guideopen__gtitle { display: block; padding: 4px; font-size: 12px; font-weight: 500; color: var(--faint); }
.ui-as-guideopen__task { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 30px; padding: 0 4px; border-radius: 8px; font-size: 13px; color: var(--text); text-align: left; }
.ui-as-guideopen__task:hover { background: var(--hover); }
.ui-as-guideopen__box { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line-strong); color: transparent; }
.ui-as-guideopen__task[data-done] .ui-as-guideopen__box { background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); color: #fff; }
.ui-as-guideopen__task[data-done] span:last-child { color: var(--faint); text-decoration: line-through; }


/* sidebar search */
.ui-as-sidesearch { padding: 6px 4px 2px; }
.ui-as-sidesearch input { width: 100%; height: 30px; padding: 0 10px; border-radius: 8px; border: 0; background: var(--chip); font: inherit; font-size: 13px; color: var(--ink); }
.ui-as-sidesearch input::placeholder { color: var(--placeholder); }
.ui-as-sidesearch input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* invite popover */
.ui-as-invitepop { display: grid; gap: 8px; padding: 10px; min-width: 248px; }
.ui-as-invitepop p { margin: 0; font-size: 13px; color: var(--text); }
.ui-as-invitepop__row { display: flex; gap: 6px; }
.ui-as-invitepop__link { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 30px; line-height: 30px; padding: 0 10px; border-radius: 8px; background: var(--chip); font-size: 12.5px; color: var(--muted); }
.ui-as-invitepop__btn { height: 30px; padding: 0 12px; border-radius: 8px; background: var(--ink); color: var(--on-ink); font-size: 13px; font-weight: 500; }



/* Design tokens – same values as the affectUI library components */
.ui-as {
  --tray: #f4f4f4;
  --card: #ffffff;
  /* Like the affectUI library: gray page, the main area is a rounded panel on it */
  --page: #f8f8f8;
  --panel: #ffffff;
  --radius-panel: 18px;
  --frame-gap: 8px;
  --line: #ebebeb;
  --line-soft: #f0f0f0;
  --ink: #171717;
  --text: #404040;
  --muted: #737373;
  --faint: #a3a3a3;
  --placeholder: #a3a3a3;
  --chip: #f5f5f5;
  --chip-hover: #eeeeee;
  --hover: rgba(0, 0, 0, 0.035);
  --accent: #4469fc;
  --button: #262626;
  --button-hover: #333333;
  --accent-soft: #eef3ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --line-strong: #dedede;
  --subtle: #fafafa;
  --disabled: #dcdcdc;
  --on-ink: #ffffff;
  --ink-hover: #3a3a3a;
  --select: rgba(0, 0, 0, 0.055);
  --toggle-off: #e2e2e2;
  --switch-on: #171717;
  --logo-bg: #ffffff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* …and the screens' lighter grays: trays and their hovers a step lighter than the components' own defaults */
.ui-as .ui-ap { --ui-ap-tray: var(--tray); --ui-ap-hover: #ebebeb; }
:where(.dark, [data-theme="dark"]) .ui-as .ui-ap { --ui-ap-tray: #111113; --ui-ap-hover: #222225; }

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html>.
   Every screen draws from these tokens, and the library parts inside switch on their own. */
:where(.dark, [data-theme="dark"]) .ui-as {
  --tray: #1d1d20;
  --card: #1b1b1e;
  --page: #0e0e10;
  --panel: #141416;
  --line: #29292d;
  --line-soft: #222225;
  --ink: #f4f4f5;
  --text: #d4d4d8;
  --muted: #a1a1aa;
  --faint: #71717a;
  --placeholder: #71717a;
  --chip: #232326;
  --chip-hover: #2c2c30;
  --hover: rgba(255, 255, 255, 0.05);
  --accent: #6d8bff;
  --button: #f4f4f5;
  --button-hover: #ffffff;
  --accent-soft: rgba(109, 139, 255, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  --line-strong: #3a3a3f;
  --subtle: #18181b;
  --disabled: #3a3a3f;
  --on-ink: #111113;
  --ink-hover: #d4d4d8;
  --select: rgba(255, 255, 255, 0.08);
  --toggle-off: #3a3a3f;
  --switch-on: #6d8bff;
  --logo-bg: #2a2a2e;
  color-scheme: dark;
}

.ui-as, .ui-as *, .ui-as *::before, .ui-as *::after { box-sizing: border-box; }
.ui-as {
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:where(.ui-as) button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:where(.ui-as) svg { display: block; flex: none; }
.ui-as :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ui-as textarea:focus-visible, .ui-as input:focus-visible { outline: none; }

/* App frame shared by all screens: sidebar on the gray page, main area as a rounded white panel */

.ui-as-app {
  /* The layout answers to the app's own width (container queries), not the window – see the end of this file */
  container: ui-as / inline-size;
  position: relative;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  height: 100%;
  min-height: 560px;
  background: var(--page);
  transition: grid-template-columns 420ms var(--ease);
}
/* Collapsed: the sidebar is gone completely, the main area keeps the same gap on all sides */
.ui-as-app[data-collapsed] { grid-template-columns: 0 minmax(0, 1fr); }
.ui-as-app[data-collapsed] .ui-as-main { margin-left: var(--frame-gap); }

/* ---------- Sidebar ---------- */

.ui-as-side {
  display: flex;
  flex-direction: column;
  width: 220px;
  min-height: 0;
  padding: 10px 8px 8px 10px;
  transition: opacity 260ms ease, translate 420ms var(--ease), visibility 0s;
}
.ui-as-app[data-collapsed] .ui-as-side {
  visibility: hidden;
  opacity: 0;
  translate: -16px 0;
  transition: opacity 200ms ease, translate 420ms var(--ease), visibility 0s 420ms;
}

/* The icon to bring the sidebar back, in the top left corner of the main area */
.ui-as-side-open {
  position: fixed;
  z-index: 20;
  top: calc(var(--frame-gap) + 9px);
  left: calc(var(--frame-gap) + 9px);
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s 200ms;
}
.ui-as-app[data-collapsed] .ui-as-side-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 260ms ease 160ms, visibility 0s;
}

.ui-as-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
}
.ui-as-side__workspace {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ui-as-side__workspace svg { color: var(--faint); }
.ui-as-side__workspace:hover { background: var(--hover); }
.ui-as-user-menu { display: flex; }
.ui-as-user-menu > .ui-as-user { flex: 1; }
.ui-as-user-menu .ui-as-menu { width: 100%; }
/* Workspace logo on a white tile with a small, tight shadow below */
.ui-as-side__logo {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 1px;
  border-radius: 5px;
  background: var(--logo-bg);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 1px rgba(0, 0, 0, 0.12);
}
.ui-as-side__logo svg { width: 11px; height: auto; }
.ui-as-side__tools { display: flex; gap: 2px; }

.ui-as-icon-btn {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--muted);
  transition: background-color 140ms ease, color 140ms ease;
}
.ui-as-icon-btn:hover { background: var(--hover); color: var(--ink); }

.ui-as-side__nav {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
}
.ui-as-side__group { display: flex; flex-direction: column; }
.ui-as-side__group + .ui-as-side__group { margin-top: 10px; }
.ui-as-side__group + .ui-as-side__group > .ui-as-side__label:first-child { margin-top: 6px; }
.ui-as-side__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--text);
  text-align: left;
  transition: background-color 140ms ease, color 140ms ease;
}
.ui-as-side__item svg { color: var(--muted); }
.ui-as-side__item:hover { background: var(--hover); color: var(--ink); }
.ui-as-side__item[aria-current="page"] { background: var(--select); color: var(--ink); font-weight: 500; }
.ui-as-side__item[aria-current="page"] svg { color: var(--ink); }
a.ui-as-side__item { text-decoration: none; cursor: pointer; }
.ui-as-side__label {
  margin: 16px 0 4px;
  padding: 0 6px;
  font-size: 12.5px;
  line-height: 16px;
  color: var(--faint);
}

.ui-as-side__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
}

/* "What's new" – two cards stacked, the second one peeks out above */
.ui-as-news { position: relative; padding-top: 30px; }
.ui-as-news__card {
  position: relative;
  z-index: 1;
  padding: 10px 10px 0;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, 0.04);
}
.ui-as-news__card--back {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 10px;
  right: 10px;
  height: 48px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 9px 9px 0;
  background: var(--card);
  color: var(--faint);
}
.ui-as-news[data-count="1"] { padding-top: 0; }
.ui-as-news[data-count="1"] .ui-as-news__card--back { display: none; }
.ui-as-news__top { display: flex; align-items: center; justify-content: space-between; }
.ui-as-news__kicker { font-size: 11.5px; line-height: 15px; font-weight: 500; color: var(--accent); }
.ui-as-news__close {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin: -2px -2px 0 0;
  border-radius: 6px;
  color: var(--faint);
}
.ui-as-news__close:hover { background: var(--hover); color: var(--ink); }
.ui-as-news__title { display: block; margin-top: 4px; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--ink); }
.ui-as-news__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% + 20px);
  height: 34px;
  margin: 10px -10px 0;
  padding: 0 10px;
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 12px 12px;
  font-size: 12.5px;
  color: var(--muted);
}
.ui-as-news__more:hover { background: var(--subtle); color: var(--ink); }

/* Onboarding progress */
/* Getting started: one card that morphs between the short summary and the full Setup Guide */
.ui-as-guide-slot { position: relative; flex: none; }
.ui-as-guide {
  position: absolute;
  z-index: 6;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: height 480ms var(--ease), border-radius 480ms var(--ease), box-shadow 200ms ease;
}
.ui-as-guide:not([data-open]):hover { box-shadow: 0 0 0 1px var(--line-strong), 0 2px 6px rgba(0, 0, 0, 0.05); }
.ui-as-guide[data-open] { border-radius: 14px; box-shadow: 0 0 0 1px var(--line), 0 8px 24px -10px rgba(0, 0, 0, 0.14); }
.ui-as-guide__content { animation: ui-as-guide-in 360ms var(--ease) both; }
/* Closing: the guide fades out while the card shrinks back to the summary's height */
.ui-as-guide[data-state="closing"] .ui-as-guide__content { animation: ui-as-guide-out 260ms ease both; }
.ui-as-guide[data-state="closing"] { border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, 0.04); }
@keyframes ui-as-guide-out { to { opacity: 0; } }
@keyframes ui-as-guide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ui-as-steps {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px 10px 9px;
  text-align: left;
}
.ui-as-steps__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  line-height: 18px;
  font-weight: 600;
  color: var(--ink);
}
.ui-as-steps__title svg { color: var(--faint); }
.ui-as-steps__sub { font-size: 12.5px; line-height: 17px; color: var(--muted); }
.ui-as-steps__cheer { color: var(--accent); }
.ui-as-steps__bar {
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--tray);
}
.ui-as-steps__bar i { display: block; min-width: 6px; height: 100%; border-radius: inherit; background: var(--accent); transition: width 600ms var(--ease); }

.ui-as-user {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}
.ui-as-user img { width: 21px; height: 21px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
.ui-as-user svg { margin-left: auto; color: var(--faint); }
.ui-as-user:hover { background: var(--hover); }

/* ---------- Main ---------- */

/* Main area as a rounded panel, like the affectUI library */
.ui-as-main {
  /* Screens reflow their content by the width of this panel */
  container: ui-as-main / inline-size;
  position: relative;
  min-width: 0;
  margin: var(--frame-gap) var(--frame-gap) var(--frame-gap) 0;
  overflow-y: auto;
  /* No rubber-band bounce at the ends – sticky headers stay put */
  overscroll-behavior: none;
  transition: margin-left 420ms var(--ease);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  background: var(--panel);
}

.ui-as-view {
  position: relative;
  display: flex;
  gap: 2px;
  height: 32px;
  padding: 2px;
  border-radius: 9px;
  background: var(--chip);
}

/* Popovers: attached to their trigger, they fade and scale in from that side */
.ui-as-anchor { position: relative; display: inline-flex; }
.ui-as-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  transform-origin: top left;
  animation: ui-as-popover 220ms var(--ease);
}
.ui-as-popover[data-align="end"] { right: 0; left: auto; transform-origin: top right; }
.ui-as-popover[data-side="top"] { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; animation-name: ui-as-popover-up; }
.ui-as-popover[data-side="top"][data-align="end"] { transform-origin: bottom right; }
.ui-as-popover[data-side="right"] { top: auto; bottom: 0; left: calc(100% + 12px); transform-origin: bottom left; }
@keyframes ui-as-popover-up { from { opacity: 0; transform: scale(0.96) translateY(4px); } to { opacity: 1; transform: none; } }

.ui-as-menu {
  min-width: 168px;
  padding: 4px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 12px 32px -8px rgba(0, 0, 0, 0.16);
}
.ui-as-menu__title { display: block; padding: 6px 10px 4px; font-size: 12px; font-weight: 500; color: var(--faint); }
.ui-as-menu__list { display: grid; gap: 1px; }
.ui-as-menu__item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.ui-as-menu__item[data-rich] { min-height: 44px; padding: 6px 10px; }
.ui-as-menu__item > svg { flex: none; color: var(--muted); }
.ui-as-menu__item > svg:last-child:not(:first-child) { margin-left: auto; color: var(--ink); }
.ui-as-menu__label { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ui-as-menu__label small { font-size: 12px; line-height: 16px; color: var(--faint); }
.ui-as-menu__item:hover { background: var(--hover); color: var(--ink); }
.ui-as-menu__item[aria-checked="true"] { color: var(--ink); font-weight: 500; }
.ui-as-menu__item[aria-checked="true"] small { font-weight: 400; }
.ui-as-menu__item[data-danger] { color: #dc2626; }
.ui-as-menu__item[data-danger] > svg { color: #dc2626; }

@keyframes ui-as-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes ui-as-popover { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ui-as *, .ui-as *::before, .ui-as *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Workspace initial and user initials */
.ui-as-side__logo { font-size: 10.5px; font-weight: 600; color: var(--ink); }
.ui-as-user__initials {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--accent);
}

/* Scrim behind the drawer – only used on narrow screens */
.ui-as-scrim { display: none; }

/* ---------- Narrow: tablet and phone ---------- */
/* Container queries on the app itself, so a scaled 1440 px preview keeps the desktop layout */

@container ui-as (max-width: 900px) {
  /* The main panel takes the whole width; the sidebar slides in over it as a drawer */
  .ui-as-app > .ui-as-main { grid-row: 1; grid-column: 1 / -1; margin-left: var(--frame-gap); }
  .ui-as-app > .ui-as-side {
    position: absolute;
    z-index: 50;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(264px, calc(100% - 56px));
    padding: 10px 10px 10px 12px;
    border-radius: 0 18px 18px 0;
    background: var(--page);
    box-shadow: 0 0 0 1px var(--line), 0 24px 48px -12px rgba(0, 0, 0, 0.28);
  }
  .ui-as-app:not([data-drawer]) > .ui-as-side {
    visibility: hidden;
    translate: calc(-100% - 24px) 0;
    transition: translate 380ms var(--ease), visibility 0s 380ms;
  }
  .ui-as-app[data-drawer] > .ui-as-side {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: translate 420ms var(--ease), visibility 0s;
  }
  .ui-as-app > .ui-as-scrim {
    display: block;
    position: absolute;
    z-index: 45;
    inset: 0;
    background: rgba(0, 0, 0, 0.28);
    visibility: hidden;
    opacity: 0;
    transition: opacity 300ms ease, visibility 0s 300ms;
  }
  .ui-as-app[data-drawer] > .ui-as-scrim { visibility: visible; opacity: 1; transition: opacity 300ms ease, visibility 0s; }
  :where(.dark, [data-theme="dark"]) .ui-as-app > .ui-as-scrim { background: rgba(0, 0, 0, 0.55); }
  /* The icon to open it always waits in the top left corner of the panel */
  .ui-as-app:not([data-drawer]) > .ui-as-side-open {
    visibility: visible;
    opacity: 1;
    transition: opacity 260ms ease 160ms, visibility 0s;
  }
  /* It stays put while the panel scrolls, so it gets the panel's color behind it */
  .ui-as-app > .ui-as-side-open { left: calc(var(--frame-gap) + 9px); background: var(--panel); }
  .ui-as-app > .ui-as-side-open:hover { background: var(--chip); }

  /* Page parts: less padding, toolbars wrap */
  /* File cards fill the cells of the grids the screens switch to */
  .ui-as-toolbar__right { flex-wrap: wrap; }
}

@container ui-as (max-width: 600px) {
  .ui-as-app > * { --frame-gap: 6px; }
  .ui-as-app > .ui-as-main { border-radius: 16px; }
  /* Toolbars: tabs on their own line, the tools below; search takes what is left */
  .ui-as-toolbar__left, .ui-as-toolbar__right { width: 100%; }
  .ui-as-tabs__tab { flex: none; }
}



/* Chat thread shared by Assistant Home and Agent Chat */
.ui-as-msg-user {
  align-self: flex-end;
  max-width: 80%;
  margin: 0;
  padding: 9px 14px;
  border-radius: 16px;
  background: var(--chip);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  animation: ui-as-msg-in 480ms var(--ease) both;
}
/* affectUI grid-background: exact replica — 48px line grid, diagonal drift, radial fade */
.ui-as-gridbg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}
.ui-as-gridbg[data-show] { opacity: 1; }
.ui-as-gridbg__lines {
  position: absolute;
  width: 200%;
  height: 200%;
  left: -50%;
  top: -50%;
  background-image:
    linear-gradient(to right, rgba(0,0,0,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.14) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ui-as-gridbg[data-show] .ui-as-gridbg__lines {
  animation: ui-as-gridbg-drift 3s linear infinite;
}
@keyframes ui-as-gridbg-drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-48px, 48px); }
}
/* circular reveal on first appearance */
.ui-as-gridbg[data-show]:not([data-revealed]) {
  -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 0%);
  mask-image: radial-gradient(circle at center, black 0%, transparent 0%);
  animation: ui-as-gridbg-reveal 900ms ease-out forwards;
}
@keyframes ui-as-gridbg-reveal {
  from {
    -webkit-mask-image: radial-gradient(circle at center, black 0%, transparent 0%);
    mask-image: radial-gradient(circle at center, black 0%, transparent 0%);
  }
  to {
    -webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
  }
}
/* when Max grid is shown, let it show through the page background */
body:has(.ui-as-gridbg[data-show]) .ui-as-app,
body:has(.ui-as-gridbg[data-show]) .ui-as {
  background: transparent;
}
/* --page is scoped to .ui-as, so var(--page) is undefined on body and the
   background fell back to the browser's white canvas at the page edges
   (visible in dark mode whenever the Max grid showed). Use the page colors
   directly (her report 2026-10-20: "may white kapag naka Max"). */
body:has(.ui-as-gridbg[data-show]) {
  background: #f8f8f8;
}
:where(.dark, [data-theme="dark"]) body:has(.ui-as-gridbg[data-show]) {
  background: #0e0e10;
}
/* dark mode: white lines */
.dark .ui-as-gridbg__lines {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.14) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.14) 1px, transparent 1px);
}
/* reduced motion: still, no reveal */
@media (prefers-reduced-motion: reduce) {
  .ui-as-gridbg[data-show] .ui-as-gridbg__lines { animation: none; }
  .ui-as-gridbg[data-show]:not([data-revealed]) { animation: none; }
}
.ui-as-viewer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  cursor: zoom-out;
}
.ui-as-viewer[hidden] { display: none; }
.ui-as-viewer img, .ui-as-viewer video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  object-fit: contain;
}
.ui-as-viewer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ui-as-msg-user__img { cursor: zoom-in; }
.ui-as-msg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
  animation: ui-as-msg-in 480ms var(--ease) 160ms both;
}
.ui-as-msg__who { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ui-as-msg__avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--chip); color: var(--ink); }
@keyframes ui-as-msg-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }



/* Assistant start screen – layout taken 1 : 1 from the reference, styled with affectUI tokens */

.ui-as-invite {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
}
.ui-as-invite svg { color: var(--muted); }
.ui-as-invite:hover { background: var(--hover); color: var(--ink); }

.ui-as-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(672px, calc(100% - 48px));
  /* Fills the main area, so heading, composer and suggestions sit in its exact vertical middle */
  min-height: 100%;
  margin: 0 auto;
  padding: 64px 0;
}

.ui-as-start__title {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
}

.ui-as-start__composer { width: 100%; margin-top: 30px; }
.ui-as-start__title, .ui-as-chips { transition: opacity 180ms ease, transform 180ms ease; }
.ui-as-start[data-phase="leaving"] .ui-as-start__title { opacity: 0; transform: translateY(-8px); }
.ui-as-start[data-phase="leaving"] .ui-as-chips { opacity: 0; transform: translateY(8px); }

/* Chat: the thread fills the area and scrolls, the composer waits at the bottom */
.ui-as-start[data-phase="chat"] { width: 100%; height: 100%; min-height: 0; padding: 0; justify-content: flex-end; }
.ui-as-start__thread { flex: 1; width: 100%; min-height: 0; overflow-y: auto; padding: 64px 32px 24px; }
.ui-as-start__column { display: flex; flex-direction: column; gap: 22px; max-width: 672px; margin: 0 auto; }
.ui-as-start[data-phase="chat"] .ui-as-start__composer { flex: none; width: min(672px, calc(100% - 64px)); margin: 0 0 24px; }

/* Suggestions */
.ui-as-chips { display: grid; gap: 7px; margin-top: 18px; }
.ui-as-chips__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ui-as-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px 0 11px;
  border-radius: 16px;
  background: var(--chip);
  font-size: 12px;
  color: var(--text);
  transition: background-color 140ms ease, color 140ms ease;
}
.ui-as-chip svg { color: var(--text); }
.ui-as-chip:hover { background: var(--chip-hover); color: var(--ink); }

/* Narrow: a little less room around the column; on a phone the composer runs almost edge to edge */
@container ui-as (max-width: 600px) {
  .ui-as-start { width: calc(100% - 24px); padding: 56px 0 40px; }
  .ui-as-start__title { font-size: 23px; line-height: 29px; }
  .ui-as-start__composer { margin-top: 22px; }
  .ui-as-chips { margin-top: 14px; }
  .ui-as-chips__row { gap: 6px; }
  .ui-as-start__thread { padding: 56px 16px 16px; }
  .ui-as-start[data-phase="chat"] .ui-as-start__composer { width: calc(100% - 16px); margin-bottom: 8px; }
}


/* Composer: white card in the gray tray, folder and apps in the tray below */
.ui-as-composer {
  width: 100%;
  padding: 4px;
  border-radius: 18px;
  background: var(--tray);
}
.ui-as-composer__card {
  position: relative;
  isolation: isolate;
  padding: 12px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
/* React Bits prompt-bar max glow: subtle purple outer glow, no overlap */
.ui-as-composer__card[data-max] {
  box-shadow: 0 0 0 1px rgba(179,157,255,.45), 0 8px 32px -8px rgba(179,157,255,.35), var(--shadow);
}
.ui-as-composer__card::before {
  content: none;
}
.ui-as-composer__field {
  display: block;
  width: 100%;
  min-height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  resize: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  color: var(--ink);
}
.ui-as-composer__field::placeholder { color: var(--placeholder); }
.ui-as-composer__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0 0;
  position: relative;
  min-width: 0;
}
.ui-as-composer__bar > * { min-width: 0; }
.ui-as-composer__bar .ui-as-send { flex: none; }
.ui-as-composer__end { display: flex; align-items: center; gap: 4px; margin-left: auto; }
/* Attach menu (Muse app style: Camera, Photos, Videos, Files) */
.ui-as-attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: #1a1a1e; color: #f4f4f5;
  border-radius: 16px;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.2);
  padding: 6px;
  z-index: 50;
}
.ui-as-attach-menu[hidden] { display: none; }
.ui-as-attach-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}
.ui-as-attach-menu button:hover { background: rgba(255,255,255,.08); }
.ui-as-attach-menu__icon { display: grid; place-items: center; width: 24px; color: #a1a1aa; }
.ui-as-attach-menu__icon svg { width: 20px; height: 20px; }
.ui-as-ghost[data-active] { color: var(--ink); }
.ui-as-ghost[data-active] svg { color: var(--accent); }
.ui-as-composer .ui-as-menu { min-width: 248px; }
.ui-as-composer__tray .ui-as-anchor { display: flex; }
/* Dictation: the mic turns red and pulses while it listens */
.ui-as-mic[aria-pressed="true"] { background: rgba(220, 38, 38, 0.1); color: #dc2626; animation: ui-as-listen 1s ease-in-out infinite; }
@keyframes ui-as-listen { 50% { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); } }
.ui-as-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 10px; }
.ui-as-attachment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 9px;
  border-radius: 8px;
  background: var(--chip);
  font-size: 12.5px;
  color: var(--ink);
  animation: ui-as-pop 240ms var(--ease);
}
.ui-as-attachment > svg { color: var(--muted); }
.ui-as-attachment button { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: var(--muted); }
.ui-as-attachment button:hover { background: var(--hover); color: var(--ink); }
.ui-as-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--text);
  transition: background-color 140ms ease;
}
.ui-as-ghost svg { color: var(--muted); }
.ui-as-ghost:hover { background: var(--hover); }
.ui-as-send {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  /* Square lock (her phone report 2026-10-20): on her browser the button
     rendered as a tall ellipse stretched to the toolbar height. flex:none +
     align-self + aspect-ratio + max clamps make that impossible. */
  flex: none;
  align-self: center;
  aspect-ratio: 1;
  max-width: 30px;
  max-height: 30px;
  margin-left: 2px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-ink);
  transition: background-color 160ms ease, transform 160ms var(--ease);
}
.ui-as-send:disabled { background: var(--disabled); cursor: default; }
.ui-as-send:not(:disabled):active { transform: scale(0.94); }

.ui-as-composer__tray {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 37px;
  padding: 0 8px 0 6px;
}
.ui-as-tray-link {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--text);
}
.ui-as-tray-link:hover { background: var(--hover); }
/* Glass Folder from the library at icon size; hovering the link opens it like hovering the folder itself */
.ui-as-tray-link__folder { position: relative; flex: none; width: 16px; height: 14px; }
.ui-as-tray-link__folder .ui-fd { position: absolute; top: 50%; left: 50%; width: 40px; translate: -50% -50%; }
.ui-as-tray-link:hover .ui-fd-icon { transform: translate(-50%, -48%) scale(1.03); }
.ui-as-tray-link:hover .ui-fd-doc--left { transform: translate(32px, 70px) rotate(9deg); }
.ui-as-tray-link:hover .ui-fd-doc--right { transform: translate(286px, 76px) rotate(5deg); }
.ui-as-tray-link:hover .ui-fd-doc--middle { transform: translate(166px, 52px) rotate(-7deg); }
.ui-as-tray-link:hover .ui-fd-front {
  top: 24.8%;
  border-radius: 3cqw 3cqw 6.333cqw 6.333cqw;
  transform: translateZ(2.33cqw) rotateX(-9deg);
}
.ui-as-tray-link--apps { gap: 10px; color: var(--muted); }
.ui-as-apps { display: flex; align-items: center; gap: 6px; }
.ui-as-apps svg { width: 13px; height: 13px; }



.ui-fd {
  --ui-fd-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  container-type: inline-size;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

/* The folder is drawn on a 600 × 500 grid; cqw keeps every detail in proportion */
.ui-fd-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40%;
  aspect-ratio: 6 / 5;
  container-type: inline-size;
  perspective: 220cqw;
  perspective-origin: 50% 60%;
  transform: translate(-50%, -48%);
  transition: transform 0.6s var(--ui-fd-ease);
}
.ui-fd-icon:hover { transform: translate(-50%, -48%) scale(1.03); }

.ui-fd-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ui-fd-back {
  filter:
    drop-shadow(0 4cqw 4.6cqw rgba(60, 130, 180, 0.28))
    drop-shadow(0 1.3cqw 2cqw rgba(60, 130, 180, 0.16))
    drop-shadow(0 0.3cqw 0.7cqw rgba(60, 130, 180, 0.1));
}

.ui-fd-doc {
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 3px 4px rgba(0, 30, 60, 0.18));
  transition: transform 0.55s var(--ui-fd-ease);
}
.ui-fd-doc--left   { transform: translate(40px, 80px) rotate(6deg); }
.ui-fd-doc--right  { transform: translate(280px, 80px) rotate(6deg); }
.ui-fd-doc--middle { transform: translate(160px, 66px) rotate(-4deg); }
.ui-fd-icon:hover .ui-fd-doc--left   { transform: translate(32px, 70px) rotate(9deg); }
.ui-fd-icon:hover .ui-fd-doc--right  { transform: translate(286px, 76px) rotate(5deg); }
.ui-fd-icon:hover .ui-fd-doc--middle { transform: translate(166px, 52px) rotate(-7deg); }

/* Pocket: top edge at 108 of 500, corners 38; on hover it drops to 124 and tips forward */
.ui-fd-front {
  position: absolute;
  inset: 21.6% 0 0;
  border-radius: 6.333cqw;
  background:
    linear-gradient(180deg, rgba(0, 40, 75, 0) 74%, rgba(0, 40, 75, 0.28) 100%),
    linear-gradient(180deg, rgba(132, 214, 248, 0.45) 0%, rgba(69, 170, 220, 0.45) 100%);
  box-shadow: inset 0 0 0 0.67cqw rgba(255, 255, 255, 0.3), inset 0 0.25cqw 0 rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(3.3cqw) saturate(1.1);
  backdrop-filter: blur(3.3cqw) saturate(1.1);
  transform-origin: 50% 100%;
  transition: top 0.6s var(--ui-fd-ease), border-radius 0.6s var(--ui-fd-ease), transform 0.6s var(--ui-fd-ease);
}
.ui-fd-icon:hover .ui-fd-front {
  top: 24.8%;
  border-radius: 3cqw 3cqw 6.333cqw 6.333cqw;
  transform: translateZ(2.33cqw) rotateX(-9deg);
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html>.
   Dark paper with light lines, a deeper blue folder and a pocket that lets less light through. */
:where(.dark, [data-theme="dark"]) .ui-fd-back-fill { fill: #3d8fc6; }
:where(.dark, [data-theme="dark"]) .ui-fd-back {
  filter:
    drop-shadow(0 4cqw 4.6cqw rgba(0, 0, 0, 0.45))
    drop-shadow(0 1.3cqw 2cqw rgba(0, 0, 0, 0.3));
}
:where(.dark, [data-theme="dark"]) .ui-fd-doc { filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }
:where(.dark, [data-theme="dark"]) .ui-fd-front {
  background:
    linear-gradient(180deg, rgba(0, 20, 40, 0) 70%, rgba(0, 20, 40, 0.4) 100%),
    linear-gradient(180deg, rgba(100, 190, 235, 0.42) 0%, rgba(45, 130, 190, 0.5) 100%);
  box-shadow: inset 0 0 0 0.67cqw rgba(255, 255, 255, 0.14), inset 0 0.25cqw 0 rgba(255, 255, 255, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .ui-fd-icon, .ui-fd-doc, .ui-fd-front { transition: none; }
}

/* invite anchor: the popover needs a positioned anchor; the button keeps its look */
#inviteAnchor { position: absolute; top: 8px; right: 8px; z-index: 5; }
#inviteAnchor .ui-as-invite { position: static; }

  --ui-tk-ink: #171717;
  --ui-tk-text: #525252;
  --ui-tk-muted: #8a8a8a;
  --ui-tk-line: #e5e5e5;
  --ui-tk-chip: #f0f0f0;
  --ui-tk-done: #2f6bff;
  --ui-tk-shine: rgba(255, 255, 255, 0.82);
  --ui-tk-dot: #b5b5b5;
  --ui-tk-chip-hover: #e6e6e6;
  --ui-tk-tip-text: #fff;
  --ui-tk-focus: rgba(23, 23, 23, 0.22);
  --ui-tk-ease: cubic-bezier(0.22, 1, 0.36, 1);

  width: 100%;
  max-width: 440px;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ui-tk-text);
  -webkit-font-smoothing: antialiased;
}
  box-sizing: border-box;
}
  display: block;
  width: 100%;
  height: 100%;
}

/* Header: chevron + "Thinking 4s" / "Worked for 18s" */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0 -4px;
  padding: 4px 8px 4px 4px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ui-tk-muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
  background: var(--ui-tk-chip);
  color: var(--ui-tk-text);
}
  outline: 2px solid var(--ui-tk-focus);
  outline-offset: 2px;
}
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(-90deg);
  transition: transform 260ms var(--ui-tk-ease);
}
  transform: none;
}
  display: inline-flex;
  gap: 8px;
}
  font-variant-numeric: tabular-nums;
}

/* Body collapses smoothly */
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 360ms var(--ui-tk-ease), opacity 260ms ease;
}
  grid-template-rows: 0fr;
  opacity: 0;
}
  overflow: hidden;
}
  min-height: 0;
  /* clips only while collapsed, so tooltips can reach out when open */
  overflow: visible;
  margin: 0;
  padding: 10px 0 0;
  list-style: none;
}

/* Timeline: icon column with a line growing down to the next node */
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 12px;
}
  content: "";
  position: absolute;
  left: 9.5px;
  top: 24px;
  bottom: 2px;
  width: 1px;
  background: var(--ui-tk-line);
  transform-origin: top;
}
  display: grid;
  place-items: center;
  width: 20px;
  height: 21px;
}
  width: 18px !important;
  height: 18px !important;
  fill: none;
  stroke: var(--ui-tk-muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ui-tk-dot);
  transition: background-color 300ms ease, transform 300ms ease;
}
  background: var(--ui-tk-ink);
}
  width: 18px !important;
  height: 18px !important;
}
  fill: var(--ui-tk-done);
}
  fill: none;
  stroke: #fff;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}

  min-width: 0;
  padding-top: 0.5px;
}
  display: inline-block;
  color: var(--ui-tk-muted);
  transition: color 300ms ease;
}
  color: var(--ui-tk-text);
}

/* Sources: chips pop in one after another */
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 28px;
  padding: 0 10px 0 6px;
  border-radius: 8px;
  background: var(--ui-tk-chip);
  font-size: 13px;
  color: var(--ui-tk-ink);
}
  position: relative;
  border: 0;
  font: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
  background: var(--ui-tk-chip-hover);
}
  padding: 0 10px;
  background: none;
  color: var(--ui-tk-muted);
}
  background: var(--ui-tk-chip);
  color: var(--ui-tk-ink);
}
  outline: 2px solid var(--ui-tk-focus);
  outline-offset: 2px;
}

/* Tooltip above the chip */
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  z-index: 2;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ui-tk-ink);
  color: var(--ui-tk-tip-text);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 140ms ease, transform 200ms var(--ui-tk-ease);
}
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 250ms;
}

  padding: 0 10px;
  background: none;
  color: var(--ui-tk-muted);
}
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
  display: grid;
  place-items: center;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  overflow: hidden;
}

/* Shimmer over the active label, like the loading states elsewhere */
  position: relative;
}
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, transparent 38%, var(--ui-tk-shine) 50%, transparent 62%) 100% 0 / 300% 100%
    no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
}

  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
  from { opacity: 0; transform: translateY(4px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
  50% { transform: scale(0.7); opacity: 0.5; }
}
  0% { transform: scale(0.5); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
  to { stroke-dashoffset: 0; }
}
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
    display: none;
  }
    stroke-dashoffset: 0;
  }
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html> */
  --ui-tk-ink: #ededed;
  --ui-tk-text: #c4c4c4;
  --ui-tk-muted: #8f8f8f;
  --ui-tk-line: rgba(255, 255, 255, 0.1);
  --ui-tk-chip: #2a2a2d;
  --ui-tk-chip-hover: #313135;
  --ui-tk-shine: rgba(255, 255, 255, 0.95);
  --ui-tk-dot: #5c5c61;
  --ui-tk-tip-text: #121213;
  --ui-tk-focus: rgba(255, 255, 255, 0.3);
}

/* Colors and motion as variables – override them on .ui-ans */
.ui-ans {
  --ui-ans-tray: #f0f0f0;
  --ui-ans-card: #ffffff;
  --ui-ans-line: #ececec;
  --ui-ans-ink: #171717;
  --ui-ans-text: #404040;
  --ui-ans-muted: #8f8f8f;
  --ui-ans-faint: #b5b5b5;
  --ui-ans-chip: #f4f4f5;
  --ui-ans-chip-hover: #ebebec;
  --ui-ans-hover: #e4e4e5;
  --ui-ans-lit: #171717;
  --ui-ans-lit-text: #ffffff;
  --ui-ans-lit-ring: #cfcfd3;
  --ui-ans-shine: rgba(255, 255, 255, 0.82);
  --ui-ans-ok: #1f8a4c;
  --ui-ans-focus: rgba(23, 23, 23, 0.22);
  --ui-ans-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  box-sizing: border-box;
  container-type: inline-size;
  display: grid;
  width: 100%;
  max-width: 640px;
  padding: 4px;
  border-radius: 20px;
  /* No tray background (her order 2026-10-20): the answer sits directly on the
     page, Gemini-style — the inner card was already transparent. */
  background: transparent;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ui-ans-text);
  -webkit-font-smoothing: antialiased;
}
.ui-ans *, .ui-ans *::before, .ui-ans *::after { box-sizing: border-box; }
:where(.ui-ans) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
:where(.ui-ans) svg { display: block; flex: none; }
.ui-ans button:focus-visible, .ui-ans a:focus-visible { outline: 2px solid var(--ui-ans-focus); outline-offset: 2px; }

/* The white card — Gemini-style: no background, plain text (her order 2026-10-19) */
.ui-ans__card {
  overflow: hidden;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: height 360ms var(--ui-ans-ease);
}
.ui-ans__inner { display: flow-root; padding: 0; }
.ui-ans__question { margin: 0 0 16px; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.012em; color: var(--ui-ans-ink); }

/* Sources: a row of small cards that scrolls sideways */
.ui-ans__sources {
  display: flex;
  gap: 8px;
  margin: 0 -24px;
  padding: 0 24px 2px;
  overflow-x: auto;
  scroll-padding: 0 24px;
  scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
  mask: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent);
}
.ui-ans__sources::-webkit-scrollbar { display: none; }
.ui-ans__source {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 172px;
  padding: 10px 12px 11px;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 200ms ease;
  animation: ui-ans-card 460ms var(--ui-ans-ease) both;
}
a.ui-ans__source:hover { background: var(--ui-ans-chip-hover); }
.ui-ans__source[data-lit] { box-shadow: inset 0 0 0 1.5px var(--ui-ans-lit-ring); }
.ui-ans__site { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--ui-ans-muted); }
.ui-ans__site-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-ans__num { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ui-ans-faint); }
.ui-ans__favicon {
  display: grid;
  flex: none;
  width: 16px;
  height: 16px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.ui-ans__favicon svg { width: 100%; height: 100%; }
.ui-ans__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ui-ans-ink);
}

/* "Reading 6 sources" → "Writing" → "Answer" */
.ui-ans__label { display: none; }
.ui-ans__mark { width: 27px; height: 24px; margin: -3px -1px -3px -2px; overflow: visible; }
.ui-ans__mark {
  --ui-ans-mark-top: #7ccbff;
  --ui-ans-mark-bottom: #2f8fea;
  --ui-ans-mark-glow: #ffffff;
  --ui-ans-mark-edge: #b3dcff;
  --ui-ans-mark-eye-top: #ffffff;
  --ui-ans-mark-eye-bottom: #d6f0ff;
  --ui-ans-mark-eye-shade: rgba(30, 140, 230, 0.3);
}
.ui-ans__mark-edge { fill: var(--ui-ans-mark-edge); }
.ui-ans__mark-eye-shade { stroke: var(--ui-ans-mark-eye-shade); }

/* The eyes: look around, blink and wink once done; scan while reading; follow the lines while writing */
.ui-ans__eyes { animation: ui-ans-look 7s ease-in-out infinite; }
.ui-ans__eye { transform-box: fill-box; transform-origin: center; animation: ui-ans-blink 7s ease-in-out infinite; }
.ui-ans__eye-r { animation-name: ui-ans-blink-r; }
.ui-ans[data-phase="reading"] .ui-ans__eyes { animation: ui-ans-scan 1.4s ease-in-out infinite; }
.ui-ans[data-phase="writing"] .ui-ans__eyes { animation: ui-ans-follow 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
@keyframes ui-ans-look {
  0%, 26% { transform: none; }
  32%, 44% { transform: translate(-12px, 1px); }
  50%, 62% { transform: translate(12px, -2px); }
  68%, 100% { transform: none; }
}
@keyframes ui-ans-blink {
  0%, 16%, 21%, 100% { transform: none; }
  18.5% { transform: scaleY(0.1); }
}
@keyframes ui-ans-blink-r {
  0%, 16%, 21%, 84%, 93%, 100% { transform: none; }
  18.5% { transform: scaleY(0.1); }
  87%, 90% { transform: scaleY(0.1); }
}
@keyframes ui-ans-scan {
  0%, 100% { transform: translate(-11px, 1px); }
  50% { transform: translate(11px, 1px); }
}
@keyframes ui-ans-follow {
  0% { transform: translate(-10px, 5px); }
  82% { transform: translate(10px, 5px); }
  100% { transform: translate(-10px, 5px); }
}
.ui-ans__label-text { position: relative; animation: ui-ans-fade 320ms var(--ui-ans-ease) both; }
.ui-ans[data-phase="reading"] .ui-ans__label-text,
.ui-ans[data-phase="writing"] .ui-ans__label-text { color: var(--ui-ans-muted); }

/* The answer */
.ui-ans__answer { font-size: 15px; line-height: 1.65; color: var(--ui-ans-text); }
.ui-ans__answer p { margin: 0 0 12px; }
.ui-ans__answer ul { margin: 0 0 12px; padding: 0 0 0 20px; }
.ui-ans__answer li { margin: 0 0 6px; padding-left: 2px; }
.ui-ans__answer li::marker { color: var(--ui-ans-faint); }
.ui-ans__answer > :last-child { margin-bottom: 0; }
.ui-ans__empty { color: var(--ui-ans-muted); }
.ui-ans__w { animation: ui-ans-word 420ms var(--ui-ans-ease) both; }
.ui-ans__w[data-bold] { font-weight: 600; color: var(--ui-ans-ink); }
.ui-ans__caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--ui-ans-ink);
  vertical-align: 0.05em;
  animation: ui-ans-pulse 1s ease-in-out infinite;
}

/* Citation chips */
.ui-ans__cite {
  display: inline;
  margin: 0 1px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--ui-ans-muted);
  vertical-align: super;
  transition: color 160ms ease;
}
.ui-ans__cite:hover { background: transparent; color: var(--ui-ans-ink); }
.ui-ans__cite[data-lit] { background: transparent; color: var(--ui-ans-ink); text-decoration: underline; }
.ui-ans__more { opacity: 0.7; }

/* Preview of the cited source */
.ui-ans__pop {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  background: var(--ui-ans-card);
  box-shadow: 0 0 0 1px var(--ui-ans-line), 0 12px 32px -10px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.04);
  animation: ui-ans-pop 200ms var(--ui-ans-ease) both;
}
.ui-ans__pop-item { display: grid; gap: 4px; padding: 8px 10px 10px; border-radius: 9px; color: inherit; text-decoration: none; transition: background-color 140ms ease; }
.ui-ans__pop-item[href]:hover { background: var(--ui-ans-chip); }
.ui-ans__pop-title { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ui-ans-ink); }
.ui-ans__snippet {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ui-ans-muted);
}

/* Follow-up questions */
.ui-ans__follow { display: flex; gap: 10px; margin-top: 16px; }
.ui-ans__follow-label { display: none; }
.ui-ans__follow-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  min-height: 88px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--ui-ans-chip);
  text-align: left;
  color: var(--ui-ans-ink);
  font-size: 14px;
  line-height: 1.45;
  animation: ui-ans-fade 380ms var(--ui-ans-ease) both;
}
.ui-ans__follow-item:hover { background: var(--ui-ans-chip-hover); }
.ui-ans__follow-item .ui-ans__glyph { color: var(--ui-ans-faint); align-self: flex-start; }
.ui-ans__follow-item:hover .ui-ans__glyph { color: var(--ui-ans-ink); }

/* The tray below the card */
.ui-ans__foot { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
.ui-ans__foot .ui-ans__actions { padding: 0 8px 0 6px; }
.ui-ans__foot .ui-ans__disclaim { padding: 0 8px; }
.ui-ans__foot .ui-ans__status { padding: 0 8px; height: 28px; display: flex; align-items: center; }
.ui-ans__actions { display: flex; gap: 2px; align-items: center; }
.ui-ans__action {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--ui-ans-muted);
  transition: background-color 160ms ease, color 160ms ease;
  animation: ui-ans-fade 320ms var(--ui-ans-ease) both;
}
.ui-ans__action:nth-child(2) { animation-delay: 40ms; }
.ui-ans__action:nth-child(3) { animation-delay: 80ms; }
.ui-ans__action:nth-child(4) { animation-delay: 120ms; }
.ui-ans__action:hover { background: var(--ui-ans-hover); color: var(--ui-ans-ink); }
.ui-ans__spacer { flex: 1; }
.ui-ans__disclaim { font-size: 12px; color: var(--ui-ans-muted); margin-top: 6px; }
.ui-ans__action[aria-pressed="true"] { color: var(--ui-ans-ink); }
.ui-ans__action[aria-pressed="true"] .ui-ans__glyph { fill: currentColor; fill-opacity: 0.12; }
.ui-ans__glyph { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ui-ans__down .ui-ans__glyph { transform: scaleY(-1); }
.ui-ans__redo:active .ui-ans__glyph { transform: rotate(120deg); transition: transform 300ms var(--ui-ans-ease); }
.ui-ans__ok { stroke: var(--ui-ans-ok) !important; stroke-width: 2.2 !important; animation: ui-ans-chip 260ms var(--ui-ans-ease) both; }
.ui-ans__status { font-size: 12.5px; white-space: nowrap; color: var(--ui-ans-muted); animation: ui-ans-fade 260ms var(--ui-ans-ease) both; }
/* Answer-time status removed entirely (her order 2026-10-20: "Alisin na yan
   Answered in 2s") — no status line under the disclaimer at all. */
.ui-ans__foot .ui-ans__status { display: none; }
.ui-ans__stop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 10px;
  border-radius: 9px;
  font-size: 13px;
  color: var(--ui-ans-text);
  transition: background-color 160ms ease;
  animation: ui-ans-fade 260ms var(--ui-ans-ease) both;
}
.ui-ans__stop:hover { background: var(--ui-ans-hover); }
.ui-ans__stop-icon { width: 9px; height: 9px; border-radius: 2px; background: var(--ui-ans-ink); }

/* Reasons after a thumbs down fold out below */
.ui-ans__reasons { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 320ms var(--ui-ans-ease), opacity 200ms ease; }
.ui-ans__reasons[data-open="true"] { grid-template-rows: 1fr; opacity: 1; }
/* 4px of room above (taken back with the margin) so the outline and focus ring of the chips aren't cut off */
.ui-ans__reasons > div { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; overflow: hidden; margin-top: -4px; padding: 4px 6px 0; }
.ui-ans__reasons[data-open="true"] > div { padding-bottom: 8px; }
.ui-ans__reasons button {
  height: 30px;
  padding: 0 11px;
  border-radius: 9px;
  background: var(--ui-ans-card);
  box-shadow: 0 0 0 1px var(--ui-ans-line);
  font-size: 12.5px;
  color: var(--ui-ans-text);
  transition: color 140ms ease, box-shadow 140ms ease;
}
.ui-ans__reasons button:hover { color: var(--ui-ans-ink); box-shadow: 0 0 0 1px var(--ui-ans-faint); }

/* Shimmer over the working label */
.ui-ans__shimmer::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, transparent 38%, var(--ui-ans-shine) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ui-ans-sweep 1.6s linear infinite;
  pointer-events: none;
}

@keyframes ui-ans-word { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
@keyframes ui-ans-card { from { opacity: 0; transform: translateY(6px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes ui-ans-chip { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }
@keyframes ui-ans-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes ui-ans-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ui-ans-pulse { 50% { transform: scale(0.6); opacity: 0.45; } }
@keyframes ui-ans-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* Narrow (phones) */
@container (max-width: 480px) {
  .ui-ans__inner { padding: 18px 18px 16px; }
  .ui-ans__sources { margin: 0 -18px; padding: 0 18px 2px; scroll-padding: 0 18px; }
  .ui-ans__question { font-size: 16.5px; }
  .ui-ans__source { width: 152px; }
  .ui-ans__answer { font-size: 14.5px; }
}
/* Touch screens: bigger tap targets – the citation chips keep their size but get a larger invisible hit area */
@media (hover: none) and (pointer: coarse) {
  .ui-ans__action { width: 40px; height: 40px; border-radius: 10px; }
  .ui-ans__foot { height: 48px; }
  .ui-ans__stop { height: 36px; }
  .ui-ans__reasons button { height: 36px; padding: 0 13px; }
  .ui-ans__follow-item { min-height: 46px; }
  .ui-ans__cite { position: relative; }
  .ui-ans__cite::after { content: ""; position: absolute; inset: -10px -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-ans *, .ui-ans *::before, .ui-ans *::after { animation: none !important; transition: none !important; }
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html> */
:where(.dark, [data-theme="dark"]) .ui-ans {
  --ui-ans-tray: #111113;
  --ui-ans-card: #19191b;
  --ui-ans-line: #2a2a2e;
  --ui-ans-ink: #ededed;
  --ui-ans-text: #c8c8cc;
  --ui-ans-muted: #8b8b92;
  --ui-ans-faint: #5c5c63;
  --ui-ans-chip: #232326;
  --ui-ans-chip-hover: #2b2b2f;
  --ui-ans-hover: #222225;
  --ui-ans-lit: #ededed;
  --ui-ans-lit-text: #19191b;
  --ui-ans-lit-ring: #4a4a50;
  --ui-ans-shine: rgba(255, 255, 255, 0.95);
  --ui-ans-ok: #3ec27a;
  --ui-ans-focus: rgba(255, 255, 255, 0.3);
}
:where(.dark, [data-theme="dark"]) .ui-ans__mark {
  /* Reversed for dark mode: deep at the top, brighter at the bottom, a dark glow inside the edge and a dark outline; the eyes stay white */
  --ui-ans-mark-top: #1a4f9e;
  --ui-ans-mark-bottom: #3d9cf0;
  --ui-ans-mark-glow: #081a36;
  --ui-ans-mark-edge: #173866;
}
:where(.dark, [data-theme="dark"]) .ui-ans__favicon { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* Colors and motion as variables – override them on .ui-st */
.ui-st {
  --ui-st-tray: #f0f0f0;
  --ui-st-card: #ffffff;
  --ui-st-ink: #171717;
  --ui-st-text: #6b6b6b;
  --ui-st-muted: #8a8a8a;
  --ui-st-faint: #b8b8b8;
  --ui-st-line: #ececec;
  --ui-st-rail: #d4d4d8;
  --ui-st-hover: #e4e4e5;
  --ui-st-chip: #f5f5f5;
  --ui-st-accent: #2f6bff;
  --ui-st-accent-bg: rgba(47, 107, 255, 0.08);
  --ui-st-amber: #e8a20c;
  --ui-st-green: #22a05a;
  --ui-st-on-ink: #ffffff;
  --ui-st-ring: rgba(23, 23, 23, 0.22);
  --ui-st-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 460px;
  padding: 4px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ui-st-tray);
  container-type: inline-size;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.006em;
  color: var(--ui-st-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ui-st *, .ui-st *::before, .ui-st *::after { box-sizing: border-box; }
:where(.ui-st) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-st button:focus-visible { outline: 2px solid var(--ui-st-ring); outline-offset: 2px; }
.ui-st ol, .ui-st ul { margin: 0; padding: 0; list-style: none; }
.ui-st svg { display: block; flex: none; }
.ui-st__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The white card holds the run and its plan */
.ui-st__card { position: relative; border-radius: 16px; background: var(--ui-st-card); box-shadow: 0 0 0 1px var(--ui-st-line), 0 1px 2px rgba(0, 0, 0, 0.04); }

/* ----- The run ----- */
.ui-st__head { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 14px 12px 16px; }
.ui-st__spark { display: grid; flex: none; place-items: center; width: 16px; color: var(--ui-st-accent); }
.ui-st[data-status="paused"] .ui-st__spark { color: var(--ui-st-amber); }
.ui-st[data-status="done"] .ui-st__spark { color: var(--ui-st-green); }
.ui-st__heading { display: grid; flex: 1; min-width: 0; }
.ui-st__title { overflow: hidden; font-weight: 600; color: var(--ui-st-ink); white-space: nowrap; text-overflow: ellipsis; }
.ui-st__sub { overflow: hidden; font-size: 12.5px; line-height: 18px; color: var(--ui-st-muted); white-space: nowrap; text-overflow: ellipsis; }
.ui-st__dot { margin: 0 6px; color: var(--ui-st-faint); }
.ui-st__state { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--ui-st-chip); font-size: 12.5px; font-weight: 500; color: var(--ui-st-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-st__pulse { position: relative; width: 6px; height: 6px; border-radius: 50%; background: var(--ui-st-accent); }
.ui-st__pulse::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--ui-st-accent); opacity: 0; animation: ui-st-pulse 1600ms ease-out infinite; }
.ui-st__state[data-status="paused"] .ui-st__pulse { background: var(--ui-st-amber); }
.ui-st__state[data-status="done"] .ui-st__pulse { background: var(--ui-st-green); }
.ui-st__state:not([data-status="running"]) .ui-st__pulse::after { display: none; }
.ui-st__icon-btn { display: grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--ui-st-muted); box-shadow: inset 0 0 0 1px var(--ui-st-line); transition: color 160ms ease, background-color 160ms ease; }
.ui-st__icon-btn:hover { color: var(--ui-st-ink); background: var(--ui-st-chip); }

/* ----- The plan ----- */
.ui-st__plan { display: grid; grid-template-columns: minmax(0, 1fr); padding: 10px 16px 14px !important; border-top: 1px solid var(--ui-st-line); }
.ui-st__step { position: relative; padding: 6px 0; }
/* Short rail segments between the icons, with a little air on both ends */
.ui-st__step:not(:last-child)::after { content: ""; position: absolute; top: 27px; bottom: -3px; left: 7.5px; width: 1px; background: var(--ui-st-rail); }
.ui-st__step-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ui-st__step-icon { display: grid; flex: none; place-items: center; width: 16px; height: 16px; color: var(--ui-st-faint); }
.ui-st__step-icon[data-status="done"] { color: var(--ui-st-ink); animation: ui-st-pop 360ms var(--ui-st-ease) both; }
.ui-st__step-icon[data-status="active"] { color: var(--ui-st-accent); }
.ui-st__step-icon[data-status="active"] svg { animation: ui-st-spin 900ms linear infinite; }
.ui-st__step-title { flex: 1; min-width: 0; overflow: hidden; color: var(--ui-st-ink); white-space: nowrap; text-overflow: ellipsis; }
.ui-st__step[data-status="done"] .ui-st__step-title { color: var(--ui-st-text); }
.ui-st__step[data-status="pending"] .ui-st__step-title { color: var(--ui-st-muted); }
.ui-st[data-status="running"] .ui-st__step[data-status="active"] .ui-st__step-title {
  background: linear-gradient(90deg, var(--ui-st-ink) 0%, var(--ui-st-ink) 40%, var(--ui-st-faint) 50%, var(--ui-st-ink) 60%, var(--ui-st-ink) 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ui-st-shimmer 2200ms linear infinite;
}
.ui-st__step[data-status="active"] .ui-st__step-title { font-weight: 500; }
.ui-st__step-time { flex: none; font-size: 12.5px; color: var(--ui-st-faint); font-variant-numeric: tabular-nums; }

/* A note the agent took in – attached to its step */
.ui-st__note { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 2px 28px; padding: 6px 10px 6px 8px; border-radius: 10px; background: var(--ui-st-chip); font-size: 13px; line-height: 18px; color: var(--ui-st-ink); }
.ui-st__note > svg { margin-top: 3px; color: var(--ui-st-muted); }
.ui-st__note-text { flex: 1; min-width: 0; }
.ui-st__note-tag { display: inline-flex; flex: none; align-items: center; gap: 3px; font-size: 12px; font-weight: 500; color: var(--ui-st-accent); white-space: nowrap; }
.ui-st__note[data-landed] { animation: ui-st-land 1400ms ease both; }

/* ----- On the tray: queued notes ----- */
.ui-st__queue { padding: 12px 8px 0; }
.ui-st__label { display: flex; align-items: center; gap: 6px; margin: 0 4px 8px; font-size: 12px; font-weight: 500; color: var(--ui-st-muted); }
.ui-st__label span { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 6px; background: var(--ui-st-hover); color: var(--ui-st-text); font-variant-numeric: tabular-nums; }
.ui-st__queued { display: grid; gap: 6px; }
.ui-st__chip { position: relative; display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 4px 4px 12px; border-radius: 12px; background: var(--ui-st-card); box-shadow: 0 0 0 1px var(--ui-st-line), 0 1px 2px rgba(0, 0, 0, 0.04); color: var(--ui-st-ink); }
.ui-st__chip::before { content: ""; position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-st-accent); }
.ui-st__chip-text { flex: 1; min-width: 0; font-size: 13px; line-height: 18px; }
.ui-st__chip-btn { display: inline-flex; flex: none; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: var(--ui-st-text); transition: background-color 160ms ease, color 160ms ease; }
.ui-st__chip-btn:hover { background: var(--ui-st-accent-bg); color: var(--ui-st-accent); }
.ui-st__chip-x { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 8px; color: var(--ui-st-faint); transition: background-color 160ms ease, color 160ms ease; }
.ui-st__chip-x:hover { background: var(--ui-st-chip); color: var(--ui-st-ink); }

/* ----- On the tray: steer ----- */
.ui-st__compose { padding: 10px 8px 8px; }
.ui-st__field { display: flex; align-items: flex-end; gap: 8px; min-height: 42px; padding: 5px 5px 5px 14px; border-radius: 14px; background: var(--ui-st-card); box-shadow: 0 0 0 1px var(--ui-st-line), 0 1px 2px rgba(0, 0, 0, 0.04); cursor: text; transition: box-shadow 160ms ease; }
.ui-st__field:focus-within { box-shadow: 0 0 0 1px var(--ui-st-rail), 0 0 0 4px var(--ui-st-accent-bg); }
.ui-st__field textarea { flex: 1; min-width: 0; height: 20px; margin: 6px 0; padding: 0; border: 0; outline: none; background: none; font: inherit; color: var(--ui-st-ink); resize: none; }
.ui-st__field textarea::placeholder { color: var(--ui-st-muted); }
.ui-st__field textarea:focus-visible { outline: none; }
.ui-st__send { display: grid; flex: none; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--ui-st-ink); color: var(--ui-st-on-ink); transition: opacity 160ms ease, transform 160ms ease; }
.ui-st__send:disabled { opacity: 0.16; cursor: default; }
.ui-st__send:not(:disabled):active { transform: scale(0.94); }
.ui-st__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 6px 2px; font-size: 12px; line-height: 16px; color: var(--ui-st-muted); }
.ui-st__hint > span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.ui-st kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--ui-st-card); box-shadow: 0 0 0 1px var(--ui-st-line); font: inherit; font-size: 10.5px; color: var(--ui-st-text); }
.ui-st__compose[data-disabled] .ui-st__field { opacity: 0.6; cursor: default; }

@keyframes ui-st-spin { to { transform: rotate(360deg); } }
@keyframes ui-st-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ui-st-pulse { from { opacity: 0.45; transform: scale(0.6); } to { opacity: 0; transform: scale(1.8); } }
@keyframes ui-st-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes ui-st-land { 0%, 30% { background-color: var(--ui-st-accent-bg); box-shadow: inset 0 0 0 1px var(--ui-st-accent-bg); } }

/* Narrow containers: tighter padding */
@container (max-width: 380px) {
  /* The status moves under the title, so the title gets the full width */
  .ui-st__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; }
  .ui-st__spark { grid-row: 1; align-self: center; }
  .ui-st__heading { grid-column: 2; grid-row: 1; }
  .ui-st__state { grid-column: 2; grid-row: 2; justify-self: start; }
  .ui-st__head > .ui-st__icon-btn { grid-column: 3; grid-row: 1; }
    .ui-st__head { padding-left: 14px; }
  .ui-st__plan { padding-left: 14px; padding-right: 14px; }
}
@media (pointer: coarse) {
  .ui-st__icon-btn, .ui-st__send { width: 36px; height: 36px; }
  .ui-st__chip-btn, .ui-st__chip-x { height: 32px; }
  .ui-st__chip-x { width: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-st *, .ui-st *::before, .ui-st *::after { animation: none !important; transition: none !important; }
  .ui-st[data-status="running"] .ui-st__step[data-status="active"] .ui-st__step-title { background: none; color: var(--ui-st-ink); }
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html> */
:where(.dark, [data-theme="dark"]) .ui-st {
  --ui-st-tray: #111113;
  --ui-st-card: #19191b;
  --ui-st-ink: #ededed;
  --ui-st-text: #a1a1a1;
  --ui-st-muted: #8b8b92;
  --ui-st-faint: #5c5c63;
  --ui-st-line: #2a2a2e;
  --ui-st-rail: #3a3a40;
  --ui-st-hover: #2a2a2e;
  --ui-st-chip: #232326;
  --ui-st-accent: #5b8cff;
  --ui-st-accent-bg: rgba(91, 140, 255, 0.14);
  --ui-st-amber: #f5b638;
  --ui-st-green: #3ecf8e;
  --ui-st-on-ink: #19191b;
  --ui-st-ring: rgba(255, 255, 255, 0.3);
}
:where(.dark, [data-theme="dark"]) .ui-st__step-icon[data-status="done"] path { stroke: #19191b; }

.ui-tl {
  --ui-tl-ink: #171717;
  --ui-tl-text: #6b6b6b;
  --ui-tl-ray: #171717;
  --ui-tl-bg: #ffffff;
  --ui-tl-line: #e7e7e7;
  --ui-tl-shine: rgba(255, 255, 255, 0.82);
  --ui-tl-done: #171717;
  --ui-tl-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-tl-h: 34px;
  --ui-tl-font: 14px;
  --ui-tl-icon: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  height: var(--ui-tl-h);
  padding: 0 15px 0 12px;
  border-radius: 999px;
  background: var(--ui-tl-bg);
  box-shadow: inset 0 0 0 1px var(--ui-tl-line), 0 1px 2px rgba(0, 0, 0, 0.04);
  color: var(--ui-tl-text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--ui-tl-font);
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.006em;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}
.ui-tl[data-size="sm"] {
  --ui-tl-h: 28px;
  --ui-tl-font: 13px;
  --ui-tl-icon: 13px;
  gap: 7px;
  padding: 0 12px 0 10px;
}
.ui-tl[data-variant="plain"] {
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Spinner and check share one square and swap with a little scale */
.ui-tl__icon {
  position: relative;
  flex: none;
  width: var(--ui-tl-icon);
  height: var(--ui-tl-icon);
}
.ui-tl__icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 240ms ease, transform 420ms var(--ui-tl-ease);
}
.ui-tl__spinner line {
  stroke: var(--ui-tl-ray);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.18;
  animation: ui-tl-ray 800ms linear infinite;
}
.ui-tl__check {
  opacity: 0;
  transform: scale(0.6);
  fill: none;
  stroke: var(--ui-tl-done);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-tl__check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.ui-tl[data-done] .ui-tl__spinner {
  opacity: 0;
  transform: scale(0.6) rotate(-45deg);
}
.ui-tl[data-done] .ui-tl__check {
  opacity: 1;
  transform: none;
}
.ui-tl[data-done] .ui-tl__check path {
  animation: ui-tl-draw 360ms var(--ui-tl-ease) 120ms forwards;
}

/* The text box glides to the width of the incoming label; labels roll through it */
.ui-tl__text {
  position: relative;
  display: block;
  height: 1.3em;
  overflow: hidden;
  transition: width 460ms var(--ui-tl-ease);
}
.ui-tl__label {
  position: absolute;
  top: 0;
  left: 0;
  line-height: 1.3em;
  white-space: nowrap;
}
.ui-tl[data-done] .ui-tl__label {
  color: var(--ui-tl-ink);
}
.ui-tl__label--in {
  animation: ui-tl-in 460ms var(--ui-tl-ease) both;
}
.ui-tl__label--out {
  animation: ui-tl-out 320ms var(--ui-tl-ease) both;
}

/* A soft light sweeping over the label while it works */
.ui-tl__shine::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(90deg, transparent 38%, var(--ui-tl-shine) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: ui-tl-sweep 1.8s linear infinite;
  pointer-events: none;
}

@keyframes ui-tl-ray {
  0% { opacity: 1; }
  100% { opacity: 0.18; }
}
@keyframes ui-tl-in {
  from { opacity: 0; transform: translateY(70%); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes ui-tl-out {
  from { opacity: 1; transform: none; filter: none; }
  to { opacity: 0; transform: translateY(-70%); filter: blur(3px); }
}
@keyframes ui-tl-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ui-tl-sweep {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-tl *,
  .ui-tl *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .ui-tl__spinner line { opacity: 0.6; }
  .ui-tl__shine::after { display: none; }
  .ui-tl__check path { stroke-dashoffset: 0; }
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html> */
:where(.dark, [data-theme="dark"]) .ui-tl {
  --ui-tl-ink: #ededed;
  --ui-tl-text: #8f8f8f;
  --ui-tl-ray: #ededed;
  --ui-tl-bg: #161618;
  --ui-tl-line: rgba(255, 255, 255, 0.1);
  --ui-tl-shine: rgba(255, 255, 255, 0.95);
  --ui-tl-done: #ededed;
}

.ui-mdp {
  --ui-mdp-tray: #f0f0f0;
  --ui-mdp-card: #ffffff;
  --ui-mdp-line: #ececec;
  --ui-mdp-ink: #171717;
  --ui-mdp-text: #404040;
  --ui-mdp-muted: #8f8f8f;
  --ui-mdp-well: #f4f4f5;
  --ui-mdp-bar: #d4d4d9;
  --ui-mdp-bar-off: #e6e6ea;
  --ui-mdp-switch: #dcdce0;
  --ui-mdp-knob: #ffffff;
  --ui-mdp-focus: rgba(23, 23, 23, 0.22);
  --ui-mdp-ease: cubic-bezier(0.32, 0.72, 0.24, 1);
  position: relative;
  display: inline-block;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: var(--ui-mdp-text);
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.ui-mdp *, .ui-mdp *::before, .ui-mdp *::after { box-sizing: border-box; }
:where(.ui-mdp) button { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ui-mdp button:focus-visible, .ui-mdp__list:focus-visible { outline: 2px solid var(--ui-mdp-focus); outline-offset: 2px; }
.ui-mdp svg { display: block; flex: none; }
.ui-mdp b { font-weight: 500; color: var(--ui-mdp-ink); }
.ui-mdp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----- Trigger ----- */
.ui-mdp__trigger { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 30px; padding: 0 8px 0 6px; border-radius: 10px; font-weight: 500; color: var(--ui-mdp-ink); white-space: nowrap; transition: background-color 160ms ease; }
.ui-mdp__trigger:hover, .ui-mdp[data-open] .ui-mdp__trigger { background: var(--ui-mdp-well); }
.ui-mdp__trigger .ui-mdp__glyph { width: 18px; height: 18px; }
.ui-mdp__name { display: grid; min-width: 0; }
.ui-mdp__chevron { color: var(--ui-mdp-muted); transition: transform 300ms var(--ui-mdp-ease); }
.ui-mdp[data-open] .ui-mdp__chevron { transform: rotate(180deg); }
.ui-mdp__flag { display: grid; grid-template-columns: 0fr; margin-left: -7px; opacity: 0; color: var(--ui-mdp-muted); transition: grid-template-columns 360ms var(--ui-mdp-ease), margin 360ms var(--ui-mdp-ease), opacity 220ms ease; }
.ui-mdp__flag > span { min-width: 0; overflow: hidden; }
.ui-mdp__flag[data-on] { grid-template-columns: 1fr; margin-left: -3px; opacity: 1; transition: grid-template-columns 360ms var(--ui-mdp-ease), margin 360ms var(--ui-mdp-ease), opacity 280ms ease 80ms; }

.ui-mdp__glyph { display: grid; flex: none; place-items: center; width: 22px; height: 22px; overflow: hidden; border-radius: 6px; background: var(--ui-mdp-card); box-shadow: inset 0 0 0 1px var(--ui-mdp-line); font-size: 10.5px; font-weight: 600; line-height: 1; color: var(--ui-mdp-ink); }
.ui-mdp__glyph > svg, .ui-mdp__glyph > img { width: 12px; height: 12px; }

/* ----- Menu: unfolds softly from the trigger ----- */
.ui-mdp__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: min(400px, calc(100vw - 32px));
  container-type: inline-size;
  padding: 4px;
  border-radius: 20px;
  background: #1a1a1e; color: #f4f4f5;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.2);
  transform-origin: top left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 160ms ease, transform 220ms var(--ui-mdp-ease), visibility 0s linear 220ms;
}
.ui-mdp[data-align="end"] .ui-mdp__pop { left: auto; right: 0; transform-origin: top right; }
/* Model picker: dark popup (matches reference) */
.ui-mdp__pop {
  --ui-mdp-card: #232326;
  --ui-mdp-line: rgba(255,255,255,.08);
  --ui-mdp-ink: #f4f4f5;
  --ui-mdp-muted: #a1a1aa;
  --ui-mdp-well: rgba(255,255,255,.08);
  --ui-mdp-tray: #1a1a1e;
  --ui-mdp-focus: #5eead4;
}
.ui-mdp[data-side="top"] .ui-mdp__pop { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; transform: translateY(4px) scale(0.96); }
.ui-mdp[data-side="top"][data-align="end"] .ui-mdp__pop { transform-origin: bottom right; }
.ui-mdp[data-open] .ui-mdp__pop { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms ease, transform 320ms var(--ui-mdp-ease), visibility 0s; }

.ui-mdp__card { padding: 6px; border-radius: 16px; background: var(--ui-mdp-card); box-shadow: 0 0 0 1px var(--ui-mdp-line), 0 1px 2px rgba(0, 0, 0, 0.04); }
.ui-mdp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 24px; padding: 0 10px; font-size: 11px; line-height: 16px; color: var(--ui-mdp-muted); }
.ui-mdp__cols { display: grid; grid-template-columns: repeat(3, 34px); gap: 8px; }
.ui-mdp__cols > span { display: flex; justify-content: center; white-space: nowrap; }

/* ----- Rows ----- */
.ui-mdp__list { display: grid; gap: 1px; border-radius: 10px; }
.ui-mdp__option { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; cursor: pointer; transition: background-color 160ms ease, opacity 220ms ease; }
.ui-mdp__list[data-pointing] .ui-mdp__option[data-active] { background: var(--ui-mdp-well); }
.ui-mdp__list:focus-visible { outline: none; }
.ui-mdp__list:focus-visible .ui-mdp__option[data-active] { background: var(--ui-mdp-well); box-shadow: inset 0 0 0 1.5px var(--ui-mdp-focus); }
.ui-mdp__list[data-pointing] .ui-mdp__option:not([data-active]) { opacity: 0.5; }
.ui-mdp__text { display: grid; flex: 1; min-width: 0; }
.ui-mdp__title { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 500; color: var(--ui-mdp-ink); }
.ui-mdp__title-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-mdp__check { color: var(--ui-mdp-ink); animation: ui-mdp-pop 320ms var(--ui-mdp-ease) both; }
.ui-mdp__desc { overflow: hidden; font-size: 12px; line-height: 17px; color: var(--ui-mdp-muted); white-space: nowrap; text-overflow: ellipsis; }

/* Strength bars: five small segments each. The lit row fills them one after another */
.ui-mdp__bars { display: grid; flex: none; grid-template-columns: repeat(3, 34px); gap: 8px; }
.ui-mdp__meter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; height: 5px; }
.ui-mdp__seg { border-radius: 1.5px; background: var(--ui-mdp-bar-off); transition: background-color 180ms ease, transform 260ms var(--ui-mdp-ease); }
.ui-mdp__seg[data-on] { background: var(--ui-mdp-bar); }
.ui-mdp__option[data-lit] .ui-mdp__seg[data-on] { background: var(--ui-mdp-ink); transition-delay: calc(var(--c) * 70ms + var(--s) * 45ms); animation: ui-mdp-fill 360ms var(--ui-mdp-ease) both; animation-delay: calc(var(--c) * 70ms + var(--s) * 45ms); }
.ui-mdp__varies { flex: none; width: 118px; font-size: 11.5px; color: var(--ui-mdp-muted); text-align: center; }

/* ----- Switches and effort ----- */
.ui-mdp__settings { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ui-mdp-line); }
.ui-mdp__toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 10px; color: var(--ui-mdp-text); transition: background-color 160ms ease; }
.ui-mdp__toggle:hover { background: var(--ui-mdp-well); }
.ui-mdp__toggle-icon { display: grid; flex: none; place-items: center; width: 22px; color: var(--ui-mdp-muted); transition: color 200ms ease; }
.ui-mdp__toggle[aria-checked="true"] .ui-mdp__toggle-icon { color: var(--ui-mdp-ink); }
.ui-mdp__toggle-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ui-mdp__switch { position: relative; flex: none; width: 28px; height: 16px; border-radius: 8px; background: var(--ui-mdp-switch); transition: background-color 220ms ease; }
.ui-mdp__switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-mdp-knob); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transition: transform 280ms var(--ui-mdp-ease); }
.ui-mdp__toggle[aria-checked="true"] .ui-mdp__switch { background: var(--ui-mdp-ink); }
.ui-mdp__toggle[aria-checked="true"] .ui-mdp__switch::after { transform: translateX(12px); }

.ui-mdp__fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms var(--ui-mdp-ease), opacity 220ms ease; }
.ui-mdp__fold[data-open] { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 420ms var(--ui-mdp-ease), opacity 320ms ease 100ms; }
.ui-mdp__clip { min-height: 0; overflow: hidden; }
.ui-mdp__effort { display: flex; align-items: center; gap: 10px; padding: 2px 10px 6px 42px; }
.ui-mdp__effort-label { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ui-mdp-muted); }
.ui-mdp__segmented { position: relative; display: grid; flex: none; grid-template-columns: repeat(5, 50px); padding: 2px; border-radius: 9px; background: var(--ui-mdp-well); box-shadow: inset 0 0 0 1px var(--ui-mdp-line); }
.ui-mdp__thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: 50px; border-radius: 7px; background: var(--ui-mdp-card); box-shadow: 0 0 0 1px var(--ui-mdp-line), 0 1px 2px rgba(0, 0, 0, 0.06); transform: translateX(calc(var(--i) * 100%)); transition: transform 320ms var(--ui-mdp-ease); }
.ui-mdp__seg-btn { position: relative; height: 24px; border-radius: 7px; font-size: 12px; font-weight: 500; color: var(--ui-mdp-muted); text-align: center !important; transition: color 200ms ease; }
.ui-mdp__seg-btn[aria-checked="true"] { color: var(--ui-mdp-ink); }
.ui-mdp__seg-btn:hover { color: var(--ui-mdp-ink); }

/* ----- Tray ----- */
.ui-mdp__foot { display: flex; align-items: center; gap: 8px; height: 38px; padding: 4px 8px 0 12px; }
.ui-mdp__caption { flex: 1; min-width: 0; overflow: hidden; font-size: 12.5px; color: var(--ui-mdp-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-mdp__dot { color: var(--ui-mdp-muted); }
.ui-mdp__swap { display: grid; min-width: 0; }
.ui-mdp__swap-item { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; animation: ui-mdp-swap-in 320ms ease both; }
.ui-mdp__swap-item[data-out] { animation: ui-mdp-swap-out 220ms ease both; }
.ui-mdp__keys { display: flex; flex: none; gap: 3px; }
.ui-mdp__keys kbd { display: grid; place-items: center; min-width: 20px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--ui-mdp-card); box-shadow: 0 0 0 1px var(--ui-mdp-line); font-family: inherit; font-size: 10.5px; line-height: 1; color: var(--ui-mdp-muted); }

@keyframes ui-mdp-swap-in { from { opacity: 0; filter: blur(2px); } }
@keyframes ui-mdp-swap-out { from { opacity: 1; } to { opacity: 0; filter: blur(2px); } }
@keyframes ui-mdp-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes ui-mdp-fill { 0% { transform: scaleY(1); } 45% { transform: scaleY(1.6); } 100% { transform: scaleY(1); } }

/* Narrow menus: the bars move closer and the glyphs in the rows give way */
@container (max-width: 300px) {
  .ui-mdp__option .ui-mdp__glyph { display: none; }
  .ui-mdp__cols, .ui-mdp__bars { grid-template-columns: repeat(3, 30px); gap: 6px; }
  .ui-mdp__varies { width: 102px; }
  .ui-mdp__keys { display: none; }
  .ui-mdp__effort { padding-left: 10px; }
  .ui-mdp__segmented { grid-template-columns: repeat(5, 46px); }
  .ui-mdp__thumb { width: 46px; }
}

@media (pointer: coarse) {
  .ui-mdp__trigger { height: 36px; }
  .ui-mdp__option { min-height: 54px; }
  .ui-mdp__toggle { height: 42px; }
  .ui-mdp__seg-btn { height: 30px; }
  .ui-mdp__keys { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-mdp *, .ui-mdp *::before, .ui-mdp *::after { animation: none !important; transition: none !important; }
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html> */
:where(.dark, [data-theme="dark"]) .ui-mdp {
  --ui-mdp-tray: #111113;
  --ui-mdp-card: #19191b;
  --ui-mdp-line: #2a2a2e;
  --ui-mdp-ink: #ededed;
  --ui-mdp-text: #c8c8cc;
  --ui-mdp-muted: #8b8b92;
  --ui-mdp-well: #222225;
  --ui-mdp-bar: #55555c;
  --ui-mdp-bar-off: #303035;
  --ui-mdp-switch: #3a3a40;
  --ui-mdp-knob: #ededed;
  --ui-mdp-focus: rgba(255, 255, 255, 0.3);
}
:where(.dark, [data-theme="dark"]) .ui-mdp__pop { box-shadow: 0 0 0 1px #222225, 0 12px 32px -12px rgba(0, 0, 0, 0.6); }
:where(.dark, [data-theme="dark"]) .ui-mdp__toggle[aria-checked="true"] .ui-mdp__switch::after { background: #19191b; }

.ui-ns {
  --ui-ns-card: #ffffff;
  --ui-ns-line: #e5e5e5;
  --ui-ns-ink: #171717;
  --ui-ns-muted: #737373;
  --ui-ns-art: #e3e3e3;
  --ui-ns-accent: #2f6bff;
  --ui-ns-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 380px;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ui-ns-ink);
  -webkit-font-smoothing: antialiased;
  transition: height 460ms var(--ui-ns-ease);
}
.ui-ns *, .ui-ns *::before, .ui-ns *::after { box-sizing: border-box; }

.ui-ns__card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  background: var(--ui-ns-card);
  border: 1px solid var(--ui-ns-line);
  border-radius: 20px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.035);
  transform-origin: 50% 100%;
  transition:
    transform 460ms var(--ui-ns-ease),
    opacity 300ms ease,
    box-shadow 300ms ease;
}
/* Cards behind show only their edge */
.ui-ns__card > * { transition: opacity 260ms ease; }
.ui-ns__card:not([data-depth="0"]) > * { opacity: 0; }
.ui-ns__card[data-leaving] {
  opacity: 0;
  transform: translateX(40px) scale(0.98) !important;
  transition: transform 320ms var(--ui-ns-ease), opacity 240ms ease;
}

.ui-ns__pattern {
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 160px;
  stroke: var(--ui-ns-art);
  stroke-width: 1;
  pointer-events: none;
  /* Only the top-right corner, fading out towards the text */
  -webkit-mask-image: radial-gradient(120% 110% at 100% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(120% 110% at 100% 0%, #000 20%, transparent 70%);
}
.ui-ns__dot { fill: #d4d4d4; stroke: none; }
.ui-ns__fill { fill: #f5f5f5; }

.ui-ns__body {
  position: relative;
  padding: 18px 20px 20px;
}
.ui-ns__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  margin-bottom: 14px;
}
.ui-ns__badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ui-ns-line);
  font-size: 11px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #525252;
}
.ui-ns__close {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -2px -6px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ui-ns-muted);
  cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.ui-ns__close:hover { background: rgba(0, 0, 0, 0.05); color: var(--ui-ns-ink); }
.ui-ns__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: -0.01em;
}
.ui-ns__text {
  margin: 6px 0 0;
  max-width: 34ch;
  font-size: 14px;
  line-height: 21px;
  color: var(--ui-ns-muted);
}
.ui-ns__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  margin-top: 16px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--ui-ns-line), 0 1px 2px rgba(0, 0, 0, 0.04);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ui-ns-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}
.ui-ns__btn:hover { background: #f7f7f7; }
.ui-ns__btn:active { transform: scale(0.98); }
.ui-ns__btn svg { color: var(--ui-ns-muted); }
.ui-ns button:focus-visible,
.ui-ns a:focus-visible { outline: 2px solid var(--ui-ns-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .ui-ns, .ui-ns__card, .ui-ns__card > * { transition: none; }
}

/* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. <html> */
:where(.dark, [data-theme="dark"]) .ui-ns {
  --ui-ns-card: #232326;
  --ui-ns-line: rgba(255, 255, 255, 0.1);
  --ui-ns-ink: #ededed;
  --ui-ns-muted: #8f8f8f;
  --ui-ns-art: rgba(255, 255, 255, 0.08);
}
:where(.dark, [data-theme="dark"]) .ui-ns__card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.35);
}
:where(.dark, [data-theme="dark"]) .ui-ns__dot { fill: rgba(255, 255, 255, 0.22); }
:where(.dark, [data-theme="dark"]) .ui-ns__fill { fill: rgba(255, 255, 255, 0.04); }
:where(.dark, [data-theme="dark"]) .ui-ns__badge { background: #2a2a2d; color: #c4c4c4; }
:where(.dark, [data-theme="dark"]) .ui-ns__close:hover { background: rgba(255, 255, 255, 0.06); }
:where(.dark, [data-theme="dark"]) .ui-ns__btn {
  background: #2a2a2d;
  box-shadow: 0 0 0 1px var(--ui-ns-line), 0 1px 2px rgba(0, 0, 0, 0.4);
}
:where(.dark, [data-theme="dark"]) .ui-ns__btn:hover { background: #313135; }

/* Approval button (Chat Composer approval flow, adapted to fixed sizes) */
.ui-appr {
  --ui-appr-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  display: none;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, padding 480ms var(--ui-appr-ease), opacity 200ms ease, transform 280ms var(--ui-appr-ease);
}
/* only visible when an approval is actually needed */
.ui-appr[data-show] {
  display: inline-flex;
  animation: ui-appr-in 280ms var(--ui-appr-ease);
}
@keyframes ui-appr-in {
  from { opacity: 0; transform: translateY(4px) scale(.96); }
  to { opacity: 1; transform: none; }
}
.ui-appr:hover { background: var(--chip); }
.ui-appr__wash {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(244, 73, 0, 0.1);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}
.ui-appr__icon { position: relative; display: grid; place-items: center; width: 18px; height: 18px; flex: none; }
.ui-appr__icon svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 200ms ease-out, transform 360ms var(--ui-appr-ease); }
.ui-appr__hand { transform-origin: 50% 90%; color: var(--ink); }
.ui-appr__shield { opacity: 0; transform: scale(0.4); }
.ui-appr__text { position: relative; display: grid; }
.ui-appr__text > span { grid-area: 1 / 1; line-height: 20px; }
.ui-appr__request { position: relative; transition: opacity 200ms ease-out, filter 200ms ease-out; }
.ui-appr__request::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(90deg, transparent 38%, rgba(255,255,255,0.82) 50%, transparent 62%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
  pointer-events: none;
}
.ui-appr__granted { color: #f44900; opacity: 0; filter: blur(8px); transition: opacity 200ms ease-out, filter 200ms ease-out; }
/* loading: hand waves, shimmer sweeps twice */
.ui-appr[data-state="loading"] { cursor: wait; }
.ui-appr[data-state="loading"] .ui-appr__request::after { opacity: 1; animation: ui-appr-sweep 650ms linear 2 both; }
.ui-appr[data-state="loading"] .ui-appr__hand { animation: ui-appr-wave 650ms ease-in-out 2; }
@keyframes ui-appr-wave {
  0%, 76%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(16deg); }
  38% { transform: rotate(-10deg); }
  58% { transform: rotate(7deg); }
}
@keyframes ui-appr-sweep { from { background-position: 100% 0; } to { background-position: 0% 0; } }
/* done: pill morphs to "Unrestricted access" */
.ui-appr[data-state="done"] { cursor: default; }
.ui-appr[data-state="done"] .ui-appr__wash { opacity: 1; transition: opacity 300ms ease-out; }
.ui-appr[data-state="done"] .ui-appr__hand { opacity: 0; transform: scale(0.4) rotate(-14deg); }
.ui-appr[data-state="done"] .ui-appr__shield { opacity: 1; transform: none; transition: opacity 220ms ease-out 90ms, transform 520ms cubic-bezier(0.34, 1.5, 0.64, 1) 90ms; }
.ui-appr[data-state="done"] .ui-appr__request { opacity: 0; filter: blur(8px); }
.ui-appr[data-state="done"] .ui-appr__granted { opacity: 1; filter: blur(0); transition: opacity 320ms ease-out 90ms, filter 320ms ease-out 90ms; }
/* attention pulse when approval is needed */
.ui-appr[data-attn="true"] { animation: ui-appr-attn 900ms ease-in-out 3; }
@keyframes ui-appr-attn { 50% { background: rgba(244, 73, 0, 0.14); } }
@media (prefers-reduced-motion: reduce) {
  .ui-appr__hand, .ui-appr__request::after { animation: none !important; }
}
/* Notification stack host */
#nsStack { position: fixed; right: 16px; bottom: 16px; z-index: 200; pointer-events: none; width: min(380px, calc(100vw - 32px)); }
#nsStack .ui-ns { pointer-events: auto; }
@media (max-width: 480px) { #nsStack { left: 16px; right: 16px; } #nsStack .ui-ns { max-width: none; } }
/* affectUI chat components: full-width wrappers inside thread messages */
.ui-as-msg > [data-loader], .ui-as-msg > [data-think], .ui-as-msg > [data-answer], .ui-as-msg > [data-steer] { width: 100%; min-width: 0; }
@media (max-width: 520px) {
  .ui-appr { padding: 0 6px; gap: 0; }
  .ui-appr__text { display: none; }
}

/* Effort picker (React Bits prompt-bar style) */
.ui-eff { position: relative; display: inline-block; }
.ui-eff__badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px; padding: 0 8px;
  border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 12px; font-weight: 500; color: var(--ink);
  cursor: pointer; white-space: nowrap;
  transition: background-color 150ms ease, color 200ms ease;
}
.ui-eff__badge:hover { background: var(--chip); }
.ui-eff__badge[data-max] { color: #b39dff; }
.ui-eff__badge svg { flex: none; }
.ui-eff__pop {
  position: absolute; z-index: 40;
  bottom: calc(100% + 10px); left: 50%;
  width: 280px; max-width: calc(100vw - 32px); padding: 16px;
  border-radius: 16px; background: #1a1a1e; color: #f4f4f5;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.2);
  transform-origin: bottom center;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(6px) scale(.97);
  transition: opacity 160ms ease, transform 240ms cubic-bezier(.22,1,.36,1), visibility 0s linear 240ms;
}
.ui-eff[data-open] .ui-eff__pop { opacity: 1; visibility: visible; transform: translateX(-50%); transition: opacity 160ms ease, transform 240ms cubic-bezier(.22,1,.36,1), visibility 0s; }
/* pointer arrow at bottom */
.ui-eff__pointer {
  display: block;
  position: absolute; bottom: -6px; left: 50%; margin-left: -6px;
  width: 12px; height: 12px; background: #1a1a1e;
  transform: rotate(45deg); border-radius: 2px;
}
/* description: "Max for deep thinking..." */
.ui-eff__desc { font-size: 13px; line-height: 19px; color: #a1a1aa; margin-bottom: 14px; }
.ui-eff__desc-label { font-weight: 600; color: #f4f4f5; }
.ui-eff__desc-text { color: #a1a1aa; }
/* slider track */
.ui-eff__track {
  position: relative; height: 28px; border-radius: 14px;
  background: rgba(255,255,255,.08); cursor: pointer; outline: none;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.ui-eff__track:focus-visible { box-shadow: 0 0 0 2px #5eead4; }
.ui-eff__fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--ui-eff-fill, 25%);
  border-radius: 14px; background: rgba(94,234,212,.35);
  transition: width 220ms cubic-bezier(.22,1,.36,1), background-color 300ms ease;
}
.ui-eff__thumb {
  position: absolute; top: 3px; left: var(--ui-eff-x, 25%);
  width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: left 220ms cubic-bezier(.22,1,.36,1), background-color 300ms ease;
}
.ui-eff[data-max] .ui-eff__fill { background: rgba(179,157,255,.4); }
.ui-eff[data-max] .ui-eff__thumb { background: #b39dff; }
/* bottom tabs */
.ui-eff__tabs {
  display: flex; gap: 4px; margin-top: 14px;
  background: rgba(255,255,255,.06); border-radius: 10px; padding: 3px;
}
.ui-eff__tab {
  flex: 1; padding: 6px 0; border-radius: 7px;
  font-size: 12px; font-weight: 500; color: #a1a1aa;
  text-align: center; cursor: pointer; border: 0; background: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.ui-eff__tab:hover { color: #f4f4f5; }
.ui-eff__tab[data-on] { background: rgba(255,255,255,.12); color: #f4f4f5; }
/* light mode: keep dark popup (matches reference) */
/* busy: send morphs to stop */
.ui-as-send { position: relative; }
.ui-as-send__glyph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.ui-as-send__arrow, .ui-as-send__stop { position: absolute; display: grid; place-items: center; transition: opacity 180ms ease, transform 260ms cubic-bezier(.34,1.4,.64,1); }
.ui-as-send__stop { opacity: 0; transform: scale(.4) rotate(-90deg); }
.ui-as-composer[data-busy] .ui-as-send__arrow { opacity: 0; transform: scale(.4) rotate(90deg); }
.ui-as-composer[data-busy] .ui-as-send__stop { opacity: 1; transform: none; }
.ui-as-composer[data-busy] .ui-as-send { background: var(--ink); color: var(--card); }
/* max-effort spark canvas around composer */
.ui-as-composer { position: relative; }
#effSpark {
  position: absolute; inset: -14px; z-index: 0; pointer-events: none;
  width: calc(100% + 28px); height: calc(100% + 28px);
}
/* keep card content above the spark canvas */
.ui-as-composer__card > *:not(#effSpark):not(.ui-as-viewer) {
  position: relative;
  z-index: 1;
}
.ui-as-composer__card, .ui-as-composer__bar { position: relative; z-index: 1; }
@media (max-width: 520px) {
  .ui-eff__pop { left: auto; right: 0; transform-origin: bottom right; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-eff__fill, .ui-eff__thumb, .ui-as-send__arrow, .ui-as-send__stop { transition: none !important; }
}

/* ============ AI activity pill (.ui-act) — Muse-style ============ */
.ui-as-start { position: relative; }
.ui-act {
  position: absolute; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  opacity: 0; pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
  max-width: calc(100% - 32px);
}
/* Center: large, when chat is empty */
.ui-act[data-pos="center"] {
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.92);
  flex-direction: column; gap: 12px;
  padding: 24px 32px;
  border-radius: 24px;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.08);
  text-align: center;
}
.ui-act[data-pos="center"][data-show] { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.ui-act[data-pos="center"] .ui-act__avatar { width: 96px; height: 96px; }
.ui-act[data-pos="center"] .ui-act__avatar > span { transform: scale(1); }
.ui-act[data-pos="center"] .ui-act__meta { align-items: center; }
.ui-act[data-pos="center"] .ui-act__name { font-size: 15px; }
.ui-act[data-pos="center"] .ui-act__status { font-size: 13px; }
/* Top: Muse app style — large circular avatar with name pill below */
.ui-act[data-pos="top"] {
  top: 20px; left: 50%; transform: translateX(-50%) translateY(-6px);
  flex-direction: column; gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.ui-act[data-pos="top"][data-show] { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.ui-act[data-pos="top"] .ui-act__avatar {
  width: 120px; height: 120px;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}
.ui-act[data-pos="top"] .ui-act__avatar > span { transform: scale(1.25); }
.ui-act[data-pos="top"] .ui-act__meta { align-items: center; gap: 6px; }
.ui-act[data-pos="top"] .ui-act__name {
  font-size: 16px; font-weight: 600;
  color: #fff;
  background: rgba(40,40,42,.85);
  padding: 8px 20px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.ui-act[data-pos="top"] .ui-act__status {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  background: rgba(40,40,42,.6);
  padding: 4px 12px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
/* Push chat content down when the top avatar is showing */
.ui-as-start:has(.ui-act[data-pos="top"][data-show]) .ui-as-start__thread {
  padding-top: 240px;
}
.ui-act__avatar {
  flex: none;
  border-radius: 50%; overflow: visible;
  display: flex; align-items: center; justify-content: center;
}
.ui-act__avatar > span { transform-origin: center; }
.ui-act__meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.ui-act__name { font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.ui-act__status { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(.dark, [data-theme="dark"]) .ui-act { box-shadow: 0 8px 24px -8px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.3); }

/* ============ Settings panel (.ui-set) ============ */
.ui-set {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,.4);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.ui-set[data-show] { opacity: 1; pointer-events: auto; }
.ui-set__card {
  width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; overflow-x: hidden;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,.3);
  transform: translateY(10px) scale(.98); transition: transform 220ms ease;
}
.ui-set[data-show] .ui-set__card { transform: none; }
.ui-set__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 0;
}
.ui-set__title { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin: 0; }
.ui-set__close {
  width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--chip); color: var(--muted); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ui-set__close:hover { background: var(--chip-hover); color: var(--ink); }
.ui-set__body { padding: 8px 20px 22px; }
.ui-set__section { margin-top: 18px; }
.ui-set__label { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.ui-set__stage {
  display: flex; align-items: center; justify-content: center;
  min-height: 190px; border-radius: 14px;
  background: var(--tray);
  margin-bottom: 4px;
}
.ui-set__row { display: flex; gap: 12px; flex-wrap: wrap; }
.ui-set__shape, .ui-set__state {
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 10px 12px 8px; min-width: 78px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ui-set__shape:hover, .ui-set__state:hover { border-color: var(--accent); }
.ui-set__shape[data-on], .ui-set__state[data-on] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ui-set__shape span:last-child, .ui-set__state span:last-child { font-size: 11px; color: var(--muted); }
.ui-set__shape[data-on] span:last-child, .ui-set__state[data-on] span:last-child { color: var(--ink); font-weight: 600; }
.ui-set__swrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ui-set__swname { font-size: 13px; color: var(--ink); width: 52px; flex: none; }
.ui-set__swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-set__sw {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent; outline: 1px solid var(--line); outline-offset: 1px;
  padding: 0;
}
.ui-set__sw[data-on] { border-color: var(--card); outline: 2px solid var(--accent); }
.ui-set__custom { position: relative; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; outline: 1px dashed var(--line); outline-offset: 1px; cursor: pointer; flex: none; }
.ui-set__custom input { position: absolute; inset: -6px; width: 40px; height: 40px; cursor: pointer; }
.ui-set__seg { display: flex; gap: 6px; flex-wrap: wrap; }
.ui-set__segbtn {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 10px; padding: 7px 14px; font-size: 13px; cursor: pointer;
}
.ui-set__segbtn[data-on] { background: var(--ink); color: var(--card); border-color: var(--ink); font-weight: 600; }
.ui-set__foot { display: flex; justify-content: flex-end; margin-top: 20px; }
.ui-set__reset {
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  border-radius: 10px; padding: 8px 16px; font-size: 13px; cursor: pointer;
}
.ui-set__reset:hover { color: var(--ink); border-color: var(--muted); }
.ui-set__hint { font-size: 12px; color: var(--muted); margin: 6px 0 0; }


/* ============ API Keys section (Settings, 2026-10-20) ============
   Owner-only provider keys, stored in browser localStorage (never in code). */
.ui-set__keys { display: flex; flex-direction: column; gap: 8px; }
.ui-set__keyrow {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--line); background: var(--card); border-radius: 12px;
  padding: 8px 10px;
}
.ui-set__keyrow[data-has] { border-color: var(--accent); }
.ui-set__keyname { font-size: 13px; font-weight: 600; color: var(--ink); width: 92px; flex: none; }
.ui-set__keydot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--muted); opacity: .5;
}
.ui-set__keyrow[data-has] .ui-set__keydot { background: #10b981; opacity: 1; }
.ui-set__keyinput {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink);
  font-size: 13px; font-family: ui-monospace, monospace; outline: none;
}
.ui-set__keyinput::placeholder { color: var(--muted); opacity: .7; }
.ui-set__keysave {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; flex: none;
}
.ui-set__keysave:hover { border-color: var(--accent); }
.ui-set__keyclear {
  border: 0; background: transparent; color: var(--muted);
  font-size: 12px; cursor: pointer; padding: 6px 4px; flex: none;
}
.ui-set__keyclear:hover { color: #f43f5e; }
.ui-set__keynote { font-size: 11px; color: var(--muted); }

/* ============ Send/voice swap (ChatGPT logic, 2026-10-20) ============
   The send slot doubles as the voice button: empty field -> teal voice
   button (opens voice mode); typed text -> teal send button. */
.ui-as-send__voice { position: absolute; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity 180ms ease, transform 260ms cubic-bezier(.34,1.4,.64,1); }
.ui-as-send[data-mode="voice"], .ui-as-send[data-mode="send"] { background: #14b8a6; color: #fff; }
.ui-as-send[data-mode="voice"] .ui-as-send__voice { opacity: 1; transform: none; }
.ui-as-send[data-mode="voice"] .ui-as-send__arrow { opacity: 0; transform: scale(.4); }
.ui-as-send[data-mode="send"] .ui-as-send__arrow { opacity: 1; transform: none; }
.ui-as-send[data-mode="send"] .ui-as-send__voice { opacity: 0; transform: scale(.4); }
/* busy (stop) state still wins over both modes */
.ui-as-composer[data-busy] .ui-as-send { background: var(--ink); color: var(--card); }
.ui-as-composer[data-busy] .ui-as-send__voice { opacity: 0; transform: scale(.4); }

/* ============ Voice mode (ChatGPT-style, 2026-10-20) ============ */
.ui-vx { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; background: #000; color: #fff; }
.ui-vx[hidden] { display: none; }
/* the overlay lives outside .ui-as, so reset native button faces explicitly
   (scoped to non-colored buttons so the teal mic/send keep their fill) */
.ui-vx__close, .ui-vx__gear, .ui-vx__srow, .ui-vx__langlist button, .ui-vx__sheethead button { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.ui-vx__mic, .ui-vx__send { appearance: none; -webkit-appearance: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.ui-vx__close { position: absolute; top: 14px; right: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; display: grid; place-items: center; }
.ui-vx__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; min-height: 0; }
.ui-vx__orb { width: 220px; height: 220px; }
.ui-vx__status { font-size: 15px; color: rgba(255,255,255,.65); text-align: center; }
.ui-vx__transcript { font-size: 17px; color: #fff; text-align: center; max-width: 520px; min-height: 26px; }
.ui-vx__dock { padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.ui-vx__bar { display: flex; align-items: center; gap: 8px; background: #1c1c1e; border-radius: 999px; padding: 6px 6px 6px 18px; }
.ui-vx__bar input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font-size: 15px; }
.ui-vx__bar input::placeholder { color: rgba(255,255,255,.4); }
.ui-vx__send { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #14b8a6; color: #fff; display: grid; place-items: center; }
.ui-vx__send svg { width: 17px; height: 17px; }
.ui-vx__row { display: flex; align-items: center; justify-content: center; gap: 22px; }
.ui-vx__mic { width: 64px; height: 64px; border-radius: 50%; background: #14b8a6; color: #fff; display: grid; place-items: center; box-shadow: 0 0 32px rgba(20,184,166,.45); }
.ui-vx__mic svg { width: 26px; height: 26px; }
.ui-vx__mic[data-on] { animation: ui-vx-pulse 1.2s ease-in-out infinite; }
@keyframes ui-vx-pulse { 50% { box-shadow: 0 0 0 14px rgba(20,184,166,.18), 0 0 32px rgba(20,184,166,.45); } }
.ui-vx__gear { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; }
.ui-vx__gear svg { width: 22px; height: 22px; }
.ui-vx__sheet { position: absolute; inset: auto 0 0 0; z-index: 4; display: flex; justify-content: center; pointer-events: none; }
.ui-vx__sheet[hidden] { display: none; }
.ui-vx__sheetcard { pointer-events: auto; width: min(560px, 100%); background: #1c1c1e; border-radius: 20px 20px 0 0; padding: 10px 18px calc(22px + env(safe-area-inset-bottom, 0px)); animation: ui-vx-up 240ms ease-out; }
@keyframes ui-vx-up { from { transform: translateY(40px); opacity: 0; } }
.ui-vx__grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 2px auto 10px; }
.ui-vx__sheethead { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 650; margin-bottom: 6px; }
.ui-vx__sheethead button { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; font-size: 13px; }
.ui-vx__srow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 2px; font-size: 15px; color: #fff; border-top: 1px solid rgba(255,255,255,.08); text-align: left; }
.ui-vx__slabel { flex: 1; }
.ui-vx__sval { color: rgba(255,255,255,.55); }
.ui-vx__schev { color: rgba(255,255,255,.4); font-size: 18px; }
.ui-vx__langlist { display: flex; gap: 8px; padding: 2px 2px 12px; }
.ui-vx__langlist[hidden] { display: none; }
.ui-vx__langlist button { flex: 1; padding: 10px 0; border-radius: 12px; background: rgba(255,255,255,.08); color: #fff; font-size: 14px; }
.ui-vx__langlist button[data-on] { background: #14b8a6; color: #042f2b; font-weight: 650; }
.ui-vx__toast { position: absolute; left: 50%; bottom: 120px; transform: translateX(-50%); background: rgba(28,28,30,.95); color: #fff; font-size: 13.5px; padding: 10px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity 200ms ease; white-space: nowrap; }
.ui-vx__toast[data-show] { opacity: 1; }

/* ============ Settings: color lab ============ */
.ui-set__swrow { flex-wrap: wrap; }
.ui-set__labbtn {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex: none;
  border: 1px solid var(--line); background: var(--card); font-size: 14px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.ui-set__labbtn:hover { border-color: var(--accent); }
.ui-set__lab {
  /* Full width, edge to edge (her note 2026-10-20: "gilid mo pa rito" — the
     old 62px indent left a dead gap at the left of the editor) */
  flex: 0 1 100%; margin: 4px 0 6px; min-width: 0;
  background: var(--tray); border-radius: 12px; padding: 12px 14px;
}
.ui-set__labgrid { display: flex; flex-direction: column; gap: 8px; }
.ui-set__labgrid label {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; color: var(--muted); width: 100%;
}
.ui-set__labgrid input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
.ui-set__labhex { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ui-set__labprev {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  border: 1px solid var(--line);
}
.ui-set__labhex input[type="text"] {
  flex: 1; height: 34px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--ink); font-size: 13px; font-family: monospace;
  padding: 0 12px; outline: none;
}
.ui-set__labhex input[type="text"]:focus { border-color: var(--accent); }

/* Mobile composer fix (2026-10-20): on phones the toolbar overflowed — the
   model name was ellipsized ("Auto" -> "A..") and the thinking flag overlapped
   it. Mobile only (<=520px); the desktop layout is untouched.
   1) The flag's [hidden] attribute was overridden by its own display:grid rule,
      so the bulb always rendered and stole width beside the name.
   2) The model picker may not shrink; spacing elsewhere compacts instead,
      and in chat phase the composer uses the full phone width. */
@media (max-width: 520px) {
  .ui-mdp__flag[hidden] { display: none; }
  #modelAnchor { flex: none; }
  .ui-mdp__trigger { padding: 0 4px; gap: 4px; font-size: 13px; }
  .ui-mdp__name, .ui-mdp__swap, .ui-mdp__swap-item { overflow: visible; text-overflow: clip; }
  .ui-as-composer__bar { gap: 1px; }
  .ui-as-composer__end { gap: 1px; flex: none; }
  .ui-as-ghost { padding: 0 4px; gap: 4px; }
  .ui-eff__badge { padding: 0 4px; }
  .ui-as-composer__bar .ui-as-icon-btn { width: 26px; height: 26px; }
  .ui-as-send { margin-left: 0; margin-right: 2px; width: 28px; height: 28px; max-width: 28px; max-height: 28px; }
  .ui-as-composer__card { padding-right: 14px; }
  .ui-as-start[data-phase="chat"] .ui-as-start__composer { width: calc(100% - 32px); }
  /* model popover: allow vertical shrink on mobile so the clamp keeps it on
     screen — the model list scrolls instead of sliding off the top edge */
  .ui-mdp__pop { display: flex; flex-direction: column; max-height: 70vh; }
  .ui-mdp__card { display: flex; flex-direction: column; min-height: 0; }
  .ui-mdp__list { overflow-y: auto; min-height: 0; max-height: 45vh; }
}