*{
  font-family: Inter, Emoji;
  -webkit-font-smoothing:antialiased;
  font-synthesis: none;
  /*text-rendering:optimizeLegibility;*/
}

html{
  min-height: 100%;
  height:auto;
}

body{
  margin:0;
  padding:0;
  font-size:95%;
  height:auto;
  min-height:100%;
  box-sizing: border-box;
}

/* phone styles */
.phone{
  position:relative;
  margin-left:0.2rem;
  box-sizing: border-box;
}

.phone i.material-icons-round,.phone i.material-icons-outlined{
  font-size: 2ch;
  vertical-align: -21%;
}

[data-theme="light"] .phone{
  background-color: rgb(255,255,255);
  height:auto;
}

[data-theme="dark"] .phone{
  background-color: rgb(0, 0, 0);
  height:auto;
}

/* sys info */
.phone .sys-info{
	position: absolute;
	z-index:3;
	top:0;
	display:flex;
	justify-content: space-between;
	backdrop-filter: blur(110px);
	background-color:rgba(235, 235, 235, 0.8);
	width:100%;
}

[data-border = "notched"] .phone .sys-info {
  align-items: top;
}

[data-border = "not-notched"] .phone .sys-info {
  align-items: center;
}

[data-theme="dark"] .phone .sys-info{
  	background-color:rgba(25, 25, 25, 0.8);
}

#ptime, #ptime p{
  	margin:0;
}

[data-border = "notched"] #ptime {
	/*height: 100%;*/
}

[data-border = "not-notched"] #ptime {
	text-align: center;
	width:auto;
}

[data-theme = "dark"] #ptime {
  	color:white;
}

[data-border="notched"] .phone .sys-info{ 
	height:27px;
}

[data-border="not-notched"] .phone .sys-info{
	width: 100%;
	height: 20px;
	z-index: 2;
}

.phone .sys-info p{
	font-weight: bold;
	user-select: none;
  -webkit-user-select: none;
}

.phone .sys-info .conbars{
	display: flex;
	align-items: flex-end;
}

.phone .sys-info #pinfo{
	display: flex;
  align-items: baseline;
	gap: 0.4rem;
  height: fit-content;
}

[data-connection = "wifi"] .phone .sys-info #pinfo {
  align-items: center;
}

.phone .sys-info .conbars div{
	border-radius: 100vh;
	width:4px;
	margin-left:0.05rem;
	margin-right:0.05rem;
	vertical-align: bottom;
	background-color: black;
}

.conbars span[contenteditable]{
	outline:0;
	border:0;
	background:transparent;
	padding:0;
	margin-left:0.15rem;
	height:1.5ch;
	font-size:102%;
	color:black;
	font-weight:500;
}

.conbars span[contenteditable]:empty {
	border: 2px solid black;
	border-radius: 2px;
	min-width: 5px;
}

[data-border="not-notched"] span[contenteditable]{
  	padding-bottom: 0.05rem;
  	white-space: nowrap;
}

[data-border="notched"] .conbars span[contenteditable]{
  	display:none;
}

[data-theme="dark"] .conbars span[contenteditable]{
  	color:white;
}

[data-theme="dark"] .phone .sys-info .conbars div{
   background-color: white;
}

[data-bars="0"] #con1, [data-bars="0"] #con2, [data-bars="0"] #con3, [data-bars="0"] #con4,
[data-bars="1"] #con2, [data-bars="1"] #con3, [data-bars="1"] #con4,
[data-bars="2"] #con3, [data-bars="2"] #con4,
[data-bars="3"] #con4{
  	background-color: rgb(180,180,180);
}

[data-theme="dark"][data-bars="0"] #con1, [data-theme="dark"][data-bars="0"] #con2,
[data-theme="dark"][data-bars="0"] #con3, [data-theme="dark"][data-bars="0"] #con4,
[data-theme="dark"][data-bars="1"] #con2, [data-theme="dark"][data-bars="1"] #con3,
[data-theme="dark"][data-bars="1"] #con4, [data-theme="dark"][data-bars="2"] #con3,
[data-theme="dark"][data-bars="2"] #con4, [data-theme="dark"][data-bars="3"] #con4 {
  	background-color: rgb(100,100,100);
}

