/* modal.css */
.signature-editor-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
 
.signature-editor-modal-content {
    position: relative;
    background-color: #fff;
    margin: 2% auto;
    padding: 0px;

    width: 90%;
    max-width: 1200px;
    height: 90vh;
    border-radius: 8px;
}
 
.signature-editor-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.signature-editor-close {
    font-size: 28px;
    font-weight: bold;
    border: none;
    background: none;
    cursor: pointer;
}

.signature-editor-close:hover {
    color: #666;
}

.signature-editor-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.signature-editor-error {
    text-align: center;
    padding: 20px;
    color: #dc3545;
}




#header {
    padding: 5px 10px;
    border-bottom: 1px solid #e1e3e1;
    position: relative;
}

.email-input-container {
    border: none;
    border-radius: 4px;
    padding: 4px;
    min-height: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    background: white;
}

.email-token {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    height: 25px;
    border-radius: 5px;
    padding: 4px 12px;
    margin: 2px 4px 2px 0;
    font-size: 13px;
    color: #475569;
    transition: all 0.15s ease;
}

.email-token:hover {
    background: #e2e8f0;
    border-color: #94a3b8;
}

.email-token span {
    margin-right: 8px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-text {
    outline: none;
    border-radius: 3px;
    padding: 2px 4px;
    margin: -2px -4px;
    transition: all 0.15s ease;
}

.email-text:focus {
    background: #dbeafe;
    box-shadow: 0 0 0 2px #3b82f6;
    color: #1e40af;
}
.email-token .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.15s ease;
}
.token-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.token-delete:hover {
    background: #e2e8f0;
    color: #334155;
}

#toTokenContainer {
    width: 100%;
    position: relative;
}
#ccTokenContainer{
    width: 100%;
    position: relative;
}
#bccTokenContainer{
    width: 100%;
    position: relative;
}

.email-input {
    border: none;
    outline: none;
    flex-grow: 1;
    padding: 4px;
}

#header #close-button{
    background: transparent;
    color: #000;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 4px;
    position: absolute;
    right: 10px;
    top: 10px;
}
.recipient-actions{
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: 0.2s ease;
}
.cc-row{
    font-size: 14px;
    overflow: hidden;
}
.bcc-row{
    font-size: 14px;
    overflow: hidden;
}
.cc-row, .bcc-row .email-token{

    font-size: 13px;
}
.cc-row, .bcc-row .email-input-container{
    min-height: none;
    padding: 0;
}
#header:focus-within .recipient-actions{
    opacity: 1;
}
.recipient-actions button{
    border: none;
    background: transparent;
    color: #444746;
}
.recipient-actions button:hover{
    text-decoration: underline;
    cursor: pointer;
}
#header button img {
    height: 14px;
}
#close-button img{
   height: 14px;
    position: absolute;
    top: 0;
    right: 0;
    
}
.textbox {
    position: relative;
    border: 1px solid #e1e3e1;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    overflow: hidden; /* Keeps inner elements within rounded corners */
    container-type: inline-size;
}

/* Make the editor take full height of its container */
#editor-container {
    display: flex;
    flex-direction: column;

}

/* Ensure the main editable area has proper borders */
#editormain {
    flex-grow: 1; /* Takes up available space */
    border-bottom: 1px solid #e1e3e1;
    min-height: 200px; /* Give it a minimum height */
    padding: 15px;
    background-color: #fff;
    overflow: hidden;
}


#editor::before{
  content: "Enter your text here...";
  color: #888 ;
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: none;
    
}
#editor:focus::before,
#editor:not(:empty)::before {
  opacity: 0; /* Hides the placeholder smoothly */
}

#editor:focus{
    outline: none;
}
#editormain a{
    color: #2563eb;
    text-decoration: underline;
}

#file-preview-container {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
}

#file-preview {
    max-width: 100%;
    max-height: 100px;
    display: block;
    margin: 0 auto;
}

#file-name {
    margin-top: 5px;
    font-size: 12px;
    color: #666;    
    display: block !important;

    text-align: left;
}
#remove-file {
    background: transparent;
    border: none;
    color: #d9534f;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
}
#file-name-text {
    flex: 1;
}

#file-size {
    margin-left: 5px;
}
.fileInput{
    width: 145px;
    height: 18px;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
	align-items: center;
	justify-content: center;
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 0;
}
.fileInput img{
    height: 15px;
    margin-left: 5px;
}
#toolbartop {
    display: flex;
    position: relative;
	align-items: center;
	justify-content: center;
    border-bottom: 1px solid #e1e3e1;
    height: 40px;
} 
#toolbartop > div {
    flex-grow: 0; /* Prevent columns from growing */
    flex-shrink: 0; /* Prevent columns from shrinking */
}
/* Redo and Undo */
.undo-controls{
    width: 30%;
    display: flex; 
    align-items: center;
}
.gbtn-container{
      width: 33%;
    display: flex; /* Use flex to align items and justify content */
    align-items: center;
    
    justify-content: center;
    border-right: 1px solid #ccc;
}
.sig-container{
      width: 32.5%;
}
.undo-button{
      background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 50 47.1"><g><g id="Layer_1"><path d="M8.2,14.4c1.1.4,2.2.8,3.3,1.2.4.1.8.3,1.1.4.8.3.9.9.2,1.5-1.1.9-2.2,1.7-3.3,2.6-1.8,1.4-3.6,2.8-5.4,4.2,0,0-.2.1-.2.2-.7.5-1.3.3-1.5-.6-.2-1.1-.5-2.1-.7-3.2-.5-2.6-1.1-5.2-1.6-7.7,0,0,0-.2,0-.2-.1-.8.3-1.2,1.1-.9,1,.3,1.9.7,2.9,1,.4.1.8.3,1.2.4.7-1.1,1.3-2.2,2-3.3C11,4.6,16.3,1.3,22.9.3c10.1-1.6,20,3.5,24.6,12.6,5.7,11.3,1.5,25.3-9.7,31.2-8.3,4.4-16.5,3.9-24.5-1.1-.6-.4-.9-.9-.8-1.6,0-.6.5-1.1,1.1-1.3.6-.2,1.1,0,1.5.3,2.3,1.5,4.8,2.6,7.5,3.1,6.8,1.2,12.9-.5,18-5.2,4.2-4,6.3-8.9,6.4-14.7,0-10.1-7.5-18.8-17.5-20.2-8.5-1.2-16.8,2.9-20.9,10.5-.1.2-.2.4-.3.6Z"/></g></g></svg>');
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center;
}
.redo-button{
      background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 50 47.1"><g><g id="Layer_1"><path d="M41.8,14.4c-1.1.4-2.2.8-3.3,1.2-.4.1-.8.3-1.1.4-.8.3-.9.9-.2,1.5,1.1.9,2.2,1.7,3.3,2.6,1.8,1.4,3.6,2.8,5.4,4.2,0,0,.2.1.2.2.7.5,1.3.3,1.5-.6.2-1.1.5-2.1.7-3.2.5-2.6,1.1-5.2,1.6-7.7,0,0,0-.2,0-.2.1-.8-.3-1.2-1.1-.9-1,.3-1.9.7-2.9,1-.4.1-.8.3-1.2.4-.7-1.1-1.3-2.2-2-3.3C39,4.6,33.7,1.3,27.1.3,17-1.3,7.2,3.8,2.5,12.9c-5.7,11.3-1.5,25.3,9.7,31.2,8.3,4.4,16.5,3.9,24.5-1.1.6-.4.9-.9.8-1.6,0-.6-.5-1.1-1.1-1.3-.6-.2-1.1,0-1.5.3-2.3,1.5-4.8,2.6-7.5,3.1-6.8,1.2-12.9-.5-18-5.2-4.2-4-6.3-8.9-6.4-14.7,0-10.1,7.5-18.8,17.5-20.2,8.5-1.2,16.8,2.9,20.9,10.5.1.2.2.4.3.6Z"/></g></g></svg>');
    background-repeat: no-repeat;
    background-size: 14px;
    background-position: center;
}
.undo-button,
.redo-button {
    padding: 0;
    height: 30px;
    width: 30px;
    margin-right: 8px; 
    border: none;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s, opacity 0.2s;

}

