@charset "utf-8";

:root {
	--hh:     50px;
	--fh:     105px;
	--r:      16px;
	--tr:     .15s ease;
}

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

body {
	height:100dvh;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	background:var(--bg);
	color:var(--text);
}

/* ── 자동 다크/라이트 ── */
@media(prefers-color-scheme:dark) {
	:root{
		--border:#2a2f45; --text:#dde1f0; --sub:#7a8aaa;
		--mine-bg:linear-gradient(135deg,#3b5bdb,#4dabf7);
		--other-bg:#232840;
		--input-bg:#181c27; --toolbar-bg:#1d2235;
	}
}

@media(prefers-color-scheme:light) {
	:root{
		--border:#dce1f5; --text:#1a1e30; --sub:#7a8aaa;
		--mine-bg:linear-gradient(135deg,#4c6ef5,#339af0);
		--other-bg:#fff;
		--input-bg:#fff; --toolbar-bg:#f5f7ff;
	}
}

[data-bs-theme="light"] {
	--border:#dce1f5; --text:#1a1e30; --sub:#7a8aaa;
	--mine-bg:linear-gradient(135deg,#4c6ef5,#339af0);
	--other-bg:#fff;
	--input-bg:#fff; --toolbar-bg:#f5f7ff;
}

[data-bs-theme="dark"] {
	--border:#2a2f45; --text:#dde1f0; --sub:#7a8aaa;
	--mine-bg:linear-gradient(135deg,#3b5bdb,#4dabf7);
	--other-bg:#232840;
	--input-bg:#181c27; --toolbar-bg:#1d2235;
}

/* ── 헤더 ── */
.chat-header {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:100;
	height:var(--hh);
	background:var(--bg2);
	border-bottom:1px solid var(--border);

	display:grid;
	grid-template-columns: auto 1fr auto;
	align-items:center;

	padding:0 1rem;
}

.room-name {
	justify-self:start;
	font-weight:700;
	font-size:1rem;
}

.header-guide {
	justify-self:center;
	font-size:.7rem;
	color:#ccc;
	white-space:nowrap;
}

.header-actions {
	justify-self:end;
	display:flex;
	gap:.2rem;
}

.icon-btn {
	background:none;
	border:none;
	cursor:pointer;
	color:var(--sub);
	font-size:1.2rem;
	padding:.3rem .4rem;
	border-radius:8px;
	transition:var(--tr);
}

/* ── 채팅 영역 ── */
#chatArea {
	margin-top:var(--hh);
	margin-bottom:var(--fh);
	overflow-y:auto;
	flex:1;
	padding:.75rem;
}

#chatArea::-webkit-scrollbar {
	width:4px;
}

#chatArea::-webkit-scrollbar-thumb {
	background:var(--border);
	border-radius:99px;
}

/* ── load more ── */
.load-more-wrap {
	text-align:center;
	margin:.4rem 0 .8rem;
}

.load-more-btn {
	font-size:.78rem;
	padding:.28rem .8rem;
	border-radius:99px;
	border:1px solid var(--border);
	background:none;
	cursor:pointer;
	color:var(--sub);
	font-family:var(--font);
	transition:var(--tr);
}

.load-more-btn:hover {
	color:var(--text);
}

/* ── 날짜 구분선 ── */
.date-divider {
	text-align:center;
	font-size:.7rem;
	color:var(--sub);
	margin:.6rem 0;
	font-family:var(--mono);
	display:flex;
	align-items:center;
	gap:.5rem;
}

.date-divider::before,
.date-divider::after {
	content:'';
	flex:1;
	height:1px;
	background:var(--border);
}

/* ── 메시지 행 ── */
.msg-row {
	display:flex;
	gap:.5rem;
	margin-bottom:.75rem;
	animation:fadeUp .2s ease;
}

.msg-row.mine {
	flex-direction:row-reverse;
}

@keyframes fadeUp {
	from {
		opacity:0;
		transform:translateY(6px)} to{opacity:1;
		transform:none
	}
}

.msg-col {
	max-width:72%;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
}

.msg-row.mine .msg-col {
	align-items:flex-end;
}

.msg-nick {
	font-size:0.8rem;
	color:var(--sub);
	margin-bottom:.3rem;
	padding:0 2px;
}

.avatar {
	width:20px;
	height:20px;
	border-radius:50%;
	display:inline-block;
	line-height:20px;
	text-align:center;
	font-size:.62rem;
	font-weight:700;
	color:#fff;
}

.bubble {
	padding:.55rem .85rem;
	background:var(--other-bg);
	color:var(--text);
	border-radius:var(--r);
	border-bottom-left-radius:4px;
	font-size:.875rem;
	line-height:1.55;
	box-shadow:0 1px 3px rgba(0,0,0,.07);
	word-break:break-word;
	border:1px solid var(--border);
}

.msg-row.mine .bubble {
	border-radius:var(--r);
	border-bottom-right-radius:4px;
}

.msg-time {
	font-size:.75rem;
	color:var(--sub);
	margin-top:.2rem;
	padding:0 2px;
	font-family:var(--mono);
}

/* ── 썸네일 ── */
.thumb {
	display:inline-block;
	border-radius:10px;
	overflow:hidden;
	cursor:pointer;
	position:relative;
	margin-top:.25rem;
	transition:var(--tr);
	max-width:200px;
	background:var(--bg3);
}

.thumb:hover {
	transform:scale(1.02);
}

.thumb img, .thumb video {
	display:block;
	max-width:200px;
	max-height:160px;
	object-fit:cover;
}

.play-icon {
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(0,0,0,.35);
	color:#fff;
	font-size:1.8rem;
}

.yt-play {
	width:40px;
	height:28px;
	background:#f00;
	border-radius:7px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1rem;
}

/* ── 오디오 썸네일 ── */
.audio-thumb {
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.55rem .75rem;
	background:var(--other-bg);
	border-radius:var(--r);
	cursor:pointer;
	transition:var(--tr);
	margin-top:.25rem;
	font-size:.82rem;
	max-width:220px;
}

.audio-thumb:hover {
	opacity:.8;
}

.audio-thumb i {
	font-size:1.4rem;
	color:#7c8cff;
	flex-shrink:0;
}

.audio-thumb span {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:var(--sub);
	font-size:.75rem;
}

/* ── 푸터 ── */
.chat-footer {
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	z-index:100;
	height:auto;
	background:var(--input-bg);
	border-top:1px solid var(--border);
	display:flex;
	flex-direction:column;
}

.toolbar {
	display:flex;
	align-items:center;
	gap:.3rem;
	padding:.4rem .7rem;
	background:var(--toolbar-bg);
	border-bottom:1px solid var(--border);
	flex-shrink:0;
}

.toolbar .icon-btn {
	font-size:1.25rem;
}

.toolbar-hint {
	margin-left:auto;
	font-size:.68rem;
	color:var(--sub);
}

.input-row {
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.45rem .7rem;
	flex:1;
}

#nickInput {
	width:86px;
	flex-shrink:0;
	border:none;
	outline:none;
	background:none;
	font-family:var(--font);
	font-size:.8rem;
	font-weight:600;
	color:var(--text);
	border-right:2px solid var(--border);
	padding-right:.5rem;
}