[data-connection="wifi"] #lte{
  	display:none;
}

[data-connection="none"] #lte{
  	display:none;
}

[data-theme="dark"] #lte{
  	color: white;
}

#imgwifi {
  user-select: none;
  -webkit-user-select: none;
}

[data-connection="data"] #imgwifi{
  	display:none;
}

[data-connection="none"] #imgwifi{
  	display:none;
}

[data-theme="dark"] #imgwifi{
  	filter:invert(100%);
}

.battery{
	border:1.8px solid rgb(180, 180, 180);
	border-radius: 0.25rem;
	height:10px;
	width:24px;
	position: relative;
	padding:1px;
}

#batterycont{
	display: flex;
	align-items: center;
}

#batterycont p{
	width:4ch;
	text-align:right;
}

[data-theme="dark"] #batterycont p{
  	color:white;
}

[data-border="notched"] #batterycont p{
  	display: none;
}

[data-border="not-notched"] #batterycont p{
  	margin-left:auto;
}

[data-theme="dark"] .battery{
  	border:1.8px solid rgb(180, 180, 180);
}


.battery::after{
	border-top-right-radius: 0.1rem;
	border-bottom-right-radius: 0.1rem;
	background-color: rgb(180, 180, 180);
	width:13%;
	height:55%;
	content:"";
	display:block;
	position:absolute;
	margin: auto;
	top:0;
	bottom:0;
	right:-5px;
}

.battery .progress{
	background-color:black;
	height:100%;
	width:100%;
	border-radius:0.15rem;
}

[data-theme="dark"] .battery .progress {
	background-color: white;
}

.battery .progress.low {
	background-color: rgb(255, 59, 48);
}

.battery .progress.lpmode,
.battery .progress.lpmode.charging {
	background-color: rgb(255, 203, 0);
}

.battery .progress.charging {
	background-color: rgb(72, 218, 94);
}

