/* ============================================================
   DISCORD — All Discord integration styles
   Covers: webhook button, message preview, auth nav,
   webhook selector, status messages, and webhook manager.
   ============================================================ */

/* === DISCORD AUTH (Navbar) === */

.discord-login-btn-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: calc(8px * var(--master-scale)) calc(16px * var(--master-scale));
    background: #5865F2;
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-smooth);
    white-space: nowrap;
}

.discord-login-btn-nav:hover {
    background: #4752C4;
    transform: translateY(calc(-1px * var(--master-scale)));
}

.discord-login-btn-nav svg {
    flex-shrink: 0;
}

.discord-user-info-nav {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: calc(4px * var(--master-scale)) calc(12px * var(--master-scale));
    background: var(--bg-glass);
    border: 1px solid rgba(88, 101, 242, 0.3);
    border-radius: var(--border-radius-sm);
}

.discord-avatar-nav {
    width: calc(28px * var(--master-scale));
    height: calc(28px * var(--master-scale));
    border-radius: 50%;
    border: 2px solid #5865F2;
}

.discord-username-nav {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--font-size-sm);
}

.discord-logout-btn-nav {
    padding: calc(4px * var(--master-scale)) calc(10px * var(--master-scale));
    background: var(--accent-error);
    color: white;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-size: calc(0.75rem * var(--master-scale));
    font-weight: 600;
    transition: all var(--transition-smooth);
}

.discord-logout-btn-nav:hover {
    background: #dc2626;
}


/* === DISCORD WEBHOOK BUTTON (in results) === */

.discord-webhook-button {
    background: linear-gradient(135deg,
        rgba(114, 137, 218, 0.2) 0%,
        rgba(88, 101, 242, 0.2) 100%) !important;
    border: 2px solid rgba(114, 137, 218, 0.5) !important;
    color: #7289da !important;
}

.discord-webhook-button:hover {
    background: linear-gradient(135deg,
        rgba(114, 137, 218, 0.3) 0%,
        rgba(88, 101, 242, 0.3) 100%) !important;
    border-color: rgba(114, 137, 218, 0.8) !important;
    box-shadow: 0 0 20px rgba(114, 137, 218, 0.3);
}


/* === DISCORD STATUS MESSAGES === */

#discord-status-message {
    padding: var(--space-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
}

#discord-status-message.success {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid var(--accent-success);
    color: var(--accent-success);
}

#discord-status-message.error {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--accent-error);
    color: var(--accent-error);
}


/* === DISCORD MESSAGE PREVIEW === */

.message-preview-section {
    margin-bottom: var(--space-md);
}

.message-preview {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-primary);
    border-radius: var(--border-radius-sm);
    min-height: calc(120px * var(--master-scale));
}

.preview-content {
    margin-top: var(--space-sm);
}

.discord-message-preview {
    background-color: #313338;
    padding: calc(16px * var(--master-scale));
    border-radius: calc(8px * var(--master-scale));
    font-family: "Whitney", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: calc(15px * var(--master-scale));
    color: #dcddde;
}

.discord-author {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.discord-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
}

.discord-username {
    font-weight: 600;
    color: #ffffff;
    margin-right: 6px;
}

.discord-timestamp {
    color: #72767d;
    font-size: 12px;
}

.discord-content a {
    color: #00aff4;
    text-decoration: none;
}

.discord-content a:hover {
    text-decoration: underline;
}

