main[data-page="ask"] {
  --ask-border: color-mix(in oklch, var(--white) 10%, transparent);
  --ask-panel: color-mix(in oklch, var(--white) 3%, var(--black));
  --ask-content-width: 52rem;
  --ask-sidebar-width: 17rem;
  --ask-sidebar-gutter: 1.25rem;
  --ask-control-size: 2.375rem;
  --ask-header-control-size: 2rem;
  --ask-header-control-gap: 0.5rem;

  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;

  [data-ask="backdrop"] {
    display: none;
  }

  [data-ask="sidebar"] {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 9;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: var(--ask-sidebar-width);
    min-width: 0;
    padding: 4.5rem var(--ask-sidebar-gutter) 1rem;
    border-right: 1px solid var(--ask-border);
    background: transparent;
    overflow: hidden;
    transition:
      opacity 140ms ease,
      transform 180ms ease;
  }

  [data-ask="history"] {
    height: 100%;
    min-height: 0;
  }

  [data-ask="chats"] {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    max-height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }

  [data-ask="chat"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    border-radius: 0.25rem;
    overflow: hidden;

    @media (hover: hover) and (pointer: fine) {
      &:has([data-ask="chat-select"]:hover) {
        background: var(--white);

        [data-ask="chat-remove"] {
          color: var(--black);
        }
      }
    }

    &:has([data-ask="chat-select"]:active) {
      background: var(--orange);

      [data-ask="chat-remove"] {
        color: var(--black);
      }
    }

    &:has([data-ask="chat-select"][data-press]) {
      background: var(--white);

      [data-ask="chat-remove"] {
        color: var(--black);
      }
    }
  }

  [data-ask="chat-select"] {
    --line-gap: 0.5rem;
    --line-gutter: 1.25rem;
    --line-inset: 0.5rem;

    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 0.25rem;
    padding-inline-start: calc(var(--line-gutter) + var(--line-gap));
    overflow: hidden;
    color: var(--gray);
    background: transparent;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;

    &::after {
      position: absolute;
      top: 50%;
      left: var(--line-inset);
      width: calc(var(--line-gutter) - var(--line-inset));
      border-block-start: 1px solid currentColor;
      opacity: 0.5;
      pointer-events: none;
      translate: 0 -50%;
      content: "";
    }

    &[aria-current="page"] {
      color: var(--white);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--black);
        background: transparent;
      }
    }

    &:active {
      color: var(--black);
      background: transparent;
    }

    &[data-press] {
      color: var(--black);
      background: transparent;
    }
  }

  [data-ask="workspace"] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transition: left 180ms ease;
  }

  [data-ask="topbar"] {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
  }

  [data-ask="topbar-main"] {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--ask-header-control-gap);
    min-width: 0;
    pointer-events: auto;
  }

  [data-ask="topbar-main"] {
    position: fixed;
    top: 1.5rem;
    left: calc(var(--page-x) + 8.5rem);
  }

  [data-ask="new-chat"],
  [data-ask="sidebar-toggle"] {
    width: var(--ask-header-control-size);
    height: var(--ask-header-control-size);
    border-radius: 0.5rem;
    padding: 0;
    font-size: var(--font-size-lg);
    line-height: 1;
    text-transform: none;
  }

  [data-ask="sidebar-toggle-icon"] {
    transition: transform 160ms ease;
  }

  [data-ask="sidebar-toggle"][aria-expanded="true"]
    [data-ask="sidebar-toggle-icon"] {
    transform: rotate(180deg);
  }

  [data-ask="conversation"] {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: 1.5rem 7rem;
    scrollbar-gutter: stable;
    mask-image: linear-gradient(
      to bottom,
      transparent,
      black 0.85rem,
      black calc(100% - 6rem),
      transparent
    );
  }

  [data-ask="empty"] {
    display: grid;
    place-content: center;
    width: min(100%, 44rem);
    min-height: 100%;
    margin-inline: auto;
    padding: 6rem 1.5rem 10rem;
    text-align: center;

    h2,
    p {
      margin: 0;
    }

    h2 {
      margin-top: 0.75rem;
      font-family: var(--font-serif);
      font-size: clamp(2.75rem, 5vw, 3.75rem);
      font-weight: var(--font-weight-regular);
      line-height: 0.95;
      letter-spacing: -0.03em;
      text-wrap: balance;
    }

    > p:not([data-ask="eyebrow"]) {
      max-width: 28rem;
      margin: 0.75rem auto 0;
      color: var(--gray);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
      text-wrap: balance;
    }
  }

  [data-ask="eyebrow"] {
    color: var(--orange);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.12em;
  }

  [data-ask="suggestions"] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    width: min(100%, 38rem);
    margin-top: 1.5rem;
    margin-inline: auto;
  }

  [data-ask="suggestion"] {
    justify-content: space-between;
    gap: 0.625rem;
    width: 100%;
    min-height: var(--ask-control-size);
    border-radius: var(--control-radius);
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    text-transform: none;

    span:last-child {
      color: inherit;
      opacity: 0.55;
    }
  }

  [data-ask="transcript"] {
    display: grid;
    align-content: start;
    gap: 1.5rem;
    width: min(100% - 3rem, var(--ask-content-width));
    margin: 0 auto;
    padding: 1.5rem 0 7.5rem;
    list-style: none;
  }

  [data-ask="message"] {
    display: grid;
    gap: 0.35rem;
    max-width: 100%;

    &[data-role="user"] {
      justify-self: end;
      max-width: min(82%, 34rem);
      padding: 0.5rem 0.75rem;
      border: 0;
      border-radius: 0.65rem 0.65rem 0.15rem 0.65rem;
      color: var(--black);
      background: var(--white);
    }

  }

  [data-ask="role"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  [data-ask="content"] {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    > * {
      white-space: normal;
    }

    > * + * {
      margin-top: 0.75rem;
    }

    h1,
    h2,
    h3,
    h4 {
      color: var(--white);
      font-weight: var(--font-weight-regular);
      line-height: 1.1;
    }

    h1,
    h2 {
      font-size: var(--font-size-lg);
    }

    h3,
    h4 {
      font-size: var(--font-size-base);
    }

    :is(ul, ol) {
      display: grid;
      gap: 0.4rem;
      padding-left: 1.35rem;
    }

    li::marker {
      color: var(--orange);
    }

    strong {
      font-weight: 600;
    }

    a {
      color: var(--white);
      text-decoration-color: var(--orange);
      text-decoration-thickness: 1px;
      text-underline-offset: 0.15em;
    }

    :not(pre) > code {
      border: 1px solid var(--ask-border);
      border-radius: 0.2rem;
      padding: 0.08em 0.28em;
      color: color-mix(in oklch, var(--orange) 72%, var(--white));
      background: var(--ask-panel);
      font-size: 0.9em;
    }

    pre {
      max-width: 100%;
      border: 1px solid var(--ask-border);
      border-radius: var(--control-radius);
      padding: 0.85rem 1rem;
      background: var(--ask-panel);
      overflow-x: auto;
      white-space: pre;

      code {
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
      }
    }

    blockquote {
      border-left: 1px solid var(--orange);
      padding-left: 0.85rem;
      color: color-mix(in oklch, var(--white) 72%, transparent);
    }
  }

  [data-ask="dock"] {
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: 8;
    display: grid;
    gap: 0.5rem;
    width: min(calc(100% - 2rem), var(--ask-content-width));
    padding: 1.25rem 0 max(var(--page-x), env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, var(--black) 1.25rem);
    translate: -50% 0;
  }

  [data-ask="composer"] {
    border: 1px solid var(--field-border-color);
    border-radius: var(--control-radius);
    background: color-mix(in oklch, var(--white) 3%, var(--black));
  }

  [data-ask="loader"] {
    display: grid;
    gap: 0.5rem;

    progress {
      appearance: none;
      width: 100%;
      height: 0.2rem;
      border: 0;
      border-radius: 999px;
      overflow: hidden;
      background: color-mix(in oklch, var(--white) 10%, transparent);
      accent-color: var(--orange);

      &::-webkit-progress-bar {
        border-radius: inherit;
        background: color-mix(in oklch, var(--white) 10%, transparent);
      }

      &::-webkit-progress-value {
        border-radius: inherit;
        background: var(--orange);
      }

      &::-moz-progress-bar {
        border-radius: inherit;
        background: var(--orange);
      }
    }
  }

  [data-ask="load"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    border-radius: var(--control-radius);
    padding: var(--control-padding);
    text-align: left;
    text-transform: none;

    small {
      color: inherit;
      font-size: var(--font-size-xs);
      opacity: 0.55;
    }
  }

  [data-ask="form"],
  [data-ask="form"] fieldset,
  [data-ask="form"] label {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }

  [data-ask="composer"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    transition: border-color 120ms ease;

    &:focus-within {
      border-color: var(--orange);
    }

    textarea {
      display: block;
      field-sizing: content;
      width: 100%;
      min-height: var(--ask-control-size);
      max-height: 12rem;
      border: 0;
      padding: 0.5625rem 0.75rem;
      background: transparent;
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
      resize: none;

      &:focus-visible {
        outline: 0;
      }
    }
  }

  [data-ask="composer"] > label {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  [data-ask="composer-bar"] {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 0;
  }

  [data-ask="composer-hint"] {
    display: none;
  }

  [data-ask="composer-actions"] {
    display: flex;
    align-items: center;
  }

  [data-ask="chat-remove"] {
    position: relative;
    isolation: isolate;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.25rem;
    overflow: hidden;
    padding: 0;
    color: color-mix(in oklch, var(--gray) 76%, transparent);
    background: transparent;
    font-size: var(--font-size-lg);
    line-height: 1;
    text-transform: none;
    --hold-progress: 0;
    --hold-progress-width: 0%;

    &::before,
    &::after {
      position: absolute;
      inset: 0;
      opacity: 0;
      content: "";
    }

    &::before {
      z-index: -1;
      background: var(--red);
      transform: scaleX(var(--hold-progress));
      transform-origin: left;
    }

    &::after {
      content: attr(data-label);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: inherit;
      color: var(--black);
      pointer-events: none;
      white-space: nowrap;
      clip-path: inset(0 calc(100% - var(--hold-progress-width)) 0 0);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover:not([data-holding]) {
        color: var(--red);
        background: transparent;
      }
    }

    &:is(:focus-visible, :active, [data-press]):not([data-holding]) {
      color: var(--red);
      background: transparent;
    }

    &[data-active] {
      color: var(--red);
    }

    &[data-active]::before,
    &[data-active]::after {
      opacity: 1;
    }
  }

  [data-ask="send"],
  [data-ask="stop"] {
    width: var(--ask-control-size);
    height: var(--ask-control-size);
    border-radius: var(--control-radius);
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
  }

  [data-ask="stop"] {
    &::before {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 0.08rem;
      background: currentColor;
      content: "";
    }
  }

  [data-ask="activity"] {
    margin: 0;
    color: color-mix(in oklch, var(--white) 42%, transparent);
    font-size: var(--font-size-xs);
    line-height: var(--line-height-xs);
    text-align: center;
    overflow-wrap: anywhere;
  }

  [data-ask="visually-hidden"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (min-width: 48.001rem) {
  main[data-page="ask"][data-sidebar-collapsed] {
    [data-ask="sidebar"] {
      opacity: 0;
      pointer-events: none;
      transform: translateX(-1rem);
    }
  }

  main[data-page="ask"]:not([data-sidebar-collapsed]) {
    [data-ask="workspace"] {
      left: var(--ask-sidebar-width);
    }
  }
}

@media (max-width: 48rem) {
  main[data-page="ask"] {
    [data-ask="backdrop"] {
      position: fixed;
      inset: 0;
      z-index: 19;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 0;
      padding: 0;
      background: color-mix(in oklch, var(--black) 65%, transparent);
      opacity: 0;
      pointer-events: none;
      transition: opacity 160ms ease;
    }

    [data-ask="sidebar"] {
      position: fixed;
      inset: 0 auto 0 0;
      z-index: 20;
      width: min(86vw, 19rem);
      background: var(--black);
      box-shadow: 1.5rem 0 4rem color-mix(in oklch, var(--black) 60%, transparent);
      transform: translateX(-105%);
      transition: transform 180ms ease;
    }

    &[data-sidebar-open] {
      [data-ask="topbar"] {
        z-index: 21;
      }

      [data-ask="backdrop"] {
        opacity: 1;
        pointer-events: auto;
      }

      [data-ask="sidebar"] {
        transform: translateX(0);
      }
    }

    [data-ask="topbar"] {
      padding: 0;
    }

    [data-ask="sidebar-toggle"] {
      display: inline-flex;
    }

    [data-ask="transcript"] {
      width: min(100% - 2rem, var(--ask-content-width));
      padding-top: 5.75rem;
    }

    [data-ask="conversation"] {
      scroll-padding-top: 5.75rem;
    }

    [data-ask="message"][data-role="user"] {
      max-width: 90%;
    }

    [data-ask="dock"] {
      width: 100%;
      padding: 0.75rem 1rem max(1rem, env(safe-area-inset-bottom));
    }

    [data-ask="empty"] {
      padding: 6rem 1rem 8rem;
    }

    [data-ask="composer-hint"] {
      display: none;
    }
  }
}

@media (max-width: 32rem) {
  main[data-page="ask"] {
    [data-ask="loader"] {
      grid-template-columns: 1fr;
    }

    [data-ask="load"] {
      width: 100%;
    }

    [data-ask="empty"] h2 {
      font-size: 3.25rem;
    }

    [data-ask="suggestions"] {
      grid-template-columns: 1fr;
      width: min(100%, 20rem);
      margin-inline: auto;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  main[data-page="ask"] {
    transition: none;

    [data-ask="sidebar"],
    [data-ask="backdrop"],
    [data-ask="workspace"],
    [data-ask="composer"],
    [data-ask="sidebar-toggle-icon"] {
      transition: none;
    }
  }
}