/**
 * @name Rounded & Jinx
 * @description Rounded discord theme with Jinx home logo.
 * @author _SR_Off_ ポケモン
 * @version 2.3.75
 * @website https://github.com/SROff2371/Rounded-And-Jinx
 * @source https://github.com/SROff2371/Rounded-And-Jinx/blob/main/Rounded-And-Jinx.theme.css
 * @authorId 1318162462771646506
*/

/* IMPORTANT: make sure to enable dark mode in discord settings for the theme to apply properly!!! */

@import url('https://sroff2371.github.io/midnight.css');
@import url('https://sroff2371.github.io/Samsung.css');
@import url('https://sroff2371.github.io/main.min.css');
@import url("https://raw.githubusercontent.com/ColynOrg/CSS-Snippets/main/UsernameSymbol.css");
@import url("https://dablulite.github.io/css-snippets/AccountSettingsRefresh/import.css");
@import url("https://raw.githubusercontent.com/Andrew6rant/Discord-plugins-and-themes/refs/heads/main/BetterMessageButtons.theme.css");
@import url("https://aushevahmad.github.io/awesome-css/modules/channeltweaks.css");
@import url("https://dablulite.github.io/css-snippets/DeclutterBar/import.css");
@import url("https://minidiscordthemes.github.io/FluentStatusIcons/FluentStatusIcons.theme.css");
@import url("https://minidiscordthemes.github.io/MinimalAddonCards/MinimalAddonCards.theme.css");
@import url("https://minidiscordthemes.github.io/Snippets/RoleTint/main.css");

/* customize things here */
:root {
	/* font, change to 'gg sans' for default discord font*/
	--font: 'figtree';

	--settingsicons: show;
    --si-size: 18px;
    --si-gap: 14px;
	/* top left corner text */
	--corner-text: '_SR_Off_ ポケモン';

	/* color of status indicators and window controls */
	--online-indicator: #23a55a; /* change to #23a55a for default green */
	--dnd-indicator: #f13f43; /* change to #f13f43 for default red */
	--idle-indicator: #f0b232; /* change to #f0b232 for default yellow */
	--streaming-indicator: #593695; /* change to #593695 for default purple */

	/* accent colors */
	--accent-1: hsl(204, 81%, 58%); /* links */
	--accent-2: hsl(0, 0%, 29%); /* general unread/mention elements */
	--accent-3: hsl(0, 0%, 22%); /* accent buttons */
	--accent-4: hsl(0, 0%, 27%); /* accent buttons when hovered */
	--accent-5: hsl(0, 0%, 64%); /* accent buttons when clicked */
	--mention: hsla(190, 80%, 52%, 0.1); /* mentions & mention messages */
	--mention-hover: hsla(190, 80%, 52%, 0.05); /* mentions & mention messages when hovered */

	/* text colors */
	--text-0: white; /* text on colored elements */
	--text-1: var(--text-2); /* other normally white text */
	--text-2: hsl(220, 25%, 70%); /* headings and important text */
	--text-3: hsl(220, 15%, 60%); /* normal text */
	--text-4: hsl(220, 15%, 40%); /* icon buttons and channels */
	--text-5: hsl(220, 15%, 25%); /* muted channels/chats and timestamps */
	--mention: hsl(220, 15%, 10%); /* mentions & mention messages */
	--mention-hover: hsl(222, 14%, 18%); /* mentions & mention messages when hovered */

	/* background and dark colors */
	--bg-1: hsl(220, 15%, 20%); /* dark buttons when clicked */
	--bg-2: hsl(220, 15%, 16%); /* dark buttons */
	--bg-3: hsl(225, 12%, 13%); /* spacing, secondary elements */
	--bg-4: hsl(220, 15%, 10%); /* main background color */
	--hover: hsla(230, 20%, 40%, 0.1); /* channels and buttons when hovered */
	--active: hsla(220, 20%, 40%, 0.2); /* channels and buttons when clicked or selected */
	--message-hover: hsla(220, 0%, 0%, 0.1); /* messages when hovered */

	/* amount of spacing and padding */
	--spacing: 12px;

	/* animations */
	/* ALL ANIMATIONS CAN BE DISABLED WITH REDUCED MOTION IN DISCORD SETTINGS */
	--list-item-transition: 0.2s ease; /* channels/members/settings hover transition */
	--unread-bar-transition: 0.2s ease; /* unread bar moving into view transition */
	--moon-spin-transition: 0.4s ease; /* moon icon spin */
	--icon-spin-transition: 1s ease; /* round icon button spin (settings, emoji, etc.) */

	/* corner roundness (border-radius) */
	--roundness-xl: 22px; /* roundness of big panel outer corners */
	--roundness-l: 20px; /* popout panels */
	--roundness-m: 16px; /* smaller panels, images, embeds */
	--roundness-s: 12px; /* members, settings inputs */
	--roundness-xs: 10px; /* channels, buttons */
	--roundness-xxs: 8px; /* searchbar, small elements */

	/* direct messages moon icon */
	/* change to block to show, none to hide */
	--discord-icon: none; /* discord icon */
	--moon-icon: none; /* moon icon */
	--moon-icon-url: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/Font_Awesome_5_solid_moon.svg'); /* custom icon url */
	--moon-icon-size: auto;

	/* filter uncolorable elements to fit theme */
	/* (just set to none, they're too much work to configure) */
	--login-bg-filter: saturate(0.3) hue-rotate(-15deg) brightness(0.4); /* login background artwork */
	--green-to-accent-3-filter: hue-rotate(56deg) saturate(1.43); /* add friend page explore icon */
	--blurple-to-accent-3-filter: hue-rotate(304deg) saturate(0.84) brightness(1.2); /* add friend page school icon */

	/* nav buttons */
	--windows-nav: none;
	--custom-nav: block;-home-image: url('https://i.imgur.com/233d55Y.gif');
	--home-image: url('https://media4.giphy.com/media/AyjIjwg4TfupNGYItQ/giphy.gif?cid=6c09b952qr33xcadz7ks5t4fhw33dmngh00tyhim3kz5s8o5&ep=v1_internal_gif_by_id&rid=giphy.gif&ct=g');
}

