/* Import Inter and JetBrains Mono fonts - matching Chatwoot design */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* Global Utility Classes */
.hidden {
    display: none !important;
}

/* Default Theme Variables (Light Theme) - Premium Redesign */
:root {
    --primary-color: #007AFF;
    /* iOS Blue */
    --primary-hover: #0056b3;
    --primary-light: rgba(0, 122, 255, 0.1);
    --success-color: #34C759;
    /* iOS Green */
    --danger-color: #FF3B30;
    /* iOS Red */
    --warning-color: #FF9500;
    /* iOS Orange */
    --background-color: #f1f3f5;
    /* Body uses card background directly */
    --card-background: #FFFFFF;
    --text-color: #1C1C1E;
    /* Near Black */
    --text-secondary-color: #636366;
    /* Gray */
    --border-color: rgba(60, 60, 67, 0.29);
    /* Subtle Border */
    --input-background: #f1f3f5;
    --input-border-color: rgba(60, 60, 67, 0.2);
    --input-focus-border: var(--primary-color);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --glass-background: rgba(248, 248, 250, 0.85);
    /* More opaque glass */
    --secondary-color: #8E8E93;
    /* iOS Secondary Gray */
    --secondary-hover: #636366;
    --avatar-background: #E5E5EA;
    --log-info-color: var(--primary-color);
    --log-success-color: var(--success-color);
    --log-error-color: var(--danger-color);
    --log-warning-color: var(--warning-color);
    --log-timestamp-color: var(--text-secondary-color);
    --modal-overlay-color: rgba(0, 0, 0, 0.5);
    /* Lighter overlay */
    --outline-btn-color: var(--primary-color);
    --outline-btn-hover-bg: var(--primary-light);
    --card-border-radius: 14px;
    /* Slightly larger radius */
    --input-border-radius: 10px;
    --button-border-radius: 10px;
    --form-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    /* Softer shadow */
    --premium-gradient: linear-gradient(180deg, #F9F9FC 0%, #F2F2F7 100%);
    /* Subtle vertical gradient */
    --transition-standard: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

    /* Inter font weight variables - matching Chatwoot design system */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
}

/* Tema Escuro - Premium Redesign */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #0A84FF;
        /* iOS Dark Blue */
        --primary-hover: #3395ff;
        --primary-light: rgba(10, 132, 255, 0.15);
        --success-color: #30D158;
        /* iOS Dark Green */
        --danger-color: #FF453A;
        /* iOS Dark Red */
        --warning-color: #FF9F0A;
        /* iOS Dark Orange */
        --background-color: #151718;
        /* Body uses card background directly */
        --card-background: #1C1C1E;
        /* Dark Gray */
        --text-color: #FFFFFF;
        --text-secondary-color: #8E8E93;
        /* Lighter Gray */
        --border-color: rgba(84, 84, 88, 0.65);
        /* Darker Subtle Border */
        --input-background: #151718;
        --input-border-color: rgba(84, 84, 88, 0.5);
        --shadow-color: rgba(0, 0, 0, 0.3);
        --glass-background: rgba(28, 28, 30, 0.85);
        /* Dark Glass */
        --secondary-color: #8E8E93;
        --secondary-hover: #b0b0b3;
        --avatar-background: #3A3A3C;
        --log-timestamp-color: var(--text-secondary-color);
        --modal-overlay-color: rgba(0, 0, 0, 0.7);
        --outline-btn-color: var(--primary-color);
        --outline-btn-hover-bg: var(--primary-light);
        --form-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        --premium-gradient: linear-gradient(180deg, #0a0a0a 0%, #000000 100%);
        --contact-detail-color-dark: var(--text-secondary-color);
        --placeholder-color-dark: #5a5a5e;
        /* Adjusted dark placeholder */
    }

    /* Dark mode placeholder style */
    .ql-editor.ql-blank::before {
        color: var(--placeholder-color-dark) !important;
        font-style: italic;
        /* Make placeholder italic */
    }

    /* Dark mode scrollbar styling for relevant elements */
    .contact-preview-list::-webkit-scrollbar,
    .log-area::-webkit-scrollbar,
    #editor-container::-webkit-scrollbar,
    /* Add for resizable editor */
    emoji-picker::-webkit-scrollbar {
        width: 8px;
        height: 8px;
        /* For horizontal scrollbars if they appear */
    }

    .contact-preview-list::-webkit-scrollbar-track,
    .log-area::-webkit-scrollbar-track,
    #editor-container::-webkit-scrollbar-track,
    emoji-picker::-webkit-scrollbar-track {
        background: transparent;
        /* Make track transparent */
        border-radius: 4px;
    }

    .contact-preview-list::-webkit-scrollbar-thumb,
    .log-area::-webkit-scrollbar-thumb,
    #editor-container::-webkit-scrollbar-thumb,
    emoji-picker::-webkit-scrollbar-thumb {
        background-color: var(--secondary-color);
        /* Thumb color */
        border-radius: 4px;
        border: 2px solid var(--input-background);
        /* Match track background */
    }

    .contact-preview-list::-webkit-scrollbar-thumb:hover,
    .log-area::-webkit-scrollbar-thumb:hover,
    #editor-container::-webkit-scrollbar-thumb:hover,
    emoji-picker::-webkit-scrollbar-thumb:hover {
        background-color: var(--primary-hover);
        /* Hover color */
    }
}

/* Estilos Base - Premium Redesign */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    /* Align container to top */
    justify-content: center;
    /* Inter font optimizations */
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    font-variation-settings: 'slnt' 0;
    letter-spacing: -0.011em;
    padding: 0;
    /* Remove body padding */
    line-height: 1.6;
    /* Improved readability */
}

.container {
    max-width: 1280px;
    width: 100%;
    /* Removed background, backdrop-filter, box-shadow, border */
    border-radius: 0;
    /* Remove radius */
    padding: 2.5rem 3rem;
    /* Keep padding for content spacing */
    display: flex;
    flex-direction: column;
    animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    margin: 0 auto;
    /* Center container horizontally */
    position: relative;
    /* overflow: hidden; Keep or remove based on testing */
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header - Premium Redesign */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Align title left, potential elements right */
    padding-bottom: 1.5rem;
    /* Increased padding */
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 2.5rem;
    /* Increased margin */
    position: relative;
}

/* Removed header::after gradient line */

.header h2 {
    font-size: 1.25rem;
    /* Slightly larger */
    font-weight: var(--font-weight-semibold);
    /* Inter semibold weight */
    color: var(--text-color);
    /* Use standard text color */
    display: flex;
    align-items: center;
    gap: 0.8rem;
    letter-spacing: -0.01em;
    /* Subtle tightening */
    /* Removed gradient text */
}

.header h2 i {
    color: var(--primary-color);
    /* Icon uses primary color */
    font-size: 1.6rem;
    /* Adjust icon size */
}

/* Two Column Grid Layout */
.main-content {
    display: grid;
    /* Adjusted column sizing - Give right panel more relative space */
    grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr);
    /* Equal proportion, min width 400px */
    gap: 3rem;
    /* Consistent gap */
    width: 100%;
    align-items: start;
    transition: var(--transition-standard);
}

@media (max-width: 1024px) {
    .main-content {
        gap: 2rem;
        /* Reduced gap for medium screens */
    }
}

/* Form Panel - Premium Redesign */
.form-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Consistent gap */
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    padding: 2rem 2.2rem;
    /* Adjusted padding */
    box-shadow: var(--form-shadow);
    border: 1px solid var(--border-color);
    position: relative;
    min-height: 0;
    transition: var(--transition-standard);
    overflow: visible;
    /* Allow potential overflows like focus rings */
}

.form-panel:hover {
    /* Subtle shadow enhancement on hover */
    /* transform: translateY(-3px); Explicitly removed */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Removed form-panel::before and ::after */

#mass-message-form {
    display: flex;
    flex-direction: column;
    /* gap: 1.5rem; Gap between form groups */
}

