/* wp-content/mu-plugins/swn-realtime-message-widget/swn-realtime-message-widget.css
 * KBoard default 스킨 최신글 위젯(#kboard-default-latest) 디자인 정합 + 모던 채팅 입력 UI.
 * KBoard CSS 변수(--kboard-*)를 우선 사용하고, 미로드 페이지용 라이트 폴백 값은
 * kboard/skin/default/style.css 의 :root 값과 동일하게 지정.
 * 다크모드는 sw-simple-dark-mode 가 body.dark-mode 에 --kboard-* 를 재정의하므로 자동 전환.
 */

.swn-realtime-widget-container {
    width: 100%; /* 부모 폭에 맞춰 유동(반응형) */
    max-width: 100%;
    height: auto; /* 세로 유동 — 목록 높이는 JS 가 limit(줄 수) × 행 높이로 산정 */
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    font-family: var(--kboard-font-family, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, "Noto Sans KR", "Helvetica Neue", Arial, sans-serif);
    font-size: 13px;
    line-height: 1.6;
    color: var(--kboard-text, #1e293b);
    background: var(--kboard-bg, #ffffff);
    border: 1px solid var(--kboard-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
}
.swn-realtime-widget-container *,
.swn-realtime-widget-container *::before,
.swn-realtime-widget-container *::after {
    box-sizing: inherit;
}
/* 테마 전역 div/p margin 규칙 방어 리셋 (tagDiv 등) */
.swn-realtime-widget-container div,
.swn-realtime-widget-container p {
    margin: 0;
}

/* 헤더 — title 속성 지정 시에만 렌더 */
.swn-realtime-widget-title {
    padding: 8px 12px;
    background: var(--kboard-bg-alt, #f8fafc);
    border-bottom: 1px solid var(--kboard-border, #e2e8f0);
    font-size: 12px;
    font-weight: 600;
    color: var(--kboard-text-muted, #64748b);
    text-align: center;
    flex-shrink: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 목록 영역 — 롤링 클리핑 컨테이너. 좌우·상단 여백으로 시원하게 */
.swn-realtime-messages-display {
    flex-grow: 1;
    min-height: 96px; /* JS 산정 전·빈 상태 폴백 높이 */
    overflow: hidden; /* 롤링: 스크롤바 대신 트랙이 위로 슬라이드 */
    padding: 8px 14px 0;
    background: var(--kboard-bg, #ffffff);
    display: flex;
    flex-direction: column;
    position: relative;
}

.swn-realtime-roll-track {
    will-change: transform;
}

.swn-realtime-messages-display p.no-messages-found {
    margin: auto;
    color: var(--kboard-text-muted, #64748b);
    font-size: 12px;
    text-align: center;
}

/* 행 — KBoard latest 룩 (가벼운 구분선 + hover) */
.swn-realtime-message-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 2px;
    line-height: 1.4;
    border-bottom: 1px solid var(--kboard-border, #e2e8f0);
    flex-shrink: 0;
    transition: opacity 0.4s ease, background-color 0.15s; /* 신규 페이드 인 + hover */
}
.swn-realtime-message-item:last-child {
    border-bottom: none;
}
.swn-realtime-message-item:hover {
    background-color: var(--kboard-bg-alt, #f8fafc);
}
.swn-realtime-message-item.is-new {
    opacity: 0;
}

.swn-realtime-message-title {
    flex-grow: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--kboard-text, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
    transition: color 0.15s;
}
.swn-realtime-message-item:hover .swn-realtime-message-title {
    color: var(--kboard-primary, #2563eb);
}

.swn-realtime-message-date {
    color: var(--kboard-text-muted, #64748b);
    font-size: 11px;
    flex-shrink: 0;
}

/* 입력 영역 — 모던 채팅 스타일: 구분선 없이 여백으로 분리, 필드는 부드러운 필(pill) */
.swn-realtime-input-area {
    display: flex;
    flex-direction: row;
    align-items: center; /* 전송 버튼 = 입력창 세로 중앙 정렬 */
    flex-shrink: 0;
    margin-top: 8px; /* 목록과의 간격 확보 → 입력창을 아래로 */
    padding: 4px 10px 10px;
    gap: 6px;
    background: transparent;
    border-top: none;
}

.swn-realtime-input-area textarea {
    flex-grow: 1;
    min-width: 0;
    background: var(--kboard-bg-alt, #f1f5f9); /* 부드러운 필드 배경 */
    color: var(--kboard-text, #1e293b);
    border: 1px solid transparent; /* 평상시 테두리 없이 배경으로만 구분 */
    border-radius: 18px;
    padding: 8px 12px; /* 내부 패딩 확대 — 입력 내용 시인성 */
    font-size: 12px;
    font-family: inherit;
    resize: none;
    /* 전송 버튼(36px)과 정확히 동일 높이 고정 — 테마 textarea 규칙(min-height 등) 차단 */
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    line-height: 18px;
    overflow: hidden;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.swn-realtime-input-area textarea::placeholder {
    color: var(--kboard-text-muted, #94a3b8);
}
.swn-realtime-input-area textarea:focus {
    outline: none;
    background: var(--kboard-bg, #ffffff);
    /* 테마 textarea:focus { border-color:#b0b0b0 !important } 카운터 */
    border-color: var(--kboard-primary, #2563eb) !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.swn-realtime-input-area button {
    background-color: var(--kboard-primary, #2563eb);
    color: #fff;
    border: none;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border-radius: 18px; /* 필드와 동일한 필 형태 */
    flex-shrink: 0;
    height: 36px; /* 입력창과 동일 높이 → 중앙 정렬 시 딱 맞음 */
    min-width: 44px;
    transition: background-color 0.15s, box-shadow 0.15s;
}
.swn-realtime-input-area button:hover {
    background-color: var(--kboard-primary-hover, #1d4ed8);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}
.swn-realtime-input-area button:disabled {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

/* 피드백 토스트 */
#swn-realtime-message-feedback {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--kboard-danger, #ef4444);
    padding: 3px 6px;
    font-size: 11px;
    text-align: center;
    display: none;
    box-sizing: border-box;
}
#swn-realtime-message-feedback.success {
    color: #16a34a;
}

/* 다크모드 — sw-simple-dark-mode 가 body.dark-mode 에서 --kboard-* 변수를 재정의하므로
 * 색은 자동 전환. 전역 강제 규칙(body.dark-mode span { color:#e0e0e0 !important })이
 * 덮는 muted/hover 색만 카운터 지정(§38 패턴: 상위 specificity + !important). */
body.dark-mode .swn-realtime-widget-container span.swn-realtime-message-date {
    color: var(--kboard-text-muted, #9aa4b2) !important;
}
body.dark-mode .swn-realtime-widget-container .swn-realtime-message-item:hover span.swn-realtime-message-title {
    color: var(--kboard-primary, #3b82f6) !important;
}
body.dark-mode .swn-realtime-widget-container #swn-realtime-message-feedback {
    background-color: rgba(30, 30, 30, 0.92);
}