/* Trial (ui-flag.js, ?ui=figma): a slimmer left menu on every page, to go with
   the docked studio inspector (ui-figma-studio.css). */
html[data-editor="figma"] body:not(.desk-nav-folded) { --desk-nav-w: 216px; }
@media (min-width: 901px) {
  html[data-editor="figma"].desk-early:not(.desk-early-folded) .shell { margin-left: 216px; }
}
/* The plans page: the menu's room from the first frame for an owner (early.js),
   and the visitor's title bar away, so nothing jumps when the menu arrives. */
@media (min-width: 901px) {
  html[data-editor="figma"].desk-early .titles { display: none; }
  html[data-editor="figma"].desk-early:not(.desk-early-folded) .shell { margin-left: 216px; }
  html[data-editor="figma"].desk-early.desk-early-folded .shell { margin-left: 64px; }
}

/* The menu itself, the same on every page of the new look (it used to live in
   the desk's sheet, so the studio, the map and the plans drew it differently -
   taller rows on the desk, a jump when moving between them). */
html[data-ui="next"] .desk-nav { background: #0b0b0c; }
html[data-ui="next"] .dn-item { min-height: 40px; border-radius: 12px; font-size: 14px;
  transition: background .15s ease, color .15s ease, transform .12s cubic-bezier(0.23, 1, 0.32, 1); }
html[data-ui="next"] .dn-item:active { transform: scale(0.97); }
html[data-ui="next"] .dn-item[aria-current="page"] { background: rgba(255, 255, 255, 0.08); box-shadow: none; }
html[data-ui="next"] .dn-sep { margin: 12px 10px; }
@media (prefers-reduced-motion: reduce) { html[data-ui="next"] .dn-item:active { transform: none; } }

/* ---------------------------------------------------------------- the AI line
   One card, like the home page's prompt box: the conversation grows upward
   inside it, above the field, instead of a second box floating over the first. */
html[data-ui="next"] .describe.d-studio { gap: 0; overflow: hidden; border-radius: 26px;
  background: rgba(26, 26, 28, 0.94); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
  transition: border-color .2s ease; }
html[data-ui="next"] .describe.d-studio:focus-within { border-color: rgba(255, 255, 255, 0.28); }
html[data-ui="next"] .describe.d-studio .sreply,
html[data-ui="next"] .describe.d-studio .sreply.thread { border: 0; border-radius: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; padding: 14px 40px 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
html[data-ui="next"] .describe.d-studio .sreply .x { top: 10px; right: 10px; }
html[data-ui="next"] .describe.d-studio .sbox { border: 0; border-radius: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-ui="next"] .describe.d-studio .sbox:focus-within { border: 0; }
html[data-ui="next"] .describe.d-studio .ts-host { padding: 0 12px 10px; }
/* The conversation's scrollbar: thin and dark, not the system's white bar. */
html[data-ui="next"] .describe .slist { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; padding-right: 4px; }
html[data-ui="next"] .describe .slist::-webkit-scrollbar { width: 6px; }
html[data-ui="next"] .describe .slist::-webkit-scrollbar-track { background: transparent; }
html[data-ui="next"] .describe .slist::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 99px; }
html[data-ui="next"] .describe .slist::-webkit-scrollbar-button { display: none; height: 0; }

/* Moving between pages that are separate documents (the desk -> the makers map,
   the studio, the plans): a short cross-fade instead of a blank reload, where
   the browser can (Chrome, Edge), and the menu's column painted from the first
   frame while the menu itself is still on its way (early.js marks the page). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 160ms; }
@media (min-width: 901px) {
  html[data-ui="next"].desk-early body:not(.has-desk-nav)::before {
    content: ""; position: fixed; inset: 0 auto 0 0; z-index: 0; width: 216px; background: #0b0b0c;
    border-right: 1px solid rgba(255, 255, 255, 0.07); pointer-events: none; }
  html[data-ui="next"].desk-early.desk-early-folded body:not(.has-desk-nav)::before { width: 64px; }
}