/* Preview Panel (Container for Contact Preview) - Premium Redesign */
.preview-panel {
    position: sticky;
    top: 2.5rem;
    /* Adjusted sticky top position */
    height: calc(100vh - 5rem);
    /* Adjusted height calculation */
    max-height: 80vh;
    /* Adjusted max-height */
    display: flex;
    flex-direction: column;
    /* Ensure vertical layout */
    align-self: start;
}

/* Form Group - Premium Redesign */
.form-group {
    margin-bottom: 1.5rem;
    /* Increased spacing */
}

/* Label - Premium Redesign */
label {
    display: block;
    margin-bottom: 0.6rem;
    /* Increased spacing */
    font-weight: var(--font-weight-medium);
    /* Medium weight for labels */
    font-size: 0.9rem;
    /* Slightly smaller */
    color: var(--text-secondary-color);
    /* Use secondary text color */
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

label i {
    color: var(--secondary-color);
    /* Icon uses secondary color */
    font-size: 0.9rem;
    /* Adjust icon size */
}

/* Input, Select, Textarea - Premium Redesign */
/* input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea */

input,
select,
textarea {
    width: 100%;
    padding: 0.9rem 1.1rem;
    /* Increased padding */
    border: 1px solid var(--input-border-color);
    /* Use specific input border color */
    border-radius: var(--input-border-radius);
    background: var(--input-background);
    color: var(--text-color);
    font-size: 1rem;
    /* Standard base font size */
    font-family: var(--font-family-sans);
    /* Ensure font consistency */
    transition: border-color var(--transition-standard), box-shadow var(--transition-standard);
    box-shadow: none;
    /* Remove default inner shadow */
    /* appearance: none; Remove default styling */
    /* -webkit-appearance: none; */
    -moz-appearance: none;
}

/* Estilo opcional para checkbox */
input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin-right: 0.5rem;
    /* Espaço entre o checkbox e o label */
    accent-color: var(--primary-color);
    /* Cor customizada */
    cursor: pointer;
}

select {
    -webkit-appearance: none;
    /* Remove default arrow in WebKit browsers */
    -moz-appearance: none;
    /* Remove default arrow in Firefox */
    appearance: none;
    /* Remove default arrow in other browsers */
    background-color: var(--input-background);
    /* Ensure consistent background */
    background-image: none;
    /* Remove any default background image */
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--secondary-color);
    /* Subtle hover border */
}

select {
    cursor: pointer;
    /* Ensure pointer cursor for dropdown */
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--input-focus-border);
    /* Use primary color for focus border */
    /* Subtle focus ring */
    box-shadow: 0 0 0 3px var(--primary-light);
}

/* Select Specific Styles - Premium Redesign */
select {
    /* Custom arrow using SVG, themed with primary color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23007AFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    /* Adjusted position */
    background-size: 1.1rem;
    /* Adjusted size */
    padding-right: 3rem;
    /* Ensure space for arrow */
}

/* Dark mode select arrow */
@media (prefers-color-scheme: dark) {
    select {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230A84FF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    }
}

/* Drag and Drop Area - Premium Redesign */
.drop-zone {
    border: 1px dashed var(--input-border-color);
    /* Use input border color, dashed */
    border-radius: var(--input-border-radius);
    padding: 2.5rem;
    /* Increased padding */
    text-align: center;
    cursor: pointer;
    transition: var(--transition-standard);
    position: relative;
    background-color: transparent;
    /* Make background transparent */
    overflow: hidden;
}

.drop-zone:hover {
    border-color: var(--primary-color);
    background-color: var(--primary-light);
    /* Use light primary background on hover */
}

.drop-zone.drag-over {
    border-color: var(--primary-color);
    border-style: solid;
    /* Solid border when dragging over */
    background-color: var(--primary-light);
    transform: none;
    /* Remove scale effect */
}

.drop-zone-text {
    color: var(--text-secondary-color);
    font-size: 0.95rem;
    font-weight: 500;
}

.drop-zone-input {
    position: absolute;
    inset: 0;
    /* Cover entire area */
    opacity: 0;
    cursor: pointer;
}

/* File Name Display - Premium Redesign */
.file-name-display {
    margin-top: 0.8rem;
    /* Adjusted spacing */
    font-size: 0.9rem;
    color: var(--success-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center the text */
    gap: 0.5rem;
    position: relative;
    /* Add relative positioning for absolute children */
}

.file-name-display i {
    font-size: 1rem;
}

/* File info container for proper layout */
.file-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    position: relative;
}

/* File info text with remove button inline */
.file-info-text-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

/* Remove attachment button */
.remove-attachment-button {
    background: var(--secondary-color);
    border: none;
    color: white;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 3px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.7;
    transition: var(--transition-standard);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.remove-attachment-button:hover {
    opacity: 1;
    background: var(--danger-color);
}

.remove-attachment-button i {
    font-size: 0.7rem;
    margin: 0;
}

/* Attachment Preview Styles */
.attachment-preview {
    display: block;
    /* Ensure it takes its own line */
    margin-top: 0.8rem;
    /* Space above the preview */
    max-width: 100%;
    /* Don't exceed container width */
    height: auto;
    /* Maintain aspect ratio */
    border-radius: 8px;
    /* Slightly rounded corners */
    object-fit: contain;
    /* Ensure the whole image/audio player is visible */
}

.image-preview {
    width: 80px;
    /* Define width for square */
    height: 80px;
    /* Define height for square */
    object-fit: cover;
    /* Crop the image to fit */
    cursor: pointer;
    /* Indicate it's clickable */
    transition: transform 0.2s ease;
    /* Add slight transition */
}

/* .image-preview duplicado removido */

.image-preview:hover {
    transform: scale(1.05);
    /* Slight zoom on hover */
}

.audio-preview {
    max-height: 60px;
    /* Limit height for audio player */
    width: 100%;
    /* Make audio player take full width */
}


/* Rich Text Editor Styles - Premium Redesign */
.message-input-wrapper {
    position: relative;
    display: flex;
    /* Use flex for better alignment */
    flex-direction: column;
    /* Stack editor and toolbar */
    height: auto;
    margin-bottom: 0;
    /* Remove bottom margin, handled by form gap */
}

/* Quill Editor Container - Premium Redesign */
#editor-container {
    min-height: 150px;
    /* Increased min-height */
    height: 150px;
    /* Increased initial height */
    border-radius: var(--input-border-radius);
    background: var(--input-background);
    resize: vertical;
    overflow: auto;
    color: var(--text-color);
    font-size: 1rem;
    /* Match input font size */
    line-height: 1.6;
    /* Match body line height */
    font-family: var(--font-family-sans);
    /* Use main font */
    border: 1px solid var(--input-border-color);
    /* Use input border */
    transition: border-color var(--transition-standard), box-shadow var(--transition-standard);
    order: 1;
    /* Editor comes first */
    margin-bottom: 0.5rem;
    /* Space between editor and toolbar */
}

/* Override Quill's default styles */
.ql-toolbar.ql-snow {
    display: none;
}

.ql-container.ql-snow {
    border: none !important;
    /* Remove Quill's border */
    border-radius: 0;
    /* Remove Quill's radius */
    font-family: inherit;
}

.ql-editor {
    padding: 0.9rem 1.1rem;
    /* Match input padding */
    min-height: 80px;
    /* Adjusted min-height for content area */
    background-color: var(--input-background);
}

#editor-container:focus-within {
    /* Style container when editor has focus */
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.ql-editor p {
    margin-bottom: 0.8rem;
    /* Slightly more space between paragraphs */
}

/* WhatsApp Format Toolbar - Premium Redesign */
.whatsapp-format-toolbar {
    display: flex;
    gap: 0.5rem;
    /* Slightly increased gap */
    padding: 0;
    /* Remove padding */
    border-top: none;
    margin-top: 0;
    /* Remove margin */
    order: 2;
    /* Toolbar comes after editor */
    justify-content: flex-start;
    /* Align to start */
}