.undo-button:hover,
.redo-button:hover {
    background-color: #f0f0f0;
}

.undo-button:disabled,
.redo-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Signature */
.signature-button{
    border: none;
    background-color: #fff;
    height: 40px;
    padding: 5px 20px;
    width: 100%;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 10px;
    text-align: left;
    position: relative;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 1px 0 0 #e1e3e1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}    
.signature-button:after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
  transform: translateY(-75%) rotate(45deg);
}
.sig-container {
    position: relative;
}

.signature-dropdown-container, .signature-dropdown-container-compose {
    display: none;
}
.signature-dropdown-container.active, .signature-dropdown-container-compose.active{
    display: block;
}
.signature-dropdown {
    position: absolute;
    right: 0;
    max-height: 180px;
    background: #ffff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    z-index: 1;
    margin-top: 0px;
    overflow-y: auto;
    width: 32.5%;
}

.signatures-container {
    padding: 2px 0;
}

.signature-item {
    padding: 8px 15px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s;
    margin: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    position: relative;
}

.signature-item::after{
    content: '';
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 80%;
    background-color: #eee;
    left: 10%;
}
.signature-name{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.signature-item:last-child::after {
    display: none;
}
.signature-item:hover {
    background-color: #f5f5f5;
}

.signature-active {
    width: 5px;
    height: 5px;
    background-color: #4CAF50;
    border-radius: 50%;
    display: inline-block;
    margin-left: 8px;
	position: absolute;
	left: 5px;
}

.no-signatures {
    padding: 16px;
    text-align: center;
    color: #666;
    margin-top: 20px;
}
.no-signatures{
    font-size: 13px;
}
.no-signatures a {
    color: #2196F3;
    text-decoration: none;
    margin-top: 8px;
    display: inline-block;
}

.link-style-button{
    margin: 10px auto auto auto;
    font-size: 12px;
    padding: 5px 5px 5px 15px;
    background-color: #fff;
    color: #0f0f0f;
    border: 1px solid #ccc;   
    cursor: pointer;
    display: flex;
    align-items: center;
    opacity: 0.8;
}
.link-style-button::after{
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 24 24" xmlns:v="https://vecta.io/nano"><path d="M5.828 7l2.536 2.536L6.95 10.95 2 6l4.95-4.95 1.414 1.414L5.828 5H13a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H5.828z"/></svg>');
    height: 20px;
    width: 20px;
    background-size: 13px;
    background-position: center center; 
    background-repeat: no-repeat;
    
}
.link-style-button:hover{
    opacity: 1;
}
.no-signatures a:hover {
    text-decoration: underline;
}


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

.signature-dropdown-container.active, .signature-dropdown-container-compose.active {
  animation: dropdown-fade-in 0.2s ease-out;
} 

.default-signature{
    text-transform: capitalize;
    letter-spacing: 0.5px;
    margin-left: 5px;
    color: #aaa;
}
.signature-active{
    margin-left: auto;
}
/* GPT AND GEMINI */
.gptbtn {
    width: 100%;
    display: flex; /* Use flex to align items and justify content */
    align-items: center;
   justify-content: center;
    align-items: center;
    padding-left: 30px; /* Add 10px offset */
    height: 30px;
    margin: auto 15px auto 5px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 7px;
    background-color: rgba(16, 163, 127, 1);
    cursor: pointer;
    position: relative;
}
.gptbtn::before{
            content: '';
            background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 31 31.5"><g><g id="Layer_1"><path d="M30.4,15c.3.8.6,1.6.6,2.4,0,.8,0,1.7-.1,2.5-.2.8-.5,1.6-.9,2.3-.3.5-.6.9-1,1.4-.4.4-.8.8-1.2,1.1-.5.3-.9.6-1.4.8-.5.2-1,.4-1.6.5-.3.8-.6,1.5-1.1,2.2-.5.7-1.1,1.3-1.8,1.8-.7.5-1.4.9-2.2,1.1-.8.3-1.6.4-2.5.4-.6,0-1.1,0-1.7-.2-.5-.1-1.1-.3-1.6-.5s-1-.5-1.4-.8c-.4-.3-.9-.7-1.2-1.1-.8.2-1.7.2-2.5.1-.8,0-1.6-.3-2.4-.6-.8-.3-1.5-.8-2.1-1.4s-1.1-1.2-1.6-1.9c-.3-.5-.5-1-.7-1.5s-.3-1.1-.3-1.6c0-.6,0-1.1,0-1.7,0-.6.2-1.1.4-1.6-.6-.6-1-1.3-1.4-2.1-.3-.8-.6-1.6-.6-2.4,0-.8,0-1.7.1-2.5.2-.8.5-1.6.9-2.3.3-.5.6-.9,1-1.4.4-.4.8-.8,1.2-1.1s.9-.6,1.4-.8c.5-.2,1-.4,1.6-.5.3-.8.6-1.5,1.1-2.2.5-.7,1.1-1.3,1.8-1.8.7-.5,1.4-.9,2.2-1.1C12.2.1,13,0,13.9,0c.6,0,1.1,0,1.7.2.5.1,1.1.3,1.6.5.5.2,1,.5,1.4.8.4.3.9.7,1.2,1.1.8-.2,1.7-.2,2.5-.1s1.6.3,2.4.6c.8.3,1.5.8,2.1,1.4.6.6,1.1,1.2,1.6,1.9.3.5.5,1,.7,1.5.2.5.3,1.1.3,1.6,0,.6,0,1.1,0,1.7,0,.6-.2,1.1-.4,1.6.6.6,1,1.3,1.4,2.1h0ZM19.4,29c.7-.3,1.4-.7,1.9-1.3s1-1.2,1.3-1.9c.3-.7.4-1.5.4-2.3v-7.3s0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0l-2.6-1.5v8.8c0,0,0,.2,0,.3,0,0,0,.2-.1.2s0,.2-.2.2c0,0-.1.1-.2.2l-6.3,3.6c0,0-.1,0-.2.1.3.2.5.4.8.6.3.2.6.3.9.4.3.1.7.2,1,.3.3,0,.7,0,1,0,.8,0,1.5-.2,2.3-.5h0ZM4.5,24c.4.7.9,1.3,1.5,1.7.6.5,1.3.8,2.1,1s1.5.3,2.3.2,1.5-.4,2.2-.7l6.3-3.7h0s0,0,0,0c0,0,0,0,0,0v-3.1l-7.6,4.4c0,0-.2,0-.2.1,0,0-.2,0-.3,0s-.2,0-.3,0c0,0-.2,0-.2-.1l-6.3-3.6c0,0-.1,0-.2-.1,0,.3,0,.7,0,1s0,.7,0,1c0,.3.2.7.3,1,.1.3.3.6.4.9h0ZM2.9,10.3c-.4.7-.6,1.4-.7,2.2s0,1.5.2,2.3c.2.7.5,1.4,1,2.1.5.6,1.1,1.1,1.7,1.5l6.3,3.7s0,0,0,0h0s0,0,0,0c0,0,0,0,0,0l2.7-1.5-7.6-4.4c0,0-.1-.1-.2-.2,0,0-.1-.1-.2-.2,0,0,0-.2-.1-.2,0,0,0-.2,0-.3v-7.4c-.3.1-.6.3-.9.4-.3.2-.6.4-.8.6-.3.2-.5.5-.7.7-.2.3-.4.5-.6.8h0ZM24.6,15.4c0,0,.2,0,.2.2,0,0,.1.1.2.2,0,0,0,.2.1.2,0,0,0,.2,0,.3v7.4c1.1-.4,2-1.1,2.7-2,.7-.9,1.1-2,1.2-3.1s-.1-2.2-.6-3.2-1.3-1.8-2.3-2.4l-6.3-3.7s0,0,0,0h0s0,0,0,0c0,0,0,0,0,0l-2.6,1.5,7.6,4.4h0ZM27.2,11.4h0s0,0,0,0ZM27.2,11.4c.2-1.1,0-2.2-.4-3.3-.4-1-1.1-1.9-2.1-2.6-.9-.6-2-1-3.1-1.1-1.1,0-2.2.2-3.2.8l-6.3,3.7s0,0,0,0h0s0,0,0,0c0,0,0,0,0,0v3.1l7.6-4.4c0,0,.2,0,.2-.1,0,0,.2,0,.3,0s.2,0,.3,0c0,0,.2,0,.2.1l6.3,3.6c0,0,.1,0,.2.1ZM10.7,8c0,0,0-.2,0-.3,0,0,0-.2.1-.2,0,0,0-.1.2-.2s.1-.1.2-.2l6.3-3.6c0,0,.1,0,.2-.1-.9-.7-1.9-1.2-3-1.3-1.1-.1-2.2,0-3.3.5-1,.5-1.9,1.2-2.5,2.2-.6.9-.9,2-.9,3.2v7.3s0,0,0,0c0,0,0,0,0,0s0,0,0,0c0,0,0,0,0,0l2.6,1.5v-8.8ZM12.1,17.7l3.4,2,3.4-2v-3.9l-3.4-2-3.4,2v3.9Z" fill="rgba(255, 255, 255, 1)"/></g></g></svg>');
            background-size: 20px;
            background-position: center center; 
            background-repeat: no-repeat;
            position: absolute;
            left: 20px;
            height: 100%;
            width: 30px;
}
.gptbtn.loading{
	padding-left: 0;
	padding-right: 0;
}
.gptbtn.loading::before{
    display: none
}
.geminibtn.loading{
	padding-left: 0;
	padding-right: 0;
}
.geminibtn.loading::after{
    display: none
}
.deepseekbtn.loading{
	padding-left: 0;
	padding-right: 0;
}
.deepseekbtn.loading::after{
    display: none
}


#geminiBtn span, #gptBtn span, #deepseekBtn span {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #fff;
    margin: 8px 3px 0 3px;
    border-radius: 50%; /* Makes circles */
    animation: bounceDots 2.2s infinite; /* Animation plays once and stops */
}

