/* Theme Variables */
:root {
    --primary-color: #0f766e; /* Teal */
    --primary-hover: #115e59;
    --primary-light: #ccfbf1;
    --bg-color: #f8fafc;
    --surface-color: #ffffff;
    --nav-bg: #1e293b;
    --text-main: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --msg-in: #ffffff;
    --msg-out: #d9fdd3;
    --msg-btn-bg: rgba(0, 0, 0, 0.02);
    --msg-btn-text: #06cf9c;
    --msg-btn-border: rgba(0, 0, 0, 0.05);
    --msg-btn-hover: rgba(0, 0, 0, 0.04);
    --chat-bg: #efeae2;
    --chat-overlay: rgba(239, 234, 226, 0.4);
    --auth-gradient: linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 100%);
    --auth-bubble: rgba(15, 118, 110, 0.15);
    --whatsapp-doodle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='%23667781' fill-opacity='0.05'%3E%3Cpath d='M384 512L384 800L416 800L416 512L384 512ZM192 128L192 416L224 416L224 128L192 128ZM576 128L576 416L608 416L608 128L576 128ZM0 384L288 384L288 416L0 416L0 384ZM512 384L800 384L800 416L512 416L512 384ZM384 0L384 288L416 288L416 0L384 0ZM128 192L416 192L416 224L128 224L128 192ZM128 576L416 576L416 608L128 608L128 576ZM576 576L800 576L800 608L576 608L576 576ZM0 576L224 576L224 608L0 608L0 576ZM576 192L800 192L800 224L576 224L576 192ZM0 192L224 192L224 224L0 224L0 192ZM192 384L192 800L224 800L224 384L192 384ZM576 384L576 800L608 800L608 384L576 384ZM384 192L384 608L416 608L416 192L384 192ZM0 0L288 0L288 32L0 32L0 0ZM512 0L800 0L800 32L512 32L512 0ZM128 128L128 416L160 416L160 128L128 128ZM128 512L128 800L160 800L160 512L128 512ZM640 128L640 416L672 416L672 128L640 128ZM640 512L640 800L672 800L672 512L640 512ZM192 0L192 288L224 288L224 0L192 0ZM576 0L576 288L608 288L608 0L576 0ZM384 128L384 416L416 416L416 128L384 128ZM128 384L416 384L416 416L128 416L128 384ZM128 768L416 768L416 800L128 800L128 768ZM576 768L800 768L800 800L576 800L576 768ZM0 768L224 768L224 800L0 800L0 768ZM576 384L800 384L800 416L576 416L576 384ZM0 384L224 384L224 416L0 416L0 384ZM192 576L192 800L224 800L224 576L192 576ZM576 576L576 800L608 800L608 576L576 576ZM384 384L384 800L416 800L416 384L384 384ZM0 128L288 128L288 160L0 160L0 128ZM512 128L800 128L800 160L512 160L512 128ZM128 192L128 416L160 416L160 192L128 192ZM128 576L128 800L160 800L160 576L128 576ZM640 192L640 416L672 416L672 192L640 192ZM640 576L640 800L672 800L672 576L640 576ZM192 128L192 288L224 288L224 128L192 128ZM576 128L576 288L608 288L608 128L576 128ZM384 192L384 416L416 416L416 192L384 192ZM128 512L416 512L416 544L128 544L128 512ZM128 896L416 896L416 928L128 928L128 896ZM576 896L800 896L800 928L576 928L576 896ZM0 896L224 896L224 928L0 928L0 896ZM576 512L800 512L800 544L576 544L576 512ZM0 512L224 512L224 544L0 544L0 512%27/%3E%3C/g%3E%3C/svg%3E");
    --date-separator-bg: rgba(240, 242, 245, 0.95);
    --date-separator-text: #54656f;
}

[data-theme='dark'] {
    --bg-color: #0b141a;
    --surface-color: #111b21;
    --nav-bg: #1e293b;
    --text-main: #e9edef;
    --text-muted: #8696a0;
    --border-color: #222d34;
    --chat-bg: #0b141a; 
    --msg-out: #005c4b;
    --msg-in: #202c33;
    --msg-btn-bg: rgba(255, 255, 255, 0.03);
    --msg-btn-hover: rgba(255, 255, 255, 0.06);
    --msg-btn-text: #53bdeb;
    --msg-btn-border: rgba(255, 255, 255, 0.1);
    --auth-gradient: radial-gradient(circle at top left, #064e3b 0%, #0b141a 100%);
    --auth-bubble: rgba(255, 255, 255, 0.1);
    --chat-overlay: rgba(11, 20, 26, 0.6);
    --date-separator-bg: rgba(32, 44, 51, 0.95);
    --date-separator-text: #8696a0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    height: 100vh;
    overflow: hidden;
}

.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
}