.format-button {
    color: var(--secondary-color);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: var(--input-border-radius);
    transition: 0.2s;
}

.format-button:hover {
    background-color: var(--primary-light);
    /* Use light primary background */
    color: var(--primary-color);
    border-color: transparent;
    /* Keep border transparent on hover */
}

.format-button i {
    pointer-events: none;
    font-size: 1.1rem;
    /* Slightly larger icons */
}

.format-button.active {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* Placeholder List Container */
.placeholder-list-container {
    position: absolute;
    bottom: 50px;
    /* Position above the toolbar */
    right: 50px;
    /* Position near the placeholder button */
    z-index: 1100;
    /* Same as emoji picker */
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 0.8rem 0;
    /* Padding inside the container */
    animation: fadeInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 250px;
    /* Adjusted width for the list */
    max-height: 200px;
    /* Max height before scrolling */
    overflow-y: auto;
    /* Enable scrolling */
}

/* Estilização da barra de rolagem para placeholder-list-container */
.placeholder-list-container::-webkit-scrollbar {
    width: 10px;
}

.placeholder-list-container::-webkit-scrollbar-track {
    background: var(--card-background);
    border-radius: var(--card-border-radius);
}

.placeholder-list-container::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: var(--card-border-radius);
    border: 2px solid var(--card-background);
}

.placeholder-list-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

/* Firefox */
.placeholder-list-container {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) var(--card-background);
}

.placeholder-list-container:hover {
    scrollbar-color: var(--primary-color) var(--card-background);
}

.placeholder-list-container.hidden {
    display: none;
}

.placeholder-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.placeholder-list li {
    padding: 0.6rem 1.2rem;
    /* Padding for each list item */
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color);
    transition: background-color 0.2s, color 0.2s;
}

.placeholder-list li:hover {
    background-color: var(--primary-light);
    color: var(--primary-color);
}

/* Ajuste do tamanho do container de mensagens prontas */
#canned-responses-container {
    width: 350px;
    /* Maior largura */
    max-height: 400px;
    /* Maior altura */
    display: flex;
    flex-direction: column;
    height: 400px;
    /* Fixar altura para layout flex */
}

/* Estilo da barra de pesquisa dentro do container de mensagens prontas */
#canned-responses-search {
    width: 100%;
    padding: 0.7rem 0.8rem;
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    font-size: 0.9rem;
    color: var(--text-color);
    background-color: var(--input-background);
    box-sizing: border-box;
}

/* Estilos para o container de mensagens prontas */
.canned-responses-header {
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    /* Não encolher */
}

#canned-responses-container.hidden {
    display: none;
}

.canned-responses-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color);
}

.canned-responses-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    flex-grow: 1;
    /* Ocupa espaço restante */
}

.canned-responses-list li {
    padding: 0.8rem 1.2rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s, color 0.2s;
}

.canned-responses-list li:last-child {
    border-bottom: none;
}

.canned-responses-list li:hover {
    background-color: var(--primary-light);
}

.canned-response-title {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
    color: var(--primary-color);
}

.canned-response-preview {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.canned-responses-list .loading,
.canned-responses-list .error,
.canned-responses-list .empty {
    padding: 1rem 1.2rem;
    text-align: center;
    font-style: italic;
    color: var(--text-secondary-color);
    cursor: default;
}

.canned-responses-list .error {
    color: var(--danger-color);
}


/* Emoji Picker Element Style - Premium Redesign */
emoji-picker {
    position: absolute;
    bottom: 50px;
    /* Adjusted position */
    right: 0;
    z-index: 1100;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--card-border-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Enhanced shadow */
    padding: 0;
    /* Remove padding, handled internally */
    animation: fadeInUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    width: 350px;
    /* Adjusted width */
    max-height: 300px;
    /* Increased max-height */
    overflow: hidden;
    /* Hide main overflow, internal elements scroll */

    /* Theme Customization using CSS Variables */
    --emoji-picker-background: var(--card-background);
    --emoji-picker-text-color: var(--text-color);
    --emoji-picker-indicator-color: var(--primary-color);
    --emoji-picker-category-icon-color: var(--text-secondary-color);
    --emoji-picker-category-icon-active-color: var(--primary-color);
    --emoji-picker-search-background: var(--input-background);
    --emoji-picker-search-color: var(--text-color);
    --emoji-picker-search-border-color: var(--input-border-color);
    --emoji-picker-hover-background: var(--primary-light);
    /* Use light primary */
    --emoji-picker-focus-background: var(--primary-light);
    --emoji-picker-border-color: var(--border-color);
    --emoji-picker-scrollbar-thumb-color: var(--secondary-color);
    --emoji-picker-scrollbar-track-color: transparent;
    /* Transparent track */
    --emoji-picker-font-family: var(--font-family-sans);
    /* Use main font */
    --emoji-picker-font-size: 0.95rem;
    /* Adjust font size */
    --emoji-picker-border-radius: var(--card-border-radius);
    /* Match card radius */
}

emoji-picker.hidden {
    display: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Interval Container - Premium Redesign */
.interval-container {
    display: flex;
    gap: 1rem;
    /* Keep gap */
}

.interval-container input {
    position: relative;
    /* Padding adjusted by custom number input styles */
}

/* Removed absolute positioning for 'seg' text */
.interval-container input {
    padding-right: 60px;
    /* Keep space for buttons */
}

/* Button Group - Premium Redesign */
.button-group {
    flex-direction: row;
    display: flex;
    gap: 0.8rem;
    /* Slightly reduced gap */
    margin-top: 2.5rem;
    /* Increased margin */
}

#initiate-sending-button {
    min-width: 140px;
    white-space: nowrap;
}

#stop-sending-button {
    min-width: 140px;
    white-space: nowrap;
}

/* Base Button Styles - Premium Redesign */
.btn {
    padding: 0.9rem 1.5rem;
    /* Adjusted padding */
    border: none;
    font-weight: 500;

    border-radius: var(--button-border-radius);
    font-weight: 500;
    /* Adjusted weight */
    cursor: pointer;
    display: inline-flex;
    /* Use inline-flex */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    /* Adjusted gap */
    transition: var(--transition-standard);
    flex: 1;
    /* Keep flex grow */
    font-size: 0.95rem;
    /* Slightly smaller font */
    letter-spacing: 0;
    /* Remove letter spacing */
    position: relative;
    overflow: hidden;
    text-align: center;
    line-height: 1.4;
    /* Ensure consistent line height */
    -webkit-tap-highlight-color: transparent;
    /* Remove tap highlight on mobile */
}

/* Removed btn::before shine effect */

/* Primary Button - Premium Redesign */
.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.25);
    /* Adjusted shadow */
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    box-shadow: 0 6px 14px rgba(0, 122, 255, 0.3);
    /* Enhanced hover shadow */
}

.btn-primary:active {
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.2);
}

/* Stop State for Primary Button */
.btn-primary[data-state="stop"] {
    background-color: var(--danger-color);
    box-shadow: 0 4px 10px rgba(255, 59, 48, 0.25);
}

.btn-primary[data-state="stop"]:hover {
    background-color: #d43025;
    /* Darker red */
    box-shadow: 0 6px 14px rgba(255, 59, 48, 0.3);
}

/* Danger Button - Premium Redesign */
.btn-danger {
    background-color: var(--danger-color);
    color: white;
    box-shadow: 0 4px 10px rgba(255, 59, 48, 0.25);
}

.btn-danger:hover {
    background-color: #d43025;
    /* Darker red */
    box-shadow: 0 6px 14px rgba(255, 59, 48, 0.3);
}

.btn-danger:active {
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.2);
}

