/* =====================================================================
 * Adblast interaction layer — toasts, spinners, progress bar, motion
 * ===================================================================== */

:root {
    --ab-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- top progress bar ---------- */
.ab-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.ab-progress.is-active { opacity: 1; }
.ab-progress > i {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, #2f7df6, #59d3c0 60%, #8fb6ff);
    box-shadow: 0 0 6px rgba(47, 125, 246, .45);
    transition: width .24s var(--ab-ease-out);
}

/* ---------- toasts ---------- */
.ab-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9998;
    display: grid;
    gap: 10px;
    width: min(380px, calc(100vw - 32px));
    pointer-events: none;
}
.ab-toast {
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    display: grid;
    grid-template-columns: 26px 1fr 20px;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 13px;
    border-radius: 14px;
    background: rgba(10, 24, 39, .94);
    color: #eef4ff;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 18px 40px -20px rgba(4, 14, 26, .95);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .26s var(--ab-ease-out), transform .32s var(--ab-ease-out);
}
.ab-toast.is-in { opacity: 1; transform: none; }
.ab-toast.is-out { opacity: 0; transform: translateY(8px) scale(.98); }
.ab-toast-icon {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .1);
}
.ab-toast-success .ab-toast-icon { background: rgba(56, 200, 150, .2); color: #6ee7bd; }
.ab-toast-error .ab-toast-icon { background: rgba(248, 113, 113, .2); color: #fca5a5; }
.ab-toast-info .ab-toast-icon { background: rgba(96, 165, 250, .2); color: #93c5fd; }
.ab-toast-body { font-size: .9rem; line-height: 1.45; }
.ab-toast-close {
    background: none; border: 0; color: inherit; opacity: .5;
    font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0;
    transition: opacity .16s ease;
}
.ab-toast-close:hover { opacity: 1; }
.ab-toast-timer {
    position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, #59d3c0, #2f7df6);
    opacity: .7;
}

/* ---------- spinners & busy buttons ---------- */
.ab-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: ab-spin .62s linear infinite;
    flex: 0 0 auto;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }

button.is-busy, .is-busy {
    opacity: .82;
    cursor: progress;
}

/* skeleton shimmer utility */
.ab-skeleton {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: color-mix(in oklab, currentColor 8%, transparent);
    color: transparent !important;
}
.ab-skeleton::after {
    content: '';
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
    animation: ab-shimmer 1.35s infinite;
}
@keyframes ab-shimmer { to { transform: translateX(100%); } }

/* ---------- scroll reveal ---------- */
.ab-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s var(--ab-ease-out), transform .5s var(--ab-ease-out);
}
.ab-reveal.ab-in { opacity: 1; transform: none; }

/* ---------- SPA navigation state ---------- */
body.ab-navigating .workspace-main,
body.ab-navigating .main {
    opacity: .55;
    filter: saturate(.9);
    transition: opacity .18s ease;
}
body.ab-navigating { cursor: progress; }
a.is-loading-link { opacity: .7; }

@media (prefers-reduced-motion: reduce) {
    .ab-reveal, .ab-toast { transition: none; }
    .ab-reveal { opacity: 1; transform: none; }
    .ab-skeleton::after { animation: none; }
}

/* =====================================================================
 * Account identity layer — avatars, verified marks, chips, topbar
 * ===================================================================== */

.ab-usermenu-avatar img,
.ab-chip-avatar img,
.ab-avatar-xl img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.ab-usermenu-avatar { overflow: visible; height: 34px; width: 34px; flex: 0 0 auto; }
.ab-usermenu-avatar.lg { height: 42px; width: 42px; }
.ab-chip-avatar img, .ab-usermenu-avatar img, .account-photo img, .workspace-profile__avatar img { max-width: 100%; max-height: 100%; }
.ab-usermenu-avatar img { border-radius: 10px; }

.ab-verified-mark { color: #2f8ae0; vertical-align: -2px; }
.ab-usermenu--dark .ab-verified-mark { color: #6fc0ff; }

.ab-usermenu-tier {
    display: flex; gap: 10px; align-items: flex-start;
    margin: 8px; padding: 10px 11px;
    border: 1px solid #dbe9f6; border-radius: 12px;
    background: linear-gradient(135deg, #f2f8ff, #eefaf4);
    color: #24506f;
}
.ab-usermenu-tier > .ab-icon { flex: 0 0 auto; margin-top: 1px; color: #2f8ae0; }
.ab-usermenu-tier strong { display: block; font-size: 11px; }
.ab-usermenu-tier small { display: block; margin-top: 2px; }
.ab-usermenu-tier small { color: #5d7a92; font-size: 9.5px; line-height: 1.45; }

.ab-usermenu-link {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 8px; border-radius: 10px;
    color: inherit; text-decoration: none;
    transition: background .14s ease;
}
.ab-usermenu-link:hover { background: #f2f7fd; }
.ab-usermenu-link strong { display: block; font-size: 10.5px; }
.ab-usermenu-link small { display: block; margin-top: 2px; color: #7c8b99; font-size: 8.5px; }

/* compact sidebar account chip (no nested dropdown) */
.ab-chip {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; gap: 10px; align-items: center;
    padding: 9px 10px; border-radius: 12px; text-decoration: none;
    border: 1px solid transparent; transition: background .16s ease, border-color .16s ease;
}
.ab-chip--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #e9f2f8; }
.ab-chip--dark:hover { background: rgba(255, 255, 255, .12); border-color: rgba(238, 190, 91, .4); }
.ab-chip--light { background: #fff; border-color: #e5eaf1; color: #16283a; }
.ab-chip--light:hover { border-color: #cfdcea; }
.ab-chip-avatar {
    position: relative; height: 34px; width: 34px; border-radius: 11px;
    display: grid; place-items: center; overflow: visible;
    background: linear-gradient(135deg, #ebba5d, #c28129); color: #16293a; font-size: 12px; font-weight: 800;
}
.ab-chip-avatar img { border-radius: 11px; }
.ab-chip-avatar i { position: absolute; right: -2px; bottom: -2px; height: 10px; width: 10px; border-radius: 50%; background: #35d08a; border: 2px solid #0a2437; }
.ab-chip--light .ab-chip-avatar i { border-color: #fff; }
.ab-chip-id { min-width: 0; }
.ab-chip-id strong { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-chip-id small { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; opacity: .68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-chip-go { opacity: .6; }
.ab-chip:hover .ab-chip-go { opacity: 1; }

/* fixed SaaS topbar */
.ab-topbar {
    position: sticky; top: 0; z-index: 70;
    display: flex; align-items: center; gap: 14px;
    height: 66px; padding: 0 26px; margin: 0 -34px 22px;
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid #e3e9f1;
    backdrop-filter: saturate(150%) blur(14px);
}
.ab-topbar__context { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ab-topbar__mark {
    height: 34px; width: 34px; flex: 0 0 34px; display: grid; place-items: center;
    border-radius: 11px; background: linear-gradient(135deg, #123f5d, #0b2a40); color: #f3c66e;
    font: 17px "Playfair Display", serif;
}
.ab-topbar__context strong { display: block; font-size: 14px; line-height: 1.2; color: #10243a; }
.ab-topbar__context small { display: block; margin-top: 1px; color: #6c7f90; font-size: 11px; font-weight: 600; }
.ab-topbar__trust {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px;
    background: linear-gradient(135deg, #eaf5ff, #e9faf1);
    border: 1px solid #d7e9f7; color: #24628c;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.ab-topbar__trust .ab-icon { color: #2f8ae0; }
.ab-topbar__spacer { flex: 1 1 auto; }
.ab-topbar__actions { display: flex; align-items: center; gap: 10px; }
.ab-topbar .ab-usermenu-panel { top: calc(100% + 12px); }

@media (max-width: 900px) {
    .ab-topbar { margin: 0 -16px 18px; padding: 0 14px; height: 60px; }
    .ab-topbar__trust, .ab-topbar__context small { display: none; }
}

/* topbar bleed inside the workspace shell */
.workspace-main > .ab-topbar { margin: -20px -30px 20px; padding: 0 24px; }
@media (max-width: 900px) {
    .workspace-main > .ab-topbar { margin: -17px -14px 16px; padding: 0 14px; }
}
.main > .ab-topbar { margin: -18px -28px 18px; padding: 0 22px; }
@media (max-width: 900px) { .main > .ab-topbar { margin: -14px -14px 14px; padding: 0 14px; } }