div[data-list-item-id="guildsnav___home"] {
    background: var(--home-image) center/250% no-repeat;
}


#app-mount [data-list-item-id="guildsnav___home"]>div {
	color: transparent;
	background-color: transparent;
}

[class^='wordmarkWindows']::after {
    content: var(--corner-text);
    display: inline-block;
    position: relative;
    height: 16px;
    line-height: 16px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 900;
    color: rgb(255, 255, 255);
    transform: scaleX(1.2);
    margin-left: 15px;
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.5), 0 0 4px rgba(255, 255, 255, 0.3);
}

/* App launcher reposition */
.channelTextArea_a7d72e {
    position: relative;
}

.channelAppLauncher_df39bd {
    position: absolute;
    top: -50px;
    right: 16px;;
}
/*Shake animation hover to the text area when you don't have permission !*/


/* Reactions Hover */
[class^=reaction_]:not(:has([class^=burstGlow_])) .emoji {
	transition: transform 0.5s ease;
  }
  [class^=reaction_]:not(:has([class^=burstGlow_])):hover .emoji {
	transform: translateY(-10px) scale(1.5);
  }

  /* no line clamp on new profiles */

[class*=descriptionClamp] {
	-webkit-line-clamp: 9999999;
  }
  
  [class*=viewFullBio] {
	display: none;
  }


  [class^="sidebar_"] [class^="panels_"] {
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	border: 1px solid var(--background-modifier-accent);
	border-radius: 20px;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.45);
  }
  
  [class^="sidebar_"] [class^="panels_"] [class^="container_"],
  [class^="sidebar_"] [class^="panels_"] [class^="panel_"] {
	background: transparent !important;
  }
  
  [class^="sidebar_"] [class^="panels_"] [class^="container_"] [class^="avatarWrapper_"] + [class^="flex_"] {
	margin-left: -10px;
  }
  
  #vc-spotify-player {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
  }
  
  /* Nitro Theme Shit */
  html.custom-theme-background [class^="sidebar_"] {
	  background: var(--bg-overlay-3);
  }
  html.custom-theme-background [class^="sidebar_"] [class^="panels_"] {
	  background: var(--bg-overlay-1);
  }[class^="sidebar_"] [class^="panels_"] {
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	border: 1px solid var(--background-modifier-accent);
	border-radius: 20px;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.45);
  }
  
  [class^="sidebar_"] [class^="panels_"] [class^="container_"],
  [class^="sidebar_"] [class^="panels_"] [class^="panel_"] {
	background: transparent !important;
  }
  
  [class^="sidebar_"] [class^="panels_"] [class^="container_"] [class^="avatarWrapper_"] + [class^="flex_"] {
	margin-left: -10px;
  }
  
  #vc-spotify-player {
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
  }
  
  /* Nitro Theme Shit */
  html.custom-theme-background [class^="sidebar_"] {
	  background: var(--bg-overlay-3);
  }
  html.custom-theme-background [class^="sidebar_"] [class^="panels_"] {
	  background: var(--bg-overlay-1);
  }





