<?php
session_start();
require_once "../php/db_connect.php";

if (!isset($_SESSION["user_id"]) || ($_SESSION["role"] ?? '') !== 'customer') {
    header("Location: index.php");
    exit();
}

$page = $_GET['page'] ?? 'dashboard';

if ($page === 'save-final-order') {
    include 'save-final-order.php';
    exit;
}

if ($page === 'xendit_payment') {
    include 'xendit_payment.php';
    exit;
}

function activePage($currentPage, $pageName) {
    return $currentPage === $pageName ? 'active' : '';
}

$customerName = trim(($_SESSION["first_name"] ?? '') . " " . ($_SESSION["last_name"] ?? ''));
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <!-- IMPORTANT FOR RESPONSIVE -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Customer</title>

    <!-- BOOTSTRAP -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- YOUR CSS FILES -->
    <link rel="stylesheet" href="../css/customer.css?v=4">
    <link rel="stylesheet" href="../css/view-shop.css?v=4">
    <link rel="stylesheet" href="../css/shop_view-details.css?v=4">
    <link rel="stylesheet" href="../css/customer-create-order.css?v=4">

    <!-- FONT AWESOME -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

    <script src="../javascript/customer.js" defer></script>
</head>

<body>

<!-- MOBILE / TABLET TOPBAR -->
<!-- MOBILE TOPBAR -->
<div class="mobile-topbar d-xl-none bg-white shadow-sm">
    <div class="mobile-topbar-inner">
        <button 
            class="mobile-menu-btn" 
            type="button" 
            data-bs-toggle="offcanvas" 
            data-bs-target="#mobileSidebar"
        >
            <i class="fa-solid fa-bars"></i>
        </button>

        <div class="mobile-user-name">
            <?php echo htmlspecialchars($customerName); ?>
        </div>

        <div class="mobile-topbar-actions">
            <button type="button" class="mobile-action-icon" onclick="openChatPopup()">
                <i class="fa-regular fa-envelope"></i>
                <span class="mobile-badge">3</span>
            </button>

            <a href="customer.php?page=notifications" class="mobile-action-icon">
                <i class="fa-regular fa-bell"></i>
                <span class="mobile-badge">25</span>
            </a>
        </div>
    </div>
</div>

<!-- MOBILE / TABLET SIDEBAR -->
<div class="offcanvas offcanvas-start d-lg-none" tabindex="-1" id="mobileSidebar">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title fw-bold">Menu</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body p-0">
        <div class="customer-sidebar-inner mobile-sidebar h-100 rounded-0">
            <div>
                <div class="sidebar-logo">
                    <img src="images/logo1.png" alt="Logo">
                </div>

                <ul class="sidebar-menu">
                    <li class="sidebar-item <?php echo activePage($page, 'dashboard'); ?>">
                        <a href="customer.php">
                            <span class="icon"><i class="fa-solid fa-house"></i></span>
                            <span class="menu-text">Dashboard</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'view-shops'); ?>">
                        <a href="customer.php?page=view-shops">
                            <span class="icon"><i class="fa-solid fa-users"></i></span>
                            <span class="menu-text">View Shops</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'track-order'); ?>">
                        <a href="customer.php?page=track-order">
                            <span class="icon"><i class="fa-solid fa-box"></i></span>
                            <span class="menu-text">Track Order</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'customer-payments'); ?>">
                        <a href="customer.php?page=customer-payments">
                            <span class="icon"><i class="fa-solid fa-credit-card"></i></span>
                            <span class="menu-text">Payments</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'feedback-monitoring'); ?>">
                        <a href="customer.php?page=feedback-monitoring">
                            <span class="icon"><i class="fa-solid fa-star"></i></span>
                            <span class="menu-text">Feedback Monitoring</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="sidebar-bottom">
                <a href="logout.php" class="logout-btn" onclick="return confirm('Are you sure you want to logout?')">
                    <span class="icon"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>
                    <span class="menu-text">Logout</span>
                </a>
            </div>
        </div>
    </div>
</div>

