/* ============================================================
   EDUSION — iOS layer for /app and the sign-in pages
   Loaded after app.css / auth.css (a11y.css still comes last, so its contrast themes win).
   iOS is the reference for feel and structure: system font, type scale, springs,
   translucent bars, grouped inset lists, bottom sheets, a tab bar on phones.
   Edusion keeps its own accent, mark and voice.
   Tokens (type scale, springs, materials) live in base.css.
   ============================================================ */

/* ---------------------------------------------------------------- theme hooks */
html[data-a11y-contrast='dark'] {
  --material-bar: rgba(17, 21, 27, 0.86);
  --material-sheet: rgba(23, 27, 34, 0.92);
  --grouped-bg: #0e1116;
  --grouped-cell: #171b22;
  --separator: rgba(255, 255, 255, 0.12);
  --fill-segment: rgba(255, 255, 255, 0.1);
}
/* high contrast: solid surfaces and strong edges, no blur */
html[data-a11y-contrast='high'] {
  --material-bar: #ffffff;
  --material-sheet: #ffffff;
  --material-blur: none;
  --grouped-bg: #f1f2f4;
  --grouped-cell: #ffffff;
  --separator: rgba(0, 0, 0, 0.55);
  --fill-segment: rgba(0, 0, 0, 0.07);
}
html.lite[data-a11y-contrast='dark'] {
  --material-bar: #11151b;
  --material-sheet: #171b22;
}
@media (prefers-reduced-transparency: reduce) {
  html[data-a11y-contrast='dark'] {
    --material-bar: #11151b;
    --material-sheet: #171b22;
  }
}

/* ---------------------------------------------------------------- press feedback
   shrink to 97% and dim a little while pressed; spring back on release */
:is(.ws-icon-btn, .ghost-btn, .regen-btn, .listen-btn, .seg button, .qz-opt, .mini-drop,
  .ws-history-item, .ws-avatar, .ch-sug button, .mm-actions > button, .mm-view > button, .ws-src__x,
  .ws-history-item__btn, .ch-form .icon-btn) {
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), opacity 0.2s linear, background-color 0.18s linear,
    color 0.18s linear, border-color 0.18s linear, box-shadow 0.3s var(--ease-out);
}
:is(.ws-icon-btn, .ghost-btn, .regen-btn, .listen-btn, .seg button, .qz-opt, .mini-drop,
  .ws-history-item, .ws-avatar, .ch-sug button, .mm-actions > button, .mm-view > button, .ws-src__x,
  .ws-history-item__btn, .ch-form .icon-btn):active:not(:disabled):not([aria-disabled='true']) {
  transform: scale(0.97);
  opacity: 0.8;
  transition-duration: 0.08s;
}
.ws-icon-btn:active:not(:disabled),
.ws-src__x:active,
.ws-history-item__btn:active {
  transform: scale(0.9);
}
.ghost-btn:hover:not([disabled]),
.qz-opt:hover:not([disabled]):not([aria-disabled='true']) {
  transform: none;
}
.fc-stage {
  transition: transform var(--dur-bouncy) var(--spring-bouncy);
}
.fc-stage:has(.fc-card:active) {
  transform: scale(0.985);
  transition-duration: 0.1s;
}

/* ---------------------------------------------------------------- top bar: translucent material */
/* top bar: the glass recipe, kept quiet (a white top edge, a hairline and a whisper of shadow) */
.ws-top {
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom-color: var(--separator);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px -22px rgba(22, 34, 72, 0.4);
}
.ws-top__session strong {
  font: var(--ios-headline);
  font-size: 16px;
  letter-spacing: -0.012em;
}
.ws-top__session span {
  font: var(--ios-footnote);
  color: var(--ink-3);
}
.ws-ltitle {
  display: none;
}

/* ---------------------------------------------------------------- sidebar: springs (desktop motion: app.css) */
.ws-history-item {
  min-height: 40px;
  border-radius: 10px;
  font-size: 14.5px;
}
.ws-history__heading {
  font: 600 13px/18px var(--font-sans);
  color: var(--ink-3);
}
/* phones and narrow windows: a drawer that slides in from the left over a fading dim; once closed it is
   visibility: hidden (after the slide), so focus can't land in it */
@media (max-width: 900px) {
  .ws-history {
    visibility: hidden;
    transition: transform var(--sb-dur-drawer) var(--sb-ease), visibility 0s linear var(--sb-dur-drawer);
  }
  .ws-body.sidebar-open .ws-history {
    visibility: visible;
    transition: transform var(--sb-dur-drawer) var(--sb-ease), visibility 0s;
  }
  .ws-history-backdrop {
    background: rgba(11, 13, 18, 0.36);
    transition: opacity var(--sb-dur-drawer) linear;
  }
  .ws-history-item {
    min-height: 44px;
    font-size: 16px;
  }
}

.ws-sources {
  gap: 0;
  border-radius: 12px;
  background: var(--grouped-cell);
  overflow: hidden;
}
.ws-sources:empty {
  display: none;
}
.ws-src {
  position: relative;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 12px;
  min-height: 56px;
  padding: 9px 8px 9px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  animation: none;
}
.ws-src + .ws-src::before {
  content: '';
  position: absolute;
  top: 0;
  left: 54px;
  right: 0;
  height: 1px;
  background: var(--separator);
}
.ws-src:hover {
  box-shadow: none;
}
.ws-src--error {
  background: rgba(173, 95, 74, 0.06);
}
.ws-src__badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.ws-src__badge--pdf {
  background: rgba(173, 95, 74, 0.12);
  color: var(--clay);
}
.ws-src__badge--youtube {
  background: rgba(214, 48, 49, 0.1);
  color: #b4232a;
}
.ws-src__badge--image {
  background: rgba(94, 122, 99, 0.14);
  color: var(--sage);
}
.ws-src__badge .ws-src__icon {
  width: 17px;
  height: 17px;
  color: inherit;
}
.ws-src__name {
  font: 500 14.5px/19px var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ws-src__status {
  font: 400 12.5px/17px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.ws-src__x {
  width: 32px;
  height: 32px;
}
.ws-empty-note {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 22px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--grouped-cell);
  font: var(--ios-footnote);
  color: var(--ink-3);
}
.ws-empty-note svg {
  color: var(--ink-4);
}
.ws-add {
  gap: 12px;
  padding-top: 0;
  border-top: 0;
}
.ws-generate {
  padding-top: 0;
  border-top: 0;
}
.ws-generate small {
  font: var(--ios-footnote);
  color: var(--ink-3);
}
.mini-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 12px;
  border: 1.5px dashed var(--hair-2);
  border-radius: 12px;
  background: var(--grouped-cell);
  font: 500 13.5px/18px var(--font-sans);
  color: var(--ink-2);
}
.mini-drop__ic {
  margin-bottom: 4px;
  color: var(--accent);
}
.mini-drop__types {
  font: var(--ios-caption);
  color: var(--ink-3);
}
.ws-input {
  border-radius: 10px;
  font-size: 14px;
  background: var(--grouped-cell);
}
.ws-add__submit {
  font-size: 14px;
  padding: 11px;
}

/* ---------------------------------------------------------------- segmented controls
   (source picker + study views on wider screens): a sliding pill on a quiet track */