#geminiBtn span:nth-child(2),
#gptBtn span:nth-child(2),
#deepseekBtn span:nth-child(2) {
    animation-delay: 0.2s; /* Delay for the second dot */
}

#geminiBtn span:nth-child(3),
#gptBtn span:nth-child(3),
#deepseekBtn span:nth-child(3) {
    animation-delay: 0.4s; /* Delay for the third dot */
}

#geminiBtnCompose span, #gptBtnCompose span, #deepseekBtnCompose span {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #fff;
    margin: 8px 3px 0 3px;
    border-radius: 50%; /* Makes circles */
    animation: bounceDots 2.2s infinite; /* Animation plays once and stops */
}

#geminiBtnCompose span:nth-child(2),
#gptBtnCompose span:nth-child(2),
#deepseekBtnCompose span:nth-child(2) {
    animation-delay: 0.2s; /* Delay for the second dot */
}

#geminiBtnCompose span:nth-child(3),
#gptBtnCompose span:nth-child(3),
#deepseekBtnCompose span:nth-child(3) {
    animation-delay: 0.4s; /* Delay for the third dot */
}

@keyframes bounceDots {
    0%, 100% {
        transform: translateY(0);
    }
    20%, 50% {
        transform: translateY(-10px);
    }
    50%, 80% {
        transform: translateY(0);
    }
}


.geminibtn {
    display: flex;
	position: relative;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, #b76990, #497fe4);
    background-size: 110%;
    color: #fff;
    height: 30px;
    border: none; /* Remove default button border */
    border-radius: 7px;
    letter-spacing: 2px;
    font-size: 13px; 
    letter-spacing: 1px;
    cursor: pointer;
	width: 100%;
    margin: auto 15px auto 5px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    border: 1px solid #ccc;
}

