/* In-app notifications: the bell and tray (.shell-tray, .shell-bell) and toasts (.shell-toast).
   Colors and radii come from the host's CSS variables (--card, --ink, --line, --accent, ...) and fall
   back to Diamond's values, so a host only defines the ones it wants to differ. Class names are
   prefixed shell- for continuity with Diamond.AppHost, where these rules came from. */

.shell-tray {
    position: relative;
}

.shell-bell {
    position: relative;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--r-sm, 8px);
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--bar-ink, #F2F7FB);
    display: grid;
    place-items: center;
    padding: 0.4rem;
}

.shell-bell svg {
    width: 1.15rem;
    height: 1.15rem;
}

.shell-bell:hover, .shell-bell-open {
    background: rgba(255, 255, 255, 0.18);
}

.shell-bell:focus-visible {
    outline: 2px solid var(--accent-soft, #DCEBF8);
    outline-offset: 2px;
}

.shell-bell-badge {
    position: absolute;
    top: -0.3rem;
    right: -0.35rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--tk-bad, #B3273A);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    border: 2px solid var(--bar, #14283F);
    box-sizing: content-box;
}

.shell-tray-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    border: none;
    z-index: 110;
}

.shell-tray-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: -2.6rem;
    z-index: 120;
    width: min(23rem, calc(100vw - 1.5rem));
    max-height: min(32rem, calc(100vh - 6rem));
    display: flex;
    flex-direction: column;
    background: var(--card, #FFFFFF);
    color: var(--ink, #17273A);
    border: 1px solid var(--line, #D8E1EA);
    border-radius: var(--r-lg, 14px);
    box-shadow: var(--sh-pop, 0 12px 32px rgba(20, 40, 63, 0.18));
    overflow: hidden;
}

.shell-tray-grab {
    display: none;
}

.shell-tray-head, .shell-tray-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.65rem 0.9rem;
    font-weight: 650;
    font-size: 0.9rem;
}

.shell-tray-head {
    border-bottom: 1px solid var(--line, #D8E1EA);
}

.shell-tray-foot {
    border-top: 1px solid var(--line, #D8E1EA);
    justify-content: center;
}

.shell-tray-link {
    background: none;
    border: none;
    color: var(--accent-deep, #1E5C93);
    font-weight: 600;
    font-size: 0.82rem;
    padding: 0.2rem 0.3rem;
}

.shell-tray-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
}

.shell-tray-item {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.6rem;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--line, #D8E1EA);
    padding: 0.65rem 0.9rem;
    color: var(--ink, #17273A);
    font-size: 0.86rem;
}

.shell-tray-item:hover {
    background: var(--field, #EAF0F6);
}

.shell-tray-item-unread {
    background: var(--accent-soft, #DCEBF8);
}

.shell-tray-item-unread .shell-tray-item-title::after {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--accent, #2E7CC0);
    margin-left: 0.4rem;
    vertical-align: middle;
}

.shell-tray-item-title {
    font-weight: 600;
    line-height: 1.3;
}

.shell-tray-item-body {
    grid-column: 1;
    color: var(--muted, #62778C);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-tray-item-when {
    grid-column: 2;
    grid-row: 1;
    color: var(--muted, #62778C);
    font-size: 0.74rem;
    white-space: nowrap;
}

.shell-tray-empty {
    padding: 1.6rem 1rem;
    text-align: center;
    color: var(--muted, #62778C);
    font-size: 0.88rem;
}

.shell-tray-empty p {
    margin: 0.2rem 0;
}

.shell-tray-empty-hint {
    font-size: 0.8rem;
}

.shell-toasts {
    position: fixed;
    top: 4.1rem;
    right: 1rem;
    z-index: 130;
    width: min(22rem, calc(100vw - 1.5rem));
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}

.shell-toast {
    pointer-events: auto;
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    background: var(--card, #FFFFFF);
    color: var(--ink, #17273A);
    border: 1px solid var(--line, #D8E1EA);
    border-left: 4px solid var(--accent, #2E7CC0);
    border-radius: var(--r-md, 10px);
    box-shadow: var(--sh-pop, 0 12px 32px rgba(20, 40, 63, 0.18));
    overflow: hidden;
    animation: shell-toast-in 180ms ease-out;
}

.shell-toast-success {
    border-left-color: var(--good, #1F8A5D);
}

.shell-toast-error {
    border-left-color: var(--tk-bad, #B3273A);
}

.shell-toast-main {
    background: none;
    border: none;
    text-align: left;
    padding: 0.65rem 0.4rem 0.75rem 0.8rem;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    cursor: default;
}

.shell-toast-link .shell-toast-main {
    cursor: pointer;
}

.shell-toast-title {
    font-weight: 650;
    font-size: 0.88rem;
}

.shell-toast-body {
    color: var(--muted, #62778C);
    font-size: 0.8rem;
}

.shell-toast-close {
    background: none;
    border: none;
    color: var(--muted, #62778C);
    width: 2rem;
    padding: 0.55rem 0.5rem;
    align-self: start;
}

.shell-toast-close svg {
    width: 0.9rem;
    height: 0.9rem;
}

.shell-toast-timer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--accent, #2E7CC0);
    opacity: 0.55;
    transform-origin: left;
    animation: shell-toast-timer 6s linear forwards;
}

.shell-toast-timer-paused {
    animation-play-state: paused;
}

@keyframes shell-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

@keyframes shell-toast-timer {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .shell-toast, .shell-toast-timer { animation: none; }
}

@media (max-width: 640px) {
    .shell-toasts {
        top: 3.7rem;
        left: 0.6rem;
        right: 0.6rem;
        width: auto;
    }

    /* The tray becomes a bottom sheet on phones. */
    .shell-tray-backdrop {
        background: rgba(20, 40, 63, 0.35);
    }

    .shell-tray-panel {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 75vh;
        border-radius: 16px 16px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .shell-tray-grab {
        display: block;
        width: 2.4rem;
        height: 4px;
        border-radius: 2px;
        background: var(--line, #D8E1EA);
        margin: 0.5rem auto 0;
    }
}