body { 
    font-family: 'Inter', sans-serif; 
}
.myanmar-text { 
    font-family: 'Padauk', sans-serif; 
}
.loader { 
    border: 4px solid #f3f3f3; 
    border-top: 4px solid #3b82f6; 
    border-radius: 50%; 
    width: 40px; 
    height: 40px; 
    animation: spin 1.5s linear infinite; 
}
@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}
.prose-custom { 
    white-space: pre-wrap; 
    word-wrap: break-word; 
}
.hidden { 
    display: none; 
}
.toast { 
    transition: opacity 0.5s, transform 0.5s; 
}
.filter-dropdown { 
    transition: opacity 0.2s, transform 0.2s; 
}
.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.collapsible-content:not([style*="max-height: 0px"]) {
    margin-top: 1rem; /* 16px */
}
.truncate-text {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show up to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sidenav Styles */
#sidenav {
    transition: transform 0.3s ease-in-out; /* For mobile slide */
}
#sidenav-overlay {
    transition: opacity 0.3s ease-in-out;
}
.sidenav-open #sidenav {
    transform: translateX(0);
}

/* Chat Bubble Styles */
.chat-message {
    display: flex;
    gap: 0.75rem; /* 12px */
}
.chat-message.user {
    justify-content: flex-end;
}
.chat-bubble {
    max-width: 75%;
    padding: 0.75rem 1rem; /* 12px 16px */
    border-radius: 1rem; /* 16px */
    font-size: 0.9rem;
    line-height: 1.5;
}
.chat-message.ai .chat-bubble { background-color: #f1f5f9; color: #1e293b; } /* slate-100, slate-800 */
.chat-message.user .chat-bubble { background-color: #2563eb; color: #ffffff; } /* blue-600, white */
.chat-message.typing .chat-bubble { background-color: #e2e8f0; } /* slate-200 */
/* --- Global Full-Height Layout --- */
.page-container {
    /* This container fills the space below the header */
    height: calc(100vh - 4rem); /* 100% viewport height minus header height */
    display: flex;
    flex-direction: column;
}
.page-container > .tab-view {
    /* The active tab view should grow to fill the container */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
/* Increase specificity to ensure hidden tabs are actually hidden */
.page-container > .tab-view.hidden {
    display: none;
}
.page-container > .tab-view > div {
    /* The white card inside the tab view should also grow */
    flex-grow: 1;
}

.pricing-plan-card {
    border: 1px solid #e2e8f0; /* slate-200 */
    border-radius: 1rem; /* 16px */
    padding: 2rem; /* 32px */
    background-color: #ffffff; /* white */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pricing-plan-card.recommended {
    border-color: #2563eb; /* blue-600 */
    border-width: 2px;
    transform: scale(1.05);
    position: relative;
    z-index: 10;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    flex-grow: 1;
}

.plan-features li {
    display: flex;
    align-items: center;
    margin-bottom: 1rem; /* 16px */
    color: #475569; /* slate-600 */
}

.plan-features li svg {
    width: 1.25rem; /* 20px */
    height: 1.25rem; /* 20px */
    margin-right: 0.75rem; /* 12px */
    color: #16a34a; /* green-600 */
}

/* Mobile-specific styles for the chat view */
@media (max-width: 767px) {
    #talk-view .chat-container-mobile-flex {
        height: calc(100vh - 5.5rem); /* Adjust height to fill screen, accounting for header */
        max-height: none; /* Override any max-height that might be set */
    }
    /* Add padding to the bottom of the chat window to make space for the fixed input bar */
    #talk-view #chat-window {
        padding-bottom: 6rem; /* ~96px, provides ample space */
    }
}

/* Style for the currency selector in the business info form */
#marketingCurrency {
    width: 80px; /* Give the currency dropdown a fixed width */
    flex-shrink: 0; /* Prevent it from shrinking on small screens */
}

.skills-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem; /* 8px */
    padding: 0.5rem;
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 0.375rem; /* rounded-md */
}

.skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem; /* 4px */
    background-color: #e2e8f0; /* slate-200 */
    color: #334155; /* slate-700 */
    padding: 0.25rem 0.5rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.875rem; /* text-sm */
}

.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem; /* Make space for the arrow */
}

/* Status Dropdown Colors */
.status-pending {
    background-color: #FEF9C3; /* yellow-100 */
    color: #854d0e; /* yellow-800 */
    border-color: #FDE68A; /* yellow-300 */
}
.status-contacted {
    background-color: #DBEAFE; /* blue-100 */
    color: #1e40af; /* blue-800 */
    border-color: #BFDBFE; /* blue-300 */
}
.status-completed {
    background-color: #D1FAE5; /* green-100 */
    color: #065f46; /* green-800 */
    border-color: #A7F3D0; /* green-300 */
}
.status-cancelled {
    background-color: #FEE2E2; /* red-100 */
    color: #991b1b; /* red-800 */
    border-color: #FECACA; /* red-300 */
}