html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body.fullscreen-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

#twx-chat-floating {
    border: 1px solid #ccc;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 350px;
    height: 30vh;  /* make it 30% of height */
    position: fixed;
    bottom: 0;
    right: 0;
    background: #fff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#twx-chat-floating-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
    border-bottom: 1px solid #ddd;
    display: none; /* whilst loading initially */
}

.chat-toggle-button {
    /* background: #0073aa; */
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 3px;
    height: 40px;
}

#avatar-container {
    overflow: hidden;
    height: 700px;
    margin: 0;
    padding: 0;
    position: relative;
    flex-grow: 1;
}

#twx-chat-floating #avatar-container {
    height: 100% !important;
}

#renderCanvas {
    width: 100%;
    height: 100%;
    /*
    height: 100%;
    display: block; */
}

.fullscreen {
    position: fixed !important;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100% !important;
    background: white;
    z-index: 9999;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    overflow: hidden; /* Prevents scrollbars */
}

#avatar-start-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent background */
    color: white; /* Text color */
    font-size: 20px;
    padding: 10px 10px; /* horizontal padding for text */
    display: none;
    cursor: pointer;
}

#avatar-greeting-loadScreen {
    position: absolute;
    top: 0; /* Align to the top */
    left: 0; /* Align to the right */
    padding: 10px; /* Optional: adds some spacing */
    background: rgba(0, 0, 0, 0.5); /* Optional: semi-transparent background */
    color: white; /* Text color */
    font-size: 16px;
}

.hidden {
    display: none;
}

#avatar-renderCanvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

#twx-chat-watermark {
    text-align: right;
    font-size: 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 4px;
    color: #888;
    opacity: 0.8;
    background: rgba(0, 0, 0, 0.05);
}

#twx-chat-watermark a {
    text-decoration: none;
    color: inherit;
}

/* Floating conversation widget */
#avatar-conversation-widget {
    position: absolute;
    top: 85px;
    right: 50px;
    width: 500px;
    height: 85%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    /* display: flex; */
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
}

/* Fit image sources */
#avatar-conversation-widget .sources-container img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Need to override otherwise user agent chooses yellow bkg */
mark {
    background-color: f0f0f0;;
    color: black;
}

/* Floating Flashcards widget */
#avatar-flashcards-widget {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 500px;
    height: 90%;
    background: rgba(255, 255, 255, 0.0);
    /* background: rgba(255, 255, 255, 0.8); */
    display: none;
    gap: 12px; /* Space between cards */
    padding: 10px;
    flex-direction: column-reverse; /* So newest card appears at top */
    overflow-x: hidden;
    overflow-y: auto; /* Enable vertical scroll */
    pointer-events: auto; /* none to allow passthru clicks */
    z-index: 10000;
    scrollbar-width: none; /* Firefox */
}
#avatar-flashcards-widget::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
}

.flashcard {
    background: rgba(255, 255, 255, 0.8);
    color: #000;
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: fadeSlideIn 0.4s ease forwards;
    max-width: 100%;
}

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

/* Floating debug console widget */
#avatar-debug-console-widget {
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    /* width: 400px; */
    height: 90%;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 10000;
}

/* Scrollable content */
#avatar-debug-console-content {
    flex-grow: 1; /* Takes up available space */
    max-height: 80vh; /* Limit height */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Disallow horizontal scrolling */ 
    padding: 10px;
}

/* Style for individual console log lines */
.debug-console-line {
    padding: 5px;
    border-bottom: 1px solid #ccc; /* Optional: adds a separator */
    word-wrap: break-word;
    font-family: monospace;
}

#avatar-greeting-conversation {
    display: flex;
    padding: 10px;
    background: #f1f1f1;
    border-top: 1px solid #ccc;
    font-weight: bold;
}

/* Common Questions */
#avatar-conversation-widget .common-questions {
	margin-top: 10px;
}
#avatar-conversation-widget .common-questions h3 {
    font-size: 20px;
	margin-bottom: 10px;
    color: #fff;
}
#avatar-conversation-widget .common-questions ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px; /* space between buttons */
	justify-content: flex-start; /* Align items to the start (left) */
}
#avatar-conversation-widget .common-questions li {
	margin-bottom: 5px;
}
#avatar-conversation-widget .common-questions button {
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	border-radius: 5px;
    overflow: hidden; /* Hide overflow text */
	max-width: 100%;
}

#avatar-conversation-content {
    flex-grow: 1;
    overflow-y: auto;  /* allow vertical scroll */
    overflow-x: hidden; /* no horizontal scroll */
    padding: 10px;
}

#avatar-conversation-content .bot-message .bot-message-text .inline-source {
    display: inline-block;
    background-color: #007bff;     /* Bootstrap-like blue */
    color: white;
    padding: 6px 12px;
    margin: 4px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    transition: background-color 0.2s ease;    
}

#avatar-conversation-footer {
    display: flex;
    padding: 10px;
    background: #f1f1f1;
    border-top: 1px solid #ccc;
}      

#user-input {
    flex-grow: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#avatar-send-btn {
    margin-left: 5px;
    /* padding: 5px 10px; */
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#avatar-conversation-content .user-message {
    text-align: right;
    margin: 5px;
    padding: 5px;
    background: #e0e0e0;
    border-radius: 5px;
}

#avatar-conversation-content .bot-message {
	position: relative;
    text-align: left;
    margin: 5px;
    padding: 5px;
    background: #f0f0f0;
    border-radius: 5px;
    padding-bottom: 40px; 
}

/* Styles for agent content cards */
#avatar-conversation-content .content-card {
    background: #f8f9fa;
    border-left: 4px solid #007BFF;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 14px;
}

