/* This file provides direct styling for the two main textareas
   to ensure they are rendered identically regardless of load order */

/* Direct styling for system prompt textarea */
.system-prompt-textarea {
    transition: border-color 0.2s ease !important;
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 10px !important;
    font-family: inherit !important;
}

.system-prompt-textarea:hover {
    border-color: #000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

.system-prompt-textarea:focus {
    border-color: #000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode system prompt */
[data-theme='dark'] .system-prompt-textarea {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #555 !important;
}

[data-theme='dark'] .system-prompt-textarea:hover {
    border-color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

[data-theme='dark'] .system-prompt-textarea:focus {
    border-color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* Direct styling for main chat edit box */
#transcription {
    transition: border-color 0.2s ease !important;
    background-color: white !important;
    color: #333 !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    padding: 10px !important;
    font-family: inherit !important;
}

#transcription:hover {
    border-color: #000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

#transcription:focus {
    border-color: #000 !important;
    outline: none !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) !important;
}

/* Dark mode main chat edit box */
[data-theme='dark'] #transcription {
    background-color: #333 !important;
    color: #eee !important;
    border-color: #555 !important;
}

[data-theme='dark'] #transcription:hover {
    border-color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

[data-theme='dark'] #transcription:focus {
    border-color: #fff !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}