<!-- MAIN LAYOUT -->
<div class="customer-layout">

    <!-- DESKTOP SIDEBAR -->
    <aside class="customer-sidebar d-none d-lg-flex">
        <div class="customer-sidebar-inner">
            <div>
                <div class="sidebar-logo">
                    <img src="images/logo1.png" alt="Logo">
                </div>

                <ul class="sidebar-menu">
                    <li class="sidebar-item <?php echo activePage($page, 'dashboard'); ?>">
                        <a href="customer.php">
                            <span class="icon"><i class="fa-solid fa-house"></i></span>
                            <span class="menu-text">Dashboard</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'view-shops'); ?>">
                        <a href="customer.php?page=view-shops">
                            <span class="icon"><i class="fa-solid fa-users"></i></span>
                            <span class="menu-text">View Shops</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'track-order'); ?>">
                        <a href="customer.php?page=track-order">
                            <span class="icon"><i class="fa-solid fa-box"></i></span>
                            <span class="menu-text">Track Order</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'customer-payments'); ?>">
                        <a href="customer.php?page=customer-payments">
                            <span class="icon"><i class="fa-solid fa-credit-card"></i></span>
                            <span class="menu-text">Payments</span>
                        </a>
                    </li>

                    <li class="sidebar-item <?php echo activePage($page, 'feedback-monitoring'); ?>">
                        <a href="customer.php?page=feedback-monitoring">
                            <span class="icon"><i class="fa-solid fa-star"></i></span>
                            <span class="menu-text">Feedback Monitoring</span>
                        </a>
                    </li>
                </ul>
            </div>

            <div class="sidebar-bottom">
                <a href="logout.php" class="logout-btn" onclick="return confirm('Are you sure you want to logout?')">
                    <span class="icon"><i class="fa-solid fa-arrow-right-from-bracket"></i></span>
                    <span class="menu-text">Logout</span>
                </a>
            </div>
        </div>
    </aside>

    <!-- MAIN CONTENT -->
    <main class="customer-main <?php echo ($page === 'dashboard') ? 'has-right-panel' : ''; ?>">
        <div class="customer-content-wrap">
            <?php
            if ($page === 'view-shops') {
                include 'view-shops.php';
            } elseif ($page === 'shop_details') {
                include 'shop_details.php';
            } elseif ($page === 'shop_view-details') {
                include 'shop_view-details.php';
            } elseif ($page === 'customer-create-order') {
                include 'customer-create-order.php';
            } elseif ($page === 'customer-order-now') {
                include 'customer-order-now.php';
            } elseif ($page === 'save-final-order') {
                include 'save-final-order.php';
            } elseif ($page === 'customer-order-summary') {
                include 'customer-order-summary.php';
            } elseif ($page === 'xendit_payment') {
                include 'xendit_payment.php';
            } elseif ($page === 'payment_success') {
                include 'payment_success.php';
            } elseif ($page === 'payment_failed') {
                include 'payment_failed.php';
            } elseif ($page === 'track-order') {
                include __DIR__ . "/track-order.php";
            } elseif ($page === 'feedback-monitoring') {
                include __DIR__ . "/customer-feedback-monitoring.php";
            } elseif ($page === 'messages') {
                include __DIR__ . "/messages.php";
            } elseif ($page === 'customer-payments') {
                include 'customer-payments.php';
            } else {
                include 'customer_dashboard.php';
            }
            ?>
        </div>
    </main>

    <!-- RIGHT PANEL ONLY ON VERY LARGE DASHBOARD SCREEN -->
    <?php if ($page === 'dashboard'): ?>
        <aside class="customer-right-panel">
            <div class="right-panel d-flex flex-column gap-3">

                <div class="customer-top-actions">
                    <button type="button" class="top-message-btn" onclick="openChatPopup()">
                        <i class="fa-regular fa-envelope"></i>
                    </button>

                    <a href="customer.php?page=notifications" class="customer-top-icon">
                        <i class="fa-regular fa-bell"></i>
                        <span>25</span>
                    </a>

                    <a href="customer.php?page=profile" class="customer-profile-mini">
                        <span><?php echo htmlspecialchars($customerName); ?></span>

                        <div class="customer-profile-circle">
                            <i class="fa-solid fa-user"></i>
                        </div>
                    </a>
                </div>

                <div class="calendar-container">
                    <div class="calendar-header">
                        <h3>Calendar</h3>
                        <span class="today-text">Today</span>
                    </div>

                    <div class="calendar-month">
                        <span id="calendarYear"></span>
                        <span id="calendarMonth"></span>
                    </div>

                    <div class="calendar-weekdays">
                        <span>SUN</span>
                        <span>MON</span>
                        <span>TUE</span>
                        <span>WED</span>
                        <span>THU</span>
                        <span>FRI</span>
                        <span>SAT</span>
                    </div>

                    <div class="calendar-days" id="calendarDays"></div>
                </div>

                <div class="mini-stat-card">
                    <div class="stat-icon">📈</div>
                    <h3>Current Orders</h3>
                    <p><?php echo isset($totalOrders) ? (int)$totalOrders : 0; ?> Orders</p>
                </div>

                <div class="mini-stat-card">
                    <div class="stat-icon">📈</div>
                    <h3>Completed Orders</h3>
                    <p><?php echo isset($completedCount) ? (int)$completedCount : 0; ?> Order</p>
                </div>
            </div>
        </aside>
    <?php endif; ?>

