:root {

     --prompt-back: #f2f2f2;
     --prompt-color: #333333;

     --prompt-user-back: #4b8dfd;
     --prompt-user-color:#ffffff;

     --prompt-chat-back: #ffffff;
     --prompt-chat-color: #333333;
     
     --assistant-back:#f4f2ee;     
     --assistant-color:var(--color-dark);

     --prompt-border: var(--secondary-border);
     --prompt-border-radius: var(--radius);

     --prompt-button-back: var(--button-standard-back);
     --prompt-button-color: var(--button-standard-color);

     --assistant-icon-cyan: url(../core/images/assistant-cyan.png);
     --assistant-icon-white: url(../core/images/assistant-white.png);
}
#assistant-button {
     position:absolute;
     bottom:20px;
     right:14px;
     width:30px;
     height:30px;
     min-width:30px;
     max-width:30px;
     min-height:30px;
     max-height:30px;
     background-color:var(--header-back);
     color:var(--header-color);
     border-radius:var(--prompt-border-radius); 
     background-image:var(--assistant-icon-white);
     background-size:70%;
     cursor:pointer;
     z-index:1;
     opacity:0.5;     
     transition:var(--transition);
}
#assistant-button:hover {
     opacity:1;
}

#assistant-wrapper {
     background:var(--assistant-back);
     color:var(--assistant-color);
     border:var(--box-border);
     border-radius:var(--prompt-border-radius);
     position:absolute;
     right:8px;
     bottom:8px;
     width:300px;
     min-width:300px;
     max-width:300px;
     min-height:350px;
     height:350px;
     max-height:350px;
     z-index:2;
     display:flex;
     flex-direction:column;
     justify-content:start;
     align-items:center;
     transition: var(--transition);      
}

#assistant-title {
     display:flex;
     flex-direction:row;
     justify-content:space-between;
     align-items:center;
     font-size:var(--font-size-18);
     font-weight:bold;
     max-width:100%;
     min-width:100%;
     min-height:40px;
     max-height:40px;
     white-space:nowrap;
     padding:4px 8px;
     margin-bottom:4px;
     background:var(--header-back);
     color:var(--header-color);
}
#assistant-icon {
     background-image:var(--assistant-icon-white);
     width:30px;
     height:30px;
     min-width:30px;
     min-height:30px;
     flex:0;
     background-size:90%;
}
#assistant-title-text {
     display:flex;
     align-items:center;
     justify-content:start;
     flex:1;
     text-align:left;
     flex-direction:row;
     flex-wrap:nowrap;
     height:30px;
     min-height:30px;
     padding:0 8px;
     overflow:hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
}

#assistant-close, #assistant-adjust{
     height:30px;
     width:30px;
     max-width:30px;
     max-height:30px;
     min-width:30px;
     min-height:30px;
     background-image:url(../core/images/grid-delete-white.png);
}
#assistant-adjust {
     background-image:url(../core/images/expand-white.png);
     background-size:75%;
}
#assistant-wrapper.full #assistant-adjust {
     background-image:url(../core/images/collapse-white.png);
}
#assistant-adjust.full {
     background-image:url(../core/images/collapse-white.png);
}

#assistant-tags, #assistant-suggestions {
     display:flex;
     flex-direction:row;
     flex-wrap:wrap;
     width:calc(100% - 8px);
     gap:4px;
     margin:0 4px;
     padding:4px;
     /* border-bottom:var(--prompt-border); */
}
#assistant-tags.hide, #assistant-suggestions.hide {
     padding:0;margin:0;display:none;visibility: hidden;
     width:0;height:0;border:0;
}
.assistant-tag {
     height:var(--button-height-large);
     max-height:var(--button-height-large);
     min-height:var(--button-height-large);
     font-size:var(--font-size);
     text-align:center;
     display:inline-flex;
     text-align:center;
     justify-content:center;
     background-color:var(--button-neutral-back);
     color:var(--button-neutral-color);
     border:var(--button-neutral-border);
     border-radius:var(--prompt-border-radius);
     padding:0 8px;
}
.assistant-tag:hover {
     background-color:var(--primary-back-hover);
}
.assistant-tag.active {
     background-color:var(--primary-back-highlight);
}

