/* ==========================================================
   Madhuri AI
   Version : 3.0
   Module 6.1
   Developer : Aryan Rai
========================================================== */

/* ==========================================================
   CSS Variables
========================================================== */

:root{

    --primary:#4c51bf;
    --primary-dark:#3d42a9;

    --background:#f7f7f8;

    --user:#4c51bf;
    --assistant:#ffffff;

    --text:#222;
    --text-light:#666;

    --border:#e6e6e6;

    --shadow:

        0 6px 18px rgba(0,0,0,.08);

    --radius:18px;

    --transition:.25s;

}

/* ==========================================================
   Reset
========================================================== */

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

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/* ==========================================================
   Base
========================================================== */

html{

    height:100%;

    scroll-behavior:smooth;

}

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    overflow:hidden;

    font-family:

        "Segoe UI",

        Tahoma,

        Geneva,

        Verdana,

        sans-serif;

    background:

        linear-gradient(

            135deg,

            #667eea,

            #764ba2

        );

    color:var(--text);

}

/* ==========================================================
   Links
========================================================== */

a{

    color:inherit;

    text-decoration:none;

}

/* ==========================================================
   Images
========================================================== */

img{

    display:block;

    max-width:100%;

}

/* ==========================================================
   Buttons
========================================================== */

button{

    font-family:inherit;

}

/* ==========================================================
   Inputs
========================================================== */

input{

    font-family:inherit;

}
/* ==========================================================
   Chat Container
========================================================== */

.chat-container{

    width:min(1200px,96vw);

    height:94vh;

    max-height:920px;

    display:flex;

    flex-direction:column;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:

        0 12px 40px rgba(0,0,0,.18);

}

/* ==========================================================
   Header
========================================================== */

.chat-header{

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    position:relative;

    background:var(--primary);

    flex-shrink:0;

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

}

.header-logo{

    height:56px;

    user-select:none;

    pointer-events:none;

}

/* ==========================================================
   New Chat Button
========================================================== */

#newChatBtn{

    position:absolute;

    left:20px;

    top:50%;

    transform:translateY(-50%);

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:#fff;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

    box-shadow:

        0 3px 10px rgba(0,0,0,.12);

}

#newChatBtn:hover{

    transform:

        translateY(-50%)

        translateY(-1px);

    background:#f3f4ff;

}

#newChatBtn:active{

    transform:

        translateY(-50%)

        scale(.98);

}

/* ==========================================================
   Chat Area
========================================================== */

#chatbox{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    background:var(--background);

    padding:24px;

    scroll-behavior:smooth;

}

/* ==========================================================
   Welcome Line
========================================================== */

#welcomeLine{

    margin-top:40px;

    text-align:center;

    font-size:24px;

    font-weight:500;

    color:#555;

    animation:fadeWelcome .5s ease;

}

/* ==========================================================
   Input Area
========================================================== */

.chat-input{

    height:72px;

    display:flex;

    align-items:center;

    border-top:1px solid var(--border);

    background:#fafafa;

    flex-shrink:0;

}

.chat-input input{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    padding:18px;

    font-size:15px;

    color:#222;

}

.chat-input input::placeholder{

    color:#999;

}

.chat-input button{

    width:72px;

    height:100%;

    border:none;

    background:var(--primary);

    color:#fff;

    cursor:pointer;

    font-size:22px;

    transition:var(--transition);

}

.chat-input button:hover{

    background:var(--primary-dark);

}

/* ==========================================================
   Footer
========================================================== */

.footer{

    margin-top:14px;

    color:#fff;

    font-size:14px;

    user-select:none;

    opacity:.95;

}

/* ==========================================================
   Messages
========================================================== */

.message{

    display:flex;

    width:100%;

    margin:14px 0;

    animation:fadeIn .25s ease;

}

.message.you{

    justify-content:flex-end;

}

.message.madhuri{

    justify-content:flex-start;

}

/* ==========================================================
   Chat Bubble
========================================================== */

