@charset "UTF-8";

/**
 * roomSkin03 — Figma 8:359 red / gold theme overrides.
 * Loaded after room.css; only applies when body has .roomSkin03.
 */

/* --- Page base (solid red, no bg03 image) --- */
body.roomSkin03 {
	background-color: #890000 !important;
	background-image: none !important;
	color: #fff;
}

/* --- Top bar --- */
body.roomSkin03 .lay-top {
	background-color: #a00100 !important;
}

body.roomSkin03 .wrapper {
	background: rgba(137, 0, 0, 0.35) !important;
}

/* --- Header (inline styles in block_top.php) --- */
body.roomSkin03 .header-btn-save {
	background-color: #ffdb27 !important;
	color: #790001 !important;
}

body.roomSkin03 .header-btn-save i {
	color: #790001 !important;
}

body.roomSkin03 .header-btn-skin {
	background-color: #fff !important;
	color: #c20000 !important;
}

body.roomSkin03 .header-btn-skin svg path {
	fill: #c20000 !important;
}

body.roomSkin03 .btnUserLogin {
	background-color: #fff !important;
	color: #c20000 !important;
}

body.roomSkin03 .btnUserLogin:hover {
	color: #c20000 !important;
}

/* --- Left sidebar (block_left_01.php) --- */
body.roomSkin03 .lay-main-left {
	background-color: rgba(0, 0, 0, 0.22) !important;
}

body.roomSkin03 #left-sidebar-custom {
	background-color: rgba(89, 0, 0, 0.5) !important;
}

body.roomSkin03 .sidebar-users-header .count-wrapper {
	color: #ffbb27 !important;
}

body.roomSkin03 .confirm-online-count {
	background: #ffdb27 !important;
	color: #790001 !important;
	border: none !important;
}

body.roomSkin03 .sidebar-user-list::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.25);
}

/* --- Right chat column --- */
body.roomSkin03 .lay-main-right {
	background-color: rgba(139, 59, 59, 0.3) !important;
	border: 2px solid #b94444 !important;
}

/* --- Chat tab strip --- */
body.roomSkin03 .layui-tab-room .layui-tab-title {
	background: rgba(0, 0, 0, 0.12) !important;
}

body.roomSkin03 .layui-tab-room .layui-tab-title li.layui-this {
	background: rgba(255, 219, 39, 0.38) !important;
	color: #fff !important;
	border-bottom-color: rgba(0, 0, 0, 0.15) !important;
}

/* --- New chat list (room.css .chat-item) --- */
body.roomSkin03 .chat-item .msg-bubble {
	background-color: rgba(255, 255, 255, 0.15) !important;
	color: #fff !important;
}

body.roomSkin03 .chat-item.self .msg-bubble {
	background-color: #ffdb27 !important;
	color: #790001 !important;
	border-radius: 10px 0 10px 10px !important;
}

body.roomSkin03 .chat-item .u-info-row .account {
	color: rgba(255, 255, 255, 0.88) !important;
}

body.roomSkin03 .chat-item.self .u-info-row .account {
	color: rgba(121, 0, 1, 0.9) !important;
}

body.roomSkin03 .chat-item .ctime {
	color: rgba(255, 255, 255, 0.55) !important;
}

/* --- Chat input bar --- */
body.roomSkin03 .dialog-chat-post .input-area .editinput {
	background-color: rgba(255, 255, 255, 0.15) !important;
	border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

body.roomSkin03 .dialog-chat-post .input-area .editinput:focus-within {
	background-color: rgba(255, 255, 255, 0.22) !important;
	border-color: rgba(255, 255, 255, 0.35) !important;
}

body.roomSkin03 .dialog-chat-post .input-area .editinput .sendbtn {
	background: #ffdb27 !important;
	background-image: none !important;
	color: #790001 !important;
}

body.roomSkin03 .dialog-chat-post .input-area .editinput .sendbtn:hover {
	background: #f0c820 !important;
}

body.roomSkin03 .dialog-chat-post .input-area .editinput .ctextarea.empty:before {
	color: rgba(255, 255, 255, 0.5) !important;
}

body.roomSkin03 .dialog-chat-post .input-area .editinput .faceBtn-trigger {
	color: rgba(255, 255, 255, 0.75) !important;
}

body.roomSkin03 .dialog-chat-post .input-area .editinput .faceBtn-trigger:hover {
	background-color: rgba(255, 255, 255, 0.12) !important;
	color: #fff !important;
}

/* Toolbar icon chips */
body.roomSkin03 .dialog-chat-post .input-area .toolbar .tbtn {
	background-color: #e63a3a !important;
}

body.roomSkin03 .dialog-chat-post .input-area .toolbar .tbtn:hover {
	background-color: #d12f2f !important;
}

/* --- Middle column (block_midd.php) --- */
body.roomSkin03 .teacher-pill,
body.roomSkin03 .notice-pill {
	background: rgba(255, 255, 255, 0.15) !important;
}

body.roomSkin03 .notice-icon {
	color: #ffdb27 !important;
}

body.roomSkin03 .videoArea {
	background: #2a0606 !important;
}

body.roomSkin03 .videoBottom {
	background: rgba(255, 255, 255, 0.12) !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
}

/* --- User list slide-in panel --- */
body.roomSkin03 .lay-userpanel .toggle {
	background: rgba(230, 58, 58, 0.65) !important;
}

body.roomSkin03 .lay-userpanel .user-list .userlist-search {
	background: rgba(137, 0, 0, 0.35) !important;
	border-bottom-color: rgba(0, 0, 0, 0.35) !important;
}

body.roomSkin03 .lay-userpanel .user-list .userlist-search .left,
body.roomSkin03 .lay-userpanel .user-list .userlist-search .right {
	background: rgba(89, 0, 0, 0.55) !important;
}

body.roomSkin03 .lay-userpanel .user-list .scroll {
	background: rgba(89, 0, 0, 0.45) !important;
}

body.roomSkin03 .lay-userpanel .user-list .userlist .user-item:hover {
	background: rgba(255, 255, 255, 0.08) !important;
}

/* --- Rank / report tabs --- */
body.roomSkin03 .bangdan-tit ul li.curr {
	color: #ffdb27 !important;
}

body.roomSkin03 .report-area .user-report ul li .sd-con {
	background-color: rgba(255, 255, 255, 0.12) !important;
}

body.roomSkin03 .reportManage {
	background-color: rgba(0, 0, 0, 0.15) !important;
}

/* --- Footer --- */
body.roomSkin03 .lay-bottom .main {
	color: rgba(255, 255, 255, 0.7) !important;
}

/* --- Header user dropdown accents --- */
body.roomSkin03 .user-down .profile-brief .avatar-wrap {
	border-color: #e63a3a !important;
}

body.roomSkin03 .user-down .menu-list a:hover {
	color: #c20000 !important;
}

/* --- Legacy notice marquee (if used) --- */
body.roomSkin03 .scroll-notice {
	background-color: rgba(0, 0, 0, 0.28) !important;
}