#nickInput::placeholder {
	color:var(--sub);
}

#msgInput {
    flex:1;
    width:100%;    /* ← 추가 */
    border:none;
    outline:none;
    resize:none;
    background:none;
    font-family:var(--font);
    font-size:.875rem;
    color:var(--text);
    line-height:1.45;
    max-height:72px;
    overflow-y:auto;
}

#msgInput::placeholder {
	color:var(--sub);
}

.send-btn {
	width:36px;
	height:36px;
	border-radius:50%; flex-shrink:0;
	border:none;
	background:var(--mine-bg);
	color:#fff;
	font-size:.9rem;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:var(--tr);
	box-shadow:0 2px 8px rgba(76,110,245,.35);
}

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

.send-btn:active {
	transform:scale(.94);
}

/* ── 이모지 피커 ── */
.emoji-wrap {
	position:fixed;
	bottom:calc(var(--fh) + 4px);
	left:.5rem;
	z-index:200;
	display:none;
}

.emoji-wrap.open {
	display:block;
	background-color: var(--bs-body-bg);
}

.emoji-grid {
	display:grid;
	grid-template-columns:repeat(8,1fr);
	gap:3px;
	padding:.5rem;
	border-radius:14px;
	background:var(--bg2);
	border:1px solid var(--border);
	box-shadow:0 4px 20px rgba(0,0,0,.15);
	max-height:180px;
	overflow-y:auto;
	font-size:1.25rem;
}

