/*
 * Gemini Draft Assistant Plugin Styles
 * Makes the toolbar buttons text-based and colorful for better visibility.
 */

/* Common styles for both AI buttons */
#gemini_draft_button,
#gemini_modify_button {
    /* Reset default icon styling */
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important; /* Needed to apply padding and vertical alignment */
    vertical-align: middle;

    /* Custom button appearance */
    padding: 3px 10px !important;
    margin: 0 2px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff !important; /* White text */
    text-shadow: none !important;
    line-height: 1.6;
    border-bottom-width: 2px !important;
    border-bottom-style: solid !important;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hide the original <img> icon inside the button link */
#gemini_draft_button img,
#gemini_modify_button img {
    display: none !important;
}

/* Add text content using a ::before pseudo-element */
#gemini_draft_button::before {
    content: "AI 초안 생성(15자 이상 입력 후 누르세요)";
    font-family: sans-serif;
}

#gemini_modify_button::before {
    content: "AI 수정(텍스트를 드래그하여 선택 후 누르세요)";
    font-family: sans-serif;
}


/* --- Responsive Design for Mobile --- */
/* On screens 768px or less, use shorter button text to prevent layout breaking */
@media (max-width: 768px) {
    #gemini_draft_button::before {
        content: "AI 초안";
    }

    #gemini_modify_button::before {
        content: "AI 수정";
    }

    /* Also, reduce padding on mobile to save more space */
    #gemini_draft_button,
    #gemini_modify_button {
        padding: 3px 8px !important;
    }
}


/* --- Colors & Hover Effects --- */

/* "AI 초안" button (Blue) */
#gemini_draft_button {
    background-color: #033557 !important; /* A nice blue */
    border-color: #04263d !important;
}
#gemini_draft_button:hover {
    background-color: #2980b9 !important; /* Darker blue on hover */
    border-color: #2c3e50 !important;
}

/* "AI 수정" button (Green) */
#gemini_modify_button {
    background-color: #3a0101 !important; /* A nice green */
    border-color: #411a04 !important;
}
#gemini_modify_button:hover {
    background-color: #27ae60 !important; /* Darker green on hover */
    border-color: #2c3e50 !important;
}

/* Loading Spinner Overlay */
.gemini-loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column; /* Arrange items vertically */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.gemini-loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1.5s linear infinite;
}

.gemini-loader-message {
    margin-top: 20px;
    color: #fff;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

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