/**
 * (c) Copyright 2024 Robert Dyas rhdyas@gmail.com
 */

:root {
  --page-background-color: rgb(200,200,200);
  --bg-color: white;
  --bg-color-shaded: rgb(245,245,245);
  --text-color: black;
  --link-color: mediumblue;
  --border-color: rgb(200,200,200);
  --header-color: rgb(25,25,112);
  --border-radius: 5px;
  --normal-font-size: 14px;
  --smaller-font-size: 12px;
  --bigger-font-size: 16px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--page-background-color: black;
		--bg-color: rgb(50,50,50);
		--bg-color-shaded: rgb(75,75,75);
		--text-color: white;
		--link-color: orange;
		--border-color: rgb(150,150,150);
	}
}

a {
	color: var(--link-color);
}

input, textarea {
	color: var(--text-color);
	background-color: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    color: var(--text-color);
    background-color: var(--page-background-color);
    font-size: var(--normal-font-size);
	font-family: "Montserrat", sans-serif;
}
body > div.container {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 750px; 
	min-width: 350px;
	min-height: 100vh; /* 100% of viewport height */
	background-color: var(--bg-color);
	color: var(--text-color);
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;
	}
	div.container > div.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0px;
		padding: 10px 20px;
		color: white;
		background-color: var(--header-color);
		font-size: 2em;
	}
	div.container > div.content {
		margin: 0px;
		padding: 10px;
	}
	div.container > div.footer {
		color: rgb(220,220,220); 
		background-color: rgb(100,100,100);
		font-size: var(--smaller-font-size);
		text-align: center;
		margin-top: auto; /* auto pushes it to the bottom of the parent container because it takes up max room */
		padding: 15px 10px;
		}
		div.container > div.footer a {
			color: rgb(220,220,220);
			margin: 10px;
		}

div.auth-container {
	display: flex; 
	flex-direction: column; 
	align-items: stretch; 
	gap: 10px;
	width: 325px;
	text-align: center;
	font-size: var(--normal-font-size);
}


textarea.source-text {
	box-sizing: border-box; 
	width: 100%; 
	min-height: 50px;
	height: 50px;
	resize: vertical; 
	overflow: auto;
	font-family: inherit; 
	font-size: inherit;
}


div.chat-history {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: transparent; 
	margin: 20px 0px;
	padding: 0px;
}
div.chat-history > div {
	max-width: 70%;
	min-height: 10px;
	border-radius: 10px;
	padding: 10px;
	white-space: pre-wrap;
	word-break: break-word;
	text-align: left;
}
div.chat-history > div.question {
	align-self: flex-end;
	color: var(--text-color);
	background-color: var(--bg-color-shaded);
}
div.chat-history > div.answer {
	align-self: flex-start;
	color: var(--text-color);
	background-color: var(--bg-color-shaded);
}



/* social sharing */
.social-share {
          text-align: center;
          padding: 5px;
      }
      .social-share a {
          text-decoration: none;
          margin: 0 10px;
          color: navy;
          display: inline-block;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: white;
          text-align: center;
          line-height: 40px;
          transition: background-color 0.3s;
          font-size: 18px;
      }
      .social-share a:hover {
          background-color: rgb(225,225,225);
      }


/* buttons */
div.button {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	vertical-align: middle;
	margin: 10px 0px;
	border: 1px solid transparent;
	border-radius: var(--border-radius);
	padding: 6px 12px;
	font-size: var(--normal-font-size);
	font-weight: bold;
	white-space: nowrap;
	color: rgb(100,100,100);
	background-color: rgb(235,235,235);
	user-select: none;
	cursor: pointer;
	}
	div.button:hover {
		border-color: rgb(200,200,200);
	}
	div.button.disabled {
		opacity: 0.20;
		cursor: default;
		}
		div.button.disabled:hover {
			border-color: transparent;
		}
	div.button.round {
		margin: 0px 4px;
		border-radius: 50%;
		padding: 2px;
	}
	div.button.small {
		padding: 3px 9px;
		font-size: var(--smaller-font-size);
		font-weight: normal;
		color: var(--text-color);
		background-color: var(--bg-color);
		border: 1px solid var(--border-color);
	}
	div.button.oauth-provider {
		display:flex; 
		align-items:center; 
		gap:10px;
		margin:0px;
		border: 1px solid var(--border-color);
		padding: 8px; 
		font-weight: normal;	
		color: var(--text-color);
		background-color: transparent;
		user-select: none;
		cursor: pointer;
	}
	div.button.oauth-provider img {
		height:25px; 
	}
	div.button.blue {
		color: white;
		background-color: var(--link-color);
	}
	div.button.red {
		color: white;
		background-color: red;
	}
div.button > i.material-icons {
	vertical-align: top;
	font-size: 1.5em
}
div.button > span {
	line-height: 1.5em; /* important to guarantee buttons are same height with or without icons */
	vertical-align: middle;
}
div.button > i.material-icons + span {
	margin-left: 0.33em;
}