/* ================================================================== */
/* Toast System                                                       */
/* Unified toast styling for simple (showToast) and rich              */
/* (pushNotification) feedback.                                       */
/* ================================================================== */

/* ── Severity accent tokens ─────────────────────────────────────── */
:root {
    --toast-accent-success: var(--gold);
    --toast-accent-error: #c94040;
    --toast-accent-warning: #d4a035;
    --toast-accent-info: rgba(255, 255, 255, 0.15);
}

/* ── Base toast ─────────────────────────────────────────────────── */
.tf-toast {
    position: fixed;
    top: 90px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 20px 10px 14px;
    background: rgba(6, 9, 14, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-left: 3px solid var(--toast-accent-info);
    border-radius: 6px;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.7),
        0 0 12px rgba(0, 0, 0, 0.3);
    color: #e8d5a3;
    font-size: var(--font-size-md);
    pointer-events: none;
    z-index: var(--z-toast);
    max-width: min(480px, 90vw);
    animation: tfToastIn 0.3s ease forwards;
}

/* ── Severity modifiers ─────────────────────────────────────────── */
.tf-toast--success {
    border-left-color: var(--toast-accent-success);
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.7),
        0 0 12px rgba(197, 160, 89, 0.15);
}
.tf-toast--error {
    border-left-color: var(--toast-accent-error);
}
.tf-toast--warning {
    border-left-color: var(--toast-accent-warning);
}
.tf-toast--info {
    border-left-color: var(--toast-accent-info);
}

/* ── Rich toast - c06 Ship's Bell Ticker style ───────────────────── */
.tf-toast--rich {
    min-width: min(45rem, 92vw);
    padding: 16px 26px;
    background: linear-gradient(180deg, rgba(14, 18, 28, 0.67) 0%, rgba(8, 11, 19, 0.88) 100%);
    border: none;
    border-top: 3px solid rgba(197, 160, 89, 0.5);
    border-bottom: 3px solid rgba(197, 160, 89, 0.3);
    border-radius: 0;
    box-shadow:
        0 18px 36px -12px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(197, 160, 89, 0.07);
    display: flex;
    align-items: center;
    gap: 22px;
    animation: tfToastRichIn 480ms ease-out both;
}

/* ── Tone palette (data-tone attribute for future use) ───────────── */
.tf-toast--rich[data-tone='neutral'] {
    --tone: rgba(197, 160, 89, 0.45);
    --tone-strong: rgba(197, 160, 89, 0.75);
}
.tf-toast--rich[data-tone='positive'] {
    --tone: rgba(120, 180, 110, 0.55);
    --tone-strong: rgba(160, 210, 140, 0.9);
}
.tf-toast--rich[data-tone='subtle'] {
    --tone: rgba(150, 150, 140, 0.35);
    --tone-strong: rgba(200, 195, 180, 0.7);
}
.tf-toast--rich[data-tone='warn'] {
    --tone: rgba(230, 180, 90, 0.55);
    --tone-strong: rgba(240, 200, 115, 0.9);
}
.tf-toast--rich[data-tone='error'] {
    --tone: rgba(220, 95, 95, 0.65);
    --tone-strong: rgba(240, 120, 120, 0.95);
}
.tf-toast--rich[data-tone='celebratory'] {
    --tone: rgba(240, 200, 115, 0.8);
    --tone-strong: rgba(255, 220, 140, 0.95);
}
.tf-toast--rich[data-tone='prestige'] {
    --tone: rgba(255, 220, 150, 0.9);
    --tone-strong: rgba(255, 235, 180, 1);
}

/* ── Icon ─────────────────────────────────────────────────────────── */
.tf-toast__icon-wrap {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tf-toast__ev-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border-radius: 3px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.tf-toast__ev-icon-emoji {
    font-size: 1.8rem;
    line-height: 1;
    animation: tfToastChime 1.2s ease-out;
    transform-origin: 50% 20%;
}

/* ── Content ──────────────────────────────────────────────────────── */
.tf-toast__content {
    min-width: 0;
    flex: 1;
}

.tf-toast__eyebrow {
    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    color: rgba(197, 160, 89, 0.7);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.tf-toast__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    color: rgba(235, 222, 190, 0.97);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: pre-line;
}

.tf-toast__desc {
    margin-top: 4px;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: rgba(197, 160, 89, 0.65);
    letter-spacing: 0.03em;
    white-space: pre-line;
}

@keyframes tfToastRichIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes tfToastChime {
    0%,
    100% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-14deg);
    }
    40% {
        transform: rotate(10deg);
    }
    60% {
        transform: rotate(-6deg);
    }
    80% {
        transform: rotate(3deg);
    }
}

/* ── Simple toast text ──────────────────────────────────────────── */
.tf-toast__msg {
    line-height: 1.35;
}

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes tfToastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-14px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.tf-toast--out {
    animation: tfToastOut 0.5s ease forwards;
}

.tf-toast--persist {
    pointer-events: auto;
    cursor: pointer;
}
@keyframes tfToastOut {
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-8px);
    }
}