#avatar-conversation-content .content-card img {
    width: 100%;
    border-radius: 5px;
    margin-top: 5px;
}

#avatar-conversation-content .content-card ul {
    padding-left: 20px;
}

#avatar-conversation-content .content-card a {
    color: #007BFF;
    text-decoration: none;
}

/* Bot Message Action button styles */
#avatar-conversation-content .bot-message-action-button {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 10px;
    margin-right: 10px;
}

/* Bot Message Play/Pause buttons */ 
#avatar-conversation-content .bot-message-play-button, 
#avatar-conversation-content .bot-message-pause-button {
    position: absolute;
    right: 10px;
	bottom: 10px;
    display: inline-block;
    padding: 5px 10px;
    /* color: #fff; */
    /* border: none; */
    /* border-radius: 4px; */
    cursor: pointer;
    /* transition: background-color 0.3s ease; */
	background-color: white;
}

/* Control buttons */
.avatar-control-btn {
    cursor: pointer;
    position: absolute;
    padding: 2px 5px;
    display: none; /* Initially */
}

.avatar-control-btn img {
    width: 25px;
}

.fullscreen .avatar-control-btn {
    cursor: pointer;
    position: absolute;
    padding: 5px 10px;
    display: none; /* Initially */
}

.fullscreen .avatar-control-btn img {
    width: 32px;
}

#avatar-minimize, #avatar-maximize {
    top: 0;
    right: 39px;
}

.fullscreen #avatar-minimize, .fullscreen #avatar-maximize {
    top: 0;
    right: 50px;
}

#floating-avatar-minimize {
    top: 0;
    right: 0px;
}

#avatar-exit {
    top: 0;
    right: 0;
}

#avatar-microphone-on, #avatar-microphone-off {
    bottom: 0;
    left: 0;
}

#avatar-camera-on, #avatar-camera-off {
    bottom: 0;
    left: 25%;
    transform: translateX(-25%);
}

#avatar-play, #avatar-pause {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#avatar-conversation-on, #avatar-conversation-off {
    bottom: 0;
    right: 0;
}

#avatar-debug-console-on, #avatar-debug-console-off {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#avatar-status {
    padding: 5px;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    background-color: #ffffffff;
    color: #007BFF
}

#user-utterance {
    padding: 5px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    max-width: 85%;
    word-wrap: break-word;    /* For older browsers */
    overflow-wrap: break-word; /* Modern preferred property */
    white-space: normal;       /* Ensure text wraps normally */   
}

#twx-chat-floating #user-utterance {
    font-size: 15px;
}

#avatar-greeting-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: white; /* Text color */
    font-size: 30px;
    padding: 10px 10px; /* horizontal padding for text */
    display: none;
    cursor: pointer;
}

#twx-chat-floating #avatar-greeting-button {
    font-size: 20px !important;
    background: rgba(0, 0, 0, 0.25);
}


/* Floating Minimized */
#twx-chat-minimized {
    position: fixed;
    bottom: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    width: auto;
    /* display: flex; */
    display: none;
    flex-direction: column; 
    align-items: center;
    justify-content: space-between;
    z-index: 9998;
    cursor: pointer;
}

#twx-chat-minimized .chatbot-greeting {
    font-size: 18px;
    margin-right: 10px;
}

/* minimized floating avatar image */
#twx-chat-avatar-img-min {
    width: 80px;
    height: auto;
    border-radius: 50%;
    /* margin-bottom: 10px; */
}

/* Load screen */
#avatar-loadScreen {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: gray;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-position: center;
    background-size: cover;
    z-index: 9999;
    /* cursor: pointer; */
}

#avatar-loader {
    border: 16px solid #3498db38;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
    /* position: fixed; */
}

#avatar-loader-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    color: #000000;
    padding: 3px;
    background: #f0f0f0
}

/* Feedback styles */
#twxchat-container .feedback-container {
    border: 1px solid #ddd;
    padding: 20px;
    margin-top: 20px;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#twxchat-container .feedback-container .feedback-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    color: #333;
    resize: vertical;
}
#twxchat-container .feedback-container .feedback-input::placeholder {
    color: #999;
}
#twxchat-container .feedback-container .send-feedback-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    /* background-color: #5cb85c; */
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#twxchat-container .feedback-container .bot-message {
    margin-top: 10px;
    padding: 10px;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
    border-radius: 4px;
    font-size: 14px;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* For mobile devices (up to 767px wide) */
@media (max-width: 767px) {

    #twx-chat-floating {
        width: 150px;
        /* padding: 5px; */
        padding-top: 5px;
        padding-left: 5px;
        padding-right: 5px;

    }

    #avatar-conversation-widget {
        display: none;
        width: calc(100% - 100px); /* keep in between outer edge control buttons */
		height: calc(100% - 100px); /* keep above lower control buttons */
    }   

    #avatar-conversation-content {
        height: calc(100% - 175px); /* 70%; */
        -webkit-overflow-scrolling: touch;
        touch-action: auto; /* Helps with gesture recognition */
    }    

    #avatar-debug-console-widget {
        display: none;
        width: calc(100% - 90px);
		height: calc(100% - 90px);
    }   

    #avatar-flashcards-widget {
        display: none;
        width: calc(100% - 100px); /* keep in between outer edge control buttons */
		height: calc(100% - 100px); /* keep above lower control buttons */
    }   

    #avatar-greeting-button {
        font-size: 16px;
    }

    #avatar-greeting-loadScreen {
        top: auto;
        bottom: 0;
    }

    #twx-chat-watermark {
        display: none;
    }

}