/* 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;
    --illustration-filter: invert(0.9) hue-rotate(180deg);
}

* {
    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 by default) */
.nav-label, .nav-brand-text {
    display: none;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.2s ease;
}
.mobile-header {
    display: none;
}
.mobile-menu-backdrop {
    display: none;
}

/* Sidebar Navigation */
.global-nav {
    width: 64px;
    background: var(--surface-color);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
    gap: 12px;
    z-index: 100;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    height: 100%;
    box-sizing: border-box;
}

/* Slim scrollbar for sidebar */
.global-nav::-webkit-scrollbar {
    width: 4px;
}
.global-nav::-webkit-scrollbar-track {
    background: transparent;
}
.global-nav::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}
.global-nav:hover::-webkit-scrollbar-thumb {
    background: var(--border-color);
}

/* Expanded state */
.global-nav.expanded,
html[data-sidebar='expanded'] .global-nav {
    width: 220px;
    align-items: flex-start;
    padding: 16px 12px;
    gap: 12px;
}
.global-nav.expanded .nav-label,
.global-nav.expanded .nav-brand-text,
html[data-sidebar='expanded'] .global-nav .nav-label,
html[data-sidebar='expanded'] .global-nav .nav-brand-text {
    display: inline;
    opacity: 1;
}
.global-nav.expanded .nav-links,
.global-nav.expanded .nav-footer,
html[data-sidebar='expanded'] .global-nav .nav-links,
html[data-sidebar='expanded'] .global-nav .nav-footer {
    align-items: flex-start;
    width: 100%;
    gap: 8px;
}
.global-nav.expanded .nav-item,
html[data-sidebar='expanded'] .global-nav .nav-item {
    width: 100%;
    height: 40px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 12px;
    font-size: 0.9rem;
    border-radius: 10px;
}
.global-nav.expanded .nav-brand,
html[data-sidebar='expanded'] .global-nav .nav-brand {
    padding-left: 10px;
}

/* Sidebar toggle button */
.nav-toggle-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 18px;
    width: 40px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
    align-self: center;
}
.nav-toggle-btn:hover {
    background: var(--bg-color);
    color: var(--primary-color);
}
.global-nav.expanded .nav-toggle-btn,
html[data-sidebar='expanded'] .global-nav .nav-toggle-btn {
    align-self: flex-end;
    margin-right: 4px;
}

/* Hide sidebar toggle on mobile — mobile nav is triggered by the mobile-menu-btn in mobile-header */
@media (max-width: 768px) {
    .nav-toggle-btn { display: none; }
}

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

.nav-item i {
    font-size: 20px;
    flex-shrink: 0;
}

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

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

/* ── Multi-Account Switcher (Collapsed & Expanded) ───────────── */
.nav-account-switcher {
    width: 100%;
    padding: 2px 10px 6px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Channel Section Scoped Switchers (Collapsed by default, Expanded when sidebar open) ── */
.channel-scope-switcher {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 3px 0 5px;
    box-sizing: border-box;
    position: relative;
}

.channel-scope-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    position: relative;
}

.channel-scope-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

.channel-scope-btn .scope-btn-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.channel-scope-btn #activeWaIcon,
.channel-scope-btn #activeIgIcon,
.channel-scope-btn .scope-icon-wrap {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.channel-scope-btn #activeWaIcon img,
.channel-scope-btn #activeIgIcon img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
}

.channel-scope-btn i.scope-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin: 0;
}

.channel-scope-btn #activeWaName,
.channel-scope-btn #activeIgName,
.channel-scope-btn .scope-name-text,
.channel-scope-btn i.ph-caret-down {
    display: none !important;
}

/* Expanded state */
.global-nav.expanded .channel-scope-switcher,
html[data-sidebar='expanded'] .global-nav .channel-scope-switcher {
    display: block;
    width: 100%;
    padding: 2px 10px 6px;
}

.global-nav.expanded .channel-scope-btn,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn {
    width: 100%;
    height: 36px;
    border-radius: 9px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.global-nav.expanded .channel-scope-btn .scope-btn-inner,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn .scope-btn-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    min-width: 0;
    justify-content: flex-start;
}

.global-nav.expanded .channel-scope-btn #activeWaIcon img,
.global-nav.expanded .channel-scope-btn #activeIgIcon img,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn #activeWaIcon img,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn #activeIgIcon img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.global-nav.expanded .channel-scope-btn i.scope-icon,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn i.scope-icon {
    font-size: 15px;
    margin-right: 0;
}

