/**
 * Moondial Gravador - Frontend Styles
 * Design: Gravador de Jornalista Profissional
 * Black Edition - Otimizado para Mobile
 */

/* ========================================
   RESET E BASE
   ======================================== */

.mndl-frontend-recorder,
.mndl-frontend-recorder *,
.mndl-frontend-recorder *::before,
.mndl-frontend-recorder *::after {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mndl-frontend-recorder {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #fff !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

/* ========================================
   GRAVADOR - DISPOSITIVO
   ======================================== */

.mndl-recorder-device {
    padding: 0 !important;
    background: linear-gradient(180deg, #252525 0%, #1a1a1a 100%) !important;
}

/* Cabeçalho do Dispositivo */
.mndl-device-header {
    padding: 16px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #333 !important;
    background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%) !important;
}

.mndl-device-brand {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 4px !important;
    color: #e0e0e0 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important;
}

.mndl-device-model {
    font-size: 10px !important;
    letter-spacing: 2px !important;
    color: #666 !important;
    margin-top: 4px !important;
}

/* ========================================
   DISPLAY LCD
   ======================================== */

.mndl-lcd-display {
    margin: 20px !important;
    padding: 24px 20px !important;
    background: #0a1a0a !important;
    border-radius: 12px !important;
    border: 3px solid #333 !important;
    box-shadow: inset 0 4px 20px rgba(0,0,0,0.8), 0 2px 0 #444 !important;
}

.mndl-lcd-status {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
}

.mndl-rec-indicator {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #333 !important;
    transition: all 0.3s !important;
}

.mndl-rec-indicator.active {
    background: #ff0000 !important;
    box-shadow: 0 0 10px #ff0000, 0 0 20px #ff0000 !important;
    animation: blink 1s infinite !important;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.mndl-rec-text {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    color: #00ff00 !important;
    text-shadow: 0 0 10px rgba(0,255,0,0.5) !important;
}

.mndl-lcd-timer {
    font-family: "SF Mono", "Roboto Mono", "Courier New", monospace !important;
    font-size: 48px !important;
    font-weight: 300 !important;
    text-align: center !important;
    color: #00ff00 !important;
    text-shadow: 0 0 20px rgba(0,255,0,0.5) !important;
    letter-spacing: 4px !important;
}

/* Waveform Animation */
.mndl-lcd-waveform {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 3px !important;
    height: 30px !important;
    margin-top: 16px !important;
}

.mndl-lcd-waveform .mndl-bar {
    width: 3px !important;
    min-height: 4px !important;
    height: 4px !important;
    background: #00ff00 !important;
    border-radius: 2px !important;
    opacity: 0.3 !important;
    transition: height 0.05s ease-out, opacity 0.05s ease-out !important;
}

.mndl-lcd-waveform.active .mndl-bar {
    opacity: 1 !important;
}

/* ========================================
   CONTROLES DO GRAVADOR
   ======================================== */

.mndl-device-controls {
    display: flex !important;
    justify-content: center !important;
    gap: 24px !important;
    padding: 20px !important;
    background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%) !important;
}

.mndl-ctrl-btn {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    transition: all 0.2s !important;
    font-family: inherit !important;
}

.mndl-ctrl-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

.mndl-ctrl-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* Botão REC */
.mndl-btn-rec {
    background: linear-gradient(145deg, #ff3333 0%, #cc0000 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(255,0,0,0.4), inset 0 2px 0 rgba(255,255,255,0.2) !important;
}

.mndl-btn-rec:hover:not(:disabled) {
    transform: scale(1.05) !important;
    box-shadow: 0 8px 30px rgba(255,0,0,0.5) !important;
}

.mndl-btn-rec:active:not(:disabled) {
    transform: scale(0.95) !important;
}

.mndl-btn-rec:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.mndl-btn-rec.recording {
    animation: pulse-rec 1.5s infinite !important;
}

@keyframes pulse-rec {
    0%, 100% { box-shadow: 0 6px 20px rgba(255,0,0,0.4); }
    50% { box-shadow: 0 6px 40px rgba(255,0,0,0.8); }
}

/* Botão STOP */
.mndl-btn-stop {
    background: linear-gradient(145deg, #444 0%, #333 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3), inset 0 2px 0 rgba(255,255,255,0.1) !important;
}

.mndl-btn-stop:hover:not(:disabled) {
    background: linear-gradient(145deg, #555 0%, #444 100%) !important;
}

.mndl-btn-stop:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

/* ========================================
   LISTA DE ÁUDIOS GRAVADOS
   ======================================== */

.mndl-audio-list {
    margin: 0 20px 20px !important;
}

.mndl-audio-list-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    background: rgba(0,255,0,0.1) !important;
    border: 1px solid #333 !important;
    border-radius: 10px 10px 0 0 !important;
    border-bottom: none !important;
}

.mndl-audio-count {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #00ff00 !important;
}

.mndl-clear-all-audio {
    background: transparent !important;
    border: 1px solid #ff4444 !important;
    border-radius: 6px !important;
    color: #ff4444 !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.mndl-clear-all-audio:hover {
    background: rgba(255,68,68,0.1) !important;
}

.mndl-audio-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

.mndl-audio-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    background: rgba(0,255,0,0.05) !important;
    border: 1px solid #333 !important;
    border-top: none !important;
}

.mndl-audio-item:first-child {
    border-top: 1px solid #333 !important;
    border-radius: 10px 10px 0 0 !important;
}

.mndl-audio-list-header + .mndl-audio-items .mndl-audio-item:first-child {
    border-radius: 0 !important;
}

.mndl-audio-item:last-child {
    border-radius: 0 0 10px 10px !important;
}

.mndl-audio-item:only-child {
    border-radius: 10px !important;
    border-top: 1px solid #333 !important;
}

.mndl-audio-item-number {
    width: 28px !important;
    height: 28px !important;
    background: #00ff00 !important;
    color: #000 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.mndl-audio-item-player {
    flex: 1 !important;
    height: 36px !important;
    border-radius: 6px !important;
}

.mndl-audio-item-duration {
    font-size: 12px !important;
    color: #888 !important;
    font-family: "SF Mono", monospace !important;
    min-width: 45px !important;
    text-align: right !important;
}

.mndl-audio-item-delete {
    background: transparent !important;
    border: none !important;
    color: #ff4444 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s !important;
}

.mndl-audio-item-delete:hover {
    opacity: 1 !important;
}

/* Compatibilidade com preview antigo */
.mndl-audio-preview {
    margin: 0 20px 20px !important;
    padding: 16px !important;
    background: rgba(0,255,0,0.05) !important;
    border: 1px solid #333 !important;
    border-radius: 12px !important;
}

.mndl-audio-player {
    width: 100% !important;
    height: 40px !important;
    border-radius: 8px !important;
}

.mndl-delete-audio {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 10px !important;
    background: transparent !important;
    border: 1px solid #ff4444 !important;
    border-radius: 8px !important;
    color: #ff4444 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.mndl-delete-audio:hover {
    background: rgba(255,68,68,0.1) !important;
}

/* ========================================
   PAINEL DE CONFIGURAÇÕES
   ======================================== */

.mndl-config-panel {
    padding: 20px !important;
    background: #111 !important;
    border-top: 1px solid #333 !important;
}

.mndl-config-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #888 !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.mndl-config-row {
    margin-bottom: 16px !important;
}

.mndl-config-row:last-child {
    margin-bottom: 0 !important;
}

.mndl-config-row label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #aaa !important;
    margin-bottom: 8px !important;
}

/* Selects */
.mndl-tone-select,
.mndl-category-select {
    width: 100% !important;
    padding: 12px 16px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
}

.mndl-tone-select:focus,
.mndl-category-select:focus {
    outline: none !important;
    border-color: #00ff00 !important;
}

/* Slider */
.mndl-slider-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.mndl-temperature-slider {
    flex: 1 !important;
    height: 6px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: #333 !important;
    border-radius: 3px !important;
    outline: none !important;
}

.mndl-temperature-slider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: #00ff00 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,255,0,0.4) !important;
}