.seg {
  position: relative;
  padding: 2px;
  border: 0;
  border-radius: 10px;
  background: var(--fill-segment);
}
.seg__ind {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  border-radius: 8px;
  background: var(--grouped-cell);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  pointer-events: none;
  transition: transform var(--dur-spring) var(--spring), width var(--dur-spring) var(--spring),
    height var(--dur-spring) var(--spring), opacity 0.15s linear;
}
.seg button {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px;
  border-radius: 8px;
  font: 500 12.5px/1.25 var(--font-sans);
  color: var(--ink-2);
}
.seg button svg {
  flex: none;
}
.seg button span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.seg button[aria-selected='true'] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
  background: transparent;
}
.seg:not(.has-ind) button[aria-selected='true'] {
  background: var(--grouped-cell);
}
html[data-a11y-contrast] .seg.has-ind button[aria-selected='true'] {
  background: transparent;
}
html[data-a11y-contrast='dark'] .seg__ind {
  background: #3a404c;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
html[data-a11y-contrast='dark'] .seg:not(.has-ind) button[aria-selected='true'] {
  background: #3a404c;
}
html[data-a11y-contrast='high'] .seg__ind {
  box-shadow: none;
  outline: 2px solid #000;
  outline-offset: -2px;
}

/* ---------------------------------------------------------------- study tools
   tablets and desktops switch tools in the Study tools panel; phones use the Tools view and the
   switcher pill in Learn (both drawn from src/tools.ts) */
.ws-switch {
  display: none;
}

/* ---------------------------------------------------------------- panels + view transitions */
.ws-panels {
  overflow-x: clip; /* a panel sliding in never makes the page scroll sideways */
}
.ws-panels[data-dir='fwd'] .ws-panel[data-panel-state='ready'][data-on] {
  animation: panelInFwd var(--dur-spring) var(--spring);
}
.ws-panels[data-dir='back'] .ws-panel[data-panel-state='ready'][data-on] {
  animation: panelInBack var(--dur-spring) var(--spring);
}
html.vt-run .ws-panel[data-on] {
  animation: none !important;
}
@keyframes panelInFwd {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
}
@keyframes panelInBack {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
}
/* names exist only while a tab change runs (html.vt-run), so they never add stacking contexts otherwise */
html.vt-run .ws-panels {
  view-transition-name: ws-panels;
}
html.vt-run .ws-top {
  view-transition-name: ws-top;
}
html.vt-run .toasts {
  view-transition-name: ws-toasts;
}
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(ws-top),
::view-transition-new(ws-top),
::view-transition-old(ws-toasts),
::view-transition-new(ws-toasts) {
  animation: none;
}
::view-transition-group(ws-panels) {
  animation-duration: 0.45s;
  animation-timing-function: var(--spring-smooth);
}
::view-transition-old(ws-panels) {
  animation: vtOut 0.2s linear both;
}
::view-transition-new(ws-panels) {
  animation: vtIn 0.45s var(--spring) both;
}
html[data-vt-dir='fwd']::view-transition-old(ws-panels) {
  animation-name: vtOutFwd;
}
html[data-vt-dir='fwd']::view-transition-new(ws-panels) {
  animation-name: vtInFwd;
}
html[data-vt-dir='back']::view-transition-old(ws-panels) {
  animation-name: vtOutBack;
}
html[data-vt-dir='back']::view-transition-new(ws-panels) {
  animation-name: vtInBack;
}
@keyframes vtOut {
  to {
    opacity: 0;
  }
}
@keyframes vtIn {
  from {
    opacity: 0;
  }
}
@keyframes vtOutFwd {
  to {
    opacity: 0;
    transform: translateX(-28px);
  }
}
@keyframes vtInFwd {
  from {
    opacity: 0;
    transform: translateX(36px);
  }
}
@keyframes vtOutBack {
  to {
    opacity: 0;
    transform: translateX(28px);
  }
}
@keyframes vtInBack {
  from {
    opacity: 0;
    transform: translateX(-36px);
  }
}

/* first render only (app.js adds .rise briefly): list items rise in with a small stagger */
.rise {
  animation: rise var(--dur-spring) var(--spring) both;
  animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}

/* ---------------------------------------------------------------- empty states: one icon, one line */
.ws-zero.ws-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: min(52vh, 460px);
  text-align: center;
}
.ws-empty__ic {
  color: var(--ink-4);
}
.ws-empty p {
  max-width: 30ch;
  font: var(--ios-subhead);
  color: var(--ink-3);
}
.bigdrop {
  border-radius: 22px;
  background: var(--grouped-cell);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.bigdrop h3 {
  font: var(--ios-title3);
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.25;
  letter-spacing: var(--track-title);
}
.bigdrop p,
.ws-zero__hint {
  font: var(--ios-subhead);
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- brief */
@media (min-width: 901px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 210px);
  }
}
@media (max-width: 900px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}
.brief-doc {
  border-radius: 20px;
  border-color: var(--hair);
  box-shadow: var(--hi-inset-soft), var(--shadow-3);
}
.brief-doc__meta .mono {
  font: 500 12.5px/16px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}
.fc-face--back .fc-face__foot {
  color: rgba(255, 255, 255, 0.68);
}
.brief-doc h2.subject {
  font: var(--ios-title1);
  font-size: clamp(26px, 2.8vw, 32px);
  line-height: 1.15;
  letter-spacing: var(--track-large);
}
.brief-doc .sub {
  font: var(--ios-subhead);
  line-height: 1.55;
  color: var(--ink-2);
}
.brief-body h3 {
  font: var(--ios-headline);
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 10px;
}
.brief-body li {
  font-size: 16px;
  line-height: 1.6;
}
.doc-toc h3 {
  font: 600 13px/18px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.doc-toc a {
  font-size: 13px;
}
@media (max-width: 900px) {
  /* contents become a row of chips that scrolls sideways */
  .doc-toc {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
    padding-bottom: 14px;
    margin-inline: -4px;
    padding-inline: 4px;
    border-bottom: 0;
  }
  .doc-toc::-webkit-scrollbar {
    display: none;
  }
  .doc-toc h3 {
    display: none;
  }
  .doc-toc a {
    flex: none;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--grouped-cell);
    color: var(--ink-2);
    font: 500 13.5px/18px var(--font-sans);
    white-space: nowrap;
  }
  .doc-toc a:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------- shared asset controls */
.fc-meta,
.qz-score,
.asset-label,
.mm-bar .mono {
  font: 500 13px/18px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.regen-btn,
.listen-btn {
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  font: 500 13px/1.2 var(--font-sans);
}
.regen-btn svg {
  flex: none;
}
/* these show their words on wider screens, so no tooltip there (phones: icon only + tooltip on focus) */
@media (min-width: 600px) {
  :is(.regen-btn, .fc-nav__btn)[data-tip]::after {
    display: none;
  }
}
.ghost-btn {
  min-height: 40px;
  font: 500 14px/1.2 var(--font-sans);
}

/* ---------------------------------------------------------------- flashcards: spring flip */
.fc-card {
  transition: transform 0.65s var(--spring-bouncy);
}
.fc-face {
  border-radius: 22px;
  border-color: var(--hair);
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05), 0 22px 44px -28px rgba(11, 13, 18, 0.28);
}
.fc-face p {
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.016em;
}
.fc-face--back p {
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.008em;
}
.fc-face__foot {
  font: 500 12.5px/16px var(--font-sans);
  letter-spacing: 0;
  text-transform: none;
}
.fc-progress {
  height: 4px;
}
.fc-progress i {
  background: var(--accent);
  transition: width var(--dur-spring) var(--spring);
}
.fc-nav__btn svg {
  width: 18px;
  height: 18px;
}

/* ---------------------------------------------------------------- quiz: a small bounce on answers */
.qz-card {
  border-radius: 22px;
  border-color: var(--hair);
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 18px 40px -28px rgba(11, 13, 18, 0.2);
}
.qz-card h3 {
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 600;
  line-height: 1.35;
}
.qz-opt {
  min-height: 52px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.4;
}
.qz-opt i {
  width: 26px;
  height: 26px;
  font: 600 13px/1 var(--font-sans);
}
.qz-opt[data-state='right'] {
  animation: qzPop var(--dur-bouncy) var(--spring-bouncy);
}
.qz-opt[data-state='wrong'] {
  animation: qzShake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes qzPop {
  from {
    transform: scale(0.95);
  }
}
@keyframes qzShake {
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
.qz-fb {
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
}
.qz-fb.on {
  animation: fbIn var(--dur-spring) var(--spring) both;
}
@keyframes fbIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
}

/* ---------------------------------------------------------------- report, map, chat */
.rp-doc {
  border-radius: 20px;
  border-color: var(--hair);
  box-shadow: var(--hi-inset-soft), var(--shadow-3);
}
.mm-actions > button:not(.regen-btn) {
  display: inline-grid;
  place-items: center;
  height: 34px;
  min-width: 34px;
}
.ch-form {
  border-color: var(--hair);
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
}
.ch-form .icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.ch-sug button {
  min-height: 36px;
  font-size: 13.5px;
}

/* ---------------------------------------------------------------- toasts: icon + spring */
.toast {
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 18px;
  font: 500 14px/1.4 var(--font-sans);
  letter-spacing: -0.008em;
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  animation: toastIn var(--dur-bouncy) var(--spring-bouncy);
}
.toast .toast__ic {
  width: 20px;
  height: 20px;
  margin: 0;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.92);
  }
}