/* Global Navigation Sidebar */
/* Navigation Brand and Labels (hidden on desktop) */
.nav-label, .nav-brand-text {
    display: none;
}
.mobile-header {
    display: none;
}
.mobile-menu-backdrop {
    display: none;
}

/* Sidebar Navigation */
.global-nav {
    width: 76px;
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
    z-index: 100;
}

.nav-item {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--text-muted);
    font-size: 26px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

.nav-item:hover {
    background: var(--bg-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.nav-item.active {
    background: var(--primary-light);
    color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.15);
}

.nav-brand {
    margin-bottom: 20px;
}
.nav-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    align-items: center;
}
.nav-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    align-items: center;
}

.main-content {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--bg-color);
}

/* Forms */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-main);
    text-align: left;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--surface-color);
    font-size: 0.95rem;
    transition: all 0.2s ease;
    outline: none;
    color: var(--text-main);
}

.form-group input:focus, .form-group select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-light);
    background: var(--surface-color);
}

.form-group input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}


/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.2);
    text-decoration: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(15, 118, 110, 0.3);
    background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary-color) 100%);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* Shimmer Button Effect */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-shimmer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: all 0.6s;
}

.btn-shimmer:hover::before {
    left: 100%;
}

.btn-loading {
    position: relative;
    color: transparent !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: btn-spin 0.8s ease infinite;
}

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

.btn-secondary {
    background: var(--surface-color);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
}

.btn-secondary:hover {
    background: var(--bg-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-2px);
}

.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
}

.icon-btn:hover {
    background: var(--bg-color);
    color: var(--primary-color);
}

/* Dashboard Layout */
.dashboard-layout {
    display: flex;
    height: 100vh;
    background: var(--bg-color);
    overflow: hidden;
}

/* Chat Sidebar */
.sidebar {
    width: 360px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--surface-color);
    padding: 8px 0;
}
.sidebar-header {
    padding: 16px;
    background: var(--surface-color);
}

.search-bar {
    position: relative;
    width: 100%;
}
.search-bar input {
    width: 100%;
    padding: 12px 18px 12px 42px;
    border-radius: 12px;
    border: none;
    background: var(--bg-color);
    outline: none;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: all 0.2s ease;
}
.search-bar input:focus { border-color: var(--primary-color); }
.search-bar i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1.1rem;
    pointer-events: none;
    z-index: 10;
}

.sidebar-footer {
    padding: 12px;
    background: var(--surface-color);
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--bg-color);
    transition: all 0.3s ease;
}

.user-info {
    flex: 1;
    overflow: hidden;
}

.user-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-role {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.chat-list {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}
.chat-item {
    display: flex;
    padding: 12px;
    margin-bottom: 4px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: none;
}
.chat-item:hover {
    background: var(--bg-color);
}
.chat-item.active {
    background: var(--primary-light);
}
.chat-item.active .chat-name, .chat-item.active .chat-preview {
    color: var(--primary-color);
}
.chat-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-weight: 600;
    flex-shrink: 0;
}
.chat-info {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.chat-name {
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    color: var(--text-main);
}
.chat-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: normal;
    margin-top: 4px;
    align-self: flex-end;
}
.chat-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Main Chat Area */
.chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--chat-bg);
    position: relative;
}

.chat-area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--whatsapp-doodle);
    background-repeat: repeat;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.chat-header {
    padding: 10px 20px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    min-height: 70px;
    gap: 10px;
}

.chat-messages {
    flex: 1;
    padding: 20px 40px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 1;
}
.chat-loader-container {
    position: absolute;
    inset: 0;
    background: var(--chat-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    font-size: 2.5rem;
    color: var(--primary-color);
}
.pagination-loader {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.pagination-loader i { font-size: 1.2rem; }

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
}
.empty-state i {
    font-size: 4rem;
    color: #cbd5e1;
    margin-bottom: 15px;
}
.empty-state h3 {
    color: var(--text-main);
    margin-bottom: 5px;
}

.message {
    width: fit-content;
    max-width: 500px;
    padding: 8px 12px;
    border-radius: 16px;
    font-size: 0.95rem;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    line-height: 1.5;
    overflow-wrap: break-word;
    word-break: break-word;
}
.message.in {
    background: var(--msg-in);
    align-self: flex-start;
    border-top-left-radius: 4px;
}
.message.out {
    background: var(--msg-out);
    align-self: flex-end;
    border-top-right-radius: 4px;
}
.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: 4px;
}
.msg-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.8;
}
.msg-status {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}
.msg-status.read {
    color: #53bdeb; /* WhatsApp Blue */
}
.msg-status.pending {
    color: var(--text-muted);
    opacity: 0.6;
}
.msg-status.failed {
    color: var(--danger);
}

