body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background: #f0f0f0;
			overflow: hidden;
		}
		.container {
			display: flex;
			height: 100vh;
			padding: 0;
			background: #1a1a1a;
		}
		.main-content {
			flex: 1;
			min-width: 600px;
			display: flex;
			flex-direction: column;
			padding: 10px;
		}
		.join-form {
			background: white;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			margin: 10px;
		}
		.video-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
			margin-bottom: 10px;
			flex: 1;
			height: calc(100vh - 80px);
		}
		.video-container {
			background: black;
			border-radius: 8px;
			overflow: hidden;
			position: relative;
			height: 100%;
		}
		.video-label {
			position: absolute;
			bottom: 10px;
			left: 10px;
			color: white;
			background: rgba(0,0,0,0.5);
			padding: 5px 10px;
			border-radius: 4px;
			font-size: 14px;
		}
		video {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
		.controls {
			display: flex;
			gap: 10px;
			justify-content: center;
			align-items: center;
			padding: 15px;
			background: white;
			border-radius: 8px;
			box-shadow: 0 2px 4px rgba(0,0,0,0.1);
			margin: 10px;
		}
		button {
			padding: 10px 20px;
			border: none;
			border-radius: 4px;
			background: #9e9e9e;
			color: white;
			cursor: pointer;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			gap: 8px;
		}
		button[onclick="joinRoom()"] {
			background: #2196F3;
		}
		button[onclick="joinRoom()"]:hover {
			background: #1976D2;
		}
		button.active {
			background: #4CAF50 !important;
		}
		button.inactive {
			background: #9e9e9e !important;
		}
		button:disabled {
			background: #ccc !important;
			cursor: not-allowed;
		}
		button i {
			font-size: 1.1em;
		}
		input {
			padding: 10px;
			border: 1px solid #ddd;
			border-radius: 4px;
			width: 200px;
		}
		.room-info {
			position: absolute;
			top: 10px;
			left: 10px;
			background: rgba(255, 255, 255, 0.9);
			padding: 5px 10px;
			border-radius: 4px;
			font-size: 14px;
			z-index: 1;
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.copy-icon {
			cursor: pointer;
			color: #666;
			transition: color 0.2s;
		}

		.copy-icon:hover {
			color: #4CAF50;
		}

		.copy-icon.copied {
			color: #4CAF50;
		}
		.fullscreen-btn {
			position: absolute;
			top: 10px;
			right: 10px;
			background: rgba(0, 0, 0, 0.5);
			border: none;
			border-radius: 4px;
			color: white;
			padding: 8px;
			cursor: pointer;
			transition: background 0.3s;
		}
		.fullscreen-btn:hover {
			background: rgba(0, 0, 0, 0.7);
		}
		.switch-camera-btn {
			position: absolute;
			bottom: 10px;
			right: 10px;
			background: rgba(0, 0, 0, 0.5);
			border: none;
			border-radius: 4px;
			color: white;
			padding: 5px 10px;
			cursor: pointer;
			transition: background 0.3s;
			font-size: 14px;
		}
		.switch-camera-btn:hover {
			background: rgba(0, 0, 0, 0.7);
		}
		.fullscreen-icon {
			font-size: 18px;
		}
		.chat-container {
			width: 300px;
			min-width: 320px;
			max-width: 50vw;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			border-left: 1px solid #e0e0e0;
			overflow: hidden;
		}
		.chat-header {
			display: none;
			padding: 8px 12px;
			background: #f0f0f0;
			border-bottom: 1px solid #e0e0e0;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			font-size: 14px;
		}
		.expand-btn {
			background: none;
			border: none;
			cursor: pointer;
			padding: 4px 8px;
			border-radius: 4px;
			color: #666;
		}
		.expand-btn:hover {
			background: #ddd;
		}
		.chat-container.expanded {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100% !important;
			max-width: 100% !important;
			min-width: 100% !important;
			height: 100% !important;
			z-index: 9999;
			border: none;
		}
		.chat-messages {
			flex: 1;
			overflow-y: auto;
			padding: 15px;
			background: #f8f9fa;
		}
		.chat-input-area {
			padding: 10px;
			background: white;
			border-top: 1px solid #e0e0e0;
			display: flex;
			flex-direction: column;
			gap: 8px;
			width: auto;
			box-sizing: border-box;
		}
		.chat-input-area textarea {
			flex: 1;
			width: 100%;
			min-height: 40px;
			max-height: 150px;
			padding: 10px;
			border: 1px solid #ddd;
			border-radius: 8px;
			outline: none;
			resize: vertical;
			font-family: inherit;
			font-size: inherit;
			line-height: 1.4;
			transition: border-color 0.3s;
			box-sizing: border-box;
			margin-bottom: 4px;
		}
		.chat-input-area textarea:focus {
			border-color: #007bff;
		}
		.chat-buttons {
			display: flex;
			gap: 8px;
			justify-content: flex-end;
			align-items: center;
			width: auto;
		}
		.file-label {
			cursor: pointer;
			padding: 8px 12px;
			border-radius: 4px;
			background: #2196F3;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.3s;
			min-width: 40px;
		}
		.file-label:hover {
			background: #1976D2;
		}
		.chat-buttons button {
			padding: 8px 20px;
			min-width: 120px;
			background: #2196F3;
			color: white;
			border: none;
			border-radius: 4px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			transition: background 0.3s;
		}
		.chat-buttons button:hover {
			background: #1976D2;
		}
		.chat-buttons i {
			font-size: 1.1em;
		}
		.message {
			margin-bottom: 8px;
			padding: 6px 10px;
			max-width: 75%;
			width: fit-content;
			word-wrap: break-word;
			line-height: 1.3;
			font-size: 14px;
		}
		.message.sent {
			background: #95ec69;
			color: #000;
			margin-left: auto;
			border-radius: 12px 12px 4px 12px;
		}
		.message.received {
			background: white;
			color: #000;
			margin-right: auto;
			border-radius: 12px 12px 12px 4px;
			box-shadow: 0 1px 2px rgba(0,0,0,0.1);
		}
		.message .time {
			font-size: 10px;
			color: #999;
			margin-left: 8px;
			display: inline;
			vertical-align: bottom;
		}
		.message.sent .time {
			color: #5a8f4a;
		}
		.message.system {
			background: rgba(0, 0, 0, 0.15);
			color: #fff;
			margin: 8px auto;
			max-width: fit-content;
			padding: 4px 12px;
			font-size: 12px;
			text-align: center;
			border-radius: 20px;
			box-shadow: none;
		}
		.file-message {
			display: flex;
			align-items: center;
			gap: 10px;
			background: inherit;
			color: inherit;
			padding: 5px;
			border-radius: 4px;
		}
		.file-label {
			cursor: pointer;
			padding: 8px;
			border-radius: 4px;
			background: #f1f1f1;
			display: flex;
			align-items: center;
			justify-content: center;
			min-width: 40px;
		}
		.file-label:hover {
			background: #e1e1e1;
		}
		.timestamp {
			font-size: 12px;
			color: #666;
			margin-top: 4px;
		}
		.file-progress {
			background: #f1f1f1;
			padding: 8px;
			border-radius: 4px;
			margin: 8px 0;
			text-align: center;
			font-size: 14px;
		}
		.resizer {
			width: 8px;
			background: transparent;
			cursor: col-resize;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.resizer-line {
			width: 2px;
			height: 100%;
			background: rgba(255, 255, 255, 0.2);
			transition: background 0.3s;
		}
		.resizer:hover .resizer-line {
			background: rgba(255, 255, 255, 0.5);
		}
		.file-message .file-info {
			display: flex;
			flex-direction: column;
			gap: 4px;
		}
		.file-message .file-name {
			font-weight: 500;
			color: inherit;
		}
		.file-message .file-size {
			font-size: 12px;
			opacity: 0.8;
		}
		.file-message i {
			font-size: 1.2em;
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		/* 基础响应式设置 */
		@media (max-width: 768px) { /* 平板和手机 */
			.container {
				flex-direction: column;
			}

			.main-content {
				min-width: unset;
				width: 100%;
				padding: 5px;
			}

			.video-grid {
				grid-template-columns: 1fr;
				height: auto;
				gap: 5px;
			}

			.video-container {
				aspect-ratio: 16/9;
				height: auto;
			}

			.controls {
				flex-wrap: wrap;
				padding: 8px;
				gap: 5px;
			}

			.controls button, 
			.controls input {
				flex: 1;
				min-width: 140px;
				font-size: 14px;
				padding: 8px;
			}

			.chat-container {
				width: 100%;
				max-width: 100%;
				min-width: unset;
				height: 300px;
			}

			.chat-header {
				display: flex;
			}

			.resizer {
				display: none;
			}
		}

		@media (max-width: 480px) { /* 手机 */
			.video-container {
				height: auto;
			}

			.controls {
				margin: 5px;
			}

			.controls button {
				padding: 6px 12px;
				font-size: 12px;
			}

			.video-label {
				font-size: 12px;
				padding: 3px 6px;
			}

			.chat-container {
				height: 250px;
			}

			.chat-header {
				display: flex;
			}

			.chat-input-area {
				padding: 5px;
			}

			.chat-buttons button {
				min-width: 80px;
				padding: 6px 12px;
			}

			.message {
				max-width: 95%;
				font-size: 14px;
			}
		}

		/* 横屏模式优化 */
		@media (max-width: 768px) and (orientation: landscape) {
			.container {
				flex-direction: row;
				height: 100vh;
				overflow: hidden;
			}

			.main-content {
				flex: 1;
				min-width: unset;
				height: 100vh;
				padding: 5px;
				display: flex;
				flex-direction: column;
				position: relative;
			}

			.video-grid {
				grid-template-columns: repeat(2, 1fr);
				gap: 5px;
				height: calc(100vh - 60px);
				margin-bottom: 60px;
			}

			.video-container {
				height: 100%;
				aspect-ratio: unset;
			}

			.video-container::before {
				display: none;
			}

			.video-container video {
				position: relative;
				object-fit: contain;
			}

			.controls {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 200px;
				background: rgba(255, 255, 255, 0.95);
				padding: 5px;
				margin: 0;
				gap: 5px;
				height: 50px;
				z-index: 1000;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
			}

			.controls button,
			.controls input {
				padding: 5px 8px;
				font-size: 12px;
				height: 30px;
				min-width: unset;
				flex: none;
			}

			.controls input {
				width: 100px;
				height: 28px;
			}

			.controls button i {
				font-size: 14px;
				margin-right: 4px;
			}

			.chat-container {
				width: 200px;
				min-width: 200px;
				height: 100vh;
				display: flex;
				flex-direction: column;
			}

			.chat-messages {
				flex: 1;
				padding: 5px;
			}

			.chat-input-area {
				padding: 5px;
				background: white;
				z-index: 1001;
			}

			.chat-input-area textarea {
				min-height: 30px;
				padding: 5px;
				font-size: 12px;
			}

			.chat-buttons {
				gap: 4px;
			}

			.chat-buttons button {
				padding: 4px 8px;
				min-width: 60px;
				font-size: 12px;
			}

			.file-label {
				padding: 4px;
			}

			.message {
				padding: 8px;
				margin-bottom: 8px;
				font-size: 12px;
			}

			/* 优化按钮图标显示 */
			.controls button i {
				margin-right: 2px;
				font-size: 1em;
			}

			/* 调整视频标签位置和大小 */
			.video-label {
				font-size: 10px;
				padding: 2px 4px;
			}

			/* 调整全屏按钮 */
			.fullscreen-btn {
				padding: 4px;
				top: 5px;
				right: 5px;
			}

			.fullscreen-icon {
				font-size: 14px;
			}
		}

		/* 针对特别矮的横屏设备（如 iPhone SE 横屏） */
		@media (max-width: 768px) and (orientation: landscape) and (max-height: 400px) {
			.video-grid {
				height: calc(100vh - 50px);
				margin-bottom: 50px;
			}

			.controls {
				height: 40px;
			}

			.controls button,
			.controls input {
				height: 28px;
				padding: 4px 6px;
				font-size: 11px;
			}

			.controls button i {
				font-size: 12px;
				margin-right: 2px;
			}

			/* 简化按钮文本 */
			.controls button span {
				display: none; /* 在超窄屏幕上只显示图标 */
			}
		}

		/* 针对 iPhone X 及以上机型的刘海屏适配 */
		@supports (padding: max(0px)) {
			@media (max-width: 768px) and (orientation: landscape) {
				.controls {
					padding-bottom: max(5px, env(safe-area-inset-bottom));
					padding-left: max(5px, env(safe-area-inset-left));
					padding-right: max(5px, env(safe-area-inset-right));
					bottom: env(safe-area-inset-bottom);
				}
			}
		}

		/* iPad Pro 优化 */
		@media (min-width: 769px) and (max-width: 1024px) {
			.main-content {
				min-width: 500px;
			}

			.chat-container {
				width: 280px;
			}

			.controls button {
				font-size: 14px;
			}
		}

		/* 确保视频容器在所有设备上都保持合适的比例 */
		.video-container {
			position: relative;
			overflow: hidden;
		}

		/* 添加视频容器的响应式高度 */
		@media (max-width: 768px) {
			.video-container::before {
				content: "";
				display: block;
				padding-top: 56.25%; /* 16:9 比例 */
			}

			.video-container video {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		/* 优化按钮在小屏幕上的显示 */
		@media (max-width: 480px) {
			.controls button i {
				margin-right: 4px;
			}

			.chat-buttons {
				gap: 4px;
			}

			.file-label {
				padding: 6px;
			}
		}

		/* 添加安全区域支持（针对刘海屏手机） */
		@supports (padding: max(0px)) {
			.container {
				padding-left: max(0px, env(safe-area-inset-left));
				padding-right: max(0px, env(safe-area-inset-right));
				padding-bottom: max(0px, env(safe-area-inset-bottom));
			}
		}

		/* 添加录制按钮样式 */
		#recordButton.active {
			background: #dc3545 !important; /* 录制时显示红色 */
		}

		#recordButton.active i {
			animation: pulse 1.5s infinite; /* 添加闪烁动画 */
		}

		@keyframes pulse {
			0% { opacity: 1; }
			50% { opacity: 0.5; }
			100% { opacity: 1; }
		}