/* 기본 초기화 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Pretendard', -apple-system, sans-serif; background-color: #121212; color: #ffffff; }

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 600px;
    margin: 0 auto;
    background-color: #000;
}

/* 링크 입력 */
.input-section { display: flex; padding: 10px; background-color: #1e1e1e; }
.input-section input { flex: 1; padding: 10px; border-radius: 5px; border: none; outline: none; background: #333; color: white; }
.input-section button { margin-left: 10px; padding: 10px 15px; background: #e50914; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }

/* 비디오 */
.video-section { width: 100%; aspect-ratio: 16 / 9; background-color: #000; }
#player { width: 100%; height: 100%; }

/* 자막 컨트롤 */
.subtitle-controls { display: flex; gap: 10px; padding: 10px; background: #1a1a1a; text-align: center; }
.subtitle-controls button { flex: 1; padding: 10px; background-color: #444; color: white; border: none; border-radius: 5px; cursor: pointer; }
.subtitle-controls button:disabled { background-color: #2b2b2b; color: #555; cursor: not-allowed; }

/* 싱크 조절 */
.sync-controls { text-align: center; padding: 10px; background: #1a1a1a; display: flex; justify-content: center; align-items: center; gap: 15px; }
.sync-controls button { padding: 5px 15px; background: #444; color: white; border: none; border-radius: 4px; cursor: pointer; }
.sync-controls span { font-size: 14px; font-weight: bold; }


/* 자막 */
.subtitle-section {
    transition: all 0.4s ease-in-out;
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: 20px; background-color: #2b2b2b; text-align: center; overflow-y: auto;
}
.target-lang { font-size: 24px; font-weight: bold; margin-bottom: 10px; }
.native-lang { font-size: 18px; color: #b3b3b3; }

.subtitle-section.hidden {
    flex: 0;
    min-height: 0;
    height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

/* 하단 컨트롤러 */
.control-section { padding: 15px; background-color: #1e1e1e; }
.control-row { display: flex; justify-content: space-between; margin-bottom: 10px; gap: 10px; }
.control-row:last-child { margin-bottom: 0; }
.control-row button {
    flex: 1; 
    padding: 14px 10px;      /* 위아래 여백을 줘서 누르기 편하게 조정 */
    font-size: 21px;         /* 💡 이모지 크기 1.5배 확대 */
    border: none; 
    border-radius: 8px;
    background-color: #333; 
    color: white; 
    cursor: pointer; 
    transition: 0.2s;
    display: flex;           /* 이모지를 수직/수평 가운데 정렬 */
    justify-content: center;
    align-items: center;
}
.control-row button:active { background-color: #555; }
#btn-open-ai-tutor { background-color: #0056b3; } /* AI 튜터 버튼 색상 */

/* 모달 스타일 */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; /* JS로 제어 */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal-content {
    background: #2b2b2b; padding: 20px; border-radius: 10px;
    width: 90%; max-width: 500px;
}
.modal-content h2 { margin-bottom: 10px; }
.modal-content p { margin-bottom: 20px; font-size: 14px; color: #ccc; }
.lang-list-container { max-height: 200px; overflow-y: auto; margin-bottom: 20px; border-top: 1px solid #444; border-bottom: 1px solid #444; padding: 10px 0; }
.lang-list-container label { display: block; padding: 8px 10px; cursor: pointer; border-radius: 5px; }
.lang-list-container label:hover { background-color: #444; }
.lang-list-container input { margin-right: 10px; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 10px; }
.modal-buttons button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; }
#btn-apply-lang { background-color: #e50914; color: white; }
#btn-close-lang-modal { background-color: #555; color: white; }


/* --- 💡 AI 튜터 플로팅 창 스타일 --- */
.floating-window {
    display: none; /* 평상시엔 숨김 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 400px;
    max-height: 80%;
    background-color: #242424;
    border: 1px solid #444;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    z-index: 1001;
    flex-direction: column;
}

.window-header {
    padding: 10px;
    background-color: #333;
    cursor: move;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.window-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow-y: hidden; /* 내부 스크롤은 chat div가 담당 */
    flex: 1;
}

.api-key-section, .message-input-section {
    display: flex;
    gap: 5px;
    margin-bottom: 10px;
}
.api-key-section input, .message-input-section input {
    flex: 1;
    padding: 8px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #1e1e1e;
    color: white;
}
.api-key-section button, .message-input-section button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background-color: #0056b3;
    color: white;
}

.status { color: #aaa; font-size: 14px; text-align: center; margin-bottom: 10px; }

#chat {
    flex: 1;
    border: 1px solid #444;
    border-radius: 8px;
    overflow-y: scroll;
    padding: 15px;
    margin-bottom: 10px;
    background: #1e1e1e;
    line-height: 1.5;
    min-height: 150px;
}

#chat .user { color: #87CEEB; text-align: right; margin: 10px 0; font-weight: bold; }
#chat .gemini { color: #98FB98; text-align: left; margin: 10px 0; }
#chat .status { color: gray; font-size: 12px; text-align: center; margin: 5px 0; }

/* 💡 따라 말할 문장 강조 스타일 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}

#chat .gemini.follow-me {
    color: #F8E71C; /* 밝은 노란색 */
    font-size: 1.1em; /* 살짝 크게 */
    font-weight: bold;
    background-color: rgba(248, 231, 28, 0.1);
    border-left: 4px solid #F8E71C;
    padding: 10px;
    margin-left: -10px; /* 패딩으로 인한 위치 조정 */
    border-radius: 5px;
    animation: pulse 2s infinite;
    transition: all 0.3s ease-in-out;
}


#micBtn, #stopBtn {
    width: 100%;
    padding: 10px;
    margin-bottom: 5px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
}

#micBtn { background-color: #28a745; color: white; }
#micBtn.recording { background-color: #dc3545; }
#stopBtn { background-color: #ff9800; color: black; }

#micBtn:disabled, #stopBtn:disabled,
.api-key-section button:disabled, .message-input-section button:disabled {
    background-color: #555;
    color: #888;
    cursor: not-allowed;
}

.message-input-section { margin-top: 5px; margin-bottom: 0; }

/* --- 💡 유사도 점수 오버레이 스타일 --- */
#similarity-score-overlay {
    display: none; /* 평상시엔 숨김 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 80px;
    font-weight: bold;
    text-shadow: 2px 2px 8px #000;
    justify-content: center;
    align-items: center;
    z-index: 100;
    border-radius: 10px; /* 부모 요소와 맞춤 */
    opacity: 0;
    transition: opacity 0.5s ease-out;
}


/* --- 📱 [추가] 모바일 반응형 스타일 --- */
@media (max-width: 480px) {
    /* 자막 폰트 크기 및 높이 조정 (버튼 가림 방지) */
    .subtitle-section {
        padding: 10px;
        gap: 4px;
        flex: 0 1 auto;
        height: 135px;
    }
    .target-lang { font-size: 18px; margin-bottom: 4px; }
    .native-lang { font-size: 14px; }

    /* 모바일 환경에서 이모지 크기 및 버튼 터치 영역 최적화 */
    .control-row button {
        padding: 12px 8px;    /* 손가락 터치 면적 확보 */
        font-size: 18px;      /* 모바일 이모지 크기 확대 */
    }

    /* 자막 컨트롤 버튼 패딩 조정 */
    .subtitle-controls button {
        padding: 8px;
    }
    
    /* AI 튜터 창 최대 너비 조정 */
    .floating-window {
        max-width: 95%;
    }

    /* AI 튜터 채팅창 최소 높이 조정 */
    #chat {
        min-height: 100px;
    }
}