/* Secondary Button - Premium Redesign */
.btn-secondary {
    background-color: var(--secondary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(142, 142, 147, 0.2);
    /* Adjusted shadow */
}

.btn-secondary:hover {
    background-color: var(--secondary-hover);
    box-shadow: 0 6px 14px rgba(142, 142, 147, 0.25);
}

.btn-secondary:active {
    box-shadow: 0 2px 6px rgba(142, 142, 147, 0.15);
}

/* Load Contacts Button - Premium Redesign (inherits .btn and .btn-secondary) */
#load-contacts-button {
    padding: 0.8rem 1.5rem;
    /* Adjusted padding */
    min-height: auto;
    line-height: 1.4;
}

/* Outline Button - Premium Redesign */
.btn-outline {
    background: transparent;
    border: 1px solid var(--outline-btn-color);
    color: var(--outline-btn-color);
    box-shadow: none;
    /* No shadow for outline */
}

/* Removed btn-outline::after fill effect */

.btn-outline:hover {
    background: var(--outline-btn-hover-bg);
    /* Use light primary background */
    color: var(--primary-color);
    /* Ensure text color matches */
    border-color: var(--outline-btn-color);
    /* Keep border color */
    /* transform removido para hover do btn-outline */
}

.btn-outline:active {
    background: rgba(0, 122, 255, 0.15);
    /* Slightly darker background on active */
    /* transform removido para active do btn-outline */
}

/* Contact Preview Styles - Premium Redesign */
/* (Container styles already updated) */

.contact-preview-container:hover {
    /* Subtle shadow enhancement on hover */
    /* transform: translateY(-3px); Explicitly removed */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Removed contact-preview-container::before and ::after */

.contact-preview-container h3 {
    font-size: 1.1rem;
    /* Slightly smaller title */
    font-weight: 600;
    color: var(--text-color);
    /* Standard text color */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 1.2rem;
    /* Increased padding */
    margin-bottom: 1.5rem;
    /* Increased margin */
    position: relative;
}

.contact-preview-container h3 i {
    color: var(--primary-color);
    /* Icon uses primary color */
    font-size: 1.2rem;
    /* Adjust icon size */
    /* Removed gradient text */
}

/* Contact Preview List - Premium Redesign */
.contact-preview-list {
    overflow-y: auto;
    flex-grow: 1;
    scroll-behavior: smooth;
    /* Removed fixed max-height, rely on flex-grow and panel height */
}

/* Scrollbar styles already defined in dark mode section, ensure they apply generally */
.contact-preview-list::-webkit-scrollbar,
.log-area::-webkit-scrollbar,
#editor-container::-webkit-scrollbar,
emoji-picker::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.contact-preview-list::-webkit-scrollbar-track,
.log-area::-webkit-scrollbar-track,
#editor-container::-webkit-scrollbar-track,
emoji-picker::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.contact-preview-list::-webkit-scrollbar-thumb,
.log-area::-webkit-scrollbar-thumb,
#editor-container::-webkit-scrollbar-thumb,
emoji-picker::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 4px;
    border: 2px solid var(--card-background);
    /* Use card background for border */
}

.contact-preview-list::-webkit-scrollbar-thumb:hover,
.log-area::-webkit-scrollbar-thumb:hover,
#editor-container::-webkit-scrollbar-thumb:hover,
emoji-picker::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover);
}

/* Update dark mode scrollbar border */
@media (prefers-color-scheme: dark) {

    .contact-preview-list::-webkit-scrollbar-thumb,
    .log-area::-webkit-scrollbar-thumb,
    #editor-container::-webkit-scrollbar-thumb,
    emoji-picker::-webkit-scrollbar-thumb {
        border: 2px solid var(--card-background);
        /* Ensure dark card background is used */
    }
}

/* Preview Placeholder - Premium Redesign */
.preview-placeholder {
    color: var(--text-secondary-color);
    /* Use secondary text */
    text-align: center;
    padding: 3rem 1.5rem;
    /* Increased padding */
    font-style: normal;
    /* Remove italic */
    font-size: 0.95rem;
    background: var(--background-color);
    /* Use main background color */
    border-radius: var(--input-border-radius);
    border: 1px dashed var(--border-color);
    /* Keep dashed border */
    margin: auto 0;
    /* Center vertically if list is empty */
}

/* Contact Preview Item - Premium Redesign */
.contact-preview-item {
    display: flex;
    align-items: center;
    padding: 0.9rem 0.5rem;
    /* Adjusted padding */
    border-bottom: 1px solid var(--border-color);
    gap: 0.8rem;
    /* Reduced gap */
    animation: fadeInItem 0.4s ease-out forwards;
    /* Ensure animation completes */
    border-radius: 8px;
    /* Slightly smaller radius for items */
    transition: background-color var(--transition-standard), transform var(--transition-standard);
    position: relative;
    /* Keep for remove button */
}

.contact-preview-item:hover {
    background-color: var(--primary-light);
    /* Use light primary background */
    transform: none;
    /* Remove translateX */
    cursor: pointer;
    /* Add pointer cursor on hover */
}

.contact-preview-item:last-child {
    border-bottom: none;
}

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contact-avatar {
    position: relative;
}

/* Contact Avatar - Premium Redesign */
.contact-avatar {
    position: relative;
    flex-shrink: 0;
    /* Prevent avatar shrinking */
}

.contact-avatar::after {
    content: "";
    position: absolute;
    bottom: 1px;
    /* Adjusted position */
    right: 1px;
    width: 10px;
    height: 10px;
    background-color: var(--success-color);
    border-radius: 50%;
    border: 2px solid var(--card-background);
    /* Use card background for border */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    /* Add subtle shadow */
}

.contact-avatar img {
    width: 42px;
    /* Slightly smaller */
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--avatar-background);
    box-shadow: none;
    /* Remove individual shadow */
    border: none;
    /* Remove border */
}

.contact-info {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
}

/* Contact Info - Premium Redesign */
.contact-name {
    font-weight: 500;
    /* Adjusted weight */
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-color);
    line-height: 1.3;
    /* Adjust line height */
}

.contact-detail {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    /* Use secondary text */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    line-height: 1.3;
    /* Adjust line height */
}

/* Improve dark mode contrast for contact detail */
@media (prefers-color-scheme: dark) {
    .contact-detail {
        color: var(--contact-detail-color-dark);
    }
}

.contact-detail i {
    font-size: 0.8rem;
    color: var(--secondary-color);
    /* Use secondary color for icon */
    margin-top: -1px;
    /* Fine-tune alignment */
}

/* Remove Contact Button - Premium Redesign */
.remove-contact-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--secondary-color);
    font-size: 1.2rem;
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--transition-standard), background-color var(--transition-standard), color var(--transition-standard);
}

.contact-preview-item:hover .remove-contact-button {
    opacity: 0.6;
    /* Show on item hover */
}

.remove-contact-button:hover {
    opacity: 1;
    color: var(--danger-color);
    background-color: rgba(255, 59, 48, 0.1);
}

.remove-contact-button i {
    font-size: inherit;
    line-height: 1;
}

/* Log Trigger Button Container - Premium Redesign */
.log-trigger-container {
    display: flex;
    justify-content: flex-start;
    margin-top: 0.5rem;
    /* Reduced margin */
}

/* Log trigger button inherits .btn and .btn-outline styles */
.log-trigger-container .btn-outline {
    flex: none;
    /* Don't grow */
    padding: 0.7rem 1.3rem;
    /* Adjusted padding */
    font-weight: 500;
    /* Match button weight */
    font-size: 0.9rem;
    /* Slightly smaller */
}

.log-trigger-container .btn-outline i {
    margin-right: 0.4rem;
    /* Adjusted gap */
    transition: transform var(--transition-standard);
}

.log-trigger-container .btn-outline:hover i {
    transform: none;
    /* Remove rotate effect */
}

/* Log Modal Styles - Premium Redesign */
.log-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--modal-overlay-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
    backdrop-filter: blur(8px);
    /* Increased blur */
    -webkit-backdrop-filter: blur(8px);
}

