/* The handoff popup - work item #388.

   A global stylesheet for the reason dictation.css gives: half the chrome is MudBlazor components, whose elements a
   scoped stylesheet cannot reach. Colours are MudBlazor palette variables so the panel follows the theme.

   The window and its docked pill share one root, fixed to the viewport, so neither scrolls with the page and
   neither is clipped by it. Above the app bar (1100) and drawer (1200), below dialogs (1400). */

.handoff-root {
    position: fixed;
    right: 96px;
    bottom: 24px;
    z-index: 1310;
}

.handoff-window {
    width: 380px;
    max-width: 94vw;
    display: flex;
    flex-direction: column;
    border-radius: 10px !important;
    overflow: hidden;
    background-color: var(--mud-palette-surface) !important;
}

.handoff-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.handoff-header-waiting {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
    animation: handoff-pulse 1.2s ease-in-out infinite;
}

.handoff-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 6px 8px 0 8px;
}

.handoff-log {
    height: 280px;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.handoff-bubble {
    max-width: 85%;
    padding: 6px 10px;
    border-radius: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;
    background-color: var(--mud-palette-background-gray);
}

.handoff-bubble-staff {
    align-self: flex-end;
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.handoff-bubble-note {
    align-self: center;
    font-style: italic;
    opacity: 0.75;
    background-color: transparent;
}

.handoff-footer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px 10px 10px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The docked pill. Always in the same place so staff learn where to look; pulses while somebody waits. */
.handoff-dock {
    border-radius: 24px !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--mud-palette-surface) !important;
}

.handoff-dock-waiting {
    background-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error-text);
    animation: handoff-pulse 1.2s ease-in-out infinite;
}

@keyframes handoff-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
    .handoff-header-waiting, .handoff-dock-waiting { animation: none; }
}