discourse-ai/assets/stylesheets/modules/ai-bot-conversations/common.scss

@use "lib/viewport";

// Hide the new question button from the hamburger menu's footer on desktop
.desktop-view .hamburger-panel .ai-new-question-button {
  display: none;
}

body.has-ai-conversations-sidebar {
  .ai-new-question-button {
    margin: 1.8em 1rem 0;
  }

  .sidebar-wrapper {
    .ai-conversations-panel {
      padding-top: 1em;
    }

    // ai related sidebar content
    [data-section-name="ai-conversations-history"] {
      .sidebar-section-header-wrapper {
        pointer-events: none;
        font-size: var(--font-down-1);

        .sidebar-section-header-caret {
          display: none;
        }

        .sidebar-section-header-text {
          letter-spacing: 0.5px;
        }
      }

      .sidebar-section-link-wrapper {
        .sidebar-section-link {
          height: unset;
          padding-block: 0.65em;
          font-size: var(--font-down-1);
          letter-spacing: 0.35px;
          border-radius: 0 var(--border-radius) var(--border-radius) 0;

          .sidebar-section-link-content-text {
            white-space: normal;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
        }
      }

      .sidebar-section-link-prefix {
        align-self: start;
      }
    }
  }

  // topic elements
  #topic-footer-button-share-and-invite,
  body:not(.staff) #topic-footer-button-archive,
  #topic-footer-buttons .topic-notifications-button,
  .bookmark-menu-trigger,
  .more-topics__container,
  .private-message-glyph-wrapper,
  .topic-header-participants,
  .topic-above-footer-buttons-outlet,
  .topic-map,
  #topic-footer-buttons .topic-footer-main-buttons details {
    display: none;
  }

  .topic-timer-info {
    border: none;
  }

  .topic-owner .actions .create-flag {
    // why flag my own post
    display: none;
  }

  .container.posts {
    margin-bottom: 0;

    .topic-navigation.with-timeline {
      top: calc(var(--header-offset, 60px) + 5.5em);
    }

    .topic-navigation {
      .topic-notifications-button {
        display: none;
      }
    }
  }

  #topic-title {
    display: flex;
    justify-content: center;
    width: 100%;

    .title-wrapper {
      width: 100%;
      max-width: 960px;
    }
  }

  .small-action,
  .onscreen-post .row {
    justify-content: center;
  }

  #topic-footer-buttons {
    width: calc(100% - 6.5em);
    margin-top: 0;

    @include viewport.until(md) {
      max-width: unset;
      width: 100%;
    }

    @include viewport.from(xl) {
      width: 100%;
      max-width: 51em;
    }

    .topic-footer-main-buttons {
      justify-content: flex-end;
    }
  }

  #topic-progress-wrapper.docked {
    display: none;
  }

  @include viewport.until(lg) {
    .archetype-private_message .topic-post:last-child {
      margin-bottom: 0;
    }
  }

  nav.post-controls .actions button {
    padding: 0.5em 0.65em;

    &.reply {
      .d-icon {
        margin-right: 0.45em;
      }
    }
  }

  .topic-footer-main-buttons {
    margin-left: calc(var(--topic-avatar-width) - 1.15em);
  }

  .ai-bot-conversations {
    display: flex;
    flex-direction: column;
    height: calc(100dvh - var(--header-offset) - 5em);

    .persona-llm-selector {
      display: flex;
      gap: 0.5em;
      justify-content: flex-start;

      &__selection-wrapper {
        display: flex;
        flex-direction: column;

        label {
          font-size: var(--font-down-1);
          font-weight: 300;
          margin-left: 1em;
          margin-bottom: 0;
        }
      }

      .btn {
        display: flex;
        justify-content: flex-start;
        background-color: transparent;
        font-weight: bold;
      }

      .btn:hover,
      .btn:focus {
        background-color: transparent;
        color: var(--primary);
      }

      .btn:hover .d-icon,
      .btn:focus .d-icon {
        color: var(--primary);
      }
    }

    &__content-wrapper {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;

      .loading-container {
        display: contents;
      }

      // optical centering for layout balance
      @media screen and (min-height: 600px) {
        h1 {
          margin-top: -6em;
        }
      }
    }

    &__input-wrapper {
      display: flex;
      align-items: stretch;
      gap: 0.5em;
      width: 100%;

      @include viewport.from(sm) {
        width: 80%;
        max-width: 46em;
      }

      .ai-conversation-submit {
        align-self: end;
        min-height: 2.5em;
        max-height: 2.5em;
      }

      .spinner {
        margin: 0;
        width: 2em;
        height: 2em;
      }

      #ai-bot-conversations-input {
        width: 100%;
        margin: 0;
        resize: none;
        border-radius: var(--d-button-border-radius);
        max-height: 30vh;
        overflow: hidden;

        &:focus {
          outline: none;
          border-color: var(--primary-high);
        }
      }
    }

    .ai-disclaimer {
      text-align: center;
      font-size: var(--font-down-1);
      color: var(--primary-700);

      @include viewport.from(sm) {
        width: 80%;
        max-width: 46em;
      }
    }

    .sidebar-footer-wrapper {
      display: flex;

      .powered-by-discourse {
        display: block;
      }

      button {
        display: none;
      }
    }

    .topic-footer-main-buttons {
      justify-content: flex-end;
    }
  }

  @include viewport.until(sm) {
    .share-ai-conversation-button {
      .d-icon {
        margin: 0;
      }

      .d-button-label {
        display: none;
      }
    }
  }

  // custom user card link
  .user-card-meta__profile-link {
    display: block;
    padding: 0.5em 0 0.25em;

    .d-icon {
      font-size: var(--font-down-1);
      margin-right: 0.15em;
    }
  }
}