.global-nav.expanded .channel-scope-btn #activeWaName,
.global-nav.expanded .channel-scope-btn #activeIgName,
.global-nav.expanded .channel-scope-btn .scope-name-text,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn #activeWaName,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn #activeIgName,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn .scope-name-text {
    display: inline-block !important;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.76rem;
    font-weight: 600;
}

.global-nav.expanded .channel-scope-btn i.ph-caret-down,
html[data-sidebar='expanded'] .global-nav .channel-scope-btn i.ph-caret-down {
    display: inline-block !important;
    font-size: 11px;
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: 4px;
}

.account-switcher-btn {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: var(--text-main);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    outline: none;
}

.account-switcher-btn:hover {
    background: var(--surface-hover);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.15);
    transform: translateY(-1px);
}

.account-switcher-left {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.active-account-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: rgba(15, 118, 110, 0.1);
    color: var(--primary-color);
    transition: all 0.2s ease;
}

.active-account-avatar.wa {
    background: rgba(37, 211, 102, 0.12);
    color: #25D366;
}

.active-account-avatar.ig {
    background: rgba(225, 48, 108, 0.12);
    color: #E1306C;
}

/* In collapsed mode, hide extra text & chevrons */
.account-switcher-info,
.account-switcher-chevron {
    display: none;
}

/* In expanded mode, full-width sleek pill */
.global-nav.expanded .nav-account-switcher,
html[data-sidebar='expanded'] .global-nav .nav-account-switcher {
    padding: 4px 6px 10px;
}

.global-nav.expanded .account-switcher-btn,
html[data-sidebar='expanded'] .global-nav .account-switcher-btn {
    width: 100%;
    height: 46px;
    padding: 6px 10px;
    justify-content: space-between;
    border-radius: 11px;
}

.global-nav.expanded .account-switcher-left,
html[data-sidebar='expanded'] .global-nav .account-switcher-left {
    flex: 1;
    overflow: hidden;
}

.global-nav.expanded .account-switcher-info,
html[data-sidebar='expanded'] .global-nav .account-switcher-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
    gap: 1px;
}

.active-account-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.2;
}

.active-account-badge {
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.2px;
    line-height: 1;
}

.global-nav.expanded .account-switcher-chevron,
html[data-sidebar='expanded'] .global-nav .account-switcher-chevron {
    display: block;
    font-size: 13px;
    color: var(--text-muted);
    opacity: 0.7;
    flex-shrink: 0;
    margin-left: 6px;
}

/* ── Floating Flyout Popover ─────────────────────────────────── */
.account-dropdown-flyout {
    display: none;
    position: fixed;
    z-index: 99999;
    width: 290px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    animation: flyoutFadeIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes flyoutFadeIn {
    from { opacity: 0; transform: translateY(-4px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.account-dropdown-flyout .dropdown-header {
    padding: 10px 14px 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
}

.manage-channels-link {
    color: var(--text-muted);
    font-size: 14px;
    text-decoration: none;
    transition: color 0.15s;
    display: flex;
    align-items: center;
}
.manage-channels-link:hover {
    color: var(--primary-color);
}

.account-dropdown-flyout .dropdown-body {
    padding: 6px;
    max-height: 280px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flyout-section-title {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 6px 8px 2px;
    opacity: 0.7;
}

.account-flyout-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    position: relative;
}

.account-flyout-item:hover {
    background: var(--surface-hover);
}

.account-flyout-item.selected {
    background: var(--primary-light, rgba(15, 118, 110, 0.08));
}

.account-flyout-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.account-flyout-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

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

.account-flyout-subtitle {
    font-size: 0.68rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
}

.account-dropdown-flyout .dropdown-footer {
    padding: 6px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-card);
}

.add-channel-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.add-channel-action:hover {
    background: var(--surface-hover);
}

.nav-brand {
    margin-bottom: 10px;
    flex-shrink: 0;
}
.nav-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
    margin-top: clamp(10px, 5vh, 40px);
}
.nav-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
    margin-top: auto;
}

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

/* Standardized Page Layout */
.std-page-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-color);
}

/* Legacy pages that use the old padding+scroll approach still work */
.std-page-layout.scrollable {
    overflow-y: auto;
    padding: 24px 32px;
    display: block;
}

/* ── Page Hero Header (sticky at top) ─────────────────────── */
.std-page-hero {
    flex-shrink: 0;
    background: var(--bg-color);
    border-bottom: 1px solid var(--border-color);
    width: 100%;
}
.std-page-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1420px;
    margin: 0 auto;
    width: 100%;
    padding: 14px 32px;
    box-sizing: border-box;
}
.std-page-hero-left { display: flex; flex-direction: column; gap: 2px; }
.std-page-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--primary-color);
    display: flex; align-items: center; gap: 6px;
}
.std-page-hero h1 {
    font-size: 22px; font-weight: 800; color: var(--text-main);
    margin: 0; letter-spacing: -0.3px;
}
.std-page-hero p {
    font-size: 13px; color: var(--text-muted); margin: 2px 0 0;
}

