MessageComposer.scss

.str-chat {
  --str-chat__message-composer-max-width: 1120px;
  --str-chat__message-composer-padding: var(--str-chat__spacing-md);
  --str-chat__message-composer-command-transition-duration: 280ms;
  --str-chat__message-composer-command-ease: cubic-bezier(0.22, 1, 0.32, 1);

  @keyframes str-chat-command-chip-enter-ltr {
    from {
      opacity: 0;
      transform: translate3d(-0.75rem, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes str-chat-command-chip-enter-rtl {
    from {
      opacity: 0;
      transform: translate3d(0.75rem, 0, 0);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  .str-chat__message-composer-container {
    width: 100%;
    min-height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--str-chat__spacing-md);
    justify-content: center;
    padding: var(--str-chat__message-composer-padding);
    min-width: 0;
    border-top: 1px solid var(--str-chat__border-core-default);
    background: var(--str-chat__background-core-elevation-1);
  }

  .str-chat__message-composer {
    display: flex;
    align-items: end;
    width: 100%;
    max-width: var(--str-chat__message-composer-max-width);
    gap: var(--str-chat__spacing-xs);
    min-width: 0;
    flex-shrink: 1;
    transition: gap var(--str-chat__message-composer-command-transition-duration)
      var(--str-chat__message-composer-command-ease);
  }

  /* Slot must be at least as wide as the + control (incl. border/outline) so the composer never overlaps it */
  .str-chat__message-composer > .str-chat__attachment-selector {
    flex-shrink: 0;
    flex-grow: 0;
    width: var(
      --str-chat__message-composer-attachment-slot-width,
      calc(var(--str-chat__button-visual-height-lg) + 2 * var(--str-chat__spacing-xxs))
    );
    max-width: var(
      --str-chat__message-composer-attachment-slot-width,
      calc(var(--str-chat__button-visual-height-lg) + 2 * var(--str-chat__spacing-xxs))
    );
    box-sizing: border-box;
    opacity: 1;
    transform: scale(1);
    transform-origin: center bottom;
    transition:
      width var(--str-chat__message-composer-command-transition-duration)
        var(--str-chat__message-composer-command-ease),
      max-width var(--str-chat__message-composer-command-transition-duration)
        var(--str-chat__message-composer-command-ease),
      opacity calc(var(--str-chat__message-composer-command-transition-duration) * 0.85)
        ease-out,
      transform var(--str-chat__message-composer-command-transition-duration)
        var(--str-chat__message-composer-command-ease),
      margin var(--str-chat__message-composer-command-transition-duration)
        var(--str-chat__message-composer-command-ease);
    overflow: hidden;
    pointer-events: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  .str-chat__message-composer--command-active {
    gap: 0;
  }

  .str-chat__message-composer--command-active > .str-chat__attachment-selector {
    width: 0;
    max-width: 0;
    min-width: 0;
    margin-inline-end: 0;
    opacity: 0;
    transform: scale(0.55);
    pointer-events: none;
  }

  .str-chat__message-composer--command-active .str-chat__command-chip {
    animation: str-chat-command-chip-enter-ltr
      var(--str-chat__message-composer-command-transition-duration)
      var(--str-chat__message-composer-command-ease) both;
  }

  [dir='rtl'] .str-chat__message-composer--command-active .str-chat__command-chip {
    animation-name: str-chat-command-chip-enter-rtl;
  }

  .str-chat__message-composer-compose-area {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    background: var(--composer-bg);
    color: var(--str-chat__input-text-default);
    border-radius: var(--str-chat__radius-3xl);
    border: 1px solid var(--str-chat__border-core-default);
  }

  .str-chat__message-composer-previews {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    overflow: hidden;
    width: 100%;
    padding: var(--str-chat__spacing-xs) var(--str-chat__spacing-xs) 0;
    gap: var(--str-chat__spacing-xxs);

    min-width: 0;
    min-height: 0;
  }

  .str-chat__message-composer-controls {
    display: flex;
    align-items: end;
    width: 100%;
    gap: var(--str-chat__spacing-xs);
    padding: calc(
      var(--str-chat__spacing-sm) - 1px
    ); // compensate for the 1px border of the composer container

    $controls-containers-min-height: 26px;

    .str-chat__message-composer-controls__text-composition-controls {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: $controls-containers-min-height;
      justify-content: center;
      gap: var(--str-chat__spacing-sm);

      .str-chat__message-composer-controls__text-composition-controls__command-chip-container {
        height: 100%;
        display: flex;
        align-items: flex-end;
        flex: 0 0 auto;
        align-self: flex-end;
      }
    }

    .str-chat__message-composer-controls__text-composition-controls__text {
      display: flex;
      align-items: center;
      width: 100%;
      min-width: 0;
      gap: var(--str-chat__spacing-xxs);
    }

    .str-chat__message-composer__actions,
    .str-chat__message-composer__additional-actions {
      height: $controls-containers-min-height;
      display: flex;
      align-items: center;
    }

    .str-chat__message-composer__additional-actions {
      flex-shrink: 0;
      min-width: 0;
      max-width: 6rem;
      opacity: 1;
      transition:
        max-width var(--str-chat__message-composer-command-transition-duration)
          var(--str-chat__message-composer-command-ease),
        opacity calc(var(--str-chat__message-composer-command-transition-duration) * 0.85)
          ease-out;
    }

    .str-chat__emoji-picker-button {
      display: flex;
      cursor: pointer;

      svg {
        height: var(--str-chat__icon-size-md);
        width: var(--str-chat__icon-size-md);
      }
    }

    .str-chat__start-recording-audio-button {
      .str-chat__icon--voice {
        height: var(--str-chat__icon-size-md);
        width: var(--str-chat__icon-size-md);
      }
    }

    .str-chat__send-button {
      .str-chat__icon--send {
        height: var(--str-chat__icon-size-md);
        width: var(--str-chat__icon-size-md);
      }
    }

    // todo: we need designs for this - I am hard-coding the dimensions
    .str-chat__stop-ai-generation-button {
      width: 30px;
      height: 28px;
      cursor: pointer;
      background-image: var(--str-chat__circle-stop-icon);
      background-color: transparent;
      border-width: 0;
    }

    .str-chat__message-composer-cooldown {
      background: var(--str-chat__background-utility-disabled);
      color: var(--str-chat__text-disabled);
      border-radius: var(--str-chat__button-radius-full);
      display: flex;
      align-items: center;
      justify-content: center;
      height: var(--str-chat__button-visual-height-md);
      width: var(--str-chat__button-visual-height-md);
    }

    [dir='rtl'] .str-chat__send-button,
    [dir='rtl'] .str-chat__start-recording-audio-button {
      svg {
        transform: scale(-1, 1);
      }
    }
  }

  // Scoped to the TextareaComposer's own elements (not the composer-controls
  // wrapper) so the textarea fills its container in any composer layout — e.g.
  // a custom composer that renders <TextareaComposer> without the default
  // MessageComposerUI. Without this the bare <textarea> falls back to its
  // intrinsic `cols` width (~160px).
  .str-chat__textarea {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;

    textarea {
      background: transparent;
      color: var(--str-chat__input-text-default);
      font: var(--str-chat__font-body-default);
      resize: none;
      border: none;
      box-shadow: none;
      outline: none;
      width: 100%;
      scrollbar-width: none;
    }
  }

  .str-chat__message-composer--command-active
    .str-chat__message-composer__additional-actions {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .str-chat__message-composer {
      transition-duration: 0.01ms;
    }

    .str-chat__message-composer > .str-chat__attachment-selector,
    .str-chat__message-composer-controls .str-chat__message-composer__additional-actions {
      transition-duration: 0.01ms;
    }

    .str-chat__message-composer--command-active .str-chat__command-chip {
      animation: none;
    }
  }

  // todo: need designs? what kind of action buttons to use on modals?
  .str-chat__recording-permission-denied-notification {
    max-width: 100%;
    padding: var(--str-chat__spacing-md);
    font-size: var(--str-chat__typography-font-size-sm);
    line-height: var(--str-chat__typography-line-height-tight);

    .str-chat__recording-permission-denied-notification__heading {
      font-weight: var(--str-chat__typography-font-weight-semi-bold);
    }

    .str-chat__recording-permission-denied-notification__message {
      margin: var(--str-chat__spacing-xs) 0 0;
      font-weight: var(--str-chat__typography-font-weight-regular, 400);
    }
  }
}

//
//
//// theme
//
//.str-chat {
//  /* The border radius of the component */
//  --str-chat__message-input-border-radius: 0;
//
//  /* The text/icon color of the component */
//  --str-chat__message-input-color: var(--str-chat__text-color);
//
//  /* The background color of the component */
//  --str-chat__message-input-background-color: var(--str-chat__secondary-background-color);
//
//  /* Top border of the component */
//  --str-chat__message-input-border-block-start: none;
//
//  /* Bottom border of the component */
//  --str-chat__message-input-border-block-end: none;
//
//  /* Left (right in RTL layout) border of the component */
//  --str-chat__message-input-border-inline-start: none;
//
//  /* Right (left in RTL layout) border of the component */
//  --str-chat__message-input-border-inline-end: none;
//
//  /* Box shadow applied to the component */
//  --str-chat__message-input-box-shadow: none;
//
//  /* The border radius used for the borders of the textarea */
//  --str-chat__message-textarea-border-radius: var(--str-chat__border-radius-md);
//
//  /* The text/icon color of the textarea */
//  --str-chat__message-textarea-color: var(--str-chat__text-color);
//
//  /* The background color of the textarea */
//  --str-chat__message-textarea-background-color: transparent;
//
//  /* Top border of the textarea */
//  --str-chat__message-textarea-border-block-start: 1px solid var(--str-chat__surface-color);
//
//  /* Bottom border of the textarea */
//  --str-chat__message-textarea-border-block-end: 1px solid var(--str-chat__surface-color);
//
//  /* Left (right in RTL layout) border of the textarea */
//  --str-chat__message-textarea-border-inline-start: 1px solid var(--str-chat__surface-color);
//
//  /* Right (left in RTL layout) border of the textarea */
//  --str-chat__message-textarea-border-inline-end: 1px solid var(--str-chat__surface-color);
//
//  /* Box shadow applied to the textarea */
//  --str-chat__message-textarea-box-shadow: none;
//
//  /* The border radius used for the borders of the send button */
//  --str-chat__message-send-border-radius: var(--str-chat__border-radius-circle);
//
//  /* The text/icon color of the send button */
//  --str-chat__message-send-color: var(--str-chat__primary-color);
//
//  /* The background color of the send button */
//  --str-chat__message-send-background-color: transparent;
//
//  /* Top border of the send button */
//  --str-chat__message-send-border-block-start: 0;
//
//  /* Bottom border of the send button */
//  --str-chat__message-send-border-block-end: 0;
//
//  /* Left (right in RTL layout) border of the send button */
//  --str-chat__message-send-border-inline-start: 0;
//
//  /* Right (left in RTL layout) border of the send button */
//  --str-chat__message-send-border-inline-end: 0;
//
//  /* Box shadow applied to the send button */
//  --str-chat__message-send-box-shadow: none;
//
//  /* The color of the send button in disabled state */
//  --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
//
//  /* The background color of the send button in disabled state */
//  --str-chat__message-send-disabled-background-color: var(--str-chat__disabled-color);
//
//  /* The border radius used for the borders of the audio recording button */
//  --str-chat__start-recording-audio-button-border-radius: var(--str-chat__border-radius-circle);
//
//  /* The text/icon color of the audio recording button */
//  --str-chat__start-recording-audio-button-color: var(--str-chat__text-low-emphasis-color);
//
//  /* The background color of the audio recording button */
//  --str-chat__start-recording-audio-button-background-color: transparent;
//
//  /* Top border of the audio recording button */
//  --str-chat__start-recording-audio-button-border-block-start: 0;
//
//  /* Bottom border of the audio recording button */
//  --str-chat__start-recording-audio-button-border-block-end: 0;
//
//  /* Left (right in RTL layout) border of the audio recording button */
//  --str-chat__start-recording-audio-button-border-inline-start: 0;
//
//  /* Right (left in RTL layout) border of the audio recording button */
//  --str-chat__start-recording-audio-button-border-inline-end: 0;
//
//  /* Box shadow applied to the audio recording button */
//  --str-chat__start-recording-audio-button-box-shadow: none;
//
//  /* The color of the audio recording button in disabled state */
//  --str-chat__start-recording-audio-button-disabled-color: var(--str-chat__disabled-color);
//
//  /* The background color of the audio recording button in disabled state */
//  --str-chat__start-recording-audio-button-disabled-background-color: transparent;
//
//  /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
//
//  /* The text/icon color of the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-color: var(--str-chat__text-low-emphasis-color);
//
//  /* The background color of the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-background-color: transparent;
//
//  /* Top border of the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-border-block-start: 0;
//
//  /* Bottom border of the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-border-block-end: 0;
//
//  /* Left (right in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-border-inline-start: 0;
//
//  /* Right (left in RTL layout) border of the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-border-inline-end: 0;
//
//  /* Box shadow applied to the tool buttons of the message input (such as attachment upload button) */
//  --str-chat__message-input-tools-box-shadow: none;
//

//
//  /* Color applied to an icon in a button that opens attachment selector */
//  --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
//
//  /* Color applied to an icon in a button that opens attachment selector when hovered over */
//  --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
//
//  /* Color applied to an attachment selector menu item icon when hovered over */
//  --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
//
//  /* Color applied to an attachment selector menu item icon when hovered over or focused */
//  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(
//                  --str-chat__primary-color
//  );
//}
//
//.str-chat__message-input {
//  @include utils.component-layer-overrides('message-input');
//
//  .str-chat__file-input-container {
//    --str-chat-icon-color: var(--str-chat__message-input-tools-color);
//    @include utils.component-layer-overrides('message-input-tools');
//
//    svg path {
//      fill: var(--str-chat__message-input-tools-color);
//    }
//  }
//
//  .str-chat__attachment-preview-image-error {
//    svg path {
//      fill: var(--str-chat__primary-color);
//    }
//  }
//
//
//
//.str-chat__attachment-selector-actions-menu {
//  .str-chat__attachment-selector-actions-menu__button {
//    color: var(--str-chat__text-low-emphasis-color);
//
//    .str-chat__context-menu__button-icon {
//      background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
//    }
//
//    &:hover,
//    &:focus {
//      color: var(--str-chat__text-color);
//
//      .str-chat__context-menu__button-icon {
//        background-color: var(
//                        --str-chat__attachment-selector-actions-menu-button-icon-color-active
//        );
//      }
//    }
//  }
//
//  .str-chat__attachment-selector-actions-menu__upload-file-button {
//    .str-chat__context-menu__button-icon {
//      -webkit-mask: var(--str-chat__folder-icon) no-repeat center / contain;
//      mask: var(--str-chat__folder-icon) no-repeat center / contain;
//    }
//  }
//
//  .str-chat__attachment-selector-actions-menu__create-poll-button {
//    .str-chat__context-menu__button-icon {
//      -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain;
//      mask: var(--str-chat__poll-icon) no-repeat center / contain;
//    }
//  }
//
//  .str-chat__attachment-selector-actions-menu__add-location-button {
//    .str-chat__context-menu__button-icon {
//      -webkit-mask: var(--str-chat__location-icon) no-repeat center / contain;
//      mask: var(--str-chat__location-icon) no-repeat center / contain;
//    }
//  }
//}
//