/* Rich Media and Interactive Components */
.message:has(.msg-media),
.message:has(.video-container),
.message:has(.vn-container) {
    width: 100%;
    max-width: 350px;
}

.msg-media {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 300px; /* Constrain height */
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 8px;
}

.msg-btns-container {
    display: flex;
    flex-direction: column;
    margin: 6px -10px -6px -10px; /* Expand to edges of bubble */
    border-top: 1px solid var(--msg-btn-border);
    overflow: hidden;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.msg-btn {
    width: 100%;
    padding: 12px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--msg-btn-text);
    font-weight: 500;
    cursor: pointer;
    background: var(--msg-btn-bg);
    transition: background 0.2s;
    border: none;
    border-bottom: 1px solid var(--msg-btn-border);
}

.msg-btn:last-child {
    border-bottom: none;
}

.msg-btn:hover {
    background: var(--msg-btn-hover);
}



.chat-input-area {
    padding: 15px 20px;
    background: var(--surface-color);
    display: flex;
    gap: 15px;
    align-items: center;
    border-top: 1px solid var(--border-color);
}
.chat-input-area input {
    flex: 1;
    padding: 14px 18px;
    border-radius: 24px;
    border: 1px solid var(--border-color);
    outline: none;
    background: var(--bg-color);
    color: var(--text-main);
    font-size: 0.95rem;
    transition: border 0.2s;
}
.chat-input-area input:focus { border-color: var(--primary-color); }

/* Right Sidebar */
.profile-sidebar {
    width: 300px;
    background: var(--surface-color);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}
.profile-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
}
.profile-content {
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 1024px) {
    .profile-sidebar { display: none; }
}

/* Mobile Menu Dropdown */
.mobile-menu-container {
    position: relative;
    display: none; /* Desktop hidden */
}

@media (max-width: 768px) {
    .mobile-menu-container { display: block; }
    .sidebar-header { display: flex; gap: 10px; align-items: center; }
}

.mobile-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 200px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin-top: 10px;
    z-index: 1100;
    display: none;
    overflow: hidden;
}

.mobile-dropdown.active {
    display: block;
    animation: slideDown 0.2s ease-out;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.mobile-dropdown-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-main);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.95rem;
}

.mobile-dropdown-item:hover {
    background: var(--bg-color);
}

.mobile-dropdown-item i {
    font-size: 20px;
    color: var(--text-muted);
}

/* Hide mobile nav elements by default */
.mobile-header { display: none; }
.mobile-menu-backdrop { display: none; }

@media (max-width: 768px) {
    .global-nav {
        display: flex;
        position: fixed;
        top: 0;
        left: -280px; /* Hidden offscreen by default */
        width: 280px;
        height: 100vh;
        z-index: 1000;
        background: var(--surface-color);
        border-right: 1px solid var(--border-color);
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 30px;
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
        box-sizing: border-box;
    }
    .global-nav.active {
        left: 0; /* Slide in! */
    }
    .nav-brand {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 10px;
        padding-bottom: 15px;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-brand-text {
        display: inline-block;
        font-size: 1.25rem;
        font-weight: 700;
        color: var(--text-main);
        margin-left: 12px;
    }
    .nav-links {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .nav-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-top: auto;
        padding-top: 15px;
        border-top: 1px solid var(--border-color);
    }
    .nav-item {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 12px 16px;
        border-radius: 12px;
        color: var(--text-muted);
        font-size: 20px;
        text-decoration: none;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    .nav-item:hover, .nav-item.active {
        background: var(--primary-light);
        color: var(--primary-color);
        transform: none;
        box-shadow: none;
    }
    .nav-label {
        display: inline-block;
        font-size: 0.95rem;
        font-weight: 600;
        margin-left: 12px;
        color: var(--text-main);
    }
    .nav-item:hover .nav-label, .nav-item.active .nav-label {
        color: var(--primary-color);
    }

    /* Mobile Header Top Bar */
    .mobile-header {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 56px;
        background: var(--surface-color);
        border-bottom: 1px solid var(--border-color);
        z-index: 990;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
        box-sizing: border-box;
    }
    .mobile-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .mobile-menu-btn {
        background: transparent;
        border: none;
        color: var(--text-main);
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        border-radius: 8px;
        transition: background 0.2s;
    }
    .mobile-menu-btn:hover {
        background: var(--bg-color);
    }
    .mobile-brand {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .mobile-brand-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--text-main);
    }
    .mobile-header-right {
        display: flex;
        align-items: center;
    }

    /* Backdrop Overlay */
    .mobile-menu-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 999;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .mobile-menu-backdrop.active {
        display: block;
        opacity: 1;
    }

    /* Layout Spacing Adjustments */
    .main-content {
        padding-top: 56px;
        padding-bottom: 0 !important;
    }
    .sidebar {
        width: 100%;
        border-right: none;
        height: calc(100vh - 56px);
        transition: all 0.3s ease;
    }
    .chat-area {
        display: none;
        width: 100%;
        height: calc(100vh - 56px);
    }

    /* Full height in chat mode */
    .show-chat .chat-area {
        display: flex;
        height: calc(var(--vh, 1vh) * 100);
    }

    /* Mobile Interaction States */
    .show-chat .sidebar { display: none; }
    .show-chat .mobile-back-btn { display: flex !important; }

    /* Hide the global mobile header when viewing individual chat screens */
    body:has(.dashboard-layout.show-chat) .mobile-header {
        display: none !important;
    }
    body:has(.dashboard-layout.show-chat) .main-content {
        padding-top: 0 !important;
    }
}

/* Auth Layout */
.auth-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: var(--auth-gradient);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}

