
/* Hi2Chat Chat1 call quick buttons - 2026-09-19 */
.hi2_call_quickbar{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:8px 10px;
	margin:0;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.hi2_call_quick{
	min-width:96px;
	height:42px;
	padding:0 12px;
	border-radius:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:7px;
	cursor:pointer;
	font-size:13px;
	font-weight:700;
	color:#fff;
	box-shadow:0 3px 10px rgba(0,0,0,.15);
	white-space:nowrap;
}
.hi2_video_quick{background:linear-gradient(135deg,#1479ff,#3157e8);}
.hi2_audio_quick{background:linear-gradient(135deg,#1d8cff,#2947d8);}
.hi2_group_quick{background:linear-gradient(135deg,#ef3978,#ff4b55);}
.hi2_call_quick i{font-size:16px;}
.hi2_private_direct_call{transition:.15s ease;}
#private_video_call{color:#2d7dff;}
#private_audio_call{color:#20a86b;}
.hi2_private_direct_call:hover{transform:scale(1.06);}
@media screen and (max-width:800px){
	.hi2_call_quickbar{justify-content:flex-end;padding:7px 8px;gap:6px;}
	.hi2_call_quick{min-width:88px;height:38px;padding:0 9px;border-radius:10px;font-size:11px;gap:5px;}
	.hi2_call_quick i{font-size:14px;}
	#private_video_call,#private_audio_call{display:table-cell;}
}

/* Hi2Chat user-list direct call controls - 2026-09-19 */
.hi2_user_name_line{display:flex;align-items:center;min-width:0;gap:6px;}
.hi2_user_name_line>.username{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hi2_user_call_actions{display:flex;align-items:center;gap:4px;margin-left:2px;flex:0 0 auto;}
.hi2_user_call_btn{width:25px;height:25px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(80,110,150,.12);font-size:12px;transition:.15s ease;}
.hi2_user_video{color:#2781ff;}
.hi2_user_audio{color:#22a56b;}
.hi2_user_video.hi2_cam_live{color:#fff;background:#e52638;box-shadow:0 0 0 3px rgba(229,38,56,.14);}
.hi2_user_call_btn:hover{transform:scale(1.08);}
@media screen and (max-width:800px){
	.hi2_user_call_actions{gap:3px;}
	.hi2_user_call_btn{width:24px;height:24px;font-size:11px;}
}

/* Hi2Chat call placement correction - 2026-09-19 */
.hi2_live_quick{background:linear-gradient(135deg,#10b981,#059669);}
.hi2_user_call_cell{display:table-cell;vertical-align:middle;width:58px;text-align:right;white-space:nowrap;}
.hi2_user_call_cell .hi2_user_call_actions{display:none;}
.hi2_user_call_cell .hi2_user_call_btn{margin-left:3px;}
.hi2_user_call_btn.hi2_call_disabled{opacity:.35;cursor:not-allowed;}
.hi2_user_call_btn.hi2_cam_live{opacity:1!important;}
@media screen and (max-width:800px){
	.hi2_user_call_cell{width:54px;}
}

/* Hi2Chat: keep video/audio controls immediately after username - 2026-09-19 */
.user_item .user_item_data{
	width:auto !important;
	max-width:none !important;
}
.user_item .hi2_user_call_cell{
	display:table-cell !important;
	vertical-align:middle !important;
	width:54px !important;
	min-width:54px !important;
	padding-left:4px !important;
	padding-right:2px !important;
	text-align:left !important;
	white-space:nowrap !important;
}
.user_item .hi2_user_call_btn{
	margin:0 2px 0 0 !important;
}
.user_item .user_item_icon.icrank{
	margin-left:auto;
}

/* Hi2Chat: call icons directly after username text */
.hi2_user_name_inline{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;}
.hi2_user_name_inline>.username{display:inline-block!important;width:auto!important;max-width:calc(100% - 58px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0!important;}
.hi2_inline_calls{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;}
.hi2_inline_calls .hi2_user_call_btn{width:21px!important;height:21px!important;font-size:10px!important;margin:0!important;}

/* Hi2Chat: username first, then video/audio; same position online/offline */
.user_item .user_item_data{overflow:visible!important;}
.user_item .hi2_user_name_inline{
	display:flex!important;
	flex-direction:row!important;
	align-items:center!important;
	justify-content:flex-start!important;
	gap:5px!important;
	width:100%!important;
	min-width:0!important;
}
.user_item .hi2_user_name_inline>.username{
	order:1!important;
	flex:0 1 auto!important;
	display:block!important;
	width:auto!important;
	max-width:calc(100% - 54px)!important;
	min-width:0!important;
	margin:0!important;
	overflow:hidden!important;
	text-overflow:ellipsis!important;
	white-space:nowrap!important;
}
.user_item .hi2_inline_calls{
	order:2!important;
	display:inline-flex!important;
	flex:0 0 49px!important;
	align-items:center!important;
	justify-content:flex-start!important;
	gap:3px!important;
	margin-left:0!important;
}
.user_item .hi2_inline_calls .hi2_user_call_btn{
	width:22px!important;
	height:22px!important;
	min-width:22px!important;
	margin:0!important;
	padding:0!important;
}

/* Hi2Chat: username then video/audio on one line */
#container_user .user_item_data{min-width:0!important;overflow:visible!important;}
#container_user .hi2_user_name_inline{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important;width:100%!important;min-width:0!important;white-space:nowrap!important;}
#container_user .hi2_user_name_inline>.username{order:1!important;display:block!important;flex:0 1 auto!important;width:auto!important;min-width:0!important;max-width:calc(100% - 50px)!important;margin:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
#container_user .hi2_inline_calls{order:2!important;display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;gap:3px!important;flex:0 0 47px!important;width:47px!important;white-space:nowrap!important;}
#container_user .hi2_inline_calls .hi2_user_call_btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 22px!important;width:22px!important;height:22px!important;margin:0!important;padding:0!important;}

/* Hi2Chat: video/audio fixed immediately left of rank/status */
#container_user .user_item .hi2_calls_before_rank{
	display:table-cell!important;
	vertical-align:middle!important;
	width:54px!important;
	min-width:54px!important;
	padding:0 4px 0 1px!important;
	text-align:right!important;
	white-space:nowrap!important;
	overflow:visible!important;
}
#container_user .user_item .hi2_calls_before_rank .hi2_user_call_btn{
	display:inline-flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:22px!important;
	height:22px!important;
	min-width:22px!important;
	margin:0 0 0 2px!important;
	padding:0!important;
}

/* Hi2Chat: same fixed call-icon position for Users, Friends and Staff */
#container_friends .user_item .hi2_calls_before_rank,
#container_staff .user_item .hi2_calls_before_rank{
	display:table-cell!important;
	vertical-align:middle!important;
	width:49px!important;
	min-width:49px!important;
	padding:0 3px 0 0!important;
	text-align:right!important;
	white-space:nowrap!important;
}
#container_friends .user_item .hi2_calls_before_rank .hi2_user_call_btn,
#container_staff .user_item .hi2_calls_before_rank .hi2_user_call_btn{
	display:inline-flex!important;
	align-items:center!important;
	justify-content:center!important;
	width:22px!important;
	height:22px!important;
	min-width:22px!important;
	margin:0 0 0 2px!important;
	padding:0!important;
}

/* Hi2Chat Native Live Cam */
.hi2_livecam_panel{position:fixed;z-index:99999;width:420px;max-width:calc(100vw - 20px);background:#17191d;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:hidden;left:50%;top:90px;transform:translateX(-50%);color:#fff}
.hi2_livecam_head{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#202329;font-weight:700}.hi2_livecam_close{font-size:25px;cursor:pointer}.hi2_livecam_stage{position:relative;background:#08090a;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}.hi2_livecam_stage video{width:100%;height:100%;object-fit:cover}.hi2_livecam_stage #hi2_livecam_wait{position:absolute;color:#bbb}.hi2_livecam_controls{display:flex;justify-content:center;gap:8px;padding:11px;background:#202329}.hi2_livecam_controls button{border:0;border-radius:20px;padding:9px 14px;cursor:pointer}.hi2_livecam_controls .off{opacity:.45}.hi2_live_dot{color:#ff334f}.hi2_user_video.hi2_cam_live{background:#ff334f!important;color:#fff!important;box-shadow:0 0 0 2px rgba(255,51,79,.18)}@media(max-width:600px){.hi2_livecam_panel{width:calc(100vw - 16px);top:58px}.hi2_livecam_controls button{padding:8px 11px}}

/* Hi2Chat Group Call launcher */
.hi2_group_window{position:fixed;z-index:99998;left:50%;top:86px;transform:translateX(-50%);width:430px;max-width:calc(100vw - 18px);background:#fff;border-radius:15px;box-shadow:0 14px 45px rgba(0,0,0,.28);overflow:hidden}
.hi2_group_head{height:50px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;background:#202329;color:#fff;font-weight:700;cursor:move;touch-action:none;user-select:none}.hi2_group_head i{margin-right:7px}.hi2_group_close{font-size:26px;line-height:1;cursor:pointer}.hi2_group_body{padding:16px}.hi2_group_hero{text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 0 16px}.hi2_group_hero>i{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ff4161;color:#fff;font-size:22px}.hi2_group_hero b{font-size:18px}.hi2_group_hero small{color:#777}.hi2_group_actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hi2_group_actions button{border:0;border-radius:11px;padding:13px 8px;color:#fff;font-weight:700;cursor:pointer}.hi2_group_actions button i{display:block;font-size:20px;margin-bottom:5px}.hi2_group_video_btn{background:#2377ee}.hi2_group_audio_btn{background:#08aa78}.hi2_group_active{margin-top:17px;border-top:1px solid #eee;padding-top:12px}.hi2_group_section_title{display:flex;align-items:center;justify-content:space-between;font-weight:700;margin-bottom:8px}.hi2_group_section_title button{border:0;background:transparent;cursor:pointer}.hi2_group_empty{text-align:center;color:#888;padding:18px 8px}#hi2_group_rooms{max-height:250px;overflow:auto}
@media(max-width:600px){.hi2_group_window{top:57px;width:calc(100vw - 12px);max-height:calc(100vh - 70px)}.hi2_group_body{padding:13px}.hi2_group_actions{grid-template-columns:1fr 1fr}}

/* Hi2Chat Live Cam draggable + full size */
.hi2_livecam_head{cursor:move;user-select:none;touch-action:none}
.hi2_livecam_tools{display:flex;align-items:center;gap:10px}
.hi2_livecam_tools button{border:0;background:transparent;color:#fff;font-size:15px;cursor:pointer;padding:5px}
.hi2_livecam_dragging{opacity:.96}
.hi2_livecam_panel.hi2_livecam_full{left:0!important;top:0!important;transform:none!important;width:100vw!important;max-width:none!important;height:100vh!important;border-radius:0!important;display:flex!important;flex-direction:column!important}
.hi2_livecam_full .hi2_livecam_stage{flex:1!important;aspect-ratio:auto!important;min-height:0}
.hi2_livecam_full .hi2_livecam_stage video{object-fit:contain}
@media(max-width:600px){.hi2_livecam_head{touch-action:none}.hi2_livecam_panel.hi2_livecam_full{top:0!important;width:100vw!important;height:100dvh!important}}

/* Hi2Chat mobile Live Cam controls always visible */
@media(max-width:600px){
 #hi2_livecam_panel{display:flex;flex-direction:column;max-height:calc(100dvh - 64px);overflow:hidden}
 #hi2_livecam_panel.hidden{display:none!important}
 #hi2_livecam_panel .hi2_livecam_stage{flex:1 1 auto;min-height:180px;max-height:calc(100dvh - 175px)}
 #hi2_livecam_panel .hi2_livecam_controls{display:flex!important;flex:0 0 auto;position:relative!important;bottom:auto!important;z-index:3;padding:9px 6px!important;gap:5px!important;overflow-x:auto}
 #hi2_livecam_panel .hi2_livecam_controls button{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:38px}
 #hi2_livecam_panel #hi2_livecam_go:not(.hidden){display:inline-flex!important}
}

/* Hi2Chat Live Cam viewer management */
.hi2_livecam_viewers{background:#111318;border-top:1px solid rgba(255,255,255,.08);padding:8px 10px;font-size:12px}
.hi2_livecam_viewers>b{display:block;margin-bottom:6px}.hi2_livecam_viewer_list{display:flex;gap:5px;flex-wrap:wrap}
.hi2_viewer_chip{display:inline-flex;align-items:center;gap:5px;background:#2a2e35;border-radius:15px;padding:4px 5px 4px 8px}
.hi2_viewer_chip button{border:0;width:19px;height:19px;border-radius:50%;background:#e23c4f;color:#fff;cursor:pointer;line-height:17px}.hi2_no_viewers{color:#999}
#hi2_livecam_remote_grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:4px;pointer-events:none}
.hi2_remote_tile{position:relative;background:#050505;min-height:120px}.hi2_remote_tile video{width:100%;height:100%;object-fit:cover}.hi2_remote_name{position:absolute;left:7px;bottom:6px;z-index:2;background:rgba(0,0,0,.55);padding:3px 6px;border-radius:8px;font-size:11px}

/* Keep broadcaster viewer list visible below controls */
.hi2_livecam_panel:not(.hidden) .hi2_livecam_viewers:not(.hidden){display:block!important;max-height:105px;overflow:auto;flex:0 0 auto}
@media(max-width:600px){
 #hi2_livecam_panel .hi2_livecam_viewers:not(.hidden){display:block!important;max-height:88px;overflow:auto}
 #hi2_livecam_panel .hi2_livecam_stage video{transform:translateZ(0);will-change:contents}
}

/* Hi2Chat multi-live room: own preview + many remote cams */
#hi2_livecam_remote_grid{z-index:3;padding:5px;align-content:end;grid-template-columns:repeat(auto-fit,minmax(105px,1fr))}
#hi2_livecam_remote_grid:not(.has_remote){display:none}
.hi2_remote_tile{height:105px;min-height:0;border:2px solid rgba(255,255,255,.28);border-radius:8px;overflow:hidden;cursor:pointer;pointer-events:auto;box-shadow:0 2px 9px rgba(0,0,0,.35)}
.hi2_remote_tile.hi2_remote_focus{position:absolute;inset:5px;height:auto;z-index:20;border-color:#fff}
.hi2_remote_tile.hi2_remote_focus video{object-fit:contain;background:#000}
.hi2_livecam_stage>video{position:absolute;inset:0;z-index:1}
#hi2_livecam_wait{z-index:25;pointer-events:none}
@media(max-width:600px){
 #hi2_livecam_remote_grid{grid-template-columns:repeat(2,minmax(90px,1fr));align-content:end}
 .hi2_remote_tile{height:88px}
 .hi2_remote_tile.hi2_remote_focus{height:auto}
}

/* Live Cam floating popup refinement */
#hi2_livecam_panel{width:560px!important;max-width:calc(100vw - 24px)!important;min-width:320px;min-height:280px;max-height:calc(100vh - 20px);resize:both;display:flex;flex-direction:column}
#hi2_livecam_panel.hidden{display:none!important}
#hi2_livecam_panel .hi2_livecam_stage{flex:1 1 auto;min-height:300px;aspect-ratio:auto!important;overflow:hidden}
#hi2_livecam_panel #hi2_livecam_main{position:absolute;left:6px;top:6px;bottom:6px;width:62%;border:2px solid #22b7d6;border-radius:10px;overflow:hidden;background:#000;z-index:2}
#hi2_livecam_panel #hi2_livecam_main>video{width:100%;height:100%;object-fit:cover}
#hi2_livecam_panel .hi2_livecam_main_name{position:absolute;left:8px;bottom:7px;z-index:5;background:rgba(0,0,0,.6);color:#fff;padding:3px 7px;border-radius:9px;font-size:11px;pointer-events:none}
#hi2_livecam_panel .hi2_main_mic_state{margin-left:5px;color:#45d483;font-weight:700}
#hi2_livecam_panel .hi2_main_mic_state.off{color:#ff5265}
#hi2_livecam_panel #hi2_livecam_remote_grid{position:absolute;left:63%;right:6px;top:6px;bottom:6px;z-index:3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:6px;pointer-events:none}
#hi2_livecam_panel #hi2_livecam_remote_grid.has_remote{display:grid}
#hi2_livecam_panel .hi2_remote_tile{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;min-height:0;pointer-events:auto;border:1px solid rgba(255,255,255,.22);border-radius:9px;overflow:hidden;background:#171717}
#hi2_livecam_panel .hi2_remote_tile video{width:100%;height:100%;object-fit:cover}
#hi2_livecam_panel .hi2_remote_tile.hi2_remote_selected{border:2px solid #22b7d6;box-shadow:0 0 0 1px rgba(34,183,214,.3)}
#hi2_livecam_panel .hi2_tile_mute{position:absolute;right:5px;top:5px;z-index:8;width:27px;height:27px;min-width:0!important;padding:0!important;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;cursor:pointer}
#hi2_livecam_panel .hi2_tile_mute.off{background:#d83b4d}
#hi2_livecam_panel .hi2_source_mic{position:absolute;right:36px;top:5px;z-index:8;width:27px;height:27px;border-radius:50%;background:rgba(0,0,0,.62);color:#45d483;display:flex;align-items:center;justify-content:center;pointer-events:none}
#hi2_livecam_panel .hi2_source_mic.off{background:#d83b4d;color:#fff}
#hi2_livecam_panel .hi2_mic_state{position:absolute;right:5px;top:5px;z-index:8;width:27px;height:27px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;display:flex;align-items:center;justify-content:center}
#hi2_livecam_panel .hi2_remote_name{position:absolute;left:5px;bottom:5px;z-index:8;max-width:calc(100% - 10px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgba(0,0,0,.62);color:#fff;padding:2px 6px;border-radius:8px;font-size:11px}
#hi2_livecam_panel .hi2_livecam_controls button{min-width:76px}
#hi2_livecam_panel .hi2_livecam_volume{display:inline-flex;align-items:center;gap:6px;min-width:105px;color:#fff}
#hi2_livecam_panel .hi2_livecam_volume input{width:75px;accent-color:#fff}
#hi2_livecam_panel #hi2_livecam_mic.off{background:#d83b4d;color:#fff;opacity:1}
@media(max-width:600px){#hi2_livecam_panel{width:calc(100vw - 12px)!important;min-width:0;resize:none;top:58px;max-height:calc(100dvh - 64px)}#hi2_livecam_panel .hi2_livecam_stage{min-height:330px}#hi2_livecam_panel #hi2_livecam_main{width:62%;left:5px;top:5px;bottom:5px}#hi2_livecam_panel #hi2_livecam_remote_grid{left:64%;right:5px;top:5px;bottom:5px;grid-template-columns:1fr;grid-template-rows:repeat(4,minmax(0,1fr));gap:5px}#hi2_livecam_panel .hi2_remote_tile.hi2_remote_selected{border:2px solid #22b7d6}#hi2_livecam_panel .hi2_livecam_controls{flex-wrap:wrap}#hi2_livecam_panel .hi2_livecam_controls button{min-width:68px;padding:8px 9px!important}#hi2_livecam_panel .hi2_livecam_volume{min-width:95px}#hi2_livecam_panel .hi2_livecam_volume input{width:62px}}
/* Hi2Chat group-call invite selector */
.hi2_group_invite_users{max-height:180px;overflow:auto;border:1px solid rgba(128,128,128,.2);border-radius:12px;padding:6px;margin-top:6px}
.hi2_group_invite_user{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer}
.hi2_group_invite_user:hover{background:rgba(128,128,128,.1)}
.hi2_group_invite_user img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.hi2_group_invite_user span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hi2_group_invite_user input{width:18px;height:18px}
.hi2_group_invite_user i{opacity:.25}.hi2_group_invite_user:has(input:checked) i{opacity:1;color:#35c977}
.hi2_group_invite_empty{padding:14px;text-align:center;opacity:.65;font-size:12px}
/* Hi2Chat incoming group-call invite */
.hi2_group_invite_popup{position:fixed;right:18px;top:75px;width:min(390px,calc(100vw - 24px));z-index:999999;background:#202329;color:#fff;border-radius:16px;box-shadow:0 14px 45px rgba(0,0,0,.35);padding:14px;display:grid;grid-template-columns:48px 1fr;gap:11px;align-items:center}
.hi2_gip_icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e73f68;font-size:20px}.hi2_gip_text{display:flex;flex-direction:column;gap:3px}.hi2_gip_text span{font-size:12px;opacity:.78}.hi2_gip_actions{grid-column:1/-1;display:flex;gap:8px}.hi2_gip_actions button{flex:1;border:0;border-radius:9px;padding:10px;font-weight:700;cursor:pointer}.hi2_gip_actions .accept{background:#35c977;color:#fff}.hi2_gip_actions button:not(.accept){background:#3b3f46;color:#fff}
@media(max-width:600px){.hi2_group_invite_popup{top:62px;right:12px}}
/* Hi2Chat Unicode Tamil fallback: preserve user-selected Latin username fonts */
:lang(ta), [lang="ta"]{font-family:"Noto Sans Tamil","Nirmala UI","Latha","Arial Unicode MS",sans-serif!important}

.hi2_call_count_badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);color:#fff;font-size:11px;font-weight:800;line-height:20px;}
