.BcolAI {background-color:#cdffcd; animation: Avie 2s linear infinite;}
@keyframes Avie {  0% {  background-color: rgb(146,213,142); } 50% {  background-color: rgb(133,184,222); } 100% {  background-color: rgb(146,213,142);  }}

.AI_Copied{font-size:14px;position:absolute;right:70px; bottom:-3px;}
.AI_CopyClip{float:right;cursor:pointer;font-size:10px;color:blue;margin-top:5px;}
.AI_CopyClip:hover { background-color: #C7CDD0; color: black; }
.AI_EmailButton{ padding:1px 3px 0px 3px;border:1px solid #42647F;border-radius: 2px;display:inline-block;cursor:pointer;color:black;}
.AI_EmailButton:hover { background-color: #C7CDD0; color: black; }

.AI_EmailButton_Fixed{position:relative;top:3px; padding:1px 3px 0px 3px;border:1px solid #42647F;border-radius: 2px;display:inline-block;cursor:pointer;color:black;width:12px;height:15px;overflow:hidden;text-align:center;}
.AI_EmailButton_Fixed:hover { background-color: #C7CDD0; color: black; }

.AI_ClosedChat{float:left;width:94%;height:50px;border-radius:10px;margin-top:30px;text-align:center;font-size:15px; color:dimgrey;}
.AI_DocumentEditor{float:left;width:94%;height:50px;border-radius:10px;margin-top:70px;text-align:center;font-size:15px; color:dimgrey;}


.AI_Intro{background-color:#e6ffe6;border-radius:20px;position:absolute;top:20px;bottom:20px;left:20px;right:20px;}
.AI_Intro label{display:block;text-align:center;font-size:25px !important; color:olivedrab;padding-top:50px !important;}
.AI_Intro div{text-align:center;font-size:15px; color:dimgrey;}
.AI_Intro span{display:block;text-align:center;font-size:10px !important; color:dimgrey;}

.AI_historyWrapper{border:1px solid silver; max-height:500px;min-height:200px; margin-left:0px; margin-right:10px;overflow:hidden;padding:5px;border-radius:10px;}
.AI_history{ max-height:450px;min-height:200px; overflow:hidden;overflow-y:auto;padding-left:50px;}
.AI_Bubble{position:relative;border:1px solid silver;padding:0px 5px 2px 5px;border-radius: 5px;margin:5px;display:inline-block;clear:both;float:left;max-width:97%;}
.AI_Bubble_Reply{background-color:#e6ffe6;}
.AI_Bubble_Question{background-color:#e8f4f8;}

.AI_history span {font-size:10px;color:grey;line-height:22px}
.AI_Bubble i {position:absolute;margin-left:-50px;height:30px;width:30px;border:1px solid silver;border-radius: 30px;overflow:hidden;background-color:#e6ffe6;}
.AI_Image_Reply {width:25px;height:25px; margin-top:4px;margin-left:2px;}
.AI_Image_Question {height:30px;}
.AI_Bubble tag {font-weight:bold;}
.AI_Bubble label{position:absolute;margin-left:-50px;top:33px;font-size:10px !important;display:block !important; text-align:center !important; width:30px !important; }
.AI_TextArea{white-space:normal;font-size:12px;line-height:18px;overflow-x:auto;}


.AI_Bubble:after, .AI_Bubble:before {right: 100%;top: 30px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}
.AI_Bubble:after {border-color: rgba(136, 183, 213, 0);border-right-color:#e8f4f8;border-width: 4px;margin-top: -17px;}
.AI_Bubble:before {border-color: rgba(194, 225, 245, 0);border-right-color:silver;border-width: 6px;margin-top: -19px;}
.AI_AskBox{position:relative;}
.AI_TheMessage{font-size:12px !important;border-radius:10px;background-color:#e8f4f8;border:1px solid silver;margin:10px 0px 0px 10px;padding:10px 100px 10px 40px !important;width:97.5%;overflow:hidden;outline-color:green;resize: none;box-sizing: border-box;field-sizing:content;max-height:100px;overflow:hidden;overflow-y:auto;}
.AI_Submit{position:absolute;right:18px;top:17px;font-size:14px; padding:2px 5px 2px 5px !important;border:1px solid silver;border-radius: 5px;display:inline-block;cursor:pointer;}
.AI_Submit:hover { background-color: #C7CDD0;  color: black;}
.AI_PrivacyLabel{text-align:center;font-size:10px !important;color:cadetblue;}
.AI_UploadImage{position:absolute;height:24px;width:24px !important;border-radius:8px;border:1px solid silver;top:14px;left:9px;font-size:20px !important;padding-top:2px !important;}
.AI_UploadImage:hover{ background-color:#C7CDD0;color:black;cursor:pointer;}

.AI_Bubble table { font-family: Arial, Helvetica, sans-serif; border-collapse: collapse; width: 100%;}
.AI_Bubble table td, .AI_Bubble table th { border: 1px solid #ddd; padding: 8px; }
.AI_Bubble table tr:nth-child(even) { background-color: #cefad0; }
.AI_Bubble table tr:hover { background-color: #A2D39C;}
.AI_Bubble table th { padding-top: 12px; padding-bottom: 12px; text-align: left; background-color: #04AA6D; color: white;  }

.AI_Bubble a{ color: #1D7CF2; cursor: Pointer;}
.AI_Bubble a:hover {  color: #ff6600;  }

.Avie_Example{cursor:pointer;margin-left:22px;float:left;width:26%;height:40px;border-radius:3px;background-color: #cefad0;font-style:italic;font-size:12px !important;color:green !important;border:1px solid silver;padding:10px;}
.Avie_Example:hover{filter: brightness(85%);}






#avie_thinking_text {
    /* 1. Centering Logic */
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9999;
    /* 2. Visual Style */
    background-color: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 8px 25px;
    border-radius: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid #ddd;
    /* 3. Smooth transitions & Display */
    display: none;
    transition: opacity 0.3s ease;
    /* 4. THE ONE-LINE LIMITER */
    white-space: nowrap; /* Prevents text from wrapping to a second line */
    overflow: hidden; /* Hides any text that goes beyond the container */
    text-overflow: ellipsis; /* Adds '...' at the end if the text is too long */
    width: 350px; /* Limits the width so it doesn't stretch off-screen */
    height: 12px; /* Fixed height ensures the bubble stays stable */
    line-height: 12px; /* Vertically centers the text within the height */
}



.AI_Panels{display:flex; width:100%; gap:0px; align-items: flex-start;}
.AI_Twenty{width:20%;  height: 550px; overflow-y:auto; }
.AI_Eighty{width:80%; display: flex; flex-direction: column; position: relative;}





/* Sidebar Container */
#Avie_HistoryList {padding: 2px 5px; box-sizing: border-box;}

/* The Row */
.avie-history-row {
    display: flex;flex-direction: row;
    align-items: center;justify-content: space-between;
    padding: 4px 10px;margin-bottom: 1px;
    background: transparent; border-radius: 12px; cursor: pointer; transition: background 0.1s ease;min-height: 28px;
}

.avie-history-row:hover { background-color: #e9eef6;}

/* Title Area */
.avie-history-clickable {display: flex; align-items: center; flex: 1; min-width: 0;}

.avie-title-text { font-size: 13px; font-weight: 400; color: #3c4043;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;flex: 1;}

/* Right-hand Trigger Area */
.avie-options-trigger {
    flex-shrink: 0; width: 24px;height: 24px; display: flex; align-items: center; justify-content: center;
    font-size: 14px;  color: #5f6368; border-radius: 50%; opacity: 0;  transition: opacity 0.1s ease, background 0.2s;}

    /* If it is a pin, we want it partially visible even when not hovering */
    .avie-options-trigger.is-pinned { opacity: 0.5; font-size: 11px; }

/* Show fully on row hover */
.avie-history-row:hover .avie-options-trigger {opacity: 1;}

.avie-options-trigger:hover { background-color: #dadce0;}





.avie-context-menu {
    position: fixed;  z-index: 99999; background: white;border: 1px solid #dadce0;
    border-radius: 8px;  box-shadow: 0 4px 12px rgba(0,0,0,0.15); padding: 6px 0;min-width: 120px; margin: 0;}

.avie-context-menu div { padding: 8px 16px; font-size: 13px; cursor: pointer;}

.avie-context-menu div:hover { background: #f1f3f4;}




/* Container for the button to provide padding from the top and sides */
.avie-new-chat-container {padding: 10px 15px 5px 5px; width: 100%; box-sizing: border-box;}

/* The Button - Pill Shaped */
.avie-btn-new {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; background-color: #f0f4f9;  border: none; border-radius: 12px; padding: 10px 16px;
    width: 100%; font-size: 13px; font-weight: 500; color: #041e49;  cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s;}

.avie-btn-new:hover {  background-color: #dde3ea;  box-shadow: 0 1px 2px rgba(0,0,0,0.1);}

.avie-plus-icon { font-size: 18px; line-height: 1;color: #041e49; font-weight: 300;}




/* Smooth fade for the dark overlay */
@keyframes avieFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.avie-modal-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; 
    align-items: center;justify-content: center; z-index: 9999; border-radius: 12px;
    animation: avieFadeIn 0.2s ease-out forwards;
}

/* Animation Keyframes */
@keyframes avieFadePop {
    0% { opacity: 0;  transform: scale(0.95) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.avie-confirm-box {
    background: #ffffff;padding: 24px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.12);max-width: 260px;
    width: 90%;text-align: center;border: 1px solid #eee;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    animation: avieFadePop 0.2s ease-out forwards;}

.avie-confirm-box h4 { margin: 0 0 10px 0; font-size: 16px; color: #1f1f1f; }
.avie-confirm-box p { margin: 0 0 20px 0; font-size: 13px; color: #5f6368; line-height: 1.4; }
.avie-confirm-buttons { display: flex; gap: 10px; justify-content: center; }

.avie-btn {padding: 10px 20px;border-radius: 20px;border: none;font-size: 13px;font-weight: 600; cursor: pointer; transition: opacity 0.2s;}
.avie-btn:hover { opacity: 0.8; }
.avie-btn-cancel { background: #f1f3f4; color: #3c4043; }
.avie-btn-delete { background: #d93025; color: #ffffff; }

.avie-rename-input { width: 100%;padding: 10px;margin-bottom: 20px;border: 1px solid #dadce0;border-radius: 8px;font-size: 14px; box-sizing: border-box;}
.avie-rename-input:focus {outline: none;border-color: #007bff;box-shadow: 0 0 0 2px rgba(0,123,255,0.2);}




.avie-generated-image {
    max-width: 98.5%; width: auto; image-rendering: auto; height: auto; border-radius: 12px;
    margin: 15px 5px; display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.1); animation: avieFadeIn 0.5s ease-in;}

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