/**
  * @name ProperMessages
  * @author x3non
  * @version v1.101
  * @description Discord becomes a real messaging system
  * @authorId 332628896497270788
  * @source https://github.com/its-x3non/DiscordSnippets/tree/main/ProperMessages
  */

@import url("https://raw.githubusercontent.com/its-x3non/DiscordSnippets/main/CSS%20Addons/Right%20Align%20Self%20Messages/RightAlign.css"); 

.theme-dark .embedFull__623de {
  border: 2px solid !important; 
  box-shadow: 0 0 6px 1px rgba(0,0,0,1); /* comment out if don't want shadow */
  margin-bottom: 4px;
  margin-top: 4px;
}

:root{
	/* Message Bubble Colors */
	--default-msg-color: hsla(var(--default-hue), var(--default-saturation), var(--default-lightness), var(--default-alpha));
	--self-color: hsla(var(--self-hue), var(--self-saturation), var(--self-lightness), var(--default-alpha));

	/* Time Text Colors */
	--default-time-color: hsla(var(--default-hue), var(--default-saturation), var(--default-lightness), calc(var(--default-alpha) + 0.25));
	--self-time-color: hsla(var(--self-hue), var(--self-saturation), var(--self-lightness), calc(var(--default-alpha) + 0.25));

	/* Text Colors */
	--default-text-color: hsl(var(--default-hue), var(--default-saturation), calc(var(--default-lightness) + 20%));
	--self-text-color: hsl(var(--self-hue), var(--self-saturation), calc(var(--self-lightness) + 15%));

	/* Accent Colors */
	--default-accent: hsl(calc(var(--default-hue) + 205), calc(var(--default-saturation) + 100%), calc(var(--default-lightness) - 30%));
	--self-accent: hsl(var(--self-hue), calc(var(--self-saturation) + 30%), calc(var(--self-lightness) + 25%));
	
	/* No clue (I forgot) */
	--text-brand: var(--default-accent);
	--text-link: var(--default-accent);
	--mention-foreground: var(--default-accent);
}

/* Message bubbles */
[class*="contents_"] [class*="markup"]:not(:empty, code),
.container__9271d, [class^=visualMediaItemContainer_], [class^=inlineMediaEmbed_]{
  color: var(--default-text-color);
  border: 2px solid var(--default-msg-color);
  background-color: var(--default-msg-color);
  border-radius: 10px;
  width: fit-content;
  max-width: 750px !important;
  box-sizing: border-box;
  display: inline-block;
  padding: 8px !important;
  margin: 0;
  margin-bottom: 4px;
  position: relative;
  box-shadow: 0 0 6px 1px rgba(0,0,0,1); /* comment out if don't want shadow */
  text-shadow: 0 0 5px rgba(0,0,0,1);
  
  /* the call text in dms */
  .container__235ca { 
	color: rgba(255,255,255,.75); /* Makes "call" text a bit more readable */
	
	/* makes timestamp lighter */
	[class^="timestamp_"] { filter: brightness(1.5);  }
	
	/* the username */
	.anchor_edefb8:hover { 
		filter: brightness(0.5);
		.username__703b9 { filter: brightness(1.5); }
	}
  }
} 

/* button container shadow */
[class^="buttonContainer__"] > .buttons__5126c > .buttonsInner__5126c { box-shadow: 0 0 5px 1px rgba(0,0,0,1); } /* comment out if don't want shadow */


/* Accents */
.messageListItem__5126c {
	h1, h2, h3, h4, .embedTitle__623de { color: var(--default-accent) !important; }
}

/* Your color :3 */
.messageListItem__5126c[data-is-self="true"] {
	padding-right: 8px !important;
	.cozyMessage__5126c [class^="contents"] > [class^="markup"]:not(:empty, code),
	.cozyMessage__5126c .container__9271d,
	.contents_c19a55 > .messageContent_c19a55,
	[class^=visualMediaItemContainer_], [class^=inlineMediaEmbed_]  {
	  border: 2px solid var(--self-color);
	  background-color: var(--self-color);
	  color: var(--self-text-color);
		--text-brand: var(--self-accent);
		--text-link: var(--self-accent);
		--mention-foreground: var(--self-accent);
	} 
	
	 /* editing self message */
	 .scrollableContainer__74017 { 
		border: 2px solid var(--self-color);
		background-color: var(--self-color); 
		box-shadow: 0 0 6px 1px rgba(0,0,0,1);
		}
	
	.slateTextArea_ec4baf {
		background-color: rgba(0,0,0,0.5);
		border: 0px;
		box-shadow: none;
		margin-top: 3px;
	}
	
	.timestamp_c19a55 { margin-right: auto; }
	
	/* Other colors n such */
	h1, h2, h3, h4, .embedTitle__623de { color: var(--self-accent) !important; }
	[class^="contents_"] {
		/* username stuff */
		[class^="username"] { 
			color: var(--self-text-color) !important; 
			text-shadow: 0 0 4px rgba(0,0,0,1);
		}
		
		/* time shadow */
		[class^="timestamp_"]:has(time) {
			color: var(--self-text-color);
			filter: brightness(0.5);
		}
		
		[class^="header_"]{ padding-right: 2px; } 
	} 
	
	/* fixes */
	.filenameLinkWrapper__0ccae a { margin-right: 8px; } /* file name move */
	.metadata__0ccae { direction: ltr; } /* file size no longer [size] then num */
}

/* User header adjustments */
[class^="contents_"] [class^="header_"]{ 
	margin-bottom: 5px;
	text-shadow: 0 0 4px rgba(0,0,0,1);
	padding-left: 2px;
} 

/**
 * Username (and tags) and avatar stuff
 */
[class^="contents_"] {
	/* Adds shadowing to avatar (not avatar deco) */
	.avatar_c19a55 {
	  border-radius: 35%;
	  box-shadow: 0 2px 4px 1px black; /* comment out if don't want shadow */
	}	
	
	/* embed shadow */
	[class^="mosaicItemMediaMosaic_"] { 
		border: 2px solid red;
		border-radius: 10px;
		box-shadow: 0 0 5px 1px rgba(0,0,0,1); 
	} 
	
	/* makes timestamp next to user lighter */
	[class^="timestamp"]:has(time) { 
		color: var(--default-text-color); 
		filter: brightness(0.5);
	}
}

/**
 * Fixes and other stuff like that
 */

/* Adds shadow to the reaction & welcome thingy */
[class^="container"] {	
	.reaction__23977 { 
	  margin-top: 2px;
	  box-shadow: 0 0px 4px 1px black; /* comment out if don't want shadow */
	  border: 2px solid var(--default-msg-color); 
	}
	
	[class^="welcomeCTA_"] [class^="welcomeCTAButtonOuter_"] {
		margin-top: 2px;
		box-shadow: 0 0px 4px 1px black;
	}
}

/** 
 * Lightens username next to nickname			   
 * This is if you have the "ShowMeYourName" Plugin Enabled 
 */
[class^="vc-smyn-suffix"]{ filter: brightness(1.25); }