.log-modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.log-modal-overlay .log-container {
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    padding: 0;
    /* Padding handled by inner elements */
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 800px;
    /* Slightly reduced max-width */
    max-height: 80vh;
    /* Adjusted max-height */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    /* Enhanced shadow */
    transform: scale(0.97) translateY(15px);
    /* Adjusted animation */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.log-modal-overlay:not(.hidden) .log-container {
    transform: scale(1) translateY(0);
}

/* Removed log-container::before gradient line */

/* Log Header - Premium Redesign */
.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.8rem;
    /* Increased padding */
    border-bottom: 1px solid var(--border-color);
    background-color: var(--card-background);
    /* Ensure background */
    flex-shrink: 0;
    position: relative;
}

/* Log Title - Premium Redesign */
.log-title {
    font-weight: 600;
    font-size: 1.1rem;
    /* Adjusted size */
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Adjusted gap */
    color: var(--text-color);
    /* Use standard text color */
}

.log-title i {
    color: var(--primary-color);
    /* Use primary color for icon */
    font-size: 1.2rem;
    /* Adjust icon size */
    /* Removed gradient text */
}

/* Log Actions - Premium Redesign */
.log-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    /* Adjusted gap */
}

/* Log Area within Modal - Premium Redesign */
.log-area {
    padding: 1.5rem 1.8rem;
    /* Adjusted padding */
    overflow-y: auto;
    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
    /* Modern monospace fonts */
    font-size: 0.88rem;
    /* Slightly adjusted size */
    line-height: 1.65;
    /* Increased line height */
    flex-grow: 1;
    background-color: var(--background-color);
    /* Use main background for contrast */
    color: var(--text-color);
    scroll-behavior: smooth;
    max-height: calc(80vh - 100px);
    /* Calculate max-height based on header/footer */
    overflow-y: auto;
}

/* Thumb styling remains similar, applied to all */
.contact-preview-list::-webkit-scrollbar-thumb,
.log-area::-webkit-scrollbar-thumb,
#editor-container::-webkit-scrollbar-thumb,
emoji-picker::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    /* Thumb color */
    border-radius: 4px;
    border: 2px solid var(--input-background);
    /* Creates a 'floating' effect */
}

.contact-preview-list::-webkit-scrollbar-thumb:hover,
.log-area::-webkit-scrollbar-thumb:hover,
#editor-container::-webkit-scrollbar-thumb:hover,
emoji-picker::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover);
    /* Hover color */
}

/* Remove redundant individual scrollbar styles */
/* .log-area::-webkit-scrollbar { ... } */
/* .log-area::-webkit-scrollbar-track { ... } */
/* .log-area::-webkit-scrollbar-thumb { ... } */
/* .log-area::-webkit-scrollbar-thumb:hover { ... } */

.log-area::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}

.log-area::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* Log Entry - Premium Redesign */
.log-entry {
    margin-bottom: 1rem;
    /* Increased spacing */
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    /* Use standard border color, solid */
    display: flex;
    flex-direction: column;
    animation: fadeInLog 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    position: relative;
    padding-left: 1.5rem;
    /* Increased padding for icon space */
}

.log-entry:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Use icon color for the side line */
.log-entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    /* Align with text */
    bottom: 2px;
    /* Align with text */
    width: 4px;
    /* Slightly thicker */
    border-radius: 2px;
    background-color: var(--secondary-color);
    /* Default color */
}

.log-entry.info::before {
    background-color: var(--log-info-color);
}

.log-entry.success::before {
    background-color: var(--log-success-color);
}

.log-entry.error::before {
    background-color: var(--log-error-color);
}

.log-entry.warning::before {
    background-color: var(--log-warning-color);
}

/* Removed debug style */

@keyframes fadeInLog {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

    /* Slide in from left */
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Log Line (Icon + Message) - Premium Redesign */
.log-line {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    /* Adjusted gap */
}

.log-icon {
    position: absolute;
    /* Position icon over the line */
    left: -6px;
    /* Adjust position */
    top: 3px;
    flex-shrink: 0;
    font-size: 1rem;
    /* Adjusted size */
    width: 16px;
    /* Ensure consistent width */
    text-align: center;
    color: var(--secondary-color);
    /* Default icon color */
    background-color: var(--background-color);
    /* Match log area background */
    padding: 0 2px;
    /* Space around icon */
}

.log-message {
    flex-grow: 1;
    word-break: break-word;
    padding: 0;
    /* Remove padding */
    color: var(--text-color);
    /* Ensure standard text color */
}

/* Log Timestamp - Premium Redesign */
.log-timestamp {
    font-size: 0.78rem;
    /* Slightly larger */
    color: var(--log-timestamp-color);
    margin-top: 0.4rem;
    /* Adjusted spacing */
    padding-left: 0;
    /* Remove padding, aligned with message */
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.log-timestamp::before {
    content: "";
    /* Remove clock emoji */
}

/* Log Entry Type Icons - Premium Redesign */
.log-entry.info .log-icon {
    color: var(--log-info-color);
    filter: none;
}

.log-entry.success .log-icon {
    color: var(--log-success-color);
    filter: none;
}

.log-entry.error .log-icon {
    color: var(--log-error-color);
    filter: none;
}

.log-entry.warning .log-icon {
    color: var(--log-warning-color);
    filter: none;
}

/* Removed debug style */

/* Buttons within Log Header - Premium Redesign */
.clear-log-button,
.close-log-button {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--secondary-color);
    border-radius: var(--button-border-radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: var(--transition-standard);
    position: relative;
    overflow: hidden;
    line-height: 1.4;
}

/* Removed ::before fill effect */

.clear-log-button:hover,
.close-log-button:hover {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.close-log-button {
    padding: 0.5rem;
    /* Make close button square-ish */
    font-size: 1.2rem;
    /* Larger close icon */
    line-height: 1;
    /* Adjust line height for icon */
}

.clear-log-button i,
.close-log-button i {
    transition: transform var(--transition-standard);
    font-size: 1rem;
    /* Adjust icon size */
}

/* Remove hover icon transforms */
.clear-log-button:hover i {
    transform: none;
}

.close-log-button:hover i {
    transform: none;
}

/* Loading Spinner - Premium Redesign */
.spinner {
    border: 3px solid var(--primary-light);
    /* Use light primary for track */
    border-left-color: var(--primary-color);
    /* Use primary for spinner part */
    border-radius: 50%;
    width: 28px;
    /* Slightly larger */
    height: 28px;
    animation: spin 0.8s linear infinite;
    /* Smoother animation */
    margin: 3rem auto;
    /* Increased margin */
    filter: none;
    /* Remove filter */
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading Indicator (Placeholder) - Premium Redesign */
.loading-indicator {
    display: flex;
    /* Use flex to center spinner */
    justify-content: center;
    align-items: center;
    padding: 3rem 1.5rem;
    /* Match placeholder padding */
    background: var(--background-color);
    border-radius: var(--input-border-radius);
    border: 1px dashed var(--border-color);
    margin: auto 0;
}

.loading-indicator .spinner {
    width: 28px;
    /* Match main spinner size */
    height: 28px;
    margin: 0;
    /* Remove margin when inside indicator */
}

/* Removed loading-indicator .spinner::after */

/* Load Contacts Button Styling - Inherits .btn and .btn-secondary */
/* (Specific styles already adjusted previously) */

#load-contacts-button:disabled {
    opacity: 0.6;
    /* Adjusted disabled opacity */
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    background-color: var(--secondary-color);
    /* Ensure base color */
}

/* Remove icon rotation on hover */
#load-contacts-button i {
    transition: none;
}

#load-contacts-button:hover i:not(:disabled) {
    transform: none;
}

/* Select Option with Color Dot - Premium Redesign */
.select-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Adjusted gap */
}

.select-option .color-dot {
    width: 10px;
    /* Slightly smaller */
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* Subtle border */
}

