body { background: #f4f7f6; }
.sidebar { width: 220px; min-height: 100vh; background: #004d40; color: #e0f2f1; padding-top: 70px; position: fixed; top:56px; left:0; }
.content { margin-left: 220px; margin-top: 70px; }
.sidebar .nav-link { color: #b2dfdb; padding: 10px 18px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,0.04); color: #ffffff; }
.card { border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.05); }
.toast { min-width: 250px; }
@media (max-width: 767px) {
  .sidebar { position: relative; width:100%; min-height:auto; top:0; }
  .content { margin-left:0; margin-top:20px; }
}

.btn-teal {
    background-color: #009688;
    border-color: #009688;
}

    .btn-teal:hover {
        background-color: #00796b;
        border-color: #00796b;
    }

.chat-bubble {
    padding: 10px 15px;
    border-radius: 18px;
    margin-bottom: 10px;
    display: inline-block;
    max-width: 80%;
    word-wrap: break-word;
}

.chat-sent {
    background-color: #009688;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

.chat-received {
    background-color: #e9ecef;
    color: #333;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.navbar {
    background: linear-gradient(90deg, #00796b, #004d40);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

/* --- Sidebar --- */
.sidebar {
    position: fixed;
    top: 56px; /* below navbar */
    left: 0;
    height: calc(100vh - 56px);
    background: #004d40;
    color: #fff;
    width: 240px;
    transition: width 0.3s ease;
    overflow-x: hidden;
    z-index: 1031;
}

    .sidebar .nav-link {
        color: #fff;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        transition: background 0.3s ease, padding 0.3s ease;
    }

        .sidebar .nav-link:hover {
            background: rgba(255, 255, 255, 0.1);
        }

    .sidebar .nav-link-text {
        transition: opacity 0.2s ease;
        white-space: nowrap;
    }

.sidebar-header {
    transition: all 0.3s ease;
}

/* --- Collapsed state --- */
.sidebar.collapsed {
    width: 70px;
}

    .sidebar.collapsed .sidebar-header .h6 {
        display: none;
    }

    .sidebar.collapsed .sidebar-title,
    .sidebar.collapsed .nav-link-text {
        opacity: 0;
        visibility: hidden;
    }

    .sidebar.collapsed .nav-link {
        /* justify-content: center; */
        padding: 10px 0;
    }

    /* --- Hover expand --- */
    .sidebar.collapsed:hover {
        width: 240px;
    }

        .sidebar.collapsed:hover .sidebar-title,
        .sidebar.collapsed:hover .nav-link-text {
            opacity: 1;
            visibility: visible;
        }

        .sidebar.collapsed:hover .nav-link {
            justify-content: flex-start;
            padding: 10px 15px;
        }

/* --- Main content --- */
.content {
    margin-top: 56px; /* below navbar */
    margin-left: 240px;
    transition: margin-left 0.3s ease;
    padding: 20px;
}

body.menu-collapsed .content {
    margin-left: 70px;
}

body.menu-collapsed .sidebar.collapsed:hover ~ .content {
    margin-left: 240px;
}

.bg-teal {
    background-color: #00796b;
}

.btn-teal {
    background-color: #00796b;
    color: #fff;
}

    .btn-teal:hover {
        background-color: #00695c;
        color: #fff;
    }

.align-center {
    padding: 0px 15px;
    transition: background 0.3s ease, padding 0.3s ease;
}

.align-end {
    float: inline-end;
    transition: background 0.3s ease, padding 0.3s ease;
}