.emoji-btn {
	background:none;
	border:none;
	cursor:pointer;
	padding:.1rem;
	border-radius:5px;
	transition:var(--tr);
}

.emoji-btn:hover {
	transform:scale(1.3);
	background:var(--bg3);
}

/* ── 팝업 ── */
.media-modal {
	display:none;
	position:fixed;
	inset:0;
	z-index:500;
	background:rgba(0,0,0,.85);
	align-items:center;
	justify-content:center;
	padding:1rem;
}

.media-modal.open {
	display:flex;
}

.media-inner {
	position:relative;
	border-radius:14px;
	overflow:hidden;
	max-width:90vw;
	max-height:88dvh;
}

.media-inner img {
	display:block;
	max-width:90vw;
	max-height:88dvh;
	object-fit:contain;
}

.media-inner video {
	display:block;
	max-width:90vw;
	max-height:88dvh;
}

.media-inner iframe {
	display:block;
	border:none;
}

.media-close {
	position:absolute;
	top:.5rem;
	right:.5rem;
	background:#0009;
	border:none;
	color:#fff;
	width:34px;
	height:34px;
	border-radius:50%;
	font-size:1.2rem;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	backdrop-filter:blur(4px);
	transition:var(--tr);
}

.media-close:hover {
	background:#000b;
}

/* ── 업로드 토스트 ── */
.toast-bar {
	position:fixed;
	bottom:calc(var(--fh)+8px);
	right:1rem;
	z-index:300;
	background:#22c55e;
	color:#fff;
	padding:.35rem .8rem;
	border-radius:99px;
	font-size:.78rem;
	opacity:0;
	transform:translateY(6px);
	transition:var(--tr);
	pointer-events:none;
}

.toast-bar.show {
	opacity:1;
	transform:none;
}

/* ── 삭제 버튼 ── */
.del-btn {
	background:none; border:none; cursor:pointer;
	color:#e03131; font-size:.75rem;
	padding:0 .25rem; margin-left:.4rem;
	line-height:1; vertical-align:middle;
	border-radius:4px; opacity:0;
	transition:opacity .15s, background .15s;
}
/* 내 메시지는 항상 표시 */
.msg-row.mine .del-btn {
	opacity:1;
}
/* 관리자 모드 전체 표시 */
body.is-admin .del-btn {
	opacity:1;
}
.del-btn:hover {
	background:#ffe0e0; opacity:1;
}

/* ── 관리자 체크박스 ── */
.admin-chk {
	display:none;
	width:17px; height:17px;
	margin:3px 6px 0 0;
	cursor:pointer; flex-shrink:0;
	accent-color:#e03131;
}
body.is-admin .admin-chk {
	display:block;
}
body.is-admin .msg-row {
	display:flex !important;
	align-items:flex-start;
}

/* ── 관리자 액션바 ── */
.admin-bar {
	display:none;
	position:fixed;
	top:var(--hh);
	left:0;
	right:0;
	z-index:95;
	background:#c92a2a;
	color:#fff;
	padding:.35rem .75rem;
	align-items:center;
	gap:.45rem;
	font-size:.8rem;
	font-weight:600;
	box-shadow:0 2px 8px rgba(0,0,0,.25);
}

.admin-bar.open {
	display:flex;
}

.admin-bar-count {
	flex:1;
	font-size:.78rem;
}

.admin-bar button {
	background:#fff;
	color:#c92a2a;
	border:none;
	border-radius:7px;
	padding:.22rem .65rem;
	font-size:.76rem;
	font-weight:700;
	cursor:pointer;
	white-space:nowrap;
}

.admin-bar button.danger {
	background:#ff6b6b;
	color:#fff;
}

.admin-bar button:hover {
	filter:brightness(.92);
}

body.is-admin #chatArea {
	margin-top:calc(var(--hh) + 36px) !important;
}

/* ── IP 표시 (관리자) ── */
.msg-ip {
	font-size:.65rem;
	color:#e03131;
	margin-left:.4rem;
	cursor:pointer;
	text-decoration:underline dotted;
	display:none;
}

body.is-admin .msg-ip {
	display:inline;
}

/* ── IP 차단 팝업 ── */
.ip-modal {
	display:none;
	position:fixed;
	inset:0;
	z-index:600;
	background:rgba(0,0,0,.65);
	align-items:center;
	justify-content:center;
}

