/* =========================================================
   P.T. LEE CHENGALVARAYA NAICKER TRUST
   TRUST AI ASSISTANT
   COMPLETE CSS
========================================================= */


/* =========================================================
   AI COLOUR SYSTEM
========================================================= */

:root {

    --ai-navy: #04142F;
    --ai-deep-blue: #061A40;
    --ai-blue: #0B3D91;
    --ai-primary: #1769D1;
    --ai-light-blue: #3B82E8;

    --ai-white: #ffffff;
    --ai-light: #f5f8fc;
    --ai-text: #26354d;
    --ai-muted: #718096;

    --ai-border: #dce5f0;

    --ai-shadow:
        0 15px 45px rgba(4, 20, 47, 0.22);

    --ai-shadow-heavy:
        0 25px 65px rgba(4, 20, 47, 0.30);

}


/* =========================================================
   UNIVERSAL AI RESET
========================================================= */

.ai-assistant-button,
.ai-assistant-button *,
.ai-assistant-window,
.ai-assistant-window * {

    box-sizing: border-box;

}


/* =========================================================
   FLOATING AI BUTTON
   TRANSPARENT / NO BACKGROUND
========================================================= */

.ai-assistant-button {

    position: fixed;

    right: 2px;
    bottom: 85px;

    width: 60px;
    height: 60px;

    padding: 0;

    border: 0;
    outline: none;

    border-radius: 50%;

    background: transparent;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 2147483647;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateX(35px)
        scale(.90);

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        filter .3s ease;

    overflow: visible;

}


/* =========================================================
   SHOW FLOATING BUTTON
========================================================= */

.ai-assistant-button.ai-show-button {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateX(0)
        scale(1);

}


/* =========================================================
   HIDE FLOATING BUTTON WHILE WINDOW IS OPEN
========================================================= */

.ai-assistant-button.ai-window-open {

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none !important;

    transform:
        translateX(35px)
        scale(.85) !important;

}


/* =========================================================
   FLOATING LOGO
   NO BACKGROUND
========================================================= */

.ai-floating-logo {

    width: 60px;
    height: 60px;

    object-fit: contain;

    display: block;

    border-radius: 50%;

    background: transparent;

    border: 0;

    transition:
        transform .25s ease,
        filter .25s ease;

}


/* =========================================================
   SUBTLE MOUSE HOVER
   BLUE + PINK ONLY
   NO RAINBOW
========================================================= */

.ai-assistant-button:hover {

    transform:
        translateX(-2px)
        scale(1.04);

    filter:
        drop-shadow(
            0 0 4px
            rgba(53, 108, 226, .50)
        )
        drop-shadow(
            0 0 8px
            rgba(226, 19, 79, .22)
        );

}


/* =========================================================
   SUBTLE LOGO HOVER
========================================================= */

.ai-assistant-button:hover .ai-floating-logo {

    transform:
        scale(1.04);

    filter:
        drop-shadow(
            0 0 3px
            rgba(53, 108, 226, .40)
        )
        drop-shadow(
            0 0 6px
            rgba(226, 19, 79, .18)
        );

}


/* =========================================================
   NO EXTRA FLOATING DECORATION
========================================================= */

.ai-assistant-button::before,
.ai-assistant-button::after {

    display: none !important;

    content: none !important;

}


/* =========================================================
   AI ASSISTANT WINDOW
   LOWER POSITION
========================================================= */

.ai-assistant-window {

    position: fixed;

    right: 28px;

    bottom: 75px;

    width: 330px;

    max-width:
        calc(100vw - 40px);

    height: 490px;

    max-height:
        calc(100vh - 95px);

    background: #ffffff;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        var(--ai-shadow-heavy);

    border:
        1px solid
        rgba(23, 105, 209, 0.14);

    display: flex;

    flex-direction: column;

    z-index: 2147483646;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(15px)
        scale(.96);

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

}


/* =========================================================
   ACTIVE WINDOW
========================================================= */

.ai-assistant-window.active {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);

    pointer-events: auto;

}


/* =========================================================
   HEADER
========================================================= */

