/******** borderSize *******/
/******** borderStyle *******/
/******** radius *******/
/******** shadow distance *******/
/******** size *******/
/******** spacing *******/
/******** shadow *******/
/******** opacity *******/
/******** fontSize *******/
/******** fontWeight ********/
/******** Primary *******/
/******** success *******/
/******** warning *******/
/******** danger *******/
/******** link *******/
/******** radius *******/
/********* icon hover *********/
.sd-sender {
  box-sizing: border-box;
}
.sd-sender-main {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
  border-radius: calc(var(--sd-border-radius-medium) * 2);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
}
.sd-sender-disabled {
  background: var(--sd-color-neutral-2);
  border-color: transparent;
}
.sd-sender-content {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  box-sizing: border-box;
  width: 100%;
  padding-block: 12px;
  padding-inline: 12px;
}
.sd-sender-prefix, .sd-sender-actions-list {
  flex: none;
}
.sd-sender-input {
  flex: auto;
  align-self: center;
  min-width: 0;
  padding: 0;
  color: var(--sd-color-neutral-10);
  font-size: 14px;
  caret-color: rgb(var(--sd-primary-6));
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: none;
}
.sd-sender-input.sd-sender-input.sd-textarea-wrapper {
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sd-sender-input.sd-sender-input.sd-textarea-wrapper .sd-textarea {
  min-height: 32px;
  padding: 5px 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.sd-sender-input.sd-sender-input.sd-textarea-wrapper .sd-textarea:focus, .sd-sender-input.sd-sender-input.sd-textarea-wrapper .sd-textarea:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}
.sd-sender-actions-list {
  display: flex;
}
.sd-sender-actions-list-presets {
  display: flex;
  gap: 8px;
}
.sd-sender-actions-btn.sd-button-text {
  color: rgb(var(--sd-primary-6));
}
.sd-sender-actions-btn-disabled.sd-button-text {
  color: color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent);
  border-color: transparent;
}
.sd-sender-actions-btn-disabled:not(.sd-button-text) {
  color: #fff;
  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 45%, transparent);
  border-color: transparent;
}
.sd-sender-actions-btn-loading-button {
  padding: 0;
  border: 0;
}
.sd-sender-actions-btn-loading-icon {
  width: 32px;
  height: 32px;
  vertical-align: top;
}
.sd-sender-actions-btn-recording-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: top;
}
.sd-sender-loading-spinner {
  transform-origin: center;
  animation: sender-loading-rotate 1s linear infinite;
}
.sd-sender-recording-bar {
  transform-box: fill-box;
  transform-origin: center;
  animation: sender-recording-bar 0.8s ease-in-out infinite;
}
.sd-sender-footer {
  display: flex;
  gap: 8px;
  align-items: center;
  box-sizing: border-box;
  padding-block: 4px 12px;
  padding-inline: 12px;
}
.sd-sender-footer-content {
  flex: auto;
  min-width: 0;
}
.sd-sender-footer-suffix {
  flex: none;
  margin-inline-start: auto;
}
.sd-sender-header {
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
}
.sd-sender-header-header {
  display: flex;
  align-items: center;
  padding-block: 10px;
  padding-inline: 16px 8px;
  font-size: 14px;
  line-height: 1.5715;
  background: var(--sd-color-neutral-2);
  border-radius: calc(var(--sd-border-radius-medium) * 2) calc(var(--sd-border-radius-medium) * 2) 0 0;
}
.sd-sender-header-title {
  flex: auto;
}
.sd-sender-header-close {
  flex: none;
}
.sd-sender-header-content {
  padding: 16px;
}
.sd-sender-header-motion-enter-active, .sd-sender-header-motion-leave-active {
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.3s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.sd-sender-input-slot.sd-rich-text-editor {
  display: block;
  align-self: center;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.sd-sender-input-slot.sd-rich-text-editor:hover, .sd-sender-input-slot.sd-rich-text-editor:focus-within {
  border: 0;
  box-shadow: none;
}
.sd-sender-input-slot .sd-rich-text-editor-content {
  box-sizing: border-box;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  caret-color: rgb(var(--sd-primary-6));
  outline: none;
}
.sd-sender-input-slot .sd-rich-text-editor-placeholder {
  inset-block-start: 0;
  inset-inline-start: 0;
  color: var(--sd-color-neutral-4);
}
.sd-sender-input-slot .sd-rich-text-editor-component {
  margin-inline: 4px;
}
.sd-sender-input-slot .sd-rich-text-editor-component-control {
  min-height: calc(14px * 1.5715 + 2px);
  font-size: inherit;
  line-height: inherit;
}
.sd-sender-input-slot-content {
  width: 100%;
  min-height: 32px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
.sd-sender-slot {
  display: inline-flex;
  align-items: center;
}
.sd-sender-skill {
  display: inline-block;
  height: calc(14px * 1.5715 + 2px);
  margin-block: 1px;
  margin-inline-start: -1px;
  vertical-align: baseline;
  word-break: break-all;
}
.sd-sender-skill-empty::after {
  display: inline-block;
  height: inherit;
  color: var(--sd-color-neutral-4);
  content: attr(data-placeholder);
  pointer-events: none;
}
.sd-sender-skill-wrapper {
  display: inline-flex;
  height: 100%;
}
.sd-sender-skill-tag {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 100%;
  color: rgb(var(--sd-primary-6));
  font-weight: 500;
  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent);
  border-radius: var(--sd-border-radius-medium);
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
  padding-inline: 8px;
}
.sd-sender-skill-tag:hover {
  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 15%, transparent);
}
.sd-sender-skill-tag-close {
  display: inline-flex;
  color: rgb(var(--sd-primary-6));
  font-size: 12px;
  transition: color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
}
.sd-sender-skill-tag-close:not(.sd-sender-skill-tag-close-disabled):hover {
  color: rgb(var(--sd-primary-5));
}
.sd-sender-skill-tag-close-disabled {
  color: var(--sd-color-neutral-4);
  cursor: not-allowed;
}
.sd-sender-skill-holder {
  width: 10px;
  height: 100%;
}
.sd-sender-switch {
  display: inline-block;
}
.sd-sender-switch .sd-sender-switch-content:not(:disabled):hover {
  color: var(--sd-color-neutral-10);
  background: color-mix(in srgb, var(--sd-color-neutral-3) 4%, transparent);
  border-color: var(--sd-color-neutral-3);
}
.sd-sender-switch-checked .sd-sender-switch-content {
  color: rgb(var(--sd-primary-6));
  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 8%, transparent);
  border-color: rgb(var(--sd-primary-6));
}
.sd-sender-switch-checked .sd-sender-switch-content:not(:disabled):hover {
  color: rgb(var(--sd-primary-6));
  background: color-mix(in srgb, rgb(var(--sd-primary-6)) 10%, transparent);
  border-color: rgb(var(--sd-primary-6));
}

@keyframes sender-loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes sender-recording-bar {
  0%, 100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sd-sender-loading-spinner, .sd-sender-recording-bar {
    animation: none;
  }
  .sd-sender-header-motion-enter-active, .sd-sender-header-motion-leave-active {
    transition-duration: 0.01ms;
  }
}