/*!
 * Dark theme for Convos users
 * Adapted from Seedpool theme
 * Last Updated: 2025/03/18
 */

 :root {
	/* Backgrounds */
	--body-bg: #000000;
	--sidebar-left-bg: #070707;
	--sidebar-right-bg: #181e20;
	--highlight-color-bg: #0e0d0d;
	--code-bg: #444;
	--input-bg: #070707;
	--chat-input-bg: #070707;
	--autocomplete-bg: #181e20;
  
	/* Text colors */
	--text-color: #ffffff;
	--link-color: #84ce88;
	--sidebar-left-text: #b7c5d1;
	--sidebar-right-text: #b7c5d1;
	--input-color: #ffffff;
	--input-placeholder-color: #3d99db;
	--button-color: #000000;
  
	/* Buttons */
	--button-bg: #84ce88;
	--button-border: 1px solid #84ce88;
	--button-danger-bg: #e74c3c;
	--button-disabled-bg: #444;
	--button-disabled-color: #666;
	--button-focus-outline: 1px solid #84ce88;
  
	/* Miscellaneous */
	--hr-border: 1px solid #444;
	--focus-outline: 0 0 3px 3px rgba(132, 206, 136, 0.5);
	--success-color: #338833;
	--error-color: #ee2222;
	--autocomplete-focus-bg: #333333;
	--autocomplete-border: 1px solid #888;
  }
  
  html {
	scrollbar-color: hsl(192, 100%, 25%) hsla(192, 100%, 25%, 10%);
	scrollbar-width: thin;
  }
  
  body {
	background-color: var(--body-bg);
	color: var(--text-color);
  }
  
  #sidebar {
	background-color: var(--sidebar-left-bg);
	color: var(--sidebar-left-text);
  }
  
  #sidebar .logo-container {
	padding-top: 5px;
  }
  
  #sidebar .logo-inverted {
	height: 35px;
  }
  
  #chat {
	background-color: var(--body-bg);
	color: var(--text-color);
  }
  
  #chat .msg[data-type="action"] .from::before,
  #chat .msg[data-type="action"] .from,
  #chat .msg[data-type="action"] .content,
  #chat .msg[data-type="action"] .user {
	font-style: italic;
  }
  
  #chat .msg[data-type="motd"] .text,
  #chat .msg[data-type="monospace_block"] .text,
  #chat .toggle-content {
	background-color: var(--sidebar-right-bg);
  }
  
  #chat .highlight {
	background-color: var(--highlight-color-bg);
  }
  
  #chat .userlist {
	background-color: var(--sidebar-right-bg);
	color: var(--sidebar-right-text);
  }
  
  #chat .userlist .search {
	background-color: var(--input-bg);
	color: var(--input-color);
  }
  
  #chat .show-more .btn {
	background: rgba(88, 110, 117, 0.3);
	color: var(--text-color);
	border: 0;
	border-radius: 0;
	text-transform: uppercase;
	transition: background 0.2s;
  }
  
  #chat .show-more .btn:hover {
	background: var(--button-bg);
  }
  
  #form {
	background-color: var(--chat-input-bg);
	color: var(--input-color);
  }
  
  #form .input {
	background-color: var(--input-bg);
	color: var(--input-color);
	border: var(--button-border);
  }
  
  #form .input::placeholder {
	color: var(--input-placeholder-color);
  }
  
  button {
	background-color: var(--button-bg);
	color: var(--button-color);
	border: var(--button-border);
  }
  
  button:disabled {
	background-color: var(--button-disabled-bg);
	color: var(--button-disabled-color);
  }
  
  button:focus {
	outline: var(--button-focus-outline);
  }
  
  pre,
  code {
	background-color: var(--code-bg);
	color: var(--text-color);
  }
  
  ::placeholder {
	color: var(--input-placeholder-color);
	opacity: 1; /* Fix opacity in Firefox */
  }
  
  ::-webkit-scrollbar-thumb:vertical {
	background: hsl(0deg 0% 20%);
  }
  
  ::-webkit-scrollbar-thumb:vertical:hover {
	background: #ddd;
  }
  
  ::-webkit-scrollbar-thumb:vertical:active {
	background: #ddd;
  }
  
  .context-menu-item,
  .textcomplete-item {
	background-color: var(--autocomplete-bg);
	color: var(--text-color);
	transition: none;
  }
  
  .context-menu-item.active,
  .textcomplete-item:hover {
	background-color: var(--autocomplete-focus-bg);
  }
  
  .context-menu-divider {
	background-color: #aaa;
  }
  
  #footer {
	height: 43px;
	line-height: 43px;
	background-color: var(--sidebar-left-bg);
	color: var(--text-color);
  }
  
  @media (max-width: 479px) {
	#chat .msg[data-type="message"] .from .user::before {
	  content: "<";
	}
  
	#chat .msg[data-type="message"] .from .user::after {
	  content: ">";
	}
  }