/* ==========================================================================
   The dock in the bottom-right corner (AI-1792): shell-level rules.
   The dock's own layout lives in AishaaDock.razor.css; this file holds what
   reaches outside it: the page making room for a pinned dock, and the widget
   cards, which render both in "Nu" and as peeks above the launcher.
   ========================================================================== */

/* Pinned: the dock is a column of its own and the page shrinks next to it
   instead of being covered. Only on wide screens; below this breakpoint a
   pinned dock floats like an open one (AishaaDock.razor.css). */
@media (min-width: 1440px) {
    :root[data-ui="glass"][data-dock-pinned="true"] .mud-main-content {
        margin-right: var(--aishaa-dock-pinned-width, 400px);
    }
}

:root.aishaa-dock-resizing,
:root.aishaa-dock-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Widget cards */

.dock-widget {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    min-width: 0;
}

.dock-widget__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary), transparent 88%);
    color: var(--mud-palette-primary);
}

.dock-widget--alarm .dock-widget__icon {
    background: color-mix(in srgb, var(--mud-palette-warning), transparent 84%);
    color: var(--mud-palette-warning);
}

.dock-widget--done .dock-widget__icon {
    background: color-mix(in srgb, var(--mud-palette-success), transparent 86%);
    color: var(--mud-palette-success);
}

.dock-widget--warning .dock-widget__icon {
    background: color-mix(in srgb, var(--mud-palette-warning), transparent 84%);
    color: var(--mud-palette-warning);
}

.dock-widget--failed .dock-widget__icon {
    background: color-mix(in srgb, var(--mud-palette-error), transparent 86%);
    color: var(--mud-palette-error);
}

.dock-widget--running .dock-widget__icon .mud-icon-root {
    animation: dock-widget-spin 1.6s linear infinite;
}

@keyframes dock-widget-spin {
    to {
        transform: rotate(360deg);
    }
}

.dock-widget__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dock-widget__title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.dock-widget__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dock-widget__status {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.dock-widget__text {
    font-size: 0.82rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.dock-widget__meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: anywhere;
}

.dock-widget__meta--split {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.dock-widget__error {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--mud-palette-error);
    overflow-wrap: anywhere;
}

.dock-widget__progress {
    margin-top: 8px;
}

.dock-widget__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.dock-widget__close {
    flex-shrink: 0;
    margin: -6px -6px 0 0;
}

:root.aishaa-dock-resizing-corner,
:root.aishaa-dock-resizing-corner * {
    cursor: nwse-resize !important;
    user-select: none !important;
}