/* TalkTalk Desktop – PC Chat Layout (Reset + New Styles) */

/* Design tokens */
:root {
	--background: 0 0% 100%;
	--foreground: 222.2 84% 4.9%;
	--card: 0 0% 100%;
	--card-foreground: 222.2 84% 4.9%;
	--primary: 221.2 83.2% 53.3%;
	--primary-foreground: 210 40% 98%;
	--secondary: 210 40% 96%;
	--secondary-foreground: 222.2 84% 4.9%;
	--muted: 210 40% 96%;
	--muted-foreground: 215.4 16.3% 46.9%;
	--accent: 210 40% 96%;
	--accent-foreground: 222.2 84% 4.9%;
	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 210 40% 98%;
	--border: 214.3 31.8% 91.4%;
	--ring: 221.2 83.2% 53.3%;
	--radius: 10px;
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0;
	height: 100%;
}

body {
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow: hidden;
	/* 전체 페이지 스크롤 방지 */
}

/* Header */
.demo-header {
	position: fixed;
	inset: 0 0 auto 0;
	height: 60px;
	background: hsl(var(--card));
	border-bottom: 1px solid hsl(var(--border));
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
	z-index: 10;
}

.demo-title {
	font-size: 18px;
	font-weight: 700;
}

.demo-badge {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	padding: 4px 10px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 12px;
}

/* App root */
#desktop-app {
	padding-top: 60px;
	height: calc(100vh);
	display: flex;
}

.desktop-container,
#desktop-app .talktalk-desktop {
	display: flex;
	width: 100%;
	height: 100%;
	background: hsl(var(--background));
}

/* Sidebar (Left) */
.desktop-sidebar {
	width: 280px;
	flex-shrink: 0;
	background: hsl(var(--card));
	border-right: 1px solid hsl(var(--border));
	display: flex;
	flex-direction: column;
}

.sidebar-header {
	padding: 16px;
	border-bottom: 1px solid hsl(var(--border));
}

.sidebar-title {
	font-size: 16px;
	font-weight: 700;
}

.channel-list {
	flex: 1;
	overflow: auto;
	padding: 10px;
}

.channel-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 10px;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}

.channel-item .channel-more-btn {
	margin-left: auto;
	background: transparent;
	border: none;
	color: hsl(var(--muted-foreground));
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.channel-item .channel-more-btn:hover {
	color: hsl(var(--foreground));
}

.channel-item:hover {
	background: hsl(var(--muted));
}

.channel-item.active {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.channel-icon {
	width: 26px;
	height: 26px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	background: hsl(var(--muted));
	color: hsl(var(--muted-foreground));
}

.channel-item.active .channel-icon {
	background: hsl(var(--primary-foreground) / 0.2);
	color: hsl(var(--primary-foreground));
}

.channel-info {
	flex: 1;
	min-width: 0;
}

.channel-name {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.channel-status {
	font-size: 12px;
	opacity: .75;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.channel-badge {
	margin-left: auto;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: hsl(var(--destructive));
	color: hsl(var(--destructive-foreground));
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.new-channel-button {
	padding: 12px;
	border-top: 1px solid hsl(var(--border));
}

.new-channel-btn {
	width: 100%;
	padding: 10px;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	background: hsl(var(--background));
	color: hsl(var(--muted-foreground));
	cursor: pointer;
	transition: .2s;
}

.new-channel-btn:hover {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	border-color: hsl(var(--primary));
}

/* Main (Center) */
.desktop-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.chat-header {
	padding: 12px 16px;
	background: hsl(var(--card));
	border-bottom: 1px solid hsl(var(--border));
}

.chat-channel-name {
	font-weight: 700;
	font-size: 18px;
}

.chat-participants {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
}

.message-list {
	flex: 1;
	overflow: auto;
	padding: 12px;
	background: hsl(var(--muted) / 0.1);
	overscroll-behavior: contain;
}

/* Bubbles */
.message-item {
	display: flex;
	margin: 8px 0;
}

.message-item.own {
	justify-content: flex-end;
}

.message-wrapper {
	display: flex;
	gap: 8px;
	max-width: 78%;
}

.message-item.own .message-wrapper {
	flex-direction: row-reverse;
}

.message-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
}

.message-content {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: 12px;
	padding: 10px 12px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	color: hsl(var(--foreground));
}

.message-item.own .message-content {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.message-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}

.message-author {
	font-weight: 700;
	font-size: 12px;
	color: hsl(var(--primary));
}

.message-item.own .message-author {
	color: hsl(var(--primary-foreground));
	opacity: .9;
}

.message-time {
	font-size: 11px;
	color: hsl(var(--muted-foreground));
}

.message-item.own .message-time {
	color: hsl(var(--primary-foreground) / .85);
}

.message-text {
	font-size: 14px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

/* Attachments */
.file-attachments {
	margin-top: 6px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
}

.file-attachment {
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	background: hsl(var(--card));
	padding: 6px;
}

.image-attachment {
    position: relative;
    overflow: hidden;
}

/* 썸네일 로딩 오버레이 */
.image-preview-container { position: relative; }
.image-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.04);
}
.image-loading::after {
    content: '';
    width: 22px;
    height: 22px;
    border: 3px solid hsl(var(--muted-foreground));
    border-top-color: hsl(var(--foreground));
    border-radius: 50%;
    animation: tt-spin .8s linear infinite;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }

.image-thumbnail {
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: 8px;
	background: hsl(var(--muted));
}

.image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .4), transparent 60%);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 4px;
	padding: 4px;
	opacity: 0;
	transition: opacity .2s;
}