/* ---------------------------------------------------------------- account menu (desktop popover) */
.ws-account {
  animation: none;
  border-radius: 14px;
  transform-origin: 20% 100%;
}
.sheet-grab {
  display: none;
}
.ws-account__item {
  font-size: 14.5px;
}

/* ---------------------------------------------------------------- phones */
@media (max-width: 599px) {
  /* large title: big at the top, folds into the top bar when it scrolls under it */
  .ws-ltitle {
    display: block;
    padding: 10px 18px 6px;
  }
  .ws-ltitle__t {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font: var(--ios-large);
    letter-spacing: var(--track-large);
    color: var(--ink);
    overflow-wrap: anywhere;
  }
  .ws-ltitle__s {
    display: block;
    margin-top: 2px;
    font: var(--ios-footnote);
    color: var(--ink-3);
  }
  .ws-ltitle__t:is(:lang(hi), :lang(mr)) {
    line-height: 1.38;
    padding-top: 2px;
  }
  .ws-top.has-ltitle {
    border-bottom-color: transparent;
    transition: border-color 0.2s linear;
  }
  .ws-top.has-ltitle.is-collapsed {
    border-bottom-color: var(--separator);
  }
  .ws-top__session {
    justify-content: center;
    transition: opacity 0.2s linear, transform var(--dur-spring) var(--spring);
  }
  .ws-top.has-ltitle:not(.is-collapsed) .ws-top__session {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }

  .ch-form input {
    font-size: 16px; /* 16px+ keeps iOS Safari from zooming on focus */
  }
  .ws-input,
  textarea.ws-input {
    font-size: 16px;
  }

  /* more air, bigger reading text */
  .ws-panel {
    padding: 8px 16px 32px;
  }
  .brief-doc {
    padding: 22px 18px 26px;
    border-radius: 18px;
  }
  .brief-body li {
    font-size: 17px;
    line-height: 1.55;
  }
  .brief-doc .sub {
    font-size: 16px;
  }
  .bigdrop p {
    display: none;
  }

  /* empty session: the greeting is the large title (the session title folds into the top bar) */
  .ws[data-phase='zero'] .ws-ltitle {
    display: none;
  }
  #ws-zero .ws-zero {
    display: block;
    min-height: 0;
    padding: 8px 0 8px;
  }
  #ws-zero .ws-zero__inner {
    width: 100%;
    align-items: stretch;
    text-align: start;
    gap: 16px;
  }
  .ws-greet {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    padding: 0 2px;
  }
  .ws-greet__mark {
    display: none;
  }
  .ws-greet__h {
    width: 100%;
    font-size: 34px;
    line-height: 1.12;
    text-wrap: pretty;
  }
  .ws-greet__h:is(:lang(hi), :lang(mr)) {
    font-size: 30px;
    line-height: 1.38;
  }
  .ws-greet__sub {
    display: block;
    margin-top: 4px;
    font: var(--ios-footnote);
    color: var(--ink-3);
  }
  #ws-zero .bigdrop {
    padding: 26px 18px;
    text-align: center;
  }
  .ws-chips {
    justify-content: flex-start;
  }
  .ws-chip {
    min-height: 44px;
    padding: 9px 14px;
  }
  #ws-zero .ws-zero__hint {
    text-align: center;
  }

  /* study tool headers: one row; regenerate becomes a round icon button (its words stay for screen readers) */
  .asset-head {
    flex-direction: row;
    align-items: center;
  }
  .asset-head .regen-btn {
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .asset-head .regen-btn svg {
    width: 18px;
    height: 18px;
  }
  .asset-head .regen-btn span,
  .fc-nav__btn span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .asset-head--end {
    align-items: flex-start;
  }
  /* card controls: round icon buttons */
  .fc-nav__btn {
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .fc-nav {
    gap: 14px;
  }

  /* account menu → bottom sheet with grouped inset lists */
  .ws-account {
    --sheet: 1;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
    border: 0;
    border-radius: 16px 16px 0 0;
    background: var(--material-sheet);
    -webkit-backdrop-filter: var(--material-blur);
    backdrop-filter: var(--material-blur);
    box-shadow: 0 -10px 40px -12px rgba(11, 13, 18, 0.3);
    animation: none;
    overscroll-behavior: contain;
  }
  .ws-account.is-dragging {
    transition: none;
    user-select: none;
  }
  .ws-account::before {
    display: none;
  }
  .sheet-grab {
    display: block;
    width: 100%;
    height: 22px;
    margin: 0;
    position: relative;
  }
  .sheet-grab::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 7px;
    width: 36px;
    height: 5px;
    margin-left: -18px;
    border-radius: 3px;
    background: var(--hair-3);
  }
  .ws-account-scrim {
    background: rgba(0, 0, 0, 0.4);
  }
  .ws-account__head {
    flex-direction: row;
    text-align: left;
    gap: 14px;
    padding: 12px 16px;
    margin: 4px 0 22px;
    border: 0;
    border-radius: 12px;
    background: var(--grouped-cell);
  }
  .ws-account__head .ws-avatar__circle--lg {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  .ws-account__who {
    align-items: flex-start;
  }
  .ws-account__who strong {
    font: var(--ios-headline);
  }
  .ws-account__who span {
    font: var(--ios-subhead);
    color: var(--ink-3);
  }
  .ws-account__menu {
    gap: 0;
  }
  .ws-account__item {
    position: relative;
    min-height: 50px;
    gap: 14px;
    padding: 0 16px;
    border-radius: 0;
    background: var(--grouped-cell);
    font: var(--ios-body);
    letter-spacing: -0.01em;
  }
  .ws-account__item:focus {
    background: var(--grouped-cell);
  }
  .ws-account__item:active {
    background: var(--canvas-3);
  }
  .ws-account__menu > .ws-account__item:first-child {
    border-radius: 12px 12px 0 0;
  }
  .ws-account__item:has(+ .ws-account__sep) {
    border-radius: 0 0 12px 12px;
  }
  .ws-account__sep + .ws-account__item {
    border-radius: 12px;
  }
  /* iOS settings-style icon tiles */
  .ws-account__item > svg:first-child {
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: 6px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
  }
  #ws-lang-item > svg:first-child {
    background: #5e7a63;
  }
  .ws-account__item[href='/'] > svg:first-child {
    background: #6b7280;
  }
  #ws-logout > svg:first-child {
    background: var(--clay);
  }
  #ws-logout {
    color: var(--clay);
  }
  html[data-a11y-contrast='dark'] #ws-logout {
    color: #f0a088;
  }
  /* hairlines between rows, inset past the icon tile */
  .ws-account__item + .ws-account__item::before,
  .ws-account__langs + .ws-account__item::before,
  .ws-account__item + .ws-account__langs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 60px;
    right: 0;
    height: 1px;
    background: var(--separator);
  }
  .ws-account__sep {
    height: 22px;
    margin: 0;
    background: transparent;
  }
  .ws-account__langs {
    position: relative;
    margin: 0;
    padding: 2px 8px 6px 52px;
    border: 0;
    background: var(--grouped-cell);
  }
  .ws-account__item--lang .ws-account__val {
    font: var(--ios-subhead);
    color: var(--ink-3);
  }
}
@media (max-width: 599px) and (hover: hover) {
  .ws-account__item:hover {
    background: var(--canvas-3);
  }
}

