/* =============================================
   EDUCATION BOT — Unique Indigo/Purple Theme
   ============================================= */

/* Override CSS variables for education */
.education-page {
    --mint: #eef2ff;
    --header1: #4338ca;
    --header2: #3730a3;
    --user: #4338ca;
}

/* Background gradient */
.education-page::before {
    background: linear-gradient(180deg, #eef2ff 0%, #e0e7ff 100%) !important;
}

/* Body background */
.education-page {
    background: #eef2ff !important;
}

/* Header bar — deep indigo gradient */
.education-page .topbar-inner {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 50%, #312e81 100%) !important;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(67, 56, 202, 0.20);
}

/* Brand subtitle dot */
.education-page .dot {
    background: #a78bfa;
}

/* Bot avatar — purple */
.education-page .bot-avatar {
    background: #4338ca !important;
    box-shadow: 0 4px 14px rgba(67, 56, 202, 0.25);
}

.education-page .bot-avatar svg {
    fill: #e0e7ff;
}

/* User bubble — indigo theme */
.education-page .bubble.user {
    background: #4338ca !important;
    color: #fff !important;
}

/* Bot bubble — soft white with subtle indigo border */
.education-page .bubble.bot {
    background: #ffffff !important;
    border: 1px solid rgba(67, 56, 202, 0.06) !important;
    box-shadow: 0 1px 3px rgba(67, 56, 202, 0.06) !important;
}

/* Template card buttons — indigo tint */
.education-page .tpl-btn {
    border-color: rgba(67, 56, 202, 0.12) !important;
    color: #4338ca !important;
}

.education-page .tpl-btn:hover {
    background: #eef2ff !important;
    border-color: rgba(67, 56, 202, 0.28) !important;
    box-shadow: 0 3px 10px rgba(67, 56, 202, 0.12) !important;
}

.education-page .tpl-btn:active {
    background: #e0e7ff !important;
}

.education-page .tpl-btn.clicked {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    border-color: rgba(67, 56, 202, 0.30) !important;
}

.education-page .tpl-btn .tpl-icon svg {
    fill: #4338ca !important;
}

/* Disabled buttons */
.education-page .template-buttons.disabled .tpl-btn .tpl-icon svg {
    fill: #9ca3af !important;
}

/* Checkbox options — indigo tint */
.education-page .checkbox-option {
    color: #4338ca !important;
    border-color: rgba(67, 56, 202, 0.12) !important;
}

.education-page .checkbox-option:hover {
    background: #eef2ff !important;
    border-color: rgba(67, 56, 202, 0.28) !important;
    box-shadow: 0 3px 10px rgba(67, 56, 202, 0.12) !important;
}

.education-page .checkbox-option.checked {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    border-color: rgba(67, 56, 202, 0.35) !important;
}

.education-page .checkbox-option.checked .cb-toggle {
    background: #4338ca !important;
    border-color: #4338ca !important;
}

.education-page .cb-submit-btn {
    background: linear-gradient(135deg, #4338ca 0%, #3730a3 100%) !important;
    box-shadow: 0 4px 14px rgba(67, 56, 202, 0.25) !important;
}

.education-page .cb-submit-btn:hover {
    box-shadow: 0 6px 18px rgba(67, 56, 202, 0.35) !important;
}

/* Composer — indigo focus ring */
.education-page .composer {
    background: #e0e7ff !important;
}

.education-page .composer-card:focus-within {
    border-color: rgba(67, 56, 202, 0.35) !important;
    box-shadow: 0 0 0 4px rgba(67, 56, 202, 0.10), 0 16px 34px rgba(0, 0, 0, .10) !important;
}

/* Send button — indigo */
.education-page .send-icon-btn {
    background: #4338ca !important;
    box-shadow: 0 10px 22px rgba(67, 56, 202, 0.22) !important;
}

.education-page .send-icon-btn:hover {
    background: #3730a3 !important;
}

/* Typing indicator dots */
.education-page .typing-dot {
    background: #a78bfa;
}

/* Composer note text */
.education-page .composer-note {
    color: #6366f1;
    opacity: 0.7;
}