/* Clickable snackbar — a snackbar that declares a navigation target renders
   its message inside a real <button> (keyboard reachable, focus-visible ring)
   whose blue accent text is the affordance. Inert snackbars keep the plain span layout
   and must not look clickable. The container padding moves onto the button
   so the whole pill is the hit area (≥44px tall). */
.snackbar.snackbar-clickable {
    padding: 0;
    display: inline-flex;
    align-items: stretch;
}

.snackbar-open {
    display: inline-flex;
    align-items: center;
    /* Flex items drop the accent span's leading space — the gap replaces it. */
    gap: 0.3em;
    padding: var(--space-3) var(--space-5);
    min-height: 44px; /* touch target */
    background: none;
    border: none;
    border-radius: var(--radius-2xl);
    font-family: var(--font-family);
    font-size: var(--font-size-14);
    line-height: 1.4;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-in-out);
}

.snackbar-open:hover {
    background: rgba(74, 144, 217, 0.08);
}

.snackbar-open:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset-inset);
}

/* The blue accent text is the click affordance — no separate "Open" hint.
   It stays the Cadeo brand blue (--accent-blue, #4A90D9), same as every other
   snackbar accent; weight carries the extra emphasis. */
.snackbar-open .snackbar-accent {
    color: var(--accent-blue);
    font-weight: 600;
}

.snackbar-open:hover .snackbar-accent,
.snackbar-open:focus-visible .snackbar-accent {
    text-decoration: underline;
}

/* Keep an accompanying action button (e.g. Undo) vertically centered and
   clear of the pill's rounded edge now that container padding is zero. */
.snackbar.snackbar-clickable .snackbar-action-btn {
    margin-left: 0;
    margin-right: var(--space-4, 16px);
    align-self: center;
}

.snackbar.hiding {
    animation: snackbarFadeOut var(--duration-normal) var(--ease-in-out) forwards;
}

@keyframes snackbarSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes snackbarFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Multi-action snackbar variant for the recording continue prompt.
   Built as a vertical stack so three action buttons + a close icon
   don't fight for horizontal space mid-meeting. Overrides the default
   single-line .snackbar layout (white-space: nowrap, inline-block). */
.snackbar.snackbar-multi-action {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    max-width: 360px;
    padding: 16px;
    white-space: normal;
    position: relative;
    line-height: 1.45;
}
.snackbar.snackbar-multi-action .snackbar-text {
    padding-right: 24px; /* leave room for the close icon */
    color: var(--text-primary);
    font-weight: 500;
}
.snackbar.snackbar-multi-action .snackbar-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    padding: 0;
}
.snackbar.snackbar-multi-action .snackbar-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
.snackbar.snackbar-multi-action .snackbar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.snackbar.snackbar-multi-action .snackbar-actions button {
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-family);
}
.snackbar.snackbar-multi-action .snackbar-actions button:hover {
    background: var(--bg-tertiary);
}
.snackbar.snackbar-multi-action .snackbar-actions button.is-primary {
    background: var(--accent-fill);
    color: #ffffff;
    border-color: var(--accent-fill);
}
.snackbar.snackbar-multi-action .snackbar-actions button.is-primary:hover {
    background: var(--accent-fill-hover); /* secondary brand color */
    border-color: var(--accent-fill-hover);
}

/* Mic-only badge on the recording timer pill, signals that the audio
   source dropped from mic+tab-audio to mic-only. */
.recording-timer-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 2px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-left: 8px;
    letter-spacing: 0.02em;
}
.recording-timer-badge .recording-timer-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-circle);
    background: var(--color-amber); /* warning amber */
}

/* Ensure dragging elements dont obscure the time indicator */
.task-row.dragging,
.calendar-event.dragging,
.backlog-task-item.dragging,
.panel-task.dragging,
.day-task.dragging,
.timeline-task.dragging,
.timeline-unscheduled-task.dragging {
    z-index: calc(var(--z-layer-modal) - 1) !important;
}

/* Task row drag-ready - highlight captured by browser for drag image */
.task-row.drag-ready {
    background: rgba(59, 130, 246, 0.12) !important;
    border-radius: var(--radius-md);
}

/* Task row dragging - smooth fade out */
.task-row.dragging {
    opacity: 0.25 !important;
    pointer-events: none;
    transform: scale(0.98);
    transition: opacity var(--duration-normal) var(--ease-in-out), transform var(--duration-normal) var(--ease-in-out) !important;
}

/* Tasks shift smoothly when making room during drag */
body.is-dragging .task-row:not(.dragging) {
    transition: transform var(--duration-normal) var(--ease-in-out),
                margin var(--duration-normal) var(--ease-in-out),
                padding var(--duration-normal) var(--ease-in-out);
}