/* ---------------------------------------------------------------- phone layout (< 768px, ws-layout.js)
   no bottom bar: Sources | Learn | Tools sit under the top bar; the ask bar (Learn) is pinned at the bottom */
.ws[data-layout='phone'] {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* things that sit at the bottom stay clear of the ask bar */
.ws[data-layout='phone'] .toasts {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
.ws[data-layout='phone'][data-mview='learn'].has-ask .toasts {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
html:has(.ws[data-layout='phone']) .a11y-player {
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
html:has(.ws[data-layout='phone'][data-mview='learn'].has-ask) .a11y-player {
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.ws[data-layout='phone'] .ws-panel--map[data-on] {
  height: calc(100svh - 109px - 132px - env(safe-area-inset-bottom, 0px));
  min-height: 420px;
}
.ws[data-layout='phone'] :is(#panel-chat, .ws-panel:has(.ch-wrap))[data-on] {
  height: calc(100svh - 109px - 60px - env(safe-area-inset-bottom, 0px));
  min-height: 420px;
}
.ws[data-layout='phone'] .ch-form {
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* ---------------------------------------------------------------- sign-in pages */
.auth__card {
  max-width: 400px;
  padding: 34px 26px 28px;
  border-radius: 24px;
}
.auth h1 {
  font: var(--ios-title1);
  letter-spacing: var(--track-large);
}
.auth__sub {
  font: var(--ios-subhead);
  color: var(--ink-2);
}
.auth__field {
  font: 600 13px/18px var(--font-sans);
}
.auth__field .ws-input {
  min-height: 48px;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 16px;
}
.auth__field small {
  font: var(--ios-footnote);
}
.auth__submit {
  min-height: 50px;
  border-radius: 14px;
  font: 600 16px/1.2 var(--font-sans);
}
.auth__switch {
  font: var(--ios-subhead);
}
@media (max-width: 599px) {
  .auth h1 {
    font: var(--ios-large);
    letter-spacing: var(--track-large);
  }
}
/* login / signup title: the serif accent (after the ios font shorthands above) */
.auth h1.serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.auth h1.serif-accent:is(:lang(hi), :lang(mr)) {
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.35;
}

/* ---------------------------------------------------------------- Devanagari: room for matras */
:is(.seg button, .ws-tile__l, .ws-tile__d, .ws-switch__l, .ws-src__name, .ws-src__status, .ws-account__item, .toast, .fc-face__foot, .regen-btn, .listen-btn):is(:lang(hi), :lang(mr)) {
  line-height: 1.5;
}
.ws-top__session strong:is(:lang(hi), :lang(mr)) {
  line-height: 1.45;
}

/* ---------------------------------------------------------------- motion off
   prefers-reduced-motion and the panel's "Pause animations" / focus mode: no slides, flips,
   springs or presses (colour changes may still fade) */
@media (prefers-reduced-motion: reduce) {
  :is(.fc-card, .fc-stage, .seg__ind, .ws-history, .ws-top__session, .fc-progress i) {
    transition: none !important;
  }
  :is(.ws-icon-btn, .ws-pill, .ghost-btn, .regen-btn, .listen-btn, .seg button, .qz-opt, .mini-drop,
    .ws-history-item, .ws-avatar, .ch-sug button, .mm-actions > button, .mm-view > button, .ws-src__x,
    .ws-history-item__btn, .ch-form .icon-btn, .fc-stage):active {
    transform: none !important;
  }
}
html:is(.a11y-motion, .a11y-focusmode) :is(.fc-card, .fc-stage, .seg__ind, .ws-history, .ws-top__session) {
  transition: none !important;
}
html:is(.a11y-motion, .a11y-focusmode) :is(.ws-icon-btn, .ws-pill, .ghost-btn, .regen-btn, .listen-btn, .seg button, .qz-opt,
  .mini-drop, .ws-history-item, .ws-avatar, .ch-sug button, .mm-actions > button, .mm-view > button, .ws-src__x,
  .ws-history-item__btn, .ch-form .icon-btn, .fc-stage, .btn):active {
  transform: none !important;
}
html:is(.a11y-motion, .a11y-focusmode)::view-transition-group(*),
html:is(.a11y-motion, .a11y-focusmode)::view-transition-old(*),
html:is(.a11y-motion, .a11y-focusmode)::view-transition-new(*) {
  animation: none !important;
}

/* ---------------------------------------------------------------- lite path (slow devices) */
html.lite :is(.ws-top, .ws-account, .toast, .ch-form) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.lite :is(.fc-face, .qz-card, .brief-doc) {
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.06);
}

/* ================================================================ workspace panels
   Sources | main | Study tools. ws-layout.js sets on .ws (before first paint, again on resize):
     data-layout  phone (< 768px) · tablet (768–1023px, or zoomed text on a desk) · desk (>= 1024px)
     data-src / data-tools  open | rail      data-mview  sources | learn | tools (phones only)
   desk: the side panels sit beside the main column, each folds to a 64px icon rail.
   tablet: both are rails; opening one lays it over the page (scrim, Esc, focus leaving closes it).
   phone: a Sources | Learn | Tools switch under the top bar; Tools is the Study tools panel as a page,
   Learn has a switcher pill that opens the same tiles in a bottom sheet. */

/* ---- emoji (Fluent Emoji 3D, see /static/emoji/LICENSE): pictures, never text */
.emo {
  display: inline-block;
  flex: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
:is(.ws-ask, .ws-zero-cta, .ws-made__empty, .ws-tools__hint, .ws-addsheet, .ws-addsheet__step, .ws-sheet-scrim, .ws-pane-scrim, .ws-addsheet__back)[hidden] {
  display: none !important;
}

/* ---- the side panels */
.ws-pane,
.ws-mseg {
  display: none;
}
.ws:not([data-layout='phone']) .ws-pane {
  display: block;
  position: sticky;
  top: 57px;
  z-index: 20;
  flex: none;
  align-self: flex-start;
  height: calc(100svh - 57px);
  padding: 12px 0 12px 12px;
  transition: width var(--sb-dur) var(--sb-ease); /* the same motion as the notes sidebar (app.css) */
}
.ws:not([data-layout='phone']) .ws-pane--tools {
  padding: 12px 12px 12px 0;
}
.ws-pane--src {
  width: calc(clamp(272px, 22vw, 330px) + 12px); /* keep in step with ws-layout.js */
}
.ws-pane--tools {
  width: calc(clamp(260px, 20vw, 300px) + 12px);
}
.ws[data-src='rail'] .ws-pane--src,
.ws[data-tools='rail'] .ws-pane--tools,
.ws[data-layout='tablet'] .ws-pane {
  width: 76px; /* 64px rail + the 12px gutter */
}
.ws-pane__card {
  position: relative;
  height: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.04), 0 14px 34px -26px rgba(11, 13, 18, 0.22);
}
.ws-pane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 56px;
  padding: 10px 10px 4px 18px;
}
.ws-pane__h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 600 15px/20px var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.ws-pane__t {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-pane__count {
  flex: none;
  min-width: 22px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--fill-segment);
  font: 600 12px/20px var(--font-sans);
  color: var(--ink-2);
  text-align: center;
}
.ws-pane__toggle {
  width: 36px;
  height: 36px;
  color: var(--ink-3);
}
.ws-pane__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.ws-pane__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 10px 12px;
}

/* ---- Sources: add button, list, empty state, the brief button pinned at the bottom */
.ws-addbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 6px 14px 10px;
  padding: 10px 16px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 600 14.5px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--lift-1);
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background-color 0.18s linear, border-color 0.18s linear,
    box-shadow 0.3s var(--ease-out);
}
.ws-addbtn svg {
  flex: none;
  color: var(--accent-deep);
}
.ws-addbtn__l {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-addbtn:hover {
  border-color: var(--hair-3);
  background: var(--canvas);
  box-shadow: var(--lift-2);
}
.ws-addbtn:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.ws-pane .ws-sources {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.ws-pane .ws-src {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 56px;
  padding: 8px 4px 8px 8px;
  border-radius: 14px;
}
.ws-pane .ws-src + .ws-src::before {
  display: none;
}
.ws-pane .ws-src:hover {
  background: var(--canvas);
}
.ws-pane .ws-src--error {
  background: rgba(173, 95, 74, 0.07);
}
.ws-pane .ws-src__badge {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--canvas-2);
}
.ws-src__emo {
  width: 22px;
  height: 22px;
}
.ws-pane .ws-src__name {
  font: 500 14px/19px var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-pane .ws-src__status {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font: 400 12.5px/17px var(--font-sans);
}
.ws-pane .ws-src__status > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-src__tick {
  flex: none;
  color: var(--sage);
  stroke-width: 2.6;
}
.ws-src__alert {
  flex: none;
  color: var(--clay);
}
.ws-src-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 30px 16px 18px;
  text-align: center;
}
.ws-src-empty__emo {
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
}
.ws-src-empty__h {
  font: 600 15px/20px var(--font-sans);
  color: var(--ink);
}
.ws-src-empty__p {
  max-width: 26ch;
  font: var(--ios-footnote);
  color: var(--ink-3);
}
.ws-pane .ws-generate {
  margin-top: auto;
  padding: 12px 14px 14px;
  border-top: 1px solid var(--hair);
  border-radius: 0 0 19px 19px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ws-pane .ws-generate small {
  text-align: center;
  font: var(--ios-footnote);
  color: var(--ink-3);
}
/* the brief button: filled when it can run; a soft tint (not grey) while it waits for a source */
/* layout only: paint comes from the .btn-primary recipe (base.css) */
.ws-gen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 46px;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  font: 600 15px/1.2 var(--font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ws-gen-btn > span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-gen-btn:disabled {
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: none;
  filter: none;
  cursor: default;
}
.ws-gen-btn__ic {
  flex: none;
}
.ws-gen-btn:disabled .ws-gen-btn__ic {
  opacity: 0.7;
}

html[data-a11y-contrast='dark'] .ws-gen-btn:hover:not(:disabled) {
  background: #c4d5ff;
}
html[data-a11y-contrast='dark'] .ws-gen-btn:disabled {
  color: var(--accent-deep);
}

/* ---- Sources as a rail: the add button, one emoji per source, the sparkle */
.ws[data-src='rail'] .ws-pane--src .ws-pane__head,
.ws[data-tools='rail'] .ws-pane--tools .ws-pane__head {
  justify-content: center;
  min-height: 0;
  padding: 10px 0 4px;
}
.ws[data-src='rail'] .ws-pane--src :is(.ws-pane__h, .ws-addbtn__l, .ws-gen-btn > span),
.ws[data-tools='rail'] .ws-pane--tools :is(.ws-pane__h, .ws-tile__l) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.ws[data-src='rail'] .ws-addbtn {
  width: 44px;
  height: 44px;
  min-height: 0;
  margin: 6px auto 8px;
  padding: 0;
  border-radius: 50%;
}
.ws[data-src='rail'] .ws-pane--src .ws-pane__scroll {
  padding: 2px 0 8px;
  scrollbar-width: none;
}
.ws[data-src='rail'] .ws-pane--src .ws-src {
  grid-template-columns: 36px;
  justify-content: center;
  min-height: 0;
  padding: 4px 0;
  background: none;
}
/* the include tick is hidden in the rail; a left-out source shows as a faded icon instead (multi.css .ws-src--off) */
.ws[data-src='rail'] .ws-pane--src :is(.ws-src__meta, .ws-src__x, .ws-src__inc),
.ws[data-src='rail'] .ws-pane--src .ws-src-empty,
.ws[data-src='rail'] #ws-gen-note {
  display: none !important;
}
.ws[data-src='rail'] .ws-pane--src .ws-src--error .ws-src__badge {
  box-shadow: 0 0 0 2px var(--clay);
}
.ws[data-src='rail'] .ws-pane--src .ws-generate {
  align-items: center;
  padding: 10px 0 12px;
  border-top: 0;
}
.ws[data-src='rail'] .ws-pane--src .ws-gen-btn {
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
}
/* rail tooltips: beside the icon, towards the page */
.ws[data-src='rail'] .ws-pane--src [data-tip]::after {
  top: 50%;
  left: calc(100% + 10px);
  right: auto;
  bottom: auto;
  transform: translate(-2px, -50%);
}
.ws[data-tools='rail'] .ws-pane--tools [data-tip]::after {
  top: 50%;
  right: calc(100% + 10px);
  left: auto;
  bottom: auto;
  transform: translate(2px, -50%);
}
.ws[data-src='rail'] .ws-pane--src [data-tip]:is(:hover, :focus-visible)::after,
.ws[data-tools='rail'] .ws-pane--tools [data-tip]:is(:hover, :focus-visible)::after {
  transform: translate(0, -50%);
}
/* open panel: the add and brief buttons say what they do, so no tooltip */
.ws:not([data-src='rail']) .ws-pane--src :is(.ws-addbtn, .ws-gen-btn)::after {
  display: none;
}

/* ---- Study tools: 2-column tiles, each with its own soft tone */
.ws-tools__hint {
  margin: 0 18px 10px;
  font: var(--ios-footnote);
  color: var(--ink-3);
}
.ws-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 2px 14px 0;
}
.ws-tile {
  --tone: 47, 107, 255;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  min-height: 92px;
  padding: 12px 12px 11px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--paper) var(--grad-surface);
  box-shadow: var(--hi-inset-soft), 0 0 0 1px var(--hair), var(--shadow-1);
  color: var(--ink);
  font: 600 14px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background-color 0.18s linear, border-color 0.18s linear,
    box-shadow 0.3s var(--ease-out);
}
.ws-tile:hover {
  background-image: linear-gradient(rgba(var(--tone), 0.05), rgba(var(--tone), 0.05)), var(--grad-surface);
  box-shadow: var(--hi-inset-soft), 0 0 0 1px var(--hair-2), var(--shadow-2);
}
/* The tooltip (::after) lives inside the tile; tiles later in the grid paint over it
   (each tile is its own stacking context while it springs), so lift the one showing it. */
.ws-tile:is(:hover, :focus-visible) {
  z-index: 5;
}
.ws-tile:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
.ws-tile__emo {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6)), rgba(var(--tone), 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 0 1px rgba(var(--tone), 0.12), 0 1px 2px rgba(11, 13, 18, 0.05),
    0 4px 10px -6px rgba(var(--tone), 0.4);
  transition: transform var(--dur-bouncy) var(--spring-bouncy);
}
.ws-tile__emo .emo {
  width: 28px;
  height: 28px;
}
.ws-tile:hover .ws-tile__emo {
  transform: translateY(-1px) rotate(-4deg);
}
.ws-tile__l {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* before a brief: the same tiles, a little quieter (a click explains what to do) */
.ws-tile.is-locked {
  box-shadow: var(--hi-inset-soft), 0 0 0 1px var(--hair);
}
.ws-tile.is-locked .ws-tile__l {
  color: var(--ink-2);
}
/* the open tool: one accent for every tool (the same blue as the selected "study material" row);
   each tool's own tone stays only as a whisper in its emoji chip */
.ws-tile[aria-current='true'] {
  border-color: var(--accent-hair);
  background-image: var(--grad-accent-soft);
  box-shadow: var(--hi-inset-soft), 0 0 0 1px var(--accent-hair), var(--shadow-1);
}
.ws-tile[aria-current='true']::before {
  content: '';
  position: absolute;
  top: 11px;
  right: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
html[data-a11y-contrast='high'] .ws-tile[aria-current='true'] {
  border: 2px solid #000;
}
/* what has been made: one row per generated thing */
.ws-made {
  margin-top: 14px;
  padding: 14px 10px;
  border-top: 1px solid var(--hair);
}
.ws-made__h {
  margin: 0 8px 6px;
  font: 600 13px/18px var(--font-sans);
  color: var(--ink-3);
}
.ws-made__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ws-made__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: background-color 0.18s linear;
}
.ws-made__item:hover {
  background: var(--canvas);
}
.ws-made__item[aria-current='true'] {
  background: var(--accent-soft);
}
.ws-made__emo {
  grid-row: span 2;
  align-self: center;
  justify-self: center;
  width: 24px;
  height: 24px;
}
.ws-made__t {
  font: 600 14px/19px var(--font-sans);
}
.ws-made__m {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: var(--ios-footnote);
  color: var(--ink-3);
}
.ws-made__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 16px 6px;
  text-align: center;
}
.ws-made__empty p {
  max-width: 24ch;
  font: var(--ios-footnote);
  color: var(--ink-3);
}
/* Study tools as a rail: one emoji button per tool, the name in the tooltip */
.ws[data-tools='rail'] .ws-pane--tools :is(.ws-tools__hint, .ws-made) {
  display: none;
}
.ws[data-tools='rail'] .ws-tiles {
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 6px 10px;
}
.ws[data-tools='rail'] .ws-tile {
  align-items: center;
  justify-content: center;
  min-height: 0;
  height: 44px;
  padding: 0;
  border-radius: 13px;
}
.ws[data-tools='rail'] .ws-tile__emo {
  width: auto;
  height: auto;
  background: none;
  box-shadow: none;
}
.ws[data-tools='rail'] .ws-tile[aria-current='true']::before {
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
}
.ws[data-tools='rail'] .ws-tile::after {
  content: attr(data-label);
}

