/* ============================================================
   统一提示组件 · 皮肤层（ui-feedback.css）

   依赖：theme-tokens.css（全部配色/圆角/阴影均取令牌，无硬编码色值）
   覆盖：Toast（轻提示） / Modal（alert + confirm） / Loading（加载遮罩）
   命名：统一 ui- 前缀，避免与既有页面样式冲突
   ============================================================ */

/* ---------------- 语义色变量（按类型作用于组件根节点） ---------------- */
.ui-tone--success { --ui-tone: var(--app-success); --ui-tone-rgb: var(--app-success-rgb); }
.ui-tone--error   { --ui-tone: var(--app-danger-solid); --ui-tone-rgb: var(--app-danger-rgb); }
.ui-tone--warning { --ui-tone: var(--app-warning); --ui-tone-rgb: var(--app-warning-rgb); }
.ui-tone--info    { --ui-tone: var(--app-primary); --ui-tone-rgb: var(--app-primary-rgb); }

/* ============================================================
   一、Toast 轻提示
   ============================================================ */
.ui-toast-wrap {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: min(92vw, 460px);
    pointer-events: none;
}

.ui-toast-wrap--top-right {
    left: auto;
    right: 20px;
    transform: none;
    align-items: flex-end;
}

.ui-toast {
    pointer-events: auto;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    min-width: 220px;
    max-width: min(92vw, 460px);
    padding: 11px 14px;
    background: var(--app-card);
    border: 1px solid var(--app-border);
    border-left: 3px solid var(--ui-tone, var(--app-primary));
    border-radius: var(--app-radius-btn);
    box-shadow: var(--app-shadow-pop);
    color: var(--app-text);
    font-size: var(--app-font-size-base);
    line-height: 1.5;
    animation: ui-toast-in .22s cubic-bezier(.16, 1, .3, 1);
}

.ui-toast.is-leaving {
    animation: ui-toast-out .18s ease forwards;
}

.ui-toast__icon {
    flex-shrink: 0;
    margin-top: 1px;
    font-size: 18px;
    line-height: 1;
    color: var(--ui-tone, var(--app-primary));
}

.ui-toast__main {
    flex: 1;
    min-width: 0;
}

.ui-toast__title {
    font-weight: 600;
    color: var(--app-text);
    margin-bottom: 2px;
}

.ui-toast__text {
    color: var(--app-text-secondary);
    word-break: break-word;
    white-space: pre-wrap;
}

.ui-toast__text:only-child {
    color: var(--app-text);
}

.ui-toast__close {
    flex-shrink: 0;
    margin: -2px -4px 0 2px;
    padding: 2px;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--app-radius-sm);
    transition: color .15s, background .15s;
}

.ui-toast__close:hover {
    color: var(--app-text);
    background: var(--app-bg);
}

@keyframes ui-toast-in {
    from { opacity: 0; transform: translateY(-12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ui-toast-out {
    to { opacity: 0; transform: translateY(-8px) scale(.98); }
}

/* ============================================================
   二、Modal 强提示（alert / confirm）
   ============================================================ */
.ui-modal-mask {
    position: fixed;
    inset: 0;
    z-index: 3010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(20, 23, 28, .45);
    animation: ui-fade-in .18s ease;
}

.ui-modal-mask.is-leaving {
    animation: ui-fade-out .16s ease forwards;
}

.ui-modal {
    box-sizing: border-box;
    width: 420px;
    max-width: 100%;
    background: var(--app-card);
    border-radius: var(--app-radius-card);
    box-shadow: var(--app-shadow-pop);
    overflow: hidden;
    animation: ui-modal-in .22s cubic-bezier(.16, 1, .3, 1);
}

.ui-modal-mask.is-leaving .ui-modal {
    animation: ui-modal-out .16s ease forwards;
}

.ui-modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 20px 0;
}

.ui-modal__icon {
    flex-shrink: 0;
    font-size: 22px;
    line-height: 1;
    color: var(--ui-tone, var(--app-primary));
}

.ui-modal__title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--app-text);
}

.ui-modal__close {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 0;
    background: transparent;
    color: var(--app-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--app-radius-sm);
    transition: color .15s, background .15s;
}

.ui-modal__close:hover {
    color: var(--app-text);
    background: var(--app-bg);
}

.ui-modal__body {
    padding: 10px 20px 4px;
    color: var(--app-text-secondary);
    font-size: var(--app-font-size-base);
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 60vh;
    overflow-y: auto;
}

.ui-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 20px 20px;
}

/* ---------------- 组件内置按钮（不依赖 Bootstrap） ---------------- */
.ui-btn {
    box-sizing: border-box;
    padding: 7px 16px;
    border: 1px solid var(--app-border-strong);
    border-radius: var(--app-radius-btn);
    background: var(--app-card);
    color: var(--app-text);
    font-size: var(--app-font-size-base);
    line-height: 1.4;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.ui-btn:hover {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

.ui-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--app-primary-rgb), .18);
}

/* 主按钮：填充色取当前语义色（error 态即 --app-danger-solid，实现红色危险按钮） */
.ui-btn--primary {
    background: var(--ui-tone, var(--app-primary));
    border-color: var(--ui-tone, var(--app-primary));
    color: #fff;
}

.ui-btn--primary:hover {
    color: #fff;
    filter: brightness(.94);
}

@keyframes ui-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-fade-out { to { opacity: 0; } }
@keyframes ui-modal-in {
    from { opacity: 0; transform: translateY(-10px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ui-modal-out {
    to { opacity: 0; transform: translateY(-6px) scale(.97); }
}

/* ============================================================
   三、Loading 加载遮罩
   ============================================================ */
.ui-loading-mask {
    position: fixed;
    inset: 0;
    z-index: 3020;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(243, 244, 247, .6);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    animation: ui-fade-in .15s ease;
}

.ui-loading__spinner {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid rgba(var(--app-primary-rgb), .18);
    border-top-color: var(--app-primary);
    animation: ui-spin .8s linear infinite;
}

.ui-loading__text {
    color: var(--app-text-secondary);
    font-size: var(--app-font-size-sm);
}

@keyframes ui-spin { to { transform: rotate(360deg); } }

/* ============================================================
   四、动效降级
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .ui-toast,
    .ui-toast.is-leaving,
    .ui-modal,
    .ui-modal-mask,
    .ui-modal-mask.is-leaving,
    .ui-loading-mask {
        animation-duration: .01ms !important;
    }
    .ui-loading__spinner {
        animation-duration: 1.2s !important;
    }
}