</div>

<!-- CHAT POPUP -->
<div class="chat-popup" id="chatPopup">
    <div class="chat-popup-header">
        <strong>Messages</strong>
        <button type="button" onclick="closeChatPopup()">
            <i class="fa-solid fa-xmark"></i>
        </button>
    </div>

    <iframe 
        src="messages.php?popup=1" 
        class="chat-popup-frame">
    </iframe>
</div>

<style>
/* =========================
   GLOBAL RESET
========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: #f4f6f8;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    overflow: hidden;
}

/* Prevent vertical broken text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
td,
th,
button,
label,
div {
    word-break: normal;
    overflow-wrap: break-word;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
}

/* =========================
   MAIN LAYOUT
========================= */
.customer-layout {
    width: 100%;
    min-height: 100vh;
    height: 100vh;
    display: flex;
    gap: 16px;
    padding: 16px;
    overflow: hidden;
}

/* =========================
   SIDEBAR
========================= */
.customer-sidebar {
    width: clamp(240px, 19vw, 300px);
    flex: 0 0 clamp(240px, 19vw, 300px);
    height: calc(100vh - 32px);
}

.customer-sidebar-inner {
    width: 100%;
    height: 100%;
    background: #2f3a50;
    border-radius: 18px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.sidebar-logo {
    text-align: center;
    margin-bottom: 36px;
}

.sidebar-logo img {
    width: 82px;
    max-width: 100%;
}

/* =========================
   SIDEBAR MENU
========================= */
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-item {
    list-style: none;
    margin-bottom: 10px;
}

.sidebar-item a,
.logout-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: 0.2s ease;
    white-space: nowrap;
}

.sidebar-item a:hover,
.logout-btn:hover {
    background: rgba(255,255,255,0.12);
}

.sidebar-item.active a {
    background: #ffffff;
    color: #111827;
}

.sidebar-item.active a i,
.sidebar-item.active a .menu-text {
    color: #111827;
}

.sidebar-item i,
.logout-btn i {
    color: #ffffff;
    width: 20px;
    text-align: center;
}

/* =========================
   MAIN CONTENT
========================= */
.customer-main {
    flex: 1 1 auto;
    height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    min-width: 0;
    max-width: 100%;
}

.customer-main.has-right-panel {
    max-width: none;
}

.customer-content-wrap {
    width: 100%;
    min-height: 100%;
    padding-bottom: 40px;
}

/* Make inner Bootstrap containers flexible */
.customer-content-wrap .container,
.customer-content-wrap .container-fluid {
    max-width: 100%;
}

/* =========================
   RIGHT PANEL
========================= */
.customer-right-panel {
    width: clamp(280px, 21vw, 330px);
    flex: 0 0 clamp(280px, 21vw, 330px);
    height: calc(100vh - 32px);
    overflow-y: auto;
}

.right-panel {
    width: 100%;
}

/* =========================
   TOP ACTIONS
========================= */
.customer-top-actions {
    min-height: 70px;
    background: #ffffff;
    border-radius: 18px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
    position: relative;
    z-index: 50;
}

.customer-top-actions a {
    text-decoration: none;
}

.customer-top-icon {
    width: 38px;
    height: 38px;
    background: #f8fafc;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #111827;
    position: relative;
    font-size: 16px;
    pointer-events: auto;
    cursor: pointer;
}