/* ---- tablets: an open panel lies over the page */
.ws[data-layout='tablet'][data-src='open'] .ws-pane--src,
.ws[data-layout='tablet'][data-tools='open'] .ws-pane--tools {
  z-index: 50;
}
.ws[data-layout='tablet'][data-src='open'] .ws-pane--src .ws-pane__card,
.ws[data-layout='tablet'][data-tools='open'] .ws-pane--tools .ws-pane__card {
  position: absolute;
  top: 12px;
  bottom: 12px;
  height: auto;
  width: min(340px, calc(100vw - 120px));
  box-shadow: var(--lift-4), 0 0 0 1px var(--hair);
  animation: wsPaneIn var(--dur-spring) var(--spring) both;
}
.ws[data-layout='tablet'][data-src='open'] .ws-pane--src .ws-pane__card {
  left: 12px;
}
.ws[data-layout='tablet'][data-tools='open'] .ws-pane--tools .ws-pane__card {
  right: 12px;
  --pane-from: 14px;
}
@keyframes wsPaneIn {
  from {
    opacity: 0;
    transform: translate3d(var(--pane-from, -14px), 0, 0);
  }
}
.ws-pane-scrim {
  position: fixed;
  inset: 57px 0 0 0;
  z-index: 19;
  background: rgba(11, 13, 18, 0.28);
  animation: fadeIn 0.2s linear;
}