/* Background Animation */
.auth-bg-bubbles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    margin: 0;
    padding: 0;
}

.auth-bg-bubbles li {
    position: absolute;
    list-style: none;
    display: block;
    width: 40px;
    height: 40px;
    background-color: var(--auth-bubble);
    bottom: -160px;
    animation: bubble 25s infinite linear;
    border-radius: 50%;
}

.auth-bg-bubbles li:nth-child(1) { left: 10%; }
.auth-bg-bubbles li:nth-child(2) { left: 20%; width: 80px; height: 80px; animation-delay: 2s; animation-duration: 17s; }
.auth-bg-bubbles li:nth-child(3) { left: 25%; animation-delay: 4s; }
.auth-bg-bubbles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-duration: 22s; background-color: var(--auth-bubble); opacity: 0.8; }
.auth-bg-bubbles li:nth-child(5) { left: 70%; }
.auth-bg-bubbles li:nth-child(6) { left: 80%; width: 120px; height: 120px; animation-delay: 3s; background-color: var(--auth-bubble); opacity: 0.6; }
.auth-bg-bubbles li:nth-child(7) { left: 32%; width: 160px; height: 160px; animation-delay: 7s; }
.auth-bg-bubbles li:nth-child(8) { left: 55%; width: 20px; height: 20px; animation-delay: 15s; animation-duration: 40s; }
.auth-bg-bubbles li:nth-child(9) { left: 25%; width: 10px; height: 10px; animation-delay: 2s; animation-duration: 40s; background-color: var(--auth-bubble); opacity: 0.9; }
.auth-bg-bubbles li:nth-child(10) { left: 90%; width: 160px; height: 160px; animation-delay: 11s; }

@keyframes bubble {
    0% { transform: translateY(0); }
    100% { transform: translateY(-1200px) rotate(600deg); }
}

.auth-card {
    background: var(--surface-color);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 420px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform 0.3s ease;
    margin: 20px;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 30px 20px;
        margin: 15px;
        max-width: calc(100% - 30px);
    }
    .auth-bg-bubbles li:nth-child(even) {
        display: none; /* Reduce complexity on mobile */
    }
    .auth-header h1 {
        font-size: 1.5rem;
    }
    .auth-header i {
        font-size: 48px;
    }
}

.auth-card:hover {
    transform: translateY(-5px);
}

.auth-header {
    margin-bottom: 35px;
}

.auth-header i {
    font-size: 56px;
    color: #25D366;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(37, 211, 102, 0.2));
}

.auth-header h1 {
    font-size: 1.75rem;
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.auth-header p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 8px;
    font-weight: 500;
}


.alert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.85rem;
    text-align: left;
}

.alert-error {
    background: var(--badge-error-bg);
    color: var(--badge-error-text);
    border: 1px solid var(--badge-error-text);
}

/* Global Loader & Overlays */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--bg-color), 0.8);
    backdrop-filter: blur(4px);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

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