.ai-assistant-header {

    flex-shrink: 0;

    min-height: 68px;

    padding:
        7px 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        linear-gradient(
            135deg,
            var(--ai-navy) 0%,
            var(--ai-deep-blue) 45%,
            var(--ai-blue) 100%
        );

    color: #ffffff;

}


/* =========================================================
   HEADER LEFT
========================================================= */

.ai-assistant-header-left {

    display: flex;

    align-items: center;

    min-width: 0;

}


/* =========================================================
   HEADER LOGO
   LARGER / NO WHITE BACKGROUND
========================================================= */

.ai-assistant-logo {

    width: 56px;
    height: 56px;

    flex-shrink: 0;

    border-radius: 50%;

    background: transparent;

    padding: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow: none;

}


/* =========================================================
   HEADER LOGO IMAGE
========================================================= */

.ai-assistant-logo img {

    width: 54px;
    height: 54px;

    object-fit: contain;

    border-radius: 50%;

    background: transparent;

}


/* =========================================================
   HEADER TEXT
========================================================= */

.ai-assistant-header-text {

    margin-left: 10px;

    min-width: 0;

}


.ai-assistant-title {

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.25;

    color: #ffffff;

}


.ai-assistant-status {

    margin-top: 3px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 10px;

    color:
        rgba(255,255,255,.78);

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.ai-assistant-close {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    margin-left: 8px;

    border:
        1px solid
        rgba(255,255,255,.28);

    border-radius: 50%;

    background:
        rgba(255,255,255,.10);

    color: #ffffff;

    display: flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;

}


.ai-assistant-close:hover {

    background:
        rgba(255,255,255,.22);

    transform:
        rotate(90deg);

}


/* =========================================================
   ASSISTANT BODY
========================================================= */

.ai-assistant-body {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

    overflow-x: hidden;

    padding:
        15px 13px 17px;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f4f7fb 100%
        );

    scroll-behavior: smooth;

}


/* =========================================================
   SCROLLBAR
========================================================= */

.ai-assistant-body::-webkit-scrollbar {

    width: 5px;

}


.ai-assistant-body::-webkit-scrollbar-track {

    background: transparent;

}


.ai-assistant-body::-webkit-scrollbar-thumb {

    background:
        #b8c8dc;

    border-radius: 10px;

}


.ai-assistant-body::-webkit-scrollbar-thumb:hover {

    background:
        #8fa8c5;

}


/* =========================================================
   WELCOME
========================================================= */

.ai-welcome {

    text-align: center;

    padding:
        3px 7px 13px;

}


.ai-welcome-logo {

    width: 100px;
    height: 100px;

    margin:
        0 auto 5px;

    padding: 0;

    border-radius: 50%;

    background: transparent;

    box-shadow: none;

    border: 0;

}


.ai-welcome-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;

    background: transparent;

}


.ai-welcome h3 {

    margin:
        0 0 5px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 17px;

    font-weight: 700;

    color:
        var(--ai-navy);

}


.ai-welcome p {

    margin: 0 auto;

    max-width: 295px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.6;

    color:
        var(--ai-muted);

}


/* =========================================================
   QUICK QUESTIONS
========================================================= */

.ai-quick-questions {

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 10px;

}


.ai-quick-question {

    min-height: 39px;

    padding:
        7px 8px;

    border:
        1px solid #d9e4f0;

    border-radius: 10px;

    background: #ffffff;

    color:
        var(--ai-navy);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.3;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.ai-quick-question:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--ai-primary);

    background:
        #f5f9ff;

    box-shadow:
        0 7px 18px rgba(23,105,209,.12);

}


/* =========================================================
   MESSAGE WRAPPER
========================================================= */

.ai-message {

    display: flex;

    margin:
        7px 0;

}


.ai-message.user {

    justify-content:
        flex-end;

}


.ai-message.assistant {

    justify-content:
        flex-start;

}


/* =========================================================
   MESSAGE BUBBLE
========================================================= */

.ai-message-bubble {

    max-width: 88%;

    padding:
        9px 11px;

    border-radius: 13px;

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.6;

    overflow-wrap: anywhere;

}


.ai-message.user .ai-message-bubble {

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ai-blue),
            var(--ai-primary)
        );

    border-bottom-right-radius: 4px;

    box-shadow:
        0 6px 16px rgba(11,61,145,.20);

}


