.askBlock {
  background: rgba(235, 235, 235, 0.5);
  border-radius: 8px;
  &.mobile {
    padding: 8px 0 0 0 !important;
  }
  .messageList {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .messageWrapper {
    display: flex;
    width: 100%;
  }
  .userMessage {
    display: flex;
    justify-content: flex-end;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 20px;
    border-radius: 8px;
    background-color: #fff;
    color: #000;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .isExpanded {
    white-space: normal;
    -webkit-line-clamp: unset;
    max-height: none;
  }
  .assistantMessage {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    color: rgba(0, 0, 0, 0.65);
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: var(--font-weight-normal, 400);
    line-height: 24px; /* 150% */
  }
  .askIframeWrapper {
    :global(.content-render-iframe-sandbox) {
      height: auto !important;
    }
  }
  .userInput {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 12px;
    border-radius: var(--border-radius-rounded-md, 8px);
    border: var(--border-width-border, 1px) solid var(--base-input, #e5e5e5);
    background: var(--custom-background-dark-input-30, #fff);
    box-shadow: var(--shadow-xs-offset-x, 0) var(--shadow-xs-offset-y, 1px)
      var(--shadow-xs-blur-radius, 2px) var(--shadow-xs-spread-radius, 0)
      var(--shadow-xs-color, rgba(0, 0, 0, 0.05));

    > input {
      font-size: 16px;
      color: #333333;
    }
    > button {
      border: none;
      outline: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      &.isSending {
        background-color: #e5e5e5;
      }
      :global(.lucide-send) {
        width: 12.7px;
        height: 12.7px;
        color: #0a0a0a;
      }
    }
  }
}

.mobile {
  position: relative;
  background: transparent;
  margin: 0;
  border-radius: 0;
  padding: 0;

  > .messageList {
    margin: 0;
    .messageWrapper {
      justify-content: flex-start !important;
      border-radius: 4px;
      background: #e5e5e5;
      .userMessage {
        background: transparent;
        color: rgba(0, 0, 0, 0.65);
        font-family: 'PingFang SC';
        font-size: 12px;
        font-style: normal;
        font-weight: var(--font-weight-normal, 400);
        line-height: 20px; /* 166.667% */
        padding: 3px 12px;
      }
      .userMessageExpanded {
        white-space: normal;
        -webkit-line-clamp: none;
      }
    }
  }
  .userInput {
    border: none;
    padding: 20px 20px 40px 20px;
  }
  > .userInput {
    border: var(--border-width-border, 1px) solid var(--base-input, #e5e5e5);
    padding: 3px 12px;
  }
}

.mobileOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1200;
}

.mobilePanel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1201;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 32px rgba(28, 44, 64, 0.16);
  max-height: 85vh;
  overflow: hidden;
}

.mobilePanelLandscape {
  max-height: min(calc(var(--app-viewport-block-unit, 1dvh) * 80), 560px);
}

.mobilePanelFullscreen {
  top: 0;
  bottom: 0;
  border-radius: 0;
  max-height: none;
}

.mobileHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eceff4;
}

.mobileTitle {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0a;
}

.mobileIcon {
  width: 20px;
  height: 20px;
}

.mobileActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mobileActionButton {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mobileActionButton:active {
  background: rgba(26, 104, 235, 0.08);
}

.mobileContent {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobileContentHidden {
  display: none;
}

.mobileMessageList {
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.mobilePanel .messageWrapper {
  width: 100%;
}

.mobilePanel .userMessage,
.mobilePanel .assistantMessage {
  max-width: 85%;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 20px;
  background: #f4f5f5;
  color: #000;
  white-space: normal;
  -webkit-line-clamp: none;
}

.mobilePanel .assistantMessage {
  display: block;
  color: rgba(0, 0, 0, 0.75);
}

.mobilePanel .assistantMessage :global(.content-render) {
  padding: 0;
  margin: 0;
}

.mobileInput {
  border: none;
  box-shadow: none;
  padding: 16px 20px 16px;
  background: #fff;
  border-top: 1px solid #eceff4;
  gap: 12px;

  > input {
    padding: 14px 12px;
    color: #0a0a0a;
    border-radius: var(--border-radius-rounded-md, 8px);
    border: var(--border-width-border, 1px) solid var(--base-input, #e5e5e5);
    background: var(--base-background, #fff);
    font-size: var(--text-sm-font-size, 14px);
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--text-sm-line-height, 20px); /* 142.857% */
  }

  > button {
    width: 28px !important;
    height: 28px !important;
    color: #fff;
  }

  > button.isSending {
    background: #e5e5e5;
  }

  > button :global(.lucide-send) {
    width: 18px !important;
    height: 18px !important;
  }
}

.mobilePanelLandscape .mobileInput {
  padding-bottom: 20px;
}

.desktopSlidePanel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  height: min(
    480px,
    calc(calc(var(--app-viewport-block-unit, 1dvh) * 100) - 240px)
  );
  max-height: 100%;
  background: #fff !important;
  border-radius: 24px;
  padding: 0 !important;
}

.desktopSlidePanelEmpty {
  height: auto;
}

.desktopSlideHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid #eceff4;
}

.desktopSlideTitle {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  color: #0a0a0a;
}

.desktopSlideActionButton {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #4b5563;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.desktopSlideActionButton:hover {
  background: rgba(26, 104, 235, 0.08);
}

.desktopSlideContent {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.desktopSlideContentHidden {
  display: none;
}

.desktopSlideMessageList {
  flex-direction: column;
  gap: 12px;
  margin: 0 !important;
}

.desktopSlideInput {
  flex-shrink: 0;
  border: none;
  box-shadow: none;
  padding: 20px;
  background: #fff;
  // border-top: 1px solid #eceff4;
  gap: 12px;

  > input {
    padding: 14px 12px;
    color: #0a0a0a;
    border-radius: var(--border-radius-rounded-md, 8px);
    border: var(--border-width-border, 1px) solid var(--base-input, #e5e5e5);
    background: var(--base-background, #fff);
    font-size: var(--text-sm-font-size, 14px);
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--text-sm-line-height, 20px);
  }

  > button {
    width: 28px !important;
    height: 28px !important;
    color: #fff;
  }

  > button.isSending {
    background: #e5e5e5;
  }

  > button :global(.lucide-send) {
    width: 18px !important;
    height: 18px !important;
  }
}

.askBlock {
  &:global(.listen-slide-ask-block) {
    margin-top: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-radius: 24px;

    &.desktopSlidePanelEmpty {
      border-radius: 24px 24px 0 0;
    }

    &:not(.mobile) {
      .messageWrapper {
        width: 100%;
      }

      .userMessage {
        max-width: 85%;
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 16px;
        line-height: 20px;
        background: #f4f5f5;
        color: #000;
        white-space: normal;
        -webkit-line-clamp: none;
      }

      .assistantMessage {
        max-width: 85%;
        display: block;
        border-radius: 12px;
        padding: 10px 14px;
        font-size: 16px;
        line-height: 20px;
        background: #f4f5f5;
        color: rgba(0, 0, 0, 0.75);
      }

      .assistantMessage :global(.content-render) {
        padding: 0;
        margin: 0;
      }
    }
  }
}