.image-attachment:hover .image-overlay {
	opacity: 1;
}

.image-filename {
	margin-top: 4px;
	font-size: 12px;
	color: hsl(var(--muted-foreground));
	text-align: center;
}

.file-btn {
	border: none;
	border-radius: 8px;
	padding: 4px 8px;
	font-size: 12px;
	cursor: pointer;
}

.preview-btn {
	background: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
}

.download-btn {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

/* Modal download button */
.file-modal-download {
	border: none;
	border-radius: calc(var(--radius));
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	cursor: pointer;
}

.file-modal-download:hover {
	filter: brightness(0.95);
}

/* Input */
.message-input-container {
	padding: 12px 16px;
	background: hsl(var(--card));
	border-top: 1px solid hsl(var(--border));
}

.message-input-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.message-input-wrapper {
	flex: 1;
	display: flex;
}

.message-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.message-textarea {
	width: 100%;
	min-height: 44px;
	max-height: 160px;
	padding: 10px;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
	font-size: 14px;
	resize: none;
	line-height: 1.5;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.message-textarea:focus {
	outline: none;
	border-color: hsl(var(--ring));
	box-shadow: 0 0 0 2px hsl(var(--ring) / .2);
}

.message-textarea::placeholder {
	color: hsl(var(--muted-foreground));
}

.message-send-btn,
.file-upload-btn {
	padding: 12px;
	border-radius: 10px;
	border: 0;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: .2s;
}

.message-send-btn {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.file-upload-btn {
	background: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
}

.message-send-btn:hover {
	filter: brightness(.95);
}

.file-upload-btn:hover {
	filter: brightness(.95);
}

.message-send-btn:disabled,
.file-upload-btn:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* Users (Right) */
.desktop-users {
	width: 280px;
	flex-shrink: 0;
	background: hsl(var(--card));
	border-left: 1px solid hsl(var(--border));
	display: none;
	flex-direction: column;
}

.users-header {
	padding: 12px 16px;
	border-bottom: 1px solid hsl(var(--border));
}

.users-title {
	font-weight: 700;
	font-size: 16px;
}

.users-subtitle {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
}

.users-search {
	padding: 12px 16px;
	border-bottom: 1px solid hsl(var(--border));
}

.users-search-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	background: hsl(var(--background));
	color: hsl(var(--foreground));
}

.users-list {
	flex: 1;
	overflow: auto;
	padding: 10px;
	display: grid;
	gap: 8px;
}

.user-item {
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	padding: 8px 10px;
}

.user-name {
	font-weight: 600;
	font-size: 14px;
}

.user-status {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
}

/* Modal for preview */
.file-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.file-modal {
	background: #fff;
	border-radius: 10px;
	width: min(90vw, 900px);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
	position: relative;
}

.file-modal-header,
.file-modal-footer {
	padding: 12px 16px;
	border-bottom: 1px solid hsl(var(--border));
	background: hsl(var(--card));
}

.file-modal-footer {
	border-top: 1px solid hsl(var(--border));
	border-bottom: none;
	text-align: right;
}

.file-modal-title {
	margin: 0;
	font-weight: 700;
}

.file-modal-close {
	position: absolute;
	right: 12px;
	top: 10px;
	background: transparent;
	border: none;
	font-size: 18px;
	cursor: pointer;
}

.file-modal-content {
	padding: 16px;
	background: #fff;
	flex: 1;
	overflow: auto;
}

/* Responsive */
@media (max-width: 1200px) {
	.desktop-users {
		display: none;
	}
}

@media (max-width: 768px) {
	.desktop-sidebar {
		position: absolute;
		left: -280px;
		top: 0;
		height: 100%;
		z-index: 20;
		transition: left .3s;
		box-shadow: 4px 0 12px hsl(var(--border));
	}

	.desktop-sidebar.open {
		left: 0;
	}

	.desktop-main {
		width: 100%;
	}
}

.sidebar-user-name {
	font-weight: 500;
	font-size: 0.875rem;
	color: hsl(var(--foreground));
}

.sidebar-user-status {
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	margin-top: 0.125rem;
}

/* Channel List */
.channel-list {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
}

.channel-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	margin-bottom: 0.25rem;
	border-radius: calc(var(--radius));
	cursor: pointer;
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

.channel-item:hover {
	background: hsl(var(--muted));
}

.channel-item.active {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	border-color: hsl(var(--primary));
}

.channel-icon {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	background: hsl(var(--muted));
	color: hsl(var(--muted-foreground));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.75rem;
	flex-shrink: 0;
}

.channel-item.active .channel-icon {
	background: hsl(var(--primary-foreground) / 0.2);
	color: hsl(var(--primary-foreground));
}

.channel-info {
	flex: 1;
	min-width: 0;
}

.channel-name {
	font-weight: 500;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.channel-status {
	font-size: 0.75rem;
	opacity: 0.7;
	margin-top: 0.125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.channel-badge {
	background: hsl(var(--destructive));
	color: hsl(var(--destructive-foreground));
	font-size: 0.75rem;
	padding: 0.125rem 0.375rem;
	border-radius: 999px;
	font-weight: 600;
	min-width: 18px;
	text-align: center;
}

.new-channel-button {
	padding: 1rem;
	border-top: 1px solid hsl(var(--border));
}

.new-channel-btn {
	width: 100%;
	padding: 0.75rem;
	border: 1px solid hsl(var(--border));
	border-radius: calc(var(--radius));
	background: hsl(var(--background));
	color: hsl(var(--muted-foreground));
	font-size: 0.875rem;
	cursor: pointer;
	transition: all 0.2s ease;
}

.new-channel-btn:hover {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	border-color: hsl(var(--primary));
}

/* Column 2: Chat Area (Center) */
.desktop-main {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: hsl(var(--background));
}

.chat-header {
	padding: 1rem 1.5rem;
	border-bottom: 1px solid hsl(var(--border));
	background: hsl(var(--card));
	flex-shrink: 0;
}


.user-list {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
}

.user-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem;
	border-radius: calc(var(--radius));
	transition: all 0.2s ease;
	cursor: pointer;
	margin-bottom: 0.25rem;
}

.user-item:hover {
	background: hsl(var(--muted));
}

.user-item.online {
	/* Add any online-specific styling */
}

.user-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.875rem;
	position: relative;
	flex-shrink: 0;
}

.user-status {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid hsl(var(--card));
	background: #10b981;
}

.user-status.away {
	background: #f59e0b;
}

.user-status.dnd {
	background: hsl(var(--destructive));
}

.user-status.offline {
	background: hsl(var(--muted-foreground));
}

.user-info {
	flex: 1;
	min-width: 0;
}

.user-name {
	font-weight: 500;
	font-size: 0.875rem;
	color: hsl(var(--foreground));
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.user-role {
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	margin-top: 0.125rem;
}

/* Empty States */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 3rem 2rem;
	flex: 1;
}

.empty-description {
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

/* Loading */
.loading-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	gap: 1rem;
	width: 100%;
}

.loading-spinner {
	width: 20px;
	height: 20px;
	border: 2px solid hsl(var(--muted));
	border-top: 2px solid hsl(var(--primary));
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

.loading-text {
	font-size: 0.875rem;
	color: hsl(var(--muted-foreground));
}

.user-modal-overlay {
	display: none;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Scrollbar */
/* 얇은 스크롤바 (내부 스크롤 영역에만 적용 권장) */
.message-list::-webkit-scrollbar,
.channel-list::-webkit-scrollbar,
.users-list::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.message-list::-webkit-scrollbar-track,
.channel-list::-webkit-scrollbar-track,
.users-list::-webkit-scrollbar-track {
	background: transparent;
}

.message-list::-webkit-scrollbar-thumb,
.channel-list::-webkit-scrollbar-thumb,
.users-list::-webkit-scrollbar-thumb {
	background: hsl(var(--muted-foreground) / 0.3);
	border-radius: 3px;
}

.message-list::-webkit-scrollbar-thumb:hover,
.channel-list::-webkit-scrollbar-thumb:hover,
.users-list::-webkit-scrollbar-thumb:hover {
	background: hsl(var(--muted-foreground) / 0.5);
}

/* Firefox */
.message-list,
.channel-list,
.users-list {
	scrollbar-width: thin;
	scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
}

/* 참여자 상세 모달 표시 토글 */
.user-modal-overlay.open {
	display: flex !important;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
	z-index: 1100;
}

/* Responsive */
@media (max-width: 1200px) {
	.desktop-users {
		display: none !important;
	}

	.desktop-main {
		border-right: none;
	}
}

@media (max-width: 768px) {
	.desktop-sidebar {
		position: absolute;
		left: -280px;
		top: 0;
		height: 100%;
		z-index: 50;
		transition: left 0.3s ease;
		box-shadow: 4px 0 12px hsl(var(--border));
	}

	.desktop-sidebar.open {
		left: 0;
	}

	.desktop-main {
		width: 100%;
	}

	.sidebar-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 40;
		display: none;
		backdrop-filter: blur(4px);
	}

	.sidebar-overlay.open {
		display: block;
	}

	.demo-header {
		padding: 0 1rem;
	}

	.message-input-container {
		padding: 0.75rem 1rem;
	}

	.message-list {
		padding: 0.75rem;
	}
}

/* ===== Message bubble and attachments ===== */
.message-item {
	display: flex;
	margin: 0.5rem 0;
}

.message-item.own {
	justify-content: flex-end;
}

.message-wrapper {
	display: flex;
	gap: 0.5rem;
	max-width: 80%;
}

.message-item.own .message-wrapper {
	flex-direction: row-reverse;
}

.message-avatar {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.75rem;
}

/* ===== Modals (Participant detail, User select, File) ===== */
/* Participant detail modal */
.user-modal-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
	z-index: 1100;
}

.user-modal-overlay.open {
	display: flex !important;
}

.user-modal {
	background: #fff;
	border-radius: 10px;
	width: min(90vw, 640px);
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
	position: relative;
	padding: 16px;
}

.user-modal-header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.user-modal-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.user-modal-info h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.user-modal-status {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
}

.user-modal-details {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 8px 12px;
	margin: 12px 0;
}

.user-modal-detail-label {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
}

.user-modal-detail-value {
	font-size: 14px;
	color: hsl(var(--foreground));
	word-break: break-word;
}

.user-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 8px;
}

.user-modal-btn {
	border: 0;
	border-radius: 8px;
	padding: 8px 12px;
	cursor: pointer;
	font-weight: 600;
}

.user-modal-btn-primary {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.user-modal-btn-secondary {
	background: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
}

.user-modal-close {
	position: absolute;
	right: 10px;
	top: 10px;
	background: transparent;
	border: 0;
	font-size: 18px;
	cursor: pointer;
}

/* User select modal (start direct chat) */
.user-select-modal-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .6);
	z-index: 1100;
}

