// PaymentResultToastV2 —— 样式 1:1 参考 demo（pisell-payment-complete-toast-standalone.html）
// 仅做命名空间隔离；Detail 展开内容由 PisellSaleSummaryDetail 自带样式负责。

@prefix: ~'payment-result-toast-v2';

@radius-lg: 20px;
@radius-md: 16px;
@ink: #f5f7ff;
@muted: #9aa4d6;
@line: rgba(148, 163, 184, 0.35);
@surface-alt: #1a2442;
@green: #34d399;
@orange: #fbbf24;
@red: #f97066;
@blue: #4f9dff;
@footer-surface-bg: #080c16;

// 游离容器（由全局管理器创建并定位）
[data-toast-v2-id] {
  pointer-events: none !important;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  &.toast-moving {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  }

  &.toast-exiting {
    opacity: 0;
    transform: translateX(-100%) scale(0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.6, 1) !important;
  }
}

.@{prefix}-root {
  // 宽度由游离容器（left + right 双约束）决定：窄屏自动收窄，宽屏封顶 420px。
  width: 100%;
  max-width: 420px;
  opacity: 1;
  pointer-events: auto;
  animation: payment-result-toast-v2-slide-up 0.36s
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes payment-result-toast-v2-slide-up {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.@{prefix} {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: @radius-lg;
  border: 1px solid color-mix(in srgb, @line 55%, transparent);
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: @ink;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  pointer-events: auto;

  // ============ 关闭按钮 ============
  &__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid color-mix(in srgb, @line 70%, transparent);
    border-radius: 8px;
    background: transparent;
    color: @ink;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;

    &:hover {
      border-color: color-mix(in srgb, @blue 45%, @line);
    }
  }

  // ============ Hero ============
  &__hero {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 44px 8px 16px;
    font-weight: 750;
    line-height: 1.25;
    color: @green;

    &--success {
      color: @green;
    }

    &--warning {
      color: @orange;
    }

    &--error {
      color: @red;
    }
  }

  &__hero-check {
    flex: 0 0 auto;
    display: inline-flex;
    margin-top: 2px;
  }

  &__hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    gap: 2px;
    font-size: 1.26rem;
  }

  &__hero-status {
    word-break: break-word;
  }

  &__hero-change {
    font-size: 1.12rem;
    font-weight: 700;
    color: @orange;
  }

  &__hero-reason {
    font-size: 0.92rem;
    font-weight: 600;
    color: color-mix(in srgb, @ink 70%, transparent);
  }

  // ============ 进度条 ============
  &__progress {
    position: relative;
    height: 4px;
    background: color-mix(in srgb, @line 45%, transparent);
    overflow: hidden;
  }

  &__progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-width: 0;
    width: 100%;
    background: @green;
    will-change: width;
    transition: none;
  }

  &--warning &__progress-fill {
    background: @orange;
  }

  &--error &__progress-fill {
    background: @red;
  }

  // ============ 本次支付明细 ============
  &__session {
    padding: 6px 16px 10px;
  }

  &__session-lines {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    // 明细过多时限高滚动，避免撑高卡片
    max-height: 168px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    // 预留滚动条空间，避免金额贴住/被滚动条遮挡
    padding-right: 4px;

    // 细化滚动条，贴合深色卡片
    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 6px;
      background: color-mix(in srgb, @line 80%, transparent);
    }

    &::-webkit-scrollbar-track {
      background: transparent;
    }
  }

  &__session-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0;

    dt {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 650;
      color: color-mix(in srgb, @ink 90%, transparent);
    }

    dd {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: @ink;
      text-align: right;
    }

    &.is-nested {
      padding-left: 12px;

      dt {
        font-size: 0.88rem;
        font-weight: 550;
        color: @muted;
      }

      dd {
        font-size: 0.88rem;
        font-weight: 650;
        color: color-mix(in srgb, @ink 82%, transparent);
      }
    }

    &.is-change dt,
    &.is-change dd {
      color: @orange;
    }

    &.is-balance dt,
    &.is-balance dd {
      color: @green;
      font-weight: 600;
    }
  }

  // ============ 操作按钮区 ============
  &__actions {
    padding: 10px 12px 12px;
  }

  // 底部操作按钮：配色参考 demo
  // （pisell-payment-complete-toast-standalone.html 的
  // .pos-payment-complete-toast__action-btn）：中性深色半透明底 + 细灰描边 +
  // hover 偏蓝；主操作走 accent 蓝；失败态走红色。
  // Toast 游离渲染脱离 app 主题，故在此显式实现外观。
  @action-danger: #f04438;

  &__action-bar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  &__action-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
  }

  &__action-btn {
    height: 56px;
    min-height: 56px;
    padding: 0 18px !important;
    border-radius: 14px !important;
    border: 1px solid color-mix(in srgb, @line 70%, transparent) !important;
    background: color-mix(in srgb, @surface-alt 55%, transparent) !important;
    color: @ink !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;

    // 图标与文字统一白色
    .anticon,
    svg,
    [class*='action-icon'] {
      color: @ink;
      font-size: 20px;
    }

    &:hover,
    &:focus {
      border-color: color-mix(in srgb, @blue 45%, @line) !important;
      background: color-mix(in srgb, @surface-alt 75%, transparent) !important;
      color: @ink !important;
    }

    // 撑开的主按钮（如 Print receipt / Retry / Change payment）
    &--grow {
      flex: 1 1 0;
      min-width: 0;
    }

    // More 按钮保持较窄
    &--more {
      flex: 0 0 auto;
      min-width: 110px;
    }

    // 主操作（部分支付场景）：实心 accent 蓝（对齐 demo 的 --blue）
    &--primary {
      background: @blue !important;
      border-color: @blue !important;
      color: #ffffff !important;

      &:hover,
      &:focus {
        background: color-mix(in srgb, @blue 85%, #000) !important;
        border-color: color-mix(in srgb, @blue 85%, #000) !important;
        color: #ffffff !important;
      }
    }

    // 失败态：整组按钮走红色描边
    &--danger {
      border-color: color-mix(in srgb, @action-danger 60%, transparent) !important;
      background: color-mix(in srgb, @action-danger 12%, transparent) !important;
      color: @ink !important;

      .anticon,
      svg,
      [class*='action-icon'] {
        color: @ink;
      }

      &:hover,
      &:focus {
        border-color: @action-danger !important;
        background: color-mix(in srgb, @action-danger 22%, transparent) !important;
        color: @ink !important;
      }

      // 失败态主操作：实心红
      &.@{prefix}__action-btn--primary {
        background: @action-danger !important;
        border-color: @action-danger !important;
        color: #ffffff !important;

        &:hover,
        &:focus {
          background: color-mix(in srgb, @action-danger 88%, #000) !important;
          border-color: color-mix(in srgb, @action-danger 88%, #000) !important;
        }
      }
    }
  }
}

// footer 条复用 sale detail 的 `pisell-sale-detail-summary` 样式
// （见 SaleDetailFooter.tsx 中 import 的 saleDetail/components/Summary/index.less），
// 两处 summary 外观/顺序保持一致，故此处不再单独维护 footer 样式。

// 例外：sale detail 的展开面板原本走 antd Popover（portal），高度按视口
// `calc(100vh - 64px)` 取值；而 V2 是「内联展开」在卡片内，直接套用会撑高/溢出。
// 故仅在 V2 作用域内给内联展开面板限高，内部由 __popover-content 自带滚动。
.@{prefix} .pisell-sale-detail-summary__popover-panel {
  max-height: 280px;
}

// 避免双滚动条：PisellSaleSummaryDetail 自带 `max-height: min(72vh,620px); overflow:auto`，
// 在 V2 内联展开里会与外层 280 限高各滚一层。此处仅在 V2 作用域内取消它的自滚动，
// 让滚动只发生在外层 __popover-content（280）那一层。
.@{prefix} .pisell-sale-detail-summary__popover-content .pisell-sale-summary-detail {
  max-height: none;
  overflow: visible;
}