/* ── Page Scrollable Body ─────────────────────────────────── */
.std-page-body {
    flex: 1;
    overflow-y: auto;
    width: 100%;
}
.std-page-body-inner {
    max-width: 1420px;
    margin: 0 auto;
    padding: 28px 32px 64px;
    width: 100%;
    box-sizing: border-box;
}


/* ── Content max-width wrapper (uniform across all pages) ─── */
.std-page-content-wrapper,
.std-page-inner {
    max-width: 1420px;
    margin: 0 auto;
    width: 100%;
}

/* Legacy std-page-header for pages not yet migrated */
.std-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto 32px auto;
    max-width: 1420px;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.std-page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.std-page-header p {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

@media (max-width: 768px) {
    .std-page-layout.scrollable {
        padding: 20px 16px 100px 16px;
    }
    .std-page-hero-inner { padding: 14px 16px; }
    .std-page-body-inner { padding: 20px 16px 80px; }
    .std-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* 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;
        bottom: 0;
        left: -280px; /* Hidden offscreen by default */
        width: 280px;
        height: 100dvh;
        z-index: 1000;
        background: var(--surface-color);
        border-right: 1px solid var(--border-color);
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
        gap: 16px;
        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;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .global-nav.active {
        left: 0; /* Slide in! */
    }
    .nav-brand {
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 5px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }
    .nav-brand-text {
        display: inline-block;
        opacity: 1;
        font-size: 1.15rem;
        font-weight: 700;
        color: var(--text-main);
        margin-left: 10px;
    }
    .nav-links {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: clamp(8px, 4vh, 30px);
    }
    .nav-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: auto;
        padding-top: 10px;
        border-top: 1px solid var(--border-color);
    }
    .nav-item {
        width: 100%;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 0 12px;
        border-radius: 8px;
        color: var(--text-muted);
        font-size: 0.9rem;
        text-decoration: none;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    .nav-item i {
        font-size: 18px;
    }
    .nav-item:hover, .nav-item.active {
        background: var(--primary-light);
        color: var(--primary-color);
        transform: none;
        box-shadow: none;
    }
    .nav-label {
        display: inline-block;
        opacity: 1;
        font-size: 0.9rem;
        font-weight: 600;
        margin-left: 10px;
        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: 0;
    margin-bottom: 20px;
    font-size: 0.85rem;
    text-align: center;
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--text-main);
}

.alert-error {
    color: #ef4444;
}

.alert-info {
    color: #3b82f6;
}

/* 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: var(--surface-color);
    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-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    border: 1px solid transparent;
}
.window-pill-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.window-pill-badge.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
}
.window-pill-badge.expiring {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.2);
}
.window-pill-badge.expired {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}

.window-pill-badge .window-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    display: inline-block;
}
.window-pill-badge.active .window-dot {
    box-shadow: 0 0 8px #10b981, 0 0 0 3px rgba(16, 185, 129, 0.3);
    animation: window-glow-green 2.5s infinite;
}
.window-pill-badge.expiring .window-dot {
    box-shadow: 0 0 8px #d97706, 0 0 0 3px rgba(245, 158, 11, 0.3);
    animation: window-glow-amber 2.5s infinite;
}
.window-pill-badge.expired .window-dot {
    background-color: #ef4444;
    opacity: 0.8;
}

@keyframes window-glow-green {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes window-glow-amber {
    0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.window-popover {
    position: absolute;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.05);
    padding: 14px 16px;
    z-index: 1000;
    max-width: 280px;
    font-size: 0.82rem;
    color: var(--text-main);
    line-height: 1.5;
    animation: window-popover-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes window-popover-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.window-popover-title {
    font-weight: 600;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.window-popover-desc {
    color: var(--text-muted);
}
.window-popover-arrow {
    position: absolute;
    top: -6px;
    left: 20px;
    width: 10px;
    height: 10px;
    background: var(--surface-color);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
    transform: rotate(45deg);
}

.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: var(--surface-color);
    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: #8696a0;
    margin-top: 2px;
    padding-top: 4px;
    flex-shrink: 0;
    font-style: italic;
    line-height: 1.4;
    word-wrap: break-word;
}
.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;
    min-height: 0;
}
.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);
    flex-shrink: 0;
}
.tpl-phone-preview-mini {
    background: var(--surface-color);
    border-radius: 12px;
    border-top-left-radius: 0;
    padding: 12px;
    font-size: 0.88rem;
    color: #111;
    max-width: 440px;
    max-height: 200px;
    overflow-y: auto;
    line-height: 1.5;
    margin: 0 auto;
    white-space: normal;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
/* Variable fields panel: flex column, fields scroll, send btn always visible */
.tpl-var-fields {
    padding: 20px 25px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}
.tpl-send-now-btn {
    margin: 0;
    padding: 16px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0 0 20px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.01em;
}
.tpl-no-vars { color: var(--text-muted); text-align: center; padding: 20px; }

/* Template variable section headers (Message Variables / Button Variables) */
.tpl-var-section { margin: 18px 0 10px 0; }
.tpl-var-section-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.tpl-var-section-title i { font-size: 1rem; color: var(--primary-color); }

/* Live URL preview in dynamic button field */
.tpl-url-preview { font-size: 0.76rem; word-break: break-all; }


/* Message Template Buttons Preview */
.preview-buttons-container {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
}
.preview-btn-mock {
    background: var(--surface-color);
    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: var(--bg-color);
}

/* Remove extra gap between message bubble and buttons in template previews */
.tpl-wizard-preview .chat-bubble-mock,
.tpl-modal-card .chat-bubble-mock,
.phone-mockup .chat-bubble-mock {
    margin-bottom: 0;
}
.tpl-wizard-preview .preview-buttons-container,
.tpl-modal-card .preview-buttons-container,
.phone-mockup .preview-buttons-container {
    margin-top: 0;
}

/* When buttons are present in previews: remove gaps, square the bubble bottom, and only round the last button */
.tpl-wizard-preview .preview-buttons-container,
.tpl-modal-card .preview-buttons-container,
.phone-mockup .preview-buttons-container {
    gap: 0; /* no space between stacked buttons */
}

.tpl-wizard-preview .chat-bubble-mock.out,
.tpl-modal-card .chat-bubble-mock.out,
.phone-mockup .chat-bubble-mock.out {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.tpl-wizard-preview .preview-btn-mock,
.tpl-modal-card .preview-btn-mock,
.phone-mockup .preview-btn-mock {
    border-radius: 0; /* remove rounding between buttons */
    margin: 0; /* ensure no extra spacing */
}

.tpl-wizard-preview .preview-buttons-container .preview-btn-mock:last-child,
.tpl-modal-card .preview-buttons-container .preview-btn-mock:last-child,
.phone-mockup .preview-buttons-container .preview-btn-mock:last-child {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* ==========================================================================
   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;
    }
}


/* ==========================================================================
   BUTTON TYPE DROPDOWN (Add Button custom dropdown)
   ========================================================================== */
.tpl-add-btn-wrapper {
    position: relative;
    display: inline-block;
}

.tpl-btn-type-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 200;
    overflow: hidden;
    padding: 6px;
    animation: dropdownFadeIn 0.15s ease;
}

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