.loader-overlay.active {
    display: flex;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

.loader-text {
    color: var(--text-main);
    font-weight: 500;
    font-size: 1.1rem;
}

/* Custom Confirmation Modal */
.confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.confirm-overlay.active {
    display: flex;
}

.confirm-card {
    background: var(--surface-color);
    padding: 30px;
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 1px solid var(--border-color);
    transform: scale(0.9);
    transition: transform 0.2s ease;
}

.confirm-overlay.active .confirm-card {
    transform: scale(1);
}

.confirm-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.confirm-card h3 {
    margin-bottom: 10px;
    color: var(--text-main);
}

.confirm-card p {
    color: var(--text-muted);
    margin-bottom: 25px;
}

.confirm-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.auth-footer {
    margin-top: 30px;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.auth-footer a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* Voice Recording UI */
.recording-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 60px; /* Leave space for the mic/stop button on the right */
    bottom: 0;
    background: var(--bg-color);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 15px;
    border-radius: 24px;
}

#audioWaveform {
    flex: 1;
    margin: 0 15px;
    height: 35px;
}

.input-actions-right {
    position: relative;
    z-index: 10;
}

.recording-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    animation: blink 1s infinite;
}

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

#recordingTimer {
    font-weight: 500;
    color: var(--text-main);
    font-size: 1rem;
}

.recording-instructions {
    color: var(--text-muted);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.action-btn.primary {
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.action-btn.primary:active {
    transform: scale(1.2);
}

.recording-active #messageInput,
.recording-active .input-actions-left {
    visibility: hidden;
}

.action-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s;
    width: 40px;
    height: 40px;
}

.action-btn:hover {
    background: var(--bg-color);
}

.action-btn.primary:hover {
    background: var(--primary-hover);
    transform: scale(1.05);
}

.action-btn.primary.recording {
    background: #ef4444; /* Red while recording */
}

/* Chat Input Layout Enhancements */
.input-wrapper {
    flex: 1;
    position: relative;
}

.input-actions-left, .input-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.media-preview {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    padding: 12px 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}

.media-preview-content {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-color);
    padding: 8px 12px;
    border-radius: 12px;
}

.clear-media-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
}

.input-wrapper input {
    width: 100% !important;
}

.chat-input-area {
    position: relative; /* Ensure overlay and preview are relative to this */
}

/* Mobile View Adjustments */
@media (max-width: 768px) {
    /* Hide bottom nav when chat is open */
    .dashboard-layout.show-chat ~ .mobile-nav {
        display: none !important;
    }
    
    /* Alternative if they are not siblings */
    body:has(.dashboard-layout.show-chat) .mobile-nav {
        display: none !important;
    }

    /* Remove empty block at bottom when chat is open */
    .dashboard-layout.show-chat .main-content {
        padding-bottom: 0 !important;
    }

    .chat-messages {
        padding: 15px 10px;
    }

    .chat-header {
        padding: 10px 15px;
    }

    .chat-header #activeChatInfo {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 1;
        min-width: 0;
    }

    #releaseBtn {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
        max-width: 85px;
        white-space: normal !important;
        text-align: center;
        line-height: 1.2;
        justify-content: center;
    }

    #releaseBtn i {
        font-size: 1.1rem;
    }
}

/* Chat header — two-row column layout */
.chat-header-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chat-header-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.chat-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.chat-customer-name {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mobile Header Refinement */
@media (max-width: 768px) {
    .chat-header-container {
        gap: 5px;
    }
    
    .chat-header-left {
        gap: 6px;
    }
    
    .chat-avatar {
        width: 32px !important;
        height: 32px !important;
        font-size: 0.8rem !important;
    }
    
    .chat-customer-name {
        font-size: 0.95rem;
        max-width: 220px;
    }
    
    #mobileBackBtn {
        margin-right: 0 !important;
        padding: 5px !important;
    }

    /* Dynamically shrink name based on available space */
    .chat-header-container {
        flex: 1;
        min-width: 0;
    }

    .chat-header-title {
        max-width: none !important;
    }

    #releaseControls {
        flex-shrink: 0;
    }
}

/* Button Loading State Refinement */
.btn-primary.loading, .btn-secondary.loading {
    pointer-events: none;
    opacity: 0.8;
}

.chat-header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.chat-header-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-header-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Media Viewer Modal */
.media-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-viewer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.media-viewer-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    height: 85%;
    background: #111;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalScale {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.media-viewer-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.media-viewer-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.media-viewer-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 20px;
}

.media-viewer-body img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.media-viewer-body video {
    max-width: 100%;
    max-height: 100%;
}

.media-viewer-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
    border-radius: 8px;
}

