/* Small Talk 3단 레이아웃 */
.tri-panel-container { display: grid; grid-template-columns: 320px 1fr 320px; gap: 1.5rem; padding: 1.5rem; height: calc(100vh - var(--header-height) - var(--footer-height)); overflow: hidden; }

/* 공통 패널 스타일 */
.st-panel { background: var(--white); border: 1px solid var(--border-color); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.st-panel-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.st-panel-header h3 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; }
.st-panel-body { padding: 1.25rem 1.5rem; overflow-y: auto; flex-grow: 1; }

/* 왼쪽: 설정 패널 */
.settings-panel .st-panel-body { display: flex; flex-direction: column; }
.settings-form fieldset { border: none; padding: 0; margin: 0; }
.settings-form fieldset:disabled .setting-card,
.settings-form fieldset:disabled textarea { cursor: not-allowed; opacity: 0.6; }
.settings-form .form-group { margin-bottom: 1rem; }
.settings-form label { display: block; font-weight: 600; font-size: 0.9em; margin-bottom: 0.5rem; color: var(--text-primary); }
.settings-form textarea { width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 0.9em; background-color: var(--bg-light); min-height: 50px; resize: vertical; }
.settings-form textarea:focus { outline: none; border-color: var(--blue-dark); background-color: var(--white); }
.selectable-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.setting-card { padding: 0.5rem; border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; text-align: center; background-color: var(--bg-light); }
.setting-card .icon { font-size: 1.1rem; display: block; line-height: 1; }
.setting-card .title { font-weight: 600; font-size: 0.75em; margin-top: 0.25rem; display: block; }
.setting-card:hover { border-color: var(--teal-accent); transform: translateY(-2px); }
.setting-card.active { border-color: var(--teal-accent); background-color: var(--teal-accent); color: var(--white); transform: scale(1.05); box-shadow: 0 4px 10px rgba(0, 196, 154, 0.2); }
.setting-actions { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 0.75rem; }
.setting-actions button { width: 100%; padding: 0.75rem; font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: background-color 0.2s ease; }
.setting-actions .primary-btn { background-color: var(--blue-dark); color: var(--white); }
.setting-actions .secondary-btn { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); }
.setting-actions .secondary-btn:hover { background-color: var(--bg-light); color: var(--text-primary); }

/* 중앙: 채팅 패널 */
.chat-panel { position: relative; }
.chat-panel-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(248, 249, 250, 0.8); z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; transition: opacity 0.3s ease; }
.chat-panel-overlay.hidden { opacity: 0; pointer-events: none; }
.chat-panel-overlay p { font-size: 1.1rem; font-weight: 600; color: var(--text-secondary); }
.chat-window { flex-grow: 1; overflow-y: auto; padding: 1.5rem 1.5rem 3.2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.message-bubble { padding: 0.75rem 1.25rem; border-radius: 18px; max-width: 80%; line-height: 1.6; animation: fadeIn 0.3s ease-out; word-wrap: break-word; }
.message-bubble.ai { background-color: var(--bg-light); border: 1px solid var(--border-color); align-self: flex-start; border-bottom-left-radius: 4px; }
.message-bubble.user { background-color: var(--blue-dark); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
.thinking-indicator { display: flex; align-items: center; gap: 5px; padding: 0.75rem 1.25rem; }
.thinking-indicator span { width: 8px; height: 8px; background-color: var(--text-secondary); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.thinking-indicator span:nth-child(1) { animation-delay: -0.32s; }
.thinking-indicator span:nth-child(2) { animation-delay: -0.16s; }
.chat-input-area { border-top: 1px solid var(--border-color); display: flex; padding: 1rem; gap: 1rem; flex-shrink: 0; position: relative; }

/* ✨ 수정된 부분 시작 */
#chat-input {
    flex-grow: 1;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 0.75rem 110px 0.75rem 1.25rem; /* 오른쪽 패딩 추가 */
    font-size: 1em;
    transition: all 0.2s ease;
    resize: none; /* 크기 조절 비활성화 */
    overflow-y: hidden; /* 스크롤바 숨김 */
    font-family: inherit; /* 폰트 상속 */
    line-height: 1.5; /* 줄 간격 조절 */
}
/* ✨ 수정된 부분 끝 */

#chat-input:focus { outline: none; border-color: var(--blue-dark); }
#chat-input:disabled { background-color: var(--bg-light); cursor: not-allowed; }
#send-btn { min-width: 75px; padding: 0 1.5rem; border-radius: 20px; border: none; background-color: var(--blue-dark); color: var(--white); font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; }
#send-btn:disabled { background-color: var(--text-secondary); cursor: not-allowed; }
.hidden { display: none !important; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1.0); } }

/* ✨ 수정된 부분 시작 */
.char-counter {
    position: absolute;
    bottom: 35px; /* 위치 조정 */
    right: 115px; /* 위치 조정 */
    font-size: 0.75em;
    color: var(--text-secondary);
    background-color: var(--white);
    padding: 0 5px;
}
/* ✨ 수정된 부분 끝 */

/* 오른쪽: 도구 패널 */
.tools-panel { display: grid; grid-template-rows: auto 1fr; }
.history-panel-body { padding: 1rem 1.5rem; overflow-y: auto; }
.history-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.history-slot { border: 1px dashed var(--border-color); border-radius: 8px; padding: 0.6rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 80px; max-width: 90px; transition: all 0.2s ease; }
.history-slot.filled { border-style: solid; background-color: var(--bg-light); }
.history-slot.filled:hover { border-color: var(--blue-dark); }
.slot-content { flex-grow: 1; cursor: pointer; }
.slot-content.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.85em; }
.slot-title { font-weight: 600; font-size: 0.8em; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-date { font-size: 0.7em; color: var(--text-secondary); }
.slot-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.slot-actions button { font-size: 0.7em; padding: 0.25rem 0.5rem; border-radius: 4px; cursor: pointer; border: 1px solid var(--border-color); background-color: var(--white); width: 100%; transition: all 0.2s ease; }
.slot-actions button:hover { background-color: var(--bg-light); border-color: var(--text-primary); }
#notes-pad { width: 100%; height: 100%; border: none; padding: 1.5rem; font-family: inherit; font-size: 0.95em; resize: none; border-top: 1px solid var(--border-color); }
#notes-pad:focus { outline: none; }