.tpl-btn-type-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 6px 10px 4px;
}

.tpl-btn-type-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.88rem;
    color: var(--text-main);
    transition: background 0.15s;
}

.tpl-btn-type-item:hover {
    background: var(--bg-color);
    color: var(--primary-color);
}

.tpl-btn-type-item i {
    font-size: 1rem;
    color: var(--text-muted);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.tpl-btn-type-item:hover i {
    color: var(--primary-color);
}

.tpl-btn-type-separator {
    height: 1px;
    background: var(--border-color);
    margin: 4px 0;
}

/* ==========================================================================
   BUTTON CONFIGURATION CARDS (.tpl-btn-item)
   ========================================================================== */
.tpl-btn-item {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px;
    margin-top: 10px;
    transition: border-color 0.2s;
}

.tpl-btn-item:hover {
    border-color: var(--primary-color);
}

.tpl-btn-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.tpl-btn-type-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}

.tpl-btn-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tpl-btn-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.tpl-btn-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tpl-btn-field-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 0 !important;
}

.tpl-btn-field input,
.tpl-btn-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-color);
    font-size: 0.88rem;
    color: var(--text-main);
    outline: none;
    transition: border-color 0.2s;
}

.tpl-btn-field input:focus,
.tpl-btn-field select:focus {
    border-color: var(--primary-color);
    background: var(--surface-color);
}

.tpl-btn-char-count {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: auto;
}

.tpl-btn-field-row {
    display: flex;
    flex-direction: column;
}

