:root { --chat-font-size: 14px; }
html, body { background-color: #0f172a; margin: 0; height: 100dvh; overflow: hidden; touch-action: pan-y; font-family: 'Inter', sans-serif; }
body { display: flex; align-items: center; justify-content: center; }

.chat-text-dynamic { font-size: var(--chat-font-size); line-height: 1.5; }

.avatar-container { width: 70px; height: 70px; border-radius: 50%; overflow: hidden; border: 3px solid #60a5fa; box-shadow: 0 0 15px rgba(96, 165, 250, 0.6); position: relative; margin: 0 auto; transition: all 0.3s ease; background-color: #1e293b; }
.avatar-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease; }

.speaking-pulse { animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0.8); } 70% { box-shadow: 0 0 0 20px rgba(96, 165, 250, 0); } 100% { box-shadow: 0 0 0 0 rgba(96, 165, 250, 0); } }
.speaking-bob { animation: bob 0.5s infinite alternate ease-in-out; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-5px); } }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.word-span, .exp-word-span { cursor: pointer; display: inline-block; padding: 0 2px; border-radius: 4px; transition: background-color 0.2s; }
.word-span.selected { background-color: #fef08a; color: #854d0e; font-weight: 600; }
.exp-word-span.selected { background-color: #fde047; color: #a16207; font-weight: 600; }

.tooltip-arrow::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #1f2937 transparent transparent transparent; }

.selected-card { border-color: #3b82f6 !important; background-color: #eff6ff !important; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3) !important; transform: scale(1.02); }

.perspective-1000 { perspective: 1000px; }
.transform-style-3d { transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); }
.backface-hidden { backface-visibility: hidden; }
.rotate-y-180 { transform: rotateY(180deg); }

#globalNavWrapper { position: absolute; top: 56px; width: 100%; z-index: 9999; }
.panel-popup { position: absolute !important; top: 100% !important; left: 12px !important; right: 12px !important; z-index: 10000 !important; background-color: rgba(255, 255, 255, 0.98) !important; border-radius: 16px !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2) !important; }

#homeScrollContainer, #screen-main, #screen-roleplay, #screen-vocab, #screen-alphabet { padding-top: 115px !important; }

/* style.css에 추가 */
button#modeTutorBtn, button#modeTranslateBtn {
    height: auto !important;
    padding-top: 3px !important;
    padding-bottom: 4px !important;
    min-height: 0 !important;
}

#interpreterModal {
    position: fixed !important; /* 부모 태그 상관없이 무조건 화면 기준 */
    z-index: 99999 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: none; /* JS에서 block/flex로 전환 */
}