.geminibtn::after{
    content: '';
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 354.46 354.46" fill="%23fff" xmlns:v="https://vecta.io/nano"><path d="M257.9 132.91l-30.56 6.56c-14.46 3.39-28.67 7.49-42.06 14.17-17.85 8.91-29.92 22.94-37.55 41.12-8.25 19.65-12.36 40.42-16.47 61.18-.32 1.63-.66 3.26-1.61 4.93l-2.57-13.04c-3.69-17.68-7.65-35.27-14.47-52.11-8.81-21.76-24.02-36.94-45.77-45.73-19.42-7.84-39.8-12.02-60.23-16.03-1.54-.3-3.08-.63-4.7-1.6l12.63-2.53c17.81-3.65 35.51-7.65 52.44-14.52 21.75-8.82 36.89-24.04 45.67-45.81 8.15-20.19 12.32-41.39 16.51-62.61.15-.75.4-1.47.87-3.14l6.11 29.01c3.54 15.37 7.73 30.52 14.85 44.74 8.88 17.72 22.84 29.72 40.87 37.33 19.42 8.19 39.94 12.31 60.49 16.37l5.05 1.06c.16.04.27.33.51.63zm13 216.49c-1.88-8.45-3.25-17-5.77-25.21-2.54-8.3-5.51-16.64-9.56-24.28-6.51-12.28-17.94-18.94-30.83-22.8-11.43-3.42-23.11-6-34.96-9.03 5.67-1.17 11.32-2.03 16.79-3.54 8.73-2.41 17.56-4.74 25.97-8.05 15.96-6.27 25.2-18.9 29.91-34.88 3.02-10.24 5.14-20.74 7.66-31.13l.96-4.08c2.13 9.48 3.59 18.3 6.18 26.78 2.47 8.08 5.43 16.17 9.39 23.61 6.6 12.41 18.19 19 31.19 22.87 10.23 3.05 20.73 5.15 31.11 7.67l4.06.95c-9.45 2.13-18.27 3.59-26.74 6.17-8.08 2.47-16.17 5.42-23.61 9.38-12.28 6.54-18.93 17.95-22.77 30.86-3.4 11.44-6.01 23.12-8.96 34.69z"/></svg>');
    background-size: 20px;
    background-position: center center; 
    background-repeat: no-repeat;
    height: 100%;
    width: 30px;
	position: absolute;
	right: 20px;
}


@keyframes bounceDots {
    0%, 100% {
        transform: translateY(0);
    }
    20%, 50% {
        transform: translateY(-10px);
    }
    50%, 80% {
        transform: translateY(0);
    }
}

.geminibtn img{
    height: 20px;
    margin-left: 10px
}
.gptbtn img{
    height: 30px;
    margin-left: 10px
}


.deepseekbtn {
    width: 100%;
    display: flex; /* Use flex to align items and justify content */
    align-items: center;
   justify-content: center;
    align-items: center;
    padding-left: 30px; /* Add 10px offset */
    height: 30px;
    margin: auto 15px auto 5px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    border: 1px solid #4d6bfe;
    border-radius: 7px;
    background-color: #4d6bfe;
    cursor: pointer;
    position: relative;
}
.deepseekbtn::before{
            content: '';
            background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 57.86 43.38"><defs><style>.cls-1{fill:%23fff;}</style></defs><path id="path" class="cls-1" d="M57.26,3.65c-.61-.31-.88.27-1.24.57-.12.09-.22.22-.33.33-.89.98-1.94,1.62-3.31,1.54-1.99-.11-3.7.53-5.21,2.08-.32-1.92-1.39-3.06-3.01-3.8-.85-.38-1.7-.76-2.3-1.59-.41-.6-.53-1.26-.73-1.91-.14-.39-.27-.79-.71-.86-.48-.07-.67.34-.86.68-.75,1.41-1.05,2.96-1.02,4.52.07,3.53,1.53,6.34,4.43,8.34.33.22.42.45.31.79-.19.69-.43,1.35-.64,2.04-.13.44-.33.54-.79.35-1.59-.68-2.97-1.68-4.19-2.9-2.06-2.03-3.93-4.28-6.26-6.04-.54-.41-1.09-.79-1.66-1.15-2.37-2.35.32-4.28.94-4.51.65-.24.22-1.06-1.88-1.06-2.1.01-4.02.73-6.48,1.69-.35.14-.73.25-1.12.33-2.22-.43-4.53-.52-6.95-.25-4.54.52-8.17,2.71-10.84,6.44C.2,13.77-.55,18.88.37,24.2c.97,5.61,3.78,10.25,8.1,13.88,4.48,3.77,9.64,5.61,15.52,5.26,3.58-.21,7.56-.7,12.04-4.57,1.14.57,2.32.8,4.29.98,1.52.14,2.98-.08,4.12-.32,1.77-.38,1.65-2.05,1-2.36-5.19-2.46-4.05-1.46-5.09-2.27,2.64-3.19,6.62-6.49,8.18-17.2.12-.85.02-1.39,0-2.08-.01-.42.08-.58.55-.63,1.31-.15,2.57-.51,3.73-1.16,3.36-1.88,4.72-4.95,5.04-8.64.05-.57,0-1.15-.59-1.44ZM27.92,36.84c-5.03-4.03-7.47-5.36-8.48-5.3-.94.06-.78,1.15-.57,1.87.22.71.5,1.2.9,1.82.27.41.46,1.02-.28,1.48-1.62,1.02-4.44-.35-4.57-.41-3.28-1.97-6.02-4.57-7.96-8.13-1.86-3.42-2.95-7.09-3.13-11-.04-.95.23-1.28,1.15-1.46,1.22-.22,2.47-.27,3.69-.09,5.14.76,9.51,3.1,13.18,6.81,2.1,2.11,3.68,4.64,5.31,7.1,1.74,2.62,3.6,5.11,5.98,7.16.84.72,1.51,1.26,2.15,1.66-1.93.22-5.16.27-7.37-1.51ZM30.34,21.03c0-.42.33-.76.74-.76.1,0,.18.02.26.05.1.04.2.1.27.18.13.14.21.33.21.53,0,.42-.33.75-.75.75s-.73-.33-.73-.75ZM37.83,24.94c-.48.21-.96.38-1.42.4-.72.03-1.5-.26-1.92-.62-.66-.57-1.13-.88-1.33-1.87-.09-.42-.04-1.07.04-1.44.17-.8-.02-1.32-.58-1.79-.45-.38-1.03-.49-1.66-.49-.23,0-.45-.1-.61-.19-.27-.13-.48-.46-.28-.88.07-.13.39-.45.47-.51.85-.5,1.84-.34,2.76.04.85.35,1.49,1,2.41,1.92.95,1.11,1.12,1.41,1.65,2.24.43.65.81,1.32,1.08,2.09.16.47-.05.87-.61,1.1Z"/></svg>');
            background-size: 20px;
            background-position: center center; 
            background-repeat: no-repeat;
            position: absolute;
            left: 20px;
            height: 100%;
            width: 30px;
}
.deepseekbtn.loading{
	padding-left: 0;
	padding-right: 0;
}
.deepseekbtn.loading::before{
    display: none
}

/* Auto Toggle Switch */
.auto-toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    width: 4%;
}

.auto-toggle-switch {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 10px;
}