.mndl-temperature-value {
    min-width: 40px !important;
    padding: 6px 10px !important;
    background: #00ff00 !important;
    color: #000 !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Textarea */
.mndl-custom-prompt {
    width: 100% !important;
    padding: 12px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-family: inherit !important;
    resize: vertical !important;
    min-height: 60px !important;
}

.mndl-custom-prompt::placeholder {
    color: #555 !important;
}

.mndl-custom-prompt:focus {
    outline: none !important;
    border-color: #00ff00 !important;
}

/* Foto */
.mndl-featured-image-preview {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
}

.mndl-featured-image-wrapper {
    position: relative !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 8px !important;
    border: 2px solid #333 !important;
    background: linear-gradient(145deg, #1a1a1a 0%, #252525 100%) !important;
    overflow: hidden !important;
}

.mndl-featured-image-placeholder {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 24px !important;
    opacity: 0.5 !important;
    z-index: 1 !important;
}

.mndl-featured-image-thumb {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    z-index: 2 !important;
}

.mndl-featured-image-thumb[src=""],
.mndl-featured-image-thumb:not([src]) {
    display: none !important;
}

.mndl-remove-featured-image {
    background: #ff4444 !important;
    border: none !important;
    color: #fff !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.mndl-photo-btn {
    padding: 12px 20px !important;
    background: #1a1a1a !important;
    border: 1px dashed #444 !important;
    border-radius: 10px !important;
    color: #888 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    transition: all 0.2s !important;
}

.mndl-photo-btn:hover {
    border-color: #00ff00 !important;
    color: #00ff00 !important;
}

/* Galeria de Fotos */
.mndl-gallery-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.mndl-gallery-preview {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.mndl-gallery-item {
    position: relative !important;
    width: 60px !important;
    height: 60px !important;
}

.mndl-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 2px solid #333 !important;
}

.mndl-gallery-item .mndl-remove-gallery-photo {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    background: #ff4444 !important;
    border: none !important;
    color: #fff !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mndl-gallery-count {
    font-size: 12px !important;
    color: #00ff00 !important;
    margin-left: 10px !important;
}

/* ========================================
   BOTÃO GERAR
   ======================================== */

.mndl-action-panel {
    padding: 20px !important;
    background: #0d0d0d !important;
}

.mndl-generate-btn {
    width: 100% !important;
    padding: 18px 24px !important;
    background: linear-gradient(145deg, #00cc00 0%, #009900 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    font-family: inherit !important;
    box-shadow: 0 6px 20px rgba(0,200,0,0.3) !important;
    transition: all 0.2s !important;
}

.mndl-generate-btn:hover:not(:disabled) {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(0,200,0,0.4) !important;
}

.mndl-generate-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Processing - hidden by default, shown via JS with .active class */
.mndl-processing-status {
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 16px !important;
    margin-top: 16px !important;
    background: rgba(0,255,0,0.1) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0,255,0,0.2) !important;
}

.mndl-processing-status.active {
    display: flex !important;
}

.mndl-spinner {
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #333 !important;
    border-top-color: #00ff00 !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

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

.mndl-status-text {
    color: #00ff00 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* ========================================
   RESULTADO E ERRO
   ======================================== */

.mndl-result-section {
    padding: 30px 20px !important;
    background: linear-gradient(180deg, #0a1a0a 0%, #0d0d0d 100%) !important;
    text-align: center !important;
}

.mndl-success-box h4 {
    color: #00ff00 !important;
    font-size: 20px !important;
    margin: 12px 0 20px !important;
}

.mndl-success-icon {
    font-size: 48px !important;
}

.mndl-result-buttons {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-bottom: 16px !important;
}

.mndl-result-btn {
    padding: 12px 24px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
}

.mndl-result-btn:hover {
    background: #252525 !important;
    border-color: #00ff00 !important;
}

.mndl-new-btn {
    padding: 10px 20px !important;
    background: transparent !important;
    border: none !important;
    color: #888 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.mndl-new-btn:hover {
    color: #00ff00 !important;
}

/* Erro */
.mndl-error-section {
    padding: 30px 20px !important;
    background: linear-gradient(180deg, #1a0a0a 0%, #0d0d0d 100%) !important;
    text-align: center !important;
}

.mndl-error-icon {
    font-size: 48px !important;
}

.mndl-error-text {
    color: #ff4444 !important;
    font-size: 14px !important;
    margin: 12px 0 20px !important;
}

.mndl-retry-btn {
    padding: 12px 24px !important;
    background: #1a1a1a !important;
    border: 1px solid #ff4444 !important;
    border-radius: 10px !important;
    color: #ff4444 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    font-family: inherit !important;
}

.mndl-retry-btn:hover {
    background: rgba(255,68,68,0.1) !important;
}

/* ========================================
   RODAPÉ
   ======================================== */

.mndl-recorder-footer {
    padding: 20px 16px !important;
    background: #080808 !important;
    text-align: center !important;
    border-top: 1px solid #1a1a1a !important;
}

.mndl-footer-brand {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #00ff00 !important;
    margin-bottom: 6px !important;
}

.mndl-footer-author {
    font-size: 11px !important;
    color: #888 !important;
    margin-bottom: 10px !important;
}

.mndl-footer-disclaimer {
    font-size: 9px !important;
    color: #555 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    padding: 10px !important;
    background: rgba(255,255,255,0.03) !important;
    border-radius: 6px !important;
}

/* ========================================
   MOBILE
   ======================================== */

@media screen and (max-width: 480px) {
    .mndl-frontend-recorder {
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    
    .mndl-lcd-timer {
        font-size: 40px !important;
    }
    
    .mndl-ctrl-btn {
        width: 70px !important;
        height: 70px !important;
    }
    
    .mndl-ctrl-icon {
        font-size: 20px !important;
    }
    
    .mndl-device-controls {
        gap: 20px !important;
    }
}

/* Timer oculto para JS */
.mndl-recording-timer,
.mndl-recording-indicator {
    display: none !important;
}

/* ========================================
   TEXTO PARA REESCREVER
   ======================================== */

.mndl-rewrite-text {
    width: 100% !important;
    padding: 12px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-family: inherit !important;
    resize: vertical !important;
    min-height: 80px !important;
}

.mndl-rewrite-text:focus {
    outline: none !important;
    border-color: #00ff00 !important;
    box-shadow: 0 0 0 2px rgba(0,255,0,0.1) !important;
}

.mndl-rewrite-text::placeholder {
    color: #666 !important;
}

.mndl-field-hint {
    font-size: 10px !important;
    color: #666 !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
}

/* ========================================
   DOCUMENTOS/PDF
   ======================================== */

.mndl-documents-container {
    width: 100% !important;
}

.mndl-documents-preview {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

.mndl-document-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
}

.mndl-document-icon {
    font-size: 20px !important;
    flex-shrink: 0 !important;
}

.mndl-document-name {
    flex: 1 !important;
    font-size: 12px !important;
    color: #ccc !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.mndl-remove-document {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    background: rgba(255,68,68,0.2) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #ff4444 !important;
    font-size: 12px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

.mndl-remove-document:hover {
    background: rgba(255,68,68,0.4) !important;
}

.mndl-documents-count {
    font-size: 11px !important;
    color: #00ff00 !important;
    margin-left: 10px !important;
}

/* ========================================
   SELETOR DE QUANTIDADE DE PALAVRAS
   ======================================== */

.mndl-word-count-select {
    width: 100% !important;
    padding: 10px 12px !important;
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-family: inherit !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ff00' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
}

.mndl-word-count-select:focus {
    outline: none !important;
    border-color: #00ff00 !important;
    box-shadow: 0 0 0 2px rgba(0,255,0,0.1) !important;
}

.mndl-word-count-select option {
    background: #1a1a1a !important;
    color: #fff !important;
    padding: 10px !important;
}

/* ========================================
   SPEECH-TO-TEXT (MICROFONE NOS CAMPOS)
   ======================================== */

.mndl-textarea-with-mic {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
}

.mndl-textarea-with-mic textarea {
    padding-right: 50px !important;
}

.mndl-speech-btn {
    position: absolute !important;
    right: 8px !important;
    top: 8px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 255, 0, 0.1) !important;
    border: 1px solid #333 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.mndl-speech-btn:hover:not(.disabled) {
    background: rgba(0, 255, 0, 0.2) !important;
    border-color: #00ff00 !important;
    transform: scale(1.05) !important;
}

.mndl-speech-btn.active {
    background: rgba(255, 0, 0, 0.2) !important;
    border-color: #ff0000 !important;
    animation: pulse-speech 1.5s infinite !important;
}

.mndl-speech-btn.disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.mndl-speech-icon {
    font-size: 16px !important;
    line-height: 1 !important;
}

@keyframes pulse-speech {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
    }
    50% { 
        box-shadow: 0 0 0 8px rgba(255, 0, 0, 0);
    }
}