/* Toast stack — replaces the old sticky notification + mac-audio
   banners. Fixed to the top-right so nothing in the main layout shifts
   when a toast appears. Pointer events are off on the container so
   the dashboard stays clickable through any gaps between toasts.

   Extracted from style.css into features/ as part of KL-119 (Alpine
   conversion). Wrapped in @layer features for predictable cascade. */
@layer features {

.toast-stack {
    position: fixed;
    top: 1rem;
    /* KL-171: 1.25rem (was 1rem) for breathing room over the WebView2
       scrollbar. style.css already styles scrollbars down to 8px, but
       bumping to 20px gives a comfortable visual gap and absorbs any
       future scrollbar-width drift without the close-X getting tucked
       under the bar again. */
    right: 1.25rem;
    z-index: 900;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(22rem, calc(100vw - 2.5rem));
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.35rem;
    border-left: 4px solid transparent;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font-size: 0.85rem;
    cursor: pointer;
    animation: toast-in 0.2s ease-out;
}
.toast.is-dismissing {
    animation: toast-out 0.2s ease-in forwards;
}
.toast.level-info  { background: #1f3a4a; color: #a8dcff; border-left-color: #4b9cd3; }
.toast.level-warn  { background: #4a2a00; color: #ffdca8; border-left-color: #d97706; }
.toast.level-error { background: #4a1414; color: #ffb0b0; border-left-color: #dc2626; }
.toast-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.toast-title { font-weight: bold; font-size: 0.9rem; line-height: 1.25; }
.toast-detail {
    font-size: 0.78rem;
    opacity: 0.9;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.toast.is-expanded .toast-detail {
    -webkit-line-clamp: unset;
    display: block;
    overflow: visible;
}
.toast-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.toast-actions .action-btn { font-size: 0.75rem; padding: 0.3rem 0.65rem; text-decoration: none; text-align: center; }
.toast-dismiss {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0 0.2rem;
    opacity: 0.7;
    cursor: pointer;
    flex-shrink: 0;
}
.toast-dismiss:hover { opacity: 1; }
.toast-overflow-more {
    pointer-events: auto;
    background: var(--surface, #222);
    color: var(--muted, #aaa);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 0.3rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    text-align: center;
    cursor: pointer;
}
.toast-overflow-more:hover { color: var(--text, #fff); }
@keyframes toast-in {
    from { transform: translateX(120%); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
@keyframes toast-out {
    from { transform: none; opacity: 1; }
    to   { transform: translateX(120%); opacity: 0; }
}

} /* end @layer features */