.auto-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.auto-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.auto-toggle-slider:before {
    position: absolute;
    content: "";
    height: 6px;
    width: 6px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.auto-toggle-switch input:checked + .auto-toggle-slider {
    background-color: #4CAF50;
}

.auto-toggle-switch input:checked + .auto-toggle-slider:before {
    transform: translateX(8px);
}

.auto-toggle-label {
    font-size: 10px;
    color: #aaa;
}



#toolbar {
    padding: 10px;
    display: flex;
    gap: 10px;
    position: relative;
    flex-wrap: wrap;
    background-color: #fff;
    margin-top: auto; /* Pushes toolbar to bottom */
}
#toolbar > div {
    display: contents; /* Treats the inner divs as though they don't exist */
}
.toolbar-button {
    cursor: pointer;
    border: 1px solid #fff;
    background: #fff;
    padding: 4px;
    border-radius: 4px;
    display: flex;
	align-items: center;
	justify-content: center;
    height: 24px;
    width: 24px;
    margin: auto;
    padding: 0;
    background-repeat:  no-repeat;
    background-position: center;
}
.toolbar-button.bold{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M12.308 8c1.309-.768 2.462-2.052 2.462-3.599C14.769 2.006 13.026 0 10.462 0H1.231v16h9.231c2.565 0 4.308-2.006 4.308-4.401-.001-1.547-1.154-2.831-2.462-3.599zm-4.101 6h-3V9h3c1.49 0 2.5 1.103 2.5 2.526 0 1.424-1.01 2.474-2.5 2.474zm0-7h-3V2h3c1.49 0 2.5 1.103 2.5 2.526C10.707 5.95 9.697 7 8.207 7z" fill="%23323232"/></svg>');
    background-size: 15px;
}

.toolbar-button.italic{
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="" d="M16,496H496V16H16ZM48,48H464V464H48Z" class="ci-primary"/><polygon fill="" points="200 143.998 244.442 143.998 202.442 367.998 152 367.998 152 399.998 312 399.998 312 367.998 267.558 367.998 309.558 143.998 360 143.998 360 111.998 200 111.998 200 143.998" class="ci-primary"/></svg>');
    background-size: 20px;
}

.toolbar-button.underline{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512"><g><g id="Layer_1"><g id="Layer_1-2" data-name="Layer_1"><g><path d="M55.05,39.04l204.36.98s.09,26.97.07,23.85c0,0,.57,4.59-5.96,4.68-9.48.13-47.77.14-47.77.14-7.32.5-7.48,6.68-7.48,14.47,0,11.31-.07,22.26-.09,33.57-.05,23.5-.16,47.03.7,70.51,1.24,33.97,2.78,67.95,5.24,101.85,1.36,18.78,6.8,36.76,18.97,51.8,14.77,18.26,35.11,26.8,57.5,30.14,25.14,3.75,42.4.8,66.18-7.97,36.13-13.33,58.18-40.5,63.68-77.43,5.25-35.3,5.35-76.28,5.54-106.19.11-16.95.36-39.79-.22-57.42-.33-9.96.37-20.88-.67-33.7-.66-8.21.45-22.81-10.43-23.02s-39.64-.29-51.1-.18c-4.48.04-5.74-1.73-5.9-6.26-.21-6.12-.14-11.85-.2-19.81h143.46c.12,5.39.3,14.55.2,20.14-.08,4.6.31,5.84-4.5,5.92-11.58.19-10.36-.16-21.22.11-8.25.22-11.22,4.72-11.97,19.34-.73,28.34-.02,53.08-.3,78.56.19,39.82-.24,64.25-3.14,100.35-2.11,26.82-2.73,34.81-7.65,50.32-7.76,25.05-24.01,43.96-45.51,59.39-21.65,15.54-46.26,24.18-72.36,28.38-37.54,6.04-75.01,5.87-112.11-3.41-15.6-3.9-30.19-10.31-43.93-18.72-26.75-16.39-40.81-41.24-47.55-71-4.89-21.6-5.75-43.59-5.88-65.6-.25-40.18.07-80.36-.29-120.54-.11-12.63-.21-25.64-.33-38.29-.11-11.42-1.05-14.8-8.5-14.88l-46.36-.2c-2.22-.11-4.24-2.05-4.28-5.88-.07-7.01-.19-24.02-.19-24.02l-.03.02Z"/><path d="M256.45,438.92h206.53c9.97,0,12.36,2.39,12.38,12.35.01,5,.12,10.01-.06,15-.22,5.84-3.24,8.75-9.09,9.08-1.5.09-3,.03-4.5.03H50.15c-2,0-4.02.06-5.99-.19-4.35-.54-7.2-3.1-7.4-7.46-.32-6.98-.33-14-.03-20.99.2-4.68,3.46-7.45,8.2-7.79,1.66-.12,3.33-.05,5-.05h206.53v.02Z"/></g></g></g></g></svg>');
    
    background-size: 20px;
}

.toolbar-button.strikethrough{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 409.6 409.6"><g><g id="Layer_1"><g><path d="M96.12,281.71c7.05,0,14.07-.11,21.08.12.99.03,2.34,1.5,2.82,2.61,3.03,6.94,6.01,13.91,8.74,20.97,10.55,27.26,30.7,43.11,58.85,48.95,22.7,4.71,44.41.92,64.02-11.26,14.6-9.07,23.72-22.65,24.46-40.32.78-18.62-9.36-31.61-23.98-41.49-4.81-3.25-10.28-5.57-15.59-7.99-1.97-.9-4.35-1.26-6.55-1.27-32.87-.08-65.74-.05-98.61-.05-34.59,0-69.18.01-103.77,0-7.94,0-10.1-2.24-10.11-10.28,0-3.73-.1-7.46.04-11.18.18-5.01,2.76-7.51,7.75-7.76,1.06-.05,2.13-.02,3.19-.02,117.77,0,235.54,0,353.31,0,9.19,0,11.05,1.83,11.05,10.9,0,3.33.06,6.66-.02,9.98-.13,5.38-2.37,8.09-7.63,8.24-10.37.3-20.74.25-31.12.29-10.88.04-21.76,0-32.9,0,.23,5.3.55,10.42.66,15.55.39,18.75-2.98,36.8-10.78,53.89-5.62,12.31-14.85,21.63-25.62,29.5-14.47,10.57-29.82,19.49-47.31,24.13-16.34,4.33-33.06,4.84-49.85,5.18-24.79.5-48.05-6.58-71.36-13.52-5.59-1.67-11.1-3.62-16.59-5.61-3.04-1.1-4.59-3.43-4.58-6.77.02-23.55,0-47.1.02-70.65,0-.5.18-1,.39-2.13Z"/><path d="M278.58,190.62c-1.31,0-2.61,0-3.92,0-53.1,0-106.2-.03-159.29.08-3.34,0-5.25-1.08-7.11-3.76-13.07-18.9-20.73-39.43-19.69-62.74,1.02-22.68,9.38-42.31,24.46-59.2,16.72-18.73,38.2-28.16,62.45-32.4,33.3-5.82,65.66-1.01,97.65,8.34,1.02.3,1.24.4,2.48.64,9.18,1.74,13.31,6.52,14.03,15.28,1.55,18.81,3.91,37.55,5.31,56.37.84,11.31-.22,11.43-11.46,11.09-1.29-.04-2.47,0-3.7-.02-9.39-.16-12.42-3.97-15.14-12-3.21-9.48-7.53-18.87-12.94-27.28-12.83-19.96-31.76-29.59-55.5-29.47-16.07.08-30.82,4.02-42.7,15.6-16.05,15.63-17.03,39.73-3,57.14,10.14,12.59,23.81,19.43,38.3,24.88,14.79,5.55,30.12,9.68,44.8,15.48,14.29,5.65,28.06,12.62,42.04,19.05,1.16.53,2.17,1.39,3.24,2.09-.1.27-.21.55-.31.82Z"/></g></g></g></svg>');
    background-size: 20px;
}