.media-viewer-footer {
    padding: 20px;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Status Ticks Enhancement */
.msg-status.read i, .msg-status.played i {
    color: #53bdeb !important; /* WhatsApp Blue */
}

.audio-message-bubble {
    padding: 2px !important;
}

.audio-message-bubble > .msg-meta {
    display: none !important;
}

/* WhatsApp-style Voice Note Bubble */
.vn-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2px 4px;
    min-width: 260px;
    max-width: 100%;
    overflow: hidden;
}

.vn-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.vn-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #4a4a4a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.vn-avatar i.ph-user {
    font-size: 24px;
    color: #8696a0;
}

.vn-mic-icon {
    position: absolute;
    right: -2px;
    bottom: -2px;
    font-size: 18px;
    background: transparent;
    z-index: 2;
}

.vn-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vn-main-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vn-play-btn {
    background: transparent;
    border: none;
    color: currentColor;
    font-size: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
}

.vn-slider-wrap {
    flex: 1;
    position: relative;
    height: 16px;
    display: flex;
    align-items: center;
}

.vn-slider {
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.1);
    position: relative;
    border-radius: 2px;
    cursor: pointer;
}

[data-theme='dark'] .vn-slider {
    background: rgba(255, 255, 255, 0.1);
}

.vn-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: currentColor;
    border-radius: 2px;
}

.vn-slider-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #34B7F1;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}

.vn-slider:hover .vn-slider-thumb {
    display: block;
}

.vn-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    opacity: 0.7;
}

/* Mobile Fixes */
@media (max-width: 480px) {
    .vn-container {
        min-width: 200px;
        gap: 8px;
    }
    .vn-avatar-wrap {
        width: 40px;
        height: 40px;
    }
}

/* Fix mobile width for all messages */
@media (max-width: 480px) {
    .message {
        max-width: 85% !important;
    }
}

/* WhatsApp Date Separators & Groups */
.day-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.date-separator {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    margin: 8px 0 16px 0;
    width: 100%;
}
.date-separator span {
    background-color: var(--date-separator-bg);
    color: var(--date-separator-text);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    text-transform: none; /* preserve JS capitalization like "Saturday", "Today" */
    letter-spacing: 0.3px;
}

/* ==========================================================================
   24-HOUR WINDOW BANNER
   ========================================================================== */
.window-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
    width: 100%;
}
.window-banner-inner {
    display: flex;
    align-items: center;
    gap: 8px;
}
.window-banner.active {
    background: var(--primary-light);
    color: var(--primary-hover);
    border-bottom: none;
}
.window-banner.expiring {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706; /* Amber */
}
.window-banner.expired {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c; /* Red */
    border-bottom: none;
}

.window-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    display: inline-block;
}
.window-dot.pulse {
    box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.7);
    animation: pulse-green 2s infinite;
}
.window-banner.expiring .window-dot.pulse {
    box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7);
    animation: pulse-amber 2s infinite;
}

.chat-header-main .window-banner {
    /* Second row: full-width status bar aligned to center below name */
    width: 100%;
    border: none;
    border-radius: 6px;
    padding: 3px 0;
    font-size: 0.78rem;
    font-weight: 400;
    background: transparent;
    justify-content: center; /* center the text */
    gap: 6px;
}

.tpl-window-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background-color: rgba(217, 119, 6, 0.1);
    border: 1px solid rgba(217, 119, 6, 0.2);
    color: #d97706;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.85rem;
    line-height: 1.4;
}

.tpl-window-notice i {
    font-size: 1.2rem;
    margin-top: 1px;
}


@keyframes pulse-green {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 118, 110, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(15, 118, 110, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(15, 118, 110, 0); }
}
@keyframes pulse-amber {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
}

.window-template-btn {
    background: #b91c1c;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.window-template-btn:hover { background: #991b1b; }

/* ==========================================================================
   TEMPLATE MANAGEMENT DASHBOARD
   ========================================================================== */
.tpl-dashboard {
    padding: 30px 40px;
    height: 100vh;
    overflow-y: auto;
    background: var(--bg-color);
}
.tpl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
}
.tpl-header h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 5px;
}
.tpl-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}
.tpl-filters-bar {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}
.tpl-filter-select {
    padding: 10px 15px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    color: var(--text-main);
    outline: none;
    font-size: 0.9rem;
}
.tpl-list-container {
    background: var(--surface-color);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    min-height: 400px;
}
.tpl-table {
    width: 100%;
    border-collapse: collapse;
}
.tpl-table th {
    background: var(--bg-color);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.tpl-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
    font-size: 0.95rem;
    vertical-align: middle;
}
.tpl-table tr:last-child td { border-bottom: none; }
.tpl-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.tpl-table tbody tr:hover {
    background-color: var(--bg-color);
}