.discord-app-badge {
    background: #5865f2;
    color: #ffffff;
    font-size: calc(10px * var(--master-scale));
    font-weight: 600;
    padding: calc(2px * var(--master-scale)) calc(4px * var(--master-scale));
    border-radius: calc(3px * var(--master-scale));
    margin-left: calc(4px * var(--master-scale));
    margin-right: calc(4px * var(--master-scale));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* === DISCORD WEBHOOK SELECTOR (settings form) === */

.webhook-group {
    border-top: 1px solid var(--border-primary);
    padding-top: var(--space-md);
    margin-top: var(--space-md);
}

/* Remove double border when inside a settings-section */
.settings-section .webhook-group {
    border-top: none;
    padding-top: 0;
}

.webhook-info {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
    font-size: calc(14px * var(--master-scale));
    color: var(--text-muted);
}

.webhook-status-success {
    color: var(--success-color) !important;
}

.webhook-status-error {
    color: var(--error-color) !important;
}

#saved-webhook-select {
    flex: 1;
    cursor: pointer;
    appearance: none;
    background-color: var(--bg-glass);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right calc(12px * var(--master-scale)) center;
    padding: calc(8px * var(--master-scale)) calc(12px * var(--master-scale));
    padding-right: calc(36px * var(--master-scale));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#saved-webhook-select:hover {
    border-color: var(--border-accent);
    background-color: var(--bg-glass-hover);
}

#saved-webhook-select:focus {
    outline: 0;
    border-color: var(--border-primary);
    box-shadow: none;
    background-color: var(--bg-glass-hover);
}

#saved-webhook-select option {
    background-color: #1a1a1a !important;
    color: var(--text-primary) !important;
    padding: calc(8px * var(--master-scale));
}

#saved-webhook-select option:first-child {
    color: var(--text-muted) !important;
    font-style: italic;
}

#saved-webhook-select option:hover {
    background-color: rgba(0, 170, 255, 0.2) !important;
    color: var(--text-primary) !important;
}

#saved-webhook-select option:first-child:hover {
    background-color: #1a1a1a !important;
    color: var(--text-muted) !important;
}

#saved-webhook-select option:checked {
    background-color: var(--accent-primary) !important;
    color: white !important;
    font-weight: 600;
}

#saved-webhook-select option:first-child:checked {
    background-color: #1a1a1a !important;
    color: var(--text-muted) !important;
    font-weight: normal;
}

#discord-webhook-url {
    margin-top: var(--space-sm);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Webhook status message */
#webhook-status {
    margin-top: var(--space-xs);
    padding: calc(8px * var(--master-scale));
    border-radius: var(--border-radius-sm);
    display: none;
    opacity: 0;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    transition: opacity 0.2s ease;
}

#webhook-status.webhook-status-success {
    background-color: rgba(67, 181, 129, 0.1);
    border: 1px solid rgba(67, 181, 129, 0.3);
    color: #43b581 !important;
    display: block;
    opacity: 1;
}

#webhook-status.webhook-status-error {
    background-color: rgba(240, 71, 71, 0.1);
    border: 1px solid rgba(240, 71, 71, 0.3);
    color: #f04747 !important;
    display: block;
    opacity: 1;
}

.webhook-group label {
    color: #7289da;
    font-weight: 600;
}

/* Webhook prefix row */
.webhook-prefix-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex-wrap: wrap;
    color: #a8b8cc;
}

.webhook-prefix-input {
    width: calc(110px * var(--master-scale)) !important;
    padding: calc(5px * var(--master-scale)) calc(10px * var(--master-scale)) !important;
    font-size: calc(0.82rem * var(--text-scale)) !important;
}

.webhook-prefix-preview {
    font-size: calc(0.8rem * var(--text-scale));
    color: var(--text-muted);
    white-space: nowrap;
}

.webhook-prefix-preview span {
    color: var(--accent-primary);
    font-weight: 600;
}

.webhook-prefix-row .form-info.webhook-info,
.webhook-prefix-row .form-info {
    color: #a8b8cc;
}


/* === RESPONSIVE — Discord auth === */

@media (max-width: 480px) {
    .discord-auth-container {
        margin: var(--space-xs) 0;
    }

    .discord-login-btn {
        width: 100%;
        justify-content: center;
        padding: calc(10px * var(--master-scale));
    }

    .discord-user-info {
        width: 100%;
        flex-direction: column;
        text-align: center;
    }

    .discord-avatar {
        width: calc(40px * var(--master-scale));
        height: calc(40px * var(--master-scale));
    }
}