/* Responsividade - Premium Redesign */
@media (max-width: 1024px) {
    .container {
        padding: 2rem 1.5rem;
        /* Adjust padding */
        /* Styles removed previously still apply */
    }

    .main-content {
        grid-template-columns: 1fr;
        /* Stack columns */
        gap: 2rem;
    }

    .preview-panel {
        position: static;
        height: auto;
        max-height: 60vh;
        /* Adjusted max-height */
        overflow-y: auto;
    }

    .contact-preview-container {
        padding: 1.5rem;
        /* Adjust padding */
    }

    .contact-preview-list {
        margin-right: -8px;
        /* Match scrollbar */
        padding-right: 8px;
        /* Match scrollbar */
    }
}

@media (max-width: 768px) {
    .container {
        padding: 1.5rem 1rem;
        /* Further reduce padding */
    }

    .header h2 {
        font-size: 1.6rem;
        /* Adjust title size */
    }

    .main-content {
        gap: 1.5rem;
        /* Reduce gap */
    }

    .form-panel,
    .contact-preview-container {
        padding: 1.5rem;
        /* Adjust padding */
    }

    .log-modal-overlay .log-container {
        width: 95%;
        max-height: 90vh;
        /* Allow slightly more height */
    }

    .log-header,
    .log-area {
        padding: 1rem 1.2rem;
        /* Adjust padding */
    }
}

@media (max-width: 576px) {

    /* body padding already 0 */
    .container {
        padding: 1.5rem 1rem;
        /* Consistent padding */
    }

    .header h2 {
        font-size: 1.5rem;
    }

    .interval-container {
        flex-direction: column;
        gap: 0.8rem;
        /* Adjust gap */
    }

    .button-group {
        flex-direction: column;
        gap: 0.8rem;
        /* Adjust gap */
    }

    .contact-preview-container,
    .log-modal-overlay .log-container {
        padding: 1.2rem;
        /* Adjust padding */
    }

    .log-header {
        padding: 0.8rem 1.2rem;
    }

    .log-area {
        padding: 1rem 1.2rem;
        font-size: 0.85rem;
        /* Slightly smaller log font */
    }

    input,
    select,
    textarea,
    .btn {
        font-size: 0.95rem;
        /* Adjust base font size for inputs/buttons */
    }

    label {
        font-size: 0.85rem;
        /* Adjust label size */
    }
}

/* Theme Toggle Button - Premium Redesign */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-secondary-color);
    /* Use secondary color */
    cursor: pointer;
    padding: 0.5rem;
    /* Increase padding */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-standard), color var(--transition-standard);
    position: absolute;
    /* Position absolutely */
    top: 1.5rem;
    /* Adjust position */
    right: 1.5rem;
}

.theme-toggle:hover {
    background: var(--primary-light);
    /* Use light primary background */
    color: var(--primary-color);
    /* Use primary color */
}

.theme-toggle i {
    font-size: 1.2rem;
    /* Adjust icon size */
}

/* Hide default spinners on number inputs */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

/* Custom Number Input with Buttons - Premium Redesign */
.number-input-container {
    display: flex;
    align-items: center;
    position: relative;
    flex-grow: 1;
}

.number-input-container input[type=number] {
    padding-right: 64px;
    /* Adjusted space for buttons */
    text-align: center;
}

.interval-button {
    position: absolute;
    top: 0;
    /* Align with input top */
    bottom: 0;
    /* Align with input bottom */
    background-color: transparent;
    /* Transparent background */
    border: none;
    /* Remove border */
    border-left: 1px solid var(--input-border-color);
    /* Separator line */
    color: var(--text-secondary-color);
    /* Use secondary text color */
    cursor: pointer;
    width: 32px;
    /* Adjusted width */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-standard), color var(--transition-standard);
    z-index: 1;
    font-size: 1rem;
    /* Larger icon */
}

.interval-button:hover {
    background-color: var(--primary-light);
    /* Light primary background */
    color: var(--primary-color);
}

.interval-button:active {
    background-color: rgba(0, 122, 255, 0.15);
    /* Slightly darker active */
}

.interval-button.interval-decrement {
    right: 32px;
    /* Position left button */
    border-radius: 0;
    border-right: none;
}

.interval-button.interval-increment {
    right: 0;
    /* Position rightmost button */
    border-top-right-radius: var(--input-border-radius);
    border-bottom-right-radius: var(--input-border-radius);
}

.interval-button i {
    pointer-events: none;
}

/* Advanced Filters Section */
.advanced-filters-section {
    margin-top: 1.5rem;
    /* Space above the section */
    margin-bottom: 1.5rem;
    /* Space below the section */
    border-top: 1px solid var(--border-color);
    /* Separator line */
    padding-top: 1.5rem;
    /* Space below the line */
}

.advanced-filters-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    /* Padding for clickable area */
    width: 100%;
    /* Make button full width */
    text-align: left;
    transition: color 0.2s;
}

.advanced-filters-toggle:hover {
    color: var(--primary-hover);
}

.advanced-filters-toggle .toggle-icon {
    margin-left: auto;
    /* Push icon to the right */
    transition: transform 0.3s ease;
}

.advanced-filters-content {
    padding-top: 1.5rem;
    /* Space below toggle button */
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out, padding-top 0.4s ease-out;
    max-height: 1000px;
    /* Set a large max-height for expanded state */
    opacity: 1;
}

.advanced-filters-content.hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    /* Prevent interaction when hidden */
    pointer-events: none;
    /* Ensure form groups inside don't add margin when hidden */
    margin-bottom: 0;
}

/* Adjust margin for form groups inside the advanced section */
.advanced-filters-content .form-group {
    margin-bottom: 1.5rem;
    /* Keep consistent spacing */
}

.advanced-filters-content .form-group:last-child {
    margin-bottom: 0;
    /* Remove margin from last item */
}

/* --- Estilos para o Modo Contém/Não Contém Clicável --- */

/* Container do filtro de query (controle de visibilidade) */
.filter-query-container {
    transition: opacity 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
    /* Manter transições */
    overflow: hidden;
    max-height: 200px;
    /* Altura suficiente para o conteúdo */
    opacity: 1;
}

.filter-query-container.hidden {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0 !important;
    /* Remove margem quando oculto */
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    pointer-events: none;
    /* Impede interação quando oculto */
}

/* Estilo para o span clicável (Contém/Não Contém) */
.query-mode-toggle {
    font-weight: 600;
    /* Destaca a palavra */
    color: var(--primary-color);
    /* Usa a cor primária */
    cursor: pointer;
    padding: 2px 4px;
    /* Pequeno padding para área de clique */
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
    margin-left: 4px;
    /* Espaço após "Conversa" */
    user-select: none;
    /* Impede seleção de texto */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}


/* --- Schedule Modal Styles - Premium Redesign --- */
.schedule-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: var(--modal-overlay-color);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    /* Slightly higher than log modal if needed */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.schedule-modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.schedule-modal-container {
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    padding: 0;
    /* Padding handled by inner elements */
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 500px;
    /* Smaller max-width for schedule modal */
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.97) translateY(15px);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.schedule-modal-overlay:not(.hidden) .schedule-modal-container {
    transform: scale(1) translateY(0);
}

.schedule-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.8rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    min-height: 3.6rem;
    box-sizing: border-box;
}

.schedule-modal-header h3 {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.4;
    flex-grow: 1;
    min-width: 0;
}

.close-modal-button {
    /* Generic close button style */
    background: transparent;
    border: none;
    color: var(--text-secondary-color);
    font-size: 1.4rem;
    cursor: pointer;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 50%;
    flex-shrink: 0;
    transition: color 0.2s, background-color 0.2s;
}

.close-modal-button:hover {
    color: var(--danger-color);
    background-color: rgba(255, 59, 48, 0.1);
}

.close-modal-button i {
    font-size: inherit;
    line-height: 1;
}