.ai-message.assistant .ai-message-bubble {

    color:
        var(--ai-text);

    background:
        #ffffff;

    border:
        1px solid #e0e8f1;

    border-bottom-left-radius: 4px;

    box-shadow:
        0 5px 15px rgba(4,20,47,.07);

}


/* =========================================================
   LINKS
========================================================= */

.ai-message-bubble a {

    color:
        var(--ai-primary);

    font-weight: 600;

    text-decoration: none;

    word-break: break-word;

}


.ai-message-bubble a:hover {

    text-decoration: underline;

}


/* =========================================================
   COURSE RESPONSE
========================================================= */

.ai-course-response {

    width: 100%;

}


.ai-course-title {

    margin-bottom: 5px;

    color:
        var(--ai-navy);

    font-size: 14px;

    font-weight: 800;

}


.ai-course-intro {

    margin-bottom: 10px;

    color:
        var(--ai-muted);

    font-size: 10px;

    line-height: 1.55;

}


/* =========================================================
   COURSE CARD
========================================================= */

.ai-course-card {

    width: 100%;

    margin:
        8px 0;

    border:
        1px solid #dce5f0;

    border-radius: 11px;

    background: #ffffff;

    overflow: hidden;

    box-shadow:
        0 4px 12px rgba(4,20,47,.05);

}


.ai-course-card[open] {

    border-color:
        rgba(23,105,209,.40);

    box-shadow:
        0 8px 22px rgba(23,105,209,.10);

}


.ai-course-card summary {

    min-height: 46px;

    padding:
        10px 11px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 9px;

    cursor: pointer;

    list-style: none;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f5f9ff
        );

}


.ai-course-card summary::-webkit-details-marker {

    display: none;

}


.course-institution-name {

    flex: 1;

    color:
        var(--ai-navy);

    font-size: 10.5px;

    font-weight: 700;

    line-height: 1.45;

}


.course-arrow {

    width: 24px;
    height: 24px;

    flex-shrink: 0;

    border-radius: 50%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ai-blue),
            var(--ai-primary)
        );

    font-size: 15px;

    font-weight: 700;

    transition:
        transform .2s ease;

}


.ai-course-card[open]
.course-arrow {

    transform:
        rotate(45deg);

}


.ai-course-details {

    padding:
        11px 12px 13px;

    border-top:
        1px solid #e5ebf3;

    background:
        #ffffff;

}


.ai-course-details ul {

    margin:
        5px 0 11px;

    padding-left: 18px;

}


.ai-course-details li {

    margin:
        3px 0;

    color:
        #526176;

    font-size: 10px;

    line-height: 1.45;

}


.course-section-title {

    margin:
        6px 0 5px;

    color:
        var(--ai-blue);

    font-size: 10.5px;

    font-weight: 800;

}


.ai-course-contact {

    margin-top: 10px;

    padding:
        9px;

    border-radius: 9px;

    background:
        #f5f8fc;

    border:
        1px solid #e2e9f1;

}


.ai-course-contact p {

    margin:
        5px 0;

    color:
        #526176;

    font-size: 9.5px;

    line-height: 1.55;

}


.ai-course-contact p:first-child {

    margin-top: 0;

}


.ai-course-contact p:last-child {

    margin-bottom: 0;

}


.ai-course-contact strong {

    color:
        var(--ai-navy);

}


.course-school-note {

    margin-top: 9px;

    padding:
        8px;

    border-left:
        3px solid var(--ai-primary);

    border-radius:
        0 7px 7px 0;

    background:
        #f4f8fd;

    color:
        #65748a;

    font-size: 9.5px;

    line-height: 1.55;

}


.ai-course-footer {

    margin-top: 10px;

    padding:
        8px 9px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #eef5ff,
            #f7faff
        );

    color:
        #5d6e84;

    font-size: 9px;

    line-height: 1.45;

}


/* =========================================================
   SOCIAL MEDIA
========================================================= */

.ai-social-response {

    width: 100%;

}


.ai-social-heading {

    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 9px;

}


