/* Shared UI components: custom dropdown and dialogs.
   Loaded by every template so standalone public pages get the same
   controls as the main app. Uses the palette variables as fallbacks so it
   works on pages with a lighter theme block. */

/* Header nav links, shared by the app header and the public header. */
.nav-link {
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--color-ash, #57544e);
  transition: color 0.15s ease, background-color 0.15s ease;
}
.nav-link:hover { color: var(--color-ink, #171614); background: var(--color-sheet, #f2f1ee); }
.nav-link.active { color: var(--color-ink, #171614); background: var(--color-sheet, #f2f1ee); font-weight: 500; }

/* A collected mix-palette chip ("Use in mix" already clicked). */
.chip.is-in-mix {
  border-color: rgba(31, 95, 214, 0.4);
  background: rgba(31, 95, 214, 0.08);
  color: #1f5fd6;
}

/* Custom dropdown, replacing the native select everywhere. */
    .dd-native {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }
    .dd-wrap { position: relative; width: 100%; }
    .dd-btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.5rem;
      width: 100%;
      /* Match the button and field rhythm so the two controls line up when
         they sit side by side: py-2 vertical padding, rounded-md radius. */
      padding: 0.5rem 0.75rem;
      background: var(--color-white, #fff);
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.375rem;
      color: var(--color-ink, #171614);
      font-size: 0.875rem;
      /* Match text-sm exactly, line-height included, so the height equals the
         button beside it rather than sitting a pixel taller. */
      line-height: 1.25rem;
      font-family: inherit;
      cursor: pointer;
      text-align: left;
    }
    .dd-btn:hover { border-color: var(--color-accent, #1f5fd6); }
    .dd-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
    .dd-value {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .dd-arrow {
      width: 0.34rem;
      height: 0.34rem;
      border-right: 1.5px solid var(--color-mist, #6f6b64);
      border-bottom: 1.5px solid var(--color-mist, #6f6b64);
      transform: rotate(45deg);
      transition: transform 0.15s ease;
      flex-shrink: 0;
    }
    .dd-btn[aria-expanded="true"] .dd-arrow {
      transform: rotate(-135deg);
    }
    .dd-list {
      position: absolute;
      z-index: 40;
      top: calc(100% + 4px);
      left: 0;
      right: 0;
      max-height: 16rem;
      overflow-y: auto;
      margin: 0;
      padding: 0.25rem;
      list-style: none;
      background: var(--color-white, #fff);
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.5rem;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    }
    .dd-option {
      padding: 0.5rem 0.625rem;
      border-radius: 0.375rem;
      font-size: 0.875rem;
      cursor: pointer;
      color: var(--color-ink, #171614);
    }
    .dd-option.is-active { background: var(--color-sheet, #f2f1ee); }
    .dd-option.is-selected {
      color: var(--color-accent, #1f5fd6);
      font-weight: 500;
    }
    .dd-option[aria-disabled="true"] {
      color: var(--color-mist, #6f6b64);
      cursor: not-allowed;
    }

    /* Dialogs: confirm, prompt and alert, replacing the native browser ones. */
    .dlg-scrim {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.25rem;
      background: rgba(23, 22, 20, 0.42);
      opacity: 1;
      transition: opacity 0.12s ease;
    }
    .dlg-scrim.is-closing { opacity: 0; }
    .dlg {
      width: 100%;
      max-width: 24.5rem;
      background: var(--color-paper, #fafaf8);
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    }
    .dlg-title {
      margin: 0;
      font-size: 1.0625rem;
      font-weight: 600;
      color: var(--color-ink, #171614);
    }
    .dlg-body {
      margin: 0.625rem 0 0;
      font-size: 0.875rem;
      line-height: 1.55;
      color: var(--color-ash, #57544e);
    }
    .dlg-field { margin-top: 1rem; }
    .dlg-label {
      display: block;
      margin-bottom: 0.375rem;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--color-ash, #57544e);
    }
    .dlg-input {
      width: 100%;
      padding: 0.625rem 0.75rem;
      background: var(--color-white, #fff);
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-family: inherit;
      color: var(--color-ink, #171614);
    }
    .dlg-input:focus {
      outline: none;
      border-color: var(--color-accent, #1f5fd6);
    }
    .dlg-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.5rem;
      margin-top: 1.5rem;
    }
    .dlg-confirm,
    .dlg-confirm-danger {
      padding: 0.5rem 1rem;
      border: 1px solid transparent;
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .dlg-confirm {
      background: var(--color-accent, #1f5fd6);
      color: var(--color-accent-ink, #fff);
    }
    .dlg-confirm:hover { filter: brightness(1.08); }
    .dlg-confirm-danger {
      background: var(--color-danger, #b42318);
      color: #fff;
    }
    .dlg-confirm-danger:hover { filter: brightness(1.08); }

    /* Small Pro marker shown on paid features and gated actions. */
    .pro-mark {
      display: inline-flex;
      align-items: center;
      padding: 0.05rem 0.375rem;
      border: 1px solid var(--color-accent, #1f5fd6);
      border-radius: 0.25rem;
      color: var(--color-accent, #1f5fd6);
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      line-height: 1.4;
    }

    /* Mobile nav: hamburger opens a bottom bar. The items enter one after
       another, like notes being played up a scale, so the menu feels musical
       rather than popping in flat. The whole block is small-screen only, so it
       is hidden by its own rule at the large breakpoint rather than by a
       utility, which keeps the display value from being overridden. */
    .hamburger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      background: transparent;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background 0.15s ease;
    }
    .hamburger:hover { background: var(--color-sheet, #f2f1ee); }
    .hamburger-icon {
      width: 1.25rem;
      height: 1.25rem;
      background-color: var(--color-ink, #171614);
      -webkit-mask: url('/static/img/nav-menu.svg') center / contain no-repeat;
      mask: url('/static/img/nav-menu.svg') center / contain no-repeat;
      transition: -webkit-mask-image 0.2s ease, mask-image 0.2s ease;
    }
    .hamburger[aria-expanded="true"] .hamburger-icon {
      -webkit-mask-image: url('/static/img/nav-close.svg');
      mask-image: url('/static/img/nav-close.svg');
    }

    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      background: var(--color-paper, #fafaf8);
      border-top: 1px solid var(--color-rule, #e2e1dc);
      box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.12);
      padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
      transform: translateY(100%);
      /* Hidden bars must not stay in the tab order: visibility flips after
         the slide-out finishes (and immediately on open). */
      visibility: hidden;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
      will-change: transform;
    }
    .bottom-nav.is-open {
      transform: translateY(0);
      visibility: visible;
      transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
    }

    .bottom-nav-items {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.25rem;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .bottom-nav-link {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.25rem;
      padding: 0.5rem 0.25rem;
      border-radius: 0.625rem;
      color: var(--color-ash, #57544e);
      font-size: 0.6875rem;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;

      /* Each item starts tucked down and slightly faded, then rises into
         place on its own beat. */
      opacity: 0;
      transform: translateY(0.875rem) scale(0.94);
    }
    .bottom-nav.is-open .bottom-nav-link {
      animation: nav-note-in 0.34s cubic-bezier(0.34, 1.3, 0.64, 1) both;
    }
    /* Staggered like notes up a scale, a few frames apart. */
    .bottom-nav.is-open .bottom-nav-item:nth-child(1) .bottom-nav-link { animation-delay: 0.04s; }
    .bottom-nav.is-open .bottom-nav-item:nth-child(2) .bottom-nav-link { animation-delay: 0.11s; }
    .bottom-nav.is-open .bottom-nav-item:nth-child(3) .bottom-nav-link { animation-delay: 0.18s; }
    .bottom-nav.is-open .bottom-nav-item:nth-child(4) .bottom-nav-link { animation-delay: 0.25s; }

    /* Slight overshoot on settle, like a note ringing then holding. */
    @keyframes nav-note-in {
      0%   { opacity: 0; transform: translateY(0.875rem) scale(0.94); }
      60%  { opacity: 1; transform: translateY(-0.125rem) scale(1.02); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .bottom-nav-icon {
      width: 1.375rem;
      height: 1.375rem;
      background-color: currentColor;
    }
    .bottom-nav-link.active {
      color: var(--color-accent, #1f5fd6);
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 10%, transparent);
    }

    /* Backdrop that dims the page behind the bar. */
    .bottom-nav-scrim {
      position: fixed;
      inset: 0;
      z-index: 40;
      background: rgba(23, 22, 20, 0.3);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.28s ease;
    }
    .bottom-nav-scrim.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Small-screen only. Set here rather than with a utility so the display
       value cannot be overridden by the component's own display rules. */
    @media (min-width: 64rem) {
      .hamburger,
      .bottom-nav,
      .bottom-nav-scrim {
        display: none !important;
      }
    }

    /* Decorative musical backdrop, one illustration in each bottom corner.
       Sits behind the content on every page and never catches a click, so it
       reads as texture rather than as interface. The color clouds give the
       page its wide range of color while the content above stays quiet. */
    .decor {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .decor-left,
    .decor-right {
      position: absolute;
      bottom: 0;
      width: min(42vw, 30rem);
      max-width: 90vw;
      opacity: 0.5;
    }
    .decor-left {
      left: 0;
    }
    .decor-right {
      right: 0;
    }
    /* Keep the backdrop from crowding small screens. */
    @media (max-width: 40rem) {
      .decor-left,
      .decor-right {
        width: 62vw;
        opacity: 0.35;
      }
    }

    /* Library sidebar on small screens. It sits off-screen to the left and
       slides in when .sidebar-open is applied. Tailwind v4 moves it with the
       CSS `translate` property, not `transform`, so the open state has to
       clear that property to actually move the panel. Lives here rather than
       in the Tailwind style block because the CDN does not emit custom id
       selectors from that block, which left the menu stuck off-screen. */
    @media (max-width: 63.9375rem) {
      #sidebar.sidebar-open {
        translate: 0 0;
      }
    }

    /* Pagination control shared by every listing that pages on the server.
       Same markup renders from the Jinja macro and from the JS helper, so the
       listings look and behave alike whether they are drawn on the server or
       fetched in the browser. Kept quiet and small so the list stays the focus. */
    .pager {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.375rem;
      margin-top: 1.25rem;
    }
    .pager-btn,
    .pager-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 2.25rem;
      height: 2.25rem;
      padding: 0 0.625rem;
      background: var(--color-white, #fff);
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.5rem;
      color: var(--color-ink, #171614);
      font-size: 0.8125rem;
      font-family: inherit;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .pager-btn:hover,
    .pager-num:hover {
      border-color: var(--color-accent, #1f5fd6);
      color: var(--color-accent, #1f5fd6);
    }
    /* The page you are on reads as the one that is lit. */
    .pager-num.is-current {
      background: var(--color-accent, #1f5fd6);
      border-color: var(--color-accent, #1f5fd6);
      color: var(--color-accent-ink, #fff);
      font-weight: 500;
    }
    .pager-btn[disabled],
    .pager-btn.is-disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .pager-btn[disabled]:hover,
    .pager-btn.is-disabled:hover {
      border-color: var(--color-rule, #e2e1dc);
      color: var(--color-ink, #171614);
    }
    .pager-gap {
      display: inline-flex;
      align-items: flex-end;
      justify-content: center;
      min-width: 1.5rem;
      height: 2.25rem;
      padding-bottom: 0.375rem;
      color: var(--color-mist, #6f6b64);
      font-size: 0.8125rem;
      letter-spacing: 0.12em;
    }
    .pager-status {
      width: 100%;
      margin-top: 0.25rem;
      text-align: center;
      color: var(--color-mist, #6f6b64);
      font-size: 0.75rem;
    }

    @media (max-width: 40rem) {
      .pager {
        gap: 0.25rem;
      }
      .pager-btn,
      .pager-num {
        min-width: 2rem;
        height: 2rem;
        padding: 0 0.5rem;
        font-size: 0.75rem;
      }
      .pager-gap {
        min-width: 1.125rem;
        height: 2rem;
        padding-bottom: 0.25rem;
        font-size: 0.75rem;
      }
    }

    /* Skip link: the first focusable element on app pages, hidden until it is
       focused so keyboard users can jump straight past the nav to the content. */
    .skip-link {
      position: fixed;
      top: -4rem;
      left: 0.75rem;
      z-index: 100;
      padding: 0.625rem 1rem;
      background: var(--color-accent, #1f5fd6);
      color: var(--color-accent-ink, #fff);
      border-radius: 0.5rem;
      font-size: 0.875rem;
      font-weight: 500;
      text-decoration: underline;
      transition: top 0.15s ease;
    }
    .skip-link:focus,
    .skip-link:focus-visible {
      top: 0.75rem;
    }

    /* Links inside prose and empty-state copy are underlined so they never
       rely on color alone to be distinguishable. */
    .state p a {
      text-decoration: underline;
    }

    /* Upload disclosure caret: points down while the panel is open and folds
       up when collapsed. Only aria-expanded changes, so the rotation keys off
       that state. */
    .upload-caret {
      display: inline-flex;
      color: var(--color-ash, #57544e);
      transition: transform 0.2s ease;
    }
    #upload-toggle[aria-expanded="false"] .upload-caret {
      transform: rotate(-90deg);
    }

    /* Respect reduced-motion preferences: drop the note-stagger entrance and
       the sliding transitions, keeping every state change instantaneous. */
    @media (prefers-reduced-motion: reduce) {
      .bottom-nav,
      .bottom-nav.is-open,
      .bottom-nav-scrim,
      .bottom-nav-link,
      .bottom-nav.is-open .bottom-nav-link,
      .hamburger,
      .hamburger-icon,
      .dd-arrow,
      .dlg-scrim,
      .dlg-confirm,
      .dlg-confirm-danger,
      .skip-link,
      .upload-caret {
        animation: none;
        transition: none;
      }
      /* Without the entrance animation the items must start visible. */
      .bottom-nav-link {
        opacity: 1;
        transform: none;
      }
    }

    /* ================================================================
       Studio workspace: agentic chat + custom mix player.
       The studio page is a full-height workspace: chat sessions on the
       left, the conversation in the middle, the composer pinned to the
       bottom. All classes here are prefixed so nothing leaks to other
       pages except the small shared bits noted inline.
       ================================================================ */

    /* Generic helpers used by the studio markup. Display rules live here
       (rather than in Tailwind utilities) so they cannot be overridden by a
       component's own display value, and the !important hide always wins. */
    .studio-hide { display: none !important; }
    .studio-lg-hide { display: inline-flex; }
    @media (min-width: 64rem) {
      .studio-lg-hide { display: none !important; }
    }

    /* The workspace is a normal page inside the same centred max-w-6xl
       container as the app header (matching the library sidebar layout):
       the page scrolls, the chat rail sticks in place like the library
       sidebar, and the composer pins to the bottom of the viewport. */
    .studio-shell {
      display: flex;
      align-items: flex-start;
      gap: 1.5rem;
      width: 100%;
      max-width: 72rem; /* max-w-6xl, same as the app header */
      margin: 0 auto;
      padding: 1.5rem 1rem 0;
      min-height: calc(100vh - 6.5rem);
    }
    @media (min-width: 40rem) {
      .studio-shell { padding-left: 1.5rem; padding-right: 1.5rem; }
    }

    /* ---- Left rail: chat sessions (sticky like the library sidebar) ---- */
    .studio-rail {
      display: flex;
      flex-direction: column;
      flex: 0 0 15rem;   /* w-60, same as the library sidebar */
      width: 15rem;
      position: sticky;
      top: 6rem;         /* lg:top-24, same as the library sidebar */
      max-height: calc(100vh - 7.5rem);
    }
    .rail-head {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.875rem 1rem 0.5rem;
    }
    .rail-title {
      flex: 1;
      margin: 0;
      font-size: 0.6875rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-mist, #6f6b64);
    }
    .rail-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      padding: 0 0.25rem 0.5rem;
      overflow-y: auto;   /* only the session list scrolls when it is long */
    }
    .chat-new-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5625rem 0.75rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.625rem;
      background: var(--color-white, #fff);
      color: var(--color-ink, #171614);
      font-size: 0.8125rem;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .chat-new-btn:hover {
      border-color: var(--color-accent, #1f5fd6);
      color: var(--color-accent, #1f5fd6);
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 6%, #fff);
    }
    .session-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      margin: 0.625rem 0 0.75rem;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
    }
    .session-item {
      display: flex;
      align-items: center;
      gap: 0.125rem;
      border-radius: 0.625rem;
    }
    .session-item:hover { background: var(--color-white, #fff); }
    .session-item.is-active {
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 10%, #fff);
    }
    .session-select {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 0.125rem;
      padding: 0.5rem 0.625rem;
      border: 0;
      border-radius: 0.625rem;
      background: transparent;
      font-family: inherit;
      text-align: left;
      cursor: pointer;
    }
    .session-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--color-ink, #171614);
    }
    .session-item.is-active .session-title {
      color: var(--color-accent, #1f5fd6);
    }
    .session-time {
      font-size: 0.6875rem;
      color: var(--color-mist, #6f6b64);
    }
    .session-empty {
      padding: 0.5rem 0.625rem;
      font-size: 0.75rem;
      color: var(--color-mist, #6f6b64);
    }
    /* Hover/focus actions. They stay focusable (opacity only) so keyboard
       users reveal them with focus-within rather than losing them. */
    .session-actions {
      display: flex;
      gap: 0.125rem;
      padding-right: 0.25rem;
      opacity: 0;
      transition: opacity 0.15s ease;
    }
    .session-item:hover .session-actions,
    .session-item:focus-within .session-actions {
      opacity: 1;
    }
    .rail-foot {
      padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
      border-top: 1px solid var(--color-rule, #e2e1dc);
    }
    .rail-usage {
      margin: 0;
      font-size: 0.75rem;
      color: var(--color-mist, #6f6b64);
    }
    .rail-usage.is-full {
      color: var(--color-warn, #b54708);
      font-weight: 500;
    }
    .rail-usage a {
      color: var(--color-accent, #1f5fd6);
      text-decoration: underline;
    }

    /* Slide-over drawer below lg. */
    .studio-rail-scrim {
      position: fixed;
      inset: 0;
      z-index: 44;
      background: rgba(23, 22, 20, 0.3);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .studio-rail-scrim.is-open {
      opacity: 1;
      pointer-events: auto;
    }
    @media (max-width: 63.9375rem) {
      .studio-rail {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 45;
        flex-basis: auto;
        width: min(19rem, 85vw);
        max-height: none;
        background: var(--color-paper, #fafaf8);
        transform: translateX(-102%);
        visibility: hidden;
        box-shadow: 18px 0 44px rgba(23, 22, 20, 0.18);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.28s;
      }
      .studio-rail.is-open {
        transform: none;
        visibility: visible;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
      }
    }
    @media (min-width: 64rem) {
      .studio-rail { transform: none; visibility: visible; }
      .studio-rail-scrim { display: none !important; }
    }

    /* ---- Main column ---- */
    .studio-main {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-width: 0;
      min-height: calc(100vh - 6.5rem);  /* short chats still pin the composer down */
    }
    .workspace-head {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.25rem 0 1rem;
    }
    .workspace-title {
      margin: 0;
      font-size: 0.9375rem;
      font-weight: 600;
      color: var(--color-ink, #171614);
    }
    .workspace-sub {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 0.75rem;
      color: var(--color-mist, #6f6b64);
    }
    .workspace-spacer { flex: 1; }
    .head-usage {
      font-size: 0.6875rem;
      color: var(--color-mist, #6f6b64);
      white-space: nowrap;
    }

    .transcript-wrap {
      flex: 1 1 auto;
      padding: 0.25rem 0 1.5rem;   /* the page scrolls; the composer sticks */
    }
    .transcript {
      display: flex;
      flex-direction: column;
      gap: 1.125rem;
      width: 100%;
      max-width: 51.25rem;   /* ~820px conversation column */
      margin: 0 auto;
    }

    /* ---- Messages ---- */
    .msg-row { display: flex; }
    .msg-row.is-user { justify-content: flex-end; }
    .bubble-user {
      max-width: min(85%, 34rem);
      padding: 0.625rem 0.9375rem;
      border: 1px solid color-mix(in srgb, var(--color-accent, #1f5fd6) 22%, #fff);
      border-radius: 1rem 1rem 0.25rem 1rem;
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 11%, #fff);
      color: var(--color-ink, #171614);
      font-size: 0.875rem;
      line-height: 1.55;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }
    .msg-assistant {
      display: flex;
      flex-direction: column;
      gap: 0.625rem;
      width: 100%;
      min-width: 0;
    }
    .assistant-prose {
      margin: 0;
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--color-ink, #171614);
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    /* ---- Empty state ---- */
    .empty-hero {
      margin: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.75rem;
      padding: 2.5rem 1rem 3rem;
      text-align: center;
    }
    .empty-mark {
      /* The studio mark carries its own tile, so the container is a plain
         display box now. */
      display: block;
      width: 3.75rem;
      height: 3.75rem;
    }
    .empty-title {
      margin: 0;
      font-size: 1.375rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      color: var(--color-ink, #171614);
    }
    .empty-sub {
      margin: 0;
      max-width: 32rem;
      font-size: 0.9375rem;
      line-height: 1.6;
      color: var(--color-ash, #57544e);
    }
    .suggestions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      margin-top: 0.625rem;
    }
    .suggest-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.5rem 0.875rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 9999px;
      background: var(--color-white, #fff);
      color: var(--color-ash, #57544e);
      font-size: 0.8125rem;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    }
    .suggest-chip:hover {
      border-color: var(--color-accent, #1f5fd6);
      color: var(--color-accent, #1f5fd6);
      transform: translateY(-1px);
    }
    .suggest-chip:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
    }

    /* ---- Agentic status lines ---- */
    .status-list {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      padding-left: 0.25rem;
    }
    .status-line {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.75rem;
      color: var(--color-mist, #6f6b64);
      opacity: 0;
      transform: translateY(2px);
      animation: status-in 0.24s ease forwards;
    }
    .status-dot {
      width: 0.375rem;
      height: 0.375rem;
      border-radius: 9999px;
      background: var(--color-accent, #1f5fd6);
      opacity: 0.65;
      flex-shrink: 0;
    }
    @keyframes status-in {
      to { opacity: 1; transform: none; }
    }
    .status-collapsed {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding-left: 0.25rem;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.75rem;
      color: var(--color-mist, #6f6b64);
    }

    /* ---- Pending skeleton (animated waveform shimmer) ---- */
    .sk-card {
      padding: 1.25rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.875rem;
      background: var(--color-white, #fff);
    }
    .sk-bar {
      border-radius: 0.375rem;
      background: linear-gradient(
        100deg,
        var(--color-sheet, #f2f1ee) 35%,
        color-mix(in srgb, var(--color-paper, #fafaf8) 80%, #fff) 50%,
        var(--color-sheet, #f2f1ee) 65%
      );
      background-size: 220% 100%;
      animation: sk-shimmer 1.5s linear infinite;
    }
    .sk-line { height: 0.875rem; width: 42%; }
    .sk-line-sm { height: 0.75rem; width: 62%; margin-top: 0.875rem; }
    .sk-wave {
      height: 4.25rem;
      margin-top: 0.875rem;
      border-radius: 0.5rem;
      -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px);
      mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px);
    }
    .sk-segs {
      display: flex;
      gap: 2px;
      height: 1.25rem;
      margin-top: 0.875rem;
    }
    .sk-segs .sk-bar { height: 100%; }
    @keyframes sk-shimmer {
      from { background-position: 220% 0; }
      to { background-position: -220% 0; }
    }

    /* ---- Error / upgrade cards in the conversation ---- */
    .turn-card {
      padding: 1rem 1.125rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.875rem;
      background: var(--color-white, #fff);
    }
    .turn-card.is-error {
      border-color: color-mix(in srgb, var(--color-danger, #b42318) 35%, #fff);
      background: color-mix(in srgb, var(--color-danger, #b42318) 4%, #fff);
    }
    .turn-card.is-upgrade {
      border-color: color-mix(in srgb, var(--color-accent, #1f5fd6) 30%, #fff);
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 5%, #fff);
    }
    .turn-card-title {
      margin: 0;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--color-ink, #171614);
    }
    .turn-card.is-error .turn-card-title {
      color: var(--color-danger, #b42318);
    }
    .turn-card-body {
      margin: 0.375rem 0 0;
      font-size: 0.8125rem;
      line-height: 1.55;
      color: var(--color-ash, #57544e);
    }
    .turn-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }

    /* ---- Mix card (generative UI) ---- */
    .mix-card {
      padding: 1.25rem 1.375rem 1.25rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 1rem;
      background: radial-gradient(1200px 200px at 50% 0%, color-mix(in srgb, var(--color-accent, #1f5fd6) 4%, #fff), var(--color-white, #fff));
      box-shadow: 0 18px 60px rgba(23, 22, 20, 0.08), 0 1px 0 rgba(255,255,255,0.6) inset;
      animation: mix-card-in 320ms ease;
    }
    @keyframes mix-card-in {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .mix-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 0.375rem 0.75rem;
    }
    .mix-title {
      margin: 0;
      font-size: 1.0625rem;
      font-weight: 600;
      letter-spacing: -0.015em;
      color: var(--color-ink, #171614);
    }
    .mix-meta {
      font-size: 0.75rem;
      color: var(--color-mist, #6f6b64);
    }
    .mix-notes {
      margin: 0.375rem 0 0;
      font-size: 0.8125rem;
      line-height: 1.55;
      color: var(--color-ash, #57544e);
    }

    /* Mix report: objective measurements of the render, not taste. */
    .mix-report {
      margin-top: 1rem;
      padding: 0.875rem 1rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.75rem;
      background: var(--color-white, #fff);
    }
    .report-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .report-heading {
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      flex-wrap: wrap;
    }
    .report-title {
      font-size: 0.8125rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      color: var(--color-ink, #171614);
    }
    .report-counts {
      font-size: 0.6875rem;
      color: var(--color-mist, #6f6b64);
    }
    .report-score-wrap {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .report-score {
      font-size: 1.125rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--color-ink, #171614);
    }
    .report-grade {
      padding: 0.125rem 0.5rem;
      border-radius: 999px;
      font-size: 0.6875rem;
      font-weight: 600;
    }
    .grade-clean {
      background: color-mix(in srgb, var(--color-success, #067647) 12%, transparent);
      color: var(--color-success, #067647);
    }
    .grade-check {
      background: color-mix(in srgb, var(--color-warn, #b54708) 12%, transparent);
      color: var(--color-warn, #b54708);
    }
    .grade-rough {
      background: color-mix(in srgb, var(--color-danger, #b42318) 12%, transparent);
      color: var(--color-danger, #b42318);
    }
    .report-what {
      margin: 0.375rem 0 0;
      font-size: 0.6875rem;
      color: var(--color-mist, #6f6b64);
    }
    .report-metrics {
      margin: 0.625rem 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 0.375rem;
    }
    .report-metric {
      display: grid;
      grid-template-columns: 4.75rem 5.25rem 1fr;
      align-items: baseline;
      gap: 0.5rem;
      padding-top: 0.375rem;
      border-top: 1px solid var(--color-rule, #e2e1dc);
      font-size: 0.75rem;
    }
    .report-metric:first-child {
      border-top: 0;
      padding-top: 0;
    }
    .rm-name {
      color: var(--color-ash, #57544e);
      font-weight: 500;
    }
    .rm-value {
      font-variant-numeric: tabular-nums;
      color: var(--color-ink, #171614);
    }
    .rm-note {
      color: var(--color-mist, #6f6b64);
    }
    .report-metric.fit-clean .rm-value {
      color: var(--color-success, #067647);
    }
    .report-metric.fit-check .rm-value {
      color: var(--color-warn, #b54708);
    }
    .report-metric.fit-rough .rm-value {
      color: var(--color-danger, #b42318);
    }
    @media (max-width: 34rem) {
      .report-metric {
        grid-template-columns: 1fr;
        gap: 0.125rem;
      }
    }

    /* Segment timeline: proportional bands per labeled chunk. */
    .seg-timeline {
      display: flex;
      gap: 2px;
      height: 2.5rem;
      margin-top: 1rem;
      border-radius: 0.625rem;
      overflow: hidden;
      background: var(--color-rule, #e2e1dc);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
    }
    .seg-band {
      display: flex;
      align-items: center;
      min-width: 0.5rem;
      padding: 0 0.375rem;
      overflow: hidden;
      white-space: nowrap;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .seg-intro {
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 16%, #fff);
      color: var(--color-ash, #57544e);
    }
    .seg-verse {
      background: color-mix(in srgb, var(--color-ash, #57544e) 42%, #fff);
      color: #fff;
    }
    .seg-drop {
      background: var(--color-accent, #1f5fd6);
      color: var(--color-accent-ink, #fff);
    }
    .seg-break {
      background: color-mix(in srgb, var(--color-mist, #6f6b64) 34%, #fff);
      color: var(--color-ink, #171614);
    }
    .seg-other {
      background: color-mix(in srgb, var(--color-rule, #e2e1dc) 70%, #fff);
      color: var(--color-ash, #57544e);
    }

    /* ---- Custom audio player ---- */
    .mix-player {
      margin-top: 1.125rem;
      padding: 1rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.875rem;
      background: radial-gradient(800px 120px at 50% 0%, color-mix(in srgb, var(--color-accent, #1f5fd6) 3%, #fff), linear-gradient(180deg, var(--color-white, #fff), color-mix(in srgb, var(--color-sheet, #f2f1ee) 65%, #fff)));
      box-shadow: 0 8px 30px rgba(23, 22, 20, 0.05);
    }
    .wave-canvas {
      display: block;
      width: 100%;
      height: 5.5rem;
      border-radius: 0.625rem;
      cursor: pointer;
      touch-action: none;
    }
    .seg-reflect {
      display: flex;
      gap: 2px;
      height: 0.5rem;
      margin-top: 0.5rem;
    }
    .seg-reflect-band {
      position: relative;
      overflow: hidden;
      border-radius: 9999px;
    }
    .seg-reflect-band::before {
      content: "";
      position: absolute;
      inset: 0;
      background: inherit;
      opacity: 0.28;
    }
    .seg-reflect-fill {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 0;
      border-radius: 9999px;
      background: inherit;
    }
    .player-row {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-top: 0.75rem;
    }
    .play-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      flex-shrink: 0;
      border: 0;
      border-radius: 9999px;
      background: var(--color-accent, #1f5fd6);
      color: var(--color-accent-ink, #fff);
      cursor: pointer;
      box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent, #1f5fd6) 32%, transparent);
      transition: filter 0.15s ease, transform 0.15s ease;
    }
    .play-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
    .play-btn:active { transform: none; }
    .play-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .play-btn:disabled:hover { filter: none; transform: none; }
    .player-time {
      font-size: 0.8125rem;
      font-variant-numeric: tabular-nums;
      color: var(--color-ash, #57544e);
    }
    .player-time .total { color: var(--color-mist, #6f6b64); }

    .bubble-pick {
      max-width: 100%;
    }
    .bubble-pick > span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .audio-missing {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      flex-wrap: wrap;
      padding-top: 0.5rem;
      font-size: 0.8125rem;
      color: var(--color-ash, #57544e);
    }

    /* Small icon buttons (rail actions, restart, audition). */
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.125rem;
      height: 2.125rem;
      flex-shrink: 0;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 0.625rem;
      background: var(--color-white, #fff);
      color: var(--color-ash, #57544e);
      cursor: pointer;
      transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .icon-btn:hover {
      border-color: var(--color-accent, #1f5fd6);
      color: var(--color-accent, #1f5fd6);
    }
    .icon-btn.is-danger:hover {
      border-color: var(--color-danger, #b42318);
      color: var(--color-danger, #b42318);
      background: color-mix(in srgb, var(--color-danger, #b42318) 6%, #fff);
    }
    .icon-btn.is-on {
      border-color: var(--color-accent, #1f5fd6);
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 10%, #fff);
      color: var(--color-accent, #1f5fd6);
    }
    .icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .icon-btn svg { width: 1.0625rem; height: 1.0625rem; }

    button[data-loading="1"][aria-busy="true"] {
      cursor: progress;
      opacity: 0.75;
    }
    button[data-loading="1"] > svg,
    button[data-loading="1"] [data-icon] {
      display: none;
    }
    button[data-loading="1"]::after {
      content: "";
      width: 0.875rem;
      height: 0.875rem;
      flex-shrink: 0;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    /* ---- Action row + quick-action chips ---- */
    .mix-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
      margin-top: 1rem;
    }
    .quick-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-top: 0.875rem;
    }
    .quick-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      padding: 0.4375rem 0.875rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 9999px;
      background: var(--color-white, #fff);
      color: var(--color-ash, #57544e);
      font-size: 0.75rem;
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
      box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
    }
    .quick-chip:hover {
      border-color: color-mix(in srgb, var(--color-accent, #1f5fd6) 45%, #fff);
      color: var(--color-ink, #171614);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(23, 22, 20, 0.04);
    }
    .quick-chip:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }

    /* ---- Sections expander with per-chunk audition ---- */
    .mix-sections {
      margin-top: 1rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--color-rule, #e2e1dc);
    }
    .mix-sections summary {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      list-style: none;
      font-size: 0.8125rem;
      font-weight: 500;
      color: var(--color-ash, #57544e);
      user-select: none;
    }
    .mix-sections summary::-webkit-details-marker { display: none; }
    .mix-sections summary:hover { color: var(--color-accent, #1f5fd6); }
    .sections-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.25rem;
      height: 1.25rem;
      padding: 0 0.375rem;
      border-radius: 9999px;
      background: var(--color-sheet, #f2f1ee);
      color: var(--color-mist, #6f6b64);
      font-size: 0.6875rem;
    }
    .section-list {
      margin: 0.625rem 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
    }
    .section-row {
      display: flex;
      align-items: center;
      gap: 0.625rem;
      padding: 0.375rem 0;
      border-bottom: 1px solid var(--color-rule, #e2e1dc);
      font-size: 0.8125rem;
    }
    .section-row:last-child { border-bottom: 0; }
    .section-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3.5rem;
      flex-shrink: 0;
      padding: 0.125rem 0.25rem;
      border-radius: 0.25rem;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .section-title {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--color-ink, #171614);
    }
    .section-rel {
      flex-shrink: 0;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.6875rem;
      color: var(--color-mist, #6f6b64);
    }
    .section-time {
      flex-shrink: 0;
      font-size: 0.75rem;
      font-variant-numeric: tabular-nums;
      color: var(--color-mist, #6f6b64);
    }

    /* ---- Composer: pinned to the bottom of the viewport ---- */
    .composer-wrap {
      position: sticky;
      bottom: 0;
      z-index: 30;
      padding: 0.75rem 0 calc(1rem + env(safe-area-inset-bottom));
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--color-paper, #fafaf8) 0%, transparent),
        var(--color-paper, #fafaf8) 30%
      );
    }
    .composer {
      width: 100%;
      max-width: 51.25rem;
      margin: 0 auto;
      padding: 0.5rem 0.5rem 0.5rem 0.875rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 1rem;
      background: var(--color-white, #fff);
      box-shadow: 0 14px 36px rgba(23, 22, 20, 0.09);
    }
    .composer-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 0.375rem;
      padding-bottom: 0.5rem;
    }
    .composer-chips:empty { display: none; }
    .handoff-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.375rem;
      max-width: 100%;
      padding: 0.1875rem 0.25rem 0.1875rem 0.5rem;
      border: 1px solid var(--color-rule, #e2e1dc);
      border-radius: 9999px;
      background: var(--color-sheet, #f2f1ee);
      color: var(--color-ash, #57544e);
      font-size: 0.75rem;
    }
    .handoff-chip.is-seed {
      border-color: color-mix(in srgb, var(--color-accent, #1f5fd6) 28%, #fff);
      background: color-mix(in srgb, var(--color-accent, #1f5fd6) 8%, #fff);
    }
    .chip-kind {
      flex-shrink: 0;
      font-size: 0.625rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--color-mist, #6f6b64);
    }
    .handoff-chip .chip-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .chip-x {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 1.125rem;
      height: 1.125rem;
      flex-shrink: 0;
      border: 0;
      border-radius: 9999px;
      background: transparent;
      color: var(--color-mist, #6f6b64);
      font-size: 0.875rem;
      line-height: 1;
      font-family: inherit;
      cursor: pointer;
    }
    .chip-x:hover {
      background: var(--color-rule, #e2e1dc);
      color: var(--color-ink, #171614);
    }
    .composer-row {
      display: flex;
      align-items: flex-end;
      gap: 0.625rem;
    }
    .composer-input {
      flex: 1;
      min-width: 0;
      max-height: 12.5rem;
      padding: 0.5625rem 0;
      border: 0;
      outline: none;
      resize: none;
      background: transparent;
      color: var(--color-ink, #171614);
      font-family: inherit;
      font-size: 0.9375rem;
      line-height: 1.5;
    }
    .composer-input::placeholder { color: var(--color-mist, #6f6b64); }
    .send-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.75rem;
      height: 2.75rem;
      flex-shrink: 0;
      border: 0;
      border-radius: 9999px;
      background: var(--color-accent, #1f5fd6);
      color: var(--color-accent-ink, #fff);
      cursor: pointer;
      box-shadow: 0 8px 18px color-mix(in srgb, var(--color-accent, #1f5fd6) 32%, transparent);
      transition: filter 0.15s ease;
    }
    .send-btn:hover:not(:disabled) { filter: brightness(1.08); }
    .send-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      box-shadow: none;
    }
    .send-btn .send-spin { display: none; }
    .send-btn.is-busy .send-icon { display: none; }
    .send-btn.is-busy .send-spin {
      display: block;
      width: 1.125rem;
      height: 1.125rem;
      border: 2px solid rgba(255, 255, 255, 0.4);
      border-top-color: #fff;
      border-radius: 9999px;
      animation: studio-spin 0.8s linear infinite;
    }
    @keyframes studio-spin {
      to { transform: rotate(360deg); }
    }

    /* Waveform loader label shown while the real peaks decode. */
    .wave-note {
      position: absolute;
      right: 0.5rem;
      bottom: 0.375rem;
      padding: 0.125rem 0.375rem;
      border-radius: 0.25rem;
      background: color-mix(in srgb, var(--color-white, #fff) 82%, transparent);
      font-size: 0.625rem;
      color: var(--color-mist, #6f6b64);
    }
    .wave-wrap { position: relative; }

    /* Respect reduced motion across the workspace. */
    @media (prefers-reduced-motion: reduce) {
      .studio-rail,
      .studio-rail-scrim,
      .status-line,
      .sk-bar,
      .sk-wave,
      .suggest-chip,
      .play-btn,
      .send-btn,
      .send-btn.is-busy .send-spin,
      .chat-new-btn,
      .icon-btn,
      .quick-chip {
        animation: none !important;
        transition: none !important;
      }
      .status-line {
        opacity: 1;
        transform: none;
      }
      .sk-bar {
        background: var(--color-sheet, #f2f1ee);
      }
      .send-btn.is-busy .send-spin {
        border-top-color: rgba(255, 255, 255, 0.9);
      }
    }