.ip-modal.open {
	display:flex;
}

.ip-box {
	background:var(--bg2,#fff);
	color:var(--text,#111);
	border-radius:16px;
	padding:1.4rem 1.6rem;
	min-width:300px;
	max-width:92vw;
	box-shadow:0 8px 32px rgba(0,0,0,.3);
}

.ip-box h5 {
	margin:0 0 .8rem;
	font-size:1rem;
	font-weight:700;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.ip-box h5 button {
	background:none;
	border:none;
	cursor:pointer;
	font-size:1.1rem;
	color:var(--sub,#999);
}

.ip-target {
	font-size:.82rem;
	color:#e03131;
	font-weight:700;
	background:#ffe0e0;
	padding:.25rem .6rem;
	border-radius:7px;
	margin-bottom:.9rem;
	display:inline-block;
}

.ip-box-actions {
	display:flex;
	gap:.5rem;
	flex-wrap:wrap;
	margin-bottom:1rem;
}

.ip-box-actions button {
	padding:.3rem .8rem;
	border:none;
	border-radius:8px;
	font-size:.8rem;
	font-weight:700;
	cursor:pointer;
}

.btn-ban {
	background:#e03131;
	color:#fff;
}

.btn-unban {
	background:#2f9e44;
	color:#fff;
}

.ip-banlist-title {
	font-size:.78rem;
	font-weight:700;
	margin-bottom:.4rem;
	opacity:.7;
}

.ip-banlist {
	list-style:none;
	padding:0;
	margin:0;
	max-height:180px;
	overflow-y:auto;
}

.ip-banlist li {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:.28rem .4rem;
	border-radius:6px;
	font-size:.8rem;
}

.ip-banlist li:hover {
	background:#f5f5f5;
}

[data-bs-theme="dark"] .ip-banlist li:hover {
	background:#2a2f45;
}

.ip-banlist li button {
	background:none;
	border:none;
	color:#e03131;
	cursor:pointer;
	font-size:.85rem;
	padding:0 .2rem;
}

/* ── YouTube 썸네일 반응형 ── */
.yt-thumb {
    position: relative;
    display: block;
    max-width: 200px;
    max-height: 160px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
}

.yt-thumb img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9; /* 기본은 16:9 */
}

/* 쇼츠 전용 썸네일 (9:16) */
.yt-thumb.shorts-thumb {
    max-width: 120px; /* 가로폭 조절 */
}

.yt-thumb.shorts-thumb img {
    aspect-ratio: 9 / 16;
}

/* ── YouTube iframe 팝업 ── */
.yt-frame-wrap {
    width: min(560px, 90vw);
    aspect-ratio: 16 / 9;
    margin: 0 auto;
}

/* 쇼츠 팝업 모드 */
.yt-frame-wrap.shorts-mode {
    width: min(350px, 80vw); 
    aspect-ratio: 9 / 16;
    max-height: 80dvh;
}

.yt-frame-wrap iframe {
    width: 100%; height: 100%;
    border: none; display: block;
}


/* ── 답장 버튼 ── */
.reply-btn {
	background:none;
	border:none;
	cursor:pointer;
	color:#3498db;
	font-size:.7rem;
	padding:0 .25rem;
	margin-left:.3rem;
	line-height:1;
	vertical-align:middle;
	opacity:0;
	transition:opacity .15s;
}

.msg-row:hover .reply-btn {
	opacity:1;
}

/* ── 답장 미리보기 바 (입력창 위) ── */
#replyBar {
	display:flex;
	align-items:center;
	gap:.5rem;
	padding:.4rem .7rem;
	background:var(--bs-secondary-bg, #f0f3f8);
	border-top:2px solid #3498db;
	font-size:.8rem;
}

#replyPreview {
	flex:1; overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	color:var(--bs-body-color, #333);
}

#replyPreview strong {
	color:#3498db;
}

#replyCancelBtn {
	background:none;
	border:none;
	cursor:pointer;
	color:#999;
	font-size:1rem;
	padding:0 .2rem;
	flex-shrink:0;
}

#replyCancelBtn:hover {
	color:#e03131;
}