/* Jump To Present Bar Revamp */
[class*="jumpToPresentBar"] {
    display: contents;
}

[class*="jumpToPresentBar"] > button:first-child {
    display: none;
}

[class*="jumpToPresentBar"] > button:last-child {
    position: absolute;
    z-index: 1;
    bottom: 24px;
    right: 22px;
    padding: 8px !important;
    height: auto;
    background-color: #2e353b20;
    box-shadow: var(--elevation-high);
    border-radius: 100px;
    display: flex;
    font-size: 0px;
    color: transparent;
    transition: font-size .2s .1s, color .2s, padding .4s .1s;
}

[class*="jumpToPresentBar"] > button svg {
    order: -1;
    margin: 0px;
    height: 24px;
    width: 24px;
    top: auto;
    margin-right: 0px;
    margin-left: 0px;
    color: #FFFFFF;
    transition: margin .6s;
}

[class*="jumpToPresentBar"]:hover > button {
    padding: 8px 18px !important;
    font-size: 14px;
    color: #FFFFFF;
    transition: font-size .2s, color .2s .1s, padding .4s;
}

[class*="jumpToPresentBar"]:hover > button svg {
    margin-right: 2px;
    margin-left: -6px;
}


/* Sélectionne l'élément avec les classes correspondantes */
div.circleIconButton__5bc7e.discoveryIcon_ef3116 {
  background-image: url('https://i.pinimg.com/originals/5b/88/6b/5b886b0949e236ef25c7a95a11b01fcd.gif'); /* Ton image animée */
  background-size: cover;
  background-position: center;
  border: none;
  cursor: pointer;
}


div.circleIconButton__5bc7e.discoveryIcon_ef3116:hover {
  opacity: 0.8; 
}

div.circleIconButton__5bc7e  {
    background-image: url('https://64.media.tumblr.com/21093522d1617bc865eed5c589d0aa40/19f46930603678b5-5f/s540x810/6fe9e39ab1854f9e1ffd064f2f4bc28dccd01785.gif');
    background-size: cover;
    background-position: center;
}
svg.circleIcon__5bc7e {
    display: none;
}

/* Cacher l'icône SVG actuelle */
div.vc-toolbox-btn.iconWrapper__9293f.clickable__9293f svg {
  display: none;
}

/* Remplacer l'icône SVG par une image personnalisée */
div.vc-toolbox-btn.iconWrapper__9293f.clickable__9293f {
  background-image: url('https://static.vecteezy.com/ti/vecteur-libre/p1/615553-icone-de-fleche-vers-le-bas-de-vecteur-gratuit-vectoriel.jpg'); /* Lien vers ton image personnalisée */
  background-size: 30px; /* Assure-toi que l'image couvre tout le bouton */
  background-position: center; /* Centrer l'image */
  width: 26px; /* Ajuste la largeur du bouton selon l'image */
  height: 26px; /* Ajuste la hauteur du bouton selon l'image */
  border-radius: 50%; /* Pour un bouton circulaire */
  border: ; /* Si tu veux retirer la bordure */
  cursor: pointer; /* Pour avoir un curseur de type main au survol */
}

div.vc-toolbox-btn.iconWrapper__9293f.clickable__9293f.selected__9293f {
  background-image: url('https://static.vecteezy.com/ti/vecteur-libre/p1/615375-icone-de-fleche-haut-vecteur-gratuit-vectoriel.jpg'); /* Lien vers ton image personnalisée */
  background-size: 30px; /* Assure-toi que l'image couvre tout le bouton */
  background-position: center; /* Centrer l'image */
  width: 26px; /* Ajuste la largeur du bouton selon l'image */
  height: 26px; /* Ajuste la hauteur du bouton selon l'image */
  border-radius: 50%; /* Pour un bouton circulaire */
  border: ; /* Si tu veux retirer la bordure */
  cursor: pointer; /* Pour avoir un curseur de type main au survol */
}