:root {
    --black: #000000;
    --white: #FFFFFF;
    --dark-green: #e1c63c; /* main color */
    --light-green: #034ea2; /* button color border and text color */
    --light-gray: #EFEFEF; /* button bg prolly? */
    --soft-gray: #f4f7f9; /* chat/message bubble */
    --gray-border: gray;
}

/* .message-human .message-bubble:first-child {
    display: none !important;
} */
.message-list .message-human:nth-child(2) {
  display: none !important;
}

.v-field-label--floating {
  display: none !important;
}

.message-text {
    color: var(--black) !important;
    font-family: sans-serif !important;
}

.message-list-container {
    background-color: var(--white) !important;
}

.bg-red {
    background-color: var(--dark-green) !important
}

/* shadow removed */
.message-bot .message-bubble {
    background-color: var(--dark-green) !important;
    border-bottom-left-radius: 4px;
    box-shadow: none !important;
}

.message-human .message-bubble {
    box-shadow: none !important;
    background-color: var(--dark-green) !important
}

.message-agent .message-bubble {
    box-shadow: none !important;
    background-color: var(--soft-gray) !important;
}
/* shadow removed */

.message-bot .message-bubble {
    background-color: var(--soft-gray) !important;
    border-bottom-left-radius: 4px;
}

.message-human .message-bubble {
    background-color: var(--dark-green) !important
}

.message-agent .message-bubble {
    background-color: var(--soft-gray) !important;
}

button.min-button {
    background-color: var(--light-gray) !important;
}

.message-bubble .message-text {
    font-size: 0.875em !important;
}

.message-bubble {
    border-radius: 12px !important;
    padding: 4px 4px !important;
}

.message-bubble-row-human > .message-text {
    color: var(--white) !important;
}

.v-card-actions .v-btn {
    margin: 4px 4px !important;
    font-size: 0.85em !important;
    min-width: 44px !important;
    color: var(--light-green) !important;
    background-color: var(--white) !important;
    border: 1px solid var(--dark-green) !important; 
    box-shadow: none !important;
    
}

div.v-text-field input:focus {
    outline: none; /* Remove default focus outline */
    border-color: var(--light-green); /* Example focus border color */
}

ul, ol {
    margin-bottom: 16px !important;
    margin-left: 24px !important;
}

.message-text p:last-child {
    margin-bottom: 0px !important;
}

/* Hide the original text */
.toolbar-title h2 {
  font-size: 0 !important;
  white-space: nowrap;
}

/* "T" - blue */
.toolbar-title h2::before {
  content: "T";
  font-size: 2rem;
  color: var(--light-green);
  font-weight: bold;
}

/* "rans-" - red, then "A" - blue, then "sia" - red */
/* We can only get 2 pseudo elements so we cheat with a shadow trick */
.toolbar-title h2::after {
  content: "rans-Asia";
  font-size: 2rem;
  color: #ed1c24;
  font-weight: bold;
}

/* some part of header is being overlapped by the conversation  */
.v-toolbar {
    z-index: 100;
}

/* header height */
.v-toolbar__content {
    height: 90px !important;
}

/* add that circle thing in the logo */
.toolbar-image {
    border-radius: 40px;
    width: 50px;
    object-fit: cover;
    background-color: var(--light-green);

    margin-left: 20px !important;
    max-height: 100%;
}

.v-toolbar-title {
    font-size: 1rem;
}

.v-row+.v-row {
    margin-top: 0px !important;
}

.message-date-bot {
    padding-left: 50px !important;
}


.v-toolbar-title.hidden-xs-and-down.toolbar-title {
    margin-left: 0px !important;
}

/* when input is in focus, change the button color as per sir ken */
/* .v-input:focus-within + .input-button {
    background-color: var(--dark-green) !important;
} */

/* remove shadow */
.elevation-3 {
    box-shadow: none !important;
}

/* center stuffs */

.toolbar-content {
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: 16px !important;
    padding-left: 0px !important;
}

/* change input */

.toolbar-content > .v-toolbar__content {
    width: 90%;
    border-radius: 14px;
    /* margin-left: 20px; */
    margin-bottom: 24px;
    height: 3rem !important; /* change the percent in .message-list-container.toolbar-height-sm  everytime u change this */

    border: 2px solid var(--gray-border) !important;
}

/* extend the conversation area from 100% to 94% to contemplate the inputbox increased height*/
/* everytime we change the height of .toolbar-content > .v-toolbar__content we also change the percentage in this one (2% per 20px siguro) */
/* note: original was 100% - 112px */
.message-list-container.toolbar-height-sm {
    height: calc(99% - 110px) !important;
}

.message-list-container.toolbar-height-md {
    height: calc(100% - 110px) !important;
    top: 80px !important;
}

/* try to select the btn and change color as per sir ken*/
.v-toolbar__content:has(.v-input:focus-within) .input-button i {
    color: var(--dark-green) !important;
}

/* adjust the cards gap dun sa buttons part */
.response-card {
    margin-top: 14px !important; 
    margin-left: 12px !important;
}

/* fit the text input inside the div */
.v-input {
    padding-left: 20px !important;
}

/* ***************************************** */
/*                EFFECTS                    */
/* ***************************************** */

/* fade in effect for chat bubbles */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message-bubble-row-bot, .message-bubble-row-human {
    animation: fadeIn 0.3s ease-in-out;
}

/* effect for buttons */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    50% {
        opacity: 0.5;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.v-card-actions {
    animation: bounceIn 0.4s ease-out;
    animation-delay: 0.3s; 
    animation-fill-mode: forwards;
}

.v-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Soft shadow effect */
}

@media (max-width:768px) {
    .chat-container {
        width:100vw !important; height:100dvh !important; max-height:100dvh !important;
        bottom:0 !important; right:0 !important; border-radius:0 !important;
    }
    .chat-container.minimized { transform: translateY(100%) !important; }
    .minimize-button.active { top:20px !important; bottom:auto !important; }
}

@media (max-width:480px){
    .minimize-button { width:55px !important; height:55px !important; }
    .notification-container { bottom:80px !important; right:15px !important; }
}