/* ── 말풍선 안 인용 블록 ── */
.reply-quote {
	position: relative;
	border: 1px solid #3498db;
	background: rgba(52,152,219,.1);
	border-radius: 12px;
	padding: .35rem .65rem;
	margin-bottom: .65rem;
	font-size: .78rem;
	max-width: 260px;
	cursor: pointer;
}

/* mine: 오른쪽 아래 꼬리 */
.msg-row.mine .reply-quote::after {
	content: '';
	position: absolute;
	bottom: -12px;
	right: 14px;
	width: 0; height: 0;
	border-left: 0px solid transparent;
	border-right: 10px solid transparent;
	border-top: 12px solid #3498db;
}

/* non-mine: 왼쪽 아래 꼬리 */
.msg-row:not(.mine) .reply-quote::after {
	content: '';
	position: absolute;
	bottom: -12px;
	left: 14px;
	width: 0; height: 0;
	border-left: 10px solid transparent;
	border-right: 0px solid transparent;
	border-top: 12px solid #3498db;
}

.reply-quote .rq-nick {
	color: #3498db;
	font-weight: 700;
	margin-bottom: .1rem;
}

.reply-quote .rq-text {
	color: var(--bs-body-color, #555);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ── 멘션 드롭다운 ── */
.mention-dropdown {
	max-width:300px;
    display: none;
    position: absolute;
    bottom: 100%;
	left: 0;
	right: 0;
    background: var(--bs-body-bg, #fff);
    border: 1px solid #ddd;
    border-radius: 8px 8px 0 0;
    max-height: 220px;
    overflow-y: auto;
    z-index: 999;
    box-shadow: 0 -4px 12px rgba(0,0,0,.15);
}
.mention-dropdown.show {
	display: block;
}

.mention-item {
    display: flex;
	align-items: center;
	gap: 10px;
    padding: 9px 14px;
	cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    font-size: .88rem;
}

.mention-item:last-child {
	border-bottom: none;
}

.mention-item:hover, .mention-item.active {
    background: rgba(52,152,219,.1);
}

.mention-avatar {
    width: 30px;
	height: 30px;
	border-radius: 50%;
    display: flex;
	align-items: center;
	justify-content: center;
    font-weight: 700;
	color: #fff;
	font-size: 13px;
	flex-shrink: 0;
}

.mention-nick {
	font-weight: 600;
	color: var(--bs-body-color);
}

.mention-id {
	font-size: .75rem;
	color: #999;
}

.mention-loading, .mention-empty {
    padding: 12px;
	text-align: center;
	color: #999;
	font-size: .85rem;
}

/* ── 접속자 사이드바 ── */
#sidebarOverlay {
	display:none;
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.4);
	z-index:1099;
}

#sidebarOverlay.open {
	display:block;
}

#userSidebar {
	position:fixed;
	top:0;
	right:-280px;
	width:260px;
	height:100%;
	z-index:1100;
	background:var(--bs-body-bg,#fff);
	box-shadow:-4px 0 20px rgba(0,0,0,.2);
	transition:right .25s ease;
	display:flex;
	flex-direction:column;
}

#userSidebar.open {
	right:0;
}

.sidebar-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:.85rem 1rem;
	background:#1a1a2e;
	color:#fff;
	font-weight:700;
	font-size:.95rem;
	flex-shrink:0;
}

.sidebar-header button {
	background:none;
	border:none;
	color:#fff;
	cursor:pointer;
	font-size:1.1rem;
	padding:0;
}

.sidebar-user-list {
	list-style:none;
	margin:0;
	padding:.5rem 0;
	overflow-y:auto;
	flex:1;
}

.sidebar-user-list li {
	display:flex;
	align-items:center;
	gap:.65rem;
	padding:.55rem 1rem;
	font-size:.88rem;
	border-bottom:1px solid var(--bs-border-color,#f0f0f0);
	transition:background .15s;
}

.sidebar-user-list li:hover {
	background:rgba(52,152,219,.07);
}

.sidebar-user-avatar {
	width:32px;
	height:32px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	color:#fff;
	font-size:.8rem;
	flex-shrink:0;
}

.sidebar-user-nick {
	font-weight:600;
	color:var(--bs-body-color);
}

.sidebar-user-badge {
	margin-left:auto;
	font-size:.65rem;
	padding:.15em .45em;
	border-radius:6px;
	background:#3498db;
	color:#fff;
}

.sidebar-user-badge.anon {
	background:#95a5a6;
}