/* =============================================
   LIGHT MODE
   ============================================= */

#teacher-chat-wrapper{
width:100%;
max-width:900px;
margin:auto;
background:#ffffff;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
display:flex;
flex-direction:column;
height:600px;
font-family:Arial, Helvetica, sans-serif;
}

#teacher-chat-box{
flex:1;
overflow-y:auto;
padding:20px;
background:#f7f7f8;
scroll-behavior:smooth;
}

.message-row{ display:flex; align-items:flex-end; margin-bottom:12px; }
.message-row.student{ justify-content:flex-end; }
.avatar{ width:36px; height:36px; border-radius:50%; margin-right:8px; }
.message-row.student .avatar{ display:none; }
.message{ max-width:65%; padding:12px 14px; border-radius:14px; font-size:14px; line-height:1.4; }
.teacher .message{ background:#ffffff; border:1px solid #e4e4e4; }
.student .message{ background:#5b2c83; color:white; }
.typing{ font-style:italic; opacity:0.6; }

.teacher-buttons{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.teacher-buttons button{ background:#5b2c83; color:white; border:none; padding:7px 12px; border-radius:8px; font-size:13px; cursor:pointer; }
.teacher-buttons button:hover{ opacity:0.9; }

#teacher-input-area{ display:flex; gap:10px; padding:15px; border-top:1px solid #eee; background:white; }
#teacher-input{ flex:1; padding:12px; border:1px solid #ddd; border-radius:8px; font-size:14px; background:#ffffff; color:#111111; }
#teacher-send{ background:#5b2c83; color:white; border:none; padding:10px 18px; border-radius:8px; cursor:pointer; }
#teacher-send:hover{ opacity:0.9; }
#teacher-mic{ background:#ff4b4b; color:white; border:none; padding:10px 14px; border-radius:8px; cursor:pointer; }

.teacher-row{ display:flex; align-items:flex-start; gap:10px; margin:10px 0; }
.teacher-avatar{ width:40px; height:40px; border-radius:50%; }
.teacher{ background:#f1f1f1; color:#111111; padding:12px; border-radius:12px; max-width:70%; box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.student{ background:#4f8cff; color:white; padding:12px; border-radius:12px; max-width:70%; margin-left:auto; }
.voice-status{ text-align:center; font-size:13px; padding:6px; opacity:0.7; }

/* =============================================
   DAILY GOAL
   ============================================= */

#teacher-goal-wrapper{
width:100%;
max-width:900px;
margin:20px auto 0 auto;
background:#ffffff;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
padding:16px 20px;
font-family:Arial, Helvetica, sans-serif;
box-sizing:border-box;
}

#teacher-goal-header{
display:flex;
justify-content:space-between;
align-items:center;
font-size:14px;
font-weight:bold;
color:#444;
margin-bottom:10px;
}

#teacher-goal-bar-bg{
width:100%;
height:12px;
background:#e9e9e9;
border-radius:6px;
overflow:hidden;
}

#teacher-goal-bar{
height:100%;
background:linear-gradient(90deg,#5b2c83,#9b59b6);
border-radius:6px;
transition:width 0.4s ease;
}

#teacher-goal-complete{
margin-top:10px;
font-size:13px;
color:#2d6a4f;
font-weight:bold;
text-align:center;
}

/* =============================================
   EXERCISES
   ============================================= */

#teacher-exercises-wrapper{
width:100%;
max-width:900px;
margin:20px auto 0 auto;
background:#ffffff;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
padding:24px;
font-family:Arial, Helvetica, sans-serif;
box-sizing:border-box;
}

#teacher-exercises-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

#teacher-exercises-title{
margin:0;
font-size:17px;
color:#333;
}

#exercises-generate{
background:#5b2c83;
color:white;
border:none;
padding:10px 18px;
border-radius:8px;
font-size:14px;
cursor:pointer;
}

#exercises-generate:hover{ opacity:0.9; }
#exercises-generate:disabled{ opacity:0.6; cursor:not-allowed; }

#exercises-loading{
text-align:center;
padding:20px;
color:#888;
font-size:14px;
}

