/* Discord-style Documentation Boxes */
.discord-box {
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
  border-left: 4px solid;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
}

.discord-box::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.discord-box-content {
  margin-left: 32px;
}

/* Info Box */
.discord-box-info {
  background-color: rgba(88, 101, 242, 0.1);
  border-left-color: #5865f2;
  color: #e3e5e8;
}

.discord-box-info::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5C10.5523 5 11 5.44772 11 6ZM9 9C8.44772 9 8 9.44772 8 10C8 10.5523 8.44772 11 9 11V14C9 14.5523 9.44772 15 10 15H11C11.5523 15 12 14.5523 12 14C12 13.4477 11.5523 13 11 13V10C11 9.44772 10.5523 9 10 9H9Z' fill='%235865f2'/%3E%3C/svg%3E");
}

/* Warning Box */
.discord-box-warning {
  background-color: rgba(250, 166, 26, 0.1);
  border-left-color: #faa61a;
  color: #e3e5e8;
}

.discord-box-warning::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.25723 3.08002C9.02169 1.66835 10.9783 1.66835 11.7428 3.08002L18.8678 15.58C19.6322 16.9917 18.6539 18.75 17.125 18.75H2.87496C1.346 18.75 0.367813 16.9917 1.13223 15.58L8.25723 3.08002ZM10 8.75C10.6904 8.75 11.25 9.30964 11.25 10V12C11.25 12.6904 10.6904 13.25 10 13.25C9.30964 13.25 8.75 12.6904 8.75 12V10C8.75 9.30964 9.30964 8.75 10 8.75ZM10 16.25C10.6904 16.25 11.25 15.6904 11.25 15C11.25 14.3096 10.6904 13.75 10 13.75C9.30964 13.75 8.75 14.3096 8.75 15C8.75 15.6904 9.30964 16.25 10 16.25Z' fill='%23faa61a'/%3E%3C/svg%3E");
}

/* Error/Danger Box */
.discord-box-error {
  background-color: rgba(237, 66, 69, 0.1);
  border-left-color: #ed4245;
  color: #e3e5e8;
}

.discord-box-error::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM8.70711 7.29289C8.31658 6.90237 7.68342 6.90237 7.29289 7.29289C6.90237 7.68342 6.90237 8.31658 7.29289 8.70711L8.58579 10L7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071C7.68342 13.0976 8.31658 13.0976 8.70711 12.7071L10 11.4142L11.2929 12.7071C11.6834 13.0976 12.3166 13.0976 12.7071 12.7071C13.0976 12.3166 13.0976 11.6834 12.7071 11.2929L11.4142 10L12.7071 8.70711C13.0976 8.31658 13.0976 7.68342 12.7071 7.29289C12.3166 6.90237 11.6834 6.90237 11.2929 7.29289L10 8.58579L8.70711 7.29289Z' fill='%23ed4245'/%3E%3C/svg%3E");
}

/* Success Box */
.discord-box-success {
  background-color: rgba(87, 242, 135, 0.1);
  border-left-color: #57f287;
  color: #e3e5e8;
}

.discord-box-success::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM13.7071 8.70711C14.0976 8.31658 14.0976 7.68342 13.7071 7.29289C13.3166 6.90237 12.6834 6.90237 12.2929 7.29289L9 10.5858L7.70711 9.29289C7.31658 8.90237 6.68342 8.90237 6.29289 9.29289C5.90237 9.68342 5.90237 10.3166 6.29289 10.7071L8.29289 12.7071C8.68342 13.0976 9.31658 13.0976 9.70711 12.7071L13.7071 8.70711Z' fill='%2357f287'/%3E%3C/svg%3E");
}

/* Note Box (neutral) */
.discord-box-note {
  background-color: rgba(116, 127, 141, 0.1);
  border-left-color: #747f8d;
  color: #e3e5e8;
}

.discord-box-note::before {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3 4C3 3.44772 3.44772 3 4 3H16C16.5523 3 17 3.44772 17 4V16C17 16.5523 16.5523 17 16 17H4C3.44772 17 3 16.5523 3 16V4ZM6 7C5.44772 7 5 7.44772 5 8C5 8.55228 5.44772 9 6 9H14C14.5523 9 15 8.55228 15 8C15 7.44772 14.5523 7 14 7H6ZM5 12C5 11.4477 5.44772 11 6 11H10C10.5523 11 11 11.4477 11 12C11 12.5523 10.5523 13 10 13H6C5.44772 13 5 12.5523 5 12Z' fill='%23747f8d'/%3E%3C/svg%3E");
}

/* Collapsible Documentation Boxes */
.discord-collapsible {
  border-radius: 8px;
  margin: 16px 0;
  border: 1px solid #40444b;
  background-color: rgba(54, 57, 63, 0.3);
  overflow: hidden;
}

.discord-collapsible-header {
  padding: 12px 16px;
  background-color: rgba(64, 68, 75, 0.5);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  transition: background-color 0.2s ease;
  border: none;
  width: 100%;
  text-align: left;
  color: #e3e5e8;
  font-size: 14px;
  font-weight: 500;
}

.discord-collapsible-header:hover {
  background-color: rgba(64, 68, 75, 0.7);
}

.discord-collapsible-icon {
  margin-right: 8px;
  transition: transform 0.2s ease;
  font-size: 12px;
  color: #b9bbbe;
}

.discord-collapsible.expanded .discord-collapsible-icon {
  transform: rotate(90deg);
}

.discord-collapsible-content {
  padding: 16px;
  display: none;
  color: #dcddde;
  line-height: 1.5;
}

.discord-collapsible.expanded .discord-collapsible-content {
  display: block;
}

/* Additional styling for content inside boxes */
.discord-box p:last-child,
.discord-collapsible-content p:last-child {
  margin-bottom: 0;
}

.discord-box strong,
.discord-collapsible-content strong {
  color: #ffffff;
}

.discord-box code,
.discord-collapsible-content code {
  background-color: rgba(47, 49, 54, 0.6);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: "Consolas", "Monaco", "Courier New", monospace;
  font-size: 85%;
}

/* Enhanced Warning Elements */
.warning-highlight {
  background-color: rgba(250, 166, 26, 0.2);
  color: #faa61a;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.danger-highlight {
  background-color: rgba(237, 66, 69, 0.2);
  color: #ed4245;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.success-highlight {
  background-color: rgba(87, 242, 135, 0.2);
  color: #57f287;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}

.info-highlight {
  background-color: rgba(88, 101, 242, 0.2);
  color: #5865f2;
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 500;
}