@charset "utf-8";
/* CSS Document */


.thought-screen-toggle-btn, .thought-screen-toggle-btn2 {
	position: fixed;
	background: #14191e;
	color: white;
	cursor: pointer;
	pointer-events: auto;
	z-index: 18;
	font-family: "Imprima", sans-serif;
	font-weight: 500;
}


.thought-screen-toggle-btn:hover, .thought-screen-toggle-btn2:hover {
  background: #14191e;
}

#thoughtInput.messenger-mode:focus {
    outline: none;
    border: 3px solid #ffc300;
    animation: borderColorCycle 3s linear infinite;
	background: #14191e;
}

#messengerCloseBtn, #messengerSendBtn {	
	position: fixed;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	white-space: nowrap;
	color: white;
	display: flex; 
	align-items: center;
	justify-content: center;
	min-width: fit-content;
	z-index: 25;
}

#messengerCloseBtn {
	background-color: #14191e; /* #ff0064 */
}

#messengerSendBtn {
	background-color: #14191e; /* #9bdc00 */
}


/* PORTRAIT MOBILE (up to 1099px wide) */
@media only screen and (orientation: portrait) and (max-width: 1099px) {
	
.thought-screen-toggle-btn {
	bottom: 2vh;
	height: 10vw;
	right: 16vw;
	width: 20vw;
	border-radius: 5px;
	font-size: 0.8em;
	border: none;
}
	
.thought-screen-toggle-btn2 {
	bottom: 2vh;
	height: 10vw;
	right: 5vw;
	width: 10vw;
	border-radius: 5px;
	font-size: 1em;
	border: none;
}
	
#thoughtInput.messenger-mode {
    position: fixed;
    background: #14191e;
    color: white;
    cursor: pointer;
    pointer-events: auto;
    z-index: 17;
    font-family: "Imprima", sans-serif;
    font-weight: 500;		
    bottom: 0vh;
    min-height: 22vw;
    max-height: 40vh;
    height: auto;
    left: 0vw;
    width: 76vw;
    border-radius: 5px;
    font-size: 18px;
	line-height: 1.2;
    border: none;
    resize: none;           /* hides the drag handle */
    overflow-y: auto;       /* scroll if max-height is hit */
    box-sizing: border-box;
}

#messengerCloseBtn {
    bottom: 2vh;
    height: 10vw;
    right: 5vw;
    width: 10vw;
    border-radius: 5px;
    font-size: 1em;
    border: none;
}
	
#messengerSendBtn {
    bottom: calc(2vh + 12vw);
    height: 10vw;
    right: 5vw;
    width: 10vw;
    border-radius: 5px;
    font-size: 1em;
    border: none;
}
	
.is-pwa .thought-screen-toggle-btn, .is-pwa .thought-screen-toggle-btn2, .is-pwa #messengerCloseBtn {
    bottom: 3vh;
}

.is-pwa #messengerSendBtn {
    bottom: calc(3vh + 11vw);
}
	
}

/* LANDSCAPE MOBILE/TABLET (480px to 1099px wide) */
@media only screen and (min-width: 480px) and (orientation: landscape) and (max-width: 1099px) {
	
	
.thought-screen-toggle-btn {
	bottom: 6vh;
	left: 36vw;
	height: 4.5vw;
	width: 8.5vw;
	border-radius: 5px;
	font-size: 0.8em;
	border: none;
}
	
.thought-screen-toggle-btn2 {
	bottom: 6vh;
	height: 4.5vw;
	right: 50vw;
	width: 4.5vw;
	border-radius: 5px;
	font-size: 1em;
	border: none;
}
	
#thoughtInput.messenger-mode {
    position: fixed;
    background: #14191e;
    color: white;
    cursor: pointer;
    pointer-events: auto;
    z-index: 50;
    font-family: "Imprima", sans-serif;
    font-weight: 500;		
    bottom: 6vh;
    min-height: 6vw;
    max-height: 15vw;
    height: auto;
    left: 8vw;
    width: 53.5vw;
    border-radius: 5px;
    font-size: 2.2vw;
	line-height: 1.2;
    border: none;
    resize: none;           /* hides the drag handle */
    overflow-y: auto;       /* scroll if max-height is hit */
    box-sizing: border-box;
}
	
#messengerSendBtn {
	bottom: 6vh;
	height: 4.5vw;
	right: 33.5vw;
	width: 4.5vw;
	border-radius: 5px;
	font-size: 1em;
	border: none;
}
	
#messengerCloseBtn {
	bottom: 6vh;
	height: 4.5vw;
	right: 28.5vw;
	width: 4.5vw;
	border-radius: 5px;
	font-size: 1em;
	border: none;
}
	
}

/* DESKTOP (1100px and wider) */
@media only screen and (min-width: 1100px) {

.thought-screen-toggle-btn {
	top: 5.5vh;
	left: -50vh;
	height: 6vh;
	width: 13vh;
	border-radius: 5px;
	font-size: 0.8em;
	border: none;
}
	
.thought-screen-toggle-btn2 {
	top: 5.5vh;
	right: calc(50.25vw + 20.5vh);
	height: 6vh;
	width: 6vh;
	border-radius: 10px;
	font-size: 1em;
	border: none;
}
	
#thoughtInput.messenger-mode {
    position: fixed;
    background: #14191e;
    color: white;
    cursor: pointer;
    pointer-events: auto;
    z-index: 50;
    font-family: "Imprima", sans-serif;
    font-weight: 500;		
    top: 0vh;
    min-height: 13vw;
    max-height: 35vw;
    height: auto;
    left: 0vw;
    width: calc(100% - 28vh);
    border-radius: 5px;
    font-size: 22px;
	line-height: 1.2;
    border: none;
    resize: none;           /* hides the drag handle */
    overflow-y: auto;       /* scroll if max-height is hit */
    box-sizing: border-box;
}
	
#messengerSendBtn {
	top: 12.5vh;
	height: 6vh;
	right: calc(50.25vw + 20.5vh);
	width: 6vh;
	border-radius: 10px;
	font-size: 1em;
	border: none;
}
	
#messengerCloseBtn {
	top: 5.5vh;
	height: 6vh;
	right: calc(50.25vw + 20.5vh);
	width: 6vh;
	border-radius: 10px;
	font-size: 1em;
	border: none;
}

}