.badge {
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.badge-approved { background: #dcfce7; color: #166534; }
.badge-pending { background: #fef9c3; color: #854d0e; }
.badge-rejected { background: #fee2e2; color: #991b1b; }
.badge-marketing { background: #e0e7ff; color: #3730a3; }
.badge-utility { background: #f3e8ff; color: #6b21a8; }
.badge-authentication { background: #e0f2fe; color: #075985; }

.tpl-state-msg {
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}
.tpl-state-msg i { font-size: 2.5rem; color: var(--border-color); }

/* ==========================================================================
   TEMPLATE WIZARD MODAL
   ========================================================================== */
.tpl-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.tpl-modal-card {
    background: var(--surface-color);
    width: 90vw;
    max-width: 900px;
    height: 90vh;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.tpl-modal-card.tpl-wizard {
    max-width: 1000px;
}
.tpl-modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tpl-modal-header h3 { font-size: 1.25rem; font-weight: 600; }
.tpl-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 5px;
}
.tpl-wizard-body {
    flex: 1;
    display: flex;
    overflow: hidden;
}
.tpl-wizard-form {
    flex: 3;
    padding: 30px;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
}
.tpl-wizard-preview {
    flex: 2;
    background: var(--bg-color);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Category Cards */
.category-cards {
    display: flex;
    gap: 15px;
}
.cat-card {
    flex: 1;
    cursor: pointer;
}
.cat-card input { display: none; }
.cat-card-content {
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.2s;
    height: 100%;
}
.cat-card-content i { font-size: 2rem; color: var(--text-muted); margin-bottom: 10px; }
.cat-card-content h5 { margin-bottom: 5px; font-size: 1rem; color: var(--text-main); }
.cat-card-content p { font-size: 0.8rem; color: var(--text-muted); }
.cat-card input:checked + .cat-card-content {
    border-color: var(--primary-color);
    background: var(--primary-light);
}
.cat-card input:checked + .cat-card-content i,
.cat-card input:checked + .cat-card-content h5 { color: var(--primary-color); }

/* Edit Steps */
.tpl-section-box {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.tpl-textarea-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}
.tool-btn {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 5px 10px;
    cursor: pointer;
    color: var(--text-main);
}
.tool-btn:hover { background: var(--bg-color); }
.spacer { flex: 1; }
.btn-small { padding: 6px 12px; font-size: 0.8rem; border-radius: 6px; }

/* Phone Mockup */
.phone-mockup {
    width: 280px;
    height: 580px;
    background: #111;
    border-radius: 40px;
    padding: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    position: relative;
    margin-top: 20px;
}
.phone-screen {
    background: #efeae2;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}
.phone-screen::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--whatsapp-doodle); opacity: 0.4;
}
.chat-mock {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 15px;
}
.chat-bubble-mock {
    background: white;
    border-radius: 12px;
    border-top-left-radius: 0;
    padding: 8px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-size: 0.85rem;
    color: #111;
    position: relative;
    z-index: 10;
    max-width: 100%;
    margin-bottom: 8px;
}
.chat-bubble-mock.out {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.preview-header-media {
    width: 100%;
    max-height: 180px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.preview-header-media img,
.preview-header-media video {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
    display: block;
}

.preview-header-text {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 0.95rem;
    word-wrap: break-word;
    flex-shrink: 0;
}

.preview-body-text {
    font-size: 0.85rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 4px 0;
    flex-shrink: 0;
}

.preview-footer-text {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 4px;
    flex-shrink: 0;
}
.msg-meta-mock {
    text-align: right;
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 6px;
    flex-shrink: 0;
}
.var-hl { background: rgba(15, 118, 110, 0.2); color: #0f766e; padding: 0 4px; border-radius: 4px; font-weight: bold; }

.tpl-modal-footer {
    padding: 20px 25px;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 15px;
    background: var(--surface-color);
}

/* ==========================================================================
   TEMPLATE SEND PICKER MODAL (In Chat)
   ========================================================================== */
.tpl-modal-subtitle { color: var(--text-muted); font-size: 0.85rem; margin-top: 4px;}
.tpl-modal-search-row {
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 15px;
    background: var(--bg-color);
}
.tpl-search-wrap {
    flex: 1; position: relative;
}
.tpl-search-wrap i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-muted);}
.tpl-search-wrap input { width: 100%; padding: 10px 15px 10px 40px; border-radius: 12px; border: 1px solid var(--border-color); outline: none;}

.tpl-picker-list { flex: 1; overflow-y: auto; padding: 15px; }
.tpl-picker-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.tpl-picker-item:hover { border-color: var(--primary-color); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.tpl-picker-header { display: flex; justify-content: space-between; margin-bottom: 8px;}
.tpl-name { font-weight: 600; color: var(--text-main); }
.tpl-preview { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tpl-picker-loading { padding: 40px; text-align: center; color: var(--text-muted); }

/* Variable Fill Panel */
.tpl-variable-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden;}
.tpl-var-header {
    padding: 15px 25px; border-bottom: 1px solid var(--border-color);
    display: flex; align-items: center; gap: 15px; background: var(--bg-color);
}
.tpl-var-back-btn { background: none; border: none; font-weight: 600; color: var(--primary-color); cursor: pointer; display: flex; align-items: center; gap: 5px;}
.tpl-var-title { font-weight: 600; }
.tpl-var-preview-wrap { padding: 15px 25px; background: #efeae2; border-bottom: 1px solid var(--border-color);}
.tpl-phone-preview-mini {
    background: white; border-radius: 12px; border-top-left-radius: 0; padding: 12px;
    font-size: 0.9rem; color: #111; max-width: 400px; line-height: 1.4; white-space: pre-wrap; margin: 0 auto;
}
.tpl-var-fields { padding: 25px; flex: 1; overflow-y: auto; }
.tpl-send-now-btn { margin: 0 25px 25px 25px; padding: 15px; font-size: 1rem; }
.tpl-no-vars { color: var(--text-muted); text-align: center; padding: 20px; }

/* Message Template Buttons Preview */
.preview-buttons-container {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}
.preview-btn-mock {
    background: white;
    color: #007aff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: default;
    border: 1px solid rgba(0,0,0,0.05);
    transition: background-color 0.2s;
}
.preview-btn-mock i {
    font-size: 0.95rem;
}
.preview-btn-mock:hover {
    background-color: #f8fafc;
}

/* ==========================================================================
   MOBILE & TABLET RESPONSIVENESS FOR TEMPLATES & WIZARDS
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Templates Page Grid & Filters */
    .tpl-dashboard {
        padding: 20px 16px;
        height: calc(100vh - 56px); /* Account for mobile sticky header */
    }
    .tpl-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
        margin-bottom: 20px;
    }
    .tpl-header-left {
        width: 100%;
    }
    .tpl-header-right {
        width: 100%;
    }
    .tpl-header-right button {
        width: 100%;
        justify-content: center;
    }
    .tpl-filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .tpl-filters-bar .search-bar {
        max-width: 100% !important;
    }
    .tpl-filters-bar select {
        width: 100%;
    }
    .tpl-list-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tpl-table {
        min-width: 750px;
    }

    /* 2. Wizard & Preview Modals */
    .tpl-modal-overlay {
        padding: 0;
    }
    .tpl-modal-card {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .tpl-modal-card.tpl-wizard {
        max-width: 100% !important;
    }
    .tpl-modal-header {
        padding: 15px 20px;
    }
    .tpl-wizard-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .tpl-wizard-form {
        flex: none;
        padding: 20px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-y: visible;
    }
    .tpl-wizard-preview {
        flex: none;
        padding: 30px 20px;
        background: var(--bg-color);
    }
    .category-cards {
        flex-direction: column;
        gap: 10px;
    }
    .cat-card-content {
        padding: 15px;
    }
    
    /* Wizard Footer */
    .tpl-modal-footer {
        padding: 15px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .tpl-modal-footer button {
        flex: 1;
        justify-content: center;
        padding: 12px;
        font-size: 0.95rem;
    }
    .tpl-modal-footer div {
        display: none; /* Hide the flex spacer on mobile to let buttons occupy space */
    }

    /* 3. In-Chat Template Picker Modal */
    .tpl-modal-search-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 15px;
    }
    .tpl-var-header {
        padding: 12px 15px;
    }
    .tpl-var-preview-wrap {
        padding: 15px;
    }
    .tpl-var-fields {
        padding: 15px;
    }
    .tpl-send-now-btn {
        margin: 0 15px 15px 15px;
    }
}

@media (max-width: 480px) {
    /* Scale down phone mockup on smaller devices to prevent clipping */
    .phone-mockup {
        width: 250px;
        height: 520px;
        padding: 10px;
        border-radius: 30px;
        margin-top: 10px;
    }
    .phone-screen {
        border-radius: 22px;
    }
}