.frenchmate-chat-container *,
.frenchmate-game-container *,
.frenchmate-speech-container *,
.frenchmate-progress-container *{box-sizing:border-box;}
.frenchmate-chat-container{border:1px solid #ddd;border-radius:12px;background:#fff;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1);max-width:600px;margin:20px auto;position:relative;}
.frenchmate-chat-header{background:linear-gradient(135deg, #007cba 0%, #005a87 100%);color:white;padding:20px;display:flex;justify-content:space-between;align-items:center;position:relative;}
.frenchmate-chat-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');pointer-events:none;}
.frenchmate-chat-header h3{margin:0;font-size:20px;font-weight:700;z-index:1;position:relative;}
.frenchmate-level-badge{background:rgba(255,255,255,0.25);backdrop-filter:blur(10px);padding:6px 14px;border-radius:20px;font-size:12px;text-transform:uppercase;letter-spacing:0.8px;font-weight:600;border:1px solid rgba(255,255,255,0.2);z-index:1;position:relative;}
.frenchmate-chat-messages{height:350px;overflow-y:auto;padding:20px;background:linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);position:relative;}
.frenchmate-chat-messages::-webkit-scrollbar{width:6px;}
.frenchmate-chat-messages::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px;}
.frenchmate-chat-messages::-webkit-scrollbar-thumb{background:#007cba;border-radius:3px;}
.frenchmate-welcome-message{background:linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);border:1px solid #90caf9;border-radius:12px;padding:20px;color:#0d47a1;font-style:italic;text-align:center;margin-bottom:15px;box-shadow:0 2px 8px rgba(0,0,0,0.05);}
.frenchmate-message{margin-bottom:15px;display:flex;align-items:flex-end;animation:messageSlide 0.3s ease-out;}
@keyframes messageSlide {
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}
.frenchmate-user-message{justify-content:flex-end;}
.frenchmate-ai-message{justify-content:flex-start;}
.frenchmate-message-content{max-width:80%;padding:12px 16px;border-radius:18px;position:relative;word-wrap:break-word;}
.frenchmate-user-message .frenchmate-message-content{background:linear-gradient(135deg, #007cba 0%, #005a87 100%);color:white;border-bottom-right-radius:6px;}
.frenchmate-ai-message .frenchmate-message-content{background:#fff;color:#333;border:1px solid #e0e0e0;border-bottom-left-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,0.05);}
.frenchmate-chat-input{display:flex;padding:20px;background:#fff;border-top:1px solid #e0e0e0;gap:12px;align-items:center;}
.frenchmate-message-input{flex:1;padding:14px 18px;border:2px solid #e0e0e0;border-radius:25px;outline:none;font-size:14px;transition:all 0.3s ease;background:#f8f9fa;}
.frenchmate-message-input:focus{border-color:#007cba;box-shadow:0 0 0 3px rgba(0,124,186,0.1);background:#fff;}
.frenchmate-send-btn, .frenchmate-voice-btn{padding:14px 20px;background:linear-gradient(135deg, #007cba 0%, #005a87 100%);color:white;border:none;border-radius:25px;cursor:pointer;font-weight:600;transition:all 0.3s ease;font-size:14px;min-width:80px;}
.frenchmate-send-btn:hover, .frenchmate-voice-btn:hover{background:linear-gradient(135deg, #005a87 0%, #004066 100%);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,124,186,0.3);}
.frenchmate-voice-btn{padding:14px 16px;background:linear-gradient(135deg, #28a745 0%, #1e7e34 100%);min-width:auto;}
.frenchmate-voice-btn:hover{background:linear-gradient(135deg, #1e7e34 0%, #155724 100%);box-shadow:0 4px 12px rgba(40,167,69,0.3);}
.frenchmate-voice-btn.recording{background:linear-gradient(135deg, #dc3545 0%, #c82333 100%);animation:pulse 1s infinite;}
@keyframes pulse {
0%, 100%{transform:scale(1);}
50%{transform:scale(1.05);}
} .frenchmate-game-container{border:1px solid #ddd;border-radius:12px;background:#fff;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;box-shadow:0 4px 20px rgba(0,0,0,0.1);max-width:800px;margin:20px auto;overflow:hidden;}
.frenchmate-game-header{background:linear-gradient(135deg, #28a745 0%, #1e7e34 100%);color:white;padding:20px;position:relative;}
.frenchmate-game-header h3{margin:0 0 15px 0;font-size:20px;font-weight:700;}
.frenchmate-game-stats{display:flex;gap:25px;font-size:14px;flex-wrap:wrap;}
.frenchmate-game-stats span{background:rgba(255,255,255,0.2);padding:6px 12px;border-radius:12px;font-weight:600;}
.frenchmate-game-body{padding:30px;min-height:300px;background:#f8f9fa;}
.frenchmate-game-loading{text-align:center;color:#666;font-style:italic;padding:60px 20px;}
.frenchmate-game-controls{padding:20px;text-align:center;border-top:1px solid #e0e0e0;background:#fff;}
.frenchmate-vocab-game{max-width:600px;margin:0 auto;}
.frenchmate-vocab-pairs{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:15px;margin:20px 0;}
.frenchmate-vocab-item{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all 0.3s ease;}
.frenchmate-vocab-item:hover{border-color:#007cba;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.frenchmate-french-word{font-size:18px;font-weight:700;color:#007cba;margin-bottom:8px;}
.frenchmate-english-word{font-size:14px;color:#666;}
.frenchmate-speech-container{border:1px solid #ddd;border-radius:12px;background:#fff;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;box-shadow:0 4px 20px rgba(0,0,0,0.1);max-width:600px;margin:20px auto;overflow:hidden;}
.frenchmate-speech-header{background:linear-gradient(135deg, #6f42c1 0%, #5a2d91 100%);color:white;padding:20px;}
.frenchmate-speech-header h3{margin:0;font-size:20px;font-weight:700;}
.frenchmate-speech-body{padding:30px;}
.frenchmate-voice-controls{text-align:center;margin-bottom:30px;}
.frenchmate-transcript{background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border:1px solid #dee2e6;border-radius:12px;padding:25px;}
.frenchmate-transcript h4{margin:0 0 15px 0;color:#495057;font-size:16px;}
.frenchmate-transcript-content{color:#6c757d;font-style:italic;line-height:1.6;}
.frenchmate-progress-container{border:1px solid #ddd;border-radius:12px;background:#fff;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;box-shadow:0 4px 20px rgba(0,0,0,0.1);max-width:800px;margin:20px auto;overflow:hidden;}
.frenchmate-progress-header{background:linear-gradient(135deg, #fd7e14 0%, #e55a00 100%);color:white;padding:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;}
.frenchmate-progress-header h3{margin:0;font-size:20px;font-weight:700;}
.frenchmate-period-selector{padding:10px 15px;border:none;border-radius:8px;background:rgba(255,255,255,0.9);color:#333;font-weight:600;cursor:pointer;}
.frenchmate-progress-body{padding:30px;min-height:200px;}
.frenchmate-progress-loading{text-align:center;color:#666;font-style:italic;padding:40px 20px;}
.frenchmate-progress-stats{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:20px;}
.frenchmate-progress-stats .frenchmate-stat-card{background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);border:1px solid #dee2e6;border-radius:12px;padding:25px;text-align:center;transition:transform 0.3s ease;}
.frenchmate-progress-stats .frenchmate-stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.frenchmate-progress-stats .number{display:block;font-size:28px;font-weight:800;color:#fd7e14;margin-bottom:8px;}
.frenchmate-progress-stats .label{font-size:13px;color:#666;text-transform:uppercase;letter-spacing:0.5px;font-weight:600;}
.frenchmate-btn{padding:12px 24px;background:linear-gradient(135deg, #007cba 0%, #005a87 100%);color:white;border:none;border-radius:8px;cursor:pointer;font-weight:600;transition:all 0.3s ease;text-decoration:none;display:inline-block;font-size:14px;text-align:center;}
.frenchmate-btn:hover{background:linear-gradient(135deg, #005a87 0%, #004066 100%);color:white;text-decoration:none;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,124,186,0.3);}
.frenchmate-btn:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none;}
.frenchmate-record-btn{background:linear-gradient(135deg, #dc3545 0%, #c82333 100%);}
.frenchmate-record-btn:hover{background:linear-gradient(135deg, #c82333 0%, #a71e2a 100%);box-shadow:0 4px 12px rgba(220,53,69,0.3);}
.frenchmate-play-btn{background:linear-gradient(135deg, #28a745 0%, #1e7e34 100%);}
.frenchmate-play-btn:hover{background:linear-gradient(135deg, #1e7e34 0%, #155724 100%);box-shadow:0 4px 12px rgba(40,167,69,0.3);}
.frenchmate-next-btn, .frenchmate-restart-btn{margin:0 10px;}
.frenchmate-check-answers{background:linear-gradient(135deg, #17a2b8 0%, #138496 100%);}
.frenchmate-check-answers:hover{background:linear-gradient(135deg, #138496 0%, #10707f 100%);box-shadow:0 4px 12px rgba(23,162,184,0.3);}
.frenchmate-fill-blanks-game{max-width:600px;margin:0 auto;}
.frenchmate-sentence{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;margin-bottom:15px;}
.frenchmate-sentence p{margin:0 0 15px 0;font-size:16px;line-height:1.6;}
.frenchmate-blank-input{width:100%;max-width:300px;padding:10px 15px;border:2px solid #e0e0e0;border-radius:8px;font-size:14px;transition:border-color 0.3s ease;}
.frenchmate-blank-input:focus{outline:none;border-color:#007cba;box-shadow:0 0 0 3px rgba(0,124,186,0.1);}
@media(max-width:768px){
.frenchmate-chat-container, .frenchmate-game-container, .frenchmate-speech-container, .frenchmate-progress-container{max-width:100%;margin:10px;border-radius:8px;}
.frenchmate-chat-input, .frenchmate-game-stats{flex-direction:column;gap:10px;}
.frenchmate-progress-header{flex-direction:column;align-items:stretch;text-align:center;}
.frenchmate-vocab-pairs{grid-template-columns:1fr;}
.frenchmate-progress-stats{grid-template-columns:repeat(2, 1fr);}
.frenchmate-message-content{max-width:90%;}
}
@media(max-width:480px){
.frenchmate-progress-stats{grid-template-columns:1fr;}
.frenchmate-chat-messages{height:280px;}
.frenchmate-game-body, .frenchmate-speech-body, .frenchmate-progress-body{padding:20px;}
} @media (prefers-reduced-motion: reduce) { *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
} @media (prefers-color-scheme: dark) {
.frenchmate-chat-container, .frenchmate-game-container, .frenchmate-speech-container, .frenchmate-progress-container {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.frenchmate-chat-messages {
background: #1a202c;
}
.frenchmate-ai-message .frenchmate-message-content {
background: #4a5568;
color: #e2e8f0;
border-color: #2d3748;
}
}