/* File: /home/apibible/public_html/sms/assets/css/style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
}

.fas, .far, .fal, .fad, .fab {
    vertical-align: -0.125em;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* Tailwind's gray-300 */
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #9ca3af; /* Tailwind's gray-400 */
}
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.text-xxs {
    font-size: 0.7rem;
    line-height: 0.9rem;
}

.toast-notification {
    position: fixed;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease-out, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-width: calc(100% - 2.5rem);
    width: auto;
    min-width: 280px;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
}
.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast-icon {
    margin-right: 0.75rem;
    font-size: 1.125rem;
    flex-shrink: 0;
}

@media (max-width: 280px) {
    .toast-notification {
        min-width: calc(100% - 1rem);
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    .toast-icon {
        font-size: 1rem;
        margin-right: 0.5rem;
    }
}

@media (min-width: 640px) {
    .toast-notification {
        max-width: 400px;
    }
}

.flex-1-min-h-0 {
    flex: 1 1 0%;
    min-height: 0;
}

/* Smooth transitions for contact list updates */
#contact-list-container li {
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    will-change: background-color, border-color, opacity, transform;
}

.contact-name-display {
    transition: color 0.2s ease-in-out, font-weight 0.2s ease-in-out;
    will-change: color, font-weight;
}

.unread-badge {
    transition: opacity 0.3s ease-in-out;
    will-change: opacity;
    opacity: 1;
}

.unread-badge:empty {
    opacity: 0;
}

/* Prevent layout shifts */
#contact-list-container {
    contain: content;
}