.toolbar-button.link{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 307.1 306.9"><g><g id="Layer_1"><g id="Layer_1-2" data-name="Layer_1"><g><path d="M272.2,91.5c11,0,20.1,4,27.1,12.6,4.5,5.6,7,12,7,19.1.1,18.2,0,36.3,0,54.5,0,2.3,0,4.7-.1,7-.4,8.4-3.8,15.7-9.7,21.6h0c-6.5,6.5-14.5,9.6-23.7,9.6-27.4-.1-54.8-.2-82.2-.5-16.9-.2-28.6-9.9-32.2-24.8-1.1-4.7.2-12.3,8.9-13.8,8.1-1.4,11.9,2.4,14.5,10.1.9,2.6,3.8,5.3,9.9,5.4,26.5.2,53,.3,79.4.5,4.5,0,8.6-.8,10.7-5.3.9-1.8,1.2-4,1.2-6,.1-18.2,0-36.5.3-54.7.1-7.6-3.9-12.3-12.4-12.3-31,.2-61.9,0-92.9,0-6.6,0-11.2-3.3-12.5-8.9-1.7-7.4,3.8-14.1,11.7-14.2"/><path d="M34.1,215.4c-9.2,0-17.1-3.2-23.6-9.7h0c-6.6-6.6-9.7-14.6-9.7-23.9,0-19.2,0-38.3.1-57.5.2-19.1,14.2-33.2,33.3-33.3,23.9-.1,47.8-.1,71.7,0,16.9.1,30.6,11.7,32.7,28.3.6,4.6-3.8,11-10.1,11.9-5.2.8-11.9-4.1-13.1-9.8-1-4.8-4.3-7.3-10.9-7.3-22.9,0-45.8,0-68.7,0-8,0-11.8,3.8-11.8,11.8,0,18.4,0,36.8-.1,55.2s3.8,11.1,11.1,11.1c30.9,0,61.8.1,92.7.2,5,0,8.9,2,11.2,6.5,2.2,4.4,1.6,8.6-1.4,12.4-2.5,3.2-6,4.3-9.9,4.3"/><path d="M223.4,142.1c7.2,0,12.3,4.9,12.3,11.6,0,6.4-5,11.4-11.7,11.4-14.6,0-29.1,0-43.7,0-31.9,0-63.7-.1-95.6-.2-7.7,0-12.7-4.1-13.1-10.8-.2-3.4.9-6.4,3.1-8.8h0c2.7-2.6,5.8-3.6,9.4-3.6"/></g></g></g></g></svg>');
}

.toolbar-button.ordered-list{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="%23000000"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.287 2.326L2.692 2h.677v3h-.708V2.792l-.374.281v-.747zM5 3h10v1H5V3zm0 4h10v1H5V7zm10 4H5v1h10v-1zM3.742 7.626l.029-.039.065-.09a.84.84 0 0 0 .156-.507c0-.12-.02-.24-.057-.354a.848.848 0 0 0-.492-.529 1.123 1.123 0 0 0-.452-.082 1.094 1.094 0 0 0-.458.087.867.867 0 0 0-.479.522A1.038 1.038 0 0 0 2 6.957v.05h.81v-.05a.3.3 0 0 1 .046-.157.174.174 0 0 1 .057-.054.19.19 0 0 1 .172 0 .188.188 0 0 1 .056.06.24.24 0 0 1 .031.081.445.445 0 0 1-.036.29 1.309 1.309 0 0 1-.12.182l-1 1.138-.012.013v.54h1.988v-.7h-.9l.65-.724zm-.037 3.817c.046.032.086.07.12.114a.841.841 0 0 1 .167.55c0 .107-.017.213-.05.314a.792.792 0 0 1-.487.5 1.288 1.288 0 0 1-.48.079c-.115 0-.23-.016-.341-.049a.94.94 0 0 1-.258-.123.751.751 0 0 1-.182-.177 1.063 1.063 0 0 1-.116-.2A1.038 1.038 0 0 1 2 12.078v-.049h.814v.049c0 .027.003.055.009.082a.207.207 0 0 0 .03.074.14.14 0 0 0 .053.052.2.2 0 0 0 .157.008.159.159 0 0 0 .056-.039.22.22 0 0 0 .042-.075.417.417 0 0 0 .017-.126.483.483 0 0 0-.022-.163.2.2 0 0 0-.051-.08.138.138 0 0 0-.06-.029.537.537 0 0 0-.077-.007h-.161v-.645h.168a.241.241 0 0 0 .069-.011.164.164 0 0 0 .065-.034.175.175 0 0 0 .048-.067.286.286 0 0 0 .021-.121.28.28 0 0 0-.016-.1.166.166 0 0 0-.097-.099.2.2 0 0 0-.156.007.164.164 0 0 0-.055.053.344.344 0 0 0-.04.156v.049H2v-.049a.987.987 0 0 1 .18-.544.8.8 0 0 1 .179-.186.87.87 0 0 1 .262-.133c.114-.036.234-.053.354-.051.116-.001.231.01.344.036.092.021.18.055.263.1a.757.757 0 0 1 .32.318.73.73 0 0 1 .09.347.81.81 0 0 1-.167.528.562.562 0 0 1-.12.114z"/></svg>');
    background-size:24px;
}

.toolbar-button.unordered-list{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" standalone="no"%3F><svg fill="%23000000" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon"><path d="M912 192H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 284H328c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h584c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM104 228a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 1 0-112 0z"/></svg>');
    height: 24px;
}

.toolbar-button.align-left{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm0 15h14v2H3v-2zm0-5h18v2H3v-2zm0-5h14v2H3V9z"/></g></svg>');
    background-size: 20px;
    height: 24px;
    width: 24px;
}

.toolbar-button.align-center{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm2 15h14v2H5v-2zm-2-5h18v2H3v-2zm2-5h14v2H5V9z"/></g></svg>');
        background-size: 20px;

}