.close-modal-button:not(.clear-log-button) {
    /* Ensure only icon is visible for modal close buttons */
    font-size: 0;
}

.close-modal-button:not(.clear-log-button) i {
    font-size: 1.4rem;
}

.schedule-modal-body {
    padding: 1.8rem;
    /* Padding for content */
    flex-grow: 1;
    /* No overflow needed here unless content is very long */
}

.schedule-modal-body .form-group {
    margin-bottom: 1.5rem;
    /* Consistent spacing */
}

.schedule-modal-body .form-group:last-child {
    margin-bottom: 0;
}

/* Style for datetime-local input */
input[type="datetime-local"] {
    /* Inherits base input styles */
    /* Add specific adjustments if needed */
    cursor: text;
    /* Ensure text cursor */
}

/* Style for datetime-local icon (browser specific) */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.schedule-modal-footer {
    display: flex;
    justify-content: flex-end;
    /* Align buttons to the right */
    gap: 0.8rem;
    padding: 1.2rem 1.8rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--background-color);
    /* Slightly different background for footer */
    flex-shrink: 0;
}

/* Buttons in footer inherit .btn styles */
#cancel-schedule-button {
    /* Inherits .btn, apply secondary style */
    background-color: var(--secondary-color);
    color: white;
    box-shadow: 0 4px 10px rgba(142, 142, 147, 0.2);
}

#cancel-schedule-button:hover {
    background-color: var(--secondary-hover);
    /* transform removido para hover do botão cancelar agendamento */
    box-shadow: 0 6px 14px rgba(142, 142, 147, 0.25);
}

#confirm-schedule-button {
    /* Inherits .btn, apply primary style */
}


/* --- Right Panel Tabs - Premium Redesign --- */
.right-panel {
    position: sticky;
    top: 2.5rem;
    height: calc(100vh - 5rem);
    /* Match preview panel height */
    max-height: 80vh;
    /* Match preview panel max-height */
    display: flex;
    flex-direction: column;
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    padding: 0;
    /* Remove padding, handled by inner elements */
    box-shadow: var(--form-shadow);
    border: 1px solid var(--border-color);
    overflow: hidden;
    /* Hide overflow for the panel itself */
}

.tabs-container {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    /* Prevent tabs from shrinking */
    padding: 0 2rem;
    /* Increased horizontal padding */
    background-color: var(--background-color);
    /* Slightly different background for tabs */
    width: 100%;
    /* Ensure full width */
}

.tab-button {
    padding: 1rem 3.5rem 1rem 1.2rem;
    /* Balanced padding for flexible width */
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    /* Indicator line */
    color: var(--text-secondary-color);
    font-weight: 500;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    /* Fixed gap between content elements */
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -1px;
    /* Overlap border */
    position: relative;
    box-sizing: border-box;
    /* Include padding in width calculation */
    flex: 1;
    /* Allow buttons to share space equally */
}

.tab-button:hover {
    color: var(--text-color);
}

.tab-button.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-button i {
    font-size: 1rem;
    /* Adjust icon size */
    margin-right: 0.4rem;
    /* Space between icon and text */
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

/* Group icon and text together */
.tab-button>* :not(span) {
    display: flex;
    align-items: center;
    flex-grow: 1;
    /* Take remaining space */
}

/* Counter Badge Style - Fixed positioning and alignment */
.tab-button span {
    /* Base styles - will be overridden by specific ID selectors */
    background-color: var(--secondary-color);
    color: var(--card-background);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Adjust badge color in dark mode if needed */
@media (prefers-color-scheme: dark) {
    .tab-button span {
        background-color: var(--secondary-color);
        color: var(--card-background);
        /* Keep text light */
    }

    /* Dark theme - unified badge styles */
    #contact-count,
    #scheduled-count,
    #saved-count {
        background-color: var(--secondary-color) !important;
        color: var(--card-background) !important;
        padding: 0.25rem 0.8rem !important;
        height: 22px !important;
        line-height: 22px !important;
    }

    /* Dark theme - active state for all badges */
    .tab-button.active #contact-count,
    .tab-button.active #scheduled-count,
    .tab-button.active #saved-count {
        background-color: var(--primary-color) !important;
        color: white !important;
    }
}

.tab-button.active span {
    background-color: var(--primary-color);
    color: white;
}

/* Unified badge styles - all badges follow the same pattern */
#contact-count,
#scheduled-count,
#saved-count {
    background-color: var(--secondary-color) !important;
    color: var(--card-background) !important;
    padding: 0.25rem 0.4rem !important;
    border-radius: 12px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    min-width: 28px !important;
    height: 22px !important;
    text-align: center !important;
    line-height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    position: absolute !important;
    right: 0.8rem !important;
    /* Slightly closer to edge for better proportion */
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Active state for all badges - unified pattern */
.tab-button.active #contact-count,
.tab-button.active #scheduled-count,
.tab-button.active #saved-count {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.tab-content {
    display: none;
    /* Hide inactive tabs */
    flex-grow: 1;
    /* Allow content to fill space */
    overflow-y: auto;
    /* Enable scrolling for content */
    padding: 1.5rem;
    /* Padding inside tab content */
    position: relative;
    /* For placeholder positioning */
    /* Apply scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) transparent;
}

.tab-content::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.tab-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 4px;
}

.tab-content::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: 4px;
    border: 2px solid var(--card-background);
}

.tab-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-hover);
}

@media (prefers-color-scheme: dark) {
    .tab-content::-webkit-scrollbar-thumb {
        border: 2px solid var(--card-background);
    }
}


.tab-content.active {
    display: flex;
    /* Use flex to allow placeholder centering */
    flex-direction: column;
    /* Stack content vertically */
}

/* Placeholder within tabs */
.tab-placeholder {
    color: var(--text-secondary-color);
    text-align: center;
    padding: 3rem 1.5rem;
    font-size: 0.95rem;
    background: var(--background-color);
    border-radius: var(--input-border-radius);
    border: 1px dashed var(--border-color);
    margin: auto;
    /* Center placeholder vertically and horizontally */
    width: calc(100% - 2rem);
    /* Adjust width to fit padding */
}

/* Ensure contact list takes full height within its tab */
#preview-tab-content {
    padding: 0;
    /* Remove padding if contact list handles it */
}

#contact-preview-list {
    padding: 1.5rem;
    /* Add padding back to list */
    height: 100%;
    /* Make list take full height of tab */
    overflow-y: auto;
    /* Ensure scrolling */
}

#contact-preview-list .preview-placeholder {
    margin: auto;
    /* Re-center placeholder */
    width: auto;
    /* Reset width */
}


/* --- Scheduled Tasks / Saved Configs List Styles --- */
.scheduled-tasks-list,
.saved-configs-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    /* Space between items */
}

.list-item {
    /* Common style for scheduled tasks and saved configs */
    background-color: var(--background-color);
    /* Use main background */
    border: 1px solid var(--border-color);
    border-radius: var(--input-border-radius);
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    /* Stack info and actions */
    gap: 0.5rem;
    /* Space within item */
    transition: background-color 0.2s, box-shadow 0.2s;
}

.list-item:hover {
    background-color: var(--primary-light);
    /* box-shadow: 0 2px 8px rgba(0,0,0,0.05); */
}

.list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Align items top */
    gap: 0.8rem;
}

.list-item-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
    flex-grow: 1;
    word-break: break-word;
    /* Wrap long titles */
}

.list-item-title i {
    margin-right: 0.4rem;
    color: var(--secondary-color);
}

.list-item-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    /* Prevent actions from shrinking */
}

.list-item-details {
    font-size: 0.85rem;
    color: var(--text-secondary-color);
    display: flex;
    flex-direction: column;
    /* Stack details */
    gap: 0.3rem;
}