/* Compact layout for small laptop screens */
@media (max-width: 1366px) {
    /* Chat list items */
    .chat-name {
        font-size: 0.88rem;
    }
    .chat-preview {
        font-size: 0.8rem;
    }
    .chat-time {
        font-size: 0.65rem;
    }
    
    /* Search Bar in Chat Sidebar */
    .search-bar input {
        font-size: 0.85rem;
        padding: 8px 12px 8px 36px;
    }
    .search-bar i {
        left: 12px;
        font-size: 1rem;
    }

    /* Active Chat Header */
    .chat-header {
        min-height: 60px;
        padding: 8px 15px;
    }
    .chat-header-title {
        font-size: 0.95rem;
    }
    .chat-header-subtitle {
        font-size: 0.7rem;
    }
    .chat-avatar {
        width: 38px;
        height: 38px;
        margin-right: 10px;
        font-size: 0.9rem;
    }

    /* Chat Messages list */
    .chat-messages {
        padding: 15px 24px;
        gap: 6px;
    }
    .message {
        font-size: 0.875rem;
        padding: 6px 10px;
        max-width: 420px;
    }
    .msg-time {
        font-size: 0.65rem;
    }

    /* Chat Input Area */
    .chat-input-area {
        padding: 10px 15px;
        gap: 10px;
    }
    .chat-input-area input {
        font-size: 0.875rem;
        padding: 10px 14px;
    }
    .chat-input-area .action-btn {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }
}

/* ── Distinct Channel Banners & Headers ────────────────────────── */
.sidebar-channel-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    margin-bottom: 8px;
    border: 1px solid var(--border-color);
    background: var(--surface-color);
    transition: all 0.2s ease;
}
.sidebar-channel-banner.instagram-banner {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.08) 0%, rgba(131, 58, 180, 0.08) 100%);
    border-color: rgba(225, 48, 108, 0.25);
}
.sidebar-channel-banner.whatsapp-banner {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(18, 140, 126, 0.08) 100%);
    border-color: rgba(37, 211, 102, 0.25);
}
.channel-brand-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
    flex-shrink: 0;
}
.instagram-banner .channel-brand-icon {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 3px 8px rgba(225, 48, 108, 0.3);
}
.whatsapp-banner .channel-brand-icon {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    box-shadow: 0 3px 8px rgba(37, 211, 102, 0.3);
}
.channel-brand-info {
    flex: 1;
    min-width: 0;
}
.channel-brand-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.2;
}
.channel-brand-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}
.channel-brand-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.instagram-banner .channel-brand-badge {
    background: rgba(225, 48, 108, 0.15);
    color: #E1306C;
}
.whatsapp-banner .channel-brand-badge {
    background: rgba(37, 211, 102, 0.15);
    color: #128C7E;
}

/* Chat Header Distinctive Elements */
.chat-avatar-ring-ig {
    padding: 2px;
    border-radius: 50%;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    margin-right: 12px;
    flex-shrink: 0;
    display: inline-flex;
}
.chat-avatar-ring-ig .chat-avatar {
    margin-right: 0 !important;
    border: 2px solid var(--surface-color);
}
.chat-avatar-ring-wa {
    padding: 2px;
    border-radius: 50%;
    background: #25D366;
    margin-right: 12px;
    flex-shrink: 0;
    display: inline-flex;
}
.chat-avatar-ring-wa .chat-avatar {
    margin-right: 0 !important;
    border: 2px solid var(--surface-color);
}

.header-channel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 8px;
}
.header-channel-tag.ig-tag {
    background: rgba(225, 48, 108, 0.12);
    color: #E1306C;
    border: 1px solid rgba(225, 48, 108, 0.2);
}
.header-channel-tag.wa-tag {
    background: rgba(37, 211, 102, 0.12);
    color: #128C7E;
    border: 1px solid rgba(37, 211, 102, 0.2);
}

.ig-handle-highlight {
    color: #E1306C;
    font-weight: 700;
}
.btn-ig-profile {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 10px;
    border: 1px solid rgba(225, 48, 108, 0.3);
    background: rgba(225, 48, 108, 0.08);
    color: #E1306C;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.btn-ig-profile:hover {
    background: #E1306C;
    color: #ffffff;
}

/* Instagram Contextual Thread Banner */
.ig-thread-context-banner {
    background: linear-gradient(135deg, rgba(225, 48, 108, 0.06) 0%, rgba(131, 58, 180, 0.06) 100%);
    border-bottom: 1px solid rgba(225, 48, 108, 0.15);
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}
.ig-thread-context-banner strong {
    color: var(--text-main);
}