/* modifiers to make sure there are no frames and stuff around the view */

#sepiaFW-main-window.sepiaFW-ao-mode {
	border-color: #000 !important;
	box-shadow: 0 0 0 0 #000 !important;
	margin: 0;
    width: 100%;
	height: 100%;
}
.sepiaFW-top-layer-view.sepiaFW-ao-mode {
	border-radius: 0 !important;		/* we should find a better solution to remove all changes */
	outline: 5px solid #000000;
}

/* Always-On elements */

#sepiaFW-alwaysOn-view {
	background: #000;
	color: #eee;
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
/* check 'sepiaFW-ao-mode' in frames CSS for landscape adjustment */
.sepiaFW-alwaysOn-page {
	padding: 0px !important;
}
#sepiaFW-frames-nav-bar.sepiaFW-alwaysOn-navbar {
	border-color: #000;
	background: #000;
	color: #eee;
}

#sepiaFW-alwaysOn-avatar {
	position: relative;
	background: transparent;
	width: 250px;
	height: 250px;
	left: calc(50% - 125px);
    top: calc(50% - 125px);
}
#sepiaFW-alwaysOn-avatar-touch-area {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 250px;
	height: 175px;
	z-index: 99;
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#sepiaFW-alwaysOn-info-box {
	position: absolute;
	bottom: 0;
	font-size: 14px;
	color: #ccc;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	width: 100%;
}
#sepiaFW-alwaysOn-info-box > div {
	padding: 4px;
}
@media screen and (max-height: 400px) {
	#sepiaFW-alwaysOn-avatar {
		top: calc(50% - 75px);
	}
	#sepiaFW-alwaysOn-info-box {
		bottom: 40px;
	}
}

#sepiaFW-alwaysOn-notifications.check-channels .material-icons {
	color: #ff2550;
}

#sepiaFW-frames-nav-bar.sepiaFW-alwaysOn-navbar.sepiaFW-alwaysOn-alarm-anim {
	animation: avatar-alarm 1s infinite ease-in;
}
@keyframes avatar-alarm {
	0% {	  background-color: #000;		}
	50% {	  background-color: #ceff1a;	}
	100% {	  background-color: #000;		}
}

#sepiaFW-alwaysOn-avatar .avatar-eye {
	position: absolute;
	width: 30%;
	height: 30%;
	top: 10%;
	background: #333;
	border: 1px solid #333;
	border-radius: 50%;
}
#sepiaFW-alwaysOn-avatar .avatar-eye::after {
	position: absolute;
	content: '';
	top: 5%;
	left: 5%;
	width: 88%;
	height: 88%;
	border: 1px solid #eee;
	border-radius: 50%;
	background: #000;
}
.wake-word-active #sepiaFW-alwaysOn-avatar .avatar-eye::after {
	animation: avatar-eye-flash 2.0s 1;
}
#sepiaFW-alwaysOn-avatar .avatar-eye.left {
	left: 10%;
}
#sepiaFW-alwaysOn-avatar .avatar-eye.right {
	right: 10%;
}
#sepiaFW-alwaysOn-avatar .avatar-iris {
	position: absolute;
    width: 20%;
    height: 23%;
    top: 50%;
    left: 42%;
    background: #bbb;
    border: 0px solid #eee;
    border-radius: 50%;
	z-index: 2;
}
#sepiaFW-alwaysOn-avatar .avatar-eyelid {
	position: absolute;
    width: 24%;
    height: 27%;
    top: 23%;
    left: 40%;
    background: #000;
    border-radius: 50%;
    z-index: 3;
	animation: avatar-blink 20s infinite ease-in;
}
#sepiaFW-alwaysOn-avatar .avatar-eyelid.sleep {
	animation: avatar-sleep 40s infinite ease-in;
	/*animation-fill-mode: forwards;*/
}

#sepiaFW-alwaysOn-avatar .avatar-pupil {
    position: absolute;
    top: 50%;
    right: 10%;
    height: 50%;
    width: 50%;
    border-radius: 50%;
	background: #000;
	animation: avatar-look-around 10s infinite;
}

#sepiaFW-alwaysOn-avatar .avatar-mouth {
	position: absolute;
    background: transparent;
    width: 20%;
    height: 10%;
    top: 45%;
	left: 40%;
	border: 2px solid;
	border-radius: 35%;
	border-color: transparent transparent #bbb transparent;
	transition: border-radius 2s, top 0.5s;
}
#sepiaFW-alwaysOn-avatar .avatar-mouth.sleep {
	border-radius: 20%;
}
#sepiaFW-alwaysOn-avatar .avatar-mouth.sad {
	border-radius: 0%;
}
/* #sepiaFW-alwaysOn-avatar .avatar-mouth.speaking {
	animation: avatar-flicker 1.5s infinite;
	top: 44%;
} */
#sepiaFW-alwaysOn-avatar .avatar-mouth-part-2 {
	position: absolute;
    background: transparent;
    width: 8%;
    height: 10%;
    top: 46%;
	left: 46%;
	border: 2px solid;
	border-radius: 35%;
	border-color: transparent transparent #bbb transparent;
	transition: border-radius 2s;
	display: none;
}
/* alternative mouth-part-2:
    top: 49.5%;
    width: 24%;
    left: 38%;
    border-radius: 42%;
	border-color: #bbb transparent transparent transparent;
*/
#sepiaFW-alwaysOn-avatar.speaking .avatar-mouth-part-2 {
	display: flex;
	animation: avatar-mouth-oszi 0.45s infinite;
}

