/*------------------------------------------------------------------------
# mod_chatgpt_assistant_pro - ChatGPT Assistant Pro
# ------------------------------------------------------------------------
# author    Christopher Mavros - Mavrosxristoforos.com
# copyright Copyright (C) 2008 Mavrosxristoforos.com. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
# Websites: https://mavrosxristoforos.com
# Technical Support:  Forum - https://mavrosxristoforos.com/support/forum
-------------------------------------------------------------------------*/

:root {
    --cap-button-size: 50px;
    --cap-button-bottom: 20px;
    --cap-button-side: 20px;
    --cap-interface-width: 40vw;
    --cap-interface-height: 75vh;
    --cap-interface-max-width: 478px;
    --cap-interface-bg: #fff;
    --cap-primary-color: #2979af;
    --cap-secondary-color: #3498db;
    --cap-sidebar-primary-bg: #f9f9f9;
    --cap-sidebar-secondary-bg: #ececec;
    --cap-header-color: #fff;
    --cap-header-hover-color: #f1f1f1;
    --cap-message-pre-bg: #0d0d0d;
    --cap-assistant-image-width: 50px;
    --cap-assistant-image-height: 50px;
}

/* Style for chat button */
.cap-button { width: var(--cap-button-size); height: var(--cap-button-size); border-radius: 50%; background-color: var(--primary, var(--cap-primary-color)); color: #fff; font-size: 24px; display: flex; justify-content: center; align-items: center; transition: all 300ms ease 0ms; cursor: pointer; }
.cap-button:hover { background-color: var(--cap-secondary-color); }
.cap-button-pos-floating-right { position: fixed; bottom: var(--cap-button-bottom); right: var(--cap-button-side); z-index: 9999; }
.cap-button-pos-floating-left { position: fixed; bottom: var(--cap-button-bottom); left: var(--cap-button-side); z-index: 9999; }

/* Style for chat interface */
.cap-module .cap_interface { display: none; position: fixed; bottom: calc(var(--cap-button-size) + var(--cap-button-bottom) + 10px); right: var(--cap-button-side); width: 100%; max-width: calc(95% - var(--cap-button-side)); height: var(--cap-interface-height); max-height: calc(80% - var(--cap-button-size) - var(--cap-button-bottom)); background-color: var(--cap-interface-bg); z-index: 99999; box-shadow: 0 0 10px rgba(55, 55, 55, 0.4); border-radius: .7em .7em .5em .5em; /* overflow: hidden; */ }
@media(min-width: 576px) {
    .cap-module .cap_interface { width: 75vw; }
}
@media(min-width: 768px) {
    .cap-module .cap_interface { width: 60vw; }
}
@media(min-width: 992px) {
    .cap-module .cap_interface { width: var(--cap-interface-width); }
    .cap-module .cap_interface { max-width: var(--cap-interface-max-width); }
}
.cap-button-pos-inline + .cap_interface { position: static; }
.cap-button-pos-floating-left + .cap_interface { right: initial; left: var(--cap-button-side); }
.expanded-interface { max-width: 96vw !important; width: calc(98vw - var(--cap-button-side) - var(--cap-button-side)) !important; height: calc(96% - var(--cap-button-bottom) - var(--cap-button-size)) !important; max-height: 96% !important; box-shadow: 0px 0px 0px 5000px rgba(0,0,0,0.7) !important; }
.cap_interface.cap-open { transition: all 300ms ease 0ms; }

/* Style for chat interface header */
.cap_interface_header { background-color: var(--primary, var(--cap-primary-color)); color: var(--cap-header-color); padding: 1.2em; display: flex; gap: 1em; border-radius: .5em .5em 0 0; }
.cap_interface_header h5 { margin: 0; font-size: 20px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.cap_interface_header a, .cap_interface_header a i { color: var(--cap-header-color); font-size: 16px; }
.cap_interface_header a:hover { color: var(--cap-header-hover-color); }
.cgap-flex-end { justify-self: end; align-self: end; margin-left: auto; }
.cgap-header-buttons { display: flex; }
.cgap-header-buttons a { margin: 0 0.25em; }

/* Style for conversation container */
.cap_interface_wrapper { display: flex; flex-flow: column; height: 100% !important; }
.cap_wrapper .cap-main-area { flex: 1 0 0; display: flex; gap: 1em; position: relative; overflow: hidden; }
.cap_wrapper .helper-column { border-right: 1px solid #ccc; position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: var(--cap-sidebar-primary-bg); visibility: hidden; overflow-x: hidden; z-index: 100; }
.cap_wrapper .helper-column-contents { width: 260px; padding: 1em 1.5em 1em 1em; }
.cap_wrapper .conversation-container { overflow-y: auto; padding: 1em; display: flex; flex-flow: column; gap: 1em; width: 100%; }
.cap_wrapper.cap-menu-item .conversation-container { border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

/* Style for individual chat messages */
.cap_wrapper .conversation-container .message_wrapper { /*margin-bottom: 10px;*/ display: flex; gap: 0.5em; }
.cap_wrapper .conversation-container .message { padding: 0.4em 0.4em 0.5em 0.6em; border-radius: 5px; /* float: left; */ max-width: 100% !important; }
.cap_wrapper .conversation-container .streamed-message { overflow: hidden; word-break: break-word; }
.cap_wrapper .conversation-container .message pre { background-color: var(--cap-message-pre-bg); max-width: 100% !important; overflow-x: auto; color: #fff; padding: 1em; margin: 0.5em; }
.cap_wrapper .conversation-container .message_wrapper::after { /* display: block; clear: both; content: ""; */ }
.cap_wrapper .conversation-container .sent-message { background-color: var(--primary, var(--cap-primary-color)); color: #fff; /* float: right; */ margin-left: auto; }
.cap_wrapper .conversation-container .received-message, .cap_wrapper .conversation-container .pending-message { background-color: #f1f1f1; color: #333; /* float: left; */ }
.cap_wrapper .conversation-container .error-message { background-color: #c62828; color: #fff; /* float: left; */ }
.cap_wrapper .conversation-container .warning-message { background-color: #ff5722; color: #fff; }
.cap_wrapper .conversation-container .message p, .cap_wrapper .conversation-container .message ul, .cap_wrapper .conversation-container .message ol { margin-bottom: 0.5rem; }
.cap_wrapper .conversation-container .message p:first-child:last-child { margin: 0; }
.cap_wrapper .conversation-container .message a[href^="mailto:"] { color: inherit; }
.cap_wrapper .conversation-container .file-message { font-size: small; font-style: italic; margin-bottom: -1em; background-color: var(--secondary, var(--cap-primary-color)); }
.cap_wrapper .conversation-container .file-message a.btn-delete-file { color: #fff; margin-left: .5em; }
.cap_wrapper .conversation-container .suggested-message { background-color: #888; opacity: .8; cursor: pointer; margin-bottom: -.5em; }
.cap_wrapper .conversation-container .fade-in-message { display: none; }

.cap_wrapper .conversation-container .message_wrapper .assistant-img { position: relative; width: var(--cap-assistant-image-width); height: var(--cap-assistant-image-height); border-radius: 2em; border: 1px solid #CCC; overflow: hidden; flex: 0 0 50px; }
.cap_wrapper .conversation-container .message_wrapper .assistant-img img { max-width: 100%; height: 100%; }

/* Style for input */
.cap_wrapper .input-container { padding: 10px; border-top: 1px solid #ccc; display: flex; gap: 0.5em 0; }
.cap_wrapper .input-container input { margin: 0; width: auto; flex: 1 0 max-content; max-width: inherit !important; box-sizing: border-box; padding: 0.75em 0.25em; text-indent: 0.25em; border-top-right-radius: 0.25em !important; border-bottom-right-radius: 0.25em !important; }
.cap_wrapper .input-container .btn-send { width: 100%; grid-column-start: 1; grid-column-end: 4; border-radius: 0.25em !important; }
@media(min-width:500px) {
    .cap_wrapper .input-container { display: flex; flex-flow: row; gap: 0; }
    .cap_wrapper .input-container input { margin: 0; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; }
    .cap_wrapper .input-container .btn-send { border-top-left-radius: 0px !important; border-bottom-left-radius: 0px !important; width: inherit; flex-basis: min-content; }
}
.cap-assistant-selection { width: 50px; aspect-ratio: 1 / 1; border-radius: 2em; border: 1px solid #CCC; overflow: hidden; position: relative; }
@media(min-width:500px) {
    .cap-assistant-selection { height: 100%; aspect-ratio: 1.3 / 1; max-width: 50px; flex: 0 0 50px; }
}
.cap-assistant-selection img { height: 100%; position: absolute; /* object-fit: cover; */ cursor: pointer; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: initial !important; }
.cap_wrapper .input-container .btn-upload { border-radius: 0 !important; }
@media(max-width:400px) {
    .cap_wrapper .input-container input { flex: 1 0 0; }
    .cap_wrapper .input-container .btn-upload + input { flex: 1 0 100%; width: 100%; border-radius: .25em !important; }
    .cap_wrapper .input-container .btn-upload { flex: 1 0 max-content; width: 100%; border-radius: 0 .25em .25em 0 !important; }
}

/* Style for helper column */
.btn-sidebar { border-radius: .5rem; display: block; padding: 0.25em 0.25em 0.25em 0.5em; text-decoration: none; }
.btn-sidebar:hover { background-color: var(--cap-sidebar-secondary-bg); }
.new-conversation-wrapper { margin-bottom: 1em; }
.cap-recent-title { font-size: .8em; }
.cap-row-placeholder { display: none; }
.helper-column a { color: var(--primary, var(--cap-primary-color)); }
.helper-column a:hover { text-decoration: none; }

/* Style for modal */
.cap-modal-wrapper { z-index: 101; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; }
.cap-modal-bg { background: rgba(0, 0, 0, 0.3); cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.cap-modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: #fff; border-radius: 1em; box-shadow: 0px 0px 10px #222; padding: 1.5em; display: flex; flex-flow: column; }
.cap-modal-top { top: 0; transform: translate(-50%, 0); }
.cap-modal-right { left: auto; right: 0; transform: translate(0, -50%); }
.cap-modal-bottom { top: auto; bottom: 0; transform: translate(-50%, 0); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.cap-modal-left { left: 0; transform: translate(0, -50%); }
.cap-modal-upload-style { height: auto; width: 95%; max-height: 80%; }
.cap-modal-header { display: flex; justify-content: space-between; margin-bottom: 1em; }
.btn-close-modal { cursor: pointer; }
.cap-modal-content { overflow-y: auto; overflow-x: hidden; width: 100%; height: 100%; }

/* Custom Scrollbar */
.cap-scrollbar-container::-webkit-scrollbar { width: 10px; }
.cap-scrollbar-container::-webkit-scrollbar-track { border-radius: 8px; /*background-color: #e7e7e7; border: 1px solid #cacaca; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);*/ }
.cap-scrollbar-container::-webkit-scrollbar-thumb { border-radius: 8px; background-color: #cccccc; }

/* Style for interfaces */
.cap-interfaces-wrapper { display: none !important; }
a.assistant-link { display: flex; height: 5em; margin: 0 0.5em 0.5em; padding: 0.3em; border: 1px solid #CCC; border-radius: 1em; margin-bottom: 0.5em; gap: 0.5em; text-decoration: none; }
a.assistant-link:hover { text-decoration: none; }
.assistant.active .assistant-link, .assistant:hover .assistant-link { background: #f9f9f9; border: 1px solid var(--primary, var(--cap-primary-color)); }
.assistant img.assistant-large-img { margin: 0; height: 100%; aspect-ratio: 1 / 1; border-radius: 1em; }
@media(max-width: 350px) {
    .assistant img.assistant-large-img { display: none; }
}
.assistant-link .assistant-name, .assistant-link .assistant-description { font-size: 1em; line-height: 1.3em; }
.assistant-link .assistant-name { margin: 0; }
.assistant-link .assistant-description { text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; color: var(--body-color, #0b0b0b); }

/* Menu item */
.cap-menu-item-assistant { display: flex; height: 4em; gap: 1em; }
.cap-menu-item .cap_interface { height: 88vh; }
.cap-menu-item .cap_interface_header { flex-wrap: wrap; }
.cap-menu-item .cap_interface_header a { display: flex; align-items: center; font-size: 1.5em; text-decoration: none; }
.cap-menu-item .cap_interface_header .cap-flex-break { border-top: 1px solid var(--cap-header-color); }
.cap-menu-item .cap_interface_header h5 { line-height: 1.4em; }

/* Common styles for component views */
.cgap-toolbar { display: flex; flex-direction: row-reverse; gap: 0.5em; }

/* Common styles */
.cap-hidden { display: none; }
.cap-flex-break { flex-basis: 100%; height: 0px; }

/* Anti-spam */
.cgap-antispam { position: absolute; left: -99999px; }

/* Knowledge Base */
.line-clamp-3 { text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; }

/* Based on Dot typing from https://github.com/nzbin/three-dots. Thanks!!! */
.cap-dot-typing-wrapper { width: 21px; height: 20px; display: flex; align-items: center; justify-content: center; }
.cap-dot-typing { position: relative; left: -9999px; width: 5px; height: 5px; border-radius: 5px; background-color: #333; color: #333; box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; animation: ca-dot-typing 3.75s infinite linear; }
@keyframes ca-dot-typing {
  0% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
  5.555% { box-shadow: 9991px -5px 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
  11.111% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
  16.667% { box-shadow: 9991px 0 0 0 #333, 9999px -5px 0 0 #333, 10007px 0 0 0 #333; }
  22.222% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
  27.777% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px -5px 0 0 #333; }
  33.333% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }

  38.887% { box-shadow: 9991px -5px 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
  44.444% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
  50% { box-shadow: 9991px 0 0 0 #333, 9999px -5px 0 0 #333, 10007px 0 0 0 #333; }
  55.555% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
  61.107% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px -5px 0 0 #333; }
  66.667% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }

  100% { box-shadow: 9991px 0 0 0 #333, 9999px 0 0 0 #333, 10007px 0 0 0 #333; }
}