/* ============================================================================
   DRAG-HANDLE AFFORDANCE (task rows + note cards)
   Six-dot grip sitting in the row's existing left padding gutter, immediately
   after the 3px area-colour edge. Absolutely positioned so it consumes NO
   layout space: rows with and without an area colour stay perfectly aligned,
   and revealing it can never shift content. It is an ADDITIONAL affordance —
   the whole row/card still drags via PointerDrag; the handle only signals it.
   Hover/focus reveal mirrors the task quick-actions convention; touch devices
   get an always-faint version via touch-overrides.css (hover: none).
   ============================================================================ */
.task-drag-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px; /* the row's left padding gutter (--space-4) */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    opacity: 0;
    cursor: grab;
    transition: opacity var(--transition-fast), color var(--transition-fast);
}

.task-row:hover .task-drag-handle,
.task-row:focus-within .task-drag-handle {
    opacity: 1;
}

.task-drag-handle:hover {
    color: var(--text-secondary);
}

.task-drag-handle:active {
    cursor: grabbing;
}

/* Hide the affordance while a drag is in flight (matches quick-actions) */
body.is-dragging .task-row .task-drag-handle {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .task-drag-handle {
        transition: none;
    }
}

/* Drop indicator line for task reordering - premium minimal design */
.task-row.drop-above::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 40px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-gradient-end));
    border-radius: var(--radius-sm);
    z-index: var(--z-layer-raised);
    box-shadow: 0 0 8px var(--accent-blue-opacity-20), 0 0 2px var(--accent-blue);
    animation: dropIndicatorSlideIn var(--duration-fast) var(--ease-in-out) forwards;
}

.task-row.drop-above::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 36px;
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: var(--radius-circle);
    z-index: calc(var(--z-layer-raised) + 1);
    box-shadow: 0 0 6px var(--accent-blue-opacity-20);
    animation: dropIndicatorDotIn var(--duration-fast) var(--ease-in-out) forwards;
}

.task-row.drop-indicator-bottom::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 40px;
    right: 12px;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-blue), var(--accent-blue-gradient-end));
    border-radius: var(--radius-sm);
    z-index: var(--z-layer-raised);
    box-shadow: 0 0 8px var(--accent-blue-opacity-20), 0 0 2px var(--accent-blue);
    animation: dropIndicatorSlideIn var(--duration-fast) var(--ease-in-out) forwards;
}

.task-row.drop-indicator-bottom::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 36px;
    width: 8px;
    height: 8px;
    background: var(--accent-blue);
    border-radius: var(--radius-circle);
    z-index: calc(var(--z-layer-raised) + 1);
    box-shadow: 0 0 6px var(--accent-blue-opacity-20);
    animation: dropIndicatorDotIn var(--duration-fast) var(--ease-in-out) forwards;
}

@keyframes dropIndicatorSlideIn {
    from {
        opacity: 0;
        transform: scaleX(0.3);
        transform-origin: left center;
    }
    to {
        opacity: 1;
        transform: scaleX(1);
        transform-origin: left center;
    }
}

@keyframes dropIndicatorDotIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Section highlight during drag - subtle and refined */
body.is-dragging .section-tasks,
body.is-dragging .unsectioned-drop-zone {
    transition: background var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
}

body.is-dragging .section-tasks.pointer-drop-highlight,
body.is-dragging .unsectioned-drop-zone.pointer-drop-highlight {
    background: var(--accent-blue-opacity-3);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--accent-blue-opacity-15);
}

body.is-dragging .projects-panel-item,
body.is-dragging .tasks-filter-item {
    transition: background var(--duration-normal) var(--ease-in-out), box-shadow var(--duration-normal) var(--ease-in-out);
}

body.is-dragging .projects-panel-item.pointer-drop-highlight,
body.is-dragging .tasks-filter-item.pointer-drop-highlight {
    background: var(--accent-blue-opacity-3) !important;
    box-shadow: inset 0 0 0 2px var(--accent-blue-opacity-20) !important;
    border-radius: var(--radius-md) !important;
}

/* Column drag (kanban board column reordering) */
body.is-dragging-column {
    cursor: grabbing !important;
    user-select: none;
}

body.is-dragging-column * {
    cursor: grabbing !important;
}

.column-drag-preview {
    font-size: var(--font-size-14);
    color: var(--text-primary);
    white-space: nowrap;
}

/* Column drop target during drag */
.board-column.column-dragging {
    opacity: 0.4;
    transform: scale(0.98);
    transition: opacity var(--duration-normal) var(--ease-in-out), transform var(--duration-normal) var(--ease-in-out);
}