/* Document settings */
body { 
	display: flex;
	flex-direction: column; 
	overflow: hidden;						/* body shall not be scrollable - only msg-feed is scrollable */
}





/* Links to login and register */
.account-actions{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.account-action{
  display: inline-block;
  padding: 8px 14px;
  background: var(--tile);
  color: var(--text);
  text-decoration: none;
  border-radius: 4px;
}
/* Effect when hovering over an account-action */
.account-action:hover{  
  opacity: .7; 
  text-decoration: underline; 
}


/* Generell page structure: two columns */

.page {
  width: 80vw;								/* free space on left & right side of page like in https://mastodon.social/explore */
  margin: 0 auto;							/* place columns horizontally centered */
  padding-top: clamp(6px, 3vw, 12px);		/* space between topbar and content */
  min-height: 0; 
  flex: 1;
  display: flex;            
  flex-direction: column;   
}

.columns {
  gap: clamp(12px, 2vw, 24px);				/* flexible space between columns */
  display: flex;
  flex: 1;
  min-height: 0;
}
.left-column  { 
	flex: 1; 				  				              /* left column: width about 1/3 */
	align-self: flex-start;      			      /* make column only as high as needed */
	display: flex;
	flex-direction: column;
	margin-top: 50px;
}
.right-column { 
	flex: 2; 								                /* right column: width about 2/3 */
	display: flex; 
	flex-direction: column; 
	min-height: 0; 
}              


/* Right column: message feed with two tabs */

.tabs {
  display: flex;							            /* tabs fill whole horizontal space */
}

.tab {				
  flex: 1;									              /* all tabs are the same horizontal size */
  padding: .75rem;							          /* pad button text on all sides */
  background: var(--color-secondary);
  color: var(--textcolor-primary);			  /* textcolor white */
  border: 0;
  filter: brightness(0.7);
  font-weight: 600;
}
.is-active { filter: brightness(1.0); }		/* illuminate active tab */

.msg-feed {
  flex: 1;                      			/* fill whole horizontal space */
  background: var(--background-secondary);
  border: 1px solid var(--color-secondary);
  display: flex;
  flex-direction: column;
  overflow: auto;               			/* gets scrollable if full */
  min-height: 0; 
}

/* One Message */

.msg-card {
  width: 100%;							/* message should never be wider than message-feed */
  background: transparent;
  border-bottom: 1px solid var(--color-secondary);	/* separator line at the bottom */
  padding: 12px;
}

/* Header of a message: avatar – name – time */

.msg-head {
  display: grid;							
  grid-template-columns: 32px 1fr auto;		/* grid row-width, avatar: fixed width, name: remaining width, date: as wide as needed */
  align-items: center;
  gap: 15px;
  margin-bottom: 12px;						/* implement space between header an message */
  padding: 5px 12px;
  background: transparent;
}

.msg-avatar {
  width: 32px;
  height: 32px;
  font-size: 12px;      
}

.msg-user { 
	font-weight: 800;
	color: var(--textcolor-primary);
}

.msg-time { 
	opacity: .7; 
	font-size: .9rem;
	color: var(--textcolor-primary);	
}

.msg-text {
	padding: 0 16px;
	color: var(--textcolor-primary);
	overflow-wrap: anywhere;   			/* wrap text if it overflows msg-card */
	word-break: break-word;    			/* wrap text if it overflows msg-card */ 
	margin-bottom: 20px;						/* implement space between header an message */
}

.msg-like { 
	margin-left: 15px;
	margin-bottom: 5px;
	border: 1px solid var(--color-secondary); 
	background: transparent; 
	color: var(--textcolor-primary); 
	padding: 6px 10px; 
}
.msg-like:hover { 
	background: var(--color-secondary); 
	color: var(--textcolor-primary); 
}
.msg-like.is-liked { 
	background: var(--color-secondary); 
	color: var(--textcolor-primary); 
} 

.msg-feed::-webkit-scrollbar {
  width: 0;                  			/* make scrollbar invisible (only works for Chrome/Edge/Safari?) */
  height: 0;
}



/* Left column: account pane and message composition  */

/* Profile view */
.profile-card {
	padding: 20px;
	background: var(--color-secondary);
	display: flex;
	flex-direction: column;
	align-items: center;      			/* place avatar & name-input horizontally centered in the card */
	gap: 12px;
}


/* Avatar */
.profile-avatar {
  width: 110px; 
  height: 110px;
  font-size: 40px;      
}


/* Name-input: label, input-field */
.profile-name-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  text-align: center;
  color: var(--textcolor-primary);
  font-weight: 800;
}


/* Message Composer Area */

.composer-card {
  border-left: 1px solid var(--color-secondary);				/* separator line at the left side */
  border-right: 1px solid var(--color-secondary);				/* -"- at the right side */
  border-bottom: 1px solid var(--color-secondary);				/* -"- at the bottom */
  background: var(--background-secondary);
  padding: 12px;
  color: var(--textcolor-primary);
}

.composer-card textarea {
  width: 100%;
  padding: 8px;
  background: transparent;
  color: var(--textcolor-primary);
  border: 1px solid var(--color-secondary);
  resize: none;
}