.customer-top-icon:hover {
    background: #eef2f7;
    color: #111827;
}

.customer-top-icon span {
    position: absolute;
    top: -5px;
    right: -3px;
    width: 18px;
    height: 18px;
    background: #0ea5e9;
    color: #ffffff;
    font-size: 10px;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

/* =========================
   PROFILE
========================= */
.customer-profile-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #111827;
    font-weight: 700;
    min-width: 0;
}

.customer-profile-mini span {
    color: #111827;
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-profile-circle {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background: #11a6b5;
    color: #ffffff;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.customer-profile-circle i {
    color: #ffffff;
}

/* =========================
   CALENDAR / STAT CARDS
========================= */
.calendar-container,
.mini-stat-card {
    width: 100%;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

.calendar-container {
    padding: 22px;
}

.calendar-header,
.calendar-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.calendar-header h3 {
    font-size: 20px;
    margin: 0;
}

.today-text {
    font-size: 13px;
    font-weight: 600;
}

.calendar-month {
    margin-top: 18px;
    font-weight: 700;
}

.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    text-align: center;
}

.calendar-weekdays {
    margin-top: 18px;
    font-size: 11px;
    color: #475569;
}

.calendar-days {
    margin-top: 10px;
    font-size: 13px;
}

.mini-stat-card {
    padding: 34px 20px;
    text-align: center;
}

.mini-stat-card .stat-icon {
    font-size: 42px;
    margin-bottom: 16px;
}

.mini-stat-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.mini-stat-card p {
    margin: 0;
}

/* =========================
   TABLE FIXES
========================= */
.customer-content-wrap table {
    width: 100%;
    max-width: 100%;
}

.customer-content-wrap th,
.customer-content-wrap td {
    vertical-align: middle;
}

/* If included pages have very wide tables */
.customer-content-wrap .table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* =========================
   MOBILE TOPBAR
========================= */
.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1050;
}

.mobile-sidebar {
    background: #2f3a50;
}

/* =========================
   MESSAGE / CHAT POPUP
========================= */
.top-message-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: #111827;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top-message-btn:hover {
    background: #eef2ff;
    border-radius: 12px;
}

/* MESSAGE POPUP */
.chat-popup {
    position: fixed;
    right: 28px;
    bottom: 24px;
    width: 430px;
    height: 720px;
    max-width: calc(100vw - 56px);
    max-height: calc(100dvh - 48px);
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 999999;
    display: none;
}

.chat-popup.active {
    display: block;
}

.chat-popup-header {
    height: 54px;
    background: #1d2b4f;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    flex-shrink: 0;
}

.chat-popup-header button {
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
}

.chat-popup-frame {
    width: 100%;
    height: calc(100% - 54px);
    border: none;
    display: block;
}

/* FULL MOBILE MESSAGE VIEW */
@media (max-width: 767.98px) {
    .chat-popup {
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        height: calc(100dvh - 60px);
        max-width: 100vw;
        max-height: calc(100dvh - 60px);
        border-radius: 0;
    }

    .chat-popup-header {
        height: 52px;
        padding: 0 14px;
    }

    .chat-popup-frame {
        height: calc(100% - 52px);
    }
}

/* VERY SMALL PHONE */
@media (max-width: 480px) {
    .chat-popup {
        top: 56px;
        height: calc(100dvh - 56px);
        max-height: calc(100dvh - 56px);
    }
}

/* =========================
   SCROLLBAR
========================= */
.customer-main::-webkit-scrollbar,
.customer-right-panel::-webkit-scrollbar {
    width: 8px;
}

.customer-main::-webkit-scrollbar-thumb,
.customer-right-panel::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 999px;
}

/* =========================
   MOBILE TOPBAR LIKE ELMS
========================= */
.mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 1050;
    background: #ffffff;
}

.mobile-topbar-inner {
    height: 64px;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
}