.user-select-modal-overlay.open {
	display: flex !important;
}

.user-select-modal {
	background: #fff;
	border-radius: 10px;
	width: min(95vw, 720px);
	max-height: 90vh;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
	display: flex;
	flex-direction: column;
}

/* Channel actions modal */
.channel-actions-modal-overlay {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.6);
	z-index: 1200;
}
.channel-actions-modal-overlay.open { display: flex !important; }
.channel-actions-modal {
	background: #fff;
	border-radius: 10px;
	width: 360px;
	max-width: 95vw;
	box-shadow: 0 10px 25px rgba(0,0,0,.2);
}
.channel-actions-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid hsl(var(--border));
}
.channel-actions-header h3 { margin: 0; font-size: 16px; }
.channel-actions-header .actions-close {
	background: transparent; border: none; font-size: 16px; cursor: pointer; color: hsl(var(--muted-foreground));
}
.channel-actions-content { padding: 16px; }
.channel-actions-name { font-weight: 600; margin-bottom: 8px; }
.channel-actions-desc { color: hsl(var(--muted-foreground)); margin: 0; }
.channel-actions-footer {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	padding: 12px 16px;
	border-top: 1px solid hsl(var(--border));
}
.channel-actions-footer .btn { padding: 8px 12px; border-radius: 8px; border: 1px solid hsl(var(--border)); background: #fff; cursor: pointer; }
.channel-actions-footer .btn:hover { background: hsl(var(--muted)); }
.channel-actions-footer .btn-danger { background: #e53e3e; color: #fff; border-color: #e53e3e; }
.channel-actions-footer .btn-danger:hover { background: #c53030; border-color: #c53030; }

.user-select-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	border-bottom: 1px solid hsl(var(--border));
}

.user-select-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.user-select-close {
	background: transparent;
	border: 0;
	font-size: 18px;
	cursor: pointer;
}

.user-select-search {
	padding: 12px 16px;
	border-bottom: 1px solid hsl(var(--border));
}

.user-select-search input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
}

.user-select-content {
	flex: 1;
	overflow: auto;
	padding: 12px 16px;
}

.user-select-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px;
	border: 1px solid hsl(var(--border));
	border-radius: 10px;
	margin-bottom: 8px;
}