.toolbar-button.align-right{
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g><path fill="none" d="M0 0h24v24H0z"/><path d="M3 4h18v2H3V4zm4 15h14v2H7v-2zm-4-5h18v2H3v-2zm4-5h14v2H7V9z"/></g></svg>');
        background-size: 20px;
}

#toolbar button img{
    max-height: 25px;
}

#toolbar .italic img{
  height: 23px;
    padding-top: 2px;
}

.emojipicker{
    height: 20px;
    width: 25px;
    margin: auto;
    background-image: url('data:image/svg+xml,<svg class="svg-icon" style="width: 1em; height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M510.944 960c-247.04 0-448-200.96-448-448s200.992-448 448-448 448 200.96 448 448-200.96 448-448 448z m0-832c-211.744 0-384 172.256-384 384s172.256 384 384 384 384-172.256 384-384-172.256-384-384-384z" fill="" /><path d="M512 773.344c-89.184 0-171.904-40.32-226.912-110.624-10.88-13.92-8.448-34.016 5.472-44.896 13.888-10.912 34.016-8.48 44.928 5.472 42.784 54.688 107.136 86.048 176.512 86.048 70.112 0 134.88-31.904 177.664-87.552 10.784-14.016 30.848-16.672 44.864-5.888 14.016 10.784 16.672 30.88 5.888 44.864C685.408 732.32 602.144 773.344 512 773.344zM368 515.2c-26.528 0-48-21.472-48-48v-64c0-26.528 21.472-48 48-48s48 21.472 48 48v64c0 26.496-21.504 48-48 48zM656 515.2c-26.496 0-48-21.472-48-48v-64c0-26.528 21.504-48 48-48s48 21.472 48 48v64c0 26.496-21.504 48-48 48z" fill="" /></svg>');
    border: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0;
    cursor: pointer;
}


.align-left img{
height: 18px;
}
.align img{   
    height: 18px !important;
}
.align:last-child{
    border-right: 1px solid #ccc;
}

.compose-email-btn{
    color: #fff;
    background-color: #4d6bfe;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 2px;
    width: 100px;
    display: none;
}

#fileInput {
    display: none;
}
#fileInput-textbox-compose{
    display: none;
}
#fileInput-textbox-reply{
    display: none;
}

#demoFileInput-demo-textbox-compose{
    display: none;
}
#demoFileInput-textbox{
    display: none;
}
#file-label {
    cursor: pointer;
    padding: 5px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

#file-preview {
    max-height: 100px;
    margin-left: 10px;
}
#demo-font-size-selector, #font-size-selector {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
}

#send-button-container {
    padding: 10px;
    text-align: center;
    border-top: 1px solid #e1e3e1;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}

.send-email-btn {
    margin: auto;
    background: linear-gradient(135deg, #0073E6, #2E96F0);
    color: white;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    border-radius: 14px;
    min-width: 160px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    letter-spacing: 0.025em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
    position: relative;
    top: 0;
    box-shadow: 0 2px 8px rgba(0, 128, 255, 0.15);
}

.send-email-btn:hover {
    background: linear-gradient(135deg, #0073E6, #0073E6);
 
    top: -1px;
    box-shadow: 0 6px 20px rgba(0, 128, 255, 0.25);
}

.send-email-btn:active {
    top: 0;
    box-shadow: 0 2px 8px rgba(0, 128, 255, 0.2);
}

.send-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.send-email-btn:hover .send-icon {
    transform: translateX(2px);
}
.email-btn-split { 
    display: flex; 
    border: 1px solid #e5e7eb; 
    border-radius: 50px; 
    overflow: hidden; 
    max-width: 400px; 
    margin: auto; 
} 

.split-btn { 
    padding: 0.65rem 0rem; 
    border: none; 
    font-weight: 500; 
    cursor: pointer; 
    background: transparent; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 4px;
    position: relative; 
    white-space: nowrap;
} 

.split-answered { 
    color: #374151; 
    flex-direction: row-reverse; 
    font-size: 0.775rem; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
    flex: 0.4; 
} 


.split-send:hover { 
    background: #0073E6; 
}

.split-send {
    color: white;
    flex-direction: row-reverse;
    background: linear-gradient(135deg, #0073E6, #2E96F0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.5s ease;
    flex: 0.6;
}

.split-answered:hover { 
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.04), rgba(99, 102, 241, 0.02)); 
    flex: 0.65;
}

.split-send:hover {
    background: linear-gradient(135deg, #0073E6, #0073E6);
    flex: 0.65;
}

.split-btn.split-send:hover .send-icon {
    transform: translateX(2px);
}

.split-answered:has(+ .split-send:hover) {
    flex: 0.35;
}

.split-send:has(+ .split-answered:hover) {
    flex: 0.35;
}


table{
        border-collapse: separate;
    border-spacing: 1px; 
}
.J-R {
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-bottom: auto;
    cursor: pointer;
}
.J-R::before{
    content: 'A';
    /* Change the #000 here to the text-color */
    color: #000;
    /* Change the #000 here to the text-color */
    border-bottom: 2px solid #000;
    
    
    padding: 0px 2px;
    line-height: 0.9em;
    font-size: 1em;

    /* Change the #fff here to the background-color */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px black;
    /* Change the #fff here to the background-color */
    background-color: #fff;
}
#table-container{
    display: none;
}
.aAj {
    width: 100%;
    border-collapse: collapse;
    position: absolute;
    width: auto;
    top: 0;
    transform: translate(-50%, -100%);
    border: 1px solid #eee;
   
}

.aAj td {
  padding: 8px;

}

.aAi {
  text-align: center;
    font-size: 12px;    
    letter-spacing: 1px;
    font-weight: 500;
		background-color: #fff;
}
.close-color{
    position: absolute;
    right: 0;
    top: 0;
    padding: 0;
    height: 25px;
    width: 25px;
    background-color: transparent;
    border: none;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.3s ease;
}
.close-color:hover{
    opacity: 1;
}
aAj td:nth-child(1) {
  background-color: #e0e0e0; /* Example background color for the first column */
}
.aAj td{
	background-color: #fff;
}
aAj td:nth-child(2) {
  color: #333; /* Example text color for the second column */
}
.aAj .T-Kw-KW {
    margin: 0;
    padding: 0 6px 6px;
	background-color: #fff;
}

/* Style the <div> to cover the entire <td> */
td.T-Kw-Jn {
    border: 1px solid #eee;
    cursor: pointer;
    margin: 0;
    position: relative;
    padding: 0;
    border-radius: 50px;
}
.T-Kw-Jt {
    user-select: none; /* Prevent text selection */
    border-radius: 50px;
    height: 16px;
    width: 16px;
    border: none;
}

/* Ensure the <td> has a height and width so the <div> covers it correctly */

.T-Kw-Jn.KO{
    border: 1px solid #000;
    outline: 1px solid #000;
}

/* Font */
#font-family-selector{
    width: 100px;
    border-left: 1px solid #ccc;
    height: 30px;
    border-radius: 0;
    margin-top: auto;
    margin-bottom: auto;
}
#demo-font-size-selector, #font-size-selector {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 474.87 373.36"><g opacity=".7"><path d="M240.34 282.84c0-3.88-.09-7.53.1-11.16.03-.5 1.39-1.17 2.22-1.34 6.43-1.36 12.92-2.42 19.3-3.95 7.23-1.73 8.58-4.52 5.8-11.35l-16.85-41.1c-.73-1.81-1.72-2.27-3.53-2.27-24.66.05-49.33.06-73.99-.02-2.03 0-2.92.71-3.61 2.51-3.09 8.01-3.13 7.99.13 15.9l11.33 27.45c3.64 8.88 10.46 13.68 19.68 15.49 3.95.77 3.95.83 3.93 4.75-.04 6 .56 5.08-4.99 5.09-32.75.03-65.49-.02-98.24.08-2.58 0-3.4-.7-3.17-3.21.2-2.15.16-4.34 0-6.49-.14-2.03.66-2.66 2.62-2.99 5.07-.84 10.28-1.46 15.1-3.13 7.89-2.74 13.69-8.4 18.04-15.46.51-.83.59-2.31.23-3.23l-9.23-22.91c-.54-1.34-1.24-1.92-2.75-1.92l-49 .1c-.9 0-2.33.78-2.61 1.54l-11.43 31.14c-.34.93-.53 1.93-.69 2.91-1.12 6.85.49 9.74 7.22 11.59 4.55 1.25 9.27 1.94 13.95 2.67 1.84.29 2.49.9 2.48 2.82-.03 6.51.04 6.51-6.57 6.51h-58-2.22v-8.78c3.58-.68 7.25-1.06 10.73-2.09 9.06-2.66 14.74-9.1 18.25-17.55l46.82-113.23 9.15-22.14c.59-1.46 1.36-2.05 2.94-2.03l18.75-.01c1.73-.03 2.52.63 3.12 2.14l22.84 56.71 8.79 21.88c.65-1.15 1.09-1.77 1.38-2.46l33.34-80.73 22.68-54.89c.57-1.39 1.36-1.82 2.81-1.81h27.25c1.61-.01 2.29.61 2.88 2.07l57.21 142.13 19.34 47.09c4.88 11.67 14.01 18.05 26.27 20.24 2.13.38 4.27.71 6.42.92 1.68.16 2.28.95 2.2 2.61-.1 2.33-.15 4.67 0 7 .15 2.22-.49 3.02-2.89 3l-38.5-.06h-73.74-3.28zm-59.98-94.98h59.78l-29.8-74.34-.69.17-29.29 74.17zM97.95 158.4l-.78.13-20.98 52.94h43.29l-21.54-53.06z" fill="%23020202"/></g><path d="M412.68 210.19l41.62-39.82h-85.62l44 39.82z" stroke="%23000" stroke-miterlimit="10" opacity=".7"/></svg>');
        background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    border: 1px solid #fff;
    border-radius: 4px;
    cursor: pointer;
    color: transparent; /* Hide text */
    width: 40px;
    position: relative;
}