.ai-social-icon {

    width: 34px;
    height: 34px;

    flex-shrink: 0;

    border-radius: 9px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ai-blue),
            var(--ai-primary)
        );

    font-size: 16px;

}


.ai-social-heading strong {

    display: block;

    color:
        var(--ai-navy);

    font-size: 12px;

}


.ai-social-heading span {

    display: block;

    margin-top: 2px;

    color:
        var(--ai-muted);

    font-size: 9px;

}


.ai-social-intro {

    margin-bottom: 9px;

    color:
        #617086;

    font-size: 9.5px;

    line-height: 1.55;

}


.ai-social-links {

    display: flex;

    flex-direction: column;

    gap: 7px;

}


.ai-social-card {

    min-height: 46px;

    padding:
        7px 9px;

    display: flex;

    align-items: center;

    gap: 8px;

    border:
        1px solid #dfe7f0;

    border-radius: 9px;

    text-decoration: none !important;

    background:
        #ffffff;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

}


.ai-social-card:hover {

    transform:
        translateY(-2px);

    border-color:
        #b9cde4;

    box-shadow:
        0 7px 17px rgba(4,20,47,.08);

}


.ai-social-card-icon {

    width: 29px;
    height: 29px;

    flex-shrink: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 7px;

    color: #ffffff;

    background:
        var(--ai-blue);

    font-size: 13px;

    font-weight: 700;

}


.ai-social-card-content {

    flex: 1;

    min-width: 0;

}


.ai-social-card-content strong {

    display: block;

    color:
        var(--ai-navy);

    font-size: 10px;

}


.ai-social-card-content span {

    display: block;

    margin-top: 2px;

    color:
        #78879a;

    font-size: 8.5px;

    overflow-wrap: anywhere;

}


.ai-social-arrow {

    flex-shrink: 0;

    color:
        var(--ai-primary);

    font-size: 14px;

}


.ai-social-footer {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 9px;

    color:
        #7a899b;

    font-size: 9px;

}


.ai-social-live-dot {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        #20b26b;

    box-shadow:
        0 0 0 4px
        rgba(32,178,107,.12);

}


/* =========================================================
   MAP
========================================================= */

.ai-map-container {

    width: 100%;

    margin-top: 9px;

    overflow: hidden;

    border-radius: 10px;

    border:
        1px solid #dce5ef;

    background: #ffffff;

    box-shadow:
        0 5px 15px rgba(4,20,47,.08);

}


.ai-map-container iframe {

    width: 100%;

    height: 160px;

    display: block;

    border: 0;

}


/* =========================================================
   TYPING
========================================================= */

.ai-typing {

    display: flex;

    align-items: center;

    gap: 4px;

    min-height: 18px;

}


.ai-typing span {

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--ai-primary);

    animation:
        aiTyping 1.2s infinite ease-in-out;

}


.ai-typing span:nth-child(2) {

    animation-delay:
        .15s;

}


.ai-typing span:nth-child(3) {

    animation-delay:
        .30s;

}


@keyframes aiTyping {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity: .45;

    }

    30% {

        transform:
            translateY(-4px);

        opacity: 1;

    }

}


/* =========================================================
   INPUT AREA
========================================================= */

.ai-assistant-input-area {

    flex-shrink: 0;

    padding:
        8px 10px;

    background:
        #ffffff;

    border-top:
        1px solid #e2e8f0;

}


.ai-assistant-form {

    display: flex;

    align-items: center;

    gap: 7px;

}


.ai-assistant-input {

    flex: 1;

    min-width: 0;

    height: 39px;

    padding:
        0 11px;

    border:
        1px solid #d6e0eb;

    border-radius: 10px;

    outline: none;

    background:
        #f8fafc;

    color:
        var(--ai-text);

    font-family:
        "Poppins",
        Arial,
        sans-serif;

    font-size: 10px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


.ai-assistant-input:focus {

    background:
        #ffffff;

    border-color:
        var(--ai-primary);

    box-shadow:
        0 0 0 3px
        rgba(23,105,209,.10);

}


.ai-assistant-input::placeholder {

    color:
        #97a5b7;

}


.ai-assistant-send {

    width: 39px;
    height: 39px;

    flex-shrink: 0;

    border: 0;

    border-radius: 10px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--ai-blue),
            var(--ai-primary)
        );

    cursor: pointer;

    display: flex;

    align-items: center;
    justify-content: center;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        opacity .2s ease;

}


