/* static/css/base.css */

/* --- CSS 변수 정의 --- */
:root {
    /* Light Theme (Default) */
    --background-color: #f8f9fa;
    --text-color: #212529;
    --secondary-background-color: #ffffff;
    --secondary-text-color: #495057;
    --border-color: #dee2e6;
    --hover-background-color: #e9ecef;
    --primary-color: #007bff;
    --primary-hover-color: #0056b3;
    --primary-text-color: #ffffff;
    --link-color: #007bff;
    --link-hover-color: #0056b3;
    --input-background: #ffffff;
    --input-focus-background: #ffffff;
    --input-border-color: #ced4da;
    --input-focus-border-color: #80bdff;
    --input-focus-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
    --modal-background: #ffffff;
    --modal-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    --danger-color: #dc3545;
    --danger-hover-color: #c82333;
    --success-color: #28a745;
    --success-hover-color: #218838;
    --info-text-color: #6c757d;
    --info-background-color: #e9ecef;
    --code-background: rgba(135, 131, 120, 0.15);
    --code-text-color: #eb5757;
    --pre-background: #f8f9fa;
    --pre-text-color: #212529;
    --scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
    --scrollbar-track-color: rgba(0, 0, 0, 0.05);
    /* RGB 변수 */
    --danger-color-rgb: 220, 53, 69;
    --success-color-rgb: 40, 167, 69;
    --info-text-color-rgb: 108, 117, 125;

    /* Specific component colors */
    --header-background: #343a40;
    --header-text-color: #e9ecef;
    --header-hover-text-color: #ffffff;
    --chat-list-background: #f8f9fa;
    --chat-list-border-color: #e9ecef;
    --chat-list-item-hover-bg: #e9ecef;
    --chat-list-item-active-bg: var(--primary-color);
    --chat-list-item-active-hover-bg: var(--primary-hover-color);
    --chat-list-item-active-text: var(--primary-text-color);
    --user-message-bg: var(--primary-color);
    --user-message-text: var(--primary-text-color);
    --gemini-message-bg: #f1f3f5;
    --gemini-message-text: var(--text-color);
    --message-time-color: #868e96;
    --chat-input-bg: #ffffff;
    --chat-input-textarea-bg: #f8f9fa;
    --chat-input-textarea-focus-bg: #ffffff;
}

body[data-theme="dark"],
body[data-theme="auto"]:root:not(body[data-override-theme="light"]) {
    /* Dark Theme Overrides */
    --background-color: #121212;
    --text-color: #e0e0e0;
    --secondary-background-color: #1e1e1e;
    --secondary-text-color: #b0b0b0;
    --border-color: #333;
    --hover-background-color: #2a2a2a;
    --primary-color: #a600ff; /* Instagram Dark theme inspired */
    --primary-hover-color: #8a00d1;
    --primary-text-color: #ffffff;
    --link-color: #bb86fc; /* Material Design dark theme accent */
    --link-hover-color: #d0a0ff;
    --input-background: #2a2a2a;
    --input-focus-background: #2e2e2e;
    --input-border-color: #444;
    --input-focus-border-color: var(--primary-color);
    --input-focus-shadow: 0 0 0 0.2rem rgba(166, 0, 255, .25);
    --modal-background: #1e1e1e;
    --modal-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    --danger-color: #cf6679; /* Material Design dark theme error */
    --danger-hover-color: #e0808f;
    --success-color: #03dac6; /* Material Design dark theme success */
    --success-hover-color: #35ebd8;
    --info-text-color: #aaa;
    --info-background-color: #2a2a2a;
    --code-background: rgba(200, 200, 200, 0.15);
    --code-text-color: #f08080; /* Lighter red for dark */
    --pre-background: #282c34; /* Atom One Dark style */
    --pre-text-color: #abb2bf; /* Atom One Dark style */
    --scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
    --scrollbar-track-color: rgba(255, 255, 255, 0.05);
    /* RGB 변수 */
    --danger-color-rgb: 207, 102, 121;
    --success-color-rgb: 3, 218, 198;
    --info-text-color-rgb: 170, 170, 170;

    /* Specific component dark colors */
    --header-background: #1e1e1e;
    --header-text-color: #bdbdbd;
    --header-hover-text-color: #ffffff;
    --chat-list-background: #1e1e1e;
    --chat-list-border-color: #333;
    --chat-list-item-hover-bg: #2a2a2a;
    --chat-list-item-active-bg: var(--primary-color);
    --chat-list-item-active-hover-bg: var(--primary-hover-color);
    --chat-list-item-active-text: var(--primary-text-color);
    --user-message-bg: var(--primary-color);
    --user-message-text: var(--primary-text-color);
    --gemini-message-bg: #2e2e2e;
    --gemini-message-text: var(--text-color);
    --message-time-color: #aaa;
    --chat-input-bg: #1e1e1e;
    --chat-input-textarea-bg: #2a2a2a;
    --chat-input-textarea-focus-bg: #2e2e2e;
}

/* System preference detection for auto theme */
@media (prefers-color-scheme: dark) {
    body[data-theme="auto"]:root:not(body[data-override-theme="light"]) {
        /* Dark theme variables apply automatically via the main dark theme block */
    }
}
@media (prefers-color-scheme: light) {
     body[data-theme="auto"]:root:not(body[data-override-theme="dark"]) {
         /* Light theme variables are the default :root vars */
     }
}

/* --- 기본 및 레이아웃 수정 --- */
html {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    min-height: 100%; /* 뷰포트 높이만큼 최소 높이 보장 */
    box-sizing: border-box;
    /* padding-top: 60px; 헤더 fixed 처리 */
    scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}
body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track { background: var(--scrollbar-track-color); }
body::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-color); border-radius: 4px; }

/* 채팅 페이지 전용 body 스타일 */
body.chat-page {
    overflow: hidden; /* 중요: 채팅 페이지만 전체 스크롤 막기 */
}

main {
    flex: 1 1 auto; /* Flex 아이템으로 남은 공간 차지, 줄어들 수 있음 */
    max-width: 1000px; /* 일반 페이지 최대 너비 */
    margin: 60px auto 0 auto; /* 상단 헤더 높이만큼 마진 + 좌우 auto */
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto; /* 일반 페이지 내용 많을 때 main 영역 스크롤 */
    display: flex; /* 내부 컨텐츠가 높이를 채우도록 */
    flex-direction: column;
}

/* 채팅 페이지 main 스타일 */
body.chat-page main {
     padding: 0; /* 채팅 페이지는 패딩 없음 */
     max-width: none; /* 채팅 페이지는 최대 너비 없음 */
     margin: 60px 0 0 0; /* 상단 마진만 유지 (푸터 없으므로 하단 마진 불필요) */
     overflow: hidden; /* main 자체 스크롤 제거 */
     height: calc(100vh - 60px); /* 헤더 제외한 정확한 높이 */
}

/* Footer (채팅 페이지에서는 숨겨짐) */
footer {
    text-align: center; padding: 20px;
    background-color: var(--secondary-background-color);
    border-top: 1px solid var(--border-color);
    font-size: 0.9em; color: var(--secondary-text-color);
    width: 100%; box-sizing: border-box;
    flex-shrink: 0; /* 내용 적어도 하단 고정 */
}
body.chat-page footer {
    display: none; /* 채팅 페이지에서는 푸터 숨김 */
}

a {
    color: var(--link-color);
    text-decoration: none;
}
a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}