.bubble{

    position:relative;

    max-width:75%;

    padding:14px 18px;

    border-radius:var(--radius);

    font-size:15px;

    line-height:1.55;

    word-wrap:break-word;

    overflow-wrap:break-word;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.bubble:hover{

    transform:translateY(-1px);

}

/* User Bubble */

.you .bubble{

    background:var(--user);

    color:#fff;

    border-bottom-right-radius:4px;

}

/* Madhuri Bubble */

.madhuri .bubble{

    background:var(--assistant);

    color:var(--text);

    border:1px solid var(--border);

    border-bottom-left-radius:4px;

}

/* ==========================================================
   Typing Indicator
========================================================== */

.typing{

    display:flex;

    align-items:center;

    gap:5px;

    padding:2px 0;

}

.dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#888;

    animation:typingBounce 1.4s infinite;

}

.dot:nth-child(2){

    animation-delay:.2s;

}

.dot:nth-child(3){

    animation-delay:.4s;

}

@keyframes typingBounce{

    0%{

        opacity:.3;

        transform:translateY(0);

    }

    30%{

        opacity:1;

        transform:translateY(-5px);

    }

    60%{

        opacity:.4;

        transform:translateY(0);

    }

    100%{

        opacity:.3;

        transform:translateY(0);

    }

}
/* ==========================================================
   Markdown Typography
========================================================== */

/* Paragraphs */

.bubble p{

    margin:0;

    line-height:1.5;

}

.bubble p + p{

    margin-top:10px;

}

/* Headings */

.bubble h1{

    font-size:30px;

}

.bubble h2{

    font-size:26px;

}

.bubble h3{

    font-size:22px;

}

.bubble h4{

    font-size:19px;

}

.bubble h5{

    font-size:17px;

}

.bubble h6{

    font-size:15px;

}

.bubble h1,
.bubble h2,
.bubble h3,
.bubble h4,
.bubble h5,
.bubble h6{

    margin:18px 0 10px;

    font-weight:700;

    line-height:1.3;

    color:#222;

}

/* Lists */

.bubble ul,
.bubble ol{

    margin:10px 0;

    padding-left:24px;

}

.bubble li{

    margin:6px 0;

    line-height:1.5;

}

/* Blockquotes */

.bubble blockquote{

    margin:16px 0;

    padding:10px 16px;

    border-left:4px solid var(--primary);

    background:#f8f9fc;

    color:#555;

    font-style:italic;

}

/* Horizontal Rule */

.bubble hr{

    border:none;

    border-top:1px solid var(--border);

    margin:20px 0;

}

/* Links */

.bubble a{

    color:var(--primary);

    text-decoration:none;

    font-weight:600;

}

.bubble a:hover{

    text-decoration:underline;

}

/* Images */

.bubble img{

    display:block;

    max-width:100%;

    border-radius:10px;

    margin:14px auto;

}

/* Tables */

.bubble table{

    width:100%;

    border-collapse:collapse;

    margin:16px 0;

    font-size:14px;

}

.bubble th{

    background:#f3f4f6;

    font-weight:600;

}

.bubble th,
.bubble td{

    padding:10px 12px;

    border:1px solid #ddd;

    text-align:left;

}

/* Inline Code */

.bubble code{

    background:#f3f4f6;

    color:#d63384;

    padding:2px 6px;

    border-radius:6px;

    font-family:

        Consolas,

        monospace;

    font-size:.92em;

}
/* ==========================================================
   Code Blocks
========================================================== */

/* Block Code */

.bubble pre{

    position:relative;

    margin:18px 0;

    padding:18px;

    overflow-x:auto;

    background:#1e1e1e;

    color:#f8f8f2;

    border-radius:12px;

    border:1px solid #2f2f2f;

    font-size:14px;

    line-height:1.6;

    font-family:

        Consolas,

        "Courier New",

        monospace;

}

/* Remove default background from code inside pre */

.bubble pre code{

    background:none;

    color:inherit;

    padding:0;

    border-radius:0;

    font-size:inherit;

}

/* Inline Code */

.bubble :not(pre)>code{

    background:#eef2ff;

    color:#4c51bf;

    padding:2px 6px;

    border-radius:6px;

    font-size:.92em;

    font-family:

        Consolas,

        monospace;

}

/* Scrollbar */

.bubble pre::-webkit-scrollbar{

    height:8px;

}

.bubble pre::-webkit-scrollbar-track{

    background:#2b2b2b;

    border-radius:8px;

}

.bubble pre::-webkit-scrollbar-thumb{

    background:#666;

    border-radius:8px;

}

.bubble pre::-webkit-scrollbar-thumb:hover{

    background:#888;

}

/* Selection */

.bubble pre::selection{

    background:#264f78;

}

