```css
/* =========================================================
   MPS AI SMART FRONT DESK
   PUBLIC CHATBOT
   iOS INSPIRED GLASSMORPHISM UI
   ========================================================= */


/* =========================================================
   01. ROOT
   ========================================================= */

:root {

    /* PRIMARY TONE */
    --primary: #0f3d91;
    --primary-dark: #082d70;
    --primary-light: #eaf1ff;

    /* SECONDARY TONE */
    --secondary: #eef4ff;
    --secondary-dark: #dbe8ff;

    /* TEXT */
    --text-primary: #172033;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    /* BACKGROUND */
    --background: #f4f7fc;
    --background-white: #ffffff;

    /* GLASS */
    --glass: rgba(255, 255, 255, 0.72);
    --glass-strong: rgba(255, 255, 255, 0.88);
    --glass-border: rgba(255, 255, 255, 0.75);

    /* BORDER */
    --border: rgba(148, 163, 184, 0.20);

    /* STATUS */
    --success: #22c55e;
    --danger: #ef4444;

    /* RADIUS */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    /* SHADOW */
    --shadow-sm:
        0 2px 10px rgba(15, 23, 42, 0.05);

    --shadow-md:
        0 10px 30px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 20px 60px rgba(15, 23, 42, 0.12);

    /* BLUR */
    --blur:
        blur(20px);

}


/* =========================================================
   02. RESET
   ========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;

}


html {

    min-height: 100%;

    scroll-behavior: smooth;

}


body {

    margin: 0;

    min-height: 100vh;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        "Segoe UI",
        Arial,
        sans-serif;

    color:
        var(--text-primary);

    background:
        var(--background);

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;

}


button,
input,
textarea,
select {

    font: inherit;

}


button {

    cursor: pointer;

}


img {

    max-width: 100%;

    display: block;

}


a {

    color: inherit;

    text-decoration: none;

}


/* =========================================================
   03. APP BACKGROUND
   ========================================================= */

.app {

    min-height: 100vh;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef4ff 45%,
            #f7f9fc 100%
        );

}


/* =========================================================
   04. BACKGROUND DECORATION
   ========================================================= */

.app::before {

    content: "";

    position: fixed;

    width: 420px;

    height: 420px;

    top: -180px;

    right: -120px;

    border-radius: 50%;

    background:
        rgba(15, 61, 145, 0.10);

    filter:
        blur(70px);

    pointer-events: none;

}


.app::after {

    content: "";

    position: fixed;

    width: 360px;

    height: 360px;

    bottom: -180px;

    left: -120px;

    border-radius: 50%;

    background:
        rgba(96, 165, 250, 0.12);

    filter:
        blur(70px);

    pointer-events: none;

}


/* =========================================================
   05. HEADER
   ========================================================= */

.top-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    min-height: 76px;

    background:
        rgba(255, 255, 255, 0.72);

    backdrop-filter:
        blur(24px);

    -webkit-backdrop-filter:
        blur(24px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.8);

    box-shadow:
        0 4px 20px rgba(15, 23, 42, 0.04);

}


.header-container {

    width: 100%;

    max-width: 1180px;

    min-height: 76px;

    margin: 0 auto;

    padding: 0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


/* =========================================================
   06. BRAND
   ========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

}


.brand-logo {

    width: 46px;

    height: 46px;

    padding: 5px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,0.80);

    border:
        1px solid
        rgba(255,255,255,0.9);

    border-radius:
        14px;

    box-shadow:
        var(--shadow-sm);

}


.brand-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.brand-text {

    min-width: 0;

}


.brand-title {

    font-size: 16px;

    font-weight: 700;

    line-height: 1.25;

    letter-spacing: -0.01em;

    white-space: nowrap;

}


.brand-subtitle {

    margin-top: 3px;

    font-size: 10px;

    color:
        var(--text-muted);

    white-space: nowrap;

}


/* =========================================================
   07. HEADER ACTION
   ========================================================= */

.header-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}


.header-button {

    min-height: 38px;

    padding: 0 14px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    border:
        1px solid
        rgba(148,163,184,0.22);

    border-radius:
        12px;

    background:
        rgba(255,255,255,0.65);

    color:
        var(--text-secondary);

    font-size: 11px;

    font-weight: 600;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        all .2s ease;

}


.header-button:hover {

    background:
        rgba(255,255,255,0.95);

    color:
        var(--primary);

    border-color:
        rgba(15,61,145,0.20);

    transform:
        translateY(-1px);

    box-shadow:
        var(--shadow-sm);

}


/* =========================================================
   08. MAIN
   ========================================================= */

.main-content {

    width: 100%;

    max-width: 1180px;

    margin: 0 auto;

    padding: 50px 24px 30px;

    position: relative;

    z-index: 2;

}


/* =========================================================
   09. WELCOME
   ========================================================= */

.welcome-section {

    text-align: center;

    margin-bottom: 34px;

}


.welcome-container {

    max-width: 900px;

    margin: 0 auto;

}


.welcome-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    margin-bottom: 16px;

    border:
        1px solid
        rgba(15,61,145,0.10);

    border-radius:
        999px;

    background:
        rgba(255,255,255,0.65);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    color:
        var(--text-secondary);

    font-size: 10px;

    font-weight: 600;

    box-shadow:
        var(--shadow-sm);

}


.online-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 4px
        rgba(34,197,94,0.10);

}


.welcome-title {

    margin: 0;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.12;

    letter-spacing: -0.035em;

    font-weight: 750;

    color:
        var(--text-primary);

}


.welcome-title span {

    display: block;

    margin-top: 5px;

    color:
        var(--primary);

}


.welcome-description {

    max-width: 680px;

    margin: 17px auto 0;

    font-size: 14px;

    line-height: 1.75;

    color:
        var(--text-secondary);

}


/* =========================================================
   10. SUGGESTED QUESTIONS
   ========================================================= */

.suggested-section {

    margin-top: 28px;

}


.suggested-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 12px;

}


.suggested-card {

    min-height: 118px;

    padding: 16px;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    text-align: left;

    border:
        1px solid
        rgba(255,255,255,0.85);

    border-radius:
        var(--radius-md);

    background:
        rgba(255,255,255,0.64);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    box-shadow:
        var(--shadow-sm);

    color:
        var(--text-primary);

    transition:
        all .22s ease;

}


.suggested-card:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255,255,255,0.88);

    border-color:
        rgba(15,61,145,0.15);

    box-shadow:
        var(--shadow-md);

}


.suggested-card-icon {

    width: 36px;

    height: 36px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        11px;

    background:
        var(--primary-light);

    color:
        var(--primary);

}


.suggested-card-content {

    min-width: 0;

    flex: 1;

}


.suggested-card-content strong {

    display: block;

    margin-bottom: 5px;

    font-size: 12px;

    font-weight: 700;

}


.suggested-card-content span {

    display: block;

    font-size: 10px;

    line-height: 1.5;

    color:
        var(--text-secondary);

}


.suggested-arrow {

    flex-shrink: 0;

    color:
        #a0aec0;

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

}


.suggested-card:hover .suggested-arrow {

    color:
        var(--primary);

    transform:
        translateX(3px);

}


/* =========================================================
   11. CHAT SECTION
   ========================================================= */

.chat-section {

    width: 100%;

}


.chat-container {

    width: 100%;

    max-width: 920px;

    margin: 0 auto;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.85);

    border-radius:
        var(--radius-xl);

    background:
        rgba(255,255,255,0.68);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    box-shadow:
        var(--shadow-lg);

}


/* =========================================================
   12. CHAT HEADER
   ========================================================= */

.chat-header {

    min-height: 70px;

    padding: 0 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(148,163,184,0.14);

    background:
        rgba(255,255,255,0.55);

}


.chat-header-left {

    display: flex;

    align-items: center;

    gap: 11px;

}


.chat-avatar {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        13px;

    background:
        linear-gradient(
            145deg,
            #0f3d91,
            #2563c7
        );

    box-shadow:
        0 6px 18px
        rgba(15,61,145,0.20);

}


.chat-avatar span {

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background:
        #ffffff;

    box-shadow:
        0 0 0 5px
        rgba(255,255,255,0.18);

}


.chat-header-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.chat-title {

    font-size: 13px;

    font-weight: 700;

}


.chat-status {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 9px;

    color:
        var(--text-muted);

}


.status-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        var(--success);

}


.chat-header-right {

    display: flex;

    align-items: center;

}


.chat-header-button {

    width: 36px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(148,163,184,0.18);

    border-radius:
        11px;

    background:
        rgba(255,255,255,0.65);

    color:
        var(--text-secondary);

    transition:
        all .2s ease;

}


.chat-header-button:hover {

    color:
        var(--primary);

    background:
        var(--primary-light);

    border-color:
        rgba(15,61,145,0.15);

}


/* =========================================================
   13. CHAT MESSAGES
   ========================================================= */

.chat-messages {

    min-height: 390px;

    max-height: 540px;

    overflow-y: auto;

    padding: 28px 26px;

    background:
        rgba(248,250,253,0.58);

    scrollbar-width: thin;

    scrollbar-color:
        rgba(100,116,139,0.25)
        transparent;

}


.chat-messages::-webkit-scrollbar {

    width: 6px;

}


.chat-messages::-webkit-scrollbar-track {

    background: transparent;

}


.chat-messages::-webkit-scrollbar-thumb {

    background:
        rgba(100,116,139,0.22);

    border-radius:
        999px;

}


/* =========================================================
   14. MESSAGE
   ========================================================= */

.message {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 20px;

}


.message:last-child {

    margin-bottom: 0;

}


.message-avatar {

    width: 34px;

    height: 34px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background:
        var(--primary-light);

    color:
        var(--primary);

}


.message-avatar span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:
        var(--primary);

}


.message-content {

    max-width:
        min(78%, 700px);

}


.message-sender {

    margin-bottom: 5px;

    font-size: 10px;

    font-weight: 700;

    color:
        var(--text-secondary);

}


.message-bubble {

    padding: 12px 15px;

    border:
        1px solid
        rgba(148,163,184,0.15);

    border-radius:
        5px 17px 17px 17px;

    background:
        rgba(255,255,255,0.82);

    box-shadow:
        0 3px 12px
        rgba(15,23,42,0.04);

    font-size: 13px;

    line-height: 1.65;

    color:
        var(--text-primary);

    word-break: break-word;

}


.message-time {

    margin-top: 5px;

    font-size: 9px;

    color:
        var(--text-muted);

}


/* USER MESSAGE */

.message-user {

    flex-direction:
        row-reverse;

}


.message-user .message-content {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}


.message-user .message-sender {

    text-align: right;

}


.message-user .message-bubble {

    border-radius:
        17px 5px 17px 17px;

    background:
        linear-gradient(
            145deg,
            #0f3d91,
            #2563c7
        );

    color:
        #ffffff;

    border:
        0;

    box-shadow:
        0 7px 20px
        rgba(15,61,145,0.18);

}


.message-user .message-avatar {

    background:
        #e8eef8;

}


.message-user .message-avatar span {

    background:
        #64748b;

}


/* =========================================================
   15. TYPING INDICATOR
   ========================================================= */

.typing-indicator {

    align-items: center;

    gap: 9px;

    padding:
        0 26px 18px;

    background:
        rgba(248,250,253,0.58);

}


.typing-content {

    display: flex;

    align-items: center;

    gap: 10px;

}


.typing-label {

    font-size: 9px;

    color:
        var(--text-muted);

}


.typing-dots {

    display: flex;

    align-items: center;

    gap: 4px;

}


.typing-dots span {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        #94a3b8;

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

}


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

    animation-delay:
        .15s;

}


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

    animation-delay:
        .30s;

}


@keyframes typing {

    0%,
    60%,
    100% {

        transform:
            translateY(0);

        opacity:
            .45;

    }

    30% {

        transform:
            translateY(-4px);

        opacity:
            1;

    }

}


/* =========================================================
   16. INPUT AREA
   ========================================================= */

.chat-input-area {

    border-top:
        1px solid
        rgba(148,163,184,0.14);

    background:
        rgba(255,255,255,0.72);

}


.chat-form {

    padding:
        16px 20px 10px;

}


.input-wrapper {

    display: flex;

    align-items: flex-end;

    gap: 9px;

    padding: 6px;

    border:
        1px solid
        rgba(148,163,184,0.20);

    border-radius:
        17px;

    background:
        rgba(255,255,255,0.88);

    box-shadow:
        0 3px 14px
        rgba(15,23,42,0.04);

    transition:
        all .2s ease;

}


.input-wrapper:focus-within {

    border-color:
        rgba(15,61,145,0.35);

    box-shadow:
        0 0 0 4px
        rgba(15,61,145,0.07);

}


.chat-input {

    flex: 1;

    min-height: 42px;

    max-height: 150px;

    resize: none;

    padding:
        10px 10px;

    border: 0;

    outline: none;

    background:
        transparent;

    color:
        var(--text-primary);

    font-size: 13px;

    line-height: 1.5;

}


.chat-input::placeholder {

    color:
        #a3afbf;

}


.send-button {

    width: 40px;

    height: 40px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 0;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #0f3d91,
            #2563c7
        );

    color:
        #ffffff;

    box-shadow:
        0 5px 14px
        rgba(15,61,145,0.20);

    transition:
        all .2s ease;

}


.send-button:hover {

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 18px
        rgba(15,61,145,0.25);

}


.send-button:active {

    transform:
        scale(.96);

}


.send-button:disabled {

    opacity:
        .5;

    cursor:
        not-allowed;

    transform:
        none;

}


/* =========================================================
   17. LOADING
   ========================================================= */

.send-button.loading {

    position: relative;

}


.send-button.loading svg {

    display: none;

}


.send-button.loading::after {

    content: "";

    width: 15px;

    height: 15px;

    border:
        2px solid
        rgba(255,255,255,.4);

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        spin .7s linear infinite;

}


@keyframes spin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   18. INPUT FOOTER
   ========================================================= */

.input-footer {

    padding:
        7px 4px 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}


.input-hint {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 9px;

    color:
        var(--text-muted);

}


.hint-divider {

    opacity:
        .5;

}


.character-counter {

    font-size: 9px;

    color:
        var(--text-muted);

}


/* =========================================================
   19. DISCLAIMER
   ========================================================= */

.chat-disclaimer {

    padding:
        0 20px 16px;

    text-align: center;

    font-size: 9px;

    line-height: 1.5;

    color:
        var(--text-muted);

}


/* =========================================================
   20. FOOTER
   ========================================================= */

.site-footer {

    position: relative;

    z-index: 2;

    border-top:
        1px solid
        rgba(255,255,255,0.7);

    background:
        rgba(255,255,255,0.48);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

}


.footer-container {

    width: 100%;

    max-width: 1180px;

    min-height: 58px;

    margin: 0 auto;

    padding:
        0 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    color:
        var(--text-muted);

    font-size: 9px;

}


.footer-container strong {

    color:
        var(--text-secondary);

}


/* =========================================================
   21. SELECTION
   ========================================================= */

::selection {

    background:
        rgba(15,61,145,0.16);

    color:
        var(--text-primary);

}


/* =========================================================
   22. RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .suggested-grid {

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

    }


    .main-content {

        padding-top:
            40px;

    }

}


/* =========================================================
   23. RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .top-header {

        min-height:
            64px;

    }


    .header-container {

        min-height:
            64px;

        padding:
            0 14px;

    }


    .brand-logo {

        width:
            40px;

        height:
            40px;

        border-radius:
            12px;

    }


    .brand-title {

        font-size:
            13px;

    }


    .brand-subtitle {

        font-size:
            9px;

    }


    .header-button {

        width:
            36px;

        height:
            36px;

        padding:
            0;

    }


    .header-button span {

        display:
            none;

    }


    .main-content {

        padding:
            30px 12px 22px;

    }


    .welcome-title {

        font-size:
            30px;

    }


    .welcome-description {

        padding:
            0 10px;

        font-size:
            12px;

    }


    .suggested-grid {

        grid-template-columns:
            1fr;

        gap:
            9px;

    }


    .suggested-card {

        min-height:
            90px;

    }


    .chat-container {

        border-radius:
            20px;

    }


    .chat-header {

        min-height:
            62px;

        padding:
            0 14px;

    }


    .chat-messages {

        min-height:
            330px;

        max-height:
            450px;

        padding:
            20px 14px;

    }


    .message-content {

        max-width:
            82%;

    }


    .chat-form {

        padding:
            12px;

    }


    .chat-disclaimer {

        padding:
            0 14px 13px;

    }


    .input-hint {

        font-size:
            8px;

    }


    .footer-container {

        min-height:
            52px;

        padding:
            10px 14px;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

        gap:
            4px;

    }

}


/* =========================================================
   24. VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .welcome-title {

        font-size:
            26px;

    }


    .welcome-badge {

        font-size:
            9px;

    }


    .chat-title {

        font-size:
            12px;

    }


    .message-bubble {

        font-size:
            12px;

    }


    .input-hint span:not(.hint-divider) {

        display:
            none;

    }

}


/* =========================================================
   END
   ========================================================= */
```