@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

:root {
    --discord-dark: #36393f;
    --discord-darker: #2f3136;
    --discord-light: #40444b;
    --discord-accent: #5865F2;
    --discord-text: #dcddde;
    --discord-muted: #72767d;
    --discord-success: #43b581;
    --discord-error: #f04747;
}

.input-group {
    margin-bottom: 16px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #d9d9d9;
    font-size: 0.925rem;
}

input, textarea {
    width: 100%;
    padding: 10px;
    background: #1e1f22 !important;
    border: none !important;
    border-radius: 4px !important;
    color: #e5e7e8;
    font-size: 0.825rem !important;
    transition: border-color 0.2s;
}

input:focus, textarea:focus {
    outline: none;
    border: none;
}

textarea {
    min-height: 80px;
    resize: vertical;
}

.field-controls {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.embed-field {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.embed-field input {
    flex: 1;
    background-color: var(--discord-dark);
}

.preview-section {
    margin-top: 1.4rem;
    padding: 0.5rem;
    background-color: var(--discord-dark);
    border-radius: 4px;
    font-family: 'Source Sans Pro', sans-serif !important;
}
.log-section {
    margin-block: 2rem;
    padding: 16px;
    background-color: var(--discord-dark);
    border-radius: 4px;
}

.message-header {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.avatar {
    width: 37px;
    height: 37px;
    margin-top: 2.5px;
    border-radius: 50%;
    object-fit: cover;
}

.embed-preview {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    width: 100%;
    max-width: 100%;
    margin-top: 8px;
    padding: 12px;
    background-color: var(--discord-darker);
    border-left: 4px solid transparent;
    border-radius: 4px;
}

.embed-preview-img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    margin-top: 8px;
}
.embed-field {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 100%;
}

#previewContent, .embed-preview div, .embed-preview span, .embed-preview strong {
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* .embed-field-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
} */

.embed-field-container .embed-field {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 48%;
}

.embed-field.inline {
    display: inline-block;
    min-width: auto;
    max-width: 48%;
    vertical-align: top;
}

.embed-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    color: #b9bbbe;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.jsonEditor::-webkit-scrollbar {
  width: 5px;
}

.jsonEditor::-webkit-scrollbar-track {
  margin: 5px;
  background: #1e1f22db;
}

.jsonEditor::-webkit-scrollbar-thumb {
  background: #485de598 !important;
  border-radius: 3px;
}
.jsonEditor::-webkit-scrollbar-thumb:hover {
  background: #cfd2d6e8 !important;
}

.toast {
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    display: none;
    z-index: 1000;
}

.toast.success {
    background-color: var(--discord-success);
}

.toast.error {
    background-color: var(--discord-error);
}

.delete-field {
    padding: 3px 6px;
    font-size: 1.225rem;
}

@media (max-width: 600px) {
    .embed-field {
        flex-direction: column;
    }
}