.bubble pre code::selection{

    background:#264f78;

}

/* Code Language Badge */

.code-language{

    position:absolute;

    top:10px;

    right:12px;

    padding:3px 8px;

    border-radius:6px;

    background:#343541;

    color:#fff;

    font-size:11px;

    font-weight:600;

    text-transform:uppercase;

    user-select:none;

}

/* Copy Button */

.copy-btn{

    position:absolute;

    top:10px;

    left:12px;

    padding:5px 10px;

    border:none;

    border-radius:6px;

    background:#343541;

    color:#fff;

    cursor:pointer;

    font-size:12px;

    transition:.25s;

}

.copy-btn:hover{

    background:#4c51bf;

}
/* ==========================================================
   Scrollbar
========================================================== */

#chatbox::-webkit-scrollbar{

    width:10px;

}

#chatbox::-webkit-scrollbar-track{

    background:#f1f1f1;

}

#chatbox::-webkit-scrollbar-thumb{

    background:#b5b5b5;

    border-radius:10px;

}

#chatbox::-webkit-scrollbar-thumb:hover{

    background:#909090;

}

/* Firefox */

#chatbox{

    scrollbar-width:thin;

    scrollbar-color:#b5b5b5 #f1f1f1;

}

/* ==========================================================
   Focus Accessibility
========================================================== */

button:focus,
input:focus{

    outline:none;

}

button:focus-visible,
input:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:2px;

}

/* ==========================================================
   Animations
========================================================== */

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

@keyframes fadeWelcome{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================================================
   Laptop
========================================================== */

@media (max-width:1200px){

    .chat-container{

        width:96vw;

    }

}

/* ==========================================================
   Tablet
========================================================== */

@media (max-width:900px){

    .chat-container{

        width:98vw;

        height:96vh;

        border-radius:16px;

    }

    .header-logo{

        height:48px;

    }

    .message.you .bubble{

        max-width:82%;

    }

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width:600px){

    body{

        padding:0;

    }

    .chat-container{

        width:100vw;

        height:100vh;

        border-radius:0;

    }

    .chat-header{

        height:70px;

    }

    .header-logo{

        height:42px;

    }

    #newChatBtn{

        left:10px;

        padding:8px 12px;

        font-size:13px;

    }

    #chatbox{

        padding:16px;

    }

    .bubble{

        font-size:14px;

        padding:14px 16px;

    }

    .message.you .bubble{

        max-width:90%;

    }

    .chat-input{

        height:66px;

    }

    .chat-input input{

        padding:14px;

        font-size:15px;

    }

    .chat-input button{

        width:62px;

        font-size:20px;

    }

    .footer{

        display:none;

    }

}

/* ==========================================================
   Small Phones
========================================================== */

@media (max-width:400px){

    .header-logo{

        height:36px;

    }

    #welcomeLine{

        font-size:20px;

    }

    .bubble{

        font-size:13px;

    }

}

/* ==========================================================
   Reduced Motion
========================================================== */

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

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}
/* ===========================
   Install Banner
=========================== */

.install-banner{

    position:fixed;

    bottom:20px;

    left:50%;

    transform:translateX(-50%);

    width:min(92%,420px);

    background:#ffffff;

    border-radius:16px;

    box-shadow:0 10px 30px rgba(0,0,0,.18);

    display:none;

    justify-content:space-between;

    align-items:center;

    padding:15px;

    z-index:9999;

    animation:slideUp .35s ease;

}

.install-info{

    display:flex;

    align-items:center;

    gap:12px;

}

.install-logo{

    width:48px;

    height:48px;

    border-radius:12px;

}

.install-title{

    font-weight:700;

    color:#222;

}

.install-subtitle{

    font-size:13px;

    color:#666;

    margin-top:2px;

}

.install-buttons{

    display:flex;

    gap:8px;

}

#laterBtn{

    border:none;

    background:none;

    color:#777;

    cursor:pointer;

    padding:8px 10px;

}

#installBtn{

    background:#4c51bf;

    color:white;

    border:none;

    padding:8px 18px;

    border-radius:8px;

    cursor:pointer;

    transition:.3s;

}

#installBtn:hover{

    background:#373aa8;

}

@keyframes slideUp{

from{

opacity:0;

transform:translate(-50%,40px);

}

to{

opacity:1;

transform:translate(-50%,0);

}

}