/* ---- main column beside the panels */
.ws:not([data-layout='phone']) .ws-main {
  container: wsmain / inline-size;
  min-height: calc(100svh - 57px);
}
.ws:not([data-layout='phone']) .doc-toc {
  top: 81px;
}
.ws:not([data-layout='phone']) :is(#panel-chat, .ws-panel:has(.ch-wrap))[data-on] {
  height: calc(100svh - 57px);
}
.ws:not([data-layout='phone']) .ws-panel--map[data-on] {
  height: calc(100svh - 57px - 76px);
}
@container wsmain (max-width: 760px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .doc-toc {
    position: static;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
    padding-bottom: 14px;
    border-left: 0;
    border-bottom: 1px solid var(--hair);
  }
  .doc-toc h3 {
    width: 100%;
    margin: 0;
  }
}
/* ask about the sources: a pill pinned to the bottom of the main column */
.ws-ask {
  position: sticky;
  bottom: 16px;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(calc(100% - 32px), 760px);
  margin: 0 auto 16px;
  padding: 6px 6px 6px 20px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: var(--material-bar);
  -webkit-backdrop-filter: var(--material-blur);
  backdrop-filter: var(--material-blur);
  box-shadow: var(--lift-3);
  transition: border-color 0.18s linear, box-shadow 0.3s var(--ease-out);
}
.ws-ask:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--lift-3);
}
.ws-ask input {
  flex: 1;
  min-width: 0;
  padding: 9px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 15px/1.3 var(--font-sans);
  outline: none;
}
.ws-ask input::placeholder {
  color: var(--ink-3);
}
.ws-ask__n {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--fill-segment);
  color: var(--ink-2);
  font: var(--ios-caption);
  white-space: nowrap;
}
.ws-ask__go {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), opacity 0.2s linear;
}
.ws-ask__go:active:not(:disabled) {
  transform: scale(0.92);
}
.ws-ask__go:disabled {
  opacity: 0.35;
  cursor: default;
}
@container wsmain (max-width: 520px) {
  .ws-ask__n {
    display: none;
  }
}