.mobile-menu-btn {
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: #111827;
    font-size: 22px;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.mobile-user-name {
    font-weight: 700;
    font-size: 15px;
    color: #111827;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.mobile-action-icon {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    color: #111827;
    display: grid;
    place-items: center;
    position: relative;
    text-decoration: none;
    font-size: 20px;
    cursor: pointer;
}

.mobile-action-icon:hover {
    color: #111827;
    background: #eef2f7;
    border-radius: 12px;
}

.mobile-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #0ea5e9;
    color: #ffffff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* Fix main dashboard width */
.customer-main.has-right-panel {
    max-width: none !important;
}

/* =========================
   MOVE RIGHT PANEL TO BOTTOM ON MOBILE/TABLET
========================= */
@media (max-width: 1199.98px) {
    body {
        overflow: auto;
    }

    .customer-layout {
        height: auto;
        min-height: 100vh;
        display: block;
        padding: 14px;
        overflow: visible;
    }

    .customer-main {
        width: 100%;
        height: auto;
        overflow: visible;
        max-width: 100%;
    }

    .customer-right-panel {
        display: block !important;
        width: 100%;
        height: auto;
        overflow: visible;
        margin-top: 18px;
        padding-bottom: 24px;
    }

    .right-panel {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Hide duplicate desktop profile/message bar inside the bottom panel */
    .customer-right-panel .customer-top-actions {
        display: none !important;
    }

    .calendar-container,
    .mini-stat-card {
        width: 100%;
        border-radius: 18px;
        background: #ffffff;
    }

    .calendar-container {
        padding: 22px;
    }

    .mini-stat-card {
        padding: 28px 20px;
        text-align: center;
    }
}

/* Phone adjustments */
@media (max-width: 575.98px) {
    .customer-layout {
        padding: 10px;
    }

    .mobile-topbar-inner {
        height: 60px;
        padding: 0 12px;
        grid-template-columns: 40px 1fr auto;
        gap: 8px;
    }

    .mobile-menu-btn {
        width: 38px;
        height: 38px;
        font-size: 20px;
    }

    .mobile-user-name {
        font-size: 14px;
    }

    .mobile-action-icon {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .calendar-container {
        padding: 18px;
    }

    .mini-stat-card {
        padding: 24px 16px;
    }
}

/* =========================
   LAPTOP / TABLET
========================= */
@media (max-width: 1399.98px) {
    .customer-layout {
        gap: 14px;
        padding: 14px;
    }

    .customer-main.has-right-panel {
        max-width: 100%;
    }
}

/* Below LG, use mobile topbar + offcanvas */
@media (max-width: 991.98px) {
    body {
        overflow: auto;
    }

    .customer-layout {
        height: auto;
        min-height: 100vh;
        display: block;
        padding: 14px;
        overflow: visible;
    }

    .customer-main {
        height: auto;
        min-height: calc(100vh - 70px);
        overflow: visible;
        max-width: 100%;
    }

    .customer-content-wrap {
        width: 100%;
    }

    .customer-sidebar-inner {
        border-radius: 0;
    }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 767.98px) {
    .customer-layout {
        padding: 10px;
    }

    .customer-content-wrap {
        padding-bottom: 24px;
    }

    .customer-content-wrap h1 {
        font-size: 26px;
    }

    .customer-content-wrap h2 {
        font-size: 22px;
    }

    .customer-content-wrap h3 {
        font-size: 18px;
    }

    /* General card protection */
    .customer-content-wrap .card,
    .customer-content-wrap section,
    .customer-content-wrap article {
        max-width: 100%;
    }

    /* Force wide tables to scroll */
    .customer-content-wrap table {
        display: block;
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
    }

    .chat-popup {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        height: 82vh;
        border-radius: 16px;
    }
}

/* =========================
   SMALL PHONES
========================= */
@media (max-width: 480px) {
    .mobile-topbar span {
        max-width: 220px;
    }

    .sidebar-item a,
    .logout-btn {
        font-size: 14px;
        padding: 12px 15px;
    }

    .chat-popup {
        right: 8px;
        bottom: 8px;
        width: calc(100vw - 16px);
        height: 84vh;
    }
}
</style>

<!-- BOOTSTRAP JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script>
function openChatPopup() {
    const popup = document.getElementById("chatPopup");
    if (popup) {
        popup.classList.add("active");
    }
}

function closeChatPopup() {
    const popup = document.getElementById("chatPopup");
    if (popup) {
        popup.classList.remove("active");
    }
}
</script>

</body>
</html>