// Fusion Notes - Voice Recording Styles
// Copyright 2026 Nexa Systems Inc.
// License OPL-1
//
// Uses only Odoo/Bootstrap variables and utility classes so the
// component follows the active theme (light, dark, or custom) with
// zero hardcoded colours.

// ======================================================================
// Mic button (idle state)
// ======================================================================

.fusion-notes-mic-btn {
    .fa-microphone {
        font-size: 1.1em;
    }

    &:hover:not(:disabled) {
        color: var(--o-text-color, $body-color);
        background-color: var(--o-gray-200, rgba(0, 0, 0, 0.06));
        border-color: var(--o-border-color, $border-color);
    }
}

// ======================================================================
// Recording state - inline indicator
// ======================================================================

.fusion-notes-recording {
    background-color: var(--danger-bg-subtle, rgba($danger, 0.06));
    border: 1px solid var(--danger-border-subtle, rgba($danger, 0.2));
    border-radius: $border-radius;
    padding: 2px 8px;
}

// Pulsing red dot
.fusion-notes-pulse {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: $danger;
    animation: fusion-notes-pulse-anim 1s ease-in-out infinite;
}

@keyframes fusion-notes-pulse-anim {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.4;
        transform: scale(1.4);
    }
}

// ======================================================================
// Review panel - inherits background from parent (Chatter-top)
// ======================================================================

.fusion-notes-review {
    background-color: inherit;
    border-bottom: 1px solid $border-color;

    .fusion-notes-textarea {
        font-size: $font-size-sm;
        resize: vertical;
        min-height: 60px;
        max-height: 200px;
    }

    .badge {
        font-size: 0.7rem;
        font-weight: 500;
    }
}

// ======================================================================
// Mobile: keep recording indicator and review panel compact
// ======================================================================

@media (max-width: 767px) {
    .fusion-notes-recording {
        padding: 2px 6px;

        // Hide timer text on very small screens to save space
        .text-danger.fw-bold.small {
            font-size: 0.7rem;
        }
    }

    .fusion-notes-review {
        .fusion-notes-textarea {
            min-height: 50px;
            max-height: 150px;
        }

        // Stack post button below badge on narrow screens
        .d-flex.align-items-center.justify-content-between.mt-2 {
            flex-wrap: wrap;
            gap: 0.5rem;
        }
    }
}