/* ---- empty session: emoji, greeting, one line, quick starts */
.ws-greet {
  flex-direction: column;
  gap: 12px;
}
.ws-greet__emo {
  width: 72px;
  height: 72px;
  transform-origin: 70% 80%;
  animation: wsWave 1.5s var(--ease-io) 0.35s both;
}
@keyframes wsWave {
  0%,
  100% {
    transform: rotate(0);
  }
  15% {
    transform: rotate(14deg);
  }
  30% {
    transform: rotate(-8deg);
  }
  45% {
    transform: rotate(12deg);
  }
  60% {
    transform: rotate(-4deg);
  }
  75% {
    transform: rotate(8deg);
  }
}
html.lite .ws-greet__emo {
  animation: none;
}
.ws-zero__lead {
  max-width: 44ch;
  margin-top: -8px;
  font: var(--ios-callout);
  color: var(--ink-2);
  text-wrap: pretty;
}
/* quick-start chips: a 16px line icon in muted ink that takes the accent on hover */
.ws-chip {
  gap: 8px;
}
.ws-chip__ic {
  flex: none;
  color: var(--ink-3);
  transition: color var(--t-fast) linear;
}
.ws-chip:hover .ws-chip__ic {
  color: var(--accent);
}
.ws-zero-cta {
  display: none;
}

/* ---- add sources: a centred dialog (a bottom sheet on phones, below) */
.ws-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(11, 13, 18, 0.36);
}
.ws-addsheet {
  position: fixed;
  inset: 0;
  z-index: 111;
  width: min(580px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100svh - 48px);
  margin: auto;
  padding: 10px 22px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--hair);
  border-radius: 26px;
  background: var(--paper);
  box-shadow: 0 40px 90px -30px rgba(11, 13, 18, 0.45), 0 8px 24px -12px rgba(11, 13, 18, 0.2);
}
.ws-addsheet__head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 4px;
  min-height: 54px;
  margin: 0 -12px 2px;
}
.ws-addsheet__back {
  grid-column: 1;
}
.ws-addsheet__h {
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 28px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  text-align: center;
  font-synthesis: none;
}
.ws-addsheet__h:is(:lang(hi), :lang(mr)) {
  font-size: 22px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}
#ws-add-close {
  grid-column: 3;
}
.ws-addsheet__sub {
  max-width: 42ch;
  margin: 0 auto 18px;
  font: var(--ios-subhead);
  color: var(--ink-3);
  text-align: center;
}
.ws-addsheet__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-opts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.ws-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 20px 12px 16px;
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background-color 0.18s linear, border-color 0.18s linear,
    box-shadow 0.3s var(--ease-out);
}
.ws-opt:hover {
  border-color: var(--accent-hair);
  background: var(--accent-soft);
  box-shadow: var(--lift-2);
}
.ws-opt:active {
  transform: scale(0.97);
  transition-duration: 0.08s;
}
/* option icon: a line icon in a small soft chip (the same recipe as the tool tiles' chip) */
.ws-opt__ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 14px;
  color: var(--ink-2);
  background: var(--grad-surface);
  box-shadow: var(--hi-inset), 0 0 0 1px var(--hair), var(--shadow-1);
  transition: transform var(--dur-bouncy) var(--spring-bouncy), color var(--t-fast) linear;
}
.ws-opt:hover .ws-opt__ic {
  color: var(--accent);
  transform: translateY(-2px);
}
.ws-opt__t {
  font: 600 15px/20px var(--font-sans);
  letter-spacing: -0.01em;
}
.ws-opt__d {
  font: var(--ios-caption);
  color: var(--ink-3);
}
.ws-addsheet__tip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  font: var(--ios-footnote);
  color: var(--ink-3);
  text-align: center;
}
.ws-addsheet__label {
  font: 600 13px/18px var(--font-sans);
  color: var(--ink-2);
}
.ws-addsheet textarea.ws-input {
  min-height: 190px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
}
.ws-addsheet input.ws-input {
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 15px;
}
.ws-addsheet__go {
  margin-top: 4px;
}
.ws-addsheet .field-err:empty {
  display: none;
}

/* ---- dragging files over the window */
.ws-dropmask {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(47, 107, 255, 0.07);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s linear, visibility 0s linear 0.18s;
}
.ws.is-dropping .ws-dropmask {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.ws-dropmask__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 40px;
  border: 2px dashed var(--accent);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--lift-4);
  color: var(--accent-deep);
  font: 600 17px/22px var(--font-sans);
}
.ws.is-dropping .ws-pane--src .ws-pane__card {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* ---- phones (layout 'phone'): Sources | Learn under the top bar */
.ws[data-layout='phone'] .ws-mseg {
  display: block;
  position: sticky;
  top: 57px;
  z-index: 35;
  height: 52px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--separator);
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
/* phones: the segmented control is a small glass track; the selected pill gets the white inner edge */
.ws-mseg__seg {
  width: 100%;
  background: rgba(118, 118, 128, 0.1);
  box-shadow: inset 0 1px 1px rgba(11, 13, 18, 0.04), 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ws-mseg__seg .seg__ind {
  box-shadow: var(--hi-inset-soft), 0 0 0 1px rgba(11, 13, 18, 0.04), var(--shadow-1);
}
.ws-mseg__seg button {
  min-height: 32px;
  font-size: 14px;
}
.ws-mseg__n {
  min-width: 20px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--fill-segment);
  font: 600 11.5px/18px var(--font-sans);
  text-align: center;
}
.ws[data-layout='phone'] .ws-body {
  flex-direction: column;
}
.ws[data-layout='phone'][data-mview='sources'] .ws-pane--src {
  display: block;
  width: auto;
  padding: 14px 16px 18px;
}
/* the line under the greeting already says how many sources there are */
.ws[data-layout='phone'] .ws-greet__sub {
  display: none;
}
html:not(.a11y-focusmode) .ws[data-layout='phone'][data-mview='sources'] .ws-main {
  display: none;
}
.ws[data-layout='phone'] .ws-pane--src .ws-pane__card {
  min-height: calc(100svh - 109px - 32px - env(safe-area-inset-bottom, 0px));
  border-radius: 20px;
}
.ws[data-layout='phone'] .ws-pane__toggle,
.ws[data-layout='phone'] .ws-pane-scrim {
  display: none !important;
}
.ws[data-layout='phone'] .ws-pane--src .ws-pane__scroll {
  overflow: visible;
}
.ws[data-layout='phone'] .ws-pane--src .ws-generate {
  position: sticky;
  bottom: env(safe-area-inset-bottom, 0px);
}
.ws[data-layout='phone'] .ws-zero-cta:not([hidden]) {
  display: block;
  width: 100%;
}
.ws[data-layout='phone'] .ws-greet {
  align-items: flex-start;
  gap: 8px;
}
.ws[data-layout='phone'] .ws-greet__emo {
  width: 52px;
  height: 52px;
}
.ws[data-layout='phone'] .ws-zero__lead {
  margin-top: -6px;
  text-align: start;
}
@media (max-width: 599px) {
  .ws-addsheet {
    --sheet: 1;
    inset: auto 0 0 0;
    width: auto;
    max-height: 92svh;
    margin: 0;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-width: 1px 0 0;
    border-radius: 22px 22px 0 0;
  }
  .ws-addsheet.is-dragging {
    transition: none;
    user-select: none;
  }
  .ws-addsheet__head {
    margin-top: -4px;
  }
  .ws-addsheet__h {
    font-size: 26px;
  }
  .ws-opts {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .ws-opt {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 14px 16px;
    text-align: start;
  }
  .ws-opt__ic {
    grid-row: span 2;
    margin: 0;
  }
}

/* ---- motion off: no width springs, no wave, no slide-ins */
@media (prefers-reduced-motion: reduce) {
  .ws-pane,
  .ws-greet__emo,
  .ws[data-layout='tablet'] .ws-pane__card {
    transition: none !important;
    animation: none !important;
  }
}
html:is(.a11y-motion, .a11y-focusmode) :is(.ws-pane, .ws-greet__emo, .ws-pane__card) {
  transition: none !important;
  animation: none !important;
}
html.lite :is(.ws-ask, .ws-mseg) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* the panel toggles keep their tooltip and a quiet look while open (generic expanded-button styles skip them) */
.ws-icon-btn.ws-pane__toggle[aria-expanded='true'] {
  background: transparent;
  color: var(--ink-3);
}
.ws-icon-btn.ws-pane__toggle:hover {
  background: var(--hair);
  color: var(--ink);
}
[data-tip].ws-pane__toggle[aria-expanded='true']::after {
  display: block;
}

/* once a brief exists, the button regenerates it: a quieter look, so it does not compete with studying */
.ws-gen-btn.is-regen:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent-deep);
  box-shadow: none;
  filter: none;
}
.ws-gen-btn.is-regen:hover:not(:disabled) {
  background: var(--accent-soft-2);
}
/* phones, Sources view: the brief button sits at the very bottom */
.ws[data-layout='phone'][data-mview='sources'] .toasts {
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}
/* ================================================================ study tools at any count (src/tools.ts)
   one tile grid everywhere: the Study tools panel (desk/tablet; also the phone Tools view) and the phone
   tool sheet. Tiles and "Your study material" scroll together, so a 9th or 12th tool just adds a row. */