/* Hide the option text but keep functionality */
#font-size-selector option {
    color: black; /* Make sure text color is visible in dropdown */
}


/*attachment*/
/* Container for file previews */
#attachments-container {
   margin-top: auto; /* Pushes attachments to the bottom of #editor */
}

/* Styling for each file preview */
.file-preview {
    display: flex;
    align-items: center;
    margin-top: auto; /* Pushes .file-preview to the bottom */
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 2px;
    background-color: #fff;
    position: relative;
}

/* Styling for file names and sizes */
.attachment-name,
.file-size {
    font-weight: bold;
    font-style: italic;
    color: #000; /* Set to desired color */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none; /* Prevent text selection */
    cursor: default; /* Prevent pointer cursor */
}

/* Styling for file sizes */
.file-size {
    color: #666;
    margin-left: 5px;
}

/* Styling for images */
.attachment-preview {
    max-width: 100px;
    max-height: 100px;
    margin-left: 10px;
    margin-right: 10px;
}

/* Styling for remove button */
.remove-attachment {
    color: #888;
    background-color: transparent;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
}

@container (max-width: 800px) {
    .gptbtn {
        padding-left: 15px;
    }
    .gptbtn::before {
        left: 7px;
    }
    .deepseekbtn {
        padding-left: 15px;
    }
    .deepseekbtn::before {
        left: 7px;
    }
    .geminibtn {
        padding-right: 15px;
    }
    .geminibtn::after {
		right: 7px;
    }
}

@container (max-width: 750px) {
    #toolbar {
        flex-direction: column;
        gap: 5px;
        padding: 5px;
    }

    /* Top row - formatting buttons */
    #toolbar > div:first-child {
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        padding: 5px;
        border-bottom: 1px solid #e1e3e1;
    }

    /* Bottom row - file input and alignment */
    #toolbar > div:last-child {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px;
    }

    /* File input styling */
    #file-label {
        border: none;
        padding-left: 0;
    }

    /* Font selectors */
    #font-family-selector,
    #demo-font-size-selector, #font-size-selector {
        height: 28px;
    }

    .deepseekbtn {
        padding-left: 15px;
        font-size: 11px;
    }
    .gptbtn {
        padding-left: 15px;
        font-size: 11px;
    }
    
    .geminibtn {
        padding-right: 15px;
        font-size: 11px;
    }
	
    .aAj{
    
         transform: translate(-95.4%, -101%) !important;

    }
}
@container (max-width: 630px) {
   .gptbtn {
        padding-left: 22px;
        padding-right: 0px;
        font-size: 10px;
    }
    .gptbtn::before {
        left: 0px;
        background-size: 15px;
    }
	
   .geminibtn {
        padding-right: 22px;
        padding-left: 5px;
        font-size: 10px;
    }
    .geminibtn::after {
        right: 0px;
        background-size: 15px;
    }

   .deepseekbtn {
        padding-left: 22px;
        padding-right: 0px;
        font-size: 10px;
    }
    .deepseekbtn::before {
        left: 0px;
        background-size: 15px;
    }
}

@media(max-width: 500px){
    .gbtn-container{
        min-width: 43%;
    }
    .undo-controls{
        max-width: 20%;
    }
    .gptbtn{
        margin: 0 5px 0 8px;
    }
    .deepseekbtn{
        margin: 0 5px 0 8px;
    }
    .undo-button, .redo-button {
        margin: 0;
    }
    .signature-button{
        padding: 5px 10px;
    }
    .signature-button:after {
        right: 10px;
    }
    #toolbar div:first-child{
        gap: 0;
    }
}