.battery .progress.charging::after {
	content: "";
	background-image: url("/images/apple/ios-charge-bolt.svg");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	top: 50%;
	bottom: 50%;
	left: 50%;
	right: 50%;
	transform: translateY(-50%) translateX(-50%);
	height: 144%;
	width: 56%;
	filter: drop-shadow(2px 0 0 #fff) drop-shadow(-1px 0 0 #fff) 
			drop-shadow(0 1px 0 #fff) drop-shadow(0 -1px 0 #fff);
}

[data-theme="dark"] .battery .progress.charging::after {
	filter: invert(1) drop-shadow(2px 0 0 #000) drop-shadow(-1px 0 0 #000) 
			drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #000);
}

.phone .contact-info{
  	position: absolute;
	display:flex;
	align-items: center;
	justify-content: space-between;
	background-color:rgba(235, 235, 235, 0.8);
	backdrop-filter: blur(110px);
	width:calc(100% - 0.4rem);
	padding-left:0.2rem;
	padding-right:0.2rem;
	z-index:3;
	/*border-top: 15px rgba(235, 235, 235,0) solid;*/
}

[data-theme="dark"] .phone .contact-info {
  background-color: rgba(25, 25, 25, 0.8);
  border-top-color: rgba(16, 16, 16, 0);
}

[data-border="not-notched"] .phone .contact-info {
  top:20px;
  border-top-width: 0;
}

.contact-info .backsec, .contact-info div {
  color:rgb(0, 121, 255);
  white-space: nowrap;
}

.contact-info .backsec span:not(:empty) {
  font-weight: bold;
  background-color: rgb(0, 121, 255);
  color:white;
  border-radius:100vw;
  padding:2px 7px;
  font-size:initial;
}

.contact-info .profile{
  display:flex;
  align-items:center;
  flex-direction: column;
  position: relative;
}

.contact-info .profile img{
  height:30px;
  aspect-ratio: 1/1;
  border-radius: 100%;
  margin-bottom: 0.12rem;
  cursor: pointer;
  object-fit: cover;
  z-index: 3;
  background: rgb(135,136,140);
  background: linear-gradient(0deg, rgb(135,136,140) 0%, rgb(175,177,181) 100%);
}

.contact-info .profile img:before{
  content:'T';
  color:white;
  font-weight: bold;
}

.contact-info input{
  text-align:center;
  background-color: rgba(0,0,0,0);
  color:black;
  outline:none;
  width:fit-content;
  font-weight: 600;
  font-size: 102%;
  border:1px solid transparent;
  transition: border 0.1s;
  border-radius: 0.2rem;
}

.contact-info input:hover{
  border:1px solid black;
  transition: border 0.1s;
}

[data-theme="dark"] .contact-info input{
  color:white;
}

[data-theme="dark"] .contact-info input:hover{
  border:1px solid white;
  transition: border 0.1s;
}

.contact-info div:first-child i, .contact-info div:first-child p, .contact-info div:last-child i{
  cursor:pointer;
  height:auto;
  font-size: 110%;
  font-weight: 540;
  user-select: none;
  -webkit-user-select: none;
}

.contact-info div:last-child{
  text-align: right;
}

.contact-info div:last-child i{
  font-size:2.6ch;
}

.phone .text-area{
  overflow-y: scroll;
  overflow-x: hidden;
  width:100%;
  position: absolute;
}

@font-face{
  font-family: 'Inter';
  src: url('/fonts/inter.ttf') format('truetype');
}

.msg-date{
  position: relative;
  height:fit-content;
  user-select:none;
  -webkit-user-select:none;
  margin:0.8rem 0;
  padding: 0 10px;
}

.msg-date p{
  text-align:center;
  color:rgb(138,138,138);
  font-size:1.4ch;
}

.msg-date button,.msgbox .msgactioncontainer{
  border:none;
  background:transparent;
  border-radius:0.2rem;
  position:absolute;
  top:0;
  margin:0;
  padding:0;
  margin-right:0.2rem;
  height:fit-content;
}

.msgbox button[action="delete"]{
  border:none;
  background:transparent;
  border-radius:0.2rem;
  margin-right:0.2rem;
  height:fit-content;
}

.msg-date button, .msgbox button{
  aspect-ratio:1/1;
  margin:0;
  padding:0;
  margin-right:0.2rem;
}

.msgbox .msgactioncontainer{
  right: 0;
  z-index: 1;
}
.msgbox .msgactioncontainer button{
  width:20px;
}

[data-theme="dark"] .msg-date button{
  color:white;
}

[data-theme="dark"] .phone input{
  color-scheme: dark;
}

.msg-date button[data-status="saved"],.msg-date button[data-action="delete"],
.msgbox .msgactioncontainer {
  display:none;
}

.msg-date button[data-status="saved"], .msg-date button[data-status="modifying"]{
  right:25px;
  color: black;
}

.msg-date button[data-action="delete"], .msgbox .msgactioncontainer{
  right:0;
}

.msg-date button[data-action="delete"], .msgbox button{
  color:red;
}

.msg-date i, .msgbox i{
  margin:0.15rem;
  font-size:2.5ch;
}

.msg-date:hover button[data-status="saved"],
.msg-date:hover button[data-action="delete"], .msgbox:hover .msgactioncontainer{
  display:block;
}

.msg-date button[data-status="modifying"]{
  display:block;
}

.msg-date button:hover, .msgbox button:hover{
  background-color:rgb(180,180,180);
  transition:background-color 0.2s;
}

.msgbox.sender.tailed:after{
  content: '';
  position: absolute;
  border: 0px solid;
  display: block;
  width: 38px;
  height: 30px;
  background-color: transparent;
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 50%;
  transform: translateX(100%) translateY(-50%) rotateY(180deg);
  box-shadow: 14px -2px 0 -4px rgb(0, 122, 255);
  right: 0;
  z-index: 0;
}

[data-bubble="green"] .msgbox.sender.tailed:after{
  box-shadow: 14px -2px 0 -4px rgb(50, 193, 86);;
}

.msgbox.receiver.tailed:after{
  content: '';
  position: absolute;
  border: 0px solid;
  display: block;
  width: 38px;
  height: 30px;
  background-color: transparent;
  border-bottom-left-radius: 30%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 50%;
  transform: translateX(-128%) translateY(-50%);
  box-shadow: 14px -2px 0 -4px rgb(233, 233, 235);
  z-index: 0;
}

[data-theme="dark"] .msgbox.receiver.tailed:after{
  box-shadow: 14px -2px 0 -4px rgb(38, 38, 41);
}

.msgbox{
  position:relative;
}

.msgbox.sender{
  color: white;
  border-radius: 0.8rem;
  padding: 6px;
  padding-right: 10px;
  padding-left: 10px;
  margin-left: auto;
  margin-right: 0.8rem;
  min-width: 20px;
  max-width: 65%;
  width: max-content;
  margin-bottom: 0.1rem;
}

[data-bubble="blue"] .msgbox.sender{
   background-color:rgb(0, 122, 255);
   caret-color: rgb(173, 173, 175);
}

[data-bubble="blue"] .msgbox.sender input {
  accent-color: rgb(173, 173, 175);
}

[data-bubble="green"] .msgbox.sender{
  background-color:rgb(50, 193, 86);
  caret-color: black;
}

.msgbox.receiver{
  background-color:rgb(233, 233, 235);
  color:black;
  border-radius:0.8rem;
  padding:6px;
  padding-right:10px;
  padding-left:10px;
  margin-right:auto;
  margin-left:0.8rem;
  max-width:65%;
  min-width:20px;
  width:fit-content;
  margin-bottom: 0.1rem
}

[data-theme="dark"] .msgbox.receiver{
  background-color: rgb(38, 38, 41);
  color:white;
}

.msgbox.sender:hover p:empty, .msgbox.receiver:hover p:empty{
  /*width:20px;
  margin-bottom:-2rem;*/
}

.msgbox.sender p::selection, .msgbox.sender b::selection, .msgbox.sender u::selection, .msgbox.sender i::selection{
  background: rgb(233, 233, 235);
  color: black;
}

.msgbox.tailed, .msgbox.read, .msgbox.sendfailed{
  margin-bottom:0.2rem;
}

.msgbox p{
  margin-top:0;
  margin:0;
  transition: margin-top 0.2s;
  font-size: 1.7ch;
  outline:none;
  border:none;
}

.msgbox:hover p{
  margin-top:2rem;
  border-radius:0.2rem;
  border: 1px solid black;
  transition: margin-top 0.2s, border 0.2s;
}

[data-theme="dark"] .msgbox.receiver:hover p{
  border-color:white;
}

.msgbox:hover{
  width:60%;
}

/*bottom bar*/
.bottom-bar {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.bottom-bar .bottom-text-box {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
}

.bottom-bar img {
  -webkit-user-drag: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

[data-theme = "dark"] .bottom-text-box img {
  filter: invert(1);
}

.bottom-text-box .text {
  border: 2px solid rgb(153, 153, 153);
  border-radius: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.bottom-text-box input {
  outline: none;
  border: none;
  background: transparent;
  height: 100%;
}

.bottom-text-box .material-icons-round {
  color: white;
  border-radius: 100%;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.bottom-text-box #voice-msg {
  background-color: rgb(153, 153, 153);
}

[data-bubble = "blue"] .bottom-text-box #send {
  background-color: rgb(0, 122, 255);
}

[data-bubble = "green"] .bottom-text-box #send {
  background-color: rgb(50, 193, 86);
}

.bottom-text-box :has(input:placeholder-shown) #send{
  display: none;
}

.bottom-text-box :has(input:not(:placeholder-shown)) #voice-msg {
  display: none;
}

.apps-bar {
  background-color: rgb(213, 216, 221);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

[data-theme="dark"] .apps-bar {
  background-color: rgb(43, 43, 43);
}

.apps-bar img {
  width: 100%;
}

.apps-bar .homebar {
  background-color: rgb(0,0,0);
  border-radius: 100vw;
}

[data-theme = "dark"] .apps-bar .homebar {
  background-color: rgb(255, 255, 255);
}

[data-border = "not-notched"] .apps-bar .homebar {
  display: none;
}