* { box-sizing: border-box; }
body, html { margin: 0; padding: 0px !important; overflow: hidden; }
body { margin: 0; padding: 0; width:100vw; height: 100vh; overflow: hidden; background: #f0f0f0; font-family:"Roboto Regular"; }
body.chat-active{ background:#f7f7f7; }
a { color: blue; }
#remote-video { position: absolute; left:0; width:100%; top: 71px; height:auto; z-index: 0; }
#local-video 
{ 
	position: absolute; top: 12px; right: 10px; border:solid 1px #aaa; z-index: 3; display: block; float:right; display:inline-block; 
	width: 32px; max-width: 120px; max-height: 90px; border-radius: 5px; 
}

#requestCamera { position: absolute; top: 52px; right: 10px; }

#copyright { position: absolute; bottom: 10px; left:10px; color: #999; font-size: 0.8em; }
#copyright a { color: #aa9; text-decoration: none; }
#statsDiv { display:flex; align-items:center; gap:5px; width:fit-content; font-size:.9em; color:#999; float:left; margin:10px 0 0 10px; }

hr { width: 25px; height: 1px; line-height: 1px; margin: 3px; background-color: #999; border: none; }
.trans { background: transparent !important; }
#nav { text-align: center; width:100%; margin-bottom: 15px; }

#debug { position: absolute; top:81px; left:10px; color:white; font-family: courier; line-height: 14px; width: 30%; height:auto; font-size: 11px; text-align: left; overflow-y: auto; }

.borders span { display: block; color: #444; font-size: 0.7em; }
.borders span::before { content: "· "; }
.borders span::after { content: " ·"; }
.borders { display: inline-block; border:solid 1px #9a9a9a; padding: 5px; border-radius: 5px; margin: 0 2px; line-height: 10px; }

#status, #error { color: #000; font-size: 1em; line-height: 1.5em; }

#status, #error 
{
	display:none; margin-top: 10px auto; text-align: left; vertical-align: top; background: rgba(250, 250, 250, 0.9); 
	border:dotted 1px rgba(240, 240, 240, 0.9); padding: 10px; z-index: 1;
	border-radius: 5px; white-space: nowrap; width: fit-content; min-width: 480px; margin: 0 auto;
}
#status { margin-bottom: 10px; }
#cs_relay, #cs_ping, #cs_bandwidth, #cs_media { font-size: 0.9em !important; }

#brandDiv,#statusDiv { position: absolute; top: 0px; left: 0; display:block; width:100%; height: auto; vertical-align: top; text-align: center; z-index:1; }
#brandBox { display: block; width: fit-content; margin: 10px auto; color: #999; }
#brand { display: inline-block; }
#statusDiv { top: 90px; }
#statusBox { margin: 10px auto; }
.statusIcon { display: inline-block; width: 35px; vertical-align:top; }

.red { color: red !important; }
.green { color: #0ed818 !important; }
.darkgreen { color: #06910d !important; }
.white { color: white; }
.grey { color: #999; }
.orange { color: #bc5600; }
.invisible { opacity: 0; }

.feather-chevron-down, .feather-chevron-up, .feather-corner-down-left, .feather-upload 
{ width: 26px; height: 26px; stroke: #333; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.small { font-size: 0.6em; }

.statusRow, .errorRow { display: block; opacity: 0; animation: statusFadeIn 250ms ease-out forwards; }
@keyframes statusFadeIn {
	from { opacity: 0; transform: translateY(2px); }
	to { opacity: 1; transform: translateY(0); }
}

#progress { display:none; z-index:1; height:12px; overflow-x:hidden; line-height:10px; text-align:left; margin:10px 5px 10px 5px; width:100%; max-width: 320px; margin: 10px auto; }
#progressBar { background:#0ed818; height:3px; width:100%; border-radius:3px; transform-origin:center; animation:grow 5s ease-in-out alternate infinite; }
@keyframes grow { from { transform:scaleX(0); } to { transform:scaleX(1); } }

#chatBox
{
	position:fixed; left:50%; transform:translateX(-50%); bottom:30px; width:85%; max-width:850px; min-height:60px; max-height:calc(100vh - 70px);
	margin:0;z-index:9999;padding:10px;display:flex;flex-direction:column;background:transparent;
}
#chatBox{animation:chatIn .25s ease-out;}
@keyframes chatIn{from{opacity:0;transform:translate(-50%,10px);}to{opacity:1;transform:translate(-50%,0);}}

#chatContent
{
	margin-bottom:10px; background:rgba(255,255,255,0.98); border:1px solid #ccc ;border-radius:5px; padding:10px;
	display:flex; flex-direction:column; flex:1 1 auto; min-height:60px;
}
#msg { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; color:#000; text-align:left; font-size:.95em; line-height:1.3em; }
.msg_textarea { display: inline-block; white-space:pre-line; }
.msg_legend { display: inline-block; width:45px; vertical-align: top; }
#chatInputShell, #chatToggleShell {flex:0 0 auto;}

#chatInputBox { display:flex; align-items:flex-end; background:#fff; border:1px solid #ccc; border-radius:5px; padding:5px 10px; transition:border-color .15s, box-shadow .15s; }
#chatInputBox:focus-within{border-color:#a99; box-shadow:0 0 0 1px #a99; }
#chatTextarea
{
	flex:1 1 auto; border:none; outline:none; resize:none; max-height:120px; min-height:32px; font:inherit; line-height:1.4; padding:5px;
	background:transparent;color:#000; box-shadow:none; margin-bottom: 0;
}
#chatTextarea::placeholder{ color:#bbb; }
#chatTextarea:focus{border:none;outline:none;box-shadow:none;}

#chatToggleFloat{ text-align:center; margin-top:10px; }
#chatToggleFloat .chat-button{display:inline-flex;align-items:center;justify-content:center;border-radius:5px;padding:5px 10px;width:auto;height:30px;background:#fff;border:1px solid #ccc;}
#chatToggleFloat .chatToggleLabel{margin-right:5px;font-size:.85em;color:#555;}

#chatButtons{display:flex;flex:0 0 auto;gap:4px;margin-left:6px;}

button { padding: 5px 10px; background: #eee !important; border:1px solid #aaa; border-radius:5px; color:#333; cursor: pointer; }
.chat-button { display:flex; align-items:center; justify-content:center; cursor:pointer; padding: 3px 5px; width: 32px; margin-bottom: 0; }
.chat-button i { font-size: 32px !important; max-height: 32px !important; width: 32px; height: 32px; }
.chat-button:disabled{opacity:.4;cursor:default;}

#mediaGalleryWrapper{ overflow-x:auto; overflow-y:hidden; }
#mediaGallery{ display:flex; flex-wrap:nowrap; gap:5px; }

.media-thumb{position:relative;width:40px;height:40px;flex:0 0 40px;border-radius:4px;overflow:hidden;border:1px solid #ccc;cursor:pointer;background:#f6f6f6;display:flex;align-items:center;justify-content:center; margin-bottom:10px; }
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:contain;display:block;}

#mediaLightbox{display:none;position:fixed;left:0;top:0;width:100%;height:100%;z-index:99999;}
#mediaLightboxBackdrop{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);}
#mediaLightboxContent{position:relative;z-index:1;max-width:90vw;max-height:90vh;margin:5vh auto;background:#fff;border-radius:6px;padding:10px;box-shadow:0 0 20px rgba(0,0,0,0.3);display:flex;flex-direction:column;overflow:hidden;}

#mediaLightboxViewer{flex:1 1 auto;display:flex;align-items:center;justify-content:center;max-height:80vh;overflow:auto;}
#mediaLightboxViewer img,#mediaLightboxViewer video{max-width:100%;max-height:100%;height:auto;width:auto;display:block;}

#mediaLightboxClose,#mediaLightboxDownload{margin:0 4px 8px 0;align-self:flex-end;}
#mediaLightboxClose{}

.media-thumb{position:relative;width:40px;height:40px;flex:0 0 40px;border-radius:4px;overflow:hidden;border:1px solid #ccc;cursor:pointer;background:#f6f6f6;display:flex;align-items:center;justify-content:center;}
.media-thumb-type{position:absolute;right:2px;bottom:2px;font-size:10px;background:rgba(0,0,0,0.6);color:#fff;padding:1px 3px;border-radius:2px;}

.media-thumb-progress{position:absolute;left:0;bottom:0;width:100%;height:3px;background:rgba(0,0,0,0.1);}
.media-thumb-progress-bar{width:0;height:100%;background:#0ed818;transition:width .1s linear;}

.media-thumb.sending .media-thumb-type{font-size:9px;}