/* --- 컬러 및 기본 설정 (기존과 동일) --- */
:root {
    --bg-dark: #1a1b26;
    --c-body-pink: #ffdbed;
    --c-mint: #a7f3d0;
    --c-cream: #fffbeb;
    --c-lavender: #e9d5ff;
    --c-knob-blue: #bae6fd;
    --c-knob-yellow: #fde68a;
    --c-knob-pink: #fbcfe8;
    --c-heart-red: #ff90a4;
    --c-shadow-light: rgba(255, 255, 255, 0.6);
    --c-shadow-dark: rgba(0, 0, 0, 0.15);
    --c-text-grey: #71717a;
    --c-input-bg: #fff; /* 입력창 배경 */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { height: 100%; font-family: 'M PLUS Rounded 1c', sans-serif; background-color: #000; }

.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-width: 1000px;
    margin: 0 auto;
    background-color: var(--bg-dark);
}

/* --- 채팅 화면 --- */
.chat-screen {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.message { display: flex; margin-bottom: 10px; animation: fadeIn 0.3s ease; }
.message.bot { justify-content: flex-start; }
.message.user { justify-content: flex-end; }
.bubble {
    padding: 12px 18px;
    border-radius: 20px;
    max-width: 70%;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.message.bot .bubble { background-color: #334155; color: #fff; border-bottom-left-radius: 5px; }
.message.user .bubble { background-color: var(--c-cream); color: #333; border-bottom-right-radius: 5px; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- 신디사이저 본체 --- */
.synth-container {
    background-color: var(--c-body-pink);
    padding: 25px 35px;
    display: flex;
    justify-content: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5); /* 입체감 추가 */
}

.synth-body {
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Grid Layouts (기존 유지) */
.row-top { display: grid; grid-template-columns: 100px 60px 1fr 180px; gap: 20px; align-items: center; height: 80px; }
.row-middle-1 { display: grid; grid-template-columns: 85px 1fr; gap: 15px; }
.num-key-row { display: grid; grid-template-columns: repeat(13, 1fr) 1.5fr 2fr; gap: 8px; }
.row-middle-2 { display: grid; grid-template-columns: 135px 1fr 160px; gap: 15px; position: relative; }
.side-pad-left { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 8px; }
.main-keys-area { display: flex; flex-direction: column; gap: 15px; }
.circle-btn-row { display: flex; justify-content: space-between; padding: 0 10px; }
.circle-group { display: flex; gap: 10px; }
.piano-key-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; height: 100px; }

/* ★ 4단: 하단 컨트롤 섹션 (수정됨) ★ */
.row-bottom-section {
    display: flex;
    gap: 15px;
    margin-top: -5px; /* 시각적 밸런스 조정 */
    align-items: center;
    width: 100%;
}

.nav-btn-group {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    gap: 8px;
    width: 135px; /* 위쪽 side-pad-left와 너비 맞춤 */
}

/* ★ 입력창 스타일 */
.chat-input-wrapper {
    flex: 1; /* 남은 공간 모두 차지 */
    display: flex;
}

.synth-input-bar {
    width: 100%;
    height: 40px;
    background-color: var(--c-input-bg);
    border: 3px solid transparent;
    border-radius: 12px;
    padding: 0 20px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-size: 16px;
    color: #555;
    outline: none;
    /* 안쪽 그림자로 움푹 파인 액정 느낌 */
    box-shadow: inset 2px 2px 5px var(--c-shadow-dark), 0 1px 0 #fff;
    transition: all 0.2s;
}

.synth-input-bar::placeholder { color: #ccc; }
.synth-input-bar:focus {
    background-color: #fff;
    border-color: var(--c-mint); /* 포커스 시 민트색 테두리 */
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1), 0 0 10px rgba(167, 243, 208, 0.5);
}


/* --- 컴포넌트 디자인 (버튼, 노브 등 - 기존 유지) --- */
.speaker-grill { width: 100%; height: 100%; background-image: radial-gradient(var(--c-text-grey) 20%, transparent 20%); background-size: 8px 8px; border-radius: 50%; opacity: 0.3; }
.screen-display { background-color: #fff; border: 4px solid #333; border-radius: 10px; height: 100%; display: flex; justify-content: center; align-items: center; box-shadow: inset 2px 2px 5px var(--c-shadow-dark); background-image: repeating-linear-gradient(45deg, #e0f2fe 0px, #e0f2fe 10px, #fce7f3 10px, #fce7f3 20px); }
.screen-text { font-family: 'Courier New', monospace; font-weight: bold; color: #555; text-align: center; font-size: 14px; background: rgba(255,255,255,0.8); padding: 5px 10px; border-radius: 5px; }

.knob { width: 50px; height: 50px; border-radius: 50%; box-shadow: 0 5px 0 var(--c-shadow-dark), inset 0 2px 3px var(--c-shadow-light); cursor: pointer; transition: all 0.1s; position: relative; }
.knob:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--c-shadow-dark); }
.knob.blue { background-color: var(--c-knob-blue); }
.knob.blue-glitter { background: radial-gradient(circle at 30% 30%, #fff, var(--c-knob-blue)); }
.knob.yellow-glitter { background: radial-gradient(circle at 30% 30%, #fff, var(--c-knob-yellow)); }
.knob.pink-glitter { background: radial-gradient(circle at 30% 30%, #fff, var(--c-knob-pink)); }
.knob-section-right { display: flex; gap: 15px; }

.btn { border: none; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: bold; color: var(--c-text-grey); cursor: pointer; box-shadow: 0 4px 0 var(--c-shadow-dark), inset 0 1px 1px var(--c-shadow-light); transition: all 0.1s; display: flex; justify-content: center; align-items: center; font-size: 14px; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--c-shadow-dark); }
.square { border-radius: 8px; height: 40px; width: 100%; }
.pill { border-radius: 20px; height: 40px; width: 100%; }
.circle { border-radius: 50%; width: 35px; height: 35px; font-size: 10px;}
.piano { border-radius: 0 0 10px 10px; height: 100%; font-size: 12px; align-items: flex-end; padding-bottom: 10px; }
.mint { background-color: var(--c-mint); }
.cream { background-color: var(--c-cream); }
.lavender { background-color: var(--c-lavender); }
.heart-btn-area { display: flex; justify-content: center; align-items: flex-end; }
.heart-shape { width: 140px; height: 120px; background-color: var(--c-heart-red); color: white; font-size: 18px; font-weight: 800; border-radius: 30px 30px 50px 50px; box-shadow: 0 8px 0 rgba(255, 100, 150, 0.4), inset 0 5px 10px rgba(255,255,255,0.3); }
.heart-shape:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(255, 100, 150, 0.4); }


/* 1. 버튼 자체: 내용물을 세로(column)로 정렬 */
.mbti-btn {
    display: flex !important;       /* Flex 적용 */
    flex-direction: column !important; /* 위에서 아래로 쌓기 */
    justify-content: flex-end;      /* 건반 아래쪽 끝으로 밀기 */
    align-items: center;            /* 좌우 가운데 정렬 */
    padding-bottom: 8px;            /* 밑바닥에서 약간 띄우기 */
    gap: 5px;                       /* 글자 뭉치와 하트 아이콘 사이 간격 */
}

/* 2. 텍스트(MBTI): 한 글자씩 강제 줄바꿈 */
.mbti-text {
    width: 0px;                     /* 너비를 최소화해서... */
    min-width: min-content;         /* 글자 하나 크기만큼만 잡히게 함 */
    word-break: break-all;          /* 글자 단위로 강제 줄바꿈 */
    line-height: 1.1;               /* 글자 위아래 간격 좁히기 */
    font-size: 11px;                /* 글자 크기 */
    font-weight: bold;              /* 굵게 */
    text-align: center;             /* 가운데 정렬 */
    white-space: normal;            /* 줄바꿈 허용 */
}

.typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 10px; /* 높이 고정 */
    padding: 0 5px;
}

/* 점 3개 스타일 */
.typing-dot {
    width: 8px;
    height: 8px;
    background-color: #a7f3d0; /* var(--c-mint) 민트색 */
    border-radius: 50%;
    opacity: 0.6;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

/* 점들이 순서대로 뛰도록 딜레이 설정 */
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0s; }

/* 점프 애니메이션 정의 */
@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); } /* 작아짐 */
    40% { transform: scale(1); }           /* 커짐 */
}