/* 폰트 및 기본 초기화 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
}

body { 
    font-family: 'Inter', sans-serif; 
    background: #fff; 
    height: 100vh; 
    display: flex; 
    overflow: hidden; 
}

/* --- 사이드바 디자인 --- */
.sidebar { 
    width: 260px; 
    background: #F9F9F9; 
    border-right: 1px solid #EEE; 
    display: flex; 
    flex-direction: column; 
    padding: 24px 16px; 
    flex-shrink: 0; 
}

.sidebar-header { 
    display: flex; 
    justify-content: space-between; 
    font-weight: 600; 
    font-size: 14px; 
    margin-bottom: 24px; 
    align-items: center; 
}

.new-chat-btn { 
    cursor: pointer; 
    width: 24px; 
    height: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 4px; 
    border: 1px solid #ddd; 
    background: #fff; 
    transition: background 0.2s;
}

.new-chat-btn:hover { background: #f0f0f0; }

.chat-list { 
    flex: 1; 
    overflow-y: auto; 
}

.chat-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 10px 12px; 
    font-size: 13px; 
    color: #444; 
    border-radius: 8px; 
    cursor: pointer; 
    margin-bottom: 4px; 
    transition: all 0.2s;
}

.chat-item:hover { background: #f0f0f0; }

.chat-item.active { 
    background: #FFF; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
    font-weight: 500; 
    color: #000;
}

.chat-title-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

.chat-actions { 
    display: none; 
    gap: 5px; 
}

.chat-item:hover .chat-actions { 
    display: flex; 
}

.chat-actions button { 
    background: none; 
    border: none; 
    cursor: pointer; 
    font-size: 12px; 
    opacity: 0.5; 
    padding: 2px;
}

.chat-actions button:hover { opacity: 1; }

/* --- 메인 레이아웃 --- */
.main-content { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    padding: 40px; 
    position: relative; 
    min-width: 0; 
}

.main-title { 
    font-size: 40px; 
    font-weight: 500; 
    margin-bottom: 24px; 
    letter-spacing: -1.5px; 
}

.split-view { 
    display: flex; 
    gap: 20px; 
    flex: 1; 
    margin-bottom: 140px; 
    min-height: 0; 
}

.panel { 
    flex: 1; 
    border: 1px solid #E5E5E5; 
    border-radius: 12px; 
    padding: 20px; 
    overflow-y: auto; 
    background: #FFF; 
}

/* --- 채팅 메시지 디자인 --- */
.chat-display { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.message-group { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    width: 100%; 
}

.message-box { 
    padding: 12px 16px; 
    border-radius: 12px; 
    font-size: 14px; 
    line-height: 1.6; 
    word-break: break-word; 
}

.user-msg { 
    background: #F3F3F3; 
    align-self: flex-start; 
    max-width: 85%; 
    color: #333;
}

.ai-msg { 
    display: flex; 
    gap: 12px; 
    width: 100%; 
    align-self: flex-start; 
}

.ai-icon { 
    font-size: 16px; 
    margin-top: 4px; 
    color: #555;
}

.ai-text { 
    flex: 1; 
    color: #222;
}

/* --- 코드 블록 디자인 (코드 박스 소환) --- */
pre {
    background: #1e1e1e; /* 어두운 배경 */
    color: #dcdcdc;
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 12px 0;
    border: 1px solid #333;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

code {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
}

/* --- 입체 파동 구체 (FACE Area) --- */
.face-panel { 
    background: #F7F7F7; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.orb {
    width: 180px; 
    height: 180px; 
    border-radius: 50%; 
    position: relative;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow: hidden;
    /* 입체감: 내부 광택 + 외부 그림자 */
    box-shadow: 
        inset -10px -10px 30px rgba(0,0,0,0.2), 
        inset 10px 10px 30px rgba(255,255,255,0.4), 
        0 15px 35px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #a8c0ff, #3f2b96);
    transition: all 1.5s ease;
}

/* 구체 내부 파동 효과 */
.orb::before, .orb::after {
    content: ''; 
    position: absolute; 
    width: 250%; 
    height: 250%; 
    top: -75%; 
    left: -75%;
    background: rgba(255, 255, 255, 0.15); 
    border-radius: 38%; 
    animation: wave-rotation 10s linear infinite; 
    z-index: 1;
}

.orb::after { 
    border-radius: 43%; 
    animation: wave-rotation 15s linear infinite reverse; 
    background: rgba(255, 255, 255, 0.1); 
}

/* 상태별 스타일 */
.orb.thinking { 
    background: linear-gradient(135deg, #f6d365, #fda085); 
    animation: float 3s infinite ease-in-out; 
}

.orb.speaking { 
    background: linear-gradient(135deg, #4facfe, #00f2fe); 
    animation: pulse 1.2s infinite ease-in-out; 
}

.face-emoji { 
    font-size: 60px; 
    z-index: 5; 
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

/* 애니메이션 정의 */
@keyframes wave-rotation { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

@keyframes float { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-12px); } 
}

@keyframes pulse { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(1.06); } 
}

/* --- 하단 입력창 --- */
.input-wrapper { 
    position: absolute; 
    bottom: 30px; 
    left: 40px; 
    right: 40px; 
}

.input-container { 
    border: 1px solid #E0E0E0; 
    border-radius: 16px; 
    padding: 16px 20px; 
    background: #FFF; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); 
}

.input-field { 
    width: 100%; 
    border: none; 
    outline: none; 
    resize: none; 
    font-size: 15px; 
    font-family: inherit; 
    margin-bottom: 12px;
    max-height: 180px; /* 최대 높이 제한 */
    overflow-y: auto;
}

.input-actions { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

.tools {
    color: #999;
    font-size: 18px;
    display: flex;
    gap: 15px;
}

.send-btn { 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    background: #000; 
    color: #FFF; 
    border: none; 
    cursor: pointer; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.send-btn:hover { transform: scale(1.1); }