body{

    margin:0;

    background:#f6f4ef;

    font-family:Arial, Helvetica, sans-serif;

}

.chat-container{

    max-width:900px;

    margin:40px auto;

    background:white;

    border-radius:20px;

    box-shadow:0 10px 40px rgba(0,0,0,.12);

    overflow:hidden;

}

.header{

    background:#98a9aa;

    color:white;

    padding:30px;

    text-align:center;

}

.header h1{

    margin:0;

    font-size:42px;

}

.header p{

    margin-top:10px;

    opacity:.9;

}

#chat{

    padding:30px;

    height:500px;

    overflow-y:auto;

    background:#fafafa;

}

.bot {

    background: white;

    border-radius: 18px;

    padding: 18px;

    margin-bottom: 18px;

    max-width: 80%;

    border-left: 5px solid #ba9d1f;

    box-shadow: 0 3px 10px rgba(0,0,0,.06);

}

.typing {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 10px;
}

.typing .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ba9d1f;
    opacity: .3;
    animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing .dot:nth-child(2) {
    animation-delay: .2s;
}

.typing .dot:nth-child(3) {
    animation-delay: .4s;
}

@keyframes typing-bounce {
    0%, 60%, 100% {
        opacity: .3;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

.user {

    margin-left: auto;

    background: #98a9aa;

    color: white;

    border-radius: 18px;

    padding: 18px;

    margin-bottom: 18px;

    max-width: 80%;

    box-shadow: 0 3px 10px rgba(0,0,0,.08);

}

.input-area{

    display:flex;

    border-top:1px solid #ddd;

}

input{

    flex:1;

    padding:20px;

    border:none;

    font-size:16px;

}

button{

    width:140px;

    background:#ba9d1f;

    color:white;

    border:none;

    cursor:pointer;

    font-size:16px;

}
.quick-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.quick-actions button{
    width:auto;
    padding:10px 14px;
    border-radius:999px;
    background:#f6f4ef;
    color:#161e21;
    border:1px solid #ba9d1f;
}
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.quick-actions button {
    width: 100%;
    background: #f6f4ef;
    color: #161e21;
    border: 1px solid #ba9d1f;
    border-radius: 14px;
    padding: 14px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-actions button:hover {
    background: #ba9d1f;
    color: white;
    transform: translateY(-2px);
}