#assistant-prompts {
     padding:8px;
     margin:0 4px;
     width:calc(100% - 8px);
     height:auto;
     overflow-y:auto;
     overflow-x:hidden;
     display:flex;
     flex-direction:column;
     gap:4px;
     flex:1;
     border:var(--prompt-border);
     border-radius:var(--prompt-border-radius);
     background-color:var(--prompt-back);
     color:var(--prompt-color);
     background-image:var(--assistant-icon-cyan);
     background-position:center;
     background-size:100px 100px;
}
/* #assistant-prompts.empty {
     background-image:var(--assistant-icon-cyan);
     background-position:center;
     background-size:100px 100px;
} */

#assistant-prompt-wrapper {
     display:flex;
     flex-direction:row;
     gap:0;
     padding:0;
     width:calc(100% - 8px);
     margin:4px;
     border:var(--prompt-border);
     border-radius:var(--prompt-border-radius);
}
#assistant-prompt {
     padding:0px;
     min-height:48px;
     line-height:20px;  
     width:calc(100% - 39px); 
     border-color:transparent;  
     resize:none;
     overflow-y:auto;
     box-sizing: border-box;     
     padding:4px;
}

#assistant-prompt-button {
     opacity:0.5;
     pointer-events:none;
     width:40px;
     min-width:40px;
     max-width:40px;
     height: 100%;
     min-height 100%;
     max-height:100%;
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:center;
     background-color:var(--prompt-button-back);
     color:var(--prompt-button-color)
     border-radius:var(--prompt-border-radius);
     border-top-left-radius:0;
     border-bottom-left-radius:0;
     background-image:url(../core/images/send-white.png);
     background-position:center;
     background-size:70%;
}
#assistant-prompt-button.active {
     opacity:1;
     pointer-events:all;
     cursor:pointer;
}

.assistant-prompt {
     width:100%;
     max-width:100%;
     min-width:100%;
     display:flex;
     flex-direction:column;
     justify-content:start;
     overflow: hidden; 
}
.assistant-prompt.assistant-prompt-user {
     padding-right:10%;
     align-items:start;
}
.assistant-prompt.assistant-prompt-chat {
     padding-left:10%;   
     align-items:end;
     margin-bottom:16px;
}
.assistant-prompt-icon {
     background-image:var(--assistant-icon-cyan);
     display:inline-block;
     width:20px;
     min-width:20px;
     max-width:20px;
     height:20px;
     min-height:20px;
     max-height:20px;
     margin-right:8px;
     margin-top:2px;
     float:left;
}
.assistant-prompt-text {
     padding:8px;
     border:var(--prompt-border);
     border-radius:var(--prompt-border-radius);
     width:fit-content;
     white-space: pre-line;
     text-align:left;
     user-select:text;
}
.assistant-prompt-user .assistant-prompt-text {
     background:var(--prompt-user-back);
     color:var(--prompt-user-color);
}
.assistant-prompt-chat .assistant-prompt-text {
     background:var(--prompt-chat-back);
     color:var(--prompt-chat-color);
     margin-left:10%;    
}
#assistant-loader {
     background:var(--box-back);
     color:var(--box-color);
     position:absolute;
     z-index:1;
     left:0;right:0;top:0;bottom:0;
     width:100%;height:100%;
     display:flex;
     flex-direction:column;
     gap:8px;
     align-items:center;
     justify-content:center;
}
#assistant-loader-image {
     background-image:var(--assistant-icon-cyan);
     background-position:center;
     width:40px;
     height:40px;
     min-width:40px;
     max-width:40px;
     min-height:40px;
     max-height:40px;
}
#assistant-loader-text {
     text-align:center;
     font-weight:normal;
     font-size:var(--font-size-14);
}