.user-select-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}

.user-select-info {
	flex: 1;
	min-width: 0;
}

.user-select-name {
	font-weight: 700;
	font-size: 14px;
}

.user-select-status {
	font-size: 12px;
	color: hsl(var(--muted-foreground));
}

.user-select-btn {
	border: 0;
	border-radius: 8px;
	padding: 8px 12px;
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	cursor: pointer;
	font-weight: 700;
}

.message-content {
	background: hsl(var(--card));
	border: 1px solid hsl(var(--border));
	border-radius: calc(var(--radius) + 6px);
	padding: 0.625rem 0.75rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
	color: hsl(var(--foreground));
}

.message-item.own .message-content {
	background: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.message-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}

.message-author {
	font-weight: 600;
	font-size: 0.8rem;
	color: hsl(var(--primary));
}

.message-item.own .message-author {
	color: hsl(var(--primary-foreground));
	opacity: 0.9;
}

.message-time {
	font-size: 0.72rem;
	color: hsl(var(--muted-foreground));
}

.message-item.own .message-time {
	color: hsl(var(--primary-foreground) / 0.8);
}

.message-text {
	font-size: 0.9rem;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}

.file-attachments {
	margin-top: 0.5rem;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 0.5rem;
}

.file-attachment {
	border: 1px solid hsl(var(--border));
	border-radius: calc(var(--radius));
	background: hsl(var(--card));
	padding: 0.5rem;
}

