/* #region Himanshu — common message box + inline alert look (11-Oct-2026)
   1. .spq-msg*   the floating message box rendered by SpqMessageHost (and by
                  spq-message-box.js when no circuit is connected, e.g. /login).
   2. .alert-*    the in-page Bootstrap alert boxes (275 of them across the screens)
                  get the same visual language: tinted card, coloured accent edge.
                  Colours/borders only — padding and layout stay as each screen set them. */

:root {
    --spq-msg-error: #d93025;
    --spq-msg-warning: #c77700;
    --spq-msg-success: #1e8e3e;
    --spq-msg-info: var(--theme-default, #3949ab);
}

body.dark-only {
    --spq-msg-error: #f28b82;
    --spq-msg-warning: #fdd663;
    --spq-msg-success: #81c995;
    --spq-msg-info: #8ab4f8;
}

/* ── 1. floating message box ── */
.spq-msg-stack {
    position: fixed;
    top: 72px;
    right: 16px;
    z-index: 2100;          /* above Bootstrap / Fluent modals */
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}

.spq-msg {
    --accent: var(--spq-msg-info);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 10px 14px 14px;
    border: 1px solid var(--bd, #e5e7eb);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    background: var(--sf-raised, #ffffff);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .08);
    overflow: hidden;
    pointer-events: auto;
    animation: spq-msg-in .22s cubic-bezier(.2, .8, .2, 1);
}

.spq-msg--error { --accent: var(--spq-msg-error); }
.spq-msg--warning { --accent: var(--spq-msg-warning); }
.spq-msg--success { --accent: var(--spq-msg-success); }
.spq-msg--info { --accent: var(--spq-msg-info); }

.spq-msg-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    font-size: 1rem;
}

.spq-msg-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 1px;
}

.spq-msg-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: clamp(1, calc(700 + var(--spq-fw-delta, 0)), 1000);
    color: var(--accent);
}

.spq-msg-count {
    padding: 0 6px;
    border-radius: 999px;
    font-size: .7rem;
    text-transform: none;
    color: var(--tc-muted, #6b7280);
    background: var(--sf-subtle, #f3f4f6);
}

.spq-msg-text {
    margin-top: 2px;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--tc-strong, #1f2937);
    white-space: pre-line;
    overflow-wrap: anywhere;
    max-height: 40vh;
    overflow-y: auto;
}

.spq-msg-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 2px;
}

.spq-msg-btn {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tc-muted, #6b7280);
    cursor: pointer;
}

.spq-msg-btn:hover {
    background: var(--sf-subtle, #f3f4f6);
    color: var(--tc-strong, #1f2937);
}

.spq-msg-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* countdown: pure CSS, no ticking timer */
.spq-msg-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--accent);
    opacity: .55;
    transform-origin: left center;
    animation-name: spq-msg-countdown;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.spq-msg:hover .spq-msg-bar,
.spq-msg.is-paused .spq-msg-bar {
    animation-play-state: paused;
}

@keyframes spq-msg-countdown {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

@keyframes spq-msg-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .spq-msg { animation: none; }
}

/* phones: full-width banner under the status bar, slides down like a native notification */
@media (max-width: 767.98px) {
    .spq-msg-stack {
        top: calc(8px + env(safe-area-inset-top));
        left: 8px;
        right: 8px;
        width: auto;
    }

    .spq-msg {
        border-radius: 14px;
        animation-name: spq-msg-down;
    }

    .spq-msg-btn {
        width: 44px;
        height: 44px;
    }

    @keyframes spq-msg-down {
        from { opacity: 0; transform: translateY(-16px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

/* ── 2. in-page alert boxes, same look ── */
.alert.alert-danger,
.alert.alert-warning,
.alert.alert-success,
.alert.alert-info {
    --accent: var(--spq-msg-info);
    color: var(--tc-strong, #1f2937);
    background: color-mix(in srgb, var(--accent) 8%, var(--sf-card, #ffffff));
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
}

.alert.alert-danger { --accent: var(--spq-msg-error); }
.alert.alert-warning { --accent: var(--spq-msg-warning); }
.alert.alert-success { --accent: var(--spq-msg-success); }

.alert.alert-danger > strong:first-child,
.alert.alert-warning > strong:first-child,
.alert.alert-success > strong:first-child,
.alert.alert-info > strong:first-child,
.alert.alert-danger > i:first-child,
.alert.alert-warning > i:first-child,
.alert.alert-success > i:first-child,
.alert.alert-info > i:first-child {
    color: var(--accent);
}

.alert.alert-danger .alert-link,
.alert.alert-warning .alert-link,
.alert.alert-success .alert-link,
.alert.alert-info .alert-link {
    color: var(--accent);
}

/* #endregion */