.ws-tools__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 6px;
}
/* desk/tablet panel: the description is the tile's tooltip; phones and the sheet show it as a line */
.ws-tile__d {
  display: none;
}
.ws-tile__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 66px);
  padding: 1px 7px;
  overflow: hidden;
  border-radius: 999px;
  /* the .badge-pill look: a tiny grey pill */
  background: rgba(11, 13, 18, 0.05);
  box-shadow: inset 0 0 0 1px var(--hair);
  color: var(--ink-3);
  font: 500 10px/16px var(--font-sans);
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-tile__badge--soon {
  background: var(--fill-segment);
  color: var(--ink-2);
}
.ws-tile.is-gen .ws-tile__badge,
.ws-tile:has(.ws-tile__badge)[aria-current='true']::before {
  display: none;
}
/* coming soon: visible and focusable (aria-disabled), clearly not ready */
.ws-tile.is-soon {
  cursor: default;
  background: rgba(var(--tone), 0.035);
  border-style: dashed;
  border-color: var(--hair-2);
}
.ws-tile.is-soon:hover {
  background: rgba(var(--tone), 0.05);
}
.ws-tile.is-soon:active,
.ws-tile.is-soon:hover .ws-tile__emo {
  transform: none;
}
.ws-tile.is-soon :is(.ws-tile__l, .ws-tile__d) {
  color: var(--ink-3);
}
.ws-tile.is-soon .ws-tile__emo .emo {
  filter: grayscale(0.7);
  opacity: 0.6;
}
/* groups: headings once there are enough tools to need them */
.ws-tgroups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ws-tgroup__h {
  margin: 0 18px 7px;
  font: 600 12px/16px var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.ws[data-tools='rail'] .ws-tgroup__h {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.ws[data-tools='rail'] .ws-tgroups {
  gap: 0;
}
.ws[data-tools='rail'] .ws-tgroup + .ws-tgroup::before {
  content: '';
  display: block;
  height: 1px;
  margin: 2px 18px;
  background: var(--hair);
}
.ws[data-tools='rail'] .ws-tile__badge {
  display: none;
}
.ws[data-tools='rail'] .ws-tools__scroll {
  scrollbar-width: none;
}
.ws[data-tools='rail'] .ws-tile.is-soon {
  border-color: transparent;
}

/* ---- phones (layout 'phone'): Tools is the Study tools panel as a page of its own */
.ws[data-layout='phone'][data-mview='tools'] .ws-pane--tools {
  display: block;
  width: auto;
  padding: 14px 16px 18px;
}
html:not(.a11y-focusmode) .ws[data-layout='phone'][data-mview='tools'] .ws-main {
  display: none;
}
/* focus mode keeps one column: Learn, with its switcher pill */
html.a11y-focusmode .ws[data-layout='phone'] .ws-pane--tools {
  display: none !important;
}
.ws[data-layout='phone'] .ws-pane--tools .ws-pane__card {
  min-height: calc(100svh - 109px - 32px - env(safe-area-inset-bottom, 0px));
  border-radius: 20px;
}
.ws[data-layout='phone'] .ws-pane--tools .ws-tools__scroll {
  overflow: visible;
  padding-bottom: 14px;
}
/* phone tiles (Tools view and sheet): emoji, label, one short line; no hover tooltips */
:is(.ws[data-layout='phone'] .ws-pane--tools, .ws-toolsheet) .ws-tiles {
  gap: 10px;
}
:is(.ws[data-layout='phone'] .ws-pane--tools, .ws-toolsheet) .ws-tile {
  gap: 8px;
  min-height: 0;
  padding: 12px 12px 13px;
}
:is(.ws[data-layout='phone'] .ws-pane--tools, .ws-toolsheet) .ws-tile__l {
  font-size: 15px;
}
:is(.ws[data-layout='phone'] .ws-pane--tools, .ws-toolsheet) .ws-tile__d {
  display: -webkit-box;
  margin-top: -5px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font: 400 12.5px/1.35 var(--font-sans);
  letter-spacing: 0;
  color: var(--ink-3);
}
.ws[data-layout='phone'] .ws-tile[data-tip]::after {
  display: none;
}

/* ---- phones, Learn: the tool on screen as a pill; it opens the tool sheet */
.ws[data-layout='phone'][data-phase='ready'] .ws-switch {
  display: flex;
  padding: 2px 16px 10px;
}
.ws-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 40px;
  padding: 6px 12px 6px 9px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 600 15px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  box-shadow: 0 1px 2px rgba(11, 13, 18, 0.05);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-bouncy) var(--spring-bouncy), background-color 0.18s linear;
}
.ws-switch__btn:active {
  transform: scale(0.97);
}
.ws-switch__btn .emo {
  width: 22px;
  height: 22px;
}
.ws-switch__l {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-switch__chev {
  flex: none;
  color: var(--ink-3);
  transition: transform 0.2s var(--ease-out);
}
.ws-switch__btn[aria-expanded='true'] .ws-switch__chev {
  transform: rotate(180deg);
}
html:is(.a11y-motion, .a11y-focusmode) :is(.ws-switch__btn, .ws-switch__chev) {
  transition: none !important;
}

/* ---- phones, Learn: "Ask about the sources" pinned at the bottom (NotebookLM-style); content stays clear of it */
.ws[data-layout='phone'] .ws-ask {
  position: fixed;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  width: auto;
  margin: 0;
}
.ws[data-layout='phone'] .ws-ask input {
  font-size: 16px; /* no zoom on focus (iOS) */
}
.ws[data-layout='phone'] .ws-ask__n {
  display: none;
}
.ws[data-layout='phone'][data-mview='learn'].has-ask .ws-main {
  padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

/* ---- the tool sheet (phones): the add-sources sheet's look, the tiles inside */
.ws-toolsheet .ws-tiles {
  padding: 4px 0 0;
}
.ws-toolsheet .ws-tgroup__h {
  margin-inline: 2px;
}
#ws-toolsheet-close {
  grid-column: 3;
}
/* desk/tablet panel tiles are narrow: the badge sits under the name, in full, instead of in the corner */
.ws:not([data-layout='phone']) .ws-pane--tools .ws-tile__badge {
  position: static;
  max-width: 100%;
  margin-top: -6px;
}