.exercises-spinner{
display:inline-block;
width:16px;
height:16px;
border:2px solid #ddd;
border-top-color:#5b2c83;
border-radius:50%;
animation:spin 0.7s linear infinite;
margin-right:8px;
vertical-align:middle;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

.exercise-card{
background:#f9f9fb;
border:1px solid #e8e8e8;
border-radius:10px;
padding:18px;
margin-bottom:16px;
}

.exercise-number{
font-size:12px;
color:#999;
margin-bottom:6px;
text-transform:uppercase;
letter-spacing:0.5px;
}

.exercise-type-label{
font-size:13px;
font-weight:bold;
color:#5b2c83;
margin-bottom:10px;
}

.exercise-question{
font-size:14px;
color:#333;
margin:0 0 8px 0;
font-weight:bold;
}

.exercise-sentence{
font-size:15px;
color:#111;
margin:0 0 12px 0;
padding:10px 14px;
background:#ffffff;
border:1px solid #ddd;
border-radius:8px;
font-style:italic;
}

.exercise-options{
display:flex;
flex-direction:column;
gap:8px;
}

.exercise-option{
display:flex;
align-items:center;
gap:8px;
padding:10px 14px;
background:#ffffff;
border:1px solid #ddd;
border-radius:8px;
cursor:pointer;
font-size:14px;
transition:border-color 0.15s;
}

.exercise-option:hover{ border-color:#5b2c83; }

.exercise-input{
width:100%;
padding:10px 12px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
background:#ffffff;
color:#111;
box-sizing:border-box;
}

.exercise-input:focus{ outline:none; border-color:#5b2c83; }

.exercise-feedback{
margin-top:12px;
padding:10px 14px;
border-radius:8px;
font-size:14px;
}

.exercise-feedback.correct{ background:#e6f4ea; color:#2d6a4f; }
.exercise-feedback.incorrect{ background:#fdecea; color:#a93226; }

.exercise-explanation{
margin-top:6px;
font-size:13px;
opacity:0.85;
}

.exercises-score{
padding:14px 18px;
background:#f0e6fa;
border-radius:10px;
font-size:15px;
color:#4a1a6e;
text-align:center;
}

.exercises-error{
color:#a93226;
font-size:14px;
text-align:center;
padding:10px;
}

#exercises-submit{
background:#5b2c83;
color:white;
border:none;
padding:11px 24px;
border-radius:8px;
font-size:14px;
cursor:pointer;
margin-top:8px;
}

#exercises-submit:hover{ opacity:0.9; }

/* =============================================
   FEEDBACK FORM
   ============================================= */

#teacher-feedback-wrapper{
width:100%;
max-width:900px;
margin:20px auto 0 auto;
background:#ffffff;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.08);
padding:24px;
font-family:Arial, Helvetica, sans-serif;
box-sizing:border-box;
}

#teacher-feedback-title{ margin:0 0 20px 0; font-size:17px; color:#333333; }
.feedback-field{ margin-bottom:18px; }
.feedback-field label{ display:block; font-size:14px; font-weight:bold; color:#444444; margin-bottom:8px; }
.feedback-field textarea{ width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; font-size:14px; font-family:Arial,Helvetica,sans-serif; resize:vertical; min-height:70px; background:#ffffff; color:#111111; box-sizing:border-box; }
.feedback-field textarea:focus{ outline:none; border-color:#5b2c83; }

#star-rating{ display:flex; gap:6px; margin-top:4px; }
#star-rating .star{ font-size:28px; color:#cccccc; cursor:pointer; transition:color 0.15s; line-height:1; }
#star-rating .star.active{ color:#f5a623; }
#star-rating .star:hover{ color:#f5a623; }

#feedback-submit{ background:#5b2c83; color:white; border:none; padding:11px 24px; border-radius:8px; font-size:14px; cursor:pointer; }
#feedback-submit:hover{ opacity:0.9; }

#feedback-message{ margin-top:12px; font-size:14px; padding:10px 14px; border-radius:8px; display:none; }
#feedback-message.success{ background:#e6f4ea; color:#2d6a4f; display:block; }
#feedback-message.error{ background:#fdecea; color:#a93226; display:block; }

/* =============================================
   DARK MODE
   ============================================= */

@media (prefers-color-scheme: dark){

#teacher-chat-wrapper{ background:#1e1e2e; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
#teacher-chat-box{ background:#16161e; }
#teacher-input-area{ background:#1e1e2e; border-top:1px solid #2e2e3e; }
#teacher-input{ background:#2a2a3c; border:1px solid #3e3e5e; color:#e0e0e0; }
#teacher-input::placeholder{ color:#888; }
.teacher{ background:#2a2a3c; color:#e0e0e0; box-shadow:0 1px 3px rgba(0,0,0,0.4); }
.student{ background:#5b2c83; color:#ffffff; }
.typing{ color:#aaaaaa; }
.voice-status{ color:#aaaaaa; }

/* daily goal */
#teacher-goal-wrapper{ background:#1e1e2e; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
#teacher-goal-header{ color:#bbbbbb; }
#teacher-goal-bar-bg{ background:#2a2a3c; }
#teacher-goal-complete{ color:#6fcf97; }

/* exercises */
#teacher-exercises-wrapper{ background:#1e1e2e; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
#teacher-exercises-title{ color:#e0e0e0; }
.exercise-card{ background:#2a2a3c; border-color:#3e3e5e; }
.exercise-number{ color:#666; }
.exercise-type-label{ color:#c084fc; }
.exercise-question{ color:#e0e0e0; }
.exercise-sentence{ background:#1e1e2e; border-color:#3e3e5e; color:#e0e0e0; }
.exercise-option{ background:#1e1e2e; border-color:#3e3e5e; color:#e0e0e0; }
.exercise-option:hover{ border-color:#9b59b6; }
.exercise-input{ background:#2a2a3c; border-color:#3e3e5e; color:#e0e0e0; }
.exercise-input:focus{ border-color:#9b59b6; }
.exercise-feedback.correct{ background:#1a3a2a; color:#6fcf97; }
.exercise-feedback.incorrect{ background:#3a1a1a; color:#eb5757; }
.exercises-score{ background:#2d1a4a; color:#c084fc; }
#exercises-loading{ color:#666; }

/* feedback */
#teacher-feedback-wrapper{ background:#1e1e2e; box-shadow:0 4px 20px rgba(0,0,0,0.4); }
#teacher-feedback-title{ color:#e0e0e0; }
.feedback-field label{ color:#bbbbbb; }
.feedback-field textarea{ background:#2a2a3c; border:1px solid #3e3e5e; color:#e0e0e0; }
.feedback-field textarea:focus{ border-color:#9b59b6; }
.feedback-field textarea::placeholder{ color:#666; }
#star-rating .star{ color:#444444; }
#star-rating .star.active, #star-rating .star:hover{ color:#f5a623; }
#feedback-message.success{ background:#1a3a2a; color:#6fcf97; }
#feedback-message.error{ background:#3a1a1a; color:#eb5757; }

}