#sepiaFW-alwaysOn-avatar .avatar-ww-indicator {
	position: absolute;
    top: 27%;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
	border-radius: 50%;
	transition: background-color 1s;
	background: transparent;
}
.wake-word-active #sepiaFW-alwaysOn-avatar .avatar-ww-indicator {
	background: #333;
}

#sepiaFW-alwaysOn-avatar .avatar-activity {
	position: absolute;
    top: 22%;
    left: calc(50% - 10px);
    width: 20px;
    height: 20px;
    border: 0px solid;
	border-radius: 50%;
	border-color: #bbb;
	transition: background-color 1s;
}
#sepiaFW-alwaysOn-avatar .avatar-activity.listening {
	background: #ca1717;
}
#sepiaFW-alwaysOn-avatar .avatar-activity.speaking {
	background: #2196f3;
}
#sepiaFW-alwaysOn-avatar .avatar-activity.waiting {
	background: #ceff1a;
}
#sepiaFW-alwaysOn-avatar .avatar-activity.loading {
	background: #333;
}

.sepiaFW-alwaysOn-text-block {
	max-height: 64px;
    width: 100%;
	text-align: center;
	padding: 0px 24px;
	position: absolute;
	font-size: 18px;
	overflow: hidden;
	display: flex;
	flex-direction: column-reverse;
	background: #000;
	z-index: 10;
}
#sepiaFW-alwaysOn-stt-out {
	color: #ceff1a;
	top: 32px;
}
#sepiaFW-alwaysOn-tts-out {
    color: #2196f3;
	bottom: 12px;
}

@keyframes avatar-blink {
	0% {	  top: 23%;	}
	98% {	  top: 23%;	}
	98.5% {	  top: 48%;	}
	99% {	  top: 23%;	}
	99.5% {	  top: 48%;	}
	100% {	  top: 23%;	}
}
@keyframes avatar-sleep {
	0% {	  top: 23%;	}
	10% {	  top: 23%;	}
	18% {	  top: 48%;	}
	18.25% {  top: 23%;	}
	30% {	  top: 48%;	}
	50% {	  top: 48%;	}
	50.25% {  top: 23%;	}
}
@keyframes avatar-mouth-oszi {
	0%   { transform: translate(0, 0%); }
	50%  { transform: translate(0, 11%); }
	100% { transform: translate(0, 0%); }
}
@keyframes avatar-flicker {
	0%   { opacity: 1; }
	50%  { opacity: 0.33; }
	100% { opacity: 1; }
}
@keyframes avatar-eye-flash {
    from { border-color: #eee; }
	50%  { border-color: #444; }
    to { border-color: #eee; } 
}
@keyframes avatar-look-around {
	0% {  	transform: translate3d(0, 0, 0);			}
	5% {  	transform: translate3d(50%, -25%, 0);		}
	10% { 	transform: translate3d(50%, -25%, 0);		}
	15% { 	transform: translate3d(-100%, -25%, 0);		}
	20% { 	transform: translate3d(-100%, -25%, 0);		}
	25% { 	transform: translate3d(0, 0, 0);			}
	100% {	transform: translate3d(0, 0, 0);			}
}

@keyframes ila-blink {
	0% {	  height: 11px;	top: calc(50% - 5px); }
	98% {	  height: 11px;	top: calc(50% - 5px); }
	98.5% {	  height: 0px;	top: calc(50% - 0px); }
	99% {	  height: 11px;	top: calc(50% - 5px); }
	99.5% {	  height: 0px;	top: calc(50% - 0px); }
	100% {	  height: 11px;	top: calc(50% - 5px); }
}
@keyframes ila-look-around {
	0% {  	transform: translate3d(0, 0, 0);			}
	2% {  	transform: translate3d(20%, 20%, 0);		}
	4% { 	transform: translate3d(20%, 20%, 0);		}
	6% { 	transform: translate3d(-40%, 20%, 0);		}
	8% { 	transform: translate3d(-40%, 20%, 0);		}
	10% { 	transform: translate3d(0, 0, 0);			}
	50% { 	transform: translate3d(0, 0, 0);			}
	52% {  	transform: translate3d(20%, -20%, 0);		}
	54% { 	transform: translate3d(20%, -20%, 0);		}
	56% { 	transform: translate3d(-40%, -20%, 0);		}
	58% { 	transform: translate3d(-40%, -20%, 0);		}
	60% { 	transform: translate3d(0, 0, 0);			}
	100% {	transform: translate3d(0, 0, 0);			}
}