{"version":3,"file":"static/css/595.e2b02778.chunk.css","mappings":"AAEA,cACE,mBACA,2CACA,2CACA,aACA,eACA,SACA,aAEA,yBACE,0BACA,kBACA,+BACA,0BACA,iCACA,2BAGF,8BACE,mBACA,eACA,SACA,gBACA,iBCzBJ,SAEA,8DACE,qCACA,mEACA,gCACA,iBAEA,mCACE,sCACA,gCACA,gCACA,kCAGF,oCAEE,wCAEA,kCACE,oDAEA,wCACE,wBAKN,iDACE,qBACA,CADA,eACA,aACA,sEACA,iCACA,cACA,2BACA,kBACA,mBACA,8DAGE,gBACE,aACA,2BACA,CADA,kBACA,qEACA,cACA,wBACA,CADA,eACA,gDACA,0BAEF,4CAVF,mEAWI,0BAEF,4CAbF,4CAcI,8DAEA,kBACE,iBACA,oCAKN,kBACE,sBACA,kDAEA,eACE,aACA,eACA,8BACA,qDAEA,mBACE,eACA,2DAEA,oCACE,WACA,qBACA,cACA,sIACA,gEACA,8BACA,gDACA,kBACA,mBACA,kEAIJ,2BAEE,0EAGF,0CACE,kCACA,qCACA,sDAKF,6DAIA,eACA,iEAGE,uBAUR,yGACE,iDAGF,iDAGE,YACA,qBACA,yEAGE,kCAKF,YACA,sBACA,2CAEA,oCAEE,sEAGE,2DAKF,kDAGF,4CAGE,iEAGE,aAKN,gDACE,0BACA,2BACA,+EAIE,wDAGF,0CAEE,mJAMA,yCACA,iFAGE,qGAGE,+EAIJ,2BACE,qCAEA,iFAGF,oCACE,sEAGF,yCAEE,8CACA,gDACA,yCACA,6EAEA,4CACE,yCACA,gDAMJ,YACA,uBACA,SACA,uBACA,wFAGE,2GAGE,6CACA,kHAGE,8DAON,8DACA,6DAEA,mBACA,CACA,wBACA,eACA,uBACA,mBACA,4EAEA,kCACE,wEAIA,mFAIA,YACA,qEAGF,0CAEE,sCAGA,4FAEA,eACA,gFAGE,gEAIJ,oCACE,CACA,uBACA,mBACA,eACA,2EAGE,0FAIJ,kCACE,2CAIJ,sCAEE,qBACA,aACA,sBAEA,uBACA,+DAGE,2DAEA,2DAIJ,6CACE,qCAEA,8EAEA,uDAEA,mBACA,gEAEA,yBACE,2CAKF,YACA,sBACA,mDAGF,gCAEE,aACI,CAAJ,6HAEA,+BACA,yDAGE,iEAGF,2BACE,iEAGE,mBACA,cACA,kBACA,mBACA,iBACA,eACA,4FAMA,kBACA,kFAKF,aACA,cACA,yEAIA,YACA,2DAEA,UACA,2FAGE,sFAGF,yBAEE,8CACA,oEAGE,wFAKN,2BACE,2EAEA,sCAEE,WACA,qBACA,WACA,qBACA,wKAEA,gEACA,oDACA,0BAEA,kBAGE,uBAKE,wIAMJ,yHAIA,kHACA,sEAGF,4EAGE,2CAEA,sEAEA,qGACE,iHAMN,oEAGE,yiDAkBM,sUAaN,4EAKF,uDAEA,kDAGE,UACA,4DAEA,yEAEA,8BACE,qBACA,iFAEA,YACE,8BACA,sFAKF,qYAcF,0BAEA,oDACE,6EAIA,aAIA,gIAIJ,eAEE,yGACA,kBAEA,kBACE,+GAKF,cAEA,qDAGE,uEAKF,iDAEA,qDAEE,gGAIJ,SAEE,+GACA,kBAGF,kBAEE,+GAIA,iBAGF,wDACE,kBAIA,wDAEE,2EAKA,2FAII,oCAKN,mEAMJ,cACE,uDAEA,eAGF,iDACE,mGCnmBN,iBAEE,mBACA,mBAEA,uBACE,SACA,SACA,UACA,kBACA,QAEA,+CACE,8BAA+B,CAC/B,2CACA,cACA,cACA,wCACA,MACA,WACA,2BAEA,qDACE,eACA,4CAEA,mEACE,qIAKN,oEAEE,6CAEA,mBAME,+FACE,mJAGF,4EAKE,gHAIA,wFAQF,eAOA,qHADF,qCAOI,6DASJ,YACA,yBAEA,kCACE,qBAGA,2BACE,mBACA,yCAEA,kBACA,mBACA,CAEA,+BACE,8BACA,qHACA,kDAIA,mCACE,yDACA,0BAIJ,uCACE,qDACA,4CAMJ,iCACA,6BACA,2BACA,cAEA,wCACE,mBACA,oCACA,kBACA,uCAEA,gCACA,iHACA,+DAEA,0BAMR,kBA9IF,sBA+II,uBACA,yBACA,iBACA,0CAGA,gCAGE,2EACE,iJASF,sEACE,mHAGF,sEAQJ,+DAGA,mCAIE,yFAIA,4GAEE,oCACA,oEAEA,iBACA,kDAIJ,oEAIE,uEAIA,iDACE,yDAGA,wHAOJ,0BAzCF,0FA8CM,qBACA,yBAEA,4BAEA,oEAIA,+BACE,mBACA,WAGF,uDACE,uJC1OR,0BACE,cAEA,6BACE,2CACA,eAGF,6BACE,WACA,2CACA,gBACA,qBAGF,0CACE,2BAGF,+CACE,aACA,sBACA,SAEA,wBALF,+CAMI,mBACA,SACA,8BAGF,wBAXF,+CAYI,WAGF,iDACE,SAIA,qDACE,4BACA,iBACA,8BAIJ,mDACE,mBACA,8CAIJ,oDACE,6CACA,cACA,eAEA,2EACE,aACA,sBACA,SACA,cAEA,wBANF,2EAOI,mBACA,SACA,+BAGF,kFACE,mBACA,aAEA,WACA,gBACA,kBAEA,sFACE,YACA,WAIA,+FACE,SAIJ,wBAnBF,kFAqBI,cAEA,sFACE,YACA,cACA,WAGF,6FACE,mBAIJ,wBAGE,6FACE,gBAEA,gGACE,UAQZ,kDACE,mBAEA,gEACE,cAGE,0EACE,+EAEA,WACA,qBACA,YACA,0CAIF,kGAIA,yFAEE,8CACA","sources":["plus/common/login-banner.scss","plus/ai-help/index.scss","plus/ai-help/history.scss","plus/ai-help/landing.scss"],"sourcesContent":["@use \"../../ui/vars\" as *;\n\n.login-banner {\n  align-items: center;\n  background-color: var(--background-success);\n  border: 2px solid var(--background-success);\n  display: flex;\n  flex-wrap: wrap;\n  gap: 1rem;\n  padding: 1rem;\n\n  .plus-link {\n    color: var(--text-primary);\n    font-style: normal;\n    font-variation-settings: normal;\n    text-decoration: underline;\n    text-decoration-thickness: 0.15rem;\n    text-underline-offset: 0.1em;\n  }\n\n  .auth-container {\n    flex-direction: row;\n    flex-wrap: wrap;\n    gap: 1rem;\n    margin-bottom: 0;\n    margin-left: auto;\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.ai-help {\n  --background-toc-active: var(--ai-help-accent-background-color);\n  --category-color: var(--ai-help-icon);\n  --category-color-background: var(--ai-help-accent-background-color);\n  --text-link: var(--ai-help-link);\n\n  > header {\n    --plus-header: var(--ai-help-header);\n    --plus-mandala: var(--ai-help-mandala);\n    --plus-icon: var(--ai-help-icon);\n    --plus-link: var(--ai-help-link);\n  }\n\n  .button.action.has-icon {\n    // Reduce button icon contrast to make it less prominent.\n    --button-color: var(--icon-secondary);\n\n    &:hover {\n      --button-color: var(--icon-primary);\n\n      .icon-trash {\n        background-color: var(--text-primary-red);\n      }\n    }\n  }\n\n  > .ai-help-main {\n    --ai-top: calc(var(--top-nav-height) + 1px + 1rem);\n    column-gap: 1rem;\n    display: grid;\n    grid-template-columns: [left] 1fr [center] min(52rem, 100%) [right] 1fr;\n    grid-template-rows: auto auto 1fr;\n    margin: 0 auto;\n    max-width: var(--max-width);\n    padding-left: 1rem;\n    padding-right: 1rem;\n\n    &.with-ai-help-history {\n      > .ai-help-history {\n        grid-column: left;\n        grid-row: 1/4;\n        height: fit-content;\n        max-height: calc(100vh - var(--sticky-header-without-actions-height));\n        overflow: auto;\n        position: sticky;\n        top: var(--sticky-header-without-actions-height);\n      }\n      @media (max-width: $screen-xxl) {\n        grid-template-columns: [left] minmax(0, 15rem) [center] minmax(0, 3fr);\n      }\n      @media (max-width: $screen-md) {\n        grid-template-columns: [center] minmax(0, 3fr);\n\n        > .ai-help-history {\n          grid-column: center;\n          grid-row: initial;\n        }\n      }\n    }\n\n    > .container {\n      grid-column: center;\n      padding: var(--gutter);\n\n      &.ai-help-header {\n        column-gap: 1rem;\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n\n        > h1 {\n          margin-bottom: 0.7rem;\n          min-width: 100%;\n\n          &::after {\n            background-color: var(--ai-help-icon);\n            content: \"\";\n            display: inline-block;\n            height: 1.1rem;\n            mask-image: url(\"../../assets/icons/ai-help.svg\");\n            mask-position: center center;\n            mask-repeat: no-repeat;\n            mask-size: contain;\n            vertical-align: top;\n            width: 1.25rem;\n          }\n        }\n\n        > p {\n          color: var(--text-secondary);\n          margin: 0;\n        }\n\n        .feedback-link {\n          --feedback-link-icon: var(--icon-secondary);\n          --text-link: var(--text-secondary);\n          font-size: var(--type-tiny-font-size);\n        }\n      }\n\n      &:not(:last-of-type) {\n        padding-bottom: 0;\n      }\n\n      .notecard {\n        margin-bottom: 0;\n        margin-top: 0;\n\n        a:link {\n          color: var(--text-link);\n\n          &:not(:hover) {\n            text-decoration: underline;\n          }\n        }\n      }\n    }\n  }\n\n  a:hover {\n    text-decoration: underline;\n  }\n\n  .ai-help-banner,\n  .login-banner {\n    background-color: var(--category-color-background);\n    border: none;\n    border-radius: 0.25rem;\n    padding: 1rem 1.5rem;\n\n    p {\n      margin: 0;\n    }\n  }\n\n  .ai-help-banner {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25rem;\n\n    .icon {\n      background-color: var(--ai-help-icon);\n      vertical-align: text-top;\n\n      &:first-of-type {\n        margin-right: 1rem;\n      }\n    }\n\n    .auth-container {\n      margin-top: 1rem;\n    }\n\n    &.disabled {\n      background-color: var(--background-secondary);\n\n      margin-bottom: 2.25rem;\n\n      .button {\n        display: none;\n      }\n    }\n  }\n\n  .ai-help-inner {\n    --input-border-width: 1px;\n    --input-padding-left: 1rem;\n    --input-padding-right: 3rem;\n\n    .ai-help-body,\n    .ai-help-footer {\n      padding: 0.5rem 0;\n    }\n\n    .ai-help-footer {\n      background-color: var(--background-primary);\n      bottom: 0;\n      mask-image: linear-gradient(\n        to top,\n        rgb(0, 0, 0) 0% calc(100% - 0.5rem),\n        rgba(0, 0, 0, 0) 100%\n      );\n      padding-top: 1rem;\n      position: sticky;\n\n      .ai-help-footer-actions {\n        padding-bottom: 0.5rem;\n\n        button:disabled {\n          visibility: hidden;\n        }\n      }\n\n      .ai-help-footer-text {\n        color: var(--text-secondary);\n        font-size: var(--type-tiny-font-size);\n        margin-top: 0.5rem;\n      }\n\n      .ai-help-refine-button {\n        border: 1px solid var(--text-primary);\n      }\n\n      .ai-help-new-question-button {\n        // Revert effects of .button.action\n        --button-bg: var(--button-primary-default);\n        --button-bg-hover: var(--button-primary-hover);\n        --button-bg-active: var(--button-primary-active);\n        --button-color: var(--background-primary);\n\n        :hover {\n          --button-border-color: var(--button-bg-hover);\n          --button-color: var(--background-primary);\n        }\n      }\n    }\n\n    .ai-help-refine-or-new {\n      display: flex;\n      flex-wrap: wrap-reverse;\n      gap: 1rem;\n      justify-content: center;\n      width: 100%;\n\n      .ai-help-new-question-button {\n        align-self: center;\n\n        .button-wrap {\n          text-transform: none;\n          width: max-content;\n\n          .icon {\n            margin-right: 0.2em;\n          }\n        }\n      }\n    }\n\n    .ai-help-input-form {\n      --input-height: 3rem;\n      background-color: var(--background-primary);\n      border: var(--input-border-width) solid var(--border-primary);\n      border-radius: 1rem;\n      display: flex;\n      flex-grow: 1;\n      flex-wrap: wrap;\n      justify-content: center;\n      padding: 0.5rem 1rem;\n      position: relative;\n\n      &:focus-within {\n        border-color: var(--category-color);\n        box-shadow:\n          0 0 0 3px var(--blend-color),\n          0 0 0 3px var(--category-color);\n        outline: 0 none;\n      }\n\n      .ai-help-input-actions {\n        display: flex;\n        flex-wrap: wrap;\n      }\n\n      textarea {\n        background-color: var(--background-primary);\n        border: none;\n        color: var(--text-primary);\n        flex-grow: 1;\n        height: 2rem;\n        max-height: calc(30vh - var(--sticky-header-without-actions-height));\n        max-width: 100%;\n        resize: none;\n\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      button {\n        --button-color: var(--icon-secondary);\n        --button-padding: 0.5rem;\n        --icon-size: 1.5rem;\n        align-self: end;\n        margin-left: auto;\n\n        &:hover {\n          background: transparent;\n        }\n      }\n\n      .button[type=\"submit\"]:enabled {\n        --button-color: var(--ai-help-icon);\n      }\n    }\n\n    .ai-help-examples {\n      background: var(--background-secondary);\n      border-radius: 0.25rem;\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n      margin: 1rem 0;\n      padding: 1rem;\n\n      header {\n        font-weight: 500;\n        letter-spacing: var(--header-letter-spacing);\n        line-height: 175%;\n      }\n    }\n\n    .ai-help-example {\n      --category-color-engage: var(--border-primary);\n      background: var(--background-primary);\n      border-radius: 0.25rem;\n      box-shadow: inset 0.25rem 0 0 var(--category-color-engage);\n      cursor: pointer;\n      font-size: var(--type-smaller-font-size);\n      padding: 0.5rem 1rem;\n      text-align: left;\n\n      &:hover {\n        color: var(--ai-help-link);\n      }\n    }\n\n    .ai-help-messages {\n      display: flex;\n      flex-direction: column;\n      gap: 1rem;\n    }\n\n    .ai-help-message {\n      border-radius: var(--elem-radius);\n      display: grid;\n      grid-auto-rows: auto;\n      grid-template-columns: max-content minmax(0, auto);\n      padding: 1rem;\n      row-gap: 1rem;\n\n      > * {\n        grid-column: 2;\n      }\n\n      &.role-user {\n        color: var(--text-secondary);\n\n        .avatar-wrap {\n          border-radius: unset;\n          height: 1.5rem;\n          margin-left: unset;\n          margin-right: unset;\n          margin-top: 0.1rem; /* Align with text. */\n          position: unset;\n          width: 1.5rem;\n        }\n      }\n\n      &.role-assistant {\n        .ai-help-message-role {\n          --icon-size: 1.5rem;\n          margin-top: -0.1rem; /* Align with text. */\n        }\n      }\n\n      .ai-help-message-role {\n        flex-shrink: 0;\n        grid-column: 1;\n        width: 2.5rem;\n      }\n\n      .ai-help-feedback {\n        display: flex;\n        flex-direction: column;\n        font-size: var(--type-tiny-font-size);\n        gap: 0.5rem;\n        text-align: right;\n\n        .glean-thumbs {\n          justify-content: flex-end;\n        }\n\n        > a {\n          color: var(--text-primary);\n          padding-right: 0.5rem;\n          text-decoration: underline;\n\n          &:hover {\n            text-decoration: none;\n          }\n        }\n      }\n\n      .ai-help-message-progress {\n        color: var(--text-secondary);\n\n        &::before {\n          background-color: var(--text-secondary);\n          content: \"\";\n          display: inline-block;\n          height: 1em;\n          margin-bottom: -0.15em;\n          margin-right: 0.4em;\n          mask-image: url(\"../../assets/icons/progress-helper.svg\");\n          mask-position: center center;\n          mask-repeat: no-repeat;\n          mask-size: contain;\n          vertical-align: baseline;\n          width: 1em;\n\n          @keyframes pulse {\n            from {\n              opacity: 1;\n            }\n\n            to {\n              opacity: 0;\n            }\n          }\n        }\n\n        &.active::before {\n          animation: pulse 1s infinite alternate;\n        }\n\n        &.complete::before {\n          background-color: var(--ai-help-icon);\n          mask-image: url(\"../../assets/icons/progress-check.svg\");\n        }\n\n        &.errored {\n          background-color: var(--background-critical);\n          border: 0;\n          border-radius: var(--elem-radius);\n          color: var(--icon-critical);\n          padding: 0.5rem 1rem;\n\n          &::before {\n            background-color: var(--icon-critical);\n            mask-image: url(\"../../assets/icons/alert-circle.svg\");\n          }\n        }\n      }\n\n      .ai-help-message-sources {\n        list-style: circle;\n        list-style-position: inside;\n        padding-left: 1.4em;\n      }\n\n      &.status-pending .ai-help-message-content,\n      &.status-in-progress .ai-help-message-content {\n        &.empty::after,\n        > :not(ol):not(ul):not(pre):not(div.code-example):last-child:after,\n        > ol:last-child li:last-child:after,\n        > pre:last-child code:after,\n        > ul:last-child li:last-child:after,\n        > div.code-example:last-child pre:last-child code:after {\n          animation: blink 1s steps(5, start) infinite;\n          content: \"▋\";\n          margin-left: 0.25rem;\n          vertical-align: baseline;\n\n          @keyframes blink {\n            to {\n              visibility: hidden;\n            }\n          }\n        }\n\n        &.empty::after {\n          margin-left: unset;\n        }\n      }\n\n      .stopped-message {\n        color: var(--text-muted);\n        display: block;\n        margin-top: 1.7rem;\n      }\n    }\n\n    .ai-help-message-content {\n      width: 100%;\n\n      &.role-user {\n        align-items: center;\n        align-items: flex-start;\n        display: flex;\n        flex-direction: row;\n        justify-content: space-between;\n        white-space: pre-wrap;\n\n        .ai-help-message-nav {\n          display: flex;\n          justify-content: space-between;\n\n          > span {\n            text-align: center;\n            white-space: nowrap;\n          }\n        }\n\n        .ai-help-user-message {\n          width: 100%;\n        }\n      }\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font: unset;\n        font-weight: 500;\n      }\n\n      p {\n        margin: 1rem 0;\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:last-child {\n          margin-bottom: 0;\n        }\n\n        &.example-header {\n          margin-bottom: 0;\n        }\n      }\n\n      ul,\n      ol {\n        margin: 1rem 0 2rem;\n        padding-left: 2rem;\n\n        li {\n          margin: 0.5rem 0;\n        }\n      }\n\n      ul {\n        list-style: disc;\n\n        ul {\n          list-style-type: circle;\n          margin: 0;\n          padding-left: 1rem;\n        }\n      }\n\n      ol {\n        list-style: decimal;\n\n        ol {\n          list-style: lower-roman;\n          margin: 0;\n        }\n      }\n\n      dd ol,\n      dd ul {\n        margin-bottom: 1rem;\n        padding-left: 3rem;\n      }\n\n      td ul,\n      td ol {\n        padding-left: 1rem;\n      }\n\n      dd li {\n        margin-bottom: 1rem;\n      }\n\n      td li {\n        margin-bottom: 0.5rem;\n      }\n\n      dl {\n        dt {\n          margin-bottom: 0.5rem;\n          margin-top: 2rem;\n        }\n\n        dd {\n          margin-bottom: 1rem;\n          margin-left: 1rem;\n\n          .notecard {\n            p {\n              padding-left: 0;\n            }\n          }\n        }\n\n        p {\n          margin: 0 0 1rem;\n        }\n      }\n    }\n\n    .ai-help-footer-actions {\n      display: flex;\n      gap: 1rem;\n      justify-content: center;\n    }\n\n    .ai-help-error {\n      margin: 0.5rem 0;\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.ai-help-history {\n  // Align first item with AI Help subtitle.\n  margin-top: 1.75rem;\n  padding-right: 1rem;\n\n  > input {\n    height: 0;\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    width: 0;\n\n    ~ .ai-help-history-toggle {\n      --button-action-transform: none;\n      background-color: var(--background-primary);\n      display: block;\n      padding: 0.5rem;\n      position: sticky;\n      top: 0;\n      width: 100%;\n      z-index: var(--z-index-mid);\n\n      > label {\n        cursor: pointer;\n        width: fit-content;\n\n        .icon-sidebar {\n          mask-image: url(\"../../assets/icons/sidebar.svg\");\n        }\n      }\n    }\n\n    &:focus-visible ~ .ai-help-history-toggle > label {\n      opacity: 1;\n      outline-color: var(--accent-primary);\n      outline-offset: 1px;\n      outline-style: auto;\n    }\n\n    &:checked {\n      // Means hidden on desktop, show on mobile.\n      ~ .ai-help-history-toggle > label {\n        .icon-sidebar {\n          mask-image: url(\"../../assets/icons/sidebar-filled.svg\");\n        }\n\n        .show-history {\n          display: none;\n        }\n\n        @media (min-width: $screen-md) {\n          .hide-history {\n            display: none;\n          }\n\n          .show-history {\n            // Show on desktop.\n            display: inherit;\n          }\n        }\n      }\n\n      ~ ol {\n        display: none;\n      }\n    }\n\n    &:not(:checked) {\n      // Means hidden on mobile, show on desktop.\n      ~ .ai-help-history-toggle {\n        > label .hide-history {\n          display: none;\n        }\n\n        @media (min-width: $screen-md) {\n          // Hiding doesn't make sense on desktop.\n          display: none;\n        }\n      }\n    }\n  }\n\n  ol {\n    > li {\n      display: flex;\n      flex-direction: column;\n      padding: 1rem 0 0.5rem;\n\n      > ol {\n        margin-bottom: 0.5rem;\n        width: 100%;\n\n        > li {\n          --icon-size: 0.6rem;\n          align-items: center;\n          display: flex;\n          flex-direction: row;\n          min-height: 3rem;\n          padding: 0.5rem;\n\n          > a {\n            color: var(--text-secondary);\n            mask-image: linear-gradient(to left, transparent, #000 3ch);\n            overflow: hidden;\n            white-space: nowrap;\n            width: 100%;\n\n            &:focus-visible {\n              mask-image: initial;\n              text-overflow: ellipsis;\n            }\n          }\n\n          &.ai-help-history-active {\n            background-color: var(--background-secondary);\n            border-radius: var(--elem-radius);\n          }\n        }\n      }\n\n      > time {\n        color: var(--text-secondary);\n        display: block;\n        font-size: var(--type-smaller-font-size);\n        padding-left: 0.5rem;\n\n        &::before {\n          --icon-size: 0.6rem;\n          background-color: var(--icon-secondary);\n          content: \"\";\n          display: inline-block;\n          height: var(--icon-size);\n          margin-right: 0.5em;\n          mask-image: url(\"../../assets/icons/message.svg\");\n          mask-size: contain;\n          vertical-align: middle;\n          width: var(--icon-size);\n        }\n      }\n    }\n  }\n\n  @media (max-width: $screen-md) {\n    background-color: var(--background-primary);\n    grid-column: center;\n    grid-row: 2/3;\n    max-height: initial;\n    padding: 0 0.5rem;\n    position: initial;\n    z-index: var(--z-index-mid);\n\n    input {\n      ~ .ai-help-history-toggle > label .icon-sidebar {\n        mask-image: url(\"../../assets/icons/sidebar-filled.svg\");\n      }\n\n      ~ ol {\n        display: none;\n      }\n    }\n\n    input:checked {\n      ~ .ai-help-history-toggle > label .icon-sidebar {\n        mask-image: url(\"../../assets/icons/sidebar.svg\");\n      }\n\n      ~ ol {\n        display: initial;\n      }\n    }\n  }\n}\n\n.ai-help-history-activation {\n  background-color: var(--background-secondary);\n  border-radius: 0.25rem;\n  // Align \"Answer History\" with \"GPT-4o-powered AI Help\".\n  margin-top: 3.5rem;\n  padding: 0.25rem;\n\n  .icons-highlighted {\n    .icon {\n      background-color: var(--ai-help-icon);\n    }\n\n    .icons-icon-wrapper {\n      --padding: 0.25rem;\n      background-color: var(--category-color-background);\n      border-radius: 1rem;\n      height: calc(var(--icon-size) + 2 * var(--padding));\n      padding: var(--padding);\n      width: calc(var(--icon-size) + 2 * var(--padding));\n    }\n  }\n\n  p {\n    margin: 0.25rem auto;\n    text-align: center;\n\n    .teaser {\n      font-size: var(--type-smaller-font-size);\n    }\n\n    a[href] {\n      font-weight: var(--font-body-strong-weight);\n      text-decoration: underline;\n\n      &:active,\n      &:hover {\n        text-decoration: unset;\n      }\n    }\n  }\n\n  @media (max-width: $screen-md) {\n    margin: 0.5rem;\n    padding: 1rem 1.5rem;\n\n    figure {\n      align-items: center;\n      display: flex;\n      flex-direction: row;\n      gap: 1.5rem;\n\n      .icons-highlighted {\n        margin-top: -0.75rem;\n      }\n\n      p {\n        margin: 0.25rem;\n        text-align: left;\n      }\n\n      a[href] {\n        display: inline-block;\n      }\n    }\n  }\n}\n","@use \"../../ui/vars\" as *;\n\n.ai-help .ai-help-landing {\n  margin: 2rem 0;\n\n  h2 {\n    font-size: var(--type-heading-h3-font-size);\n    margin: 0.5rem 0;\n  }\n\n  h3 {\n    font: unset;\n    font-size: var(--type-heading-h4-font-size);\n    font-weight: 500;\n    letter-spacing: unset;\n  }\n\n  .auth-container {\n    justify-content: flex-start;\n  }\n\n  .ai-help-landing-top {\n    display: flex;\n    flex-direction: column;\n    gap: 2rem;\n\n    @media (min-width: $screen-md) {\n      flex-direction: row;\n      gap: 6rem;\n      justify-content: space-evenly;\n    }\n\n    @media (min-width: $screen-lg) {\n      gap: 12rem;\n    }\n\n    > * {\n      flex: 1;\n    }\n\n    h1 {\n      em {\n        color: var(--category-color);\n        font-style: unset;\n        font-variation-settings: unset;\n      }\n    }\n\n    img {\n      border-radius: 1rem;\n      box-shadow: 0 3px 22px var(--border-secondary);\n    }\n  }\n\n  .ai-help-landing-features {\n    background-color: var(--background-secondary);\n    margin: 4rem 0;\n    padding: 1rem 0;\n\n    .ai-help-new-additions {\n      display: flex;\n      flex-direction: column;\n      gap: 2rem;\n      margin: 2rem 0;\n\n      @media (min-width: $screen-md) {\n        flex-direction: row;\n        gap: 3rem;\n        justify-content: space-between;\n      }\n\n      figure {\n        align-items: center;\n        display: flex;\n\n        gap: 1.5rem;\n        margin-top: 1rem;\n        text-align: center;\n\n        svg {\n          height: 3rem;\n          width: 3rem;\n        }\n\n        figcaption {\n          p {\n            margin: 0;\n          }\n        }\n\n        @media (min-width: $screen-md) {\n          // Desktop.\n          display: block;\n\n          svg {\n            height: 5rem;\n            margin: 0 auto;\n            width: 5rem;\n          }\n\n          figcaption {\n            text-align: center;\n          }\n        }\n\n        @media (max-width: #{$screen-md - 1}) {\n          // Mobile.\n\n          figcaption {\n            text-align: left;\n\n            h3 {\n              margin: 0;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  .ai-help-landing-bottom {\n    margin-bottom: 4rem;\n\n    ul.highlights {\n      margin: 2rem 0;\n\n      li {\n        &:before {\n          background-image: url(\"../../../public/assets/ai-help/lightbulb-question.svg\");\n          content: \"\";\n          display: inline-block;\n          height: 1rem;\n          margin-right: 0.5ch;\n          vertical-align: text-top;\n          width: 1rem;\n        }\n\n        &:not(:last-of-type) {\n          margin-bottom: 1rem;\n        }\n\n        em {\n          font-style: unset;\n          font-variation-settings: unset;\n          font-weight: 600;\n        }\n      }\n    }\n  }\n}\n"],"names":[],"sourceRoot":""}