/* Report Interaction Styles */

/* 메세지 앵커 (본문 구절) — 브랜드색 점선 밑줄 + 💬 힌트.
   용어 설명·툴팁의 웹 관습을 따라 "부가 설명 있음"을 전달한다.
   hover 시에만 배경 틴트 — padding을 고정해 레이아웃 이동 없음.
   카드형(.flow-card/.point-card)은 style.css의 오버라이드가 적용됨 */
.ai-msg-link {
    background-color: transparent;
    color: var(--anchor-text);
    font-weight: 500;
    padding: 0 2px;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    border-bottom: 1.5px dashed var(--brand);
    transition: background-color 0.2s, border-color 0.2s;
}

.ai-msg-link:hover {
    background-color: var(--brand-tint);
    border-bottom-style: solid;
    color: var(--brand-dark);
}

/* Modal Overlay */
.ai-msg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11000;
}

/* Modal Box */
.ai-msg-modal {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    width: 400px;
    max-width: 90%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    animation: fadeIn 0.3s ease-out;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ai-msg-modal h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

.ai-msg-modal textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    resize: none;
    font-family: inherit;
    font-size: 1rem;
}

.ai-msg-modal textarea:focus {
    outline: none;
    border-color: var(--brand);
}

.ai-msg-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ai-msg-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    transition: filter 0.2s;
}

.ai-msg-btn:hover {
    filter: brightness(0.9);
}

.ai-msg-btn-cancel {
    background-color: #f1f3f5;
    color: #495057;
}

.ai-msg-btn-save {
    background-color: var(--brand);
    color: white;
}

/* 개별 플로팅 버튼(히스토리/저장/초기화/로그아웃/질문)은 설정 모달로 통합됨.
   🔒 설정 버튼은 셸 푸터(#ai-site-footer) 맨 끝 — 스타일은 style/settings.css의 #ai-settings-btn 참고. */

/* Reuse Modal Styles or Add New Ones for History */
.ai-history-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20000;
}

.ai-history-modal {
    background: white;
    padding: 24px;
    border-radius: 12px;
    width: 600px;
    max-width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.ai-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.ai-history-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: #333;
}

.ai-history-close {
    cursor: pointer;
    font-size: 1.5em;
    color: #999;
}

.ai-history-content {
    flex: 1;
    overflow-y: auto;
}

/* Date Group */
.ai-history-date-group {
    margin-bottom: 24px;
}

.ai-history-date-header {
    display: flex;
    align-items: center;
    background-color: #f5f5f5;
    padding: 10px 15px;
    border-radius: 8px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.ai-history-play-date-btn {
    margin-left: auto;
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ai-history-play-date-btn:hover {
    background-color: #45a049;
}

/* Message Point (Middle Click) */
.ai-msg-point {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--alert-soft);
    /* Red point */
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transform: translate(-50%, -50%);
    /* Center on coordinates */
    z-index: 9000;
    transition: transform 0.2s, background-color 0.2s;
}

.ai-msg-point:hover {
    transform: translate(-50%, -50%) scale(1.3);
    background-color: #fa5252;
    z-index: 9100;
}

/* Message Item */
.ai-history-msg-item {
    display: flex;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background-color 0.2s;
    align-items: flex-start;
}

.ai-history-msg-item:hover {
    background-color: #f9f9ff;
}

.ai-history-msg-item:last-child {
    border-bottom: none;
}

.ai-history-msg-time {
    color: #888;
    font-size: 0.85em;
    min-width: 60px;
    margin-top: 3px;
}

.ai-history-msg-body {
    flex: 1;
}

.ai-history-msg-author {
    font-weight: bold;
    color: #333;
    margin-bottom: 3px;
}

.ai-history-msg-text {
    color: #555;
    line-height: 1.4;
}

.ai-msg-list::-webkit-scrollbar,
.ai-history-content::-webkit-scrollbar {
    width: 8px;
}

.ai-msg-list::-webkit-scrollbar,
.ai-history-content::-webkit-scrollbar {
    width: 8px;
}

.ai-msg-list::-webkit-scrollbar-thumb,
.ai-history-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
    transition: background 0.3s;
}

.ai-msg-list.show-scroll::-webkit-scrollbar-thumb,
.ai-history-content.show-scroll::-webkit-scrollbar-thumb {
    background: #ccc;
}

/* 재생 중 텍스트 앵커 — "지금 설명 중" 안내이므로 경고성 빨강 대신 브랜드 톤 펄스.
   (빨강은 [경고]·[강조] 전용으로 유지) */
.ai-msg-link.ai-playing {
    background-color: var(--brand-tint-strong) !important;
    color: var(--brand-dark) !important;
    border-bottom-style: solid;
    border-bottom-color: var(--brand);
    z-index: 100;
    animation: ai-anchor-pulse 1.2s ease-in-out infinite;
}

/* 재생 중 위치 점(주석 포인트)은 기존 빨간 강조 유지 */
.ai-msg-point.ai-playing {
    background-color: var(--alert) !important;
    color: white !important;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
    z-index: 100;
    border-color: var(--alert);
    animation: ai-blink 1s infinite;
}

@keyframes ai-anchor-pulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(78, 115, 223, 0);
    }

    50% {
        box-shadow: 0 0 0 4px var(--brand-shadow-strong);
    }
}

/* Chart Highlight during Playback - REMOVED as per user request (only data blinks) */
/* .chart-card.ai-playing, canvas.ai-playing { ... } */

@keyframes ai-blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}