/* SMS Sending Page Specific Styles */

/* Message Composer */
.message-composer {
    transition: all 0.3s ease;
}

.message-composer:focus-within {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Character Counter */
.char-counter {
    font-variant-numeric: tabular-nums;
}

.char-counter.warning {
    color: #F59E0B;
}

.char-counter.error {
    color: #EF4444;
}

/* Recipients Section */
.recipient-chip {
    transition: all 0.2s ease;
}

.recipient-chip:hover {
    background-color: #E0E7FF;
}

/* File Upload Area */
.upload-area {
    border: 2px dashed #D1D5DB;
    transition: all 0.3s ease;
}

.upload-area:hover {
    border-color: #7C3AED;
    background-color: #F5F3FF;
}

.upload-area.dragover {
    border-color: #7C3AED;
    background-color: #F5F3FF;
}

/* Preview Phone */
.phone-preview {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.phone-screen {
    background: linear-gradient(to bottom, #F9FAFB 0%, #FFFFFF 100%);
}

/* Send Button Animation */
.send-button {
    position: relative;
    overflow: hidden;
}

.send-button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.send-button:active::after {
    width: 300px;
    height: 300px;
}

/* Template Card */
.template-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.template-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Message Type Tabs */
.message-type-tab {
    transition: all 0.2s ease;
}

.message-type-tab.active {
    background-color: #7C3AED;
    color: white;
}

/* Address Book Modal */
.address-book-item {
    transition: background-color 0.2s ease;
}

.address-book-item:hover {
    background-color: #F3F4F6;
}

.address-book-item.selected {
    background-color: #EDE9FE;
}

/* Success Animation */
@keyframes successPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.success-animation {
    animation: successPulse 0.6s ease-in-out;
}