.detail-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.detail-line i {
    width: 14px;
    /* Align icons */
    text-align: center;
    color: var(--secondary-color);
    font-size: 0.8rem;
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    /* Pill shape */
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
    background-color: var(--secondary-color);
    /* Default */
}

.status-badge.status-pending {
    background-color: var(--warning-color);
}

.status-badge.status-running {
    background-color: var(--primary-color);
}

/* Blue for running */
.status-badge.status-sent {
    background-color: var(--success-color);
}

.status-badge.status-failed {
    background-color: var(--danger-color);
}

.status-badge.status-cancelled {
    background-color: var(--secondary-color);
    opacity: 0.7;
}

/* Action Buttons within list items */
.list-item-button {
    background: none;
    border: none;
    color: var(--secondary-color);
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.2s, background-color 0.2s;
}

.list-item-button:hover {
    color: var(--primary-color);
    background-color: var(--primary-light);
}

.list-item-button.delete:hover,
.list-item-button.cancel:hover {
    color: var(--danger-color);
    background-color: rgba(255, 59, 48, 0.1);
}

.list-item-button i {
    display: block;
    /* Ensure icon fills button */
}

.query-mode-toggle:hover {
    background-color: var(--primary-light);
    /* Fundo leve no hover */
}

/* Ajuste na label principal para alinhar corretamente com o span */
.filter-query-container label {
    display: flex;
    /* Garante alinhamento */
    align-items: center;
    /* Alinha ícone, texto e span */
    gap: 0.4rem;
    /* Mantém o gap padrão */
}


/* --- Image Preview Modal --- */
.image-preview-modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1100;
    /* Sit on top */
    padding-top: 100px;
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.85);
    /* Black w/ opacity */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: fadeInModal 0.3s ease;
}

.image-preview-modal.hidden {
    display: none;
}

.image-preview-modal:not(.hidden) {
    display: block;
    /* Show when not hidden */
}


.image-preview-modal .modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80vh;
    animation: zoomInModal 0.3s ease;
}

.close-image-preview {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close-image-preview:hover,
.close-image-preview:focus {
    color: #bbb;
    text-decoration: none;
}

@keyframes fadeInModal {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes zoomInModal {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* --- Estilos para Importação de Contatos --- */
.import-contacts-container {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.clear-contacts-button {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary-color);
    font-size: 0.875rem;
    padding: 0.8rem;
    transition: all var(--transition-standard);
}

.clear-contacts-button:hover {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
    color: white;
    transform: none;
}

/* Estilização da barra de rolagem para import-contacts-container e data-preview-container */
.import-contacts-container::-webkit-scrollbar,
.data-preview-container::-webkit-scrollbar {
    width: 10px;
}

.import-contacts-container::-webkit-scrollbar-track,
.data-preview-container::-webkit-scrollbar-track {
    background: var(--card-background);
    border-radius: var(--card-border-radius);
}

.import-contacts-container::-webkit-scrollbar-thumb,
.data-preview-container::-webkit-scrollbar-thumb {
    background-color: var(--secondary-color);
    border-radius: var(--card-border-radius);
    border: 2px solid var(--card-background);
}

.import-contacts-container::-webkit-scrollbar-thumb:hover,
.data-preview-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color);
}

/* Firefox */
.import-contacts-container,
.data-preview-container {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) var(--card-background);
}

.import-contacts-container:hover,
.data-preview-container:hover {
    scrollbar-color: var(--primary-color) var(--card-background);
}

.import-contacts-button {
    width: 100%;
    justify-content: center;
    padding: 0.8rem;
    font-weight: 500;
}

.import-contacts-button i {
    margin-right: 0.5rem;
}

/* Estilos para a tabela de prévia de dados */
.data-preview-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--input-border-radius);
    background-color: var(--input-background);
    margin-top: 0.5rem;
}

.data-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.data-preview-table th {
    background-color: rgba(0, 122, 255, 0.15);
    /* Cor menos transparente para melhor visibilidade */
    color: var(--primary-color);
    font-weight: 600;
    text-align: left;
    padding: 0.7rem;
    position: sticky;
    top: 0;
    z-index: 1;
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(8px);
    /* Fundo fosco */
    -webkit-backdrop-filter: blur(8px);
    /* Suporte para Safari */
}

.data-preview-table td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-color);
}

.data-preview-table tr:last-child td {
    border-bottom: none;
}

.data-preview-table tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

@media (prefers-color-scheme: dark) {
    .data-preview-table tr:nth-child(even) {
        background-color: rgba(255, 255, 255, 0.02);
    }
}

/* Estilos para o grupo de opções de rádio */
.radio-group {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.radio-option input[type="radio"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.radio-option label {
    margin: 0;
    font-weight: normal;
    color: var(--text-color);
    cursor: pointer;
}

/* Estilos para seletor de dias da semana */
.weekdays-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.weekday-option {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background-color: var(--input-background);
    /* Fundo neutro para os dias */
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
    /* Evita seleção do texto ao clicar repetidamente */
}

.weekday-option:hover {
    background-color: var(--primary-light);
    /* Fundo ao passar o mouse */
}

.weekday-option input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.weekday-option label {
    margin: 0;
    font-weight: normal;
    color: var(--text-color);
    cursor: pointer;
    user-select: none;
    /* Evita seleção do texto ao clicar repetidamente */
}

.weekday-option input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.weekday-option label {
    margin: 0;
    font-weight: normal;
    color: var(--text-color);
    cursor: pointer;
}

/* Estilo para opção de checkbox genérica (como "Envio Recorrente") */
.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Espaço entre checkbox e label */
    cursor: pointer;
    /* Indica que a área é clicável */
    user-select: none;
    /* Evita seleção do texto ao clicar repetidamente */
}

.checkbox-option input[type="checkbox"] {
    /* Herda estilos de input[type="checkbox"] (linha 287) */
    margin: 0;
    /* Remove margem padrão se houver */
    background-color: var(--input-background);
    /* Ajusta fundo do checkbox */
    border-radius: 4px;
    /* Bordas arredondadas para o fundo */
    cursor: pointer;
    border: 1px solid var(--input-border-color);
    /* Adiciona borda para destacar a caixinha */
    width: 18px;
    height: 18px;
    appearance: none;
    /* Remove estilo padrão */
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
}

.checkbox-option input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 2px;
    /* Ajustado para alinhar melhor verticalmente */
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Aplica o mesmo estilo para os checkboxes dos dias da semana */
.weekday-option input[type="checkbox"] {
    border: 1px solid var(--input-border-color);
    width: 18px;
    height: 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    background-color: var(--input-background);
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
}

.weekday-option input[type="checkbox"]:checked::before {
    content: "";
    position: absolute;
    top: 2px;
    /* Alinhado com o ajuste do outro checkbox */
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid var(--primary-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.weekday-option input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-light);
}

.checkbox-option input[type="checkbox"]:focus {
    outline: none;
    /* Remove contorno padrão */
    box-shadow: 0 0 0 3px var(--primary-light);
    /* Sombra para foco mais suave */
}

.checkbox-option label {
    /* Herda estilos de label (linha 246) */
    margin: 0;
    /* Remove margem padrão */
    font-weight: var(--font-weight-normal);
    /* Peso normal para label de opção */
    color: var(--text-color);
    /* Cor padrão do texto */
    cursor: pointer;
    /* Cursor de ponteiro para o label também */
    user-select: none;
    /* Evita seleção do texto ao clicar repetidamente */
}

/* ===============================================
   INTER FONT OPTIMIZATIONS - CHATWOOT DESIGN
   =============================================== */

/*
  Font stack explanation:
  - Inter: Primary font, excellent for UI and readability
  - JetBrains Mono: For code/monospace content
  - System fonts as fallbacks for performance
  
  Inter font features enabled:
  - cv02: Alternate a and g
  - cv03: Curved r 
  - cv04: Open four
  - cv11: Single story a
  
  Letter spacing optimized for Inter at different sizes.
  Font weights aligned with Chatwoot design system.
*/