.ai-assistant-send:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 6px 15px
        rgba(23,105,209,.25);

}


.ai-assistant-send:disabled {

    opacity: .55;

    cursor:
        not-allowed;

    transform: none;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 768px) {

    .ai-assistant-window {

        right: 20px;

        bottom: 60px;

        width:
            calc(100vw - 40px);

        height:
            min(490px, calc(100vh - 85px));

        max-height:
            calc(100vh - 85px);

    }


    .ai-assistant-button {

        right: 60px;

        bottom: 60px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {

    .ai-assistant-button {

        width: 54px;

        height: 54px;

        right: 14px;

        bottom: 65px;

    }


    .ai-floating-logo {

        width: 39px;

        height: 39px;

    }


    .ai-assistant-window {

        right: 12px;

        bottom: 50px;

        width:
            calc(100vw - 24px);

        max-width:
            calc(100vw - 24px);

        height:
            calc(100vh - 75px);

        max-height:
            calc(100vh - 75px);

        border-radius: 16px;

    }


    .ai-assistant-header {

        min-height: 64px;

        padding:
            6px 10px;

    }


    .ai-assistant-logo {

        width: 50px;

        height: 50px;

    }


    .ai-assistant-logo img {

        width: 48px;

        height: 48px;

    }


    .ai-assistant-title {

        font-size: 12.5px;

    }


    .ai-assistant-status {

        font-size: 9px;

    }


    .ai-assistant-close {

        width: 32px;

        height: 32px;

    }


    .ai-assistant-body {

        padding:
            12px 9px 15px;

    }


    .ai-quick-questions {

        grid-template-columns:
            1fr 1fr;

        gap: 6px;

    }


    .ai-quick-question {

        min-height: 38px;

        padding:
            6px 5px;

        font-size: 9.5px;

    }


    .course-institution-name {

        font-size: 10px;

    }


    .ai-message-bubble {

        max-width: 94%;

        font-size: 10.5px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .ai-quick-questions {

        grid-template-columns:
            1fr;

    }


    .ai-assistant-window {

        right: 8px;

        bottom: 45px;

        width:
            calc(100vw - 16px);

        height:
            calc(100vh - 70px);

        max-height:
            calc(100vh - 70px);

    }


    .ai-assistant-button {

        right: 12px;

        bottom: 60px;

    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ai-assistant-button,
    .ai-assistant-window,
    .ai-course-card,
    .ai-social-card,
    .ai-quick-question,
    .ai-assistant-send {

        transition: none;

    }


    .ai-typing span {

        animation: none;

    }

}

/* =========================================================
   TRUST AI ASSISTANT
   RESPONSIVE FIX
   MOBILE / TABLET / SMALL SCREEN ONLY

   IMPORTANT:
   Existing desktop design, colours, content,
   animations and behaviour are NOT changed.
========================================================= */


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1024px) {

    .ai-assistant-window {
        right: 20px;
        bottom: 60px;

        width: 350px;

        max-width:
            calc(100vw - 40px);

        height:
            min(490px, calc(100dvh - 85px));

        max-height:
            calc(100dvh - 85px);
    }


    .ai-assistant-button {

        right: 15px;

        bottom: 65px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    /* Floating button */

    .ai-assistant-button {

        width: 54px;
        height: 54px;

        right: 14px;
        bottom: 65px;
    }


    .ai-floating-logo {

        width: 39px;
        height: 39px;
    }


    /* Assistant window */

    .ai-assistant-window {

        right: 12px;
        left: 12px;

        bottom: 50px;

        width: auto;

        max-width: none;

        height:
            calc(100dvh - 75px);

        max-height:
            calc(100dvh - 75px);

        border-radius: 16px;
    }


    /* Header */

    .ai-assistant-header {

        min-height: 64px;

        padding:
            6px 10px;
    }


    .ai-assistant-logo {

        width: 50px;
        height: 50px;
    }


    .ai-assistant-logo img {

        width: 48px;
        height: 48px;
    }


    .ai-assistant-header-text {

        margin-left: 8px;
    }


    .ai-assistant-title {

        font-size: 12.5px;
    }


    .ai-assistant-status {

        font-size: 9px;
    }


    .ai-assistant-close {

        width: 32px;
        height: 32px;
    }


    /* Body */

    .ai-assistant-body {

        padding:
            12px 9px 15px;

        -webkit-overflow-scrolling:
            touch;
    }


    /* Quick questions */

    .ai-quick-questions {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 6px;
    }


    .ai-quick-question {

        min-height: 38px;

        padding:
            6px 5px;

        font-size: 9.5px;
    }


    /* Course cards */

    .course-institution-name {

        font-size: 10px;
    }


    /* Messages */

    .ai-message-bubble {

        max-width: 94%;

        font-size: 10.5px;
    }


    /* Input */

    .ai-input-area,
    .ai-assistant-input-area {

        padding-left: 8px;
        padding-right: 8px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .ai-assistant-window {

        right: 8px;
        left: 8px;

        bottom: 45px;

        height:
            calc(100dvh - 70px);

        max-height:
            calc(100dvh - 70px);

        border-radius: 14px;
    }


    /* Header */

    .ai-assistant-header {

        min-height: 60px;

        padding:
            5px 8px;
    }


    .ai-assistant-logo {

        width: 46px;
        height: 46px;
    }


    .ai-assistant-logo img {

        width: 44px;
        height: 44px;
    }


    .ai-assistant-title {

        font-size: 11.5px;
    }


    .ai-assistant-status {

        font-size: 8.5px;
    }


    .ai-assistant-close {

        width: 30px;
        height: 30px;

        margin-left: 5px;
    }


    /* Body */

    .ai-assistant-body {

        padding:
            10px 8px 13px;
    }


    /* Quick questions */

    .ai-quick-questions {

        grid-template-columns:
            1fr 1fr;

        gap: 5px;
    }


    .ai-quick-question {

        min-height: 37px;

        padding:
            5px 4px;

        font-size: 9px;
    }


    /* Messages */

    .ai-message-bubble {

        max-width: 96%;

        padding:
            8px 9px;

        font-size: 10px;
    }


    /* Course cards */

    .ai-course-card summary {

        padding:
            9px 9px;
    }


    .course-institution-name {

        font-size: 9.5px;
    }


    /* Floating button */

    .ai-floating-logo {

        width: 38px;
        height: 38px;
    }


    .ai-assistant-button {

        right: 10px;
        bottom: 58px;

        width: 52px;
        height: 52px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .ai-quick-questions {

        grid-template-columns:
            1fr;
    }


    .ai-assistant-window {

        right: 6px;
        left: 6px;

        bottom: 40px;

        height:
            calc(100dvh - 60px);

        max-height:
            calc(100dvh - 60px);
    }


    .ai-assistant-button {

        right: 8px;
        bottom: 52px;

        width: 50px;
        height: 50px;
    }


    .ai-floating-logo {

        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   MOBILE LANDSCAPE
========================================================= */

@media (max-width: 900px)
       and (orientation: landscape)
       and (max-height: 600px) {

    .ai-assistant-window {

        right: 10px;
        left: auto;

        bottom: 10px;

        width:
            min(380px, calc(100vw - 20px));

        height:
            calc(100dvh - 20px);

        max-height:
            calc(100dvh - 20px);
    }


    .ai-assistant-button {

        right: 10px;
        bottom: 10px;
    }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .ai-quick-question,
    .ai-course-card summary,
    .ai-social-card,
    .ai-assistant-send,
    .ai-assistant-close,
    .ai-assistant-button {

        -webkit-tap-highlight-color:
            transparent;
    }


    .ai-message-bubble,
    .ai-course-details,
    .ai-social-card-content {

        overflow-wrap:
            anywhere;

        word-break:
            normal;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ai-assistant-button,
    .ai-assistant-window,
    .ai-course-card,
    .ai-social-card,
    .ai-quick-question,
    .ai-assistant-send {

        transition:
            none;
    }


    .ai-typing span {

        animation:
            none;
    }

}