#chatbot-container {
    width: 100%;
    height: 70vh;
    border: 1px solid #ccc;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

#chatbot-messages {
    flex-grow: 1;
    overflow-y: auto;
}

.user-message, .bot-message {
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
}

.user-message {
    /* background-color: #e1f5fe; */
    color: black;
    text-align: right;
}

.bot-message {
    /* background-color: #fff9c4;*/
} 

#chatbot-input {
   margin-top: 10px;
}

#chatbot-input2 {
    margin-top: -5px;
 }

 /* Target poweredby div specifically within the chatbot container */
#chatbot-container #poweredby {
    width: 100%;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 5px;
    padding: 0 0px;
    box-sizing: border-box;
}

/* Style the span inside poweredby */
#chatbot-container #poweredby span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 14px;
    color: #666;
}

/* Style the SVG logo if present */
#chatbot-container #poweredby svg {
    height: 20px;
    width: auto;
    vertical-align: middle;
}

#chatbot-container #poweredby a {
    color: #666;
    text-decoration: underline;
    transition: color 0.2s ease;
    outline: 0; 
}

:focus {
    outline: 0;
    box-shadow:
      0 0 0 .2rem #fff,
      0 0 0 .35rem #069;
  }

#chatbot-container #poweredby a:hover {
    color: red;  /* Subtle darker shade on hover */
}

 .bot-message p {
    font-size: 14px;
    margin-bottom: 10px;
}

.bot-message ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 10px;
}

.bot-message li {
    font-size: 14px;
    margin-bottom: 5px;
}

#chatbot-send
{
margin-top: 10px;
}


@media (max-width: 768px) {
    /* Force full-screen view for mobile */
    #chatbot-container {
        z-index: 100000 !important;
        width: 100vw !important;  /* Full viewport width */
        height: 100vh !important; /* Full viewport height */
        top: 0 !important;        /* Position at the top */
        left: 0 !important;       /* Align to the left edge */
        right: 0 !important;      /* Align to the right edge */
        bottom: 0 !important;     /* Align to the bottom */
        border-radius: 0 !important; /* Remove border radius for full-screen look */
        padding: 0 !important;    /* Remove padding for full use of screen space */
    }

    #chatbot-header {
        border-radius: 0 !important; /* Remove header radius */
        padding: 15px !important;    /* Adjust padding for mobile */
    }

    #chatbot-messages {
        height: calc(100vh - 150px) !important; /* Dynamic height */
        padding: 15px !important; /* Add padding for readability */
    }

}