/*
 * 右上角 Toast。flat 卡片(shadow-raised),宽度 320,堆叠间距 10。
 * 进度条从左侧消耗:起始全宽,hover 暂停,耗尽 = 全空。
 * 颜色等级:info / ok / warn / error,左侧 3px 条按 tone 上色。
 */

.viewport
{
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 9999;
    width: 320px;
    max-width: calc(100vw - var(--space-4) * 2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;   /* 让 viewport 不挡点击; 各 toast 自己 enable */
}

.toast
{
    pointer-events: auto;
    position: relative;
    background: var(--surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + 4px);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
    border-left: 3px solid var(--toast-accent, var(--accent));
    animation: toast-enter var(--dur-base) var(--ease-out);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

@keyframes toast-enter
{
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0);   }
}

.leaving
{
    opacity: 0;
    transform: translateX(8px);
}

.toneInfo  { --toast-accent: var(--accent); }
.toneOk    { --toast-accent: var(--state-online); }
.toneWarn  { --toast-accent: var(--state-warn); }
.toneError { --toast-accent: var(--state-error); }

.icon
{
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--toast-accent);
}

.body
{
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.title
{
    font-family: var(--font-sans);
    font-size: var(--fs-13);
    font-weight: 600;
    color: var(--text);
    line-height: var(--lh-ui);
    word-break: break-word;
}

.content
{
    font-family: var(--font-sans);
    font-size: var(--fs-12);
    color: var(--text-muted);
    line-height: var(--lh-body);
    word-break: break-word;
}

.close
{
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    border-radius: var(--radius-control);
    display: inline-flex;
    transition: color var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
}
.close:hover { color: var(--text); background: var(--surface-sunken); }

/* 进度条：起始 100% 宽 (right anchored),timer 推进时 width 缩短,
   颜色块"耗尽"在右侧。 */
.progressTrack
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--surface-sunken);
}

.progressFill
{
    position: absolute;
    top: 0;
    right: 0;   /* 锚定右侧 - 进度 -> 0 时从右往左只剩右边一点 */
    bottom: 0;
    background: var(--toast-accent);
    transition: width 100ms linear;
}
