:global(.webchat-fluent) .sendbox {
  --webchat__sendbox--padding: var(--webchat__padding--sendbox);

  color: var(--webchat-colorNeutralForeground1);
  font-family: var(--webchat-fontFamilyBase);
  padding: var(--webchat__sendbox--padding);
  text-rendering: optimizeLegibility;

  --webchat-sendbox-attachment-area-active: ;
  --webchat-sendbox-border-radius: var(--webchat-borderRadiusLarge);
}

/* Copilot and Copilot-deprecated variants */
:global(.webchat-fluent) .sendbox.variant-copilot {
  .sendbox__text-counter:not(.sendbox__text-counter--error) {
    visibility: hidden;
  }
}

:global(.webchat-fluent) .sendbox__sendbox {
  background-color: var(--webchat-colorNeutralBackground1);
  border-radius: var(--webchat-sendbox-border-radius);
  border: 1px solid var(--webchat-colorNeutralStroke1);
  display: grid;
  font-family: var(--webchat-fontFamilyBase);
  font-size: 14px;
  gap: 6px;
  grid-template:
    [telephone-keypad-start] 'text-area' [telephone-keypad-end]
    var(--webchat-sendbox-attachment-area-active)
    'controls' / [telephone-keypad] 1fr;
  line-height: 20px;
  padding: 8px;
  position: relative;

  &:has(.sendbox__attachment-bar--in-grid) {
    --webchat-sendbox-attachment-area-active: 'attachment-bar';
  }

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

  &::after {
    border-bottom-left-radius: var(--webchat-sendbox-border-radius);
    border-bottom-right-radius: var(--webchat-sendbox-border-radius);
    border-bottom: var(--webchat-strokeWidthThicker) solid var(--webchat-colorCompoundBrandForeground1Hover);
    bottom: -1px;
    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 50% 0 50%);
    content: '';
    height: var(--webchat-sendbox-border-radius);
    left: -1px;
    position: absolute;
    right: -1px;
    transition: clip-path var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);
  }

  &:not(:has(textarea[readonly][aria-disabled='true'])):focus-within::after {
    clip-path: inset(calc(100% - var(--webchat-strokeWidthThicker)) 0 0 0);
    transition: clip-path var(--webchat-durationNormal) var(--webchat-curveDecelerateMid);
  }

  > .sendbox__text-area--in-grid {
    grid-area: text-area;
  }

  > .sendbox__attachment-bar--in-grid {
    grid-area: attachment-bar;
  }

  > .sendbox__sendbox-controls--in-grid {
    grid-area: controls;
  }

  > .sendbox__telephone-keypad--in-grid {
    grid-area: telephone-keypad;
  }
}

:global(.webchat-fluent) .sendbox__attachment-bar:global(.send-box-attachment-bar) {
  :global(.send-box-attachment-bar__box) {
    gap: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS);
  }

  &:global(.send-box-attachment-bar--as-list-item) {
    margin-inline-end: calc(-1 * var(--webchat-spacingHorizontalS));
  }

  &:global(.send-box-attachment-bar--as-list-item .send-box-attachment-bar__box:not(:empty)) {
    padding: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS);
  }

  :global(.send-box-attachment-bar-item.send-box-attachment-bar-item--as-list-item) {
    box-shadow: var(--webchat-shadow2);
    border-radius: var(--webchat-borderRadiusMedium);
    padding: var(--webchat-spacingVerticalXXS) var(--webchat-spacingHorizontalXXS);
  }

  :global(.send-box-attachment-bar-item.send-box-attachment-bar-item--as-thumbnail) {
    border: var(--webchat-strokeWidthThin) solid var(--webchat-colorNeutralStroke1Selected);
    border-radius: var(--webchat-borderRadiusXLarge);
  }

  :global(.send-box-attachment-bar-item .send-box-attachment-bar-item__delete-button) {
    background-color: var(--webchat-colorNeutralBackground1);
    border-radius: var(--webchat-borderRadiusMedium);
    color: var(--webchat-colorNeutralForeground1);
    transition:
      background-color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid),
      color var(--webchat-durationNormal) var(--webchat-curveAccelerateMid),
      opacity var(--webchat-durationUltraFast) var(--webchat-curveAccelerateMid);

    &:hover {
      background-color: var(--webchat-colorNeutralBackground1Hover);
      color: var(--webchat-colorNeutralForeground1Hover);
    }

    &:active {
      background-color: var(--webchat-colorNeutralBackground1Pressed);
      color: var(--webchat-colorNeutralForeground1Pressed);
    }

    &:disabled,
    &[aria-disabled='true'] {
      background-color: var(--webchat-colorNeutralBackgroundDisabled);
      border-color: var(--webchat-colorNeutralStrokeDisabled);
      color: var(--webchat-colorNeutralForegroundDisabled);
    }
  }

  :global(
      .send-box-attachment-bar-item.send-box-attachment-bar-item.send-box-attachment-bar-item.send-box-attachment-bar-item--as-list-item
      .send-box-attachment-bar-item__preview
    ) {
    padding-inline: var(--webchat-spacingHorizontalS);
  }

  :global(.send-box-attachment-bar-item-file-preview.send-box-attachment-bar-item-file-preview--as-list-item) {
    gap: var(--webchat-spacingVerticalS) var(--webchat-spacingHorizontalS);
  }
}

:global(.webchat-fluent) .sendbox__sendbox-text-area {
  background-color: transparent;
  border: none;
  flex: auto;
  font-family: var(--webchat-fontFamilyBase);
  font-size: 14px;
  line-height: 20px;
  outline: none;
  margin: var(--webchat-spacingVerticalXS) var(--webchat-spacingHorizontalXS) var(--webchat-spacingVerticalNone);
  resize: none;

  --webchat__text-area--carret-color: var(--webchat-colorNeutralForeground1);

  /* Prevent zoom on focus on iOS */
  @media only screen and (hover: none) and (pointer: coarse) {
    &:focus-within {
      font-size: 16px;
    }
  }
}

:global(.webchat-fluent) .sendbox__sendbox-controls {
  align-items: center;
  display: flex;
  padding-inline-start: 4px;
}

:global(.webchat-fluent) .sendbox__text-counter {
  color: var(--webchat-colorNeutralForeground4);
  cursor: default;
  font-family: var(--webchat-fontFamilyNumeric);
  font-size: 10px;
  line-height: 14px;
  margin-inline-end: 4px;
}

:global(.webchat-fluent) .sendbox__text-counter--error {
  color: var(--webchat-colorStatusDangerForeground1);
}