.image-attachment {
	position: relative;
	overflow: hidden;
}

.image-thumbnail {
	width: 100%;
	height: 100px;
	object-fit: cover;
	border-radius: calc(var(--radius));
	background: hsl(var(--muted));
}

.image-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 60%);
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.25rem;
	padding: 0.25rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.image-attachment:hover .image-overlay {
	opacity: 1;
}

.image-filename {
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: hsl(var(--muted-foreground));
	text-align: center;
}

.file-btn {
	border: none;
	border-radius: calc(var(--radius));
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	cursor: pointer;
}

.preview-btn {
	background: hsl(var(--secondary));
	color: hsl(var(--secondary-foreground));
}

.download-btn {
	background: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

.file-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.file-modal {
	background: #fff;
	border-radius: calc(var(--radius));
	width: min(90vw, 900px);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.file-modal-header,
.file-modal-footer {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid hsl(var(--border));
	background: hsl(var(--card));
}

.file-modal-footer {
	border-top: 1px solid hsl(var(--border));
	border-bottom: none;
	text-align: right;
}

.file-modal-title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.file-modal-close {
	position: absolute;
	right: 12px;
	top: 10px;
	background: transparent;
	border: none;
	font-size: 18px;
	cursor: pointer;
}

.file-modal-content {
	padding: 1rem;
	background: #fff;
	flex: 1;
	overflow: auto;
}

/* File preview pill in input area */
.file-preview-remove {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}

.file-preview-remove::before {
	content: '×';
}

/* File preview container (above input) */
.file-preview {
	display: flex;
	margin: 8px 0;
}

.file-preview-item {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
	background: hsl(var(--card));
	padding: 6px 10px;
}

.file-preview-info {
	display: flex;
	flex-direction: column;
}

.file-preview-name {
	font-size: 12px;
	font-weight: 600;
	color: hsl(var(--foreground));
}

.file-preview-size {
	font-size: 11px;
	color: hsl(var(--muted-foreground